├── .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 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
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 | [](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 | [](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 | onPress()}>
146 | New
147 |
148 | );
149 | }
150 | export default App
151 | ```
152 | ### Simple `Button` rendered without a Dropdown
153 |
154 | 
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 | onPress()}>
169 | New
170 |
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\nexport const Primary = Template.bind({});\nPrimary.args = {\n primary: true,\n label: 'Button',\n};\n\nexport const Secondary = Template.bind({});\nSecondary.args = {\n label: 'Button',\n};\n\nexport const Large = Template.bind({});\nLarge.args = {\n size: 'large',\n label: 'Button',\n};\n\nexport const Small = Template.bind({});\nSmall.args = {\n size: 'small',\n label: 'Button',\n};\n",["44","45"],"/mnt/e/MERN/ComponentLibrary/react-essentials/example/src/stories/Page.stories.js",["46"],"import React from 'react';\n\nimport { Page } from './Page';\nimport * as HeaderStories from './Header.stories';\n\nexport default {\n title: 'Example/Page',\n component: Page,\n};\n\nconst Template = (args) => ;\n\nexport const LoggedIn = Template.bind({});\nLoggedIn.args = {\n ...HeaderStories.LoggedIn.args,\n};\n\nexport const LoggedOut = Template.bind({});\nLoggedOut.args = {\n ...HeaderStories.LoggedOut.args,\n};\n","/mnt/e/MERN/ComponentLibrary/react-essentials/example/src/stories/Header.stories.js",["47"],"import React from 'react';\n\nimport { Header } from './Header';\n\nexport default {\n title: 'Example/Header',\n component: Header,\n};\n\nconst Template = (args) => ;\n\nexport const LoggedIn = Template.bind({});\nLoggedIn.args = {\n user: {},\n};\n\nexport const LoggedOut = Template.bind({});\nLoggedOut.args = {};\n","/mnt/e/MERN/ComponentLibrary/react-essentials/example/src/stories/Header.js",[],"/mnt/e/MERN/ComponentLibrary/react-essentials/example/src/stories/Page.js",[],["48","49"],"/mnt/e/MERN/ComponentLibrary/react-essentials/example/src/stories/Button.js",[],"/mnt/e/MERN/ComponentLibrary/react-essentials/example/src/index.js",[],"/mnt/e/MERN/ComponentLibrary/react-essentials/example/src/App.js",[],"/mnt/e/MERN/ComponentLibrary/react-essentials/example/src/stories/NotionButton.stories.js",[],{"ruleId":"50","severity":1,"message":"51","line":5,"column":1,"nodeType":"52","endLine":11,"endColumn":3},{"ruleId":"53","replacedBy":"54"},{"ruleId":"55","replacedBy":"56"},{"ruleId":"50","severity":1,"message":"51","line":6,"column":1,"nodeType":"52","endLine":9,"endColumn":3},{"ruleId":"50","severity":1,"message":"51","line":5,"column":1,"nodeType":"52","endLine":8,"endColumn":3},{"ruleId":"53","replacedBy":"57"},{"ruleId":"55","replacedBy":"58"},"import/no-anonymous-default-export","Assign object to a variable before exporting as module default","ExportDefaultDeclaration","no-native-reassign",["59"],"no-negated-in-lhs",["60"],["59"],["60"],"no-global-assign","no-unsafe-negation"]
--------------------------------------------------------------------------------
/example/README.md:
--------------------------------------------------------------------------------
1 | This example was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
2 |
3 | It is linked to the notion-components package in the parent directory for development purposes.
4 |
5 | You can run `npm install` and then `npm start` to test your package.
6 |
--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "notion-components-example",
3 | "homepage": ".",
4 | "version": "0.0.0",
5 | "private": true,
6 | "scripts": {
7 | "start": "react-scripts start",
8 | "build": "react-scripts build",
9 | "test": "react-scripts test",
10 | "eject": "react-scripts eject"
11 | },
12 | "dependencies": {
13 | "react": "file:../node_modules/react",
14 | "react-dom": "file:../node_modules/react-dom",
15 | "react-scripts": "file:../node_modules/react-scripts",
16 | "notion-components": "file:.."
17 | },
18 | "devDependencies": {
19 | "@babel/plugin-syntax-object-rest-spread": "^7.8.3"
20 | },
21 | "eslintConfig": {
22 | "extends": "react-app"
23 | },
24 | "browserslist": [
25 | ">0.2%",
26 | "not dead",
27 | "not ie <= 11",
28 | "not op_mini all"
29 | ]
30 | }
31 |
--------------------------------------------------------------------------------
/example/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tanvesh01/notion-components/d9700402b0835d11dbe7916c2f2e52a09378e0a4/example/public/favicon.ico
--------------------------------------------------------------------------------
/example/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
10 |
11 |
12 |
16 |
17 |
18 |
27 | notion-components
28 |
29 |
30 |
31 |
32 | You need to enable JavaScript to run this app.
33 |
34 |
35 |
36 |
37 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/example/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "notion-components",
3 | "name": "notion-components",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | }
10 | ],
11 | "start_url": ".",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/example/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react'
2 | import { TextBox } from 'notion-components'
3 | import classes from './App.module.css'
4 | import 'notion-components/dist/index.css'
5 |
6 | const App = () => {
7 | const [text, setText] = useState('Tanvesh')
8 |
9 | const onChangeHandler = (value) => {
10 | setText(value)
11 | }
12 |
13 | useEffect(() => {
14 | // document.getElementById('content').addEventListener('input', (e) => {
15 | // console.log(e.target.value)
16 | // console.log()
17 | // })
18 | }, [])
19 | return (
20 | <>
21 |
22 | {
28 | e.persist()
29 | console.log(e.key)
30 | }}
31 | // disabled
32 | />
33 |
34 | >
35 | )
36 | }
37 |
38 | export default App
39 | // "start": "node ../node_modules/react-scripts/bin/react-scripts.js start",
40 | // "build": "node ../node_modules/react-scripts/bin/react-scripts.js build",
41 | // "test": "node ../node_modules/react-scripts/bin/react-scripts.js test",
42 | // "eject": "node ../node_modules/react-scripts/bin/react-scripts.js eject",
43 |
--------------------------------------------------------------------------------
/example/src/App.module.css:
--------------------------------------------------------------------------------
1 | .Layout {
2 | height: 100vh;
3 | display: flex;
4 | justify-content: center;
5 | align-items: center;
6 | background-color: white;
7 | }
8 |
9 | .textbox {
10 | font-size: 4rem;
11 | font-weight: 700;
12 | caret-color: black;
13 | }
14 |
--------------------------------------------------------------------------------
/example/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 | import App from './App'
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div')
7 | ReactDOM.render( , div)
8 | ReactDOM.unmountComponentAtNode(div)
9 | })
10 |
--------------------------------------------------------------------------------
/example/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 0;
4 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
5 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
6 | sans-serif;
7 | -webkit-font-smoothing: antialiased;
8 | -moz-osx-font-smoothing: grayscale;
9 | }
10 |
11 | code {
12 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
13 | monospace;
14 | }
15 | *:focus {
16 | outline: none;
17 | }
18 | *::-moz-selection {
19 | /* Code for Firefox */
20 | color: black;
21 | background: #e3e3ff87;
22 | }
23 |
24 | *::selection {
25 | color: black;
26 | background: #e3e3ff87;
27 | }
28 |
--------------------------------------------------------------------------------
/example/src/index.js:
--------------------------------------------------------------------------------
1 | import './index.css'
2 |
3 | import React from 'react'
4 | import ReactDOM from 'react-dom'
5 | import App from './App'
6 |
7 | ReactDOM.render( , document.getElementById('root'))
8 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "notion-components",
3 | "version": "0.0.3",
4 | "description": "React Component Library for the minimalist",
5 | "author": "tanvesh01",
6 | "license": "MIT",
7 | "repository": "tanvesh01/notion-components",
8 | "main": "dist/index.js",
9 | "module": "dist/index.modern.js",
10 | "source": "src/index.js",
11 | "engines": {
12 | "node": ">=10"
13 | },
14 | "scripts": {
15 | "build": "microbundle-crl --no-compress --format modern,cjs",
16 | "start": "microbundle-crl watch --no-compress --format modern,cjs",
17 | "prepare": "run-s build",
18 | "test": "run-s test:unit test:lint test:build",
19 | "test:build": "run-s build",
20 | "test:lint": "eslint .",
21 | "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
22 | "test:watch": "react-scripts test --env=jsdom",
23 | "predeploy": "cd example && npm install && npm run build",
24 | "deploy": "gh-pages -d example/build",
25 | "storybook": "start-storybook -p 6006",
26 | "build-storybook": "build-storybook -c .storybook -o public"
27 | },
28 | "peerDependencies": {
29 | "react": "^16.0.0"
30 | },
31 | "devDependencies": {
32 | "@babel/core": "^7.12.10",
33 | "@storybook/addon-actions": "^6.1.16",
34 | "@storybook/addon-essentials": "^6.1.16",
35 | "@storybook/addon-links": "^6.1.16",
36 | "@storybook/addons": "^6.1.17",
37 | "@storybook/react": "^6.1.16",
38 | "@storybook/theming": "^6.1.17",
39 | "babel-eslint": "^10.0.3",
40 | "babel-loader": "^8.2.2",
41 | "cross-env": "^7.0.2",
42 | "eslint": "^6.8.0",
43 | "eslint-config-prettier": "^6.7.0",
44 | "eslint-config-standard": "^14.1.0",
45 | "eslint-config-standard-react": "^9.2.0",
46 | "eslint-plugin-import": "^2.18.2",
47 | "eslint-plugin-node": "^11.0.0",
48 | "eslint-plugin-prettier": "^3.1.1",
49 | "eslint-plugin-promise": "^4.2.1",
50 | "eslint-plugin-react": "^7.17.0",
51 | "eslint-plugin-standard": "^4.0.1",
52 | "gh-pages": "^2.2.0",
53 | "microbundle-crl": "^0.13.10",
54 | "npm-run-all": "^4.1.5",
55 | "prettier": "^2.0.4",
56 | "react": "^16.13.1",
57 | "react-dom": "^16.13.1",
58 | "react-scripts": "^3.4.1",
59 | "storybook-css-modules-preset": "^1.0.5"
60 | },
61 | "files": [
62 | "dist"
63 | ],
64 | "dependencies": {
65 | "prop-types": "^15.7.2"
66 | }
67 | }
68 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tanvesh01/notion-components/d9700402b0835d11dbe7916c2f2e52a09378e0a4/public/favicon.ico
--------------------------------------------------------------------------------
/public/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.
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 | Storybook
--------------------------------------------------------------------------------
/public/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]]]);
--------------------------------------------------------------------------------
/public/main.c7936f793a3995c0dd60.bundle.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[0],{1114:function(module,exports,__webpack_require__){"use strict";__webpack_require__(4),__webpack_require__(53),__webpack_require__(41),__webpack_require__(33),__webpack_require__(43),__webpack_require__(1115),__webpack_require__(1116),__webpack_require__(7),__webpack_require__(42);var _clientApi=__webpack_require__(56),_clientLogger=__webpack_require__(36),_configFilename=__webpack_require__(1117);function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;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 layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_5__.Meta,{title:"Example/Introduction",mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("style",null,"\n .subheading {\n --mediumdark: '#999999';\n font-weight: 900;\n font-size: 13px;\n color: #999;\n letter-spacing: 6px;\n line-height: 24px;\n text-transform: uppercase;\n margin-bottom: 12px;\n margin-top: 40px;\n }\n\n .link-list {\n display: grid;\n grid-template-columns: 1fr;\n grid-template-rows: 1fr 1fr;\n row-gap: 10px;\n }\n\n @media (min-width: 620px) {\n .link-list {\n row-gap: 20px;\n column-gap: 20px;\n grid-template-columns: 1fr 1fr;\n }\n }\n\n @media all and (-ms-high-contrast:none) {\n .link-list {\n display: -ms-grid;\n -ms-grid-columns: 1fr 1fr;\n -ms-grid-rows: 1fr 1fr;\n }\n }\n\n .link-item {\n display: block;\n padding: 20px 30px 20px 15px;\n border: 1px solid #00000010;\n border-radius: 5px;\n transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;\n color: #333333;\n display: flex;\n align-items: flex-start;\n }\n\n .link-item:hover {\n border-color: #1EA7FD50;\n transform: translate3d(0, -3px, 0);\n box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;\n }\n\n .link-item:active {\n border-color: #1EA7FD;\n transform: translate3d(0, 0, 0);\n }\n\n .link-item strong {\n font-weight: 700;\n display: block;\n margin-bottom: 2px;\n }\n \n .link-item img {\n height: 40px;\n width: 40px;\n margin-right: 15px;\n flex: none;\n }\n\n .link-item span {\n font-size: 14px;\n line-height: 20px;\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 code {\n font-size: 12px;\n display: inline-block;\n }\n\n \n"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("h1",{id:"welcome-to-storybook"},"Welcome to Storybook"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("p",null,"Storybook helps you build UI components in isolation from your app's business logic, data, and context.\nThat makes it easy to develop hard-to-reach states. Save these UI states as ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("strong",{parentName:"p"},"stories")," to revisit during development, testing, or QA."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("p",null,"Browse example stories now by navigating to them in the sidebar.\nView their code in the ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("inlineCode",{parentName:"p"},"src/stories")," directory to learn how they work.\nWe recommend building UIs with a ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("a",_extends({parentName:"p"},{href:"https://componentdriven.org",target:"_blank",rel:"nofollow noopener noreferrer"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("strong",{parentName:"a"},"component-driven"))," process starting with atomic components and ending with pages."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("div",{className:"subheading"},"Configure"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("div",{className:"link-list"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("a",{className:"link-item",href:"https://storybook.js.org/docs/react/addons/addon-types",target:"_blank"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("img",{src:_assets_plugin_svg__WEBPACK_IMPORTED_MODULE_11___default.a,alt:"plugin"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("span",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("strong",null,"Presets for popular tools"),"Easy setup for TypeScript, SCSS and more.")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("a",{className:"link-item",href:"https://storybook.js.org/docs/react/configure/webpack",target:"_blank"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("img",{src:_assets_stackalt_svg__WEBPACK_IMPORTED_MODULE_13___default.a,alt:"Build"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("span",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("strong",null,"Build configuration"),"How to customize webpack and Babel")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("a",{className:"link-item",href:"https://storybook.js.org/docs/react/configure/styling-and-css",target:"_blank"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("img",{src:_assets_colors_svg__WEBPACK_IMPORTED_MODULE_7___default.a,alt:"colors"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("span",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("strong",null,"Styling"),"How to load and configure CSS libraries")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("a",{className:"link-item",href:"https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack",target:"_blank"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("img",{src:_assets_flow_svg__WEBPACK_IMPORTED_MODULE_10___default.a,alt:"flow"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("span",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("strong",null,"Data"),"Providers and mocking for data libraries"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("div",{className:"subheading"},"Learn"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("div",{className:"link-list"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("a",{className:"link-item",href:"https://storybook.js.org/docs",target:"_blank"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("img",{src:_assets_repo_svg__WEBPACK_IMPORTED_MODULE_12___default.a,alt:"repo"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("span",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("strong",null,"Storybook documentation"),"Configure, customize, and extend")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("a",{className:"link-item",href:"https://www.learnstorybook.com",target:"_blank"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("img",{src:_assets_direction_svg__WEBPACK_IMPORTED_MODULE_9___default.a,alt:"direction"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("span",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("strong",null,"In-depth guides"),"Best practices from leading teams")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("a",{className:"link-item",href:"https://github.com/storybookjs/storybook",target:"_blank"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("img",{src:_assets_code_brackets_svg__WEBPACK_IMPORTED_MODULE_6___default.a,alt:"code"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("span",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("strong",null,"GitHub project"),"View the source and add issues")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("a",{className:"link-item",href:"https://discord.gg/UUt2PJb",target:"_blank"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("img",{src:_assets_comments_svg__WEBPACK_IMPORTED_MODULE_8___default.a,alt:"comments"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("span",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("strong",null,"Discord chat"),"Chat with maintainers and the community"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("div",{className:"tip-wrapper"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("span",{className:"tip"},"Tip"),"Edit the Markdown in"," ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)("code",null,"src/stories/Introduction.stories.mdx")))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Example/Introduction",includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_5__.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_4__.mdx)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},1123:function(module,exports,__webpack_require__){var map={"./stories/Button.stories.js":1124,"./stories/ButtonDropdown.stories.js":1127,"./stories/Header.stories.js":215,"./stories/Page.stories.js":1138};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id=1123},1124:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Primary",(function(){return Primary}));__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",component:_Components_Button_Button__WEBPACK_IMPORTED_MODULE_3__.a,argTypes:{disabled:{control:"boolean"},options:{control:!1},left:{control:!1}}};var Primary=function Primary(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,{children:"Button"}))};Primary.displayName="Primary",Primary.args={left:{table:{disable:!0}}},Primary.storyName="Simple Button",Primary.parameters=Object.assign({storySource:{source:"(args) => (\n \n Button\n \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 |
{
21 | onClick ? onClick() : null
22 | }}
23 | style={
24 | options
25 | ? null
26 | : { borderTopRightRadius: '5px', borderBottomRightRadius: '5px' }
27 | }
28 | className={`${classes.mainButton} ${classes.root}`}
29 | >
30 | {children}
31 |
32 | {display ? (
33 |
setDisplay(false)}
35 | className={classes.overlay}
36 | >
37 | ) : null}
38 |
39 | {options && options.length > 0 ? (
40 |
41 | setDisplay(!display)}
44 | className={`${classes.root} ${classes.dropDownButton}`}
45 | >
46 |
53 |
54 |
55 |
56 |
57 |
61 |
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 |
39 | Button
40 |
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) =>
58 |
59 | // export const Primary = Template.bind({})
60 | // Primary.args = {
61 | // primary: true,
62 | // label: 'Button'
63 | // }
64 |
65 | // export const Secondary = Template.bind({})
66 | // Secondary.args = {
67 | // label: 'Button'
68 | // }
69 |
70 | // export const Large = Template.bind({})
71 | // Large.args = {
72 | // size: 'large',
73 | // label: 'Button'
74 | // }
75 |
76 | // export const Small = Template.bind({})
77 | // Small.args = {
78 | // size: 'small',
79 | // label: 'Button'
80 | // }
81 |
--------------------------------------------------------------------------------
/src/stories/ButtonDropdown.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 with a Dropdown',
8 | component: Button,
9 | argTypes: {
10 | disabled: {
11 | description: 'When true, Should render a disabled button',
12 | control: 'boolean'
13 | },
14 | options: {
15 | description:
16 | 'An array of objects with properties .If empty array is passed, Dropdown button will not render',
17 | control: 'array'
18 | },
19 | left: {
20 | description: 'Controls the left css property for the Dropdown',
21 | control: 'text'
22 | },
23 | top: {
24 | description: 'Controls the top css property for the Dropdown',
25 | control: 'text'
26 | },
27 | width: {
28 | description: 'Controls the width css property for the Dropdown',
29 | control: 'text'
30 | }
31 | }
32 | }
33 |
34 | const first = () => {
35 | console.log('1st option was clicked')
36 | }
37 | const second = () => {
38 | console.log('2nd option was clicked')
39 | }
40 | const third = () => {
41 | console.log('3rd option was clicked')
42 | }
43 | const onPress = () => {
44 | console.log('Did you just click me?!')
45 | }
46 | const options = [
47 | {
48 | value: 'Started from the bottom',
49 | function: action('Started from the bottom')
50 | },
51 | {
52 | value: 'Sometimes its the journey',
53 | function: second
54 | },
55 | {
56 | value: 'Trust the process',
57 | function: third
58 | }
59 | ]
60 |
61 | export const Secondary = (args) => (
62 |
67 | Button
68 |
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 | [](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 | [](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 | onPress()}>
123 | New
124 |
125 | )
126 | }
127 | export default App
128 | ```
129 |
130 | ### Simple `Button` rendered without a Dropdown
131 |
132 | 
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 onPress()}>New
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 | //
17 | // {label}
18 | //
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 | //
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 |
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 |
--------------------------------------------------------------------------------