Merge pull request #776 from NUTFes/intro-storybook-main

試作Stories.tsxファイルの追加

docker-compose.prod.yml

@@ -1,4 +1,3 @@
-version: "3"
 services:
   cloudflare:
     image: "cloudflare/cloudflared:latest"

docker-compose.yml

@@ -1,4 +1,3 @@
-version: "3"
 services:
   db:
     image: mysql:8.0
@@ -24,6 +23,7 @@ services:
     command: sh -c "npm install && npm run dev"
     ports:
       - "3000:3000"
+      - "6006:6006"
     stdin_open: true
     environment:
       NEXT_PUBLIC_ENDPOINT: minio

prod.view.Dockerfile

@@ -1,12 +1,12 @@
 # Build用 コンテナ
-FROM node:16.13.0 AS builder
+FROM node:20.14 AS builder
 WORKDIR /app/next-project
 COPY ./view/next-project /app/next-project
 RUN npm install
 RUN npm run build
 
-# 本番用 軽量 nodejs16
-FROM gcr.io/distroless/nodejs16-debian11:nonroot
+# 本番用 軽量 nodejs20.14
+FROM node:20.14-slim
 WORKDIR /app
 LABEL org.opencontainers.image.source="https://github.com/NUTFes/FinanSu"
 ENV NODE_ENV production

view/Dockerfile

@@ -1,5 +1,5 @@
 # ベースイメージの作成
-FROM node:16.13.0
+FROM node:20.14
 # コンテナ内で作業するディレクトリを指定
 WORKDIR /app/next-project
 COPY ./ /app

view/next-project/.eslintrc.json

@@ -4,11 +4,15 @@
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:import/errors"
+    "plugin:import/errors",
+    "plugin:storybook/recommended"
   ],
   "plugins": ["@typescript-eslint", "unused-imports", "import"],
   "parser": "@typescript-eslint/parser",
-  "env": { "node": true, "es6": true },
+  "env": {
+    "node": true,
+    "es6": true
+  },
   "parserOptions": {
     "ecmaFeatures": {
       "jsx": true

view/next-project/.storybook/main.ts

@@ -0,0 +1,22 @@
+import type { StorybookConfig } from '@storybook/nextjs';
+
+const config: StorybookConfig = {
+  stories: [
+    '../src/**/*.mdx',
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    '../src/components/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+  addons: [
+    '@storybook/addon-onboarding',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/nextjs',
+    options: {},
+  },
+  staticDirs: ['../public'],
+};
+export default config;

view/next-project/.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from '@storybook/react';
+import '../src/styles/globals.css';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;