chore(FDS-153) - Fix remaining eslint rule errors (#175)

* chore(FDS-147) - fix eslint errors for 'react/prop-types' and react/forbid-prop-types'

* chore(FDS-153) - fix remaining eslint errors

consistent-return
eslint-comments/disable-enable-pair
eslint-comments/no-unused-disable
eslint-comments/require-description
jest/no-done-callback
react/jsx-key
react/jsx-no-bind
react/no-unknown-property
sort-imports
sort-keys

* chore(FDS-153) - address PR comments

* chore(FDS-153) - address PR comments (2)

* chore(FDS-153) - fix eslint for new fixture

Co-authored-by: Manu Ramirez <manu.ramirez@espressive.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

.eslintrc.js

@@ -12,17 +12,4 @@ module.exports = {
     },
   ],
   root: true,
-  rules: {
-    // TODO: Remove each of these lines below until there are 10 files with errors and resolve with --fix or manually, then submit a PR and repeat
-    'consistent-return': 0,
-    'eslint-comments/disable-enable-pair': 0,
-    'eslint-comments/no-unused-disable': 0,
-    'eslint-comments/require-description': 0,
-    'jest/no-done-callback': 0,
-    'react/jsx-key': 0,
-    'react/jsx-no-bind': 0,
-    'react/no-unknown-property': 0,
-    'sort-imports': 0,
-    'sort-keys': 0,
-  },
 };

babel.config.js

@@ -1,19 +1,4 @@
 module.exports = {
-  presets: [
-    [
-      '@babel/preset-env',
-      {
-        modules: false,
-        loose: true,
-      },
-    ],
-    '@babel/preset-react',
-  ],
-  plugins: [
-    '@babel/plugin-proposal-export-default-from',
-    '@babel/plugin-proposal-optional-chaining',
-    ['@babel/plugin-proposal-class-properties', { loose: true }],
-  ],
   env: {
     // Jest
     test: {
@@ -23,4 +8,24 @@ module.exports = {
       ],
     },
   },
+  plugins: [
+    '@babel/plugin-proposal-export-default-from',
+    '@babel/plugin-proposal-optional-chaining',
+    [
+      '@babel/plugin-proposal-class-properties',
+      {
+        loose: true,
+      },
+    ],
+  ],
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        loose: true,
+        modules: false,
+      },
+    ],
+    '@babel/preset-react',
+  ],
 };

docs/src/components/Code/Code.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { LiveEditor, LiveError, LivePreview, LiveProvider } from 'react-live';
 import theme from 'prism-react-renderer/themes/synthwave84';
 import pt from 'prop-types';
@@ -25,16 +25,19 @@ const Code = ({ children, className, live = true, title, ...rest }) => {
 
   const [editorCode, setEditorCode] = useState(children.trim());
 
-  const handleEditorToggle = () => {
+  const handleEditorToggle = useCallback(() => {
     // TODO: Make cursor focus on editor when opening
     // should also update styles for focus on editor so it is easier to see that it
     // is actually editable
     setEditorOpen(!editorOpen);
-  };
+  }, [setEditorOpen, editorOpen]);
 
-  const handleCodeChange = (code) => {
-    setEditorCode(code.trim());
-  };
+  const handleCodeChange = useCallback(
+    (code) => {
+      setEditorCode(code.trim());
+    },
+    [setEditorCode]
+  );
 
   useEffect(() => {
     setEditorCode(children.trim());

docs/src/components/PropTable/PropTable.js

@@ -5,9 +5,9 @@ import styles from './PropTable.module.scss';
 
 const propTypes = {
   docData: pt.shape({
-    props: pt.shape({}),
-    displayName: pt.string,
     description: pt.string,
+    displayName: pt.string,
+    props: pt.shape({}),
   }),
 };
 

docs/src/lib/MDX_COMPONENTS.js

@@ -64,7 +64,7 @@ const privateComponents = {
   DataTextArea: (props) => <DataTextArea {...props} />,
   ModuleProvider: (props) => <ModuleProvider {...props} />,
 };
-/* eslint-enable react/no-multi-comp */
+/* eslint-enable react/display-name, react/no-multi-comp */
 
 const MDX_COMPONENTS = {
   ...cascaraComponents,

docs/src/pages/[slug].js

@@ -2,15 +2,15 @@ import hydrate from 'next-mdx-remote/hydrate';
 import Head from 'next/head';
 import pt from 'prop-types';
 
-import { POSTS_PATH, postFilePaths } from '../lib/mdxUtils';
+import { postFilePaths, POSTS_PATH } from '../lib/mdxUtils';
 import getMDXTree from '../lib/getMDXTree';
 import MDX_COMPONENTS from '../lib/MDX_COMPONENTS';
 import MDX_OPTIONS from '../lib/MDX_OPTIONS';
 
 const propTypes = {
   frontMatter: pt.shape({
-    title: pt.string,
     description: pt.string,
+    title: pt.string,
   }),
   source: pt.string,
 };

docs/src/pages/_app.js

@@ -49,12 +49,14 @@ const MyApp = ({ Component, pageProps }) => {
           propTable?.length > 0 && (
             <Admin.Drawer>
               {propTable.map((componentProps) => (
-                <AnimatePresence exitBeforeEnter>
+                <AnimatePresence
+                  exitBeforeEnter
+                  key={router.query.mdx + componentProps}
+                >
                   <motion.div
                     animate={{ opacity: 1, translateX: 0 }}
                     exit={{ opacity: 0, translateX: 100 }}
                     initial={{ opacity: 0, translateX: 100 }}
-                    key={router.query.mdx + componentProps}
                   >
                     <PropTable docData={componentProps} />
                   </motion.div>

docs/src/pages/docs/[[...mdx]].js

@@ -6,7 +6,7 @@ import Head from 'next/head';
 import { AnimatePresence, motion } from 'framer-motion';
 
 import { Tabs } from '../../components';
-import { POSTS_PATH, postFilePaths } from '../../lib/mdxUtils';
+import { postFilePaths, POSTS_PATH } from '../../lib/mdxUtils';
 import MDX_COMPONENTS from '../../lib/MDX_COMPONENTS';
 import MDX_OPTIONS from '../../lib/MDX_OPTIONS';
 import getMDXTree from '../../lib/getMDXTree';
@@ -29,12 +29,12 @@ const propTypes = {
   mdxDirSource: pt.arrayOf(
     pt.shape({
       frontMatter: pt.shape({
-        title: pt.string,
         description: pt.shape(),
+        title: pt.string,
       }),
       frontmatter: pt.shape({
-        title: pt.string,
         description: pt.shape(),
+        title: pt.string,
         type: pt.string,
       }),
       router: pt.shape(),

docs/src/pages/index.js

@@ -1,6 +1,6 @@
 import hydrate from 'next-mdx-remote/hydrate';
 import getMDXTree from '../lib/getMDXTree';
-import { POSTS_PATH, postFilePaths } from '../lib/mdxUtils';
+import { postFilePaths, POSTS_PATH } from '../lib/mdxUtils';
 import MDX_COMPONENTS from '../lib/MDX_COMPONENTS';
 import MDX_OPTIONS from '../lib/MDX_OPTIONS';
 

jest.config.js

@@ -4,40 +4,30 @@
 module.exports = {
   // All imported modules in your tests should be mocked automatically
   // automock: false,
-
   // Stop running tests after `n` failures
   // bail: 0,
-
   // The directory where Jest should store its cached dependency information
   // cacheDirectory: "/private/var/folders/97/w9yvm2kn0vn8wzfh8hfb3yx00000gp/T/jest_dy",
-
   // Automatically clear mock calls and instances between every test
   clearMocks: true,
-
   // Indicates whether the coverage information should be collected while executing the test
   collectCoverage: true,
-
   // An array of glob patterns indicating a set of files for which coverage information should be collected
   // collectCoverageFrom: [
   //   "**/*.{<j></j>s,jsx}",
   //   "!**/node_modules/**",
   //   "!**/*.fixture.js"
   // ],
-
   // The directory where Jest should output its coverage files
   coverageDirectory: '.jest/build/coverage',
-
   // An array of regexp pattern strings used to skip coverage collection
   // coveragePathIgnorePatterns: [
   //   "/node_modules/",
   // ],
-
   // Indicates which provider should be used to instrument code for coverage
   coverageProvider: 'babel',
-
   // A list of reporter names that Jest uses when writing coverage reports
   coverageReporters: ['json', 'text', 'lcov', 'clover'],
-
   // An object that configures minimum threshold enforcement for coverage results
   coverageThreshold: {
     // @manu: disabled to unbreak the build
@@ -64,33 +54,24 @@ module.exports = {
     //   statements: 100,
     // },
   },
-
   // A path to a custom dependency extractor
   // dependencyExtractor: undefined,
-
   // Make calling deprecated APIs throw helpful error messages
   // errorOnDeprecated: false,
-
   // Force coverage collection from ignored files using an array of glob patterns
   // forceCoverageMatch: [],
-
   // A path to a module which exports an async function that is triggered once before all test suites
   // globalSetup: undefined,
-
   // A path to a module which exports an async function that is triggered once after all test suites
   // globalTeardown: undefined,
-
   // A set of global variables that need to be available in all test environments
   // globals: {},
-
   // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
   // maxWorkers: "50%",
-
   // An array of directory names to be searched recursively up from the requiring module's location
   // moduleDirectories: [
   //   "node_modules"
   // ],
-
   // An array of file extensions your modules use
   // moduleFileExtensions: [
   //   "js",
@@ -100,120 +81,89 @@ module.exports = {
   //   "tsx",
   //   "node"
   // ],
-
   // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
   moduleNameMapper: {
+    '\\.(css|scss)$': 'identity-obj-proxy',
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
       '<rootDir>/__mocks__/fileMock.js',
-    '\\.(css|scss)$': 'identity-obj-proxy',
   },
-
   // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
   modulePathIgnorePatterns: ['.fixture.js'],
-
   // Activates notifications for test results
   // notify: false,
-
   // An enum that specifies notification mode. Requires { notify: true }
   // notifyMode: "failure-change",
-
   // A preset that is used as a base for Jest's configuration
   // preset: undefined,
-
   // Run tests from one or more projects
   // projects: undefined,
-
   // Use this configuration option to add custom reporters to Jest
   // reporters: undefined,
-
   // Automatically reset mock state between every test
   // resetMocks: false,
-
   // Reset the module registry before running each individual test
   // resetModules: false,
-
   // A path to a custom resolver
   // resolver: undefined,
-
   // Automatically restore mock state between every test
   // restoreMocks: false,
-
   // The root directory that Jest should scan for tests and modules within
   // rootDir: undefined,
-
   // A list of paths to directories that Jest should use to search for files in
   roots: ['packages/cascara/src'],
-
   // Allows you to use a custom runner instead of Jest's default test runner
   // runner: "jest-runner",
-
   // The paths to modules that run some code to configure or set up the testing environment before each test
   setupFiles: ['./.jest/setup.js'],
-
   // A list of paths to modules that run some code to configure or set up the testing framework before each test
   setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
-
   // The number of seconds after which a test is considered as slow and reported as such in the results.
   // slowTestThreshold: 5,
-
   // A list of paths to snapshot serializer modules Jest should use for snapshot testing
   // snapshotSerializers: [],
-
   snapshotResolver: './.jest/snapshotResolver.js',
-
   // The test environment that will be used for testing
   // testEnvironment: "jest-environment-jsdom",
-
   // Options that will be passed to the testEnvironment
   // testEnvironmentOptions: {},
-
   // Adds a location field to test results
   // testLocationInResults: false,
-
   // The glob patterns Jest uses to detect test files
   testMatch: ['**/?(*.)+(spec|test).[tj]s?(x)'],
-
   // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
   // testPathIgnorePatterns: [
   //   "/node_modules/"
   // ],
-
   // The regexp pattern or array of patterns that Jest uses to detect test files
   // testRegex: [],
-
   // This option allows the use of a custom results processor
   // testResultsProcessor: undefined,
-
   // This option allows use of a custom test runner
   // testRunner: "jasmine2",
-
   // This option sets the URL for the jsdom environment. It is reflected in properties such as location.href
   // testURL: "http://localhost",
-
   // Setting this value to "fake" allows the use of fake timers for functions such as "setTimeout"
   // timers: "real",
-
   // A map from regular expressions to paths to transformers
   // NOTE: This is needed in order for Jest to see the babel.config.js file in the root of the repository
   transform: {
-    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { rootMode: 'upward' }],
-  },
-
-  // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
+    '^.+\\.(js|jsx|ts|tsx)$': [
+      'babel-jest',
+      {
+        rootMode: 'upward',
+      },
+    ],
+  }, // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
   // transformIgnorePatterns: [
   //   "/node_modules/",
   //   "\\.pnp\\.[^\\/]+$"
   // ],
-
   // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
   // unmockedModulePathPatterns: undefined,
-
   // Indicates whether each individual test should be reported during the run
   // verbose: undefined,
-
   // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
   // watchPathIgnorePatterns: [],
-
   // Whether to use watchman for file crawling
   // watchman: true,
 };

package.json

@@ -16,8 +16,8 @@
   "scripts": {
     "babel-preset": "yarn workspace @espressive/babel-preset-espressive",
     "cascara": "yarn workspace @espressive/cascara",
-    "cosmos:build": "npx -p react-cosmos cosmos-export --config .cosmos/config.json",
-    "cosmos": "npx react-cosmos --config .cosmos/config.json",
+    "cosmos:build": "npx -p react-cosmos@5.5.3 cosmos-export --config .cosmos/config.json",
+    "cosmos": "npx react-cosmos@5.5.3 --config .cosmos/config.json",
     "docs": "yarn workspace docs",
     "eslint-config": "yarn workspace @espressive/eslint-config-espressive",
     "framer:publish": "dotenv npx framer-cli publish",