diff options
Diffstat (limited to 'uidev')
-rw-r--r-- | uidev/src/app.html | 12 | ||||
-rw-r--r-- | uidev/src/app.tsx | 125 | ||||
-rw-r--r-- | uidev/src/index.tsx | 6 | ||||
-rw-r--r-- | uidev/src/stores/index.ts | 5 | ||||
-rw-r--r-- | uidev/src/stores/stories.ts | 41 | ||||
-rw-r--r-- | uidev/src/stories/badge.stories.tsx | 29 | ||||
-rw-r--r-- | uidev/src/stories/button.stories.tsx | 175 | ||||
-rw-r--r-- | uidev/src/stories/headline.stories.tsx | 48 | ||||
-rw-r--r-- | uidev/src/stories/icon.stories.tsx | 12 | ||||
-rw-r--r-- | uidev/src/stories/infobox.stories.tsx | 145 | ||||
-rw-r--r-- | uidev/src/stories/input.stories.tsx | 69 | ||||
-rw-r--r-- | uidev/src/stories/loader.stories.tsx | 8 | ||||
-rw-r--r-- | uidev/src/stories/select.stories.tsx | 303 | ||||
-rw-r--r-- | uidev/src/stories/textarea.stories.tsx | 30 | ||||
-rw-r--r-- | uidev/src/stories/toggle.stories.tsx | 76 | ||||
-rw-r--r-- | uidev/src/withTheme/index.tsx | 56 | ||||
-rw-r--r-- | uidev/tsconfig.json | 16 | ||||
-rw-r--r-- | uidev/webpack.config.js | 31 |
18 files changed, 0 insertions, 1187 deletions
diff --git a/uidev/src/app.html b/uidev/src/app.html deleted file mode 100644 index 2557bf25e..000000000 --- a/uidev/src/app.html +++ /dev/null | |||
@@ -1,12 +0,0 @@ | |||
1 | <!DOCTYPE html> | ||
2 | <html> | ||
3 | |||
4 | <head> | ||
5 | <title>UIDev</title> | ||
6 | <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,800" rel="stylesheet"> | ||
7 | </head> | ||
8 | |||
9 | <body> | ||
10 | <div id="root"></div> | ||
11 | </body> | ||
12 | </html> | ||
diff --git a/uidev/src/app.tsx b/uidev/src/app.tsx deleted file mode 100644 index 26e0f5b96..000000000 --- a/uidev/src/app.tsx +++ /dev/null | |||
@@ -1,125 +0,0 @@ | |||
1 | import { Property } from 'csstype'; | ||
2 | import { Classes } from 'jss'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import injectSheet from 'react-jss'; | ||
5 | |||
6 | import { theme, ThemeType } from '@meetfranz/theme'; | ||
7 | import { WithTheme } from './withTheme'; | ||
8 | |||
9 | import './stories/badge.stories'; | ||
10 | import './stories/button.stories'; | ||
11 | import './stories/headline.stories'; | ||
12 | import './stories/icon.stories'; | ||
13 | import './stories/infobox.stories'; | ||
14 | import './stories/input.stories'; | ||
15 | import './stories/loader.stories'; | ||
16 | import './stories/select.stories'; | ||
17 | import './stories/textarea.stories'; | ||
18 | import './stories/toggle.stories'; | ||
19 | |||
20 | import { store } from './stores'; | ||
21 | |||
22 | const defaultTheme = theme(ThemeType.default); | ||
23 | |||
24 | const styles = { | ||
25 | '@global body': { | ||
26 | margin: 0, | ||
27 | fontSize: defaultTheme.uiFontSize, | ||
28 | fontFamily: "'Open Sans', sans-serif", | ||
29 | }, | ||
30 | container: { | ||
31 | display: 'flex', | ||
32 | width: '100%', | ||
33 | }, | ||
34 | menu: { | ||
35 | width: 300, | ||
36 | position: 'fixed' as Property.Position, | ||
37 | listStyleType: 'none', | ||
38 | fontSize: 14, | ||
39 | overflow: 'scroll', | ||
40 | height: '100%', | ||
41 | }, | ||
42 | storyList: { | ||
43 | paddingLeft: 18, | ||
44 | marginTop: 5, | ||
45 | marginBottom: 20, | ||
46 | }, | ||
47 | stories: { | ||
48 | width: '100%', | ||
49 | marginLeft: 320, | ||
50 | paddingLeft: 40, | ||
51 | paddingRight: 40, | ||
52 | borderLeft: '1px solid #CFCFCF', | ||
53 | background: '#f7f7f7', | ||
54 | }, | ||
55 | sectionHeadline: { | ||
56 | fontSize: 30, | ||
57 | }, | ||
58 | storyHeadline: { | ||
59 | fontSize: 24, | ||
60 | }, | ||
61 | story: { | ||
62 | paddingBottom: 40, | ||
63 | marginBottom: 40, | ||
64 | borderBottom: '1px solid #CFCFCF', | ||
65 | }, | ||
66 | sectionLink: { | ||
67 | fontWeight: 'bold' as Property.FontWeight, | ||
68 | color: '#000', | ||
69 | textDecoration: 'none', | ||
70 | }, | ||
71 | storyLink: { | ||
72 | color: '#000', | ||
73 | textDecoration: 'none', | ||
74 | }, | ||
75 | }; | ||
76 | |||
77 | export const App = injectSheet(styles)( | ||
78 | observer(({ classes }: { classes: Classes }) => ( | ||
79 | <div className={classes.container}> | ||
80 | <ul className={classes.menu}> | ||
81 | {store.stories.sections.map((section, key) => ( | ||
82 | <li key={key}> | ||
83 | <a href={`#section-${key}`} className={classes.sectionLink}> | ||
84 | {section.name} | ||
85 | </a> | ||
86 | <ul className={classes.storyList}> | ||
87 | {section.stories.map((story, storyKey) => ( | ||
88 | <li key={storyKey}> | ||
89 | <a | ||
90 | href={`#section-${key}-story-${storyKey}`} | ||
91 | className={classes.storyLink} | ||
92 | > | ||
93 | {story.name} | ||
94 | </a> | ||
95 | </li> | ||
96 | ))} | ||
97 | </ul> | ||
98 | </li> | ||
99 | ))} | ||
100 | </ul> | ||
101 | <div className={classes.stories}> | ||
102 | {store.stories.sections.map((section, key) => ( | ||
103 | <div key={key}> | ||
104 | <h1 id={`section-${key}`} className={classes.sectionHeadline}> | ||
105 | {section.name} | ||
106 | </h1> | ||
107 | {section.stories.map((story, storyKey) => ( | ||
108 | <div className={classes.story} key={storyKey}> | ||
109 | <h2 | ||
110 | id={`section-${key}-story-${storyKey}`} | ||
111 | className={classes.storyHeadline} | ||
112 | > | ||
113 | {story.name} | ||
114 | </h2> | ||
115 | <WithTheme> | ||
116 | <story.component /> | ||
117 | </WithTheme> | ||
118 | </div> | ||
119 | ))} | ||
120 | </div> | ||
121 | ))} | ||
122 | </div> | ||
123 | </div> | ||
124 | )), | ||
125 | ); | ||
diff --git a/uidev/src/index.tsx b/uidev/src/index.tsx deleted file mode 100644 index 0f2003d24..000000000 --- a/uidev/src/index.tsx +++ /dev/null | |||
@@ -1,6 +0,0 @@ | |||
1 | import { render } from 'react-dom'; | ||
2 | import { App } from './app'; | ||
3 | |||
4 | const app = () => <App />; | ||
5 | |||
6 | render(app(), document.querySelector('#root')); | ||
diff --git a/uidev/src/stores/index.ts b/uidev/src/stores/index.ts deleted file mode 100644 index 276058ec4..000000000 --- a/uidev/src/stores/index.ts +++ /dev/null | |||
@@ -1,5 +0,0 @@ | |||
1 | import { storyStore } from './stories'; | ||
2 | |||
3 | export const store = { | ||
4 | stories: storyStore, | ||
5 | }; | ||
diff --git a/uidev/src/stores/stories.ts b/uidev/src/stores/stories.ts deleted file mode 100644 index 12bacdd59..000000000 --- a/uidev/src/stores/stories.ts +++ /dev/null | |||
@@ -1,41 +0,0 @@ | |||
1 | export type StorySectionName = string; | ||
2 | export type StoryName = string; | ||
3 | export type StoryComponent = () => JSX.Element; | ||
4 | |||
5 | export interface IStories { | ||
6 | name: string; | ||
7 | component: StoryComponent; | ||
8 | } | ||
9 | |||
10 | export interface ISections { | ||
11 | name: StorySectionName; | ||
12 | stories: IStories[]; | ||
13 | } | ||
14 | |||
15 | export interface IStoryStore { | ||
16 | sections: ISections[]; | ||
17 | } | ||
18 | |||
19 | export const storyStore: IStoryStore = { | ||
20 | sections: [], | ||
21 | }; | ||
22 | |||
23 | export const storiesOf = (name: StorySectionName) => { | ||
24 | const length = storyStore.sections.push({ | ||
25 | name, | ||
26 | stories: [], | ||
27 | }); | ||
28 | |||
29 | const actions = { | ||
30 | add: (name: StoryName, component: StoryComponent) => { | ||
31 | storyStore.sections[length - 1].stories.push({ | ||
32 | name, | ||
33 | component, | ||
34 | }); | ||
35 | |||
36 | return actions; | ||
37 | }, | ||
38 | }; | ||
39 | |||
40 | return actions; | ||
41 | }; | ||
diff --git a/uidev/src/stories/badge.stories.tsx b/uidev/src/stories/badge.stories.tsx deleted file mode 100644 index 05fa4617b..000000000 --- a/uidev/src/stories/badge.stories.tsx +++ /dev/null | |||
@@ -1,29 +0,0 @@ | |||
1 | import { Badge, ProBadge } from '@meetfranz/ui'; | ||
2 | import { storiesOf } from '../stores/stories'; | ||
3 | |||
4 | storiesOf('Badge') | ||
5 | .add('Basic', () => ( | ||
6 | <> | ||
7 | <Badge>New</Badge> | ||
8 | </> | ||
9 | )) | ||
10 | .add('Styles', () => ( | ||
11 | <> | ||
12 | <Badge type="primary">Primary</Badge> | ||
13 | <Badge type="secondary">secondary</Badge> | ||
14 | <Badge type="success">success</Badge> | ||
15 | <Badge type="warning">warning</Badge> | ||
16 | <Badge type="danger">danger</Badge> | ||
17 | <Badge type="inverted">inverted</Badge> | ||
18 | </> | ||
19 | )) | ||
20 | .add('Pro Badge', () => ( | ||
21 | <> | ||
22 | <ProBadge /> | ||
23 | </> | ||
24 | )) | ||
25 | .add('Pro Badge inverted', () => ( | ||
26 | <> | ||
27 | <ProBadge inverted /> | ||
28 | </> | ||
29 | )); | ||
diff --git a/uidev/src/stories/button.stories.tsx b/uidev/src/stories/button.stories.tsx deleted file mode 100644 index 400063cea..000000000 --- a/uidev/src/stories/button.stories.tsx +++ /dev/null | |||
@@ -1,175 +0,0 @@ | |||
1 | import { mdiInformation } from '@mdi/js'; | ||
2 | import { observable } from 'mobx'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import * as React from 'react'; | ||
5 | import injectSheet from 'react-jss'; | ||
6 | |||
7 | import { Button, Input } from '@meetfranz/forms'; | ||
8 | import { Classes } from 'jss'; | ||
9 | import { storiesOf } from '../stores/stories'; | ||
10 | |||
11 | const defaultProps = { | ||
12 | label: 'Button', | ||
13 | id: 'test1', | ||
14 | name: 'test1', | ||
15 | type: 'button', | ||
16 | disabled: false, | ||
17 | }; | ||
18 | |||
19 | const styles = { | ||
20 | combinedElements: { | ||
21 | display: 'flex', | ||
22 | justifyContent: 'space-between', | ||
23 | }, | ||
24 | input: { | ||
25 | flex: 1, | ||
26 | marginRight: 20, | ||
27 | }, | ||
28 | }; | ||
29 | |||
30 | const createStore = (args?: any) => observable({ ...defaultProps, ...args }); | ||
31 | |||
32 | const WithStoreButton = observer(({ store }: { store: any }) => ( | ||
33 | <> | ||
34 | <Button | ||
35 | {...{ ...defaultProps, ...store }} | ||
36 | onClick={ | ||
37 | !store.onClick | ||
38 | ? () => { | ||
39 | store.busy = !store.busy; | ||
40 | |||
41 | window.setTimeout(() => { | ||
42 | store.busy = !store.busy; | ||
43 | }, 1000); | ||
44 | } | ||
45 | : store.onClick | ||
46 | } | ||
47 | /> | ||
48 | </> | ||
49 | )); | ||
50 | |||
51 | storiesOf('Button') | ||
52 | .add('Basic', () => <WithStoreButton store={createStore()} />) | ||
53 | .add('Secondary', () => ( | ||
54 | <WithStoreButton | ||
55 | store={createStore({ | ||
56 | buttonType: 'secondary', | ||
57 | })} | ||
58 | /> | ||
59 | )) | ||
60 | .add('Success', () => ( | ||
61 | <WithStoreButton | ||
62 | store={createStore({ | ||
63 | buttonType: 'success', | ||
64 | })} | ||
65 | /> | ||
66 | )) | ||
67 | .add('Warning', () => ( | ||
68 | <WithStoreButton | ||
69 | store={createStore({ | ||
70 | buttonType: 'warning', | ||
71 | })} | ||
72 | /> | ||
73 | )) | ||
74 | .add('Danger', () => ( | ||
75 | <WithStoreButton | ||
76 | store={createStore({ | ||
77 | buttonType: 'danger', | ||
78 | })} | ||
79 | /> | ||
80 | )) | ||
81 | .add('Inverted', () => ( | ||
82 | <WithStoreButton | ||
83 | store={createStore({ | ||
84 | buttonType: 'inverted', | ||
85 | })} | ||
86 | /> | ||
87 | )) | ||
88 | .add('Full width', () => ( | ||
89 | <WithStoreButton | ||
90 | store={createStore({ | ||
91 | stretch: true, | ||
92 | })} | ||
93 | /> | ||
94 | )) | ||
95 | .add('Disabled', () => ( | ||
96 | <WithStoreButton | ||
97 | store={createStore({ | ||
98 | disabled: true, | ||
99 | })} | ||
100 | /> | ||
101 | )) | ||
102 | .add('With loader', () => ( | ||
103 | <WithStoreButton | ||
104 | store={createStore({ | ||
105 | busy: true, | ||
106 | })} | ||
107 | /> | ||
108 | )) | ||
109 | .add('With icon', () => ( | ||
110 | <WithStoreButton | ||
111 | store={createStore({ | ||
112 | icon: mdiInformation, | ||
113 | })} | ||
114 | /> | ||
115 | )) | ||
116 | .add('As link', () => ( | ||
117 | <WithStoreButton | ||
118 | store={createStore({ | ||
119 | href: 'https://meetfranz.com', | ||
120 | })} | ||
121 | /> | ||
122 | )) | ||
123 | .add('As link (target=_blank)', () => ( | ||
124 | <WithStoreButton | ||
125 | store={createStore({ | ||
126 | href: 'https://meetfranz.com', | ||
127 | target: '_blank', | ||
128 | })} | ||
129 | /> | ||
130 | )) | ||
131 | .add('As link (with onClick)', () => ( | ||
132 | <WithStoreButton | ||
133 | store={createStore({ | ||
134 | href: 'https://meetfranz.com', | ||
135 | onClick: (e: React.MouseEvent<HTMLAnchorElement>) => { | ||
136 | e.preventDefault(); | ||
137 | alert('Click event'); | ||
138 | }, | ||
139 | })} | ||
140 | /> | ||
141 | )) | ||
142 | .add('Long multi-line button', () => ( | ||
143 | <WithStoreButton | ||
144 | store={createStore({ | ||
145 | label: | ||
146 | 'But there is something that I must say to my people, who stand on the warm threshold which leads into the palace of justice: In the process of gaining our rightful place, we must not be guilty of wrongful deeds. Let us not seek to satisfy our thirst for freedom by drinking from the cup of bitterness and hatred. We must forever conduct our struggle on the high plane of dignity and discipline. We must not allow our creative protest to degenerate into physical violence. Again and again, we must rise to the majestic heights of meeting physical force with soul force.', | ||
147 | })} | ||
148 | /> | ||
149 | )) | ||
150 | .add( | ||
151 | 'Button with Input', | ||
152 | injectSheet(styles)( | ||
153 | observer(({ classes }: { classes: Classes }) => ( | ||
154 | <div className={classes.combinedElements}> | ||
155 | <Input showLabel={false} className={classes.input} noMargin /> | ||
156 | <WithStoreButton store={createStore({})} /> | ||
157 | </div> | ||
158 | )), | ||
159 | ), | ||
160 | ) | ||
161 | .add( | ||
162 | 'Icon Button with Input', | ||
163 | injectSheet(styles)( | ||
164 | observer(({ classes }: { classes: Classes }) => ( | ||
165 | <div className={classes.combinedElements}> | ||
166 | <Input showLabel={false} className={classes.input} noMargin /> | ||
167 | <WithStoreButton | ||
168 | store={createStore({ | ||
169 | icon: mdiInformation, | ||
170 | })} | ||
171 | /> | ||
172 | </div> | ||
173 | )), | ||
174 | ), | ||
175 | ); | ||
diff --git a/uidev/src/stories/headline.stories.tsx b/uidev/src/stories/headline.stories.tsx deleted file mode 100644 index f6a95b1f4..000000000 --- a/uidev/src/stories/headline.stories.tsx +++ /dev/null | |||
@@ -1,48 +0,0 @@ | |||
1 | import { H1, H2, H3, H4 } from '@meetfranz/ui'; | ||
2 | import { storiesOf } from '../stores/stories'; | ||
3 | |||
4 | // interface IStoreArgs { | ||
5 | // value?: boolean; | ||
6 | // checked?: boolean; | ||
7 | // label?: string; | ||
8 | // id?: string; | ||
9 | // name?: string; | ||
10 | // disabled?: boolean; | ||
11 | // error?: string; | ||
12 | // } | ||
13 | |||
14 | // const createStore = (args?: IStoreArgs) => { | ||
15 | // return observable(Object.assign({ | ||
16 | // id: `element-${uuid()}`, | ||
17 | // name: 'toggle', | ||
18 | // label: 'Label', | ||
19 | // value: true, | ||
20 | // checked: false, | ||
21 | // disabled: false, | ||
22 | // error: '', | ||
23 | // }, args)); | ||
24 | // }; | ||
25 | |||
26 | // const WithStoreToggle = observer(({ store }: { store: any }) => ( | ||
27 | // <> | ||
28 | // <Toggle | ||
29 | // value={store.value} | ||
30 | // checked={store.checked} | ||
31 | // label={store.label} | ||
32 | // id={store.id} | ||
33 | // name={store.name} | ||
34 | // disabled={store.disabled} | ||
35 | // error={store.error} | ||
36 | // onChange={() => store.checked = !store.checked} | ||
37 | // /> | ||
38 | // </> | ||
39 | // )); | ||
40 | |||
41 | storiesOf('Typo').add('Headlines', () => ( | ||
42 | <> | ||
43 | <H1>Welcome to the world of tomorrow</H1> | ||
44 | <H2>Welcome to the world of tomorrow</H2> | ||
45 | <H3>Welcome to the world of tomorrow</H3> | ||
46 | <H4>Welcome to the world of tomorrow</H4> | ||
47 | </> | ||
48 | )); | ||
diff --git a/uidev/src/stories/icon.stories.tsx b/uidev/src/stories/icon.stories.tsx deleted file mode 100644 index 73ed1b927..000000000 --- a/uidev/src/stories/icon.stories.tsx +++ /dev/null | |||
@@ -1,12 +0,0 @@ | |||
1 | import { mdiAccountCircle } from '@mdi/js'; | ||
2 | |||
3 | import { Icon } from '@meetfranz/ui'; | ||
4 | import { storiesOf } from '../stores/stories'; | ||
5 | |||
6 | storiesOf('Icon').add('Basic', () => ( | ||
7 | <> | ||
8 | <Icon icon={mdiAccountCircle} /> | ||
9 | <Icon icon={mdiAccountCircle} size={2} /> | ||
10 | <Icon icon={mdiAccountCircle} size={3} /> | ||
11 | </> | ||
12 | )); | ||
diff --git a/uidev/src/stories/infobox.stories.tsx b/uidev/src/stories/infobox.stories.tsx deleted file mode 100644 index b5f86e37d..000000000 --- a/uidev/src/stories/infobox.stories.tsx +++ /dev/null | |||
@@ -1,145 +0,0 @@ | |||
1 | import { mdiEarth } from '@mdi/js'; | ||
2 | import { observable } from 'mobx'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import * as React from 'react'; | ||
5 | |||
6 | import { Infobox } from '@meetfranz/ui'; | ||
7 | import { storiesOf } from '../stores/stories'; | ||
8 | |||
9 | interface IStoreArgs { | ||
10 | icon?: string; | ||
11 | ctaLabel?: string; | ||
12 | type?: string; | ||
13 | dismissable?: boolean; | ||
14 | className?: string; | ||
15 | } | ||
16 | |||
17 | const createStore = (args?: IStoreArgs) => | ||
18 | observable({ | ||
19 | type: 'primary', | ||
20 | ctaOnClick: () => { | ||
21 | alert('on click handler'); | ||
22 | }, | ||
23 | ...args, | ||
24 | }); | ||
25 | |||
26 | const WithStoreInfobox = observer( | ||
27 | ({ store, children }: { store: any; children: string | React.ReactNode }) => ( | ||
28 | <> | ||
29 | <Infobox | ||
30 | icon={store.icon} | ||
31 | ctaLabel={store.ctaLabel} | ||
32 | type={store.type} | ||
33 | ctaOnClick={store.ctaOnClick} | ||
34 | dismissable={store.dismissable} | ||
35 | className={store.className} | ||
36 | > | ||
37 | {children} | ||
38 | </Infobox> | ||
39 | </> | ||
40 | ), | ||
41 | ); | ||
42 | |||
43 | storiesOf('Infobox') | ||
44 | .add('Basic', () => ( | ||
45 | <WithStoreInfobox store={createStore()}> | ||
46 | Welcome to the world of tomorrow | ||
47 | </WithStoreInfobox> | ||
48 | )) | ||
49 | .add('Icon + Dismissable', () => ( | ||
50 | <WithStoreInfobox | ||
51 | store={createStore({ | ||
52 | icon: mdiEarth, | ||
53 | dismissable: true, | ||
54 | })} | ||
55 | > | ||
56 | Welcome to the world of tomorrow | ||
57 | </WithStoreInfobox> | ||
58 | )) | ||
59 | .add('With CTA', () => ( | ||
60 | <WithStoreInfobox | ||
61 | store={createStore({ | ||
62 | icon: mdiEarth, | ||
63 | ctaLabel: 'Ok, hi!', | ||
64 | })} | ||
65 | > | ||
66 | Welcome to the world of tomorrow | ||
67 | </WithStoreInfobox> | ||
68 | )) | ||
69 | .add('With long text', () => ( | ||
70 | <WithStoreInfobox | ||
71 | store={createStore({ | ||
72 | icon: mdiEarth, | ||
73 | ctaLabel: 'Ok, hi!', | ||
74 | })} | ||
75 | > | ||
76 | Ferdi is your messaging app / former Emperor of Austria and combines chat | ||
77 | & messaging services into one application. Ferdi currently supports Slack, | ||
78 | WhatsApp, WeChat, HipChat, Facebook Messenger, Telegram, Google | ||
79 | Hangouts,GroupMe, Skype and many more. | ||
80 | </WithStoreInfobox> | ||
81 | )) | ||
82 | .add('Secondary', () => ( | ||
83 | <WithStoreInfobox | ||
84 | store={createStore({ | ||
85 | icon: mdiEarth, | ||
86 | ctaLabel: 'Ok, hi!', | ||
87 | type: 'secondary', | ||
88 | })} | ||
89 | > | ||
90 | Welcome to the world of tomorrow | ||
91 | </WithStoreInfobox> | ||
92 | )) | ||
93 | .add('Success', () => ( | ||
94 | <WithStoreInfobox | ||
95 | store={createStore({ | ||
96 | icon: mdiEarth, | ||
97 | ctaLabel: 'Ok, hi!', | ||
98 | type: 'success', | ||
99 | })} | ||
100 | > | ||
101 | Welcome to the world of tomorrow | ||
102 | </WithStoreInfobox> | ||
103 | )) | ||
104 | .add('Warning', () => ( | ||
105 | <WithStoreInfobox | ||
106 | store={createStore({ | ||
107 | icon: mdiEarth, | ||
108 | ctaLabel: 'Ok, hi!', | ||
109 | type: 'warning', | ||
110 | })} | ||
111 | > | ||
112 | Welcome to the world of tomorrow | ||
113 | </WithStoreInfobox> | ||
114 | )) | ||
115 | .add('Danger', () => ( | ||
116 | <WithStoreInfobox | ||
117 | store={createStore({ | ||
118 | icon: mdiEarth, | ||
119 | ctaLabel: 'Ok, hi!', | ||
120 | type: 'danger', | ||
121 | })} | ||
122 | > | ||
123 | Welcome to the world of tomorrow | ||
124 | </WithStoreInfobox> | ||
125 | )) | ||
126 | .add('Inverted', () => ( | ||
127 | <WithStoreInfobox | ||
128 | store={createStore({ | ||
129 | icon: mdiEarth, | ||
130 | ctaLabel: 'Ok, hi!', | ||
131 | type: 'inverted', | ||
132 | })} | ||
133 | > | ||
134 | Welcome to the world of tomorrow | ||
135 | </WithStoreInfobox> | ||
136 | )) | ||
137 | .add('With className', () => ( | ||
138 | <WithStoreInfobox | ||
139 | store={createStore({ | ||
140 | className: 'franz-is-awesome', | ||
141 | })} | ||
142 | > | ||
143 | Welcome to the world of tomorrow | ||
144 | </WithStoreInfobox> | ||
145 | )); | ||
diff --git a/uidev/src/stories/input.stories.tsx b/uidev/src/stories/input.stories.tsx deleted file mode 100644 index 2a252ee66..000000000 --- a/uidev/src/stories/input.stories.tsx +++ /dev/null | |||
@@ -1,69 +0,0 @@ | |||
1 | import * as React from 'react'; | ||
2 | |||
3 | import { Input } from '@meetfranz/forms'; | ||
4 | import { v4 as uuid } from 'uuid'; | ||
5 | import { storiesOf } from '../stores/stories'; | ||
6 | |||
7 | const defaultProps = () => { | ||
8 | const id = uuid(); | ||
9 | return { | ||
10 | label: 'Label', | ||
11 | id: `test-${id}`, | ||
12 | name: `test-${id}`, | ||
13 | onChange: (e: React.ChangeEvent<HTMLInputElement>) => | ||
14 | console.log('changed event', e), | ||
15 | }; | ||
16 | }; | ||
17 | |||
18 | const defaultPasswordProps = () => { | ||
19 | const id = uuid(); | ||
20 | return { | ||
21 | label: 'Password', | ||
22 | id: `test-${id}`, | ||
23 | name: `test-${id}`, | ||
24 | type: 'password', | ||
25 | onChange: (e: React.ChangeEvent<HTMLInputElement>) => | ||
26 | console.log('changed event', e), | ||
27 | }; | ||
28 | }; | ||
29 | |||
30 | storiesOf('Input') | ||
31 | .add('Basic', () => ( | ||
32 | <Input {...defaultProps()} placeholder="Placeholder text" /> | ||
33 | )) | ||
34 | .add('Without Label', () => <Input {...defaultProps()} showLabel={false} />) | ||
35 | .add('Disabled', () => <Input {...defaultProps()} disabled />) | ||
36 | .add('With prefix', () => <Input {...defaultProps()} prefix="https://" />) | ||
37 | .add('With suffix', () => ( | ||
38 | <Input {...defaultProps()} suffix=".meetfranz.com" /> | ||
39 | )) | ||
40 | .add('With pre-suffix', () => ( | ||
41 | <Input {...defaultProps()} prefix="https://" suffix=".meetfranz.com" /> | ||
42 | )) | ||
43 | .add('With error', () => ( | ||
44 | <Input | ||
45 | {...defaultProps()} | ||
46 | value="faulty input" | ||
47 | error="This is a generic error message." | ||
48 | /> | ||
49 | )) | ||
50 | .add('Type number with min & max', () => ( | ||
51 | <Input {...defaultProps()} type="number" min={1} max={10} /> | ||
52 | )); | ||
53 | |||
54 | storiesOf('Password') | ||
55 | .add('Basic', () => <Input {...defaultPasswordProps()} />) | ||
56 | .add('Show password toggle', () => ( | ||
57 | <Input {...defaultPasswordProps()} showPasswordToggle /> | ||
58 | )) | ||
59 | .add('Score password', () => ( | ||
60 | <Input {...defaultPasswordProps()} showPasswordToggle scorePassword /> | ||
61 | )) | ||
62 | .add('Score password with error', () => ( | ||
63 | <Input | ||
64 | {...defaultPasswordProps()} | ||
65 | error="Password is too short" | ||
66 | showPasswordToggle | ||
67 | scorePassword | ||
68 | /> | ||
69 | )); | ||
diff --git a/uidev/src/stories/loader.stories.tsx b/uidev/src/stories/loader.stories.tsx deleted file mode 100644 index bbe4d3421..000000000 --- a/uidev/src/stories/loader.stories.tsx +++ /dev/null | |||
@@ -1,8 +0,0 @@ | |||
1 | import { Loader } from '@meetfranz/ui'; | ||
2 | import { storiesOf } from '../stores/stories'; | ||
3 | |||
4 | storiesOf('Loader').add('Basic', () => ( | ||
5 | <> | ||
6 | <Loader /> | ||
7 | </> | ||
8 | )); | ||
diff --git a/uidev/src/stories/select.stories.tsx b/uidev/src/stories/select.stories.tsx deleted file mode 100644 index 26189afb8..000000000 --- a/uidev/src/stories/select.stories.tsx +++ /dev/null | |||
@@ -1,303 +0,0 @@ | |||
1 | import * as React from 'react'; | ||
2 | import { v4 as uuid } from 'uuid'; | ||
3 | |||
4 | import { Select } from '@meetfranz/forms'; | ||
5 | import { storiesOf } from '../stores/stories'; | ||
6 | |||
7 | const defaultProps = () => { | ||
8 | const id = uuid(); | ||
9 | return { | ||
10 | label: 'Label', | ||
11 | id: `test-${id}`, | ||
12 | name: `test-${id}`, | ||
13 | options: { | ||
14 | AF: 'Afghanistan', | ||
15 | AL: 'Albania', | ||
16 | DZ: 'Algeria', | ||
17 | AS: 'American Samoa', | ||
18 | AD: 'Andorra', | ||
19 | AO: 'Angola', | ||
20 | AI: 'Anguilla', | ||
21 | AQ: 'Antarctica', | ||
22 | AG: 'Antigua and Barbuda', | ||
23 | AR: 'Argentina', | ||
24 | AM: 'Armenia', | ||
25 | AW: 'Aruba', | ||
26 | AC: 'Ascension Island', | ||
27 | AU: 'Australia', | ||
28 | AT: 'Austria', | ||
29 | AZ: 'Azerbaijan', | ||
30 | BS: 'Bahamas', | ||
31 | BH: 'Bahrain', | ||
32 | BD: 'Bangladesh', | ||
33 | BB: 'Barbados', | ||
34 | BY: 'Belarus', | ||
35 | BE: 'Belgium', | ||
36 | BZ: 'Belize', | ||
37 | BJ: 'Benin', | ||
38 | BM: 'Bermuda', | ||
39 | BT: 'Bhutan', | ||
40 | BO: 'Bolivia', | ||
41 | BA: 'Bosnia and Herzegovina', | ||
42 | BW: 'Botswana', | ||
43 | BV: 'Bouvet Island', | ||
44 | BR: 'Brazil', | ||
45 | BQ: 'British Antarctic Territory', | ||
46 | IO: 'British Indian Ocean Territory', | ||
47 | VG: 'British Virgin Islands', | ||
48 | BN: 'Brunei', | ||
49 | BG: 'Bulgaria', | ||
50 | BF: 'Burkina Faso', | ||
51 | BI: 'Burundi', | ||
52 | KH: 'Cambodia', | ||
53 | CM: 'Cameroon', | ||
54 | CA: 'Canada', | ||
55 | IC: 'Canary Islands', | ||
56 | CT: 'Canton and Enderbury Islands', | ||
57 | CV: 'Cape Verde', | ||
58 | KY: 'Cayman Islands', | ||
59 | CF: 'Central African Republic', | ||
60 | EA: 'Ceuta and Melilla', | ||
61 | TD: 'Chad', | ||
62 | CL: 'Chile', | ||
63 | CN: 'China', | ||
64 | CX: 'Christmas Island', | ||
65 | CP: 'Clipperton Island', | ||
66 | CC: 'Cocos [Keeling] Islands', | ||
67 | CO: 'Colombia', | ||
68 | KM: 'Comoros', | ||
69 | CD: 'Congo - Kinshasa', | ||
70 | CG: 'Congo [Republic]', | ||
71 | CK: 'Cook Islands', | ||
72 | CR: 'Costa Rica', | ||
73 | HR: 'Croatia', | ||
74 | CU: 'Cuba', | ||
75 | CY: 'Cyprus', | ||
76 | CZ: 'Czech Republic', | ||
77 | CI: 'Côte d’Ivoire', | ||
78 | DK: 'Denmark', | ||
79 | DG: 'Diego Garcia', | ||
80 | DJ: 'Djibouti', | ||
81 | DM: 'Dominica', | ||
82 | DO: 'Dominican Republic', | ||
83 | NQ: 'Dronning Maud Land', | ||
84 | TL: 'East Timor', | ||
85 | EC: 'Ecuador', | ||
86 | EG: 'Egypt', | ||
87 | SV: 'El Salvador', | ||
88 | GQ: 'Equatorial Guinea', | ||
89 | ER: 'Eritrea', | ||
90 | EE: 'Estonia', | ||
91 | ET: 'Ethiopia', | ||
92 | FK: 'Falkland Islands', | ||
93 | FO: 'Faroe Islands', | ||
94 | FJ: 'Fiji', | ||
95 | FI: 'Finland', | ||
96 | FR: 'France', | ||
97 | GF: 'French Guiana', | ||
98 | PF: 'French Polynesia', | ||
99 | TF: 'French Southern Territories', | ||
100 | FQ: 'French Southern and Antarctic Territories', | ||
101 | GA: 'Gabon', | ||
102 | GM: 'Gambia', | ||
103 | GE: 'Georgia', | ||
104 | DE: 'Germany', | ||
105 | GH: 'Ghana', | ||
106 | GI: 'Gibraltar', | ||
107 | GR: 'Greece', | ||
108 | GL: 'Greenland', | ||
109 | GD: 'Grenada', | ||
110 | GP: 'Guadeloupe', | ||
111 | GU: 'Guam', | ||
112 | GT: 'Guatemala', | ||
113 | GG: 'Guernsey', | ||
114 | GN: 'Guinea', | ||
115 | GW: 'Guinea-Bissau', | ||
116 | GY: 'Guyana', | ||
117 | HT: 'Haiti', | ||
118 | HM: 'Heard Island and McDonald Islands', | ||
119 | HN: 'Honduras', | ||
120 | HK: 'Hong Kong', | ||
121 | HU: 'Hungary', | ||
122 | IS: 'Iceland', | ||
123 | IN: 'India', | ||
124 | ID: 'Indonesia', | ||
125 | IR: 'Iran', | ||
126 | IQ: 'Iraq', | ||
127 | IE: 'Ireland', | ||
128 | IM: 'Isle of Man', | ||
129 | IL: 'Israel', | ||
130 | IT: 'Italy', | ||
131 | JM: 'Jamaica', | ||
132 | JP: 'Japan', | ||
133 | JE: 'Jersey', | ||
134 | JT: 'Johnston Island', | ||
135 | JO: 'Jordan', | ||
136 | KZ: 'Kazakhstan', | ||
137 | KE: 'Kenya', | ||
138 | KI: 'Kiribati', | ||
139 | XK: 'Kosovo', | ||
140 | KW: 'Kuwait', | ||
141 | KG: 'Kyrgyzstan', | ||
142 | LA: 'Laos', | ||
143 | LV: 'Latvia', | ||
144 | LB: 'Lebanon', | ||
145 | LS: 'Lesotho', | ||
146 | LR: 'Liberia', | ||
147 | LY: 'Libya', | ||
148 | LI: 'Liechtenstein', | ||
149 | LT: 'Lithuania', | ||
150 | LU: 'Luxembourg', | ||
151 | MO: 'Macau', | ||
152 | MK: 'Macedonia', | ||
153 | MG: 'Madagascar', | ||
154 | MW: 'Malawi', | ||
155 | MY: 'Malaysia', | ||
156 | MV: 'Maldives', | ||
157 | ML: 'Mali', | ||
158 | MT: 'Malta', | ||
159 | MH: 'Marshall Islands', | ||
160 | MQ: 'Martinique', | ||
161 | MR: 'Mauritania', | ||
162 | MU: 'Mauritius', | ||
163 | YT: 'Mayotte', | ||
164 | FX: 'Metropolitan France', | ||
165 | MX: 'Mexico', | ||
166 | FM: 'Micronesia', | ||
167 | MI: 'Midway Islands', | ||
168 | MD: 'Moldova', | ||
169 | MC: 'Monaco', | ||
170 | MN: 'Mongolia', | ||
171 | ME: 'Montenegro', | ||
172 | MS: 'Montserrat', | ||
173 | MA: 'Morocco', | ||
174 | MZ: 'Mozambique', | ||
175 | MM: 'Myanmar [Burma]', | ||
176 | NA: 'Namibia', | ||
177 | NR: 'Nauru', | ||
178 | NP: 'Nepal', | ||
179 | NL: 'Netherlands', | ||
180 | AN: 'Netherlands Antilles', | ||
181 | NC: 'New Caledonia', | ||
182 | NZ: 'New Zealand', | ||
183 | NI: 'Nicaragua', | ||
184 | NE: 'Niger', | ||
185 | NG: 'Nigeria', | ||
186 | NU: 'Niue', | ||
187 | NF: 'Norfolk Island', | ||
188 | KP: 'North Korea', | ||
189 | VD: 'North Vietnam', | ||
190 | MP: 'Northern Mariana Islands', | ||
191 | NO: 'Norway', | ||
192 | OM: 'Oman', | ||
193 | QO: 'Outlying Oceania', | ||
194 | PC: 'Pacific Islands Trust Territory', | ||
195 | PK: 'Pakistan', | ||
196 | PW: 'Palau', | ||
197 | PS: 'Palestinian Territories', | ||
198 | PA: 'Panama', | ||
199 | PZ: 'Panama Canal Zone', | ||
200 | PG: 'Papua New Guinea', | ||
201 | PY: 'Paraguay', | ||
202 | YD: 'Peoples Democratic Republic of Yemen', | ||
203 | PE: 'Peru', | ||
204 | PH: 'Philippines', | ||
205 | PN: 'Pitcairn Islands', | ||
206 | PL: 'Poland', | ||
207 | PT: 'Portugal', | ||
208 | PR: 'Puerto Rico', | ||
209 | QA: 'Qatar', | ||
210 | RO: 'Romania', | ||
211 | RU: 'Russia', | ||
212 | RW: 'Rwanda', | ||
213 | RE: 'RĂ©union', | ||
214 | BL: 'Saint Barthélemy', | ||
215 | SH: 'Saint Helena', | ||
216 | KN: 'Saint Kitts and Nevis', | ||
217 | LC: 'Saint Lucia', | ||
218 | MF: 'Saint Martin', | ||
219 | PM: 'Saint Pierre and Miquelon', | ||
220 | VC: 'Saint Vincent and the Grenadines', | ||
221 | WS: 'Samoa', | ||
222 | SM: 'San Marino', | ||
223 | SA: 'Saudi Arabia', | ||
224 | SN: 'Senegal', | ||
225 | RS: 'Serbia', | ||
226 | CS: 'Serbia and Montenegro', | ||
227 | SC: 'Seychelles', | ||
228 | SL: 'Sierra Leone', | ||
229 | SG: 'Singapore', | ||
230 | SK: 'Slovakia', | ||
231 | SI: 'Slovenia', | ||
232 | SB: 'Solomon Islands', | ||
233 | SO: 'Somalia', | ||
234 | ZA: 'South Africa', | ||
235 | GS: 'South Georgia and the South Sandwich Islands', | ||
236 | KR: 'South Korea', | ||
237 | ES: 'Spain', | ||
238 | LK: 'Sri Lanka', | ||
239 | SD: 'Sudan', | ||
240 | SR: 'Suriname', | ||
241 | SJ: 'Svalbard and Jan Mayen', | ||
242 | SZ: 'Swaziland', | ||
243 | SE: 'Sweden', | ||
244 | CH: 'Switzerland', | ||
245 | SY: 'Syria', | ||
246 | ST: 'SĂ£o TomĂ© and PrĂncipe', | ||
247 | TW: 'Taiwan', | ||
248 | TJ: 'Tajikistan', | ||
249 | TZ: 'Tanzania', | ||
250 | TH: 'Thailand', | ||
251 | TG: 'Togo', | ||
252 | TK: 'Tokelau', | ||
253 | TO: 'Tonga', | ||
254 | TT: 'Trinidad and Tobago', | ||
255 | TA: 'Tristan da Cunha', | ||
256 | TN: 'Tunisia', | ||
257 | TR: 'Turkey', | ||
258 | TM: 'Turkmenistan', | ||
259 | TC: 'Turks and Caicos Islands', | ||
260 | TV: 'Tuvalu', | ||
261 | UM: 'U.S. Minor Outlying Islands', | ||
262 | PU: 'U.S. Miscellaneous Pacific Islands', | ||
263 | VI: 'U.S. Virgin Islands', | ||
264 | UG: 'Uganda', | ||
265 | UA: 'Ukraine', | ||
266 | AE: 'United Arab Emirates', | ||
267 | GB: 'United Kingdom', | ||
268 | US: 'United States', | ||
269 | UY: 'Uruguay', | ||
270 | UZ: 'Uzbekistan', | ||
271 | VU: 'Vanuatu', | ||
272 | VA: 'Vatican City', | ||
273 | VE: 'Venezuela', | ||
274 | VN: 'Vietnam', | ||
275 | WK: 'Wake Island', | ||
276 | WF: 'Wallis and Futuna', | ||
277 | EH: 'Western Sahara', | ||
278 | YE: 'Yemen', | ||
279 | ZM: 'Zambia', | ||
280 | ZW: 'Zimbabwe', | ||
281 | AX: 'Ă…land Islands', | ||
282 | }, | ||
283 | actionText: 'Select country', | ||
284 | // defaultValue: 'AT', | ||
285 | onChange: (e: React.ChangeEvent<HTMLInputElement>) => | ||
286 | console.log('changed event', e), | ||
287 | }; | ||
288 | }; | ||
289 | |||
290 | storiesOf('Select') | ||
291 | .add('Basic', () => <Select {...defaultProps()} />) | ||
292 | .add('With preselection', () => ( | ||
293 | <Select {...defaultProps()} defaultValue="AT" /> | ||
294 | )) | ||
295 | .add('With search', () => <Select {...defaultProps()} showSearch />) | ||
296 | .add('Disabled', () => <Select {...defaultProps()} showSearch disabled />) | ||
297 | .add('With error', () => ( | ||
298 | <Select | ||
299 | {...defaultProps()} | ||
300 | showSearch | ||
301 | error="Your selection was a bit too funky for my taste" | ||
302 | /> | ||
303 | )); | ||
diff --git a/uidev/src/stories/textarea.stories.tsx b/uidev/src/stories/textarea.stories.tsx deleted file mode 100644 index 5c2b61798..000000000 --- a/uidev/src/stories/textarea.stories.tsx +++ /dev/null | |||
@@ -1,30 +0,0 @@ | |||
1 | import * as React from 'react'; | ||
2 | import { v4 as uuid } from 'uuid'; | ||
3 | |||
4 | import { Textarea } from '@meetfranz/forms'; | ||
5 | import { storiesOf } from '../stores/stories'; | ||
6 | |||
7 | const defaultProps = () => { | ||
8 | const id = uuid(); | ||
9 | return { | ||
10 | label: 'Label', | ||
11 | id: `test-${id}`, | ||
12 | name: `test-${id}`, | ||
13 | rows: 5, | ||
14 | onChange: (e: React.ChangeEvent<HTMLInputElement>) => | ||
15 | console.log('changed event', e), | ||
16 | }; | ||
17 | }; | ||
18 | |||
19 | storiesOf('Textarea') | ||
20 | .add('Basic', () => ( | ||
21 | <Textarea | ||
22 | {...defaultProps()} | ||
23 | // placeholder="Placeholder text" | ||
24 | /> | ||
25 | )) | ||
26 | .add('10 rows', () => <Textarea {...defaultProps()} rows={10} />) | ||
27 | .add('With error', () => ( | ||
28 | <Textarea {...defaultProps()} error="This is a generic error message." /> | ||
29 | )) | ||
30 | .add('Disabled', () => <Textarea {...defaultProps()} rows={2} disabled />); | ||
diff --git a/uidev/src/stories/toggle.stories.tsx b/uidev/src/stories/toggle.stories.tsx deleted file mode 100644 index 021658d21..000000000 --- a/uidev/src/stories/toggle.stories.tsx +++ /dev/null | |||
@@ -1,76 +0,0 @@ | |||
1 | import { observable } from 'mobx'; | ||
2 | import { observer } from 'mobx-react'; | ||
3 | import { v4 as uuid } from 'uuid'; | ||
4 | |||
5 | import { Toggle } from '@meetfranz/forms'; | ||
6 | import { storiesOf } from '../stores/stories'; | ||
7 | |||
8 | interface IStoreArgs { | ||
9 | value?: boolean; | ||
10 | checked?: boolean; | ||
11 | label?: string; | ||
12 | id?: string; | ||
13 | name?: string; | ||
14 | disabled?: boolean; | ||
15 | error?: string; | ||
16 | } | ||
17 | |||
18 | const createStore = (args?: IStoreArgs) => | ||
19 | observable({ | ||
20 | id: `element-${uuid()}`, | ||
21 | name: 'toggle', | ||
22 | label: 'Label', | ||
23 | value: true, | ||
24 | checked: false, | ||
25 | disabled: false, | ||
26 | error: '', | ||
27 | ...args, | ||
28 | }); | ||
29 | |||
30 | const WithStoreToggle = observer(({ store }: { store: any }) => ( | ||
31 | <> | ||
32 | <Toggle | ||
33 | value={store.value} | ||
34 | checked={store.checked} | ||
35 | label={store.label} | ||
36 | id={store.id} | ||
37 | name={store.name} | ||
38 | disabled={store.disabled} | ||
39 | error={store.error} | ||
40 | onChange={() => (store.checked = !store.checked)} | ||
41 | /> | ||
42 | </> | ||
43 | )); | ||
44 | |||
45 | storiesOf('Toggle') | ||
46 | .add('Basic', () => <WithStoreToggle store={createStore()} />) | ||
47 | .add('Checked', () => ( | ||
48 | <WithStoreToggle | ||
49 | store={createStore({ | ||
50 | checked: true, | ||
51 | })} | ||
52 | /> | ||
53 | )) | ||
54 | .add('Disabled', () => ( | ||
55 | <WithStoreToggle | ||
56 | store={createStore({ | ||
57 | checked: true, | ||
58 | disabled: true, | ||
59 | })} | ||
60 | /> | ||
61 | )) | ||
62 | .add('Long label', () => ( | ||
63 | <WithStoreToggle | ||
64 | store={createStore({ | ||
65 | label: | ||
66 | 'Hello world, this is an insanely long label for this toggle. We need to make sure that it will be displayed correctly.', | ||
67 | })} | ||
68 | /> | ||
69 | )) | ||
70 | .add('With error', () => ( | ||
71 | <WithStoreToggle | ||
72 | store={createStore({ | ||
73 | error: 'Something went wrong', | ||
74 | })} | ||
75 | /> | ||
76 | )); | ||
diff --git a/uidev/src/withTheme/index.tsx b/uidev/src/withTheme/index.tsx deleted file mode 100644 index 0e39b4810..000000000 --- a/uidev/src/withTheme/index.tsx +++ /dev/null | |||
@@ -1,56 +0,0 @@ | |||
1 | import { theme, Theme, ThemeType } from '@meetfranz/theme'; | ||
2 | import { Classes } from 'jss'; | ||
3 | import * as React from 'react'; | ||
4 | import injectSheet, { ThemeProvider } from 'react-jss'; | ||
5 | |||
6 | const defaultTheme = { | ||
7 | name: 'Default', | ||
8 | variables: theme(ThemeType.default), | ||
9 | }; | ||
10 | |||
11 | const darkTheme = { | ||
12 | name: 'Dark Mode', | ||
13 | variables: theme(ThemeType.dark), | ||
14 | }; | ||
15 | |||
16 | const themes = [defaultTheme, darkTheme]; | ||
17 | |||
18 | const styles = (theme: 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)( | ||
32 | ({ | ||
33 | name, | ||
34 | classes, | ||
35 | story, | ||
36 | }: { | ||
37 | name: string; | ||
38 | classes: Classes; | ||
39 | story: React.ReactNode; | ||
40 | }) => ( | ||
41 | <article> | ||
42 | <h1 className={classes.title}>{name}</h1> | ||
43 | <div className={classes.container}>{story}</div> | ||
44 | </article> | ||
45 | ), | ||
46 | ); | ||
47 | |||
48 | export const WithTheme = ({ children }: { children: React.ReactChild }) => ( | ||
49 | <> | ||
50 | {themes.map((theme, key) => ( | ||
51 | <ThemeProvider key={key} theme={theme.variables}> | ||
52 | <Container story={children} name={theme.name} /> | ||
53 | </ThemeProvider> | ||
54 | ))} | ||
55 | </> | ||
56 | ); | ||
diff --git a/uidev/tsconfig.json b/uidev/tsconfig.json deleted file mode 100644 index 60459d69e..000000000 --- a/uidev/tsconfig.json +++ /dev/null | |||
@@ -1,16 +0,0 @@ | |||
1 | { | ||
2 | "extends": "../tsconfig.json", | ||
3 | "compilerOptions": { | ||
4 | "baseUrl": "..", | ||
5 | "outDir": "lib", | ||
6 | "rootDir": "src" | ||
7 | }, | ||
8 | "references": [ | ||
9 | { | ||
10 | "path": "../packages/theme" | ||
11 | }, | ||
12 | { | ||
13 | "path": "../packages/forms" | ||
14 | } | ||
15 | ] | ||
16 | } | ||
diff --git a/uidev/webpack.config.js b/uidev/webpack.config.js deleted file mode 100644 index faabac784..000000000 --- a/uidev/webpack.config.js +++ /dev/null | |||
@@ -1,31 +0,0 @@ | |||
1 | const path = require('path'); | ||
2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); | ||
3 | |||
4 | module.exports = { | ||
5 | entry: './src/index.tsx', | ||
6 | module: { | ||
7 | rules: [ | ||
8 | { | ||
9 | test: /\.tsx?$/, | ||
10 | use: 'ts-loader', | ||
11 | exclude: /node_modules/, | ||
12 | }, | ||
13 | ], | ||
14 | }, | ||
15 | resolve: { | ||
16 | extensions: ['.tsx', '.ts', '.js'], | ||
17 | alias: { | ||
18 | react: path.resolve('../node_modules/react'), | ||
19 | }, | ||
20 | }, | ||
21 | mode: 'none', | ||
22 | plugins: [ | ||
23 | new HtmlWebpackPlugin({ | ||
24 | template: path.join('src', 'app.html'), | ||
25 | }), | ||
26 | ], | ||
27 | devServer: { | ||
28 | inline: true, | ||
29 | port: 8008, | ||
30 | }, | ||
31 | }; | ||