1stリリース

.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "prettier", "plugin:storybook/recommended"]
+}

.node-version

@@ -0,0 +1 @@
+18.12.1

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "printWidth": 100
+}

.storybook/main.js

@@ -0,0 +1,13 @@
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/preset-scss',
+  ],
+  framework: '@storybook/react',
+  core: {
+    builder: '@storybook/builder-webpack5',
+  },
+};

.storybook/preview.js

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

README.md

@@ -32,3 +32,17 @@ You can check out [the Next.js GitHub repository](https://github.com/vercel/next
 The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
 Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+
+## ディレクトリ構成
+
+- 参考記事
+  - SPA Component の推しディレクトリ構成について語る
+  - https://zenn.dev/yoshiko/articles/99f8047555f700
+  - https://github.com/yoshiko-pg/next-template
+  - https://zenn.dev/brachio_takumi/articles/2ab9ef9fbe4159
+
+## コンポーネント設計
+
+- 参考記事
+  - 経年劣化に耐える ReactComponent の書き方
+  - https://zenn.dev/takepepe/articles/howto-withstand-aging-react-component

jest.config.storyshots.js

@@ -0,0 +1,16 @@
+const nextJest = require('next/jest');
+
+const createJestConfig = nextJest({
+  dir: './',
+});
+
+const customJestConfig = {
+  displayName: 'storyshots',
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1', // tsconfig.jsonのcompilerOptions>pathsの定義に合わせてください
+  },
+  testEnvironment: 'jest-environment-jsdom',
+  testMatch: ['<rootDir>/jest.storyshots.ts'],
+};
+
+module.exports = createJestConfig(customJestConfig);

jest.config.storyshotsImage.js

@@ -0,0 +1,16 @@
+const nextJest = require('next/jest');
+
+const createJestConfig = nextJest({
+  dir: './',
+});
+
+const customJestConfig = {
+  displayName: 'storyshots',
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1', // tsconfig.jsonのcompilerOptions>pathsの定義に合わせる
+  },
+  testEnvironment: 'jest-environment-jsdom',
+  testMatch: ['<rootDir>/jest.storyshotsImage.ts'],
+};
+
+module.exports = createJestConfig(customJestConfig);

jest.storyshots.ts

@@ -0,0 +1,5 @@
+import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots';
+
+initStoryshots({
+  test: multiSnapshotWithOptions(),
+});

jest.storyshotsImage.ts

@@ -0,0 +1,19 @@
+import initStoryshots from '@storybook/addon-storyshots';
+import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
+import path from 'path';
+
+initStoryshots({
+  test: imageSnapshot({
+    getMatchOptions: (options) => {
+      const { kind, story } = options.context;
+
+      const dir = path.resolve(__dirname, '__image_snapshots__', kind);
+      const name = story.replaceAll(/\s/g, '');
+
+      return {
+        customSnapshotsDir: path.resolve(dir),
+        customSnapshotIdentifier: name,
+      };
+    },
+  }),
+});