diff options
author | Stefan Malzner <stefan@adlk.io> | 2019-01-11 21:07:21 +0100 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2019-01-11 21:07:21 +0100 |
commit | 0ac2806481852249c6a2d4a032cc2c0324a58ef8 (patch) | |
tree | 03292af10a5a97b824293ff8878d2a5c821d5ed2 /uidev/src/app.tsx | |
parent | expose legacy styles (diff) | |
download | ferdium-app-0ac2806481852249c6a2d4a032cc2c0324a58ef8.tar.gz ferdium-app-0ac2806481852249c6a2d4a032cc2c0324a58ef8.tar.zst ferdium-app-0ac2806481852249c6a2d4a032cc2c0324a58ef8.zip |
Add toggle element to @meetfranz/forms
Diffstat (limited to 'uidev/src/app.tsx')
-rw-r--r-- | uidev/src/app.tsx | 47 |
1 files changed, 34 insertions, 13 deletions
diff --git a/uidev/src/app.tsx b/uidev/src/app.tsx index a1c9ee343..6a5c578f2 100644 --- a/uidev/src/app.tsx +++ b/uidev/src/app.tsx | |||
@@ -1,20 +1,34 @@ | |||
1 | import CSS from 'csstype'; | ||
1 | import { Classes } from 'jss'; | 2 | import { Classes } from 'jss'; |
3 | import { observer } from 'mobx-react'; | ||
4 | import DevTools from 'mobx-react-devtools'; | ||
2 | import React, { Component } from 'react'; | 5 | import React, { Component } from 'react'; |
3 | import { render } from 'react-dom'; | ||
4 | import injectSheet from 'react-jss'; | 6 | import injectSheet from 'react-jss'; |
5 | import './stories/input'; | 7 | |
6 | import { WithTheme } from './withTheme'; | 8 | import { WithTheme } from './withTheme'; |
7 | 9 | ||
10 | import './stories/input.stories'; | ||
11 | import './stories/toggle.stories'; | ||
12 | |||
8 | import { store } from './stores'; | 13 | import { store } from './stores'; |
9 | 14 | ||
10 | const styles = { | 15 | const styles = { |
16 | '@global body': { | ||
17 | margin: 0, | ||
18 | }, | ||
11 | container: { | 19 | container: { |
12 | display: 'flex', | 20 | display: 'flex', |
13 | width: '100%', | 21 | width: '100%', |
14 | }, | 22 | }, |
15 | menu: { | 23 | menu: { |
16 | width: 300, | 24 | width: 300, |
17 | position: 'fixed' as any, | 25 | position: 'fixed' as CSS.PositionProperty, |
26 | listStyleType: 'none', | ||
27 | }, | ||
28 | storyList: { | ||
29 | paddingLeft: 18, | ||
30 | marginTop: 5, | ||
31 | marginBottom: 20, | ||
18 | }, | 32 | }, |
19 | stories: { | 33 | stories: { |
20 | width: '100%', | 34 | width: '100%', |
@@ -22,6 +36,7 @@ const styles = { | |||
22 | paddingLeft: 40, | 36 | paddingLeft: 40, |
23 | paddingRight: 40, | 37 | paddingRight: 40, |
24 | borderLeft: '1px solid #CFCFCF', | 38 | borderLeft: '1px solid #CFCFCF', |
39 | background: '#f7f7f7', | ||
25 | }, | 40 | }, |
26 | sectionHeadline: { | 41 | sectionHeadline: { |
27 | fontSize: 30, | 42 | fontSize: 30, |
@@ -34,24 +49,29 @@ const styles = { | |||
34 | marginBottom: 40, | 49 | marginBottom: 40, |
35 | borderBottom: '1px solid #CFCFCF', | 50 | borderBottom: '1px solid #CFCFCF', |
36 | }, | 51 | }, |
52 | sectionLink: { | ||
53 | fontWeight: 'bold' as CSS.FontWeightProperty, | ||
54 | color: '#000', | ||
55 | textDecoration: 'none', | ||
56 | }, | ||
57 | storyLink: { | ||
58 | color: '#000', | ||
59 | textDecoration: 'none', | ||
60 | }, | ||
37 | }; | 61 | }; |
38 | 62 | ||
39 | const foo = { | 63 | export const App = injectSheet(styles)(observer(({ classes }: { classes: Classes }) => ( |
40 | seas: 'bar', | ||
41 | }; | ||
42 | |||
43 | export const App = injectSheet(styles)(({ classes }: { classes: Classes }) => ( | ||
44 | <div className={classes.container}> | 64 | <div className={classes.container}> |
45 | <ul className={classes.menu}> | 65 | <ul className={classes.menu}> |
46 | {store.stories.sections.map((section, key) => ( | 66 | {store.stories.sections.map((section, key) => ( |
47 | <li key={key}> | 67 | <li key={key}> |
48 | <a href={`#section-${key}`}>{ | 68 | <a href={`#section-${key}`} className={classes.sectionLink}>{ |
49 | section.name} | 69 | section.name} |
50 | </a> | 70 | </a> |
51 | <ul> | 71 | <ul className={classes.storyList}> |
52 | {section.stories.map((story, storyKey) => ( | 72 | {section.stories.map((story, storyKey) => ( |
53 | <li key={storyKey}> | 73 | <li key={storyKey}> |
54 | <a href={`#section-${key}-story-${storyKey}`}> | 74 | <a href={`#section-${key}-story-${storyKey}`} className={classes.storyLink}> |
55 | {story.name} | 75 | {story.name} |
56 | </a> | 76 | </a> |
57 | </li> | 77 | </li> |
@@ -78,12 +98,13 @@ export const App = injectSheet(styles)(({ classes }: { classes: Classes }) => ( | |||
78 | {story.name} | 98 | {story.name} |
79 | </h2> | 99 | </h2> |
80 | <WithTheme> | 100 | <WithTheme> |
81 | {story.component()} | 101 | <story.component /> |
82 | </WithTheme> | 102 | </WithTheme> |
83 | </div> | 103 | </div> |
84 | ))} | 104 | ))} |
85 | </div> | 105 | </div> |
86 | ))} | 106 | ))} |
87 | </div> | 107 | </div> |
108 | <DevTools /> | ||
88 | </div> | 109 | </div> |
89 | )); | 110 | ))); |