Skip to content

Commit a060172

Browse files
kamleshchandnanikamleshchandnani
authored
feat(storybook): add storybook docs (#197)
* feat(storybook): add storybook docs * fix(scripts): modify buildPrepare.js * fix(Form): add eslint disable to validation.js
1 parent 28d4a84 commit a060172

File tree

320 files changed

+2159
-2625
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

320 files changed

+2159
-2625
lines changed

‎.eslintrc

+14
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,20 @@
66
"node": true,
77
"jest": true
88
},
9+
"settings": {
10+
"import/resolver": {
11+
"node": {
12+
"extensions": [
13+
".js",
14+
".web.js",
15+
".amp.js",
16+
".native.js",
17+
".ios.js",
18+
".android.js"
19+
]
20+
}
21+
}
22+
},
923
"rules": {
1024
"arrow-parens": ["error", "always"],
1125
"function-paren-newline": ["error", "consistent"],

‎README.md

+6-6
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ Wrap your App component with ThemeProvider and pass it the leaf-ui theme (or ove
2020
import React from 'react';
2121
import ReactDOM from 'react-dom';
2222
import { ThemeProvider } from 'styled-components';
23-
import leafUiTheme, { BaseStyles } from 'leaf-ui/theme/web';
23+
import leafUiTheme, { BaseStyles } from 'leaf-ui/theme';
2424
import App from './App';
2525

2626
ReactDOM.render(
@@ -36,10 +36,10 @@ Import and use the components in your App.js
3636
```js
3737
// App.js
3838
import React from 'react';
39-
import Button from 'leaf-ui/Button/web';
39+
import Button from 'leaf-ui/Button';
4040

4141
// for commonjs use,
42-
// import Button from 'leaf-ui/cjs/Button/web';
42+
// import Button from 'leaf-ui/cjs/Button';
4343

4444
const App = () => (
4545
<Button>
@@ -51,9 +51,9 @@ export default App;
5151
```
5252

5353
Supported Platforms
54-
* /web
55-
* /native
56-
* /amp
54+
* web
55+
* native
56+
* amp
5757

5858

5959
# Contribute

‎package.json

+51-10
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@
1313
"semantic-release": "semantic-release",
1414
"build": "run-s build:clean && run-p build:es build:cjs",
1515
"build:clean": "rimraf es cjs",
16-
"build:es": "babel src -d es --ignore *.test.js,*.story.js,makeStories.js",
17-
"build:cjs": "NODE_ENV=cjs babel src -d cjs --ignore *.test.js,*.story.js,makeStories.js",
16+
"build:es": "babel src -d es --ignore *.test.js,*.story.js",
17+
"build:cjs": "NODE_ENV=cjs babel src -d cjs --ignore *.test.js,*.story.js",
1818
"build:prepare": "node ./src/scripts/buildPrepare.js",
1919
"precommit": "lint-staged",
2020
"commit": "git-cz",
@@ -43,7 +43,7 @@
4343
"yup": "0.26.6"
4444
},
4545
"devDependencies": {
46-
"@applitools/eyes-storybook": "2.6.3",
46+
"@applitools/eyes-storybook": "2.7.32",
4747
"@babel/cli": "7.2.3",
4848
"@babel/core": "7.2.2",
4949
"@babel/plugin-external-helpers": "7.2.0",
@@ -55,13 +55,15 @@
5555
"@babel/preset-env": "7.3.1",
5656
"@babel/preset-flow": "7.0.0",
5757
"@babel/preset-react": "7.0.0",
58-
"@storybook/addon-actions": "5.0.5",
59-
"@storybook/addon-knobs": "5.0.5",
60-
"@storybook/react": "5.0.5",
61-
"@storybook/react-native": "4.1.11",
62-
"@storybook/theming": "5.0.5",
58+
"@storybook/addon-actions": "5.2.0-beta.39",
59+
"@storybook/addon-docs": "5.2.0-beta.39",
60+
"@storybook/addon-knobs": "5.2.0-beta.39",
61+
"@storybook/react": "5.2.0-beta.39",
62+
"@storybook/react-native": "5.2.0-beta.39",
63+
"@storybook/theming": "5.2.0-beta.39",
6364
"babel-eslint": "9.0.0",
6465
"babel-jest": "24.0.0",
66+
"babel-loader": "8.0.6",
6567
"babel-plugin-styled-components": "1.10.0",
6668
"babel-plugin-syntax-trailing-function-commas": "6.22.0",
6769
"commitizen": "2.10.1",
@@ -120,5 +122,44 @@
120122
"commitizen": {
121123
"path": "./node_modules/cz-conventional-changelog"
122124
}
123-
}
124-
}
125+
},
126+
"files": [
127+
"cjs/**/*",
128+
"es/**/*",
129+
"Accordion/**/*",
130+
"Button/**/*",
131+
"Card/**/*",
132+
"Checkbox/**/*",
133+
"DatePickerInput/**/*",
134+
"DateRangePickerInput/**/*",
135+
"Divider/**/*",
136+
"Dropdown/**/*",
137+
"Flex/**/*",
138+
"Form/**/*",
139+
"Gallery/**/*",
140+
"Icon/**/*",
141+
"Image/**/*",
142+
"Link/**/*",
143+
"List/**/*",
144+
"Modal/**/*",
145+
"MoreOrLess/**/*",
146+
"Notification/**/*",
147+
"Position/**/*",
148+
"Price/**/*",
149+
"RadioButton/**/*",
150+
"Select/**/*",
151+
"Size/**/*",
152+
"Space/**/*",
153+
"Table/**/*",
154+
"Tabs/**/*",
155+
"Tag/**/*",
156+
"Text/**/*",
157+
"TextArea/**/*",
158+
"TextInput/**/*",
159+
"Toggle/**/*",
160+
"Tooltip/**/*",
161+
"View/**/*",
162+
"theme/**/*",
163+
"theme.js"
164+
]
165+
}

‎src/Accordion/amp/Accordion.js ‎src/Accordion/Accordion.amp.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
33
import AccordionSection from './AccordionSection';
44
import AccordionSectionTrigger from './AccordionSectionTrigger';
55
import AccordionSectionContent from './AccordionSectionContent';
6-
import reactChildrenGroupByType from '../../utils/reactChildrenGroupByType';
6+
import reactChildrenGroupByType from '../utils/reactChildrenGroupByType';
77

88
let groupIndex = 0;
99

‎src/Accordion/Accordion.story.js

+159
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
import React from 'react';
2+
import { storiesOf } from '@storybook/react';
3+
import View from '../View';
4+
import Space from '../Space';
5+
import Icon from '../Icon';
6+
import Divider from '../Divider';
7+
import Text from '../Text';
8+
import Flex from '../Flex';
9+
import Image from '../Image';
10+
import Accordion from './Accordion';
11+
12+
const sampleText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit.
13+
Maecenas at elit eget diam convallis ultricies in a ligula.
14+
Nunc rutrum est ut risus laoreet laoreet.
15+
Donec convallis massa at pretium tincidunt.
16+
Quisque quis tellus quis odio venenatis bibendum.
17+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
18+
Maecenas at elit eget diam convallis ultricies in a ligula.
19+
Nunc rutrum est ut risus laoreet laoreet.
20+
Donec convallis massa at pretium tincidunt.
21+
Quisque quis tellus quis odio venenatis bibendum.
22+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
23+
Maecenas at elit eget diam convallis ultricies in a ligula.
24+
Nunc rutrum est ut risus laoreet laoreet.
25+
Donec convallis massa at pretium tincidunt.
26+
Quisque quis tellus quis odio venenatis bibendum.
27+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
28+
Maecenas at elit eget diam convallis ultricies in a ligula.
29+
Nunc rutrum est ut risus laoreet laoreet.
30+
Donec convallis massa at pretium tincidunt.
31+
Quisque quis tellus quis odio venenatis bibendum`;
32+
33+
storiesOf('Accordion', module).addParameters({
34+
component: Accordion,
35+
})
36+
.add('Simple Accordion', () => (
37+
<React.Fragment>
38+
<Space padding={[2]}>
39+
<Text size="xl" color="greyDarker">Simple Accordion</Text>
40+
</Space>
41+
<Accordion>
42+
<Accordion.Section>
43+
<Accordion.Section.Trigger>
44+
<Space padding={[2]}>
45+
<Flex
46+
flexDirection="row"
47+
alignItems="center"
48+
justifyContent="space-between"
49+
>
50+
<View>
51+
<Text size="s" weight="medium" color="greyDarker">
52+
This is title1
53+
</Text>
54+
<Icon name="keyboard_arrow_down" right />
55+
</View>
56+
</Flex>
57+
</Space>
58+
</Accordion.Section.Trigger>
59+
<Accordion.Section.Content>
60+
<Space padding={[2]}>
61+
<View>
62+
<Image
63+
alt="img-1"
64+
src="https://images.treebohotels.com/files/Treebo_The_Galaxy/Oak/OAk_(4).jpg"
65+
height="200px"
66+
width="200px"
67+
/>
68+
{sampleText}
69+
</View>
70+
</Space>
71+
</Accordion.Section.Content>
72+
</Accordion.Section>
73+
<Divider />
74+
<Accordion.Section>
75+
<Accordion.Section.Trigger>
76+
<Space padding={[2]}>
77+
<Flex
78+
flexDirection="row"
79+
alignItems="center"
80+
justifyContent="space-between"
81+
>
82+
<View>
83+
<Text size="s" weight="medium" color="greyDarker">
84+
This is title2
85+
</Text>
86+
<Icon name="keyboard_arrow_down" right />
87+
</View>
88+
</Flex>
89+
</Space>
90+
</Accordion.Section.Trigger>
91+
<Accordion.Section.Content>
92+
<Space padding={[2]}>
93+
<View>{sampleText}</View>
94+
</Space>
95+
</Accordion.Section.Content>
96+
</Accordion.Section>
97+
</Accordion>
98+
</React.Fragment>
99+
))
100+
.add('Multiple Accordions', () => (
101+
<React.Fragment>
102+
<Space padding={[2]}>
103+
<Text size="xl" color="greyDarker">Accordion 1</Text>
104+
</Space>
105+
<Accordion>
106+
<Accordion.Section>
107+
<Accordion.Section.Trigger>
108+
<Space padding={[2]}>
109+
<Flex
110+
flexDirection="row"
111+
alignItems="center"
112+
justifyContent="space-between"
113+
>
114+
<View>
115+
<Text size="s" weight="medium" color="greyDarker">
116+
This is title
117+
</Text>
118+
<Icon name="keyboard_arrow_down" right />
119+
</View>
120+
</Flex>
121+
</Space>
122+
</Accordion.Section.Trigger>
123+
<Accordion.Section.Content>
124+
<Space padding={[2]}>
125+
<View>{sampleText}</View>
126+
</Space>
127+
</Accordion.Section.Content>
128+
</Accordion.Section>
129+
</Accordion>
130+
<Space padding={[2]}>
131+
<Text size="xl" color="greyDarker">Accordion 2</Text>
132+
</Space>
133+
<Accordion>
134+
<Accordion.Section>
135+
<Accordion.Section.Trigger>
136+
<Space padding={[2]}>
137+
<Flex
138+
flexDirection="row"
139+
alignItems="center"
140+
justifyContent="space-between"
141+
>
142+
<View>
143+
<Text size="s" weight="medium" color="greyDarker">
144+
This is title
145+
</Text>
146+
<Icon name="keyboard_arrow_down" right />
147+
</View>
148+
</Flex>
149+
</Space>
150+
</Accordion.Section.Trigger>
151+
<Accordion.Section.Content>
152+
<Space padding={[2]}>
153+
<View>{sampleText}</View>
154+
</Space>
155+
</Accordion.Section.Content>
156+
</Accordion.Section>
157+
</Accordion>
158+
</React.Fragment>
159+
));

‎src/Accordion/Accordion.web.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export default () => null;

‎src/Accordion/amp/AccordionSection.js ‎src/Accordion/AccordionSection.amp.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
33
import styled from 'styled-components';
44
import AccordionSectionTrigger from './AccordionSectionTrigger';
55
import AccordionSectionContent from './AccordionSectionContent';
6-
import { I } from '../../Icon/amp';
6+
import { I } from '../Icon';
77

88
let inputIndex = 0;
99

‎src/Accordion/amp/AccordionSectionContent.js ‎src/Accordion/AccordionSectionContent.amp.js

File renamed without changes.

‎src/Accordion/amp/AccordionSectionTrigger.js ‎src/Accordion/AccordionSectionTrigger.amp.js

File renamed without changes.

‎src/Accordion/amp/Accordion.story.js

-21
This file was deleted.

‎src/Accordion/amp/index.js ‎src/Accordion/index.js

File renamed without changes.

0 commit comments

Comments
 (0)