作品に関するページの作成

.eslintrc.json

@@ -12,6 +12,7 @@
   "parserOptions": {
     "project": "./tsconfig.json"
   },
+  "ignorePatterns": ["src/mocks/**/*"],
   "plugins": [
     "react",
     "import",
@@ -35,6 +36,7 @@
     // 未使用のインポートを禁止
     "unused-imports/no-unused-imports": "error",
 
+    "@typescript-eslint/no-misused-promises": "off",
     // JSXのブール属性の値を明示的に指定する
     "react/jsx-boolean-value": "error",
 
@@ -92,10 +94,7 @@
           // pageコンポーネントにおいて、他のpageコンポーネントからのimportを禁止する
           {
             "target": "./src/components/page/**/index.tsx",
-            "from": [
-              "./src/components/page/**/index.tsx",
-              "./node_modules/@radix-ui/"
-            ]
+            "from": ["./src/components/page/**/index.tsx"]
           },
           // appディレクトリ配下においてmodel,uiのimportを禁止する
           {

.github/workflows/chromatic_deploy.yml

@@ -10,9 +10,9 @@ jobs:
     if: github.event.pull_request.user.login != 'dependabot[bot]'
     steps:
       - uses: actions/checkout@v1
-      - uses: oven-sh/setup-bun@v1
-      - name: Install dependencies
-        run: bun i --frozen-lockfile
+      - name: Setup
+        uses: ./.github/actions/bun
+
       - uses: chromaui/action@v10
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.storybook/main.ts

@@ -16,6 +16,7 @@ const config: StorybookConfig = {
   docs: {
     autodocs: 'tag',
   },
+  staticDirs: [path.resolve(__dirname, '../public')],
   webpackFinal: (config) => {
     config.resolve!.alias = {
       ...config!.resolve!.alias,

.storybook/preview.ts → .storybook/preview.tsx

@@ -1,5 +1,6 @@
 import type { Preview } from '@storybook/react';
 import '../src/app/globals.css';
+import React from 'react';
 const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
@@ -10,6 +11,7 @@ const preview: Preview = {
       },
     },
   },
+  decorators: [(Story) => <Story />],
 };
 
 export default preview;

_templates/generator/model/container/component.ejs.t

@@ -1,5 +1,5 @@
 ---
-to: "<%=  `src/components/model/${domains}/components/${name}/index.tsx` %>"
+to: "<%=  `src/domains/${domains}/components/${name}/index.tsx` %>"
 ---
 import type { FC } from 'react';
 import { Suspense } from 'react';

_templates/generator/model/container/container.ejs.t

@@ -1,5 +1,5 @@
 ---
-to: "<%= `src/components/model/${domains}/components/${name}/presentations/container.tsx` %>"
+to: "<%= `src/domains/${domains}/components/${name}/presentations/container.tsx` %>"
 ---
 import type { FC } from 'react';
 

_templates/generator/model/container/empty.ejs.t

@@ -1,5 +1,5 @@
 ---
-to: "<%= gen_files.includes('Empty') ? `src/components/model/${domains}/components/${name}/presentations/empty.tsx` : null %>"
+to: "<%= gen_files.includes('Empty') ? `src/domains/${domains}/components/${name}/presentations/empty.tsx` : null %>"
 ---
 import type { FC } from 'react';
 

_templates/generator/model/container/error.ejs.t

@@ -1,5 +1,5 @@
 ---
-to: "<%= gen_files.includes('Error') ? `src/components/model/${domains}/components/${name}/presentations/error.tsx` : null %>"
+to: "<%= gen_files.includes('Error') ? `src/domains/${domains}/components/${name}/presentations/error.tsx` : null %>"
 ---
 import type { FC } from 'react';
 

_templates/generator/model/container/hooks.ejs.t

@@ -1,5 +1,5 @@
 ---
-to: "<%= have_hooks ? `src/components/model/${domains}/components/${name}/hooks/index.ts` : null %>"
+to: "<%= have_hooks ? `src/domains/${domains}/components/${name}/hooks/index.ts` : null %>"
 ---
 import type { Dispatch, SetStateAction } from 'react';
 import { useState } from 'react';

_templates/generator/model/container/index.ejs.t

@@ -1,5 +1,5 @@
 ---
-to: "<%= `src/components/model/${domains}/components/${name}/presentations/index.ts` %>"
+to: "<%= `src/domains/${domains}/components/${name}/presentations/index.ts` %>"
 ---
 export * from "./container"
 

_templates/generator/model/container/loading.ejs.t

@@ -1,5 +1,5 @@
 ---
-to: "<%= gen_files.includes('Loading') ? `src/components/model/${domains}/components/${name}/presentations/loading.tsx` : null %>"
+to: "<%= gen_files.includes('Loading') ? `src/domains/${domains}/components/${name}/presentations/loading.tsx` : null %>"
 ---
 import type { FC } from 'react';
 

_templates/generator/model/container/main.ejs.t

@@ -1,5 +1,5 @@
 ---
-to: "<%= `src/components/model/${domains}/components/${name}/presentations/main.tsx` %>"
+to: "<%= `src/domains/${domains}/components/${name}/presentations/main.tsx` %>"
 ---
 import type { FC } from 'react';
 

_templates/generator/model/container/prompt.js

@@ -1,6 +1,6 @@
 const fs = require('fs');
 const path = require('path');
-const targetDirectory = './src/components/model';
+const targetDirectory = './src/domains';
 function getDomains(basePath) {
   return fs.readdirSync(basePath).filter((file) => {
     const filePath = path.join(basePath, file);
@@ -54,7 +54,7 @@ module.exports = {
       ])
       .then(({ name, domains, have_props, have_hooks, gen_files }) => {
         const contentToAdd = `\nexport * from './${name}';\n`;
-        const path = `./src/components/model/${domains}/components/index.ts`;
+        const path = `./src/domains/${domains}/components/index.ts`;
         fs.appendFile(path, contentToAdd, 'utf8', (err) => {
           if (err) {
             console.error('ファイルの書き込みに失敗しました:', err);

_templates/generator/model/container/stories.ejs.t

@@ -1,5 +1,5 @@
 ---
-to: src/components/model/<%= domains %>/components/<%= name %>/index.stories.tsx
+to: src/domains/<%= domains %>/components/<%= name %>/index.stories.tsx
 ---
 
 import { <%= name %>Presentation  } from './presentations';

_templates/generator/model/container/test.ejs.t

@@ -1,5 +1,5 @@
 ---
-to: src/components/model/<%= domains %>/components/<%= name %>/index.test.tsx
+to: src/domains/<%= domains %>/components/<%= name %>/index.test.tsx
 ---
 import { render, screen } from "@testing-library/react";
 

_templates/generator/model/presentation/index.ejs.t

@@ -1,5 +1,5 @@
 ---
-to: "<%= `src/components/model/${domains}/components/${name}/index.ts` %>"
+to: "<%= `src/domains/${domains}/components/${name}/index.ts` %>"
 ---
 export * from './main';
 

_templates/generator/model/presentation/main.ejs.t

@@ -1,5 +1,5 @@
 ---
-to: "<%= `src/components/model/${domains}/components/${name}/main.tsx` %>"
+to: "<%= `src/domains/${domains}/components/${name}/main.tsx` %>"
 ---
 import type { FC } from 'react';
 

_templates/generator/model/presentation/prompt.js

@@ -1,6 +1,6 @@
 const fs = require('fs');
 const path = require('path');
-const targetDirectory = './src/components/model';
+const targetDirectory = './src/domains';
 function getDomains(basePath) {
   return fs.readdirSync(basePath).filter((file) => {
     const filePath = path.join(basePath, file);
@@ -38,7 +38,7 @@ module.exports = {
       ])
       .then(({ name, domains, need_loading }) => {
         const contentToAdd = `\nexport * from './${name}';\n`;
-        const path = `./src/components/model/${domains}/components/index.ts`;
+        const path = `./src/domains/${domains}/components/index.ts`;
         fs.appendFile(path, contentToAdd, 'utf8', (err) => {
           if (err) {
             console.error('ファイルの書き込みに失敗しました:', err);

_templates/generator/model/presentation/skeleton.t

@@ -1,5 +1,5 @@
 ---
-to: "<%= need_loading ? `src/components/model/${domains}/components/${name}/loading.tsx` : null %>"
+to: "<%= need_loading ? `src/domains/${domains}/components/${name}/loading.tsx` : null %>"
 ---
 import type { FC } from 'react';
 

_templates/generator/model/presentation/stories.ejs.t

@@ -1,5 +1,5 @@
 ---
-to: src/components/model/<%= domains %>/components/<%= name %>/index.stories.tsx
+to: src/domains/<%= domains %>/components/<%= name %>/index.stories.tsx
 ---
 
 <% if (need_loading) {%>import { <%= name %>Loading } from './loading';<% } %>

_templates/generator/model/presentation/test.ejs.t

@@ -1,5 +1,5 @@
 ---
-to: src/components/model/<%= domains %>/components/<%= name %>/index.test.tsx
+to: src/domains/<%= domains %>/components/<%= name %>/index.test.tsx
 ---
 import { render, screen } from "@testing-library/react";
 

_templates/generator/page/prompt.js

@@ -1,6 +1,6 @@
 const fs = require('fs');
 const path = require('path');
-const targetDirectory = './src/components/model';
+const targetDirectory = './src/domains';
 function getDirectories(basePath) {
   return fs.readdirSync(basePath).filter((file) => {
     const filePath = path.join(basePath, file);

cspell.config.json

@@ -5,8 +5,19 @@
   // language - current active spelling language
   "language": "en",
   // words - list of words to be always considered correct
-  "words": ["aspida", "autodocs", "openapi", "testid", "Usecase", "fakepath"],
-  "ignorePaths": ["src/api/**/*"]
+  "words": [
+    "aspida",
+    "autodocs",
+    "openapi",
+    "testid",
+    "Usecase",
+    "fakepath",
+    "toybox",
+    "gltf",
+    "drei",
+    "nocheck"
+  ],
+  "ignorePaths": ["src/api/**/*", "src/mocks/**/*"]
   // flagWords - list of words to be always considered incorrect
   // This is useful for offensive words and common spelling errors.
   // For example "hte" should be "the"

next.config.js

@@ -1,4 +1,23 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {}
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: process.env['ANALYZE'] === 'true',
+});
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      { hostname: 'placehold.jp' },
+      {
+        hostname: 's3.ap-northeast-2.wasabisys.com',
+      },
+      {
+        hostname: 's3.ap-northeast-1.wasabisys.com',
+      },
+    ],
+  },
+  modularizeImports: {
+    qs: {
+      transform: 'qs/lib/{{member}}',
+    },
+  },
+};
 
-module.exports = nextConfig
+module.exports = withBundleAnalyzer(nextConfig);

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
+    "analyze": "ANALYZE=true next build",
     "start": "next start",
     "lint": "next lint",
     "test:unit": "jest --passWithNoTests",
@@ -14,7 +15,7 @@
     "new:model:p": "hygen generator model/presentation",
     "new:page": "hygen generator page",
     "prepare": "husky install",
-    "mock": "prism mock ./schema/build/openapi.yml",
+    "mock": "tsx scripts/serviceWorker.ts",
     "type": "rm -rf src/api && openapi2aspida -c ./aspida.config.js --dotenv .env.local",
     "commitmsg": "commitlint -e $GIT_PARAMS",
     "fmt": "prettier --write 'src/**/*.{js,jsx,ts,tsx,json,css,scss}'",
@@ -29,8 +30,7 @@
   },
   "engines": {
     "npm": "bun please",
-    "yarn": "bun please",
-    "pnpm": "bun please"
+    "yarn": "bun please"
   },
   "lint-staged": {
     "src/**/*.{js,jsx,ts,tsx,json,css,scss}": [
@@ -40,22 +40,43 @@
   },
   "dependencies": {
     "@aspida/fetch": "^1.14.0",
-    "@tanstack/react-query": "^5.4.3",
+    "@hookform/resolvers": "^3.3.4",
+    "@radix-ui/react-alert-dialog": "^1.0.5",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-menubar": "^1.0.4",
+    "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-separator": "^1.0.3",
+    "@react-three/drei": "^9.103.0",
+    "@react-three/fiber": "^8.16.1",
+    "cookies-next": "^4.1.1",
     "date-fns": "^2.30.0",
+    "jotai": "^2.7.2",
     "lucide-react": "^0.314.0",
     "next": "14.0.4",
     "qs": "^6.11.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-error-boundary": "^4.0.11",
     "react-full-screen": "^1.1.1",
-    "react-image-crop": "^11.0.2"
+    "react-hook-form": "^7.51.2",
+    "react-image-crop": "^11.0.2",
+    "react-markdown": "^9.0.1",
+    "react-player": "^2.15.1",
+    "react-syntax-highlighter": "^15.5.0",
+    "swr": "^2.2.5",
+    "three": "^0.163.0",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@commitlint/cli": "^18.2.0",
     "@commitlint/config-conventional": "^18.4.3",
     "@markuplint/jsx-parser": "^3.12.0",
     "@markuplint/react-spec": "^3.12.0",
+    "@mswjs/http-middleware": "^0.9.2",
+    "@next/bundle-analyzer": "^14.1.4",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
@@ -71,24 +92,28 @@
     "@storybook/nextjs": "^7.2.2",
     "@storybook/react": "^7.6.4",
     "@storybook/testing-library": "^0.2.0",
-    "@tanstack/eslint-plugin-query": "^5.0.0",
+    "@tailwindcss/typography": "^0.5.12",
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",
     "@tsconfig/strictest": "^2.0.1",
+    "@types/cors": "^2.8.17",
     "@types/date-fns": "^2.6.0",
     "@types/jest": "^29.5.7",
     "@types/node": "20.11.5",
     "@types/qs": "^6.9.10",
     "@types/react": "18.2.48",
     "@types/react-dom": "18.2.18",
+    "@types/react-syntax-highlighter": "^15.5.11",
+    "@types/three": "^0.163.0",
     "@typescript-eslint/eslint-plugin": "^6.13.1",
     "@typescript-eslint/parser": "^6.11.0",
     "aspida": "^1.14.0",
     "autoprefixer": "^10.4.16",
     "chromatic": "^10.0.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
+    "cors": "^2.8.5",
     "cspell": "^8.0.0",
     "eslint": "8.56.0",
     "eslint-config-next": "14.0.4",
@@ -98,21 +123,25 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-storybook": "^0.6.13",
     "eslint-plugin-unused-imports": "^3.0.0",
+    "express": "^4.19.2",
     "husky": "^8.0.3",
     "hygen": "^6.2.11",
     "jest": "^29.6.4",
     "jest-environment-jsdom": "^29.6.4",
     "lint-staged": "^15.0.2",
     "markuplint": "^3.15.0",
+    "msw": "latest",
     "npm-run-all": "^4.1.5",
     "openapi2aspida": "^0.23.2",
     "postcss": "^8.4.31",
     "prettier": "^3.0.1",
+    "prop-types": "^15.8.1",
     "storybook": "^7.6.4",
     "tailwind-merge": "^2.0.0",
     "tailwindcss": "^3.3.3",
     "tailwindcss-animate": "^1.0.7",
     "ts-jest": "^29.1.1",
+    "tsx": "^4.7.1",
     "typescript": "5.3.3"
   },
   "exports": {
@@ -127,5 +156,10 @@
     "npm": "10.1.0",
     "pnpm": "8.7.4",
     "yarn": "3.6.3"
+  },
+  "msw": {
+    "workerDirectory": [
+      "public"
+    ]
   }
 }