diff options
Diffstat (limited to 'uidev/src/app.tsx')
-rw-r--r-- | uidev/src/app.tsx | 125 |
1 files changed, 125 insertions, 0 deletions
diff --git a/uidev/src/app.tsx b/uidev/src/app.tsx new file mode 100644 index 000000000..870911c2f --- /dev/null +++ b/uidev/src/app.tsx | |||
@@ -0,0 +1,125 @@ | |||
1 | import CSS from 'csstype'; | ||
2 | import { Classes } from 'jss'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import DevTools from 'mobx-react-devtools'; | ||
5 | import React, { Component } from 'react'; | ||
6 | import injectSheet from 'react-jss'; | ||
7 | |||
8 | import { WithTheme } from './withTheme'; | ||
9 | |||
10 | import './stories/badge.stories'; | ||
11 | import './stories/button.stories'; | ||
12 | import './stories/headline.stories'; | ||
13 | import './stories/icon.stories'; | ||
14 | import './stories/infobox.stories'; | ||
15 | import './stories/input.stories'; | ||
16 | import './stories/loader.stories'; | ||
17 | import './stories/select.stories'; | ||
18 | import './stories/toggle.stories'; | ||
19 | |||
20 | import { store } from './stores'; | ||
21 | |||
22 | import { theme, ThemeType } from '@meetfranz/theme'; | ||
23 | const defaultTheme = theme(ThemeType.default); | ||
24 | |||
25 | const styles = { | ||
26 | '@global body': { | ||
27 | margin: 0, | ||
28 | fontSize: defaultTheme.uiFontSize, | ||
29 | fontFamily: '\'Open Sans\', sans-serif', | ||
30 | }, | ||
31 | container: { | ||
32 | display: 'flex', | ||
33 | width: '100%', | ||
34 | }, | ||
35 | menu: { | ||
36 | width: 300, | ||
37 | position: 'fixed' as CSS.PositionProperty, | ||
38 | listStyleType: 'none', | ||
39 | fontSize: 14, | ||
40 | overflow: 'scroll', | ||
41 | height: '100%', | ||
42 | }, | ||
43 | storyList: { | ||
44 | paddingLeft: 18, | ||
45 | marginTop: 5, | ||
46 | marginBottom: 20, | ||
47 | }, | ||
48 | stories: { | ||
49 | width: '100%', | ||
50 | marginLeft: 320, | ||
51 | paddingLeft: 40, | ||
52 | paddingRight: 40, | ||
53 | borderLeft: '1px solid #CFCFCF', | ||
54 | background: '#f7f7f7', | ||
55 | }, | ||
56 | sectionHeadline: { | ||
57 | fontSize: 30, | ||
58 | }, | ||
59 | storyHeadline: { | ||
60 | fontSize: 24, | ||
61 | }, | ||
62 | story: { | ||
63 | paddingBottom: 40, | ||
64 | marginBottom: 40, | ||
65 | borderBottom: '1px solid #CFCFCF', | ||
66 | }, | ||
67 | sectionLink: { | ||
68 | fontWeight: 'bold' as CSS.FontWeightProperty, | ||
69 | color: '#000', | ||
70 | textDecoration: 'none', | ||
71 | }, | ||
72 | storyLink: { | ||
73 | color: '#000', | ||
74 | textDecoration: 'none', | ||
75 | }, | ||
76 | }; | ||
77 | |||
78 | export const App = injectSheet(styles)(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 href={`#section-${key}-story-${storyKey}`} className={classes.storyLink}> | ||
90 | {story.name} | ||
91 | </a> | ||
92 | </li> | ||
93 | ))} | ||
94 | </ul> | ||
95 | </li> | ||
96 | ))} | ||
97 | </ul> | ||
98 | <div className={classes.stories}> | ||
99 | {store.stories.sections.map((section, key) => ( | ||
100 | <div key={key}> | ||
101 | <h1 | ||
102 | id={`section-${key}`} | ||
103 | className={classes.sectionHeadline} | ||
104 | > | ||
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 | <DevTools /> | ||
124 | </div> | ||
125 | ))); | ||