From fd1c54cacdbd1798d806bd7ff91e60b3f0149420 Mon Sep 17 00:00:00 2001 From: mhatvan Date: Sat, 24 Jul 2021 10:44:18 +0200 Subject: - updated classnames to 2.3.1 to use added type definitions - remove stub type definitions from package.json - set 'noImplicitAny' false until jss and react-jss packages are upgraded to use own type definitions - add missing csstype to package/forms and update code to v3 --- package-lock.json | 64 ++++------------------- package.json | 5 +- packages/forms/package.json | 1 + packages/forms/src/button/index.tsx | 34 +++++------- packages/forms/src/input/styles.ts | 6 +-- packages/forms/src/textarea/styles.ts | 4 +- packages/forms/src/toggle/index.tsx | 6 +-- tsconfig.settings.json | 7 +-- 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 @@ "@mdi/js": "^3.3.92", "@mdi/react": "^1.1.0", "@meetfranz/theme": "file:packages/theme", + "csstype": "^3.0.8", "react-html-attributes": "^1.4.3", "react-loader": "2.4.7" }, @@ -7342,6 +7343,11 @@ "version": "3.9.97", "resolved": "https://registry.npmjs.org/@mdi/js/-/js-3.9.97.tgz", "integrity": "sha512-JzX6rDlUcNZHaoUg9sAzdg5Js287tvgRbNmMIyKoJK2ZCP9JupeWTYlpbX4oNJ9Zg9v8YH76WuWLALKOospQgw==" + }, + "csstype": { + "version": "3.0.8", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz", + "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==" } } }, @@ -8123,12 +8129,6 @@ "@types/responselike": "*" } }, - "@types/classnames": { - "version": "2.2.9", - "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.9.tgz", - "integrity": "sha512-MNl+rT5UmZeilaPxAVs6YaPC2m6aA8rofviZbhbxpPpl61uKodfdQVsBtgJGTqGizEf02oW3tsVe7FYB8kK14A==", - "dev": true - }, "@types/color": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/@types/color/-/color-3.0.2.tgz", @@ -8261,16 +8261,6 @@ "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=", "dev": true }, - "@types/jss": { - "version": "9.5.8", - "resolved": "https://registry.npmjs.org/@types/jss/-/jss-9.5.8.tgz", - "integrity": "sha512-bBbHvjhm42UKki+wZpR89j73ykSXg99/bhuKuYYePtpma3ZAnmeGnl0WxXiZhPGsIfzKwCUkpPC0jlrVMBfRxA==", - "dev": true, - "requires": { - "csstype": "^2.0.0", - "indefinite-observable": "^1.0.1" - } - }, "@types/keyv": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/@types/keyv/-/keyv-3.1.1.tgz", @@ -8373,18 +8363,6 @@ "@types/react": "^16" } }, - "@types/react-jss": { - "version": "8.6.4", - "resolved": "https://registry.npmjs.org/@types/react-jss/-/react-jss-8.6.4.tgz", - "integrity": "sha512-LK55kG7YnEt0xmBZeZqCEHEkSx7Xm1WD0GxaOUxIeTQyrSE6h0K70cyrXCloivrZwDzXqcA78zBBB64gapASPQ==", - "dev": true, - "requires": { - "@types/jss": "*", - "@types/react": "*", - "@types/theming": "*", - "csstype": "^2.0.0" - } - }, "@types/responselike": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.0.tgz", @@ -8423,15 +8401,6 @@ "integrity": "sha512-0VBprVqfgFD7Ehb2vd8Lh9TG3jP98gvr8rgehQqzztZNI7o8zS8Ad4jyZneKELphpuE212D8J70LnSNQSyO6bQ==", "dev": true }, - "@types/theming": { - "version": "1.3.3", - "resolved": "https://registry.npmjs.org/@types/theming/-/theming-1.3.3.tgz", - "integrity": "sha512-xcCIvBHFFxNDxDUn0Po6FXQPpGA6Y5dzt6/fbzVhBba7Qx4cxkxStmLVEkFqEF4jy01SH9DjbRUqdj7RziC/XA==", - "dev": true, - "requires": { - "@types/react": "*" - } - }, "@types/uglify-js": { "version": "3.13.0", "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.13.0.tgz", @@ -12062,9 +12031,9 @@ } }, "classnames": { - "version": "2.2.6", - "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", - "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", + "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==" }, "cld": { "version": "2.7.0", @@ -14107,12 +14076,6 @@ } } }, - "csstype": { - "version": "2.6.6", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.6.tgz", - "integrity": "sha512-RpFbQGUE74iyPgvr46U9t1xoQBM8T4BL8SxrN66Le2xYAPSaDJJKeztV3awugusb3g3G9iL8StmkBBXhcbbXhg==", - "dev": true - }, "currently-unhandled": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz", @@ -22067,15 +22030,6 @@ "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=", "dev": true }, - "indefinite-observable": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/indefinite-observable/-/indefinite-observable-1.0.2.tgz", - "integrity": "sha512-Mps0898zEduHyPhb7UCgNmfzlqNZknVmaFz5qzr0mm04YQ5FGLhAyK/dJ+NaRxGyR6juQXIxh5Ev0xx+qq0nYA==", - "dev": true, - "requires": { - "symbol-observable": "1.2.0" - } - }, "indent-string": { "version": "3.2.0", "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 @@ "atob": "2.1.2", "auto-launch": "5.0.5", "btoa": "1.2.1", - "classnames": "2.2.6", + "classnames": "2.3.1", "cld": "2.7.0", "css": "2.2.4", "darkreader": "4.9.34", @@ -149,15 +149,12 @@ "@babel/preset-env": "7.14.8", "@babel/preset-react": "7.14.5", "@babel/register": "7.14.5", - "@types/classnames": "2.2.9", "@types/color": "3.0.2", "@types/fs-extra": "^7.0.0", - "@types/jss": "^9.5.7", "@types/lodash": "4.14.171", "@types/node": "12.20.13", "@types/react": "16.14.6", "@types/react-dom": "16.9.13", - "@types/react-jss": "^8.6.0", "@types/uuid": "3.4.9", "all-contributors-cli": "6.20.0", "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 @@ "@mdi/js": "^3.3.92", "@mdi/react": "^1.1.0", "@meetfranz/theme": "file:../theme", + "csstype": "^3.0.8", "react-html-attributes": "^1.4.3", "react-loader": "2.4.7" }, 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 @@ import Icon from '@mdi/react'; import { Theme } from '@meetfranz/theme'; import classnames from 'classnames'; -import CSS from 'csstype'; +import * as CSS from 'csstype'; import React, { Component } from 'react'; import injectStyle, { withTheme } from 'react-jss'; import Loader from 'react-loader'; @@ -14,7 +14,7 @@ interface IProps extends IFormField, IWithStyle { className?: string; disabled?: boolean; id?: string; - type?: "button" | "reset" | "submit" | undefined; + type?: 'button' | 'reset' | 'submit' | undefined; onClick: (event: React.MouseEvent | React.MouseEvent) => void; buttonType?: ButtonType; stretch?: boolean; @@ -34,13 +34,13 @@ const styles = (theme: Theme) => ({ borderRadius: theme.borderRadiusSmall, border: 'none', display: 'inline-flex', - position: 'relative' as CSS.PositionProperty, + position: 'relative' as CSS.Property.Position, transition: 'background .5s, opacity 0.3s', - textAlign: 'center' as CSS.TextAlignProperty, + textAlign: 'center' as CSS.Property.TextAlign, outline: 'none', alignItems: 'center', padding: 0, - width: (props: IProps) => (props.stretch ? '100%' : 'auto') as CSS.WidthProperty, + width: (props: IProps) => (props.stretch ? '100%' : 'auto') as CSS.Property.Width, fontSize: theme.uiFontSize, textDecoration: 'none', // height: theme.buttonHeight, @@ -113,7 +113,7 @@ const styles = (theme: Theme) => ({ opacity: theme.inputDisabledOpacity, }, loader: { - position: 'relative' as CSS.PositionProperty, + position: 'relative' as CSS.Property.Position, width: 20, height: 18, zIndex: 9999, @@ -123,9 +123,9 @@ const styles = (theme: Theme) => ({ height: 20, overflow: 'hidden', transition: 'all 0.3s', - marginLeft: (props: IProps): number => !props.busy ? 10 : 20, - marginRight: (props: IProps): number => !props.busy ? -10 : -20, - position: (props: IProps): CSS.PositionProperty => props.stretch ? 'absolute' : 'inherit', + marginLeft: (props: IProps): number => (!props.busy ? 10 : 20), + marginRight: (props: IProps): number => (!props.busy ? -10 : -20), + position: (props: IProps): CSS.Property.Position => props.stretch ? 'absolute' : 'inherit', }, icon: { margin: [1, 10, 0, -5], @@ -155,7 +155,7 @@ class ButtonComponent extends Component { if (this.props.busy) { setTimeout(() => { this.setState({ busy: nextProps.busy }); - }, 300); + }, 300); } else { this.setState({ busy: nextProps.busy }); } @@ -180,9 +180,7 @@ class ButtonComponent extends Component { target, } = this.props; - const { - busy, - } = this.state; + const { busy } = this.state; let showLoader = false; if (loaded) { @@ -207,19 +205,13 @@ class ButtonComponent extends Component { )}
- {icon && ( - - )} + {icon && } {label}
); - let wrapperComponent = null; + let wrapperComponent: JSX.Element; if (!href) { 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 @@ import { Theme } from '@meetfranz/theme'; -import CSS from 'csstype'; +import * as CSS from 'csstype'; const prefixStyles = (theme: Theme) => ({ background: theme.inputPrefixBackground, @@ -13,7 +13,7 @@ export default (theme: Theme) => ({ label: { '& > div': { marginTop: 5, - } + }, }, disabled: { opacity: theme.inputDisabledOpacity, @@ -85,7 +85,7 @@ export default (theme: Theme) => ({ background: theme.inputBackground, border: theme.inputBorder, borderRadius: theme.borderRadiusSmall, - boxSizing: 'border-box' as CSS.BoxSizingProperty, + boxSizing: 'border-box' as CSS.Property.BoxSizing, display: 'flex', height: theme.inputHeight, 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 @@ import { Theme } from '@meetfranz/theme'; -import CSS from 'csstype'; +import * as CSS from 'csstype'; export default (theme: Theme) => ({ label: { @@ -42,7 +42,7 @@ export default (theme: Theme) => ({ background: theme.inputBackground, border: theme.inputBorder, borderRadius: theme.borderRadiusSmall, - boxSizing: 'border-box' as CSS.BoxSizingProperty, + boxSizing: 'border-box' as CSS.Property.BoxSizing, display: 'flex', order: 1, 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 @@ import { Theme } from '@meetfranz/theme'; import classnames from 'classnames'; -import CSS from 'csstype'; +import * as CSS from 'csstype'; import React, { Component } from 'react'; import injectStyle from 'react-jss'; @@ -22,7 +22,7 @@ const styles = (theme: Theme) => ({ background: theme.toggleBackground, borderRadius: theme.borderRadius, height: theme.toggleHeight, - position: 'relative' as CSS.PositionProperty, + position: 'relative' as CSS.Property.Position, width: theme.toggleWidth, }, button: { @@ -33,7 +33,7 @@ const styles = (theme: Theme) => ({ height: theme.toggleHeight - 2, left: 1, top: 1, - position: 'absolute' as CSS.PositionProperty, + position: 'absolute' as CSS.Property.Position, transition: 'all .5s', }, 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 @@ "baseUrl": ".", "target": "esnext", "module": "commonjs", - "lib": [ - "es2015", - "es2017", - "dom" - ], + "lib": ["es2015", "es2017", "dom"], "jsx": "react", "sourceMap": true, "strict": true, + "noImplicitAny": false, "allowSyntheticDefaultImports": true, "experimentalDecorators": true, "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 @@ -import CSS from 'csstype'; +import * as CSS from 'csstype'; import { Classes } from 'jss'; import { observer } from 'mobx-react'; import DevTools from 'mobx-react-devtools'; @@ -27,7 +27,7 @@ const styles = { '@global body': { margin: 0, fontSize: defaultTheme.uiFontSize, - fontFamily: '\'Open Sans\', sans-serif', + fontFamily: "'Open Sans', sans-serif", }, container: { display: 'flex', @@ -35,7 +35,7 @@ const styles = { }, menu: { width: 300, - position: 'fixed' as CSS.PositionProperty, + position: 'fixed' as CSS.Property.Position, listStyleType: 'none', fontSize: 14, overflow: 'scroll', @@ -66,7 +66,7 @@ const styles = { borderBottom: '1px solid #CFCFCF', }, sectionLink: { - fontWeight: 'bold' as CSS.FontWeightProperty, + fontWeight: 'bold' as CSS.Property.FontWeight, color: '#000', textDecoration: 'none', }, @@ -76,51 +76,53 @@ const styles = { }, }; -export const App = injectSheet(styles)(observer(({ classes }: { classes: Classes }) => ( -
-
    - {store.stories.sections.map((section, key) => ( -
  • - { - section.name} - -
      +export const App = injectSheet(styles)( + observer(({ classes }: { classes: Classes }) => ( +
      + +
      + {store.stories.sections.map((section, key) => ( +
      +

      + {section.name} +

      {section.stories.map((story, storyKey) => ( -
    • - +
      • + + + + +
      ))} -
    -
    • - ))} -
-
- {store.stories.sections.map((section, key) => ( -
-

- {section.name} -

- {section.stories.map((story, storyKey) => ( -
-

- {story.name} -

- - - -
- ))} -
- ))} +
+ ))} +
+ - - -))); + )), +); -- cgit v1.2.3-70-g09d2