diff options
author | 2019-01-04 12:16:14 +0100 | |
---|---|---|
committer | 2019-01-04 12:16:14 +0100 | |
commit | 010917a05e70216e13902aa255ee247c3e1ffdfa (patch) | |
tree | cf5d4f04381f9dceeb570e8a3ad63f346ca3096d /packages/forms | |
parent | Fix missing packages in build (diff) | |
download | ferdium-app-010917a05e70216e13902aa255ee247c3e1ffdfa.tar.gz ferdium-app-010917a05e70216e13902aa255ee247c3e1ffdfa.tar.zst ferdium-app-010917a05e70216e13902aa255ee247c3e1ffdfa.zip |
move storybook to root + typescript
TODO: fix modules
Diffstat (limited to 'packages/forms')
-rw-r--r-- | packages/forms/.storybook/addons.js | 2 | ||||
-rw-r--r-- | packages/forms/.storybook/config.js | 15 | ||||
-rw-r--r-- | packages/forms/.storybook/preview-head.html | 7 | ||||
-rw-r--r-- | packages/forms/.storybook/theme/index.js | 58 | ||||
-rw-r--r-- | packages/forms/misty.yml | 2 | ||||
-rw-r--r-- | packages/forms/package.json | 4 | ||||
-rw-r--r-- | packages/forms/stories/input.stories.js | 95 | ||||
-rw-r--r-- | packages/forms/typings/react-html-attributes.d.ts (renamed from packages/forms/src/typings/react-html-attributes.d.ts) | 0 |
8 files changed, 1 insertions, 182 deletions
diff --git a/packages/forms/.storybook/addons.js b/packages/forms/.storybook/addons.js deleted file mode 100644 index 6aed412d0..000000000 --- a/packages/forms/.storybook/addons.js +++ /dev/null | |||
@@ -1,2 +0,0 @@ | |||
1 | import '@storybook/addon-actions/register'; | ||
2 | import '@storybook/addon-links/register'; | ||
diff --git a/packages/forms/.storybook/config.js b/packages/forms/.storybook/config.js deleted file mode 100644 index d6a69e569..000000000 --- a/packages/forms/.storybook/config.js +++ /dev/null | |||
@@ -1,15 +0,0 @@ | |||
1 | import { configure, addDecorator } from '@storybook/react'; | ||
2 | import { withInfo } from '@storybook/addon-info'; | ||
3 | import withTheme from '../.storybook/theme'; | ||
4 | |||
5 | // automatically import all files ending in *.stories.js | ||
6 | const req = require.context('../stories', true, /.stories.js$/); | ||
7 | |||
8 | addDecorator(withInfo()); | ||
9 | addDecorator(withTheme()); | ||
10 | |||
11 | function loadStories() { | ||
12 | req.keys().forEach(filename => req(filename)); | ||
13 | } | ||
14 | |||
15 | configure(loadStories, module); | ||
diff --git a/packages/forms/.storybook/preview-head.html b/packages/forms/.storybook/preview-head.html deleted file mode 100644 index f5bf78b7a..000000000 --- a/packages/forms/.storybook/preview-head.html +++ /dev/null | |||
@@ -1,7 +0,0 @@ | |||
1 | <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,800" rel="stylesheet"> | ||
2 | <style> | ||
3 | * { | ||
4 | font-family: 'Open Sans', sans-serif; | ||
5 | font-size: 14px; | ||
6 | } | ||
7 | </style> | ||
diff --git a/packages/forms/.storybook/theme/index.js b/packages/forms/.storybook/theme/index.js deleted file mode 100644 index f016f21eb..000000000 --- a/packages/forms/.storybook/theme/index.js +++ /dev/null | |||
@@ -1,58 +0,0 @@ | |||
1 | import React from 'react'; | ||
2 | import injectSheet, { ThemeProvider } from 'react-jss'; | ||
3 | import addons, { makeDecorator } from '@storybook/addons'; | ||
4 | import theme from '@meetfranz/theme'; | ||
5 | |||
6 | const defaultTheme = { | ||
7 | name: 'Default', | ||
8 | variables: theme('default'), | ||
9 | }; | ||
10 | |||
11 | const darkTheme = { | ||
12 | name: 'Dark Mode', | ||
13 | variables: theme('dark'), | ||
14 | }; | ||
15 | |||
16 | const themes = [defaultTheme, darkTheme]; | ||
17 | |||
18 | const styles = (theme) => ({ | ||
19 | title: { | ||
20 | fontSize: 14, | ||
21 | }, | ||
22 | container: { | ||
23 | border: theme.inputBorder, | ||
24 | borderRadius: theme.borderRadiusSmall, | ||
25 | marginBottom: 20, | ||
26 | padding: 20, | ||
27 | background: theme.colorContentBackground, | ||
28 | }, | ||
29 | }); | ||
30 | |||
31 | const Container = injectSheet(styles)(({ name, classes, story }) => ( | ||
32 | <article> | ||
33 | <h1 className={classes.title}>{name}</h1> | ||
34 | <div className={classes.container}> | ||
35 | {story} | ||
36 | </div> | ||
37 | </article> | ||
38 | )); | ||
39 | |||
40 | export default makeDecorator({ | ||
41 | name: 'withTheme', | ||
42 | parameterName: 'theme', | ||
43 | // This means don't run this decorator if the notes decorator is not set | ||
44 | // skipIfNoParametersOrOptions: true, | ||
45 | wrapper: (getStory, context, { options }) => { | ||
46 | const channel = addons.getChannel(); | ||
47 | |||
48 | return ( | ||
49 | <> | ||
50 | {themes.map(theme => ( | ||
51 | <ThemeProvider theme={theme.variables}> | ||
52 | <Container story={getStory(context)} name={theme.name} /> | ||
53 | </ThemeProvider> | ||
54 | ))} | ||
55 | </> | ||
56 | ); | ||
57 | } | ||
58 | }) | ||
diff --git a/packages/forms/misty.yml b/packages/forms/misty.yml deleted file mode 100644 index b34a861a7..000000000 --- a/packages/forms/misty.yml +++ /dev/null | |||
@@ -1,2 +0,0 @@ | |||
1 | forms: | ||
2 | cmd: | ||
diff --git a/packages/forms/package.json b/packages/forms/package.json index c75c11195..d7d88e7b6 100644 --- a/packages/forms/package.json +++ b/packages/forms/package.json | |||
@@ -5,9 +5,7 @@ | |||
5 | "main": "lib/index.js", | 5 | "main": "lib/index.js", |
6 | "scripts": { | 6 | "scripts": { |
7 | "dev": "tsc -w", | 7 | "dev": "tsc -w", |
8 | "prepare": "tsc", | 8 | "prepare": "tsc" |
9 | "storybook": "start-storybook -p 6006", | ||
10 | "build-storybook": "build-storybook" | ||
11 | }, | 9 | }, |
12 | "publishConfig": { | 10 | "publishConfig": { |
13 | "access": "public" | 11 | "access": "public" |
diff --git a/packages/forms/stories/input.stories.js b/packages/forms/stories/input.stories.js deleted file mode 100644 index 2cc784209..000000000 --- a/packages/forms/stories/input.stories.js +++ /dev/null | |||
@@ -1,95 +0,0 @@ | |||
1 | import React from 'react'; | ||
2 | |||
3 | import { storiesOf } from '@storybook/react'; | ||
4 | import { action } from '@storybook/addon-actions'; | ||
5 | |||
6 | import { Input } from '../lib'; | ||
7 | |||
8 | const defaultProps = { | ||
9 | label: 'Label', | ||
10 | id: 'test1', | ||
11 | name: 'test1', | ||
12 | onChange: action('changed'), | ||
13 | focus: true, | ||
14 | }; | ||
15 | |||
16 | const defaultPasswordProps = { | ||
17 | label: 'Password', | ||
18 | type: 'password', | ||
19 | id: 'test1', | ||
20 | name: 'test1', | ||
21 | onChange: action('changed'), | ||
22 | focus: true, | ||
23 | }; | ||
24 | |||
25 | storiesOf('Input', module) | ||
26 | .add('Basic', () => ( | ||
27 | <Input | ||
28 | {...defaultProps} | ||
29 | placeholder="Placeholder text" | ||
30 | /> | ||
31 | )) | ||
32 | .add('Without Label', () => ( | ||
33 | <Input | ||
34 | {...defaultProps} | ||
35 | showLabel={false} | ||
36 | /> | ||
37 | )) | ||
38 | .add('Disabled', () => ( | ||
39 | <Input {...defaultProps} disabled /> | ||
40 | )) | ||
41 | .add('With prefix', () => ( | ||
42 | <Input | ||
43 | {...defaultProps} | ||
44 | prefix="https://" | ||
45 | /> | ||
46 | )) | ||
47 | .add('With suffix', () => ( | ||
48 | <Input | ||
49 | {...defaultProps} | ||
50 | suffix=".meetfranz.com" | ||
51 | /> | ||
52 | )) | ||
53 | .add('With pre-/suffix', () => ( | ||
54 | <Input | ||
55 | {...defaultProps} | ||
56 | prefix="https://" | ||
57 | suffix=".meetfranz.com" | ||
58 | /> | ||
59 | )) | ||
60 | .add('With error', () => ( | ||
61 | <Input | ||
62 | {...defaultProps} | ||
63 | value="faulty input" | ||
64 | error="This is a generic error message." | ||
65 | /> | ||
66 | )); | ||
67 | |||
68 | storiesOf('Password', module) | ||
69 | // .addDecorator(withThemesProvider(themes)) | ||
70 | .add('Basic', () => ( | ||
71 | <Input | ||
72 | {...defaultPasswordProps} | ||
73 | /> | ||
74 | )) | ||
75 | .add('Show password toggle', () => ( | ||
76 | <Input | ||
77 | {...defaultPasswordProps} | ||
78 | showPasswordToggle | ||
79 | /> | ||
80 | )) | ||
81 | .add('Score password', () => ( | ||
82 | <Input | ||
83 | {...defaultPasswordProps} | ||
84 | showPasswordToggle | ||
85 | scorePassword | ||
86 | /> | ||
87 | )) | ||
88 | .add('Score password with error', () => ( | ||
89 | <Input | ||
90 | {...defaultPasswordProps} | ||
91 | error="Password is too short" | ||
92 | showPasswordToggle | ||
93 | scorePassword | ||
94 | /> | ||
95 | )); | ||
diff --git a/packages/forms/src/typings/react-html-attributes.d.ts b/packages/forms/typings/react-html-attributes.d.ts index 6f8f20fe4..6f8f20fe4 100644 --- a/packages/forms/src/typings/react-html-attributes.d.ts +++ b/packages/forms/typings/react-html-attributes.d.ts | |||