chore: fix Prettier/ESlint configuration

.eslintrc.js

@@ -1,21 +1,17 @@
 module.exports = {
   parser: '@typescript-eslint/parser',
   plugins: ['@typescript-eslint', 'react-hooks', 'unused-imports', 'simple-import-sort'],
-  extends: ['plugin:storybook/recommended', 'plugin:@typescript-eslint/recommended', 'airbnb'],
+  extends: [
+    'plugin:storybook/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'airbnb',
+    'airbnb/hooks',
+    'prettier'
+  ],
 
   rules: {
-    // Commas on the last property of an object.
-    'comma-dangle': [2, 'never'],
     // Affects curly braces in if/else statements.
     curly: [2, 'multi', 'consistent'],
-    /**
-     * Enforces:
-     * if (foo)
-     *  bar();
-     */
-    'nonblock-statement-body-position': [2, 'below'],
-    // Enforces parenthesis around arrow functions parameters only when needed.
-    'arrow-parens': [2, 'as-needed'],
     // Don't require extensions for filenames in import
     'import/extensions': 0,
     // Avoid default exports
@@ -26,8 +22,6 @@ module.exports = {
     'import/order': 0,
     'import/no-unresolved': 0,
     'sort-imports': 0,
-    // Don't allow spaces inside {curlyBraces}
-    'object-curly-spacing': [2, 'never'],
     'object-curly-newline': 0,
     'function-paren-newline': 0,
     'react/sort-comp': 0,
@@ -39,16 +33,14 @@ module.exports = {
     'react/no-unused-prop-types': 0,
     'react-hooks/rules-of-hooks': 2,
     'react-hooks/exhaustive-deps': 1,
-    'react/function-component-definition': [2, {namedComponents: "arrow-function"}],
-    'no-trailing-spaces': 2,
+    'react/function-component-definition': [2, {namedComponents: 'arrow-function'}],
     'max-classes-per-file': 0,
     'implicit-arrow-linebreak': 0,
     'lines-between-class-members': 0,
     'react/destructuring-assignment': 0,
     quotes: 0,
     'no-multi-str': 0,
     'no-plusplus': 0,
-    indent: [2, 2, {SwitchCase: 1}],
     'max-len': [2, {code: 200}],
     'space-infix-ops': 0,
     'no-return-await': 0,
@@ -62,7 +54,7 @@ module.exports = {
     '@typescript-eslint/no-unused-vars': 'off',
     'unused-imports/no-unused-imports': 2,
 
-    "storybook/default-exports": 0,
+    'storybook/default-exports': 0,
 
     // Use @ts-expect-error with a comment instead.
     '@typescript-eslint/ban-ts-comment': 'warn',
@@ -147,8 +139,7 @@ module.exports = {
         'react/no-multi-comp': 0,
         'no-restricted-globals': 0,
         'operator-linebreak': 0,
-        'simple-import-sort/imports': 2,
-        'no-multiple-empty-lines': [2, {max: 1}]
+        'simple-import-sort/imports': 2
       }
     },
     {

.github/dependabot.yml

@@ -5,9 +5,9 @@
 
 version: 2
 updates:
-  - package-ecosystem: "npm" # See documentation for possible values
-    directory: "/" # Location of package manifests
+  - package-ecosystem: 'npm' # See documentation for possible values
+    directory: '/' # Location of package manifests
     schedule:
-      interval: "daily"
+      interval: 'daily'
     allow:
-      - dependency-type: "production"
+      - dependency-type: 'production'

.github/workflows/build-and-publish.yml

@@ -35,7 +35,7 @@ jobs:
       - run: yarn publish --non-interactive --access public
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
-      
+
   # Build and publish storybook when a new version is released.
   storybook:
     runs-on: ubuntu-latest
@@ -55,4 +55,4 @@ jobs:
         with:
           branch: gh-pages
           folder: storybook-static
-          clean: true
+          clean: true

.github/workflows/pr-name-lint.yml

@@ -7,10 +7,10 @@ jobs:
   lint:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
-      with:
-        node-version: 16
-    - name: Install Dependencies
-      run: yarn install
-    - uses: JulienKode/[email protected]
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - name: Install Dependencies
+        run: yarn install
+      - uses: JulienKode/[email protected]

.github/workflows/pull-request.yml

@@ -9,22 +9,22 @@ jobs:
   lint:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
-      with:
-        node-version: 16
-    - run: yarn install --frozen-lockfile
-    - run: yarn lint
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - run: yarn install --frozen-lockfile
+      - run: yarn lint
 
   test:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
-      with:
-        node-version: 16
-    - run: yarn install --frozen-lockfile
-    - run: yarn test
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - run: yarn install --frozen-lockfile
+      - run: yarn test
 
   # For pull requests, we can publish to chromatic so we have a way to view storybook.
   chromatic-deployment:
@@ -41,4 +41,3 @@ jobs:
         uses: chromaui/action@v1
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-

.prettierrc.json

@@ -1,10 +1,10 @@
-{
-  "printWidth": 110,
-  "tabWidth": 2,
-  "useTabs": false,
-  "semi": true,
-  "singleQuote": true,
-  "trailingComma": "none",
-  "bracketSpacing": false,
-  "bracketSameLine": true
-}
+{
+  "printWidth": 110,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "bracketSpacing": false,
+  "bracketSameLine": true
+}

.storybook/main.js

@@ -1,18 +1,23 @@
 const custom = require('../webpack.config.js');
 
 module.exports = {
-  stories: ["../src/**/*.stories.mdx", "../src/**/index.stories.@(ts|tsx)"],
-  addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions", "@storybook/addon-docs"],
-  framework: "@storybook/react",
+  stories: ['../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-docs'
+  ],
+  framework: '@storybook/react',
   core: {
-    builder: "webpack5"
+    builder: 'webpack5'
   },
-  webpackFinal: async config => ({
+  webpackFinal: async (config) => ({
     ...config,
     module: {
       ...config.module,
       rules: [
-        ...config.module.rules.filter(r => !r.test.toString().includes('svg')),
+        ...config.module.rules.filter((r) => !r.test.toString().includes('svg')),
         ...custom.module.rules
       ]
     }

.storybook/preview-body.html

@@ -6,9 +6,10 @@
   body {
     flex: 1;
   }
-  html, body {
+  html,
+  body {
     width: 100%;
     min-height: 100%;
     background: rgb(243, 244, 246);
   }
-</style>
+</style>

.storybook/preview.js

@@ -1,5 +1,5 @@
 export const parameters = {
-  actions: {argTypesRegex: "^on[A-Z].*"},
+  actions: {argTypesRegex: '^on[A-Z].*'},
   controls: {
     matchers: {
       color: /(background|color)$/i,

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint",
+    "styled-components.vscode-styled-components"
+  ]
+}

.vscode/frontSnippets.code-snippets

@@ -2,22 +2,14 @@
   "Front Comment™": {
     "scope": "javascript,typescript,javascriptreact,typescriptreact",
     "prefix": "fc",
-    "body": [
-      "/*",
-      " * $1",
-      " */"
-    ],
+    "body": ["/*", " * $1", " */"],
     "description": "Add a Front Style™ comment."
   },
   "Front Style Props": {
     "scope": "typescript, typescriptreact",
     "prefix": "fsp",
     "description": "Creates a *StyleProps type",
-    "body": [
-      "interface $1StyleProps {",
-      "$2",
-      "}"
-    ],
+    "body": ["interface $1StyleProps {", "$2", "}"]
   },
   "Front React Functional Component": {
     "scope": "typescriptreact",
@@ -47,4 +39,4 @@
       ""
     ]
   }
-}
+}

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
+}