From 06ee3ca742a4ff227a9ccdd8a3983680014d55f6 Mon Sep 17 00:00:00 2001 From: Thomas Osmonson Date: Tue, 28 Jan 2020 13:16:38 -0600 Subject: [PATCH] eslint fixes, deps updates, stack fixes --- packages/ui/.eslintrc.js | 33 +- packages/ui/package.json | 36 +- packages/ui/src/box/index.tsx | 4 +- packages/ui/src/box/types.ts | 88 +- packages/ui/src/button/index.tsx | 20 +- packages/ui/src/button/styles.tsx | 15 +- packages/ui/src/button/types.ts | 4 +- packages/ui/src/css-reset/preflight.tsx | 8 +- packages/ui/src/flex/index.tsx | 24 +- packages/ui/src/form-label/index.tsx | 49 +- packages/ui/src/form-label/types.ts | 4 +- packages/ui/src/grid/types.ts | 4 +- packages/ui/src/input-addon/index.tsx | 16 +- packages/ui/src/input-element/index.tsx | 23 +- packages/ui/src/input-group/index.tsx | 6 +- packages/ui/src/input/types.ts | 13 +- packages/ui/src/modal/types.ts | 18 +- packages/ui/src/stack/index.tsx | 32 +- packages/ui/src/stack/types.ts | 2 +- packages/ui/src/text/index.tsx | 26 +- packages/ui/src/theme-provider/index.tsx | 9 +- packages/ui/src/theme/colors-utils.tsx | 5 +- packages/ui/src/theme/typography.tsx | 3 +- packages/ui/src/use-clipboard/index.tsx | 5 +- packages/ui/src/utils/index.tsx | 8 +- packages/ui/yarn.lock | 1651 +++++++++------------- 26 files changed, 840 insertions(+), 1266 deletions(-) diff --git a/packages/ui/.eslintrc.js b/packages/ui/.eslintrc.js index b7a85071..537f0361 100644 --- a/packages/ui/.eslintrc.js +++ b/packages/ui/.eslintrc.js @@ -1,9 +1,11 @@ module.exports = { + ignorePatterns: ['test-app/', 'node_modules/'], extends: [ - 'plugin:react/recommended', 'plugin:@typescript-eslint/recommended', + 'plugin:@typescript-eslint/recommended-requiring-type-checking', 'plugin:prettier/recommended', - 'prettier/@typescript-eslint' + 'plugin:react/recommended', + 'prettier/@typescript-eslint', // 'plugin:jsx-a11y/recommended' ], parser: '@typescript-eslint/parser', @@ -11,13 +13,13 @@ module.exports = { ecmaVersion: '2018', sourceType: 'module', project: './tsconfig.json', - tsconfigRootDir: __dirname + tsconfigRootDir: __dirname, }, plugins: ['@typescript-eslint', 'react'], env: { browser: true, node: true, - es6: true + es6: true, }, rules: { quotes: [2, 'single', { avoidEscape: true }], @@ -31,22 +33,22 @@ module.exports = { 'error', { multiline: { - delimiter: 'none', - requireLast: true + delimiter: 'semi', + requireLast: true, }, singleline: { delimiter: 'semi', - requireLast: false - } - } + requireLast: false, + }, + }, ], '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }], '@typescript-eslint/array-type': 'error', - '@typescript-eslint/semi': ['error', 'never'], + // '@typescript-eslint/semi': ['error', 'never'], '@typescript-eslint/no-misused-promises': 'error', '@typescript-eslint/no-floating-promises': 'error', '@typescript-eslint/require-await': 'error', - '@typescript-eslint/promise-function-async': 0, + '@typescript-eslint/promise-function-async': 'error', '@typescript-eslint/await-thenable': 'error', '@typescript-eslint/no-empty-interface': 'off', '@typescript-eslint/no-non-null-assertion': 'off', @@ -59,7 +61,8 @@ module.exports = { '@typescript-eslint/no-use-before-define': 'off', '@typescript-eslint/interface-name-prefix': 'off', 'react/jsx-uses-vars': [2], - 'react/prop-types': 0, - 'react/display-name': 0 - } -} + 'react/jsx-key': [0], + 'react/prop-types': [0], + 'react/display-name': [0], + }, +}; diff --git a/packages/ui/package.json b/packages/ui/package.json index 215c1af4..d4088ad9 100755 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -13,7 +13,7 @@ "@styled-system/css": "5.1.4", "@types/color": "^3.0.1", "@types/styled-components": "^4.4.2", - "@types/styled-system": "^5.1.4", + "@types/styled-system": "^5.1.5", "@types/styled-system__css": "^5.0.4", "color": "3.1.2", "prop-types": "^15.7.2", @@ -23,45 +23,45 @@ "use-events": "^1.4.1" }, "devDependencies": { - "@babel/cli": "7.8.0", - "@babel/core": "7.8.0", - "@babel/plugin-proposal-class-properties": "7.8.0", - "@babel/plugin-proposal-object-rest-spread": "7.8.0", - "@babel/plugin-transform-object-assign": "7.8.0", - "@babel/plugin-transform-runtime": "7.8.0", - "@babel/preset-env": "7.8.2", - "@babel/preset-react": "7.8.0", - "@babel/preset-typescript": "^7.8.0", + "@babel/cli": "7.8.3", + "@babel/core": "7.8.3", + "@babel/plugin-proposal-class-properties": "7.8.3", + "@babel/plugin-proposal-object-rest-spread": "7.8.3", + "@babel/plugin-transform-object-assign": "7.8.3", + "@babel/plugin-transform-runtime": "7.8.3", + "@babel/preset-env": "7.8.3", + "@babel/preset-react": "7.8.3", + "@babel/preset-typescript": "^7.8.3", "@blockstack/prettier-config": "^0.0.5", - "@typescript-eslint/eslint-plugin": "^2.16.0", - "@typescript-eslint/parser": "^2.16.0", + "@typescript-eslint/eslint-plugin": "^2.18.0", + "@typescript-eslint/parser": "^2.18.0", "babel-plugin-module-resolver": "4.0.0", "babel-plugin-react-remove-properties": "0.3.0", "babel-plugin-transform-react-remove-prop-types": "0.4.24", "bundlesize": "^0.18.0", - "cross-env": "6.0.3", + "cross-env": "7.0.0", "dtslint": "^2.0.5", "eslint": "^6.8.0", "eslint-config-airbnb-base": "^14.0.0", - "eslint-config-prettier": "^6.9.0", + "eslint-config-prettier": "^6.10.0", "eslint-import-resolver-typescript": "^2.0.0", "eslint-plugin-import": "^2.20.0", "eslint-plugin-prettier": "^3.1.2", - "eslint-plugin-react": "^7.17.0", + "eslint-plugin-react": "^7.18.0", "fs-extra": "8.1.0", "glob": "7.1.6", "path": "0.12.7", "prettier": "^1.19.1", "react": "^16.12.0", "react-dom": "^16.12.0", - "rimraf": "3.0.0", + "rimraf": "3.0.1", "shx": "^0.3.2", "styled-components": "^5.0.0", "ts-node": "^8.6.2", "tsdx": "^0.12.3", - "tslint": "^5.20.1", + "tslint": "^6.0.0", "tslint-config-prettier": "^1.18.0", - "typescript": "^3.7.4" + "typescript": "^3.7.5" }, "files": [ "dist" diff --git a/packages/ui/src/box/index.tsx b/packages/ui/src/box/index.tsx index 27c813ed..b1c9669a 100755 --- a/packages/ui/src/box/index.tsx +++ b/packages/ui/src/box/index.tsx @@ -44,6 +44,4 @@ export const StyledBox = styled.div` ${extraConfig}; `; -export const Box = forwardRef((props: BoxProps, ref: Ref) => ( - -)); +export const Box = forwardRef((props: BoxProps, ref: Ref) => ); diff --git a/packages/ui/src/box/types.ts b/packages/ui/src/box/types.ts index 8cddfb0b..1f6e9aa5 100644 --- a/packages/ui/src/box/types.ts +++ b/packages/ui/src/box/types.ts @@ -3,17 +3,7 @@ import * as React from 'react'; import { Omit } from '../common-types'; import * as CSS from 'csstype'; -export type FontSize = - | 'xs' - | 'sm' - | 'base' - | 'lg' - | 'xl' - | '2xl' - | '3xl' - | '4xl' - | '5xl' - | '6xl'; +export type FontSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl'; export type FontWeight = | 'hairline' @@ -27,55 +17,31 @@ export type FontWeight = | 'black'; export interface IFontSize { - fontSize?: - | StyledSystem.ResponsiveValue - | StyledSystem.FontSizeProps['fontSize']; + fontSize?: StyledSystem.ResponsiveValue | StyledSystem.FontSizeProps['fontSize']; } export interface IFontWeight { - fontWeight?: - | StyledSystem.ResponsiveValue - | StyledSystem.FontWeightProps['fontWeight']; + fontWeight?: StyledSystem.ResponsiveValue | StyledSystem.FontWeightProps['fontWeight']; } -export type LineHeight = - | 'none' - | 'shorter' - | 'short' - | 'normal' - | 'tall' - | 'taller'; +export type LineHeight = 'none' | 'shorter' | 'short' | 'normal' | 'tall' | 'taller'; export interface ILineHeight { - lineHeight?: - | StyledSystem.ResponsiveValue - | StyledSystem.LineHeightProps['lineHeight']; + lineHeight?: StyledSystem.ResponsiveValue | StyledSystem.LineHeightProps['lineHeight']; } -export type LetterSpacing = - | 'tighter' - | 'tight' - | 'normal' - | 'wide' - | 'wider' - | 'widest'; +export type LetterSpacing = 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest'; export interface ILetterSpacing { - letterSpacing?: - | StyledSystem.ResponsiveValue - | StyledSystem.LetterSpacingProps['letterSpacing']; + letterSpacing?: StyledSystem.ResponsiveValue | StyledSystem.LetterSpacingProps['letterSpacing']; } export interface ITextAlign { - textAlign?: - | StyledSystem.ResponsiveValue - | StyledSystem.TextAlignProps['textAlign']; + textAlign?: StyledSystem.ResponsiveValue | StyledSystem.TextAlignProps['textAlign']; } export interface ITextDecoration { - textDecoration?: - | StyledSystem.ResponsiveValue - | CSS.TextDecorationProperty; + textDecoration?: StyledSystem.ResponsiveValue | CSS.TextDecorationProperty; } export type TextStyle = @@ -89,9 +55,7 @@ export type TextStyle = | 'caption.medium'; export interface ITextStyle { - textStyle?: - | StyledSystem.ResponsiveValue - | StyledSystem.TextStyleProps['textStyle']; + textStyle?: StyledSystem.ResponsiveValue | StyledSystem.TextStyleProps['textStyle']; } export interface IAs { @@ -123,29 +87,16 @@ export interface IDisplayShorthandProps { d?: StyledSystem.DisplayProps['display']; } -export type BoxShadow = - | 'low' - | 'mid' - | 'high' - | 'inner' - | 'none' - | CSS.BoxShadowProperty; +export type BoxShadow = 'low' | 'mid' | 'high' | 'inner' | 'none' | CSS.BoxShadowProperty; export interface IOtherProps { - cursor?: - | CSS.CursorProperty - | StyledSystem.ResponsiveValue; - transform?: - | CSS.TransformProperty - | StyledSystem.ResponsiveValue; - transition?: - | CSS.TransitionProperty - | StyledSystem.ResponsiveValue; + cursor?: CSS.CursorProperty | StyledSystem.ResponsiveValue; + transform?: CSS.TransformProperty | StyledSystem.ResponsiveValue; + transition?: CSS.TransitionProperty | StyledSystem.ResponsiveValue; boxShadow?: BoxShadow | StyledSystem.ResponsiveValue; } -export type ShorthandProps = IFlexDirectionShorthandProps & - IDisplayShorthandProps; +export type ShorthandProps = IFlexDirectionShorthandProps & IDisplayShorthandProps; export type StyledSystemProps = StyledSystem.LayoutProps & StyledSystem.ColorProps & @@ -169,13 +120,8 @@ export type ModifiedStyledSystemProps = TypographyProps & ITextDecoration & IOtherProps; -export type BoxHTMLProps = React.RefAttributes & - React.HTMLAttributes; +export type BoxHTMLProps = React.RefAttributes & React.HTMLAttributes; -export type BoxProps = StyledSystemProps & - ModifiedStyledSystemProps & - ShorthandProps & - IAs & - BoxHTMLProps; +export type BoxProps = StyledSystemProps & ModifiedStyledSystemProps & ShorthandProps & IAs & BoxHTMLProps; export type Box = React.FC; diff --git a/packages/ui/src/button/index.tsx b/packages/ui/src/button/index.tsx index 41e0b4c4..0f737920 100644 --- a/packages/ui/src/button/index.tsx +++ b/packages/ui/src/button/index.tsx @@ -8,13 +8,7 @@ import { useHover } from 'use-events'; export * from './types'; -const HoverChange = ({ - isHovered, - isDisabled, -}: { - isHovered: boolean; - isDisabled: boolean; -}) => ( +const HoverChange = ({ isHovered, isDisabled }: { isHovered: boolean; isDisabled: boolean }) => ( , ButtonProps>( size, customStyles, }); - // @ts-ignore + const [hovered, bind] = useHover(); return ( - // @ts-ignore , ButtonProps>( {...styles} {...bind} > - + {isLoading && ( { }; }; -const solidVariantProps = ({ - mode, - customStyles, -}: { - mode: ButtonModes; - customStyles: CustomStyles; -}) => { +const solidVariantProps = ({ mode, customStyles }: { mode: ButtonModes; customStyles: CustomStyles }) => { const style = { primary: { bg: 'blue', diff --git a/packages/ui/src/button/types.ts b/packages/ui/src/button/types.ts index ba83ef50..a91b7425 100755 --- a/packages/ui/src/button/types.ts +++ b/packages/ui/src/button/types.ts @@ -80,6 +80,4 @@ export interface IButtonStyles { customStyles: CustomStyles; } -export type ButtonProps = IButtonPropsBase & - PseudoBoxProps & - React.RefAttributes; +export type ButtonProps = IButtonPropsBase & PseudoBoxProps & React.RefAttributes; diff --git a/packages/ui/src/css-reset/preflight.tsx b/packages/ui/src/css-reset/preflight.tsx index b62ecada..e6a8ef71 100755 --- a/packages/ui/src/css-reset/preflight.tsx +++ b/packages/ui/src/css-reset/preflight.tsx @@ -434,9 +434,8 @@ const tailwindPreflight = css` */ html { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, - 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', - 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; /* 1 */ + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, + 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; /* 1 */ line-height: 1.5; /* 2 */ -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; @@ -531,8 +530,7 @@ const tailwindPreflight = css` code, kbd, samp { - font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', - monospace; + font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; } /** diff --git a/packages/ui/src/flex/index.tsx b/packages/ui/src/flex/index.tsx index 79e5c149..36e8ad6a 100755 --- a/packages/ui/src/flex/index.tsx +++ b/packages/ui/src/flex/index.tsx @@ -4,18 +4,16 @@ import { FlexProps } from './types'; export * from './types'; -const Flex = forwardRef( - ({ align, justify, wrap, direction, ...rest }, ref) => ( - - ) -); +const Flex = forwardRef(({ align, justify, wrap, direction, ...rest }, ref) => ( + +)); export { Flex }; diff --git a/packages/ui/src/form-label/index.tsx b/packages/ui/src/form-label/index.tsx index 03b695cb..e953d229 100755 --- a/packages/ui/src/form-label/index.tsx +++ b/packages/ui/src/form-label/index.tsx @@ -8,14 +8,7 @@ export * from './types'; /* eslint react/no-children-prop: 0 */ export const RequiredIndicator = (props: any) => ( -