diff options
author | Stefan Malzner <stefan@adlk.io> | 2019-01-09 11:05:32 +0100 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2019-01-09 11:05:32 +0100 |
commit | 2c514e58eabd71af280b727514dccb7c8db4e6cf (patch) | |
tree | b9677f450fe300c6ff16d1ea1e2af7ea35a7bc02 /uidev/src/app.tsx | |
parent | Make packages work in electron, node and web (diff) | |
download | ferdium-app-2c514e58eabd71af280b727514dccb7c8db4e6cf.tar.gz ferdium-app-2c514e58eabd71af280b727514dccb7c8db4e6cf.tar.zst ferdium-app-2c514e58eabd71af280b727514dccb7c8db4e6cf.zip |
Finalize packages & replace storybook with homegrown `uidev`
Diffstat (limited to 'uidev/src/app.tsx')
-rw-r--r-- | uidev/src/app.tsx | 89 |
1 files changed, 89 insertions, 0 deletions
diff --git a/uidev/src/app.tsx b/uidev/src/app.tsx new file mode 100644 index 000000000..a1c9ee343 --- /dev/null +++ b/uidev/src/app.tsx | |||
@@ -0,0 +1,89 @@ | |||
1 | import { Classes } from 'jss'; | ||
2 | import React, { Component } from 'react'; | ||
3 | import { render } from 'react-dom'; | ||
4 | import injectSheet from 'react-jss'; | ||
5 | import './stories/input'; | ||
6 | import { WithTheme } from './withTheme'; | ||
7 | |||
8 | import { store } from './stores'; | ||
9 | |||
10 | const styles = { | ||
11 | container: { | ||
12 | display: 'flex', | ||
13 | width: '100%', | ||
14 | }, | ||
15 | menu: { | ||
16 | width: 300, | ||
17 | position: 'fixed' as any, | ||
18 | }, | ||
19 | stories: { | ||
20 | width: '100%', | ||
21 | marginLeft: 320, | ||
22 | paddingLeft: 40, | ||
23 | paddingRight: 40, | ||
24 | borderLeft: '1px solid #CFCFCF', | ||
25 | }, | ||
26 | sectionHeadline: { | ||
27 | fontSize: 30, | ||
28 | }, | ||
29 | storyHeadline: { | ||
30 | fontSize: 24, | ||
31 | }, | ||
32 | story: { | ||
33 | paddingBottom: 40, | ||
34 | marginBottom: 40, | ||
35 | borderBottom: '1px solid #CFCFCF', | ||
36 | }, | ||
37 | }; | ||
38 | |||
39 | const foo = { | ||
40 | seas: 'bar', | ||
41 | }; | ||
42 | |||
43 | export const App = injectSheet(styles)(({ classes }: { classes: Classes }) => ( | ||
44 | <div className={classes.container}> | ||
45 | <ul className={classes.menu}> | ||
46 | {store.stories.sections.map((section, key) => ( | ||
47 | <li key={key}> | ||
48 | <a href={`#section-${key}`}>{ | ||
49 | section.name} | ||
50 | </a> | ||
51 | <ul> | ||
52 | {section.stories.map((story, storyKey) => ( | ||
53 | <li key={storyKey}> | ||
54 | <a href={`#section-${key}-story-${storyKey}`}> | ||
55 | {story.name} | ||
56 | </a> | ||
57 | </li> | ||
58 | ))} | ||
59 | </ul> | ||
60 | </li> | ||
61 | ))} | ||
62 | </ul> | ||
63 | <div className={classes.stories}> | ||
64 | {store.stories.sections.map((section, key) => ( | ||
65 | <div key={key}> | ||
66 | <h1 | ||
67 | id={`section-${key}`} | ||
68 | className={classes.sectionHeadline} | ||
69 | > | ||
70 | {section.name} | ||
71 | </h1> | ||
72 | {section.stories.map((story, storyKey) => ( | ||
73 | <div className={classes.story} key={storyKey}> | ||
74 | <h2 | ||
75 | id={`section-${key}-story-${storyKey}`} | ||
76 | className={classes.storyHeadline} | ||
77 | > | ||
78 | {story.name} | ||
79 | </h2> | ||
80 | <WithTheme> | ||
81 | {story.component()} | ||
82 | </WithTheme> | ||
83 | </div> | ||
84 | ))} | ||
85 | </div> | ||
86 | ))} | ||
87 | </div> | ||
88 | </div> | ||
89 | )); | ||