diff options
-rw-r--r-- | package-lock.json | 64 | ||||
-rw-r--r-- | package.json | 5 | ||||
-rw-r--r-- | packages/forms/package.json | 1 | ||||
-rw-r--r-- | packages/forms/src/button/index.tsx | 34 | ||||
-rw-r--r-- | packages/forms/src/input/styles.ts | 6 | ||||
-rw-r--r-- | packages/forms/src/textarea/styles.ts | 4 | ||||
-rw-r--r-- | packages/forms/src/toggle/index.tsx | 6 | ||||
-rw-r--r-- | tsconfig.settings.json | 7 | ||||
-rw-r--r-- | uidev/src/app.tsx | 98 |
9 files changed, 84 insertions, 141 deletions
diff --git a/package-lock.json b/package-lock.json index dceb195cf..164678178 100644 --- a/package-lock.json +++ b/package-lock.json | |||
@@ -7334,6 +7334,7 @@ | |||
7334 | "@mdi/js": "^3.3.92", | 7334 | "@mdi/js": "^3.3.92", |
7335 | "@mdi/react": "^1.1.0", | 7335 | "@mdi/react": "^1.1.0", |
7336 | "@meetfranz/theme": "file:packages/theme", | 7336 | "@meetfranz/theme": "file:packages/theme", |
7337 | "csstype": "^3.0.8", | ||
7337 | "react-html-attributes": "^1.4.3", | 7338 | "react-html-attributes": "^1.4.3", |
7338 | "react-loader": "2.4.7" | 7339 | "react-loader": "2.4.7" |
7339 | }, | 7340 | }, |
@@ -7342,6 +7343,11 @@ | |||
7342 | "version": "3.9.97", | 7343 | "version": "3.9.97", |
7343 | "resolved": "https://registry.npmjs.org/@mdi/js/-/js-3.9.97.tgz", | 7344 | "resolved": "https://registry.npmjs.org/@mdi/js/-/js-3.9.97.tgz", |
7344 | "integrity": "sha512-JzX6rDlUcNZHaoUg9sAzdg5Js287tvgRbNmMIyKoJK2ZCP9JupeWTYlpbX4oNJ9Zg9v8YH76WuWLALKOospQgw==" | 7345 | "integrity": "sha512-JzX6rDlUcNZHaoUg9sAzdg5Js287tvgRbNmMIyKoJK2ZCP9JupeWTYlpbX4oNJ9Zg9v8YH76WuWLALKOospQgw==" |
7346 | }, | ||
7347 | "csstype": { | ||
7348 | "version": "3.0.8", | ||
7349 | "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz", | ||
7350 | "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==" | ||
7345 | } | 7351 | } |
7346 | } | 7352 | } |
7347 | }, | 7353 | }, |
@@ -8123,12 +8129,6 @@ | |||
8123 | "@types/responselike": "*" | 8129 | "@types/responselike": "*" |
8124 | } | 8130 | } |
8125 | }, | 8131 | }, |
8126 | "@types/classnames": { | ||
8127 | "version": "2.2.9", | ||
8128 | "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.9.tgz", | ||
8129 | "integrity": "sha512-MNl+rT5UmZeilaPxAVs6YaPC2m6aA8rofviZbhbxpPpl61uKodfdQVsBtgJGTqGizEf02oW3tsVe7FYB8kK14A==", | ||
8130 | "dev": true | ||
8131 | }, | ||
8132 | "@types/color": { | 8132 | "@types/color": { |
8133 | "version": "3.0.2", | 8133 | "version": "3.0.2", |
8134 | "resolved": "https://registry.npmjs.org/@types/color/-/color-3.0.2.tgz", | 8134 | "resolved": "https://registry.npmjs.org/@types/color/-/color-3.0.2.tgz", |
@@ -8261,16 +8261,6 @@ | |||
8261 | "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=", | 8261 | "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=", |
8262 | "dev": true | 8262 | "dev": true |
8263 | }, | 8263 | }, |
8264 | "@types/jss": { | ||
8265 | "version": "9.5.8", | ||
8266 | "resolved": "https://registry.npmjs.org/@types/jss/-/jss-9.5.8.tgz", | ||
8267 | "integrity": "sha512-bBbHvjhm42UKki+wZpR89j73ykSXg99/bhuKuYYePtpma3ZAnmeGnl0WxXiZhPGsIfzKwCUkpPC0jlrVMBfRxA==", | ||
8268 | "dev": true, | ||
8269 | "requires": { | ||
8270 | "csstype": "^2.0.0", | ||
8271 | "indefinite-observable": "^1.0.1" | ||
8272 | } | ||
8273 | }, | ||
8274 | "@types/keyv": { | 8264 | "@types/keyv": { |
8275 | "version": "3.1.1", | 8265 | "version": "3.1.1", |
8276 | "resolved": "https://registry.npmjs.org/@types/keyv/-/keyv-3.1.1.tgz", | 8266 | "resolved": "https://registry.npmjs.org/@types/keyv/-/keyv-3.1.1.tgz", |
@@ -8373,18 +8363,6 @@ | |||
8373 | "@types/react": "^16" | 8363 | "@types/react": "^16" |
8374 | } | 8364 | } |
8375 | }, | 8365 | }, |
8376 | "@types/react-jss": { | ||
8377 | "version": "8.6.4", | ||
8378 | "resolved": "https://registry.npmjs.org/@types/react-jss/-/react-jss-8.6.4.tgz", | ||
8379 | "integrity": "sha512-LK55kG7YnEt0xmBZeZqCEHEkSx7Xm1WD0GxaOUxIeTQyrSE6h0K70cyrXCloivrZwDzXqcA78zBBB64gapASPQ==", | ||
8380 | "dev": true, | ||
8381 | "requires": { | ||
8382 | "@types/jss": "*", | ||
8383 | "@types/react": "*", | ||
8384 | "@types/theming": "*", | ||
8385 | "csstype": "^2.0.0" | ||
8386 | } | ||
8387 | }, | ||
8388 | "@types/responselike": { | 8366 | "@types/responselike": { |
8389 | "version": "1.0.0", | 8367 | "version": "1.0.0", |
8390 | "resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.0.tgz", | 8368 | "resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.0.tgz", |
@@ -8423,15 +8401,6 @@ | |||
8423 | "integrity": "sha512-0VBprVqfgFD7Ehb2vd8Lh9TG3jP98gvr8rgehQqzztZNI7o8zS8Ad4jyZneKELphpuE212D8J70LnSNQSyO6bQ==", | 8401 | "integrity": "sha512-0VBprVqfgFD7Ehb2vd8Lh9TG3jP98gvr8rgehQqzztZNI7o8zS8Ad4jyZneKELphpuE212D8J70LnSNQSyO6bQ==", |
8424 | "dev": true | 8402 | "dev": true |
8425 | }, | 8403 | }, |
8426 | "@types/theming": { | ||
8427 | "version": "1.3.3", | ||
8428 | "resolved": "https://registry.npmjs.org/@types/theming/-/theming-1.3.3.tgz", | ||
8429 | "integrity": "sha512-xcCIvBHFFxNDxDUn0Po6FXQPpGA6Y5dzt6/fbzVhBba7Qx4cxkxStmLVEkFqEF4jy01SH9DjbRUqdj7RziC/XA==", | ||
8430 | "dev": true, | ||
8431 | "requires": { | ||
8432 | "@types/react": "*" | ||
8433 | } | ||
8434 | }, | ||
8435 | "@types/uglify-js": { | 8404 | "@types/uglify-js": { |
8436 | "version": "3.13.0", | 8405 | "version": "3.13.0", |
8437 | "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.13.0.tgz", | 8406 | "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.13.0.tgz", |
@@ -12062,9 +12031,9 @@ | |||
12062 | } | 12031 | } |
12063 | }, | 12032 | }, |
12064 | "classnames": { | 12033 | "classnames": { |
12065 | "version": "2.2.6", | 12034 | "version": "2.3.1", |
12066 | "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", | 12035 | "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", |
12067 | "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" | 12036 | "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==" |
12068 | }, | 12037 | }, |
12069 | "cld": { | 12038 | "cld": { |
12070 | "version": "2.7.0", | 12039 | "version": "2.7.0", |
@@ -14107,12 +14076,6 @@ | |||
14107 | } | 14076 | } |
14108 | } | 14077 | } |
14109 | }, | 14078 | }, |
14110 | "csstype": { | ||
14111 | "version": "2.6.6", | ||
14112 | "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.6.tgz", | ||
14113 | "integrity": "sha512-RpFbQGUE74iyPgvr46U9t1xoQBM8T4BL8SxrN66Le2xYAPSaDJJKeztV3awugusb3g3G9iL8StmkBBXhcbbXhg==", | ||
14114 | "dev": true | ||
14115 | }, | ||
14116 | "currently-unhandled": { | 14079 | "currently-unhandled": { |
14117 | "version": "0.4.1", | 14080 | "version": "0.4.1", |
14118 | "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz", | 14081 | "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz", |
@@ -22067,15 +22030,6 @@ | |||
22067 | "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=", | 22030 | "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=", |
22068 | "dev": true | 22031 | "dev": true |
22069 | }, | 22032 | }, |
22070 | "indefinite-observable": { | ||
22071 | "version": "1.0.2", | ||
22072 | "resolved": "https://registry.npmjs.org/indefinite-observable/-/indefinite-observable-1.0.2.tgz", | ||
22073 | "integrity": "sha512-Mps0898zEduHyPhb7UCgNmfzlqNZknVmaFz5qzr0mm04YQ5FGLhAyK/dJ+NaRxGyR6juQXIxh5Ev0xx+qq0nYA==", | ||
22074 | "dev": true, | ||
22075 | "requires": { | ||
22076 | "symbol-observable": "1.2.0" | ||
22077 | } | ||
22078 | }, | ||
22079 | "indent-string": { | 22033 | "indent-string": { |
22080 | "version": "3.2.0", | 22034 | "version": "3.2.0", |
22081 | "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-3.2.0.tgz", | 22035 | "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-3.2.0.tgz", |
diff --git a/package.json b/package.json index f17c4d8e7..3f278e26b 100644 --- a/package.json +++ b/package.json | |||
@@ -73,7 +73,7 @@ | |||
73 | "atob": "2.1.2", | 73 | "atob": "2.1.2", |
74 | "auto-launch": "5.0.5", | 74 | "auto-launch": "5.0.5", |
75 | "btoa": "1.2.1", | 75 | "btoa": "1.2.1", |
76 | "classnames": "2.2.6", | 76 | "classnames": "2.3.1", |
77 | "cld": "2.7.0", | 77 | "cld": "2.7.0", |
78 | "css": "2.2.4", | 78 | "css": "2.2.4", |
79 | "darkreader": "4.9.34", | 79 | "darkreader": "4.9.34", |
@@ -149,15 +149,12 @@ | |||
149 | "@babel/preset-env": "7.14.8", | 149 | "@babel/preset-env": "7.14.8", |
150 | "@babel/preset-react": "7.14.5", | 150 | "@babel/preset-react": "7.14.5", |
151 | "@babel/register": "7.14.5", | 151 | "@babel/register": "7.14.5", |
152 | "@types/classnames": "2.2.9", | ||
153 | "@types/color": "3.0.2", | 152 | "@types/color": "3.0.2", |
154 | "@types/fs-extra": "^7.0.0", | 153 | "@types/fs-extra": "^7.0.0", |
155 | "@types/jss": "^9.5.7", | ||
156 | "@types/lodash": "4.14.171", | 154 | "@types/lodash": "4.14.171", |
157 | "@types/node": "12.20.13", | 155 | "@types/node": "12.20.13", |
158 | "@types/react": "16.14.6", | 156 | "@types/react": "16.14.6", |
159 | "@types/react-dom": "16.9.13", | 157 | "@types/react-dom": "16.9.13", |
160 | "@types/react-jss": "^8.6.0", | ||
161 | "@types/uuid": "3.4.9", | 158 | "@types/uuid": "3.4.9", |
162 | "all-contributors-cli": "6.20.0", | 159 | "all-contributors-cli": "6.20.0", |
163 | "babel-loader": "8.2.2", | 160 | "babel-loader": "8.2.2", |
diff --git a/packages/forms/package.json b/packages/forms/package.json index a5b8752aa..29e19b8c7 100644 --- a/packages/forms/package.json +++ b/packages/forms/package.json | |||
@@ -26,6 +26,7 @@ | |||
26 | "@mdi/js": "^3.3.92", | 26 | "@mdi/js": "^3.3.92", |
27 | "@mdi/react": "^1.1.0", | 27 | "@mdi/react": "^1.1.0", |
28 | "@meetfranz/theme": "file:../theme", | 28 | "@meetfranz/theme": "file:../theme", |
29 | "csstype": "^3.0.8", | ||
29 | "react-html-attributes": "^1.4.3", | 30 | "react-html-attributes": "^1.4.3", |
30 | "react-loader": "2.4.7" | 31 | "react-loader": "2.4.7" |
31 | }, | 32 | }, |
diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx index b81154a43..8eba17415 100644 --- a/packages/forms/src/button/index.tsx +++ b/packages/forms/src/button/index.tsx | |||
@@ -1,7 +1,7 @@ | |||
1 | import Icon from '@mdi/react'; | 1 | import Icon from '@mdi/react'; |
2 | import { Theme } from '@meetfranz/theme'; | 2 | import { Theme } from '@meetfranz/theme'; |
3 | import classnames from 'classnames'; | 3 | import classnames from 'classnames'; |
4 | import CSS from 'csstype'; | 4 | import * as CSS from 'csstype'; |
5 | import React, { Component } from 'react'; | 5 | import React, { Component } from 'react'; |
6 | import injectStyle, { withTheme } from 'react-jss'; | 6 | import injectStyle, { withTheme } from 'react-jss'; |
7 | import Loader from 'react-loader'; | 7 | import Loader from 'react-loader'; |
@@ -14,7 +14,7 @@ interface IProps extends IFormField, IWithStyle { | |||
14 | className?: string; | 14 | className?: string; |
15 | disabled?: boolean; | 15 | disabled?: boolean; |
16 | id?: string; | 16 | id?: string; |
17 | type?: "button" | "reset" | "submit" | undefined; | 17 | type?: 'button' | 'reset' | 'submit' | undefined; |
18 | onClick: (event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLAnchorElement>) => void; | 18 | onClick: (event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLAnchorElement>) => void; |
19 | buttonType?: ButtonType; | 19 | buttonType?: ButtonType; |
20 | stretch?: boolean; | 20 | stretch?: boolean; |
@@ -34,13 +34,13 @@ const styles = (theme: Theme) => ({ | |||
34 | borderRadius: theme.borderRadiusSmall, | 34 | borderRadius: theme.borderRadiusSmall, |
35 | border: 'none', | 35 | border: 'none', |
36 | display: 'inline-flex', | 36 | display: 'inline-flex', |
37 | position: 'relative' as CSS.PositionProperty, | 37 | position: 'relative' as CSS.Property.Position, |
38 | transition: 'background .5s, opacity 0.3s', | 38 | transition: 'background .5s, opacity 0.3s', |
39 | textAlign: 'center' as CSS.TextAlignProperty, | 39 | textAlign: 'center' as CSS.Property.TextAlign, |
40 | outline: 'none', | 40 | outline: 'none', |
41 | alignItems: 'center', | 41 | alignItems: 'center', |
42 | padding: 0, | 42 | padding: 0, |
43 | width: (props: IProps) => (props.stretch ? '100%' : 'auto') as CSS.WidthProperty<string>, | 43 | width: (props: IProps) => (props.stretch ? '100%' : 'auto') as CSS.Property.Width<string>, |
44 | fontSize: theme.uiFontSize, | 44 | fontSize: theme.uiFontSize, |
45 | textDecoration: 'none', | 45 | textDecoration: 'none', |
46 | // height: theme.buttonHeight, | 46 | // height: theme.buttonHeight, |
@@ -113,7 +113,7 @@ const styles = (theme: Theme) => ({ | |||
113 | opacity: theme.inputDisabledOpacity, | 113 | opacity: theme.inputDisabledOpacity, |
114 | }, | 114 | }, |
115 | loader: { | 115 | loader: { |
116 | position: 'relative' as CSS.PositionProperty, | 116 | position: 'relative' as CSS.Property.Position, |
117 | width: 20, | 117 | width: 20, |
118 | height: 18, | 118 | height: 18, |
119 | zIndex: 9999, | 119 | zIndex: 9999, |
@@ -123,9 +123,9 @@ const styles = (theme: Theme) => ({ | |||
123 | height: 20, | 123 | height: 20, |
124 | overflow: 'hidden', | 124 | overflow: 'hidden', |
125 | transition: 'all 0.3s', | 125 | transition: 'all 0.3s', |
126 | marginLeft: (props: IProps): number => !props.busy ? 10 : 20, | 126 | marginLeft: (props: IProps): number => (!props.busy ? 10 : 20), |
127 | marginRight: (props: IProps): number => !props.busy ? -10 : -20, | 127 | marginRight: (props: IProps): number => (!props.busy ? -10 : -20), |
128 | position: (props: IProps): CSS.PositionProperty => props.stretch ? 'absolute' : 'inherit', | 128 | position: (props: IProps): CSS.Property.Position => props.stretch ? 'absolute' : 'inherit', |
129 | }, | 129 | }, |
130 | icon: { | 130 | icon: { |
131 | margin: [1, 10, 0, -5], | 131 | margin: [1, 10, 0, -5], |
@@ -155,7 +155,7 @@ class ButtonComponent extends Component<IProps> { | |||
155 | if (this.props.busy) { | 155 | if (this.props.busy) { |
156 | setTimeout(() => { | 156 | setTimeout(() => { |
157 | this.setState({ busy: nextProps.busy }); | 157 | this.setState({ busy: nextProps.busy }); |
158 | }, 300); | 158 | }, 300); |
159 | } else { | 159 | } else { |
160 | this.setState({ busy: nextProps.busy }); | 160 | this.setState({ busy: nextProps.busy }); |
161 | } | 161 | } |
@@ -180,9 +180,7 @@ class ButtonComponent extends Component<IProps> { | |||
180 | target, | 180 | target, |
181 | } = this.props; | 181 | } = this.props; |
182 | 182 | ||
183 | const { | 183 | const { busy } = this.state; |
184 | busy, | ||
185 | } = this.state; | ||
186 | 184 | ||
187 | let showLoader = false; | 185 | let showLoader = false; |
188 | if (loaded) { | 186 | if (loaded) { |
@@ -207,19 +205,13 @@ class ButtonComponent extends Component<IProps> { | |||
207 | )} | 205 | )} |
208 | </div> | 206 | </div> |
209 | <div className={classes.label}> | 207 | <div className={classes.label}> |
210 | {icon && ( | 208 | {icon && <Icon path={icon} size={0.8} className={classes.icon} />} |
211 | <Icon | ||
212 | path={icon} | ||
213 | size={0.8} | ||
214 | className={classes.icon} | ||
215 | /> | ||
216 | )} | ||
217 | {label} | 209 | {label} |
218 | </div> | 210 | </div> |
219 | </> | 211 | </> |
220 | ); | 212 | ); |
221 | 213 | ||
222 | let wrapperComponent = null; | 214 | let wrapperComponent: JSX.Element; |
223 | 215 | ||
224 | if (!href) { | 216 | if (!href) { |
225 | wrapperComponent = ( | 217 | wrapperComponent = ( |
diff --git a/packages/forms/src/input/styles.ts b/packages/forms/src/input/styles.ts index e2ab30a4f..99b0685a8 100644 --- a/packages/forms/src/input/styles.ts +++ b/packages/forms/src/input/styles.ts | |||
@@ -1,5 +1,5 @@ | |||
1 | import { Theme } from '@meetfranz/theme'; | 1 | import { Theme } from '@meetfranz/theme'; |
2 | import CSS from 'csstype'; | 2 | import * as CSS from 'csstype'; |
3 | 3 | ||
4 | const prefixStyles = (theme: Theme) => ({ | 4 | const prefixStyles = (theme: Theme) => ({ |
5 | background: theme.inputPrefixBackground, | 5 | background: theme.inputPrefixBackground, |
@@ -13,7 +13,7 @@ export default (theme: Theme) => ({ | |||
13 | label: { | 13 | label: { |
14 | '& > div': { | 14 | '& > div': { |
15 | marginTop: 5, | 15 | marginTop: 5, |
16 | } | 16 | }, |
17 | }, | 17 | }, |
18 | disabled: { | 18 | disabled: { |
19 | opacity: theme.inputDisabledOpacity, | 19 | opacity: theme.inputDisabledOpacity, |
@@ -85,7 +85,7 @@ export default (theme: Theme) => ({ | |||
85 | background: theme.inputBackground, | 85 | background: theme.inputBackground, |
86 | border: theme.inputBorder, | 86 | border: theme.inputBorder, |
87 | borderRadius: theme.borderRadiusSmall, | 87 | borderRadius: theme.borderRadiusSmall, |
88 | boxSizing: 'border-box' as CSS.BoxSizingProperty, | 88 | boxSizing: 'border-box' as CSS.Property.BoxSizing, |
89 | display: 'flex', | 89 | display: 'flex', |
90 | height: theme.inputHeight, | 90 | height: theme.inputHeight, |
91 | order: 1, | 91 | order: 1, |
diff --git a/packages/forms/src/textarea/styles.ts b/packages/forms/src/textarea/styles.ts index c1cbd76a5..f1fb09367 100644 --- a/packages/forms/src/textarea/styles.ts +++ b/packages/forms/src/textarea/styles.ts | |||
@@ -1,5 +1,5 @@ | |||
1 | import { Theme } from '@meetfranz/theme'; | 1 | import { Theme } from '@meetfranz/theme'; |
2 | import CSS from 'csstype'; | 2 | import * as CSS from 'csstype'; |
3 | 3 | ||
4 | export default (theme: Theme) => ({ | 4 | export default (theme: Theme) => ({ |
5 | label: { | 5 | label: { |
@@ -42,7 +42,7 @@ export default (theme: Theme) => ({ | |||
42 | background: theme.inputBackground, | 42 | background: theme.inputBackground, |
43 | border: theme.inputBorder, | 43 | border: theme.inputBorder, |
44 | borderRadius: theme.borderRadiusSmall, | 44 | borderRadius: theme.borderRadiusSmall, |
45 | boxSizing: 'border-box' as CSS.BoxSizingProperty, | 45 | boxSizing: 'border-box' as CSS.Property.BoxSizing, |
46 | display: 'flex', | 46 | display: 'flex', |
47 | order: 1, | 47 | order: 1, |
48 | width: '100%', | 48 | width: '100%', |
diff --git a/packages/forms/src/toggle/index.tsx b/packages/forms/src/toggle/index.tsx index ea335f281..50716450b 100644 --- a/packages/forms/src/toggle/index.tsx +++ b/packages/forms/src/toggle/index.tsx | |||
@@ -1,6 +1,6 @@ | |||
1 | import { Theme } from '@meetfranz/theme'; | 1 | import { Theme } from '@meetfranz/theme'; |
2 | import classnames from 'classnames'; | 2 | import classnames from 'classnames'; |
3 | import CSS from 'csstype'; | 3 | import * as CSS from 'csstype'; |
4 | import React, { Component } from 'react'; | 4 | import React, { Component } from 'react'; |
5 | import injectStyle from 'react-jss'; | 5 | import injectStyle from 'react-jss'; |
6 | 6 | ||
@@ -22,7 +22,7 @@ const styles = (theme: Theme) => ({ | |||
22 | background: theme.toggleBackground, | 22 | background: theme.toggleBackground, |
23 | borderRadius: theme.borderRadius, | 23 | borderRadius: theme.borderRadius, |
24 | height: theme.toggleHeight, | 24 | height: theme.toggleHeight, |
25 | position: 'relative' as CSS.PositionProperty, | 25 | position: 'relative' as CSS.Property.Position, |
26 | width: theme.toggleWidth, | 26 | width: theme.toggleWidth, |
27 | }, | 27 | }, |
28 | button: { | 28 | button: { |
@@ -33,7 +33,7 @@ const styles = (theme: Theme) => ({ | |||
33 | height: theme.toggleHeight - 2, | 33 | height: theme.toggleHeight - 2, |
34 | left: 1, | 34 | left: 1, |
35 | top: 1, | 35 | top: 1, |
36 | position: 'absolute' as CSS.PositionProperty, | 36 | position: 'absolute' as CSS.Property.Position, |
37 | transition: 'all .5s', | 37 | transition: 'all .5s', |
38 | }, | 38 | }, |
39 | buttonActive: { | 39 | buttonActive: { |
diff --git a/tsconfig.settings.json b/tsconfig.settings.json index ccd0927ab..35f2cd80e 100644 --- a/tsconfig.settings.json +++ b/tsconfig.settings.json | |||
@@ -3,14 +3,11 @@ | |||
3 | "baseUrl": ".", | 3 | "baseUrl": ".", |
4 | "target": "esnext", | 4 | "target": "esnext", |
5 | "module": "commonjs", | 5 | "module": "commonjs", |
6 | "lib": [ | 6 | "lib": ["es2015", "es2017", "dom"], |
7 | "es2015", | ||
8 | "es2017", | ||
9 | "dom" | ||
10 | ], | ||
11 | "jsx": "react", | 7 | "jsx": "react", |
12 | "sourceMap": true, | 8 | "sourceMap": true, |
13 | "strict": true, | 9 | "strict": true, |
10 | "noImplicitAny": false, | ||
14 | "allowSyntheticDefaultImports": true, | 11 | "allowSyntheticDefaultImports": true, |
15 | "experimentalDecorators": true, | 12 | "experimentalDecorators": true, |
16 | "composite": true, | 13 | "composite": true, |
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 | ))); | ||