Skip to content

Commit e44a025

Browse files
minheqminheq
authored
feat(kitchensink): add kitchen sink component (#243)
* feat(kitchensink): reorganize to accomodate * update imports * refactor * add kitchen sink * add comment
1 parent ab4027c commit e44a025

54 files changed

Lines changed: 22366 additions & 10303 deletions

Some content is hidden

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

‎package.json‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"build:es2015": "tsc --module es2015 --target es2015 --outDir dist/es2015",
2121
"build:esm": "tsc --module es2015 --target es5 --outDir dist/esm",
2222
"build:cjs": "tsc --module commonjs --target es5 --outDir dist/cjs",
23+
"generate:kitchen-sink": "node utils/convertDoczToKitchenSink.js",
2324
"clean": "rimraf dist",
2425
"copy": "cp package.json dist/ && cp README.md dist/ && cp LICENSE dist/",
2526
"dev": "docz dev",
@@ -66,34 +67,40 @@
6667
"@types/react": "16.8.19",
6768
"@types/react-dom": "16.8.4",
6869
"@types/react-native": "0.57.61",
70+
"@types/react-test-renderer": "16.8.1",
6971
"babel-core": "7.0.0-bridge.0",
7072
"babel-jest": "24.8.0",
7173
"countries-list": "2.4.2",
7274
"docz": "1.2.0",
73-
"docz-plugin-snapshots": "0.2.0",
7475
"docz-theme-default": "1.2.0",
7576
"emotion-theming": "10.0.10",
7677
"husky": "2.4.1",
7778
"jest": "24.8.0",
7879
"jest-canvas-mock": "2.1.0",
7980
"lint-staged": "8.2.0",
81+
"mdast-util-to-string": "^1.0.6",
8082
"merge": "1.2.1",
8183
"metro-react-native-babel-preset": "0.54.1",
8284
"prettier": "1.18.2",
8385
"react": "16.8.6",
8486
"react-art": "16.8.6",
8587
"react-docgen-typescript-loader": "3.1.0",
8688
"react-dom": "16.8.6",
87-
"react-powerplug": "1.0.0",
8889
"react-test-renderer": "16.8.6",
90+
"remark": "^10.0.1",
91+
"remark-mdx": "^1.0.20",
8992
"rimraf": "2.6.3",
9093
"semantic-release": "15.13.12",
94+
"to-vfile": "^6.0.0",
9195
"travis-deploy-once": "5.0.11",
9296
"ts-jest": "24.0.2",
9397
"ts-loader": "6.0.2",
9498
"tslint": "5.17.0",
9599
"tslint-sonarts": "1.9.0",
96-
"typescript": "3.5.1"
100+
"typescript": "3.5.1",
101+
"unist-util-is": "^3.0.0",
102+
"unist-util-remove": "^1.0.3",
103+
"unist-util-visit": "^1.4.1"
97104
},
98105
"peerDependencies": {
99106
"react": "^16.8.0",

‎src/components/Alert/Alert.mdx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,15 @@ menu: Components
44
---
55

66
import { Playground, Props } from 'docz';
7-
import { Alert } from './Alert';
8-
import { Box } from '../Box';
7+
import { Alert, Box } from '..';
98

109
# Alert
1110

1211
### Usage
1312

1413
<Playground>
1514
<Alert
16-
title="Kitchen sink"
15+
title="Title"
1716
description="Message"
1817
isCloseable
1918
intent="success"

‎src/components/Avatar/Avatar.mdx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ menu: Components
44
---
55

66
import { Playground, Props } from 'docz';
7-
import { Avatar } from './Avatar';
7+
import { Avatar } from '..';
88

99
# Avatar
1010

@@ -17,7 +17,9 @@ import { Avatar } from './Avatar';
1717
size={40}
1818
isSolid={false}
1919
color="automatic"
20-
getInitials={(name, fallback) => `${name.charAt(0)}${name.charAt(5)}`}
20+
getInitials={(name, fallback) =>
21+
name ? `${name.charAt(0)}${name.charAt(5)}` : 'A'
22+
}
2123
getStyles={(props, theme) => ({
2224
boxStyle: {},
2325
textStyle: {},

‎src/components/Badge/Badge.mdx‎

Lines changed: 68 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,7 @@ menu: Components
44
---
55

66
import { Playground, Props } from 'docz';
7-
import { Badge } from './Badge';
8-
import { ThemeContext } from '../../theme';
9-
import { Box } from '../Box';
7+
import { Badge, Box } from '..';
108

119
# Badge
1210

@@ -29,44 +27,75 @@ import { Box } from '../Box';
2927
</Box>
3028
</Playground>
3129

32-
### Default
30+
### Variants
3331

3432
<Playground>
35-
<ThemeContext.Consumer>
36-
{theme => (
37-
<Box>
38-
{Object.keys(theme.fills.solid).map(color => (
39-
<Box flexDirection="row" key={color}>
40-
<Badge color={color}>{color}</Badge>
41-
<Badge color={color} isSolid>
42-
{color}
43-
</Badge>
44-
</Box>
45-
))}
46-
</Box>
47-
)}
48-
</ThemeContext.Consumer>
49-
</Playground>
50-
51-
### Pills
52-
53-
<Playground>
54-
<ThemeContext.Consumer>
55-
{theme => (
56-
<Box>
57-
{Object.keys(theme.fills.solid).map(color => (
58-
<Box flexDirection="row" key={color}>
59-
<Badge shape="pill" color={color}>
60-
{color}
61-
</Badge>
62-
<Badge shape="pill" color={color} isSolid>
63-
{color}
64-
</Badge>
65-
</Box>
66-
))}
67-
</Box>
68-
)}
69-
</ThemeContext.Consumer>
33+
<Box>
34+
<Box flexDirection="row">
35+
<Badge color="neutral" shape="pill">
36+
neutral
37+
</Badge>
38+
<Badge color="neutral" isSolid>
39+
neutral
40+
</Badge>
41+
</Box>
42+
<Box flexDirection="row">
43+
<Badge color="blue" shape="pill">
44+
blue
45+
</Badge>
46+
<Badge color="blue" isSolid>
47+
blue
48+
</Badge>
49+
</Box>
50+
<Box flexDirection="row">
51+
<Badge color="red" shape="pill">
52+
red
53+
</Badge>
54+
<Badge color="red" isSolid>
55+
red
56+
</Badge>
57+
</Box>
58+
<Box flexDirection="row">
59+
<Badge color="orange" shape="pill">
60+
orange
61+
</Badge>
62+
<Badge color="orange" isSolid>
63+
orange
64+
</Badge>
65+
</Box>
66+
<Box flexDirection="row">
67+
<Badge color="yellow" shape="pill">
68+
yellow
69+
</Badge>
70+
<Badge color="yellow" isSolid>
71+
yellow
72+
</Badge>
73+
</Box>
74+
<Box flexDirection="row">
75+
<Badge color="green" shape="pill">
76+
green
77+
</Badge>
78+
<Badge color="green" isSolid>
79+
green
80+
</Badge>
81+
</Box>
82+
<Box flexDirection="row">
83+
<Badge color="teal" shape="pill">
84+
teal
85+
</Badge>
86+
<Badge color="teal" isSolid>
87+
teal
88+
</Badge>
89+
</Box>
90+
<Box flexDirection="row">
91+
<Badge color="purple" shape="pill">
92+
purple
93+
</Badge>
94+
<Badge color="purple" isSolid>
95+
purple
96+
</Badge>
97+
</Box>
98+
</Box>
7099
</Playground>
71100

72101
### Props

‎src/components/Box/Box.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ menu: Components
55

66
import { Playground, Props } from 'docz';
77

8-
import { Box } from './Box';
8+
import { Box } from '..';
99

1010
# Box
1111

‎src/components/Button/Button.mdx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@ menu: Components
44
---
55

66
import { Playground, Props } from 'docz';
7-
import { Button } from './Button';
8-
import { Box } from '../Box';
7+
import { Box, Button } from '..';
98

109
# Button
1110

‎src/components/Checkbox/Checkbox.mdx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,8 @@ name: Checkbox
33
menu: Components
44
---
55

6-
import { Toggle } from 'react-powerplug';
76
import { Playground, Props } from 'docz';
8-
import { Text } from 'react-native';
9-
import { Checkbox } from '.';
10-
import { FormField } from '../Form';
7+
import { Checkbox, FormField, Toggle } from '..';
118

129
# Checkbox
1310

‎src/components/Collapsible/Collapsible.mdx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,8 @@ name: Collapsible
33
menu: Components
44
---
55

6-
import { Toggle } from 'react-powerplug';
76
import { Playground, Props } from 'docz';
8-
import { Collapsible } from '.';
9-
import { Box } from '../Box';
10-
import { Text } from '../Typography';
7+
import { Box, Collapsible, Text, Toggle } from '..';
118

129
# Collapsible
1310

‎src/components/Counter/Counter.mdx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,20 @@ name: Counter
33
menu: Components
44
---
55

6-
import { Counter as CounterContainer } from 'react-powerplug';
76
import { Playground, Props } from 'docz';
8-
import { Counter } from '.';
7+
import { Counter, CounterState } from '..';
98

109
# Counter
1110

1211
### Usage
1312

1413
<Playground>
15-
<CounterContainer initial={0}>
16-
{({ count, inc, dec }) => (
14+
<CounterState initial={0}>
15+
{({ count, increment, decrement }) => (
1716
<Counter
1817
count={count}
19-
onDecrement={dec}
20-
onIncrement={inc}
18+
onDecrement={decrement}
19+
onIncrement={increment}
2120
min={0}
2221
max={10}
2322
component={null}
@@ -30,7 +29,7 @@ import { Counter } from '.';
3029
})}
3130
/>
3231
)}
33-
</CounterContainer>
32+
</CounterState>
3433
</Playground>
3534

3635
### Props

‎src/components/Dialog/Dialog.mdx‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,9 @@ name: Dialog
33
menu: Components
44
---
55

6-
import { Toggle } from 'react-powerplug';
7-
import { TouchableOpacity } from 'react-native';
86
import { Playground, Props } from 'docz';
97

10-
import { Icon } from '../Icon';
11-
import { Dialog } from '.';
12-
import { Button } from '../Button';
13-
import { Box } from '../Box';
14-
import { Text, Heading } from '../Typography';
8+
import { Box, Button, Dialog, Heading, Icon, Text, Toggle } from '..';
159

1610
# Dialog
1711

@@ -32,9 +26,7 @@ Dialog has no predefined styling and handlers. The content, header and footer is
3226
alignItems="center"
3327
>
3428
<Heading>Title</Heading>
35-
<TouchableOpacity onPress={toggle}>
36-
<Icon name="x" size={24} />
37-
</TouchableOpacity>
29+
<Button icon={<Icon name="x" size={24} />} onPress={toggle} />
3830
</Box>
3931
}
4032
footer={

0 commit comments

Comments
 (0)