Feature/#58 Restore the Home page implementation（Homeページの実装を戻す）

.eslintignore

@@ -1,5 +1,6 @@
 # config
 *.cjs
+tailwind.config.ts
 jest.setup.js
 
 # build

.eslintrc.cjs

@@ -20,6 +20,7 @@ const config = {
     'plugin:jest/style',
     'plugin:testing-library/react',
     'plugin:jest-dom/recommended',
+    'plugin:testing-library/react',
     'plugin:react/recommended',
     'plugin:storybook/recommended',
     'prettier',
@@ -33,7 +34,16 @@ const config = {
     sourceType: 'module',
     project: './tsconfig.json',
   },
-  plugins: ['import', 'unused-imports', 'jsx-a11y', 'tailwindcss', '@typescript-eslint', 'jest', 'jest-dom'],
+  plugins: [
+    'import',
+    'unused-imports',
+    'jsx-a11y',
+    'tailwindcss',
+    '@typescript-eslint',
+    'jest',
+    'jest-dom',
+    'testing-library',
+  ],
   rules: {
     /* eslint */
     'no-unused-vars': 'off',
@@ -109,10 +119,10 @@ const config = {
     'import/order': [
       'error',
       {
-        groups: ['builtin', 'external', 'parent', 'sibling', 'index', 'object', 'type'],
-        pathGroupsExcludedImportTypes: ['builtin'],
+        'groups': ['builtin', 'external', 'parent', 'sibling', 'index', 'object', 'type'],
+        'pathGroupsExcludedImportTypes': ['builtin'],
         'newlines-between': 'always',
-        pathGroups: [
+        'pathGroups': [
           {
             pattern: '{react,react-dom/**,react-router-dom}',
             group: 'builtin',
@@ -164,7 +174,7 @@ const config = {
             position: 'before',
           },
         ],
-        alphabetize: {
+        'alphabetize': {
           order: 'asc',
         },
       },
@@ -186,6 +196,9 @@ const config = {
       },
     ],
     'jest/require-top-level-describe': ['error'],
+    /* testing-library */
+    'testing-library/no-render-in-lifecycle': 'off',
+    'testing-library/no-node-access': 'off',
   },
 };
 

.lintstagedrc.cjs

@@ -7,5 +7,6 @@ module.exports = {
   '**/*.{js,jsx,ts,tsx}': [buildEslintCommand, 'eslint --fix'],
   '**/*.{js,jsx,ts,tsx,json}': 'prettier --write',
   '**/*.{html,jsx,tsx}': 'markuplint --fix',
+  '**/*.{css,scss,sass}': 'stylelint --fix',
   '**/*.{spec,test}.{js,jsx,ts,tsx}': 'jest -- --coverage',
 };

.markuplintrc

@@ -7,5 +7,15 @@
   },
   "specs": {
     ".[jt]sx$": "@markuplint/react-spec"
-  }
+  },
+  "rules": {
+    "ineffective-attr": false,
+    "no-hard-code-id": false,
+    "attr-duplication": false,
+    "invalid-attr": {
+       "options": {
+          "allowAttrs": ["transform", "gradientTransform"]
+        }
+     }
+  },
 }

.prettier.cjs → .prettierrc.cjs

@@ -4,14 +4,22 @@ const config = {
   printWidth: 120,
   tabWidth: 2,
   semi: true,
-  singleQuote: true,
   jsxSingleQuote: false,
+  singleQuote: true,
   bracketSameLine: true,
   trailingComma: 'es5',
   quoteProps: 'consistent',
   bracketSpacing: true,
   arrowParens: 'always',
-  plugins: [require('prettier-plugin-tailwindcss')],
+  plugins: ['prettier-plugin-tailwindcss'],
+  overrides: [
+    {
+      files: ['**/*.css', '**/*.scss', '**/*.html'],
+      options: {
+        singleQuote: false,
+      },
+    },
+  ],
 };
 
 module.exports = config;

.storybook/main.ts

@@ -8,6 +8,7 @@ const config: StorybookConfig = {
     '@storybook/addon-essentials',
     '@storybook/addon-onboarding',
     '@storybook/addon-interactions',
+    '@storybook/addon-controls',
   ],
   framework: {
     name: '@storybook/nextjs',
@@ -16,11 +17,13 @@ const config: StorybookConfig = {
   docs: {
     autodocs: 'tag',
   },
+  staticDirs: ['../public'],
   webpackFinal: async (config) => {
     config.resolve = config.resolve || {};
     config.resolve.alias = {
       ...config.resolve?.alias,
       '@': path.resolve(__dirname, '../src'),
+      '~': path.resolve(__dirname, '../public'),
     };
     return config;
   },

_templates/component/new/component.stories.tsx.ejs.t

@@ -14,6 +14,6 @@ export default meta;
 
 type Story = StoryObj<typeof <%= h.changeCase.pascal(component_name) %>>;
 
-export const Standard: Story = {
+export const Default: Story = {
   render: () => <<%= h.changeCase.pascal(component_name) %> />,
 };

_templates/component/new/component.test.tsx.ejs.t

@@ -3,6 +3,7 @@ to: <%= path %><%= h.changeCase.pascal(component_name) %>/<%= h.changeCase.pasca
 ---
 
 import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import <%= h.changeCase.pascal(component_name) %> from './<%= h.changeCase.pascal(component_name) %>';