├── .editorconfig ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .prettierrc ├── .storybook ├── main.js └── preview.js ├── .travis.yml ├── README.md ├── example ├── .eslintcache ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json └── src │ ├── App.js │ ├── App.module.css │ ├── App.test.js │ ├── index.css │ └── index.js ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── iframe.html ├── index.html ├── main.9e61bfeb65b62b0229c3.bundle.js ├── main.c7936f793a3995c0dd60.bundle.js ├── main.c7936f793a3995c0dd60.bundle.js.map ├── runtime~main.870e8ee0658e83d05c6b.bundle.js ├── runtime~main.c7936f793a3995c0dd60.bundle.js ├── runtime~main.c7936f793a3995c0dd60.bundle.js.map ├── static │ └── media │ │ ├── code-brackets.2e1112d7.svg │ │ ├── colors.a4bd0486.svg │ │ ├── comments.a3859089.svg │ │ ├── direction.b770f9af.svg │ │ ├── flow.edad2ac1.svg │ │ ├── plugin.d494b228.svg │ │ ├── repo.6d496322.svg │ │ └── stackalt.dba9fbb3.svg ├── vendors~main.c7936f793a3995c0dd60.bundle.js ├── vendors~main.c7936f793a3995c0dd60.bundle.js.LICENSE.txt ├── vendors~main.c7936f793a3995c0dd60.bundle.js.map ├── vendors~main.d8ca881aa3dc4552c9b0.bundle.js └── vendors~main.d8ca881aa3dc4552c9b0.bundle.js.LICENSE.txt ├── src ├── .eslintrc ├── Components │ ├── Button │ │ ├── Button.js │ │ └── Button.module.css │ └── TextBox │ │ └── TextBox.js ├── Utilities │ └── FadeAnimation │ │ └── Fade.js ├── index.js ├── index.test.js ├── stories │ ├── Button.stories.js │ ├── ButtonDropdown.stories.js │ ├── Introduction.stories.mdx │ ├── Misc │ │ ├── Button.js │ │ ├── Header.js │ │ ├── Header.stories.js │ │ ├── Page.js │ │ ├── Page.stories.js │ │ ├── button.css │ │ ├── header.css │ │ └── page.css │ ├── TextBox.stories.js │ └── TextBoxExamplePage │ │ ├── TextBoxExamplePage.js │ │ └── TextBoxExamplePage.module.css └── styles.css └── storybook-static ├── favicon.ico ├── iframe.html ├── index.html ├── main.9e61bfeb65b62b0229c3.bundle.js ├── main.c7936f793a3995c0dd60.bundle.js ├── main.c7936f793a3995c0dd60.bundle.js.map ├── runtime~main.870e8ee0658e83d05c6b.bundle.js ├── runtime~main.c7936f793a3995c0dd60.bundle.js ├── runtime~main.c7936f793a3995c0dd60.bundle.js.map ├── static └── media │ ├── code-brackets.2e1112d7.svg │ ├── colors.a4bd0486.svg │ ├── comments.a3859089.svg │ ├── direction.b770f9af.svg │ ├── flow.edad2ac1.svg │ ├── plugin.d494b228.svg │ ├── repo.6d496322.svg │ └── stackalt.dba9fbb3.svg ├── vendors~main.c7936f793a3995c0dd60.bundle.js ├── vendors~main.c7936f793a3995c0dd60.bundle.js.LICENSE.txt ├── vendors~main.c7936f793a3995c0dd60.bundle.js.map ├── vendors~main.d8ca881aa3dc4552c9b0.bundle.js └── vendors~main.d8ca881aa3dc4552c9b0.bundle.js.LICENSE.txt /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build/ 2 | dist/ 3 | node_modules/ 4 | .snapshots/ 5 | *.min.js -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "extends": [ 4 | "standard", 5 | "standard-react", 6 | "plugin:prettier/recommended", 7 | "prettier/standard", 8 | "prettier/react" 9 | ], 10 | "env": { 11 | "node": true 12 | }, 13 | "parserOptions": { 14 | "ecmaVersion": 2020, 15 | "ecmaFeatures": { 16 | "legacyDecorators": true, 17 | "jsx": true 18 | } 19 | }, 20 | "settings": { 21 | "react": { 22 | "version": "16" 23 | } 24 | }, 25 | "rules": { 26 | "space-before-function-paren": 0, 27 | "react/prop-types": 0, 28 | "react/jsx-handler-names": 0, 29 | "react/jsx-fragments": 0, 30 | "react/no-unused-prop-types": 0, 31 | "import/export": 0 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # See https://help.github.com/ignore-files/ for more about ignoring files. 3 | 4 | # dependencies 5 | node_modules 6 | 7 | # builds 8 | build 9 | dist 10 | .rpt2_cache 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | .env.local 16 | .env.development.local 17 | .env.test.local 18 | .env.production.local 19 | 20 | npm-debug.log* 21 | yarn-debug.log* 22 | yarn-error.log* 23 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "jsxSingleQuote": true, 4 | "semi": false, 5 | "tabWidth": 2, 6 | "bracketSpacing": true, 7 | "jsxBracketSameLine": false, 8 | "arrowParens": "always", 9 | "trailingComma": "none" 10 | } 11 | -------------------------------------------------------------------------------- /.storybook/main.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], 3 | addons: [ 4 | '@storybook/addon-links', 5 | '@storybook/addon-essentials', 6 | 'storybook-css-modules-preset' 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /.storybook/preview.js: -------------------------------------------------------------------------------- 1 | import '../dist/index.css' 2 | 3 | export const parameters = { 4 | actions: { argTypesRegex: '^on[A-Z].*' } 5 | } 6 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 12 4 | - 10 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 |

Welcome to notion-components 👋

3 | 4 |

5 | 6 | 7 | 8 | Version 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | License: MIT 17 | 18 | 19 | 20 | 21 | 22 | Twitter: Sarve\_\_\_tanvesh 23 | 24 | 25 | 26 |

27 | 28 | > React Component Library for the minimalist 29 | ## Prerequisites 30 | 31 | 32 | 33 | - node >=10 34 | 35 | 36 | 37 | ## Install 38 | 39 | 40 | 41 | ```sh 42 | 43 | npm install notion-components 44 | 45 | ``` 46 | 47 | > When importing a component make sure to import the css file too. Like this 48 | ```jsx 49 | import 'notion-components/dist/index.css' 50 | ``` 51 | 52 | ### Simple `TextBox` Component 53 | [![TextBoxDemo.gif](https://s4.gifyu.com/images/TextBoxDemo.gif)](https://gifyu.com/image/akA2) 54 | 55 | Renders an *Invisible* `TextBox`. In the above gif, There are two `TextBox` components. One is the heading, beside the emoji. Another one is the description, with a Lot of Text. 56 | 57 | The Component itself is customizable with your css, So you have to set things like, `font-size` and `font-weight` to layout the `TextBox` accordingly. 58 | 59 | `App.js` : 60 | ```jsx 61 | import React, { useState } from 'react' 62 | import { TextBox } from 'notion-components' 63 | import 'notion-components/dist/index.css' 64 | 65 | import './App.css' 66 | 67 | const App = () => { 68 | const [text, setText] = useState('Meeting Notes') 69 | 70 | const onChangeHandler = (value) => { 71 | setText(value) 72 | } 73 | return ( 74 | 80 | ); 81 | } 82 | export default App 83 | ``` 84 | 85 | `App.css` : 86 | ```css 87 | .textbox{ 88 | font-size: 4rem; 89 | font-weight: 700; 90 | } 91 | ``` 92 | 93 | ### Simple `Button` props 94 | | Attribute | Type | Default | Description 95 | | :-------- | :--------: | :-------: | :------------------------------------------------------------------------------------------------------- | 96 | | placeholder | `string` | `empty string` | Renders when the `TextBox` is empty 97 | | disabled | `bool` | `false` | Should render a disabled `TextBox`, if set to `true` | 98 | | className | `string` | `null` | Pass your css className here. Works with `css modules` too. | 99 | | onChangeHandler | `function` | `null` | A function that gets `value` inside TextBox as an argument at every keypress | 100 | | placeholderColor | `string | css color` | `'#e1e1e0'` | Css color that sets the placeholder color| 101 | | initialValue | `string` | `null` | The value inside the `TextBox` before the initial render | 102 | 103 | 104 | 105 | ### Simple `Button` rendered with a Dropdown 106 | 107 | [![buttonDropdownNeural.gif](https://s2.gifyu.com/images/buttonDropdownNeural.gif)](https://gifyu.com/image/Uvr8) 108 | 109 | Renders a `Button` with a dropdown. We have to pass an array of `options` with two properties, `value` and `function` like in the example below. 110 | ```jsx 111 | import React from 'react' 112 | import { Button } from 'notion-components' 113 | import 'notion-components/dist/index.css' 114 | 115 | const App = () => { 116 | const first = () => { 117 | console.log('1st option was clicked') 118 | } 119 | const second = () => { 120 | console.log('2nd option was clicked') 121 | } 122 | const third = () => { 123 | console.log('3rd option was clicked') 124 | } 125 | const onPress = () => { 126 | console.log('Did you just click me?!') 127 | } 128 | 129 | const options = [ 130 | { 131 | value: 'Started from the bottom', 132 | function: first 133 | }, 134 | { 135 | value: 'Sometimes its the journey', 136 | function: second 137 | }, 138 | { 139 | value: 'Trust the process', 140 | function: third 141 | } 142 | ] 143 | 144 | return ( 145 | 148 | ); 149 | } 150 | export default App 151 | ``` 152 | ### Simple `Button` rendered without a Dropdown 153 | 154 | ![Button without a dropdown](https://s2.gifyu.com/images/buttonMost.gif) 155 | 156 | Renders a `Button` without a dropdown. If the `option` prop's length is found to be 0 or if its value is `null`, then the deopdown will not render at all. 157 | 158 | ```jsx 159 | import React from 'react' 160 | import { Button } from 'notion-components' 161 | import 'notion-components/dist/index.css' 162 | 163 | const App = () => { 164 | const onPress = () => { 165 | console.log('Did you just click me?!') 166 | } 167 | return ( 168 | 171 | ); 172 | } 173 | export default App 174 | ``` 175 | 176 | ### Simple `Button` props 177 | | Attribute | Type | Default | Description 178 | | :-------- | :--------: | :-------: | :------------------------------------------------------------------------------------------------------- | 179 | | onClick | `function` | `null` | Default click/press function 180 | | disabled | `bool` | `false` | Should render a disabled button | 181 | | options | `array` | `null` | An array of objects with properties .If empty array is passed, Dropdown button will not render | 182 | | top | `string` | `"80%"` | Controls the `top` css property for the Dropdown | 183 | | left | `string` | `"0px"` | Controls the `left` css property for the Dropdown| 184 | | width | `string` | `null` | Controls the `width` css property for the Dropdown | 185 | 186 | 187 | 188 | ## Author 189 | 190 | 👤 **tanvesh01** 191 | 192 | 193 | * Website: [tanvesh.vercel.app](https://tanvesh.vercel.app/) 194 | 195 | * Twitter: [@Sarve\_\_\_tanvesh](https://twitter.com/Sarve\_\_\_tanvesh) 196 | 197 | * Github: [@tanvesh01](https://github.com/tanvesh01) 198 | 199 | * LinkedIn: [@tanvesh01](https://linkedin.com/in/tanvesh01) 200 | 201 | ## Show your support 202 | Please Give a ⭐️ if this project helped you! It will motivate me to keep working on this! 203 | ## License 204 | MIT. Copyright (c) 2021 Tanvesh Sarve. 205 | -------------------------------------------------------------------------------- /example/.eslintcache: -------------------------------------------------------------------------------- 1 | [{"/mnt/e/MERN/ComponentLibrary/react-essentials/example/src/stories/Button.stories.js":"1","/mnt/e/MERN/ComponentLibrary/react-essentials/example/src/stories/Page.stories.js":"2","/mnt/e/MERN/ComponentLibrary/react-essentials/example/src/stories/Header.stories.js":"3","/mnt/e/MERN/ComponentLibrary/react-essentials/example/src/stories/Header.js":"4","/mnt/e/MERN/ComponentLibrary/react-essentials/example/src/stories/Page.js":"5","/mnt/e/MERN/ComponentLibrary/react-essentials/example/src/stories/Button.js":"6","/mnt/e/MERN/ComponentLibrary/react-essentials/example/src/index.js":"7","/mnt/e/MERN/ComponentLibrary/react-essentials/example/src/App.js":"8","/mnt/e/MERN/ComponentLibrary/react-essentials/example/src/stories/NotionButton.stories.js":"9"},{"size":619,"mtime":1612238808540,"results":"10","hashOfConfig":"11"},{"size":424,"mtime":1612238808590,"results":"12","hashOfConfig":"11"},{"size":325,"mtime":1612238808564,"results":"13","hashOfConfig":"11"},{"size":1463,"mtime":1612238808552,"results":"14","hashOfConfig":"11"},{"size":2521,"mtime":1612238808576,"results":"15","hashOfConfig":"11"},{"size":1101,"mtime":1612238808494,"results":"16","hashOfConfig":"11"},{"size":164,"mtime":1610200652717,"results":"17","hashOfConfig":"11"},{"size":1287,"mtime":1612241980989,"results":"18","hashOfConfig":"11"},{"size":150,"mtime":1612256089856,"results":"19","hashOfConfig":"11"},{"filePath":"20","messages":"21","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"22","usedDeprecatedRules":"23"},"12iy47z",{"filePath":"24","messages":"25","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"26","usedDeprecatedRules":"23"},{"filePath":"27","messages":"28","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"29","usedDeprecatedRules":"23"},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"23"},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"34"},{"filePath":"35","messages":"36","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"23"},{"filePath":"37","messages":"38","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"39","messages":"40","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"41","messages":"42","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/mnt/e/MERN/ComponentLibrary/react-essentials/example/src/stories/Button.stories.js",["43"],"import React from 'react';\n\nimport { Button } from './Button';\n\nexport default {\n title: 'Example/Button',\n component: Button,\n argTypes: {\n backgroundColor: { control: 'color' },\n },\n};\n\nconst Template = (args) => \n)"}},Primary.parameters),Primary.__docgenInfo={description:"",methods:[],displayName:"Primary"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/Button.stories.js"]={name:"Primary",docgenInfo:Primary.__docgenInfo,path:"src/stories/Button.stories.js"})},1126:function(module,exports,__webpack_require__){(exports=__webpack_require__(161)(!1)).push([module.i,".WELMiOixIMYgK-Ez0MoBu {\n cursor: pointer;\n color: white;\n border-radius: 5px;\n background-color: rgb(46, 170, 220);\n border: 1px solid #0088be;\n font-weight: 600;\n margin: 0;\n}\n.WELMiOixIMYgK-Ez0MoBu:active {\n background-color: rgb(9, 144, 197);\n}\n\n.WELMiOixIMYgK-Ez0MoBu:disabled {\n opacity: 0.6;\n cursor: auto;\n}\n\n._2So8-C1p9GY5QYS85I4ysh {\n padding: 0.5rem 1.1rem;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n.iP3qSaYr7LHJtewyJTciU {\n display: flex;\n align-items: center;\n padding: 0.5rem;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n background-repeat: no-repeat, repeat;\n background-position: center;\n background-size: 0.65em auto, 100%;\n}\n._2p-gudrWZUD2IGJjmmK8DE {\n z-index: 1;\n padding: 1rem;\n display: flex;\n flex-direction: column;\n border-radius: 5px;\n position: absolute;\n transform-origin: 50% bottom;\n width: -webkit-fit-content;\n width: -moz-fit-content;\n width: fit-content;\n background-color: white;\n transform-origin: center center;\n box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px,\n rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;\n}\n._1iy2e8W8Hf_JqywvC1NnLj {\n font-weight: 500;\n}\n._1WD1oG_6PdL-HZK4UTLER1 {\n margin: 0;\n padding: 0 10px;\n text-align: start;\n}\n._3ANwzNjifStsbl1C3Q0AUN {\n list-style-type: none;\n margin: 5px 0 0 0;\n padding: 0;\n}\n._3oHV8CUC4xHkhCPTI7ZhzQ {\n white-space: nowrap;\n border-radius: 5px;\n display: flex;\n align-items: center;\n margin: 5px 0;\n cursor: pointer;\n padding: 5px 10px 5px 10px;\n}\n._3oHV8CUC4xHkhCPTI7ZhzQ:hover {\n background-color: rgba(15, 15, 15, 0.05);\n}\n\n._3oHV8CUC4xHkhCPTI7ZhzQ:active {\n background-color: rgba(15, 15, 15, 0.137);\n}\n\n._1D6ar9W-VF0fVVFTLYtJOs {\n display: flex;\n position: relative;\n width: -webkit-fit-content;\n width: -moz-fit-content;\n width: fit-content;\n}\n._3wnbSJ5myByLw9SwMxvd4T {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n /* background-color: aliceblue; */\n}\n",""]),exports.locals={root:"WELMiOixIMYgK-Ez0MoBu",mainButton:"_2So8-C1p9GY5QYS85I4ysh",dropDownButton:"iP3qSaYr7LHJtewyJTciU",dropdown:"_2p-gudrWZUD2IGJjmmK8DE",headingContainer:"_1iy2e8W8Hf_JqywvC1NnLj",heading:"_1WD1oG_6PdL-HZK4UTLER1",listContainer:"_3ANwzNjifStsbl1C3Q0AUN",items:"_3oHV8CUC4xHkhCPTI7ZhzQ",container:"_1D6ar9W-VF0fVVFTLYtJOs",overlay:"_3wnbSJ5myByLw9SwMxvd4T"},module.exports=exports},1127:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Secondary",(function(){return Secondary}));__webpack_require__(3);var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(5),_Components_Button_Button__WEBPACK_IMPORTED_MODULE_3__=(__webpack_require__(0),__webpack_require__(131)),_storybook_addon_actions__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__(120);__webpack_exports__.default={title:"Example/Button with a Dropdown",component:_Components_Button_Button__WEBPACK_IMPORTED_MODULE_3__.a,argTypes:{disabled:{description:"When true, Should render a disabled button",control:"boolean",table:{type:{summary:"something short",detail:"something really really long"}}},options:{control:"array"},left:{control:"text"}}};var options=[{value:"Started from the bottom",function:Object(_storybook_addon_actions__WEBPACK_IMPORTED_MODULE_4__.action)("Started from the bottom")},{value:"Sometimes its the journey",function:function second(){console.log("2nd option was clicked")}},{value:"Trust the process",function:function third(){console.log("3rd option was clicked")}}],Secondary=function Secondary(args){return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Components_Button_Button__WEBPACK_IMPORTED_MODULE_3__.a,Object.assign({onClick:Object(_storybook_addon_actions__WEBPACK_IMPORTED_MODULE_4__.action)("Did you just click me?!")},args,{options:options,children:"Button"}))};Secondary.displayName="Secondary",Secondary.storyName="Button with dropdown",Secondary.parameters=Object.assign({storySource:{source:"(args) => (\n \n Button\n \n)"}},Secondary.parameters),Secondary.__docgenInfo={description:"",methods:[],displayName:"Secondary"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/ButtonDropdown.stories.js"]={name:"Secondary",docgenInfo:Secondary.__docgenInfo,path:"src/stories/ButtonDropdown.stories.js"})},1128:function(module,exports,__webpack_require__){var api=__webpack_require__(160),content=__webpack_require__(1129);"string"==typeof(content=content.__esModule?content.default:content)&&(content=[[module.i,content,""]]);var options={insert:"head",singleton:!1};api(content,options);module.exports=content.locals||{}},1129:function(module,exports,__webpack_require__){(exports=__webpack_require__(161)(!1)).push([module.i,".storybook-button {\n font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n font-weight: 700;\n border: 0;\n border-radius: 3em;\n cursor: pointer;\n display: inline-block;\n line-height: 1;\n}\n.storybook-button--primary {\n color: white;\n background-color: #1ea7fd;\n}\n.storybook-button--secondary {\n color: #333;\n background-color: transparent;\n box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;\n}\n.storybook-button--small {\n font-size: 12px;\n padding: 10px 16px;\n}\n.storybook-button--medium {\n font-size: 14px;\n padding: 11px 20px;\n}\n.storybook-button--large {\n font-size: 16px;\n padding: 12px 24px;\n}\n",""]),module.exports=exports},1130:function(module,exports,__webpack_require__){var api=__webpack_require__(160),content=__webpack_require__(1131);"string"==typeof(content=content.__esModule?content.default:content)&&(content=[[module.i,content,""]]);var options={insert:"head",singleton:!1};api(content,options);module.exports=content.locals||{}},1131:function(module,exports,__webpack_require__){(exports=__webpack_require__(161)(!1)).push([module.i,".wrapper {\n font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n padding: 15px 20px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\nsvg {\n display: inline-block;\n vertical-align: top;\n}\n\nh1 {\n font-weight: 900;\n font-size: 20px;\n line-height: 1;\n margin: 6px 0 6px 10px;\n display: inline-block;\n vertical-align: top;\n}\n\nbutton + button {\n margin-left: 10px;\n}\n",""]),module.exports=exports},1132:function(module,exports,__webpack_require__){var api=__webpack_require__(160),content=__webpack_require__(1133);"string"==typeof(content=content.__esModule?content.default:content)&&(content=[[module.i,content,""]]);var options={insert:"head",singleton:!1};api(content,options);module.exports=content.locals||{}},1133:function(module,exports,__webpack_require__){(exports=__webpack_require__(161)(!1)).push([module.i,"section {\n font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n font-size: 14px;\n line-height: 24px;\n padding: 48px 20px;\n margin: 0 auto;\n max-width: 600px;\n color: #333;\n}\n\nh2 {\n font-weight: 900;\n font-size: 32px;\n line-height: 1;\n margin: 0 0 4px;\n display: inline-block;\n vertical-align: top;\n}\n\np {\n margin: 1em 0;\n}\n\na {\n text-decoration: none;\n color: #1ea7fd;\n}\n\nul {\n padding-left: 30px;\n margin: 1em 0;\n}\n\nli {\n margin-bottom: 8px;\n}\n\n.tip {\n display: inline-block;\n border-radius: 1em;\n font-size: 11px;\n line-height: 12px;\n font-weight: 700;\n background: #e7fdd8;\n color: #66bf3c;\n padding: 4px 12px;\n margin-right: 10px;\n vertical-align: top;\n}\n\n.tip-wrapper {\n font-size: 13px;\n line-height: 20px;\n margin-top: 40px;\n margin-bottom: 40px;\n}\n\n.tip-wrapper svg {\n display: inline-block;\n height: 12px;\n width: 12px;\n margin-right: 4px;\n vertical-align: top;\n margin-top: 3px;\n}\n\n.tip-wrapper svg path {\n fill: #1ea7fd;\n}\n",""]),module.exports=exports},1138:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"LoggedIn",(function(){return LoggedIn})),__webpack_require__.d(__webpack_exports__,"LoggedOut",(function(){return LoggedOut}));__webpack_require__(177),__webpack_require__(3);var jsx_runtime=__webpack_require__(5),prop_types=(__webpack_require__(0),__webpack_require__(1)),prop_types_default=__webpack_require__.n(prop_types),Header=__webpack_require__(163),Page_Page=(__webpack_require__(1132),function Page(_ref){var user=_ref.user,onLogin=_ref.onLogin,onLogout=_ref.onLogout,onCreateAccount=_ref.onCreateAccount;return Object(jsx_runtime.jsxs)("article",{children:[Object(jsx_runtime.jsx)(Header.a,{user:user,onLogin:onLogin,onLogout:onLogout,onCreateAccount:onCreateAccount}),Object(jsx_runtime.jsxs)("section",{children:[Object(jsx_runtime.jsx)("h2",{children:"Pages in Storybook"}),Object(jsx_runtime.jsxs)("p",{children:["We recommend building UIs with a"," ",Object(jsx_runtime.jsx)("a",{href:"https://componentdriven.org",target:"_blank",rel:"noopener noreferrer",children:Object(jsx_runtime.jsx)("strong",{children:"component-driven"})})," ","process starting with atomic components and ending with pages."]}),Object(jsx_runtime.jsx)("p",{children:"Render pages with mock data. This makes it easy to build and review page states without needing to navigate to them in your app. Here are some handy patterns for managing page data in Storybook:"}),Object(jsx_runtime.jsxs)("ul",{children:[Object(jsx_runtime.jsx)("li",{children:'Use a higher-level connected component. Storybook helps you compose such data from the "args" of child component stories'}),Object(jsx_runtime.jsx)("li",{children:"Assemble data in the page component from your services. You can mock these services out using Storybook."})]}),Object(jsx_runtime.jsxs)("p",{children:["Get a guided tutorial on component-driven development at"," ",Object(jsx_runtime.jsx)("a",{href:"https://www.learnstorybook.com",target:"_blank",rel:"noopener noreferrer",children:"Learn Storybook"}),". Read more in the"," ",Object(jsx_runtime.jsx)("a",{href:"https://storybook.js.org/docs",target:"_blank",rel:"noopener noreferrer",children:"docs"}),"."]}),Object(jsx_runtime.jsxs)("div",{className:"tip-wrapper",children:[Object(jsx_runtime.jsx)("span",{className:"tip",children:"Tip"})," Adjust the width of the canvas with the"," ",Object(jsx_runtime.jsx)("svg",{width:"10",height:"10",viewBox:"0 0 12 12",xmlns:"http://www.w3.org/2000/svg",children:Object(jsx_runtime.jsx)("g",{fill:"none",fillRule:"evenodd",children:Object(jsx_runtime.jsx)("path",{d:"M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z",id:"a",fill:"#999"})})}),"Viewports addon in the toolbar"]})]})]})});Page_Page.displayName="Page",Page_Page.propTypes={user:prop_types_default.a.shape({}),onLogin:prop_types_default.a.func.isRequired,onLogout:prop_types_default.a.func.isRequired,onCreateAccount:prop_types_default.a.func.isRequired},Page_Page.defaultProps={user:null},Page_Page.__docgenInfo={description:"",methods:[],displayName:"Page",props:{user:{defaultValue:{value:"null",computed:!1},type:{name:"shape",value:{}},required:!1,description:""},onLogin:{type:{name:"func"},required:!0,description:""},onLogout:{type:{name:"func"},required:!0,description:""},onCreateAccount:{type:{name:"func"},required:!0,description:""}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/Page.js"]={name:"Page",docgenInfo:Page_Page.__docgenInfo,path:"src/stories/Page.js"});var Header_stories=__webpack_require__(215),Page_stories_Template=(__webpack_exports__.default={title:"Example/Page",component:Page_Page},function Template(args){return Object(jsx_runtime.jsx)(Page_Page,Object.assign({},args))});Page_stories_Template.displayName="Template";var LoggedIn=Page_stories_Template.bind({});LoggedIn.args=Object.assign({},Header_stories.LoggedIn.args);var LoggedOut=Page_stories_Template.bind({});LoggedOut.args=Object.assign({},Header_stories.LoggedOut.args),LoggedIn.parameters=Object.assign({storySource:{source:"(args) => "}},LoggedIn.parameters),LoggedOut.parameters=Object.assign({storySource:{source:"(args) => "}},LoggedOut.parameters)},131:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__(19),__webpack_require__(15),__webpack_require__(22);var jsx_runtime=__webpack_require__(5),react=__webpack_require__(0),react_default=__webpack_require__.n(react),Button_module=__webpack_require__(69),Button_module_default=__webpack_require__.n(Button_module);function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(arr)))return;var _arr=[],_n=!0,_d=!1,_e=void 0;try{for(var _s,_i=arr[Symbol.iterator]();!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);iarr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i0?Object(jsx_runtime.jsxs)(react.Fragment,{children:[Object(jsx_runtime.jsx)("button",{disabled:disabled||!1,onClick:function onClick(){return setDisplay(!display)},className:"".concat(Button_module_default.a.root," ").concat(Button_module_default.a.dropDownButton),children:Object(jsx_runtime.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1rem",height:"1rem",fill:"white",viewBox:"0 0 24 24",children:Object(jsx_runtime.jsx)("path",{d:"M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z"})})}),Object(jsx_runtime.jsx)(FadeAnimation_Fade,{left:left,top:top,show:display,children:Object(jsx_runtime.jsxs)("div",{className:Button_module_default.a.dropdown,style:width?{width:width}:null,children:[Object(jsx_runtime.jsx)("div",{className:Button_module_default.a.headingContainer,children:Object(jsx_runtime.jsx)("p",{className:Button_module_default.a.heading,children:" Dropdown"})}),Object(jsx_runtime.jsx)("ul",{className:Button_module_default.a.listContainer,children:options.map((function(item){return Object(jsx_runtime.jsx)("li",{onClick:function onClick(){item.function(),setDisplay(!1)},className:Button_module_default.a.items,children:item.value})}))})]})})," "]}):null]})};Button_Button.displayName="Button",Button_Button.propTypes={left:prop_types_default.a.string,right:prop_types_default.a.string,width:prop_types_default.a.string,options:prop_types_default.a.array,disabled:prop_types_default.a.bool,onClick:prop_types_default.a.func},Button_Button.__docgenInfo={description:"",methods:[],displayName:"Button",props:{left:{type:{name:"string"},required:!1,description:""},right:{type:{name:"string"},required:!1,description:""},width:{type:{name:"string"},required:!1,description:""},options:{type:{name:"array"},required:!1,description:""},disabled:{type:{name:"bool"},required:!1,description:""},onClick:{type:{name:"func"},required:!1,description:""}}};__webpack_exports__.a=Button_Button;"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Components/Button/Button.js"]={name:"Button",docgenInfo:Button_Button.__docgenInfo,path:"src/Components/Button/Button.js"})},163:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return Header_Header}));var jsx_runtime=__webpack_require__(5),prop_types=(__webpack_require__(0),__webpack_require__(1)),prop_types_default=__webpack_require__.n(prop_types);__webpack_require__(18),__webpack_require__(48),__webpack_require__(3),__webpack_require__(7),__webpack_require__(1128);function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var Button_Button=function Button(_ref){var primary=_ref.primary,backgroundColor=_ref.backgroundColor,size=_ref.size,label=_ref.label,props=_objectWithoutProperties(_ref,["primary","backgroundColor","size","label"]),mode=primary?"storybook-button--primary":"storybook-button--secondary";return Object(jsx_runtime.jsx)("button",Object.assign({type:"button",className:["storybook-button","storybook-button--".concat(size),mode].join(" "),style:backgroundColor&&{backgroundColor:backgroundColor}},props,{children:label}))};Button_Button.displayName="Button",Button_Button.propTypes={primary:prop_types_default.a.bool,backgroundColor:prop_types_default.a.string,size:prop_types_default.a.oneOf(["small","medium","large"]),label:prop_types_default.a.string.isRequired,onClick:prop_types_default.a.func},Button_Button.defaultProps={backgroundColor:null,primary:!1,size:"medium",onClick:void 0},Button_Button.__docgenInfo={description:"Primary UI component for user interaction",methods:[],displayName:"Button",props:{backgroundColor:{defaultValue:{value:"null",computed:!1},type:{name:"string"},required:!1,description:"What background color to use"},primary:{defaultValue:{value:"false",computed:!1},type:{name:"bool"},required:!1,description:"Is this the principal call to action on the page?"},size:{defaultValue:{value:"'medium'",computed:!1},type:{name:"enum",value:[{value:"'small'",computed:!1},{value:"'medium'",computed:!1},{value:"'large'",computed:!1}]},required:!1,description:"How large should the button be?"},onClick:{defaultValue:{value:"undefined",computed:!0},type:{name:"func"},required:!1,description:"Optional click handler"},label:{type:{name:"string"},required:!0,description:"Button contents"}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/Button.js"]={name:"Button",docgenInfo:Button_Button.__docgenInfo,path:"src/stories/Button.js"});__webpack_require__(1130);var Header_Header=function Header(_ref){var user=_ref.user,onLogin=_ref.onLogin,onLogout=_ref.onLogout,onCreateAccount=_ref.onCreateAccount;return Object(jsx_runtime.jsx)("header",{children:Object(jsx_runtime.jsxs)("div",{className:"wrapper",children:[Object(jsx_runtime.jsxs)("div",{children:[Object(jsx_runtime.jsx)("svg",{width:"32",height:"32",viewBox:"0 0 32 32",xmlns:"http://www.w3.org/2000/svg",children:Object(jsx_runtime.jsxs)("g",{fill:"none",fillRule:"evenodd",children:[Object(jsx_runtime.jsx)("path",{d:"M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z",fill:"#FFF"}),Object(jsx_runtime.jsx)("path",{d:"M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z",fill:"#555AB9"}),Object(jsx_runtime.jsx)("path",{d:"M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z",fill:"#91BAF8"})]})}),Object(jsx_runtime.jsx)("h1",{children:"Acme"})]}),Object(jsx_runtime.jsx)("div",{children:user?Object(jsx_runtime.jsx)(Button_Button,{size:"small",onClick:onLogout,label:"Log out"}):Object(jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[Object(jsx_runtime.jsx)(Button_Button,{size:"small",onClick:onLogin,label:"Log in"}),Object(jsx_runtime.jsx)(Button_Button,{primary:!0,size:"small",onClick:onCreateAccount,label:"Sign up"})]})})]})})};Header_Header.displayName="Header",Header_Header.propTypes={user:prop_types_default.a.shape({}),onLogin:prop_types_default.a.func.isRequired,onLogout:prop_types_default.a.func.isRequired,onCreateAccount:prop_types_default.a.func.isRequired},Header_Header.defaultProps={user:null},Header_Header.__docgenInfo={description:"",methods:[],displayName:"Header",props:{user:{defaultValue:{value:"null",computed:!1},type:{name:"shape",value:{}},required:!1,description:""},onLogin:{type:{name:"func"},required:!0,description:""},onLogout:{type:{name:"func"},required:!0,description:""},onCreateAccount:{type:{name:"func"},required:!0,description:""}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/Header.js"]={name:"Header",docgenInfo:Header_Header.__docgenInfo,path:"src/stories/Header.js"})},215:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"LoggedIn",(function(){return LoggedIn})),__webpack_require__.d(__webpack_exports__,"LoggedOut",(function(){return LoggedOut}));__webpack_require__(177),__webpack_require__(3);var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__(5),_Header__WEBPACK_IMPORTED_MODULE_4__=(__webpack_require__(0),__webpack_require__(163));__webpack_exports__.default={title:"Example/Header",component:_Header__WEBPACK_IMPORTED_MODULE_4__.a};var Template=function Template(args){return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Header__WEBPACK_IMPORTED_MODULE_4__.a,Object.assign({},args))};Template.displayName="Template";var LoggedIn=Template.bind({});LoggedIn.args={user:{}};var LoggedOut=Template.bind({});LoggedOut.args={},LoggedIn.parameters=Object.assign({storySource:{source:"(args) =>
"}},LoggedIn.parameters),LoggedOut.parameters=Object.assign({storySource:{source:"(args) =>
"}},LoggedOut.parameters)},488:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/code-brackets.2e1112d7.svg"},489:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/colors.a4bd0486.svg"},490:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/comments.a3859089.svg"},491:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/direction.b770f9af.svg"},492:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/flow.edad2ac1.svg"},493:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/plugin.d494b228.svg"},494:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/repo.6d496322.svg"},495:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/stackalt.dba9fbb3.svg"},498:function(module,exports,__webpack_require__){__webpack_require__(499),__webpack_require__(670),__webpack_require__(671),__webpack_require__(834),__webpack_require__(1052),__webpack_require__(1085),__webpack_require__(1093),__webpack_require__(1105),__webpack_require__(1107),__webpack_require__(1112),__webpack_require__(1114),module.exports=__webpack_require__(1120)},573:function(module,exports){},671:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);__webpack_require__(369)},69:function(module,exports,__webpack_require__){var api=__webpack_require__(160),content=__webpack_require__(1126);"string"==typeof(content=content.__esModule?content.default:content)&&(content=[[module.i,content,""]]);var options={insert:"head",singleton:!1};api(content,options);module.exports=content.locals||{}}},[[498,1,2]]]); 2 | //# sourceMappingURL=main.c7936f793a3995c0dd60.bundle.js.map -------------------------------------------------------------------------------- /public/main.c7936f793a3995c0dd60.bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"main.c7936f793a3995c0dd60.bundle.js","sources":["webpack:///main.c7936f793a3995c0dd60.bundle.js"],"mappings":"AAAA","sourceRoot":""} -------------------------------------------------------------------------------- /public/runtime~main.870e8ee0658e83d05c6b.bundle.js: -------------------------------------------------------------------------------- 1 | !function(modules){function webpackJsonpCallback(data){for(var moduleId,chunkId,chunkIds=data[0],moreModules=data[1],executeModules=data[2],i=0,resolves=[];iillustration/code-brackets -------------------------------------------------------------------------------- /public/static/media/colors.a4bd0486.svg: -------------------------------------------------------------------------------- 1 | illustration/colors -------------------------------------------------------------------------------- /public/static/media/comments.a3859089.svg: -------------------------------------------------------------------------------- 1 | illustration/comments -------------------------------------------------------------------------------- /public/static/media/direction.b770f9af.svg: -------------------------------------------------------------------------------- 1 | illustration/direction -------------------------------------------------------------------------------- /public/static/media/flow.edad2ac1.svg: -------------------------------------------------------------------------------- 1 | illustration/flow -------------------------------------------------------------------------------- /public/static/media/plugin.d494b228.svg: -------------------------------------------------------------------------------- 1 | illustration/plugin -------------------------------------------------------------------------------- /public/static/media/repo.6d496322.svg: -------------------------------------------------------------------------------- 1 | illustration/repo -------------------------------------------------------------------------------- /public/static/media/stackalt.dba9fbb3.svg: -------------------------------------------------------------------------------- 1 | illustration/stackalt -------------------------------------------------------------------------------- /public/vendors~main.c7936f793a3995c0dd60.bundle.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /* 2 | object-assign 3 | (c) Sindre Sorhus 4 | @license MIT 5 | */ 6 | 7 | /*! 8 | * OverlayScrollbars 9 | * https://github.com/KingSora/OverlayScrollbars 10 | * 11 | * Version: 1.13.0 12 | * 13 | * Copyright KingSora | Rene Haas. 14 | * https://github.com/KingSora 15 | * 16 | * Released under the MIT license. 17 | * Date: 02.08.2020 18 | */ 19 | 20 | /*! 21 | * The buffer module from node.js, for the browser. 22 | * 23 | * @author Feross Aboukhadijeh 24 | * @license MIT 25 | */ 26 | 27 | /*! 28 | * https://github.com/es-shims/es5-shim 29 | * @license es5-shim Copyright 2009-2020 by contributors, MIT License 30 | * see https://github.com/es-shims/es5-shim/blob/master/LICENSE 31 | */ 32 | 33 | /*! 34 | * https://github.com/paulmillr/es6-shim 35 | * @license es6-shim Copyright 2013-2016 by Paul Miller (http://paulmillr.com) 36 | * and contributors, MIT License 37 | * es6-shim: v0.35.4 38 | * see https://github.com/paulmillr/es6-shim/blob/0.35.3/LICENSE 39 | * Details and documentation: 40 | * https://github.com/paulmillr/es6-shim/ 41 | */ 42 | 43 | /*! 44 | * is-plain-object 45 | * 46 | * Copyright (c) 2014-2017, Jon Schlinkert. 47 | * Released under the MIT License. 48 | */ 49 | 50 | /*! 51 | * isobject 52 | * 53 | * Copyright (c) 2014-2017, Jon Schlinkert. 54 | * Released under the MIT License. 55 | */ 56 | 57 | /** 58 | * Prism: Lightweight, robust, elegant syntax highlighting 59 | * 60 | * @license MIT 61 | * @author Lea Verou 62 | * @namespace 63 | * @public 64 | */ 65 | 66 | /** @license React v0.19.1 67 | * scheduler.production.min.js 68 | * 69 | * Copyright (c) Facebook, Inc. and its affiliates. 70 | * 71 | * This source code is licensed under the MIT license found in the 72 | * LICENSE file in the root directory of this source tree. 73 | */ 74 | 75 | /** @license React v16.13.1 76 | * react-is.production.min.js 77 | * 78 | * Copyright (c) Facebook, Inc. and its affiliates. 79 | * 80 | * This source code is licensed under the MIT license found in the 81 | * LICENSE file in the root directory of this source tree. 82 | */ 83 | 84 | /** @license React v16.14.0 85 | * react-dom.production.min.js 86 | * 87 | * Copyright (c) Facebook, Inc. and its affiliates. 88 | * 89 | * This source code is licensed under the MIT license found in the 90 | * LICENSE file in the root directory of this source tree. 91 | */ 92 | 93 | /** @license React v16.14.0 94 | * react-jsx-runtime.production.min.js 95 | * 96 | * Copyright (c) Facebook, Inc. and its affiliates. 97 | * 98 | * This source code is licensed under the MIT license found in the 99 | * LICENSE file in the root directory of this source tree. 100 | */ 101 | 102 | /** @license React v16.14.0 103 | * react.production.min.js 104 | * 105 | * Copyright (c) Facebook, Inc. and its affiliates. 106 | * 107 | * This source code is licensed under the MIT license found in the 108 | * LICENSE file in the root directory of this source tree. 109 | */ 110 | 111 | //! stable.js 0.1.8, https://github.com/Two-Screen/stable 112 | 113 | //! © 2018 Angry Bytes and contributors. MIT licensed. 114 | -------------------------------------------------------------------------------- /public/vendors~main.c7936f793a3995c0dd60.bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"vendors~main.c7936f793a3995c0dd60.bundle.js","sources":["webpack:///vendors~main.c7936f793a3995c0dd60.bundle.js"],"mappings":";AAAA","sourceRoot":""} -------------------------------------------------------------------------------- /public/vendors~main.d8ca881aa3dc4552c9b0.bundle.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /* 2 | object-assign 3 | (c) Sindre Sorhus 4 | @license MIT 5 | */ 6 | 7 | /*! 8 | Copyright (c) 2017 Jed Watson. 9 | Licensed under the MIT License (MIT), see 10 | http://jedwatson.github.io/classnames 11 | */ 12 | 13 | /*! 14 | * Fuse.js v3.6.1 - Lightweight fuzzy-search (http://fusejs.io) 15 | * 16 | * Copyright (c) 2012-2017 Kirollos Risk (http://kiro.me) 17 | * All Rights Reserved. Apache Software License 2.0 18 | * 19 | * http://www.apache.org/licenses/LICENSE-2.0 20 | */ 21 | 22 | /*! 23 | * OverlayScrollbars 24 | * https://github.com/KingSora/OverlayScrollbars 25 | * 26 | * Version: 1.13.0 27 | * 28 | * Copyright KingSora | Rene Haas. 29 | * https://github.com/KingSora 30 | * 31 | * Released under the MIT license. 32 | * Date: 02.08.2020 33 | */ 34 | 35 | /*! 36 | * https://github.com/es-shims/es5-shim 37 | * @license es5-shim Copyright 2009-2020 by contributors, MIT License 38 | * see https://github.com/es-shims/es5-shim/blob/master/LICENSE 39 | */ 40 | 41 | /*! 42 | * https://github.com/paulmillr/es6-shim 43 | * @license es6-shim Copyright 2013-2016 by Paul Miller (http://paulmillr.com) 44 | * and contributors, MIT License 45 | * es6-shim: v0.35.4 46 | * see https://github.com/paulmillr/es6-shim/blob/0.35.3/LICENSE 47 | * Details and documentation: 48 | * https://github.com/paulmillr/es6-shim/ 49 | */ 50 | 51 | /*! 52 | * isobject 53 | * 54 | * Copyright (c) 2014-2017, Jon Schlinkert. 55 | * Released under the MIT License. 56 | */ 57 | 58 | /** 59 | * Prism: Lightweight, robust, elegant syntax highlighting 60 | * 61 | * @license MIT 62 | * @author Lea Verou 63 | * @namespace 64 | * @public 65 | */ 66 | 67 | /** @license React v0.19.1 68 | * scheduler.production.min.js 69 | * 70 | * Copyright (c) Facebook, Inc. and its affiliates. 71 | * 72 | * This source code is licensed under the MIT license found in the 73 | * LICENSE file in the root directory of this source tree. 74 | */ 75 | 76 | /** @license React v16.13.1 77 | * react-is.production.min.js 78 | * 79 | * Copyright (c) Facebook, Inc. and its affiliates. 80 | * 81 | * This source code is licensed under the MIT license found in the 82 | * LICENSE file in the root directory of this source tree. 83 | */ 84 | 85 | /** @license React v16.14.0 86 | * react-dom.production.min.js 87 | * 88 | * Copyright (c) Facebook, Inc. and its affiliates. 89 | * 90 | * This source code is licensed under the MIT license found in the 91 | * LICENSE file in the root directory of this source tree. 92 | */ 93 | 94 | /** @license React v16.14.0 95 | * react.production.min.js 96 | * 97 | * Copyright (c) Facebook, Inc. and its affiliates. 98 | * 99 | * This source code is licensed under the MIT license found in the 100 | * LICENSE file in the root directory of this source tree. 101 | */ 102 | 103 | /** @license React v17.0.1 104 | * react-is.production.min.js 105 | * 106 | * Copyright (c) Facebook, Inc. and its affiliates. 107 | * 108 | * This source code is licensed under the MIT license found in the 109 | * LICENSE file in the root directory of this source tree. 110 | */ 111 | 112 | //! stable.js 0.1.8, https://github.com/Two-Screen/stable 113 | 114 | //! © 2018 Angry Bytes and contributors. MIT licensed. 115 | -------------------------------------------------------------------------------- /src/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "jest": true 4 | }, 5 | "prettier/prettier": ["error", { 6 | 7 | "endOfLine":"auto" 8 | }] 9 | } 10 | -------------------------------------------------------------------------------- /src/Components/Button/Button.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from 'react' 2 | import classes from './Button.module.css' 3 | import Fade from '../../Utilities/FadeAnimation/Fade' 4 | import PropTypes from 'prop-types' 5 | 6 | const Button = ({ 7 | children, 8 | options = null, 9 | onClick = null, 10 | left = '0px', 11 | top = '80%', 12 | width = null, 13 | disabled = false 14 | }) => { 15 | const [display, setDisplay] = React.useState(false) 16 | return ( 17 |
18 | 32 | {display ? ( 33 |
setDisplay(false)} 35 | className={classes.overlay} 36 | >
37 | ) : null} 38 | 39 | {options && options.length > 0 ? ( 40 | 41 | 56 | 57 |
61 |
62 |

Dropdown

63 |
64 |
    65 | {options.map((item) => { 66 | return ( 67 |
  • { 69 | item.function() 70 | setDisplay(false) 71 | }} 72 | className={classes.items} 73 | > 74 | {item.value} 75 |
  • 76 | ) 77 | })} 78 |
79 |
80 |
{' '} 81 |
82 | ) : null} 83 |
84 | ) 85 | } 86 | 87 | Button.propTypes = { 88 | left: PropTypes.string, 89 | top: PropTypes.string, 90 | width: PropTypes.string, 91 | options: PropTypes.array, 92 | disabled: PropTypes.bool, 93 | onClick: PropTypes.func 94 | } 95 | 96 | export default Button 97 | -------------------------------------------------------------------------------- /src/Components/Button/Button.module.css: -------------------------------------------------------------------------------- 1 | .root { 2 | cursor: pointer; 3 | color: white; 4 | border-radius: 5px; 5 | background-color: rgb(46, 170, 220); 6 | border: 1px solid #0088be; 7 | font-weight: 600; 8 | margin: 0; 9 | } 10 | .root:active { 11 | background-color: rgb(9, 144, 197); 12 | } 13 | 14 | .root:disabled { 15 | opacity: 0.6; 16 | cursor: auto; 17 | } 18 | 19 | .mainButton { 20 | padding: 0.5rem 1.1rem; 21 | border-top-right-radius: 0; 22 | border-bottom-right-radius: 0; 23 | } 24 | .dropDownButton { 25 | display: flex; 26 | align-items: center; 27 | padding: 0.5rem; 28 | border-top-left-radius: 0; 29 | border-bottom-left-radius: 0; 30 | background-repeat: no-repeat, repeat; 31 | background-position: center; 32 | background-size: 0.65em auto, 100%; 33 | } 34 | .dropdown { 35 | z-index: 1; 36 | padding: 1rem; 37 | display: flex; 38 | flex-direction: column; 39 | border-radius: 5px; 40 | position: absolute; 41 | transform-origin: 50% bottom; 42 | width: fit-content; 43 | background-color: white; 44 | transform-origin: center center; 45 | box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, 46 | rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px; 47 | } 48 | .headingContainer { 49 | font-weight: 500; 50 | } 51 | .heading { 52 | margin: 0; 53 | padding: 0 10px; 54 | text-align: start; 55 | } 56 | .listContainer { 57 | list-style-type: none; 58 | margin: 5px 0 0 0; 59 | padding: 0; 60 | } 61 | .items { 62 | white-space: nowrap; 63 | border-radius: 5px; 64 | display: flex; 65 | align-items: center; 66 | margin: 5px 0; 67 | cursor: pointer; 68 | padding: 5px 10px 5px 10px; 69 | } 70 | .items:hover { 71 | background-color: rgba(15, 15, 15, 0.05); 72 | } 73 | 74 | .items:active { 75 | background-color: rgba(15, 15, 15, 0.137); 76 | } 77 | 78 | .container { 79 | display: flex; 80 | position: relative; 81 | width: fit-content; 82 | } 83 | .overlay { 84 | position: fixed; 85 | top: 0; 86 | left: 0; 87 | width: 100%; 88 | height: 100%; 89 | /* background-color: aliceblue; */ 90 | } 91 | -------------------------------------------------------------------------------- /src/Components/TextBox/TextBox.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef, useState } from 'react' 2 | import PropTypes from 'prop-types' 3 | 4 | const TextBox = ({ 5 | initialValue = '', 6 | placeholder = '', 7 | onChangeHandler, 8 | className = '', 9 | disabled = false, 10 | placeholderColor = '#e1e1e0', 11 | ...props 12 | }) => { 13 | const textBox = useRef('') 14 | console.log(props) 15 | const [value, setValue] = useState('') 16 | 17 | const onChange = (e) => { 18 | if (onChangeHandler) { 19 | onChangeHandler(e.target.innerText) 20 | } 21 | setValue(e.target.innerText) 22 | // console.log(textBox.current.innerText) 23 | } 24 | useEffect(() => { 25 | if (initialValue.length > 0) { 26 | textBox.current.innerText = initialValue 27 | setValue(initialValue) 28 | } 29 | }, []) 30 | return ( 31 |
onChange(e)} 35 | disabled={true} 36 | contentEditable={!disabled} 37 | placeholder={placeholder} 38 | style={ 39 | value === '' 40 | ? { 41 | color: placeholderColor 42 | } 43 | : null 44 | } 45 | className={`${className} `} 46 | data-gramm='false' 47 | >
48 | ) 49 | } 50 | 51 | TextBox.propTypes = { 52 | initialValue: PropTypes.string, 53 | disabled: PropTypes.bool, 54 | className: PropTypes.string, 55 | placeholder: PropTypes.string, 56 | onChangeHandler: PropTypes.func, 57 | placeholderColor: PropTypes.string 58 | } 59 | 60 | export default TextBox 61 | -------------------------------------------------------------------------------- /src/Utilities/FadeAnimation/Fade.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState, Fragment } from 'react' 2 | const Fade = ({ show, children, left, top }) => { 3 | const [render, setRender] = useState(show) 4 | const mountedStyle = { 5 | animation: 'inAnimation 300ms ease-out', 6 | transformOrigin: '50% bottom', 7 | top: top ? top : '80%', 8 | left: left ? left : '0px', 9 | position: 'absolute' 10 | } 11 | const unmountedStyle = { 12 | animation: 'outAnimation 200ms ease-out', 13 | transformOrigin: '50% bottom', 14 | top: top ? top : '80%', 15 | left: left ? left : '0px', 16 | position: 'absolute' 17 | } 18 | useEffect(() => { 19 | if (show) setRender(true) // if show true then render true 20 | }, [show]) 21 | 22 | const onAnimationEnd = () => { 23 | if (!show) setRender(false) // if show false then render false 24 | } 25 | return ( 26 | render && ( 27 | 28 |
33 | {children} 34 |
35 | 55 |
56 | ) 57 | ) 58 | } 59 | 60 | export default Fade 61 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | // import React from 'react' 2 | import './styles.css' 3 | 4 | export { default as Button } from './Components/Button/Button' 5 | export { default as TextBox } from './Components/TextBox/TextBox' 6 | -------------------------------------------------------------------------------- /src/index.test.js: -------------------------------------------------------------------------------- 1 | import { ExampleComponent } from '.' 2 | 3 | describe('ExampleComponent', () => { 4 | it('is truthy', () => { 5 | expect(ExampleComponent).toBeTruthy() 6 | }) 7 | }) 8 | -------------------------------------------------------------------------------- /src/stories/Button.stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import Button from '../Components/Button/Button' 4 | import { action } from '@storybook/addon-actions' 5 | 6 | export default { 7 | title: 'Example/Button', 8 | component: Button, 9 | argTypes: { 10 | disabled: { 11 | description: 'When true, Should render a disabled button', 12 | control: 'boolean' 13 | }, 14 | options: { 15 | table: { 16 | disable: true 17 | } 18 | }, 19 | left: { 20 | table: { 21 | disable: true 22 | } 23 | }, 24 | top: { 25 | table: { 26 | disable: true 27 | } 28 | }, 29 | width: { 30 | table: { 31 | disable: true 32 | } 33 | } 34 | } 35 | } 36 | 37 | export const Primary = (args) => ( 38 | 41 | ) 42 | 43 | Primary.storyName = 'Simple Button' 44 | 45 | // import React from 'react' 46 | 47 | // import { Button } from './Button' 48 | 49 | // export default { 50 | // title: 'Example/Button', 51 | // component: Button, 52 | // argTypes: { 53 | // backgroundColor: { control: 'color' } 54 | // } 55 | // } 56 | 57 | // const Template = (args) => 69 | ) 70 | 71 | Secondary.storyName = 'Button with a dropdown' 72 | -------------------------------------------------------------------------------- /src/stories/Introduction.stories.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from '@storybook/addon-docs/blocks' 2 | 3 | 4 | 5 | 8 | 9 | # Welcome to notion-components 👋 10 | 11 | #### These docs are also available on [Github](https://github.com/tanvesh01/notion-components) and [npm](https://www.npmjs.com/package/notion-components) 12 | 13 | Please Give a ⭐️ if this project helped you! 14 | 15 | ## Install 16 | 17 | ```sh 18 | 19 | npm install notion-components 20 | 21 | ``` 22 | 23 | > When importing a component make sure to import the css file too. Like this 24 | 25 | ```jsx 26 | import 'notion-components/dist/index.css' 27 | ``` 28 | 29 | ### Simple `TextBox` Component 30 | [![TextBoxDemo.gif](https://s4.gifyu.com/images/TextBoxDemo.gif)](https://gifyu.com/image/akA2) 31 | 32 | Renders an *Invisible* `TextBox`. In the above gif, There are two `TextBox` components. One is the heading, beside the emoji. Another one is the description, with a Lot of Text. 33 | 34 | The Component itself is customizable with your css, So you have to set things like, `font-size` and `font-weight` to layout the `TextBox` accordingly. 35 | 36 | `App.js` : 37 | ```jsx 38 | import React, { useState } from 'react' 39 | import { TextBox } from 'notion-components' 40 | import 'notion-components/dist/index.css' 41 | 42 | import './App.css' 43 | 44 | const App = () => { 45 | const [text, setText] = useState('Meeting Notes') 46 | 47 | const onChangeHandler = (value) => { 48 | setText(value) 49 | } 50 | return ( 51 | 57 | ); 58 | } 59 | export default App 60 | ``` 61 | 62 | `App.css` : 63 | ```css 64 | .textbox{ 65 | font-size: 4rem; 66 | font-weight: 700; 67 | } 68 | ``` 69 | 70 | ### Simple `Button` props 71 | | Attribute | Type | Default | Description 72 | | :-------- | :--------: | :-------: | :------------------------------------------------------------------------------------------------------- | 73 | | placeholder | `string` | `empty string` | Renders when the `TextBox` is empty 74 | | disabled | `bool` | `false` | Should render a disabled `TextBox`, if set to `true` | 75 | | className | `string` | `null` | Pass your css className here. Works with `css modules` too. | 76 | | onChangeHandler | `function` | `null` | A function that gets `value` inside TextBox as an argument at every keypress | 77 | | placeholderColor | `string | css color` | `'#e1e1e0'` | Css color that sets the placeholder color| 78 | | initialValue | `string` | `null` | The value inside the `TextBox` before the initial render | 79 | 80 | 81 | ### Simple `Button` rendered with a Dropdown 82 | 83 | [![buttonDropdownNeural.gif](https://s2.gifyu.com/images/buttonDropdownNeural.gif)](https://gifyu.com/image/Uvr8) 84 | 85 | Renders a `Button` with a dropdown. We have to pass an array of `options` with two properties, `value` and `function` like in the example below. 86 | 87 | ```jsx 88 | import React from 'react' 89 | import { Button } from 'notion-components' 90 | import 'notion-components/dist/index.css' 91 | 92 | const App = () => { 93 | const first = () => { 94 | console.log('1st option was clicked') 95 | } 96 | const second = () => { 97 | console.log('2nd option was clicked') 98 | } 99 | const third = () => { 100 | console.log('3rd option was clicked') 101 | } 102 | const onPress = () => { 103 | console.log('Did you just click me?!') 104 | } 105 | 106 | const options = [ 107 | { 108 | value: 'Started from the bottom', 109 | function: first 110 | }, 111 | { 112 | value: 'Sometimes its the journey', 113 | function: second 114 | }, 115 | { 116 | value: 'Trust the process', 117 | function: third 118 | } 119 | ] 120 | 121 | return ( 122 | 125 | ) 126 | } 127 | export default App 128 | ``` 129 | 130 | ### Simple `Button` rendered without a Dropdown 131 | 132 | ![Button without a dropdown](https://s2.gifyu.com/images/buttonMost.gif) 133 | 134 | Renders a `Button` without a dropdown. If the `option` prop's length is found to be 0 or if its value is `null`, then the deopdown will not render at all. 135 | 136 | ```jsx 137 | import React from 'react' 138 | import { Button } from 'notion-components' 139 | import 'notion-components/dist/index.css' 140 | 141 | const App = () => { 142 | const onPress = () => { 143 | console.log('Did you just click me?!') 144 | } 145 | return 146 | } 147 | export default App 148 | ``` 149 | 150 | ### Simple `Button` props 151 | 152 | | Attribute | Type | Default | Description | 153 | | :-------- | :--------: | :-----: | :--------------------------------------------------------------------------------------------- | 154 | | onClick | `function` | `null` | Default click/press function | 155 | | disabled | `bool` | `false` | Should render a disabled button | 156 | | options | `array` | `null` | An array of objects with properties .If empty array is passed, Dropdown button will not render | 157 | | top | `string` | `"80%"` | Controls the `top` css property for the Dropdown | 158 | | left | `string` | `"0px"` | Controls the `left` css property for the Dropdown | 159 | | width | `string` | `null` | Controls the `width` css property for the Dropdown | 160 | 161 | ## Author 162 | 163 | 👤 **tanvesh01** 164 | 165 | - Website: [tanvesh.vercel.app](https://tanvesh.vercel.app/) 166 | 167 | - Twitter: [@Sarve\_\_\_tanvesh](https://twitter.com/Sarve___tanvesh) 168 | 169 | - Github: [@tanvesh01](https://github.com/tanvesh01) 170 | 171 | - LinkedIn: [@tanvesh01](https://linkedin.com/in/tanvesh01) 172 | -------------------------------------------------------------------------------- /src/stories/Misc/Button.js: -------------------------------------------------------------------------------- 1 | // import React from 'react'; 2 | // import PropTypes from 'prop-types'; 3 | // import './button.css'; 4 | 5 | // /** 6 | // * Primary UI component for user interaction 7 | // */ 8 | // export const Button = ({ primary, backgroundColor, size, label, ...props }) => { 9 | // const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; 10 | // return ( 11 | // 19 | // ); 20 | // }; 21 | 22 | // Button.propTypes = { 23 | // /** 24 | // * Is this the principal call to action on the page? 25 | // */ 26 | // primary: PropTypes.bool, 27 | // /** 28 | // * What background color to use 29 | // */ 30 | // backgroundColor: PropTypes.string, 31 | // /** 32 | // * How large should the button be? 33 | // */ 34 | // size: PropTypes.oneOf(['small', 'medium', 'large']), 35 | // /** 36 | // * Button contents 37 | // */ 38 | // label: PropTypes.string.isRequired, 39 | // /** 40 | // * Optional click handler 41 | // */ 42 | // onClick: PropTypes.func, 43 | // }; 44 | 45 | // Button.defaultProps = { 46 | // backgroundColor: null, 47 | // primary: false, 48 | // size: 'medium', 49 | // onClick: undefined, 50 | // }; 51 | -------------------------------------------------------------------------------- /src/stories/Misc/Header.js: -------------------------------------------------------------------------------- 1 | // import React from 'react'; 2 | // import PropTypes from 'prop-types'; 3 | 4 | // import { Button } from './Button'; 5 | // import './header.css'; 6 | 7 | // export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => ( 8 | //
9 | //
10 | //
11 | // 12 | // 13 | // 17 | // 21 | // 25 | // 26 | // 27 | //

Acme

28 | //
29 | //
30 | // {user ? ( 31 | //
39 | //
40 | //
41 | // ); 42 | 43 | // Header.propTypes = { 44 | // user: PropTypes.shape({}), 45 | // onLogin: PropTypes.func.isRequired, 46 | // onLogout: PropTypes.func.isRequired, 47 | // onCreateAccount: PropTypes.func.isRequired, 48 | // }; 49 | 50 | // Header.defaultProps = { 51 | // user: null, 52 | // }; 53 | -------------------------------------------------------------------------------- /src/stories/Misc/Header.stories.js: -------------------------------------------------------------------------------- 1 | // import React from 'react'; 2 | 3 | // import { Header } from './Header'; 4 | 5 | // export default { 6 | // title: 'Example/Header', 7 | // component: Header, 8 | // }; 9 | 10 | // const Template = (args) =>
; 11 | 12 | // export const LoggedIn = Template.bind({}); 13 | // LoggedIn.args = { 14 | // user: {}, 15 | // }; 16 | 17 | // export const LoggedOut = Template.bind({}); 18 | // LoggedOut.args = {}; 19 | -------------------------------------------------------------------------------- /src/stories/Misc/Page.js: -------------------------------------------------------------------------------- 1 | // import React from 'react'; 2 | // import PropTypes from 'prop-types'; 3 | 4 | // import { Header } from './Header'; 5 | // import './page.css'; 6 | 7 | // export const Page = ({ user, onLogin, onLogout, onCreateAccount }) => ( 8 | //
9 | //
10 | 11 | //
12 | //

Pages in Storybook

13 | //

14 | // We recommend building UIs with a{' '} 15 | // 16 | // component-driven 17 | // {' '} 18 | // process starting with atomic components and ending with pages. 19 | //

20 | //

21 | // Render pages with mock data. This makes it easy to build and review page states without 22 | // needing to navigate to them in your app. Here are some handy patterns for managing page data 23 | // in Storybook: 24 | //

25 | //
    26 | //
  • 27 | // Use a higher-level connected component. Storybook helps you compose such data from the 28 | // "args" of child component stories 29 | //
  • 30 | //
  • 31 | // Assemble data in the page component from your services. You can mock these services out 32 | // using Storybook. 33 | //
  • 34 | //
35 | //

36 | // Get a guided tutorial on component-driven development at{' '} 37 | // 38 | // Learn Storybook 39 | // 40 | // . Read more in the{' '} 41 | // 42 | // docs 43 | // 44 | // . 45 | //

46 | //
47 | // Tip Adjust the width of the canvas with the{' '} 48 | // 49 | // 50 | // 55 | // 56 | // 57 | // Viewports addon in the toolbar 58 | //
59 | //
60 | //
61 | // ); 62 | // Page.propTypes = { 63 | // user: PropTypes.shape({}), 64 | // onLogin: PropTypes.func.isRequired, 65 | // onLogout: PropTypes.func.isRequired, 66 | // onCreateAccount: PropTypes.func.isRequired, 67 | // }; 68 | 69 | // Page.defaultProps = { 70 | // user: null, 71 | // }; 72 | -------------------------------------------------------------------------------- /src/stories/Misc/Page.stories.js: -------------------------------------------------------------------------------- 1 | // import React from 'react'; 2 | 3 | // import { Page } from './Page'; 4 | // import * as HeaderStories from './Header.stories'; 5 | 6 | // export default { 7 | // title: 'Example/Page', 8 | // component: Page, 9 | // }; 10 | 11 | // const Template = (args) => ; 12 | 13 | // export const LoggedIn = Template.bind({}); 14 | // LoggedIn.args = { 15 | // ...HeaderStories.LoggedIn.args, 16 | // }; 17 | 18 | // export const LoggedOut = Template.bind({}); 19 | // LoggedOut.args = { 20 | // ...HeaderStories.LoggedOut.args, 21 | // }; 22 | -------------------------------------------------------------------------------- /src/stories/Misc/button.css: -------------------------------------------------------------------------------- 1 | /* .storybook-button { 2 | font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; 3 | font-weight: 700; 4 | border: 0; 5 | border-radius: 3em; 6 | cursor: pointer; 7 | display: inline-block; 8 | line-height: 1; 9 | } 10 | .storybook-button--primary { 11 | color: white; 12 | background-color: #1ea7fd; 13 | } 14 | .storybook-button--secondary { 15 | color: #333; 16 | background-color: transparent; 17 | box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; 18 | } 19 | .storybook-button--small { 20 | font-size: 12px; 21 | padding: 10px 16px; 22 | } 23 | .storybook-button--medium { 24 | font-size: 14px; 25 | padding: 11px 20px; 26 | } 27 | .storybook-button--large { 28 | font-size: 16px; 29 | padding: 12px 24px; 30 | } */ 31 | -------------------------------------------------------------------------------- /src/stories/Misc/header.css: -------------------------------------------------------------------------------- 1 | /* .wrapper { 2 | font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; 3 | border-bottom: 1px solid rgba(0, 0, 0, 0.1); 4 | padding: 15px 20px; 5 | display: flex; 6 | align-items: center; 7 | justify-content: space-between; 8 | } 9 | 10 | svg { 11 | display: inline-block; 12 | vertical-align: top; 13 | } 14 | 15 | h1 { 16 | font-weight: 900; 17 | font-size: 20px; 18 | line-height: 1; 19 | margin: 6px 0 6px 10px; 20 | display: inline-block; 21 | vertical-align: top; 22 | } 23 | 24 | button + button { 25 | margin-left: 10px; 26 | } */ 27 | -------------------------------------------------------------------------------- /src/stories/Misc/page.css: -------------------------------------------------------------------------------- 1 | /* section { 2 | font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; 3 | font-size: 14px; 4 | line-height: 24px; 5 | padding: 48px 20px; 6 | margin: 0 auto; 7 | max-width: 600px; 8 | color: #333; 9 | } 10 | 11 | h2 { 12 | font-weight: 900; 13 | font-size: 32px; 14 | line-height: 1; 15 | margin: 0 0 4px; 16 | display: inline-block; 17 | vertical-align: top; 18 | } 19 | 20 | p { 21 | margin: 1em 0; 22 | } 23 | 24 | a { 25 | text-decoration: none; 26 | color: #1ea7fd; 27 | } 28 | 29 | ul { 30 | padding-left: 30px; 31 | margin: 1em 0; 32 | } 33 | 34 | li { 35 | margin-bottom: 8px; 36 | } 37 | 38 | .tip { 39 | display: inline-block; 40 | border-radius: 1em; 41 | font-size: 11px; 42 | line-height: 12px; 43 | font-weight: 700; 44 | background: #e7fdd8; 45 | color: #66bf3c; 46 | padding: 4px 12px; 47 | margin-right: 10px; 48 | vertical-align: top; 49 | } 50 | 51 | .tip-wrapper { 52 | font-size: 13px; 53 | line-height: 20px; 54 | margin-top: 40px; 55 | margin-bottom: 40px; 56 | } 57 | 58 | .tip-wrapper svg { 59 | display: inline-block; 60 | height: 12px; 61 | width: 12px; 62 | margin-right: 4px; 63 | vertical-align: top; 64 | margin-top: 3px; 65 | } 66 | 67 | .tip-wrapper svg path { 68 | fill: #1ea7fd; 69 | } */ 70 | -------------------------------------------------------------------------------- /src/stories/TextBox.stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import TextBox from '../Components/TextBox/TextBox' 3 | import TextBoxExamplePage from './TextBoxExamplePage/TextBoxExamplePage' 4 | import classes from './TextBoxExamplePage/TextBoxExamplePage.module.css' 5 | export default { 6 | title: 'Example/TextBox', 7 | component: TextBox 8 | } 9 | 10 | export const Primary = (args) => ( 11 | 16 | ) 17 | 18 | Primary.storyName = 'Simple TextBox' 19 | 20 | export const Secondary = (args) => 21 | 22 | Secondary.storyName = 'TextBox example in notion UI' 23 | -------------------------------------------------------------------------------- /src/stories/TextBoxExamplePage/TextBoxExamplePage.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import classes from './TextBoxExamplePage.module.css' 3 | import TextBox from '../../Components/TextBox/TextBox' 4 | const TextBoxExamplePage = ({ 5 | placeholder = 'Untitled', 6 | disabled = false, 7 | placeholderColor = '#e1e1e0' 8 | }) => { 9 | const [text, setText] = useState('') 10 | 11 | const onChange = (value) => { 12 | setText(value) 13 | } 14 | // Layout here to show the TextBox 15 | // then on TextBox.stories.js, export that component with secondary 16 | return ( 17 |
18 |
19 |
20 |
🤠
21 | 29 |
30 |
31 | 38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 | ) 49 | } 50 | 51 | export default TextBoxExamplePage 52 | -------------------------------------------------------------------------------- /src/stories/TextBoxExamplePage/TextBoxExamplePage.module.css: -------------------------------------------------------------------------------- 1 | .root { 2 | height: 100%; 3 | min-height: 100vh; 4 | width: 100%; 5 | /* border: 2px solid black; */ 6 | } 7 | .imageContainer { 8 | width: 100%; 9 | height: 15rem; 10 | background-image: url(https://images.unsplash.com/photo-1613041193815-e097b1cea99f?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1051&q=80); 11 | background-repeat: no-repeat; 12 | background-size: cover; 13 | background-position-y: center; 14 | } 15 | .headingConatiner { 16 | /* border: 1px solid black; */ 17 | padding: 3rem 5rem 1rem 5rem; 18 | display: flex; 19 | align-items: center; 20 | } 21 | 22 | .descConatiner { 23 | padding: 0 5rem 3rem 5rem; 24 | display: flex; 25 | align-items: center; 26 | } 27 | 28 | .desc { 29 | white-space: pre-wrap; 30 | word-break: break-word; 31 | caret-color: rgb(55, 53, 47); 32 | font-size: 14px; 33 | color: rgb(55, 53, 47); 34 | line-height: 1.5; 35 | } 36 | 37 | .heading { 38 | caret-color: rgb(55, 53, 47); 39 | color: rgb(55, 53, 47); 40 | font-size: 40px; 41 | font-weight: 700; 42 | line-height: 1.2; 43 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, 44 | 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol'; 45 | } 46 | 47 | .emoji { 48 | font-size: 40px; 49 | display: flex; 50 | align-items: center; 51 | justify-content: center; 52 | margin-right: 10px; 53 | } 54 | 55 | .toolbar { 56 | height: 2rem; 57 | width: 100%; 58 | background-color: #f8f8f8; 59 | /* border: 1px solid grey; */ 60 | } 61 | 62 | .placeHolderContainer { 63 | display: flex; 64 | height: 100%; 65 | flex-wrap: wrap; 66 | margin-top: 1rem; 67 | } 68 | 69 | .col { 70 | height: 5rem; 71 | /* border: 2px solid purple; */ 72 | width: 30%; 73 | margin: 0.5rem 1rem 0.5rem 0; 74 | /* background-color: grey; */ 75 | background-color: #e0dddde7; 76 | border-radius: 5px; 77 | } 78 | 79 | *:focus { 80 | outline: none; 81 | } 82 | *::selection { 83 | /* color: black; */ 84 | background: #0077ff2f; 85 | } 86 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | [contenteditable='true']:empty:before { 2 | content: attr(placeholder); 3 | /* color: grey; */ 4 | pointer-events: none; 5 | display: block; /* For Firefox */ 6 | } 7 | -------------------------------------------------------------------------------- /storybook-static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanvesh01/notion-components/d9700402b0835d11dbe7916c2f2e52a09378e0a4/storybook-static/favicon.ico -------------------------------------------------------------------------------- /storybook-static/iframe.html: -------------------------------------------------------------------------------- 1 | Storybook

No Preview

Sorry, but you either have no stories or none are selected somehow.

  • Please check the Storybook config.
  • Try reloading the page.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

-------------------------------------------------------------------------------- /storybook-static/index.html: -------------------------------------------------------------------------------- 1 | Storybook
-------------------------------------------------------------------------------- /storybook-static/main.9e61bfeb65b62b0229c3.bundle.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[0],{1202:function(module,exports,__webpack_require__){"use strict";__webpack_require__(64).addons.setConfig({refs:{}})},522:function(module,exports,__webpack_require__){__webpack_require__(523),__webpack_require__(694),__webpack_require__(1150),__webpack_require__(1152),__webpack_require__(1154),__webpack_require__(1157),__webpack_require__(1190),__webpack_require__(1195),__webpack_require__(1198),module.exports=__webpack_require__(1202)},597:function(module,exports){}},[[522,1,2]]]); -------------------------------------------------------------------------------- /storybook-static/main.c7936f793a3995c0dd60.bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"main.c7936f793a3995c0dd60.bundle.js","sources":["webpack:///main.c7936f793a3995c0dd60.bundle.js"],"mappings":"AAAA","sourceRoot":""} -------------------------------------------------------------------------------- /storybook-static/runtime~main.870e8ee0658e83d05c6b.bundle.js: -------------------------------------------------------------------------------- 1 | !function(modules){function webpackJsonpCallback(data){for(var moduleId,chunkId,chunkIds=data[0],moreModules=data[1],executeModules=data[2],i=0,resolves=[];iillustration/code-brackets -------------------------------------------------------------------------------- /storybook-static/static/media/colors.a4bd0486.svg: -------------------------------------------------------------------------------- 1 | illustration/colors -------------------------------------------------------------------------------- /storybook-static/static/media/comments.a3859089.svg: -------------------------------------------------------------------------------- 1 | illustration/comments -------------------------------------------------------------------------------- /storybook-static/static/media/direction.b770f9af.svg: -------------------------------------------------------------------------------- 1 | illustration/direction -------------------------------------------------------------------------------- /storybook-static/static/media/flow.edad2ac1.svg: -------------------------------------------------------------------------------- 1 | illustration/flow -------------------------------------------------------------------------------- /storybook-static/static/media/plugin.d494b228.svg: -------------------------------------------------------------------------------- 1 | illustration/plugin -------------------------------------------------------------------------------- /storybook-static/static/media/repo.6d496322.svg: -------------------------------------------------------------------------------- 1 | illustration/repo -------------------------------------------------------------------------------- /storybook-static/static/media/stackalt.dba9fbb3.svg: -------------------------------------------------------------------------------- 1 | illustration/stackalt -------------------------------------------------------------------------------- /storybook-static/vendors~main.c7936f793a3995c0dd60.bundle.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /* 2 | object-assign 3 | (c) Sindre Sorhus 4 | @license MIT 5 | */ 6 | 7 | /*! 8 | * OverlayScrollbars 9 | * https://github.com/KingSora/OverlayScrollbars 10 | * 11 | * Version: 1.13.0 12 | * 13 | * Copyright KingSora | Rene Haas. 14 | * https://github.com/KingSora 15 | * 16 | * Released under the MIT license. 17 | * Date: 02.08.2020 18 | */ 19 | 20 | /*! 21 | * The buffer module from node.js, for the browser. 22 | * 23 | * @author Feross Aboukhadijeh 24 | * @license MIT 25 | */ 26 | 27 | /*! 28 | * https://github.com/es-shims/es5-shim 29 | * @license es5-shim Copyright 2009-2020 by contributors, MIT License 30 | * see https://github.com/es-shims/es5-shim/blob/master/LICENSE 31 | */ 32 | 33 | /*! 34 | * https://github.com/paulmillr/es6-shim 35 | * @license es6-shim Copyright 2013-2016 by Paul Miller (http://paulmillr.com) 36 | * and contributors, MIT License 37 | * es6-shim: v0.35.4 38 | * see https://github.com/paulmillr/es6-shim/blob/0.35.3/LICENSE 39 | * Details and documentation: 40 | * https://github.com/paulmillr/es6-shim/ 41 | */ 42 | 43 | /*! 44 | * is-plain-object 45 | * 46 | * Copyright (c) 2014-2017, Jon Schlinkert. 47 | * Released under the MIT License. 48 | */ 49 | 50 | /*! 51 | * isobject 52 | * 53 | * Copyright (c) 2014-2017, Jon Schlinkert. 54 | * Released under the MIT License. 55 | */ 56 | 57 | /** 58 | * Prism: Lightweight, robust, elegant syntax highlighting 59 | * 60 | * @license MIT 61 | * @author Lea Verou 62 | * @namespace 63 | * @public 64 | */ 65 | 66 | /** @license React v0.19.1 67 | * scheduler.production.min.js 68 | * 69 | * Copyright (c) Facebook, Inc. and its affiliates. 70 | * 71 | * This source code is licensed under the MIT license found in the 72 | * LICENSE file in the root directory of this source tree. 73 | */ 74 | 75 | /** @license React v16.13.1 76 | * react-is.production.min.js 77 | * 78 | * Copyright (c) Facebook, Inc. and its affiliates. 79 | * 80 | * This source code is licensed under the MIT license found in the 81 | * LICENSE file in the root directory of this source tree. 82 | */ 83 | 84 | /** @license React v16.14.0 85 | * react-dom.production.min.js 86 | * 87 | * Copyright (c) Facebook, Inc. and its affiliates. 88 | * 89 | * This source code is licensed under the MIT license found in the 90 | * LICENSE file in the root directory of this source tree. 91 | */ 92 | 93 | /** @license React v16.14.0 94 | * react-jsx-runtime.production.min.js 95 | * 96 | * Copyright (c) Facebook, Inc. and its affiliates. 97 | * 98 | * This source code is licensed under the MIT license found in the 99 | * LICENSE file in the root directory of this source tree. 100 | */ 101 | 102 | /** @license React v16.14.0 103 | * react.production.min.js 104 | * 105 | * Copyright (c) Facebook, Inc. and its affiliates. 106 | * 107 | * This source code is licensed under the MIT license found in the 108 | * LICENSE file in the root directory of this source tree. 109 | */ 110 | 111 | //! stable.js 0.1.8, https://github.com/Two-Screen/stable 112 | 113 | //! © 2018 Angry Bytes and contributors. MIT licensed. 114 | -------------------------------------------------------------------------------- /storybook-static/vendors~main.c7936f793a3995c0dd60.bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"vendors~main.c7936f793a3995c0dd60.bundle.js","sources":["webpack:///vendors~main.c7936f793a3995c0dd60.bundle.js"],"mappings":";AAAA","sourceRoot":""} -------------------------------------------------------------------------------- /storybook-static/vendors~main.d8ca881aa3dc4552c9b0.bundle.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /* 2 | object-assign 3 | (c) Sindre Sorhus 4 | @license MIT 5 | */ 6 | 7 | /*! 8 | Copyright (c) 2017 Jed Watson. 9 | Licensed under the MIT License (MIT), see 10 | http://jedwatson.github.io/classnames 11 | */ 12 | 13 | /*! 14 | * Fuse.js v3.6.1 - Lightweight fuzzy-search (http://fusejs.io) 15 | * 16 | * Copyright (c) 2012-2017 Kirollos Risk (http://kiro.me) 17 | * All Rights Reserved. Apache Software License 2.0 18 | * 19 | * http://www.apache.org/licenses/LICENSE-2.0 20 | */ 21 | 22 | /*! 23 | * OverlayScrollbars 24 | * https://github.com/KingSora/OverlayScrollbars 25 | * 26 | * Version: 1.13.0 27 | * 28 | * Copyright KingSora | Rene Haas. 29 | * https://github.com/KingSora 30 | * 31 | * Released under the MIT license. 32 | * Date: 02.08.2020 33 | */ 34 | 35 | /*! 36 | * https://github.com/es-shims/es5-shim 37 | * @license es5-shim Copyright 2009-2020 by contributors, MIT License 38 | * see https://github.com/es-shims/es5-shim/blob/master/LICENSE 39 | */ 40 | 41 | /*! 42 | * https://github.com/paulmillr/es6-shim 43 | * @license es6-shim Copyright 2013-2016 by Paul Miller (http://paulmillr.com) 44 | * and contributors, MIT License 45 | * es6-shim: v0.35.4 46 | * see https://github.com/paulmillr/es6-shim/blob/0.35.3/LICENSE 47 | * Details and documentation: 48 | * https://github.com/paulmillr/es6-shim/ 49 | */ 50 | 51 | /*! 52 | * isobject 53 | * 54 | * Copyright (c) 2014-2017, Jon Schlinkert. 55 | * Released under the MIT License. 56 | */ 57 | 58 | /** 59 | * Prism: Lightweight, robust, elegant syntax highlighting 60 | * 61 | * @license MIT 62 | * @author Lea Verou 63 | * @namespace 64 | * @public 65 | */ 66 | 67 | /** @license React v0.19.1 68 | * scheduler.production.min.js 69 | * 70 | * Copyright (c) Facebook, Inc. and its affiliates. 71 | * 72 | * This source code is licensed under the MIT license found in the 73 | * LICENSE file in the root directory of this source tree. 74 | */ 75 | 76 | /** @license React v16.13.1 77 | * react-is.production.min.js 78 | * 79 | * Copyright (c) Facebook, Inc. and its affiliates. 80 | * 81 | * This source code is licensed under the MIT license found in the 82 | * LICENSE file in the root directory of this source tree. 83 | */ 84 | 85 | /** @license React v16.14.0 86 | * react-dom.production.min.js 87 | * 88 | * Copyright (c) Facebook, Inc. and its affiliates. 89 | * 90 | * This source code is licensed under the MIT license found in the 91 | * LICENSE file in the root directory of this source tree. 92 | */ 93 | 94 | /** @license React v16.14.0 95 | * react.production.min.js 96 | * 97 | * Copyright (c) Facebook, Inc. and its affiliates. 98 | * 99 | * This source code is licensed under the MIT license found in the 100 | * LICENSE file in the root directory of this source tree. 101 | */ 102 | 103 | /** @license React v17.0.1 104 | * react-is.production.min.js 105 | * 106 | * Copyright (c) Facebook, Inc. and its affiliates. 107 | * 108 | * This source code is licensed under the MIT license found in the 109 | * LICENSE file in the root directory of this source tree. 110 | */ 111 | 112 | //! stable.js 0.1.8, https://github.com/Two-Screen/stable 113 | 114 | //! © 2018 Angry Bytes and contributors. MIT licensed. 115 | --------------------------------------------------------------------------------