diff options
author | Vijay Aravamudhan <vraravam@users.noreply.github.com> | 2021-10-15 14:02:33 +0530 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-10-15 14:02:33 +0530 |
commit | 184c8fbaa6ea3fb13af93ec023252af8802040a3 (patch) | |
tree | ba3671d972d74f524a07609a49b80a885ebe2115 /uidev/src/app.tsx | |
parent | update recipes to pull in pnpm upgrade and workspace fix. (diff) | |
download | ferdium-app-184c8fbaa6ea3fb13af93ec023252af8802040a3.tar.gz ferdium-app-184c8fbaa6ea3fb13af93ec023252af8802040a3.tar.zst ferdium-app-184c8fbaa6ea3fb13af93ec023252af8802040a3.zip |
Remove unused 'uidev' folder. (#2076)
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 | ); | ||