diff options
Diffstat (limited to 'uidev/src/app.tsx')
| -rw-r--r-- | uidev/src/app.tsx | 125 |
1 files changed, 0 insertions, 125 deletions
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 | ); | ||