fix: run eslint across the right files and fix any issues that arise. (#21)

Simon Taggart · web-flow · commit 2fcc872ff709 · 2019-08-06T10:37:05.000-07:00
* fix: run eslint on all files and fix errors

* fix: adjust for generated build assets

* fix: typos

* fix: just ignore all definition files
diff --git a/.eslintignore b/.eslintignore
@@ -2,4 +2,8 @@
 /bower_components/**
 /packages/**/node_modules/**
 **/lib/**
-rollup.config.js
+**/dist/**
+**/paste-icons/react/
+rollup.config.js
+**/tsconfig.build.tsbuildinfo
+**/*.d.ts
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -51,7 +51,8 @@ module.exports = {
     // with babel compiled typescript.
     '@typescript-eslint/no-var-requires': 'off',
     // Enforce template strings for styles over objects for consistent codebase
-    'emotion/syntax-preference': [2, 'string'],
+    // We can switch this to object at anytime, but lowering to warn as we have a mixed condebase right now.
+    'emotion/syntax-preference': [1, 'string'],
     // PropTypes are useless with typescript
     'react/prop-types': 'off',
     // Avoid having to redefine story deps for this monorepo
diff --git a/package.json b/package.json
@@ -33,7 +33,7 @@
     "test:coverage": "yarn pre-test && node --experimental-worker ./node_modules/.bin/jest --coverage",
     "prettier": "prettier --list-different '{.storybook,packages}/**/*.{ts,tsx}'",
     "prettier-clean": "prettier --write '{.storybook,packages}/**/*.{ts,tsx}'",
-    "lint": "eslint ./packages/**/*.ts ./packages/**/*.tsx ",
+    "lint": "eslint --ext .tsx,.ts ./packages/**",
     "type-check": "lerna run type-check"
   },
   "dependencies": {
diff --git a/packages/paste-core/components/button/src/styles.ts b/packages/paste-core/components/button/src/styles.ts
@@ -11,19 +11,19 @@ import {ButtonWrapperProps, ButtonChildrenProps} from './types';
 const sizeReset = css`
   padding: 0;
 `;
-const sizeIcon = (props: ButtonWrapperProps) => css`
+const sizeIcon = (props: ButtonWrapperProps): SerializedStyles => css`
   padding: ${themeGet('space.space30')(props)};
   border-radius: ${themeGet('radii.borderRadius20')(props)};
   /* To fix abnormal button padding-bottom */
   line-height: unset;
 `;
-const sizeSmall = (props: ButtonWrapperProps) => css`
+const sizeSmall = (props: ButtonWrapperProps): SerializedStyles => css`
   padding: ${themeGet('space.space10')(props)} ${themeGet('space.space30')(props)};
   border-radius: ${themeGet('radii.borderRadius10')(props)};
   font-size: ${themeGet('fontSizes.fontSize20')(props)};
   line-height: 24px;
 `;
-const sizeDefault = (props: ButtonWrapperProps) => css`
+const sizeDefault = (props: ButtonWrapperProps): SerializedStyles => css`
   padding: ${themeGet('space.space30')(props)} ${themeGet('space.space60')(props)};
   border-radius: ${themeGet('radii.borderRadius20')(props)};
   font-size: ${themeGet('fontSizes.fontSize20')(props)};
@@ -79,7 +79,7 @@ const baseDisabled = css([
  * Variants
  */
 // Primary
-const variantPrimaryBase = (props: ButtonWrapperProps) => css`
+const variantPrimaryBase = (props: ButtonWrapperProps): SerializedStyles => css`
   border-width: ${themeGet('borderWidths.borderWidth10')(props)};
   border-style: solid;
   color: ${themeGet('textColors.colorTextInverse')(props)};
@@ -134,7 +134,7 @@ const variantPrimaryDisabled = (props: ButtonWrapperProps): SerializedStyles =>
   ]);
 
 // Secondary
-const variantSecondaryBase = (props: ButtonWrapperProps) => css`
+const variantSecondaryBase = (props: ButtonWrapperProps): SerializedStyles => css`
   border-width: ${themeGet('borderWidths.borderWidth10')(props)};
   border-style: solid;
   background-color: ${themeGet('backgroundColors.colorBackgroundBody')(props)};
@@ -182,7 +182,7 @@ const variantSecondaryDisabled = (props: ButtonWrapperProps): SerializedStyles =
   ]);
 
 // Destructive
-const variantDestructiveBase = (props: ButtonWrapperProps) => css`
+const variantDestructiveBase = (props: ButtonWrapperProps): SerializedStyles => css`
   border-width: ${themeGet('borderWidths.borderWidth10')(props)};
   border-style: solid;
   background-color: ${themeGet('backgroundColors.colorBackgroundBody')(props)};
diff --git a/packages/paste-core/components/spinner/src/index.tsx b/packages/paste-core/components/spinner/src/index.tsx
@@ -26,7 +26,7 @@ interface SpinnerProps extends SpinnerIconProps {
   title: string;
 }
 
-const Spinner = (props: SpinnerProps) => (
+const Spinner: React.FC<SpinnerProps> = props => (
   <SpinningWrapper>
     <SpinnerIcon {...props} />
   </SpinningWrapper>
diff --git a/packages/paste-design-tokens/formatters/common.ts b/packages/paste-design-tokens/formatters/common.ts
@@ -1,9 +1,9 @@
 import * as lodash from 'lodash';
 import {ImmutableStyleMap} from 'theo';
 import {Token} from '../types';
-import getTokenCategories from '../utils/getTokenCategories';
-import formatSingleTokensWithTemplate from '../utils/formatSingleTokensWithTemplate';
-import formatGroupTokensWithTemplate from '../utils/formatGroupTokensWithTemplate';
+import {getTokenCategories} from '../utils/getTokenCategories';
+import {formatSingleTokensWithTemplate} from '../utils/formatSingleTokensWithTemplate';
+import {formatGroupTokensWithTemplate} from '../utils/formatGroupTokensWithTemplate';
 
 export const tokenTemplate = ({name, value}: {name: string; value: string}): string =>
   `const ${lodash.camelCase(name)} = "${value.replace(/"/g, '\\"')}";`;
diff --git a/packages/paste-design-tokens/formatters/d.ts.ts b/packages/paste-design-tokens/formatters/d.ts.ts
@@ -1,9 +1,9 @@
 import * as lodash from 'lodash';
 import {ImmutableStyleMap} from 'theo';
 import {Token} from '../types';
-import getTokenCategories from '../utils/getTokenCategories';
-import formatSingleTokensWithTemplate from '../utils/formatSingleTokensWithTemplate';
-import formatGroupTokensWithTemplate from '../utils/formatGroupTokensWithTemplate';
+import {getTokenCategories} from '../utils/getTokenCategories';
+import {formatSingleTokensWithTemplate} from '../utils/formatSingleTokensWithTemplate';
+import {formatGroupTokensWithTemplate} from '../utils/formatGroupTokensWithTemplate';
 
 export const tokenTemplate = ({name, value}: {name: string; value: string}): string =>
   `export declare const ${lodash.camelCase(name)} = "${value}";`;
diff --git a/packages/paste-design-tokens/formatters/es6.ts b/packages/paste-design-tokens/formatters/es6.ts
@@ -1,9 +1,9 @@
 import * as lodash from 'lodash';
 import {ImmutableStyleMap} from 'theo';
 import {Token} from '../types';
-import getTokenCategories from '../utils/getTokenCategories';
-import formatSingleTokensWithTemplate from '../utils/formatSingleTokensWithTemplate';
-import formatGroupTokensWithTemplate from '../utils/formatGroupTokensWithTemplate';
+import {getTokenCategories} from '../utils/getTokenCategories';
+import {formatSingleTokensWithTemplate} from '../utils/formatSingleTokensWithTemplate';
+import {formatGroupTokensWithTemplate} from '../utils/formatGroupTokensWithTemplate';
 
 export const tokenTemplate = ({name, value}: {name: string; value: string}): string =>
   `export const ${lodash.camelCase(name)} = "${value.replace(/"/g, '\\"')}";`;
diff --git a/packages/paste-design-tokens/formatters/gatsby.json.ts b/packages/paste-design-tokens/formatters/gatsby.json.ts
@@ -1,7 +1,7 @@
 import {ImmutableStyleMap} from 'theo';
 import {Token} from '../types';
-import getTokenCategories from '../utils/getTokenCategories';
-import formatGroupTokensWithTemplate from '../utils/formatGroupTokensWithTemplate';
+import {getTokenCategories} from '../utils/getTokenCategories';
+import {formatGroupTokensWithTemplate} from '../utils/formatGroupTokensWithTemplate';
 
 export const categoryTemplate = (categoryName: string, props: Token[]): string => {
   return `{
diff --git a/packages/paste-design-tokens/utils/formatGroupTokensWithTemplate/index.ts b/packages/paste-design-tokens/utils/formatGroupTokensWithTemplate/index.ts
@@ -44,13 +44,13 @@ const getPluralCatName = (name: string): string => {
   return pluralName;
 };
 
-export default (
+export const formatGroupTokensWithTemplate = (
   tokens: ImmutableStyleMap,
   categories: any,
-  categoryTemplate: (cat: string, props: Token[]) => void
+  categoryTemplate: (cat: string, props: Token[]) => string
 ): string => {
   return categories
-    .map((cat: string) => {
+    .map((cat: string): string | undefined => {
       const catProps = tokens
         .get('props')
         .sortBy(prop => {
@@ -64,6 +64,7 @@ export default (
       if (typeof cat === 'string') {
         return categoryTemplate(getPluralCatName(cat), catProps);
       }
+      return undefined;
     })
     .join('\n');
 };
diff --git a/packages/paste-design-tokens/utils/formatSingleTokensWithTemplate/index.ts b/packages/paste-design-tokens/utils/formatSingleTokensWithTemplate/index.ts
@@ -1,18 +1,22 @@
 import {ImmutableStyleMap} from 'theo';
 import {Token} from '../../types';
 
-export default (tokens: ImmutableStyleMap, tokenTemplate: (prop: Token) => void) => {
+export const formatSingleTokensWithTemplate = (
+  tokens: ImmutableStyleMap,
+  tokenTemplate: (prop: Token) => string
+): string => {
   return tokens
     .get('props')
     .sortBy(prop => {
       if (prop !== undefined) {
         return prop.get('name');
       }
     })
-    .map(prop => {
+    .map((prop): string | undefined => {
       if (prop !== undefined) {
         return tokenTemplate(prop.toJS());
       }
+      return undefined;
     })
     .join('\n');
 };
diff --git a/packages/paste-design-tokens/utils/getTokenCategories/index.ts b/packages/paste-design-tokens/utils/getTokenCategories/index.ts
@@ -1,12 +1,13 @@
 import {ImmutableStyleMap} from 'theo';
 
-export default (tokens: ImmutableStyleMap) => {
+export const getTokenCategories = (tokens: ImmutableStyleMap): any => {
   return tokens
     .get('props')
-    .map(prop => {
+    .map((prop): string | number | undefined => {
       if (prop !== undefined) {
         return prop.get('category');
       }
+      return undefined;
     })
     .toSet()
     .sort();
diff --git a/packages/paste-website/src/components/mdx/mdx-provider/index.tsx b/packages/paste-website/src/components/mdx/mdx-provider/index.tsx
@@ -6,7 +6,12 @@ import {Table, Tbody, Tr, Th, Td} from '../../table';
 interface PasteMDXProviderProps {
   children?: React.ReactElement;
 }
-
+/* eslint-disable no-shadow */
+/*
+  "error  'props' is already declared in the upper scope": these errors I don't
+  think are actually real. Because top level props is actually a different set of
+  props than that are passed to the components. I think eslint is confused.
+*/
 export const PasteMDXProvider: React.FC<PasteMDXProviderProps> = (props: PasteMDXProviderProps): React.ReactElement => {
   return (
     <MDXProvider
@@ -55,3 +60,4 @@ export const PasteMDXProvider: React.FC<PasteMDXProviderProps> = (props: PasteMD
     </MDXProvider>
   );
 };
+/* eslint-enable no-shadow */

Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@ interface SpinnerProps extends SpinnerIconProps {`
`26`	`26`	`title: string;`
`27`	`27`	`}`
`28`	`28`
`29`		`-const Spinner = (props: SpinnerProps) => (`
	`29`	`+const Spinner: React.FC<SpinnerProps> = props => (`
`30`	`30`	`<SpinningWrapper>`
`31`	`31`	`<SpinnerIcon {...props} />`
`32`	`32`	`</SpinningWrapper>`