diff options
Diffstat (limited to 'uidev')
-rw-r--r-- | uidev/src/app.tsx | 98 |
1 files changed, 50 insertions, 48 deletions
diff --git a/uidev/src/app.tsx b/uidev/src/app.tsx index 593019c35..c025e8825 100644 --- a/uidev/src/app.tsx +++ b/uidev/src/app.tsx | |||
@@ -1,4 +1,4 @@ | |||
1 | import CSS from 'csstype'; | 1 | import * as CSS from 'csstype'; |
2 | import { Classes } from 'jss'; | 2 | import { Classes } from 'jss'; |
3 | import { observer } from 'mobx-react'; | 3 | import { observer } from 'mobx-react'; |
4 | import DevTools from 'mobx-react-devtools'; | 4 | import DevTools from 'mobx-react-devtools'; |
@@ -27,7 +27,7 @@ const styles = { | |||
27 | '@global body': { | 27 | '@global body': { |
28 | margin: 0, | 28 | margin: 0, |
29 | fontSize: defaultTheme.uiFontSize, | 29 | fontSize: defaultTheme.uiFontSize, |
30 | fontFamily: '\'Open Sans\', sans-serif', | 30 | fontFamily: "'Open Sans', sans-serif", |
31 | }, | 31 | }, |
32 | container: { | 32 | container: { |
33 | display: 'flex', | 33 | display: 'flex', |
@@ -35,7 +35,7 @@ const styles = { | |||
35 | }, | 35 | }, |
36 | menu: { | 36 | menu: { |
37 | width: 300, | 37 | width: 300, |
38 | position: 'fixed' as CSS.PositionProperty, | 38 | position: 'fixed' as CSS.Property.Position, |
39 | listStyleType: 'none', | 39 | listStyleType: 'none', |
40 | fontSize: 14, | 40 | fontSize: 14, |
41 | overflow: 'scroll', | 41 | overflow: 'scroll', |
@@ -66,7 +66,7 @@ const styles = { | |||
66 | borderBottom: '1px solid #CFCFCF', | 66 | borderBottom: '1px solid #CFCFCF', |
67 | }, | 67 | }, |
68 | sectionLink: { | 68 | sectionLink: { |
69 | fontWeight: 'bold' as CSS.FontWeightProperty, | 69 | fontWeight: 'bold' as CSS.Property.FontWeight, |
70 | color: '#000', | 70 | color: '#000', |
71 | textDecoration: 'none', | 71 | textDecoration: 'none', |
72 | }, | 72 | }, |
@@ -76,51 +76,53 @@ const styles = { | |||
76 | }, | 76 | }, |
77 | }; | 77 | }; |
78 | 78 | ||
79 | export const App = injectSheet(styles)(observer(({ classes }: { classes: Classes }) => ( | 79 | export const App = injectSheet(styles)( |
80 | <div className={classes.container}> | 80 | observer(({ classes }: { classes: Classes }) => ( |
81 | <ul className={classes.menu}> | 81 | <div className={classes.container}> |
82 | {store.stories.sections.map((section, key) => ( | 82 | <ul className={classes.menu}> |
83 | <li key={key}> | 83 | {store.stories.sections.map((section, key) => ( |
84 | <a href={`#section-${key}`} className={classes.sectionLink}>{ | 84 | <li key={key}> |
85 | section.name} | 85 | <a href={`#section-${key}`} className={classes.sectionLink}> |
86 | </a> | 86 | {section.name} |
87 | <ul className={classes.storyList}> | 87 | </a> |
88 | <ul className={classes.storyList}> | ||
89 | {section.stories.map((story, storyKey) => ( | ||
90 | <li key={storyKey}> | ||
91 | <a | ||
92 | href={`#section-${key}-story-${storyKey}`} | ||
93 | className={classes.storyLink} | ||
94 | > | ||
95 | {story.name} | ||
96 | </a> | ||
97 | </li> | ||
98 | ))} | ||
99 | </ul> | ||
100 | </li> | ||
101 | ))} | ||
102 | </ul> | ||
103 | <div className={classes.stories}> | ||
104 | {store.stories.sections.map((section, key) => ( | ||
105 | <div key={key}> | ||
106 | <h1 id={`section-${key}`} className={classes.sectionHeadline}> | ||
107 | {section.name} | ||
108 | </h1> | ||
88 | {section.stories.map((story, storyKey) => ( | 109 | {section.stories.map((story, storyKey) => ( |
89 | <li key={storyKey}> | 110 | <div className={classes.story} key={storyKey}> |
90 | <a href={`#section-${key}-story-${storyKey}`} className={classes.storyLink}> | 111 | <h2 |
112 | id={`section-${key}-story-${storyKey}`} | ||
113 | className={classes.storyHeadline} | ||
114 | > | ||
91 | {story.name} | 115 | {story.name} |
92 | </a> | 116 | </h2> |
93 | </li> | 117 | <WithTheme> |
118 | <story.component /> | ||
119 | </WithTheme> | ||
120 | </div> | ||
94 | ))} | 121 | ))} |
95 | </ul> | 122 | </div> |
96 | </li> | 123 | ))} |
97 | ))} | 124 | </div> |
98 | </ul> | 125 | <DevTools /> |
99 | <div className={classes.stories}> | ||
100 | {store.stories.sections.map((section, key) => ( | ||
101 | <div key={key}> | ||
102 | <h1 | ||
103 | id={`section-${key}`} | ||
104 | className={classes.sectionHeadline} | ||
105 | > | ||
106 | {section.name} | ||
107 | </h1> | ||
108 | {section.stories.map((story, storyKey) => ( | ||
109 | <div className={classes.story} key={storyKey}> | ||
110 | <h2 | ||
111 | id={`section-${key}-story-${storyKey}`} | ||
112 | className={classes.storyHeadline} | ||
113 | > | ||
114 | {story.name} | ||
115 | </h2> | ||
116 | <WithTheme> | ||
117 | <story.component /> | ||
118 | </WithTheme> | ||
119 | </div> | ||
120 | ))} | ||
121 | </div> | ||
122 | ))} | ||
123 | </div> | 126 | </div> |
124 | <DevTools /> | 127 | )), |
125 | </div> | 128 | ); |
126 | ))); | ||