Shareable config

.changeset/quick-geckos-pump.md

@@ -0,0 +1,5 @@
+---
+"ingred-ui": patch
+---
+
+shareable config

.eslintrc.js

@@ -1,183 +1,15 @@
 module.exports = {
-  plugins: ["@typescript-eslint", "react", "react-hooks", "jsx-a11y", "jest"],
-  extends: [
-    "eslint:recommended",
-    "prettier",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:import/errors",
-    "plugin:import/warnings",
-    "plugin:import/typescript",
-    "plugin:react/recommended",
-    "plugin:jest/recommended",
-    "plugin:jsx-a11y/recommended",
-  ],
-  parser: "@typescript-eslint/parser",
+  root: true,
+  extends: ["@takurinton/eslint-config"],
   parserOptions: {
-    ecmaFeatures: {
-      jsx: true,
-    },
-    ecmaVersion: 2018,
-    sourceType: "module",
-  },
-  settings: {
-    react: {
-      version: "detect",
-    },
-  },
-  env: {
-    browser: true,
-    es6: true,
-    node: true,
-  },
-  globals: {
-    Atomics: "readonly",
-    SharedArrayBuffer: "readonly",
-  },
-  rules: {
-    "@typescript-eslint/no-unused-vars": [
-      "error",
-      { argsIgnorePattern: "^_", destructuredArrayIgnorePattern: "^_" },
-    ],
-    "no-restricted-syntax": "off",
-    "no-await-in-loop": "off",
-    "no-empty": ["error", { allowEmptyCatch: true }],
-    "no-case-declarations": "off",
-    "no-console": "warn",
-    "no-nested-ternary": "error",
-    "import/named": "off",
-    "import/namespace": "off",
-    "import/no-named-as-default": "off",
-    "import/no-named-as-default-member": "off",
-    "import/prefer-default-export": "off",
-    "import/no-extraneous-dependencies": "off",
-    "import/no-unresolved": "off",
-    "react/jsx-handler-names": [
-      "error",
-      {
-        eventHandlerPrefix: "(handle|on|set)",
-        checkLocalVariables: true,
-        checkInlineFunction: true,
-      },
-    ],
-    "react/no-multi-comp": ["error", { ignoreStateless: true }],
-    "react/no-access-state-in-setstate": "error",
-    "react/no-redundant-should-component-update": "error",
-    "react/no-this-in-sfc": "error",
-    "react/no-unused-state": "error",
-    "react/self-closing-comp": "error",
-    "react/jsx-no-useless-fragment": "error",
-    "react/jsx-fragments": ["error", "syntax"],
-    "react/jsx-sort-props": [
-      "error",
-      {
-        callbacksLast: true,
-        shorthandFirst: true,
-        ignoreCase: true,
-        noSortAlphabetically: true,
-        reservedFirst: true,
-      },
-    ],
-    "react-hooks/rules-of-hooks": "error",
-
-    /**
-     * Disable some `plugin:react/recommended` settings.
-     */
-    "react-hooks/exhaustive-deps": "warn",
-    "react/display-name": "off",
-    "react/prop-types": "off",
-    "react/jsx-boolean-value": "off",
-    "react/jsx-filename-extension": "off",
-    "react/jsx-props-no-spreading": "off",
-    "react/no-array-index-key": "warn",
-    "react/sort-comp": [
-      "warn",
-      {
-        order: [
-          "static-methods",
-          "instance-variables",
-          "getters",
-          "setters",
-          "lifecycle",
-          "render",
-          "/^render.+$/",
-          "instance-methods",
-          "everything-else",
-          "/^handle.+$/",
-        ],
-      },
-    ],
+    project: "./tsconfig.json",
   },
   overrides: [
     {
-      files: ["*.ts", "*.tsx"],
-      rules: {
-        "@typescript-eslint/ban-types": "off",
-        "@typescript-eslint/explicit-module-boundary-types": "off",
-        "@typescript-eslint/explicit-function-return-type": "off",
-        "@typescript-eslint/no-explicit-any": "off",
-        "@typescript-eslint/consistent-type-definitions": ["error", "type"],
-        "@typescript-eslint/no-require-imports": "error",
-        "@typescript-eslint/no-use-before-define": "warn",
-        "@typescript-eslint/naming-convention": [
-          "error",
-          { selector: "class", format: ["PascalCase"] },
-          { selector: "interface", format: ["PascalCase"] },
-          { selector: "enum", format: ["PascalCase"] },
-          { selector: "enumMember", format: ["UPPER_CASE"] },
-          { selector: "method", format: ["PascalCase", "camelCase"] },
-          {
-            selector: "variable",
-            format: ["PascalCase", "camelCase", "UPPER_CASE"],
-          },
-        ],
-        "jsx-a11y/no-autofocus": "off", // We want to use `autoFocus` in a fluct optimized component <MultipleFilter />.
-        "jsx-a11y/control-has-associated-label": [
-          "error",
-          {
-            depth: 10,
-          },
-        ],
-      },
-    },
-    {
-      files: ["*.stories.tsx", "*.test.ts", "*.test.tsx"],
-      rules: {
-        "no-restricted-imports": [
-          "error",
-          {
-            paths: [
-              {
-                name: "./",
-              },
-              {
-                name: ".",
-              },
-            ],
-          },
-        ],
-        "react/jsx-handler-names": "off",
-        "no-empty": "off",
-        "no-console": "off",
-        "react/jsx-key": "off",
-        "react/jsx-no-useless-fragment": "off",
-        "react/no-array-index-key": "off",
-        "@typescript-eslint/no-empty-function": "off",
-        "@typescript-eslint/explicit-module-boundary-types": "off",
-        "react/no-multi-comp": "off",
-        // I realize it's silly of me, but I'll turn it off here for the sake of specs for once.
-        "jsx-a11y/click-events-have-key-events": "off",
-        "jsx-a11y/no-static-element-interactions": "off",
-        "react-hooks/rules-of-hooks": "off",
-      },
-    },
-    {
-      files: ["*.js"],
+      files: ["*"],
       rules: {
-        "import/no-dynamic-require": "off",
-        "global-require": "off",
-        camelcase: "off",
-        "@typescript-eslint/no-var-requires": "off",
+        // 高さや幅で数字を扱ってる部分があり、そこで falsy 判定している箇所もあるので無効にする
+        "@typescript-eslint/prefer-nullish-coalescing": "off",
       },
     },
   ],

package.json

@@ -21,7 +21,7 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "lint": "tsc && eslint 'src/**/*.{ts,tsx}' && prettier --check 'src/**/*.{ts,tsx}'",
-    "format": "prettier --write 'src/**/*.{ts,tsx}'",
+    "format": "eslint 'src/**/*.{ts,tsx}' --fix && prettier --write 'src/**/*.{ts,tsx}'",
     "generate": "yarn scaffdog generate",
     "release": "changeset tag && changeset publish"
   },
@@ -54,6 +54,7 @@
     "@storybook/addon-storysource": "7.2.0",
     "@storybook/react": "7.2.0",
     "@storybook/react-vite": "7.2.0",
+    "@takurinton/eslint-config": "0.0.7",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "14.0.0",
     "@types/jest": "29.5.1",
@@ -63,16 +64,8 @@
     "@types/react-transition-group": "4.4.4",
     "@types/rollup-plugin-peer-deps-external": "2.2.1",
     "@types/styled-components": "5.1.25",
-    "@typescript-eslint/eslint-plugin": "5.61.0",
-    "@typescript-eslint/parser": "5.61.0",
     "cross-env": "7.0.3",
-    "eslint": "8.44.0",
-    "eslint-config-prettier": "8.8.0",
-    "eslint-plugin-import": "2.27.4",
-    "eslint-plugin-jest": "27.2.0",
-    "eslint-plugin-jsx-a11y": "6.7.1",
-    "eslint-plugin-react": "7.32.1",
-    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint": "8.46.0",
     "jest": "29.5.0",
     "jest-environment-jsdom": "29.6.1",
     "prettier": "3.0.0",

src/components/Accordion/Accordion.stories.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
 import { StoryObj } from "@storybook/react";
+import * as React from "react";
 import Accordion, { AccordionProps } from "./Accordion";
 
 export default {

src/components/Accordion/__tests__/Accordion.test.tsx

@@ -1,8 +1,8 @@
+import { cleanup } from "@testing-library/react";
 import * as React from "react";
 import "@testing-library/jest-dom/extend-expect";
-import { cleanup } from "@testing-library/react";
-import { renderWithThemeProvider } from "../../../utils/renderWithThemeProvider";
 import Accordion from "../";
+import { renderWithThemeProvider } from "../../../utils/renderWithThemeProvider";
 
 describe("Accordion component testing", () => {
   afterEach(cleanup);

src/components/Accordion/styled.ts

@@ -1,5 +1,5 @@
-import Flex from "../Flex";
 import styled from "styled-components";
+import Flex from "../Flex";
 
 export const AccordionTitle = styled(Flex)<{
   expanded: boolean;

src/components/ActionButton/ActionButton.stories.tsx

@@ -1,7 +1,7 @@
 import { action } from "@storybook/addon-actions";
 import { ArgsTable, Stories, Title } from "@storybook/addon-docs";
-import { StoryObj } from "@storybook/react";
 import { Markdown } from "@storybook/blocks";
+import { StoryObj } from "@storybook/react";
 import React from "react";
 import ActionButton, { ActionButtonProps } from "./ActionButton";
 

src/components/ActionButton/ActionButton.tsx

@@ -1,10 +1,10 @@
 import * as React from "react";
-import * as Styled from "./styled";
+import { colors } from "../../styles/color";
+import { Theme, useTheme } from "../../themes";
 import Icon from "../Icon";
 import { IconName } from "../Icon/Icon";
 import Typography from "../Typography";
-import { Theme, useTheme } from "../../themes";
-import { colors } from "../../styles/color";
+import * as Styled from "./styled";
 
 const getNormalBackgroundColor = (theme: Theme) => ({
   primary: theme.palette.background.hint,

src/components/ActionButton/__tests__/ActionButton.test.tsx

@@ -1,6 +1,6 @@
+import { cleanup } from "@testing-library/react";
 import * as React from "react";
 import "@testing-library/jest-dom/extend-expect";
-import { cleanup } from "@testing-library/react";
 import ActionButton from "../";
 import { renderWithThemeProvider } from "../../../utils/renderWithThemeProvider";
 

src/components/ActionButton/__tests__/__snapshots__/ActionButton.test.tsx.snap

@@ -3,10 +3,10 @@
 exports[`ActionButton component testing ActionButton 1`] = `
 <DocumentFragment>
   <button
-    class="sc-bczRLJ hWIYcR"
+    class="sc-dkzDqf ia-DTMs"
   >
     <span
-      class="sc-gsnTZi ezZeqd"
+      class="sc-bczRLJ gJuzRf"
       size="18"
     >
       <svg

src/components/Backdrop/Backdrop.stories.tsx

@@ -1,9 +1,9 @@
-import React from "react";
-import { StoryObj } from "@storybook/react";
 import { Title, ArgsTable, Stories } from "@storybook/addon-docs";
-import Backdrop, { BackdropProps } from "./Backdrop";
-import Spinner from "../Spinner";
+import { StoryObj } from "@storybook/react";
+import React from "react";
 import Button from "../Button";
+import Spinner from "../Spinner";
+import Backdrop, { BackdropProps } from "./Backdrop";
 
 export default {
   title: "Components/Feedback/Backdrop",

src/components/Backdrop/Backdrop.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
-import * as Styled from "./styled";
-import Fade from "../Fade";
 import { CSSTransitionProps } from "../../utils/reactTransitionGroup";
+import Fade from "../Fade";
+import * as Styled from "./styled";
 
 export type BackdropProps = React.ComponentPropsWithoutRef<"div"> & {
   isOpen?: boolean;

src/components/Backdrop/__tests__/Backdrop.test.tsx

@@ -1,8 +1,8 @@
+import { cleanup } from "@testing-library/react";
 import * as React from "react";
 import "@testing-library/jest-dom/extend-expect";
-import { cleanup } from "@testing-library/react";
-import { renderWithThemeProvider } from "../../../utils/renderWithThemeProvider";
 import Backdrop from "../";
+import { renderWithThemeProvider } from "../../../utils/renderWithThemeProvider";
 
 describe("Backdrop component testing", () => {
   afterEach(cleanup);

src/components/Backdrop/__tests__/__snapshots__/Backdrop.test.tsx.snap

@@ -3,10 +3,10 @@
 exports[`Backdrop component testing Backdrop 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gsnTZi PEcwf fade-transition-appear fade-transition-appear-active"
+    class="sc-bczRLJ dAXPOF fade-transition-appear fade-transition-appear-active"
   >
     <div
-      class="sc-bczRLJ fQjNe"
+      class="sc-gsnTZi dhTMxg"
     />
   </div>
 </DocumentFragment>

src/components/Badge/Badge.stories.tsx

@@ -1,6 +1,6 @@
-import React from "react";
-import { StoryObj } from "@storybook/react";
 import { Title, ArgsTable, Stories } from "@storybook/addon-docs";
+import { StoryObj } from "@storybook/react";
+import React from "react";
 import Badge from "./Badge";
 
 export default {

src/components/Badge/Badge.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
-import * as Styled from "./styled";
 import { Theme } from "../../themes";
 import { useTheme } from "../../themes/useTheme";
+import * as Styled from "./styled";
 
 export type BadgeColor =
   | "primary"

src/components/Badge/__tests__/Badge.test.tsx

@@ -1,6 +1,6 @@
+import { cleanup } from "@testing-library/react";
 import * as React from "react";
 import "@testing-library/jest-dom/extend-expect";
-import { cleanup } from "@testing-library/react";
 import Badge from "..";
 import { renderWithThemeProvider } from "../../../utils/renderWithThemeProvider";
 

src/components/Button/Button.stories.tsx

@@ -1,8 +1,8 @@
-import React from "react";
-import { StoryObj } from "@storybook/react";
-import { Markdown } from "@storybook/blocks";
-import { Title, ArgsTable, Stories } from "@storybook/addon-docs";
 import { action } from "@storybook/addon-actions";
+import { Title, ArgsTable, Stories } from "@storybook/addon-docs";
+import { Markdown } from "@storybook/blocks";
+import { StoryObj } from "@storybook/react";
+import React from "react";
 import Button, { ButtonProps } from "./Button";
 
 export default {

src/components/Button/Button.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
+import { Theme, useTheme } from "../../themes";
+import { getShadow } from "../../utils/getShadow";
 import { fontSize } from "../Typography/Typography";
 import { Props as BaseButtonProps } from "./internal/BaseButton";
 import * as Styled from "./styled";
-import { Theme, useTheme } from "../../themes";
-import { getShadow } from "../../utils/getShadow";
 
 export type ButtonSize = "small" | "medium" | "large";
 export type ButtonColor = "primary" | "secondary" | "danger" | "clear";