Merge pull request #9 from yassun-youtube/develop-environment

[wip] 開発環境構築

.eslintrc

@@ -0,0 +1,6 @@
+{
+  "extends": ["next", "next/core-web-vitals"],
+  "rules": {
+    "@next/next/no-img-element": "off"
+  }
+}

.gitignore

@@ -1,130 +1,37 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-.pnpm-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# Snowpack dependency directory (https://snowpack.dev/)
-web_modules/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-# Optional eslint cache
-.eslintcache
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
 
-# Optional stylelint cache
-.stylelintcache
+# testing
+/coverage
 
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
+# next.js
+/.next/
+/out/
 
-# Optional REPL history
-.node_repl_history
+# production
+/build
 
-# Output of 'npm pack'
-*.tgz
+# misc
+.DS_Store
+*.pem
 
-# Yarn Integrity file
-.yarn-integrity
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
 
-# dotenv environment variable files
-.env
+# local env files
+.env.local
 .env.development.local
 .env.test.local
 .env.production.local
-.env.local
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-.parcel-cache
-
-# Next.js build output
-.next
-out
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and not Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# vuepress v2.x temp and cache directory
-.temp
-.cache
-
-# Docusaurus cache and generated files
-.docusaurus
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
 
-# Stores VSCode versions used for testing VSCode extensions
-.vscode-test
+# vercel
+.vercel
 
-# yarn v2
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.yarn/install-state.gz
-.pnp.*
+# typescript
+*.tsbuildinfo

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

.node-version

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

.prettierignore

@@ -0,0 +1,3 @@
+# Ignore artifacts:
+build
+coverage

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 110,
+  "trailingComma": "all"
+}

.storybook/main.js

@@ -0,0 +1,17 @@
+const path = require('path')
+
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
+  webpackFinal(config) {
+    delete config.resolve.alias['emotion-theming']
+    delete config.resolve.alias['@emotion/styled']
+    delete config.resolve.alias['@emotion/core']
+    config.resolve.alias['~'] = path.resolve(__dirname, '../src')
+    return config
+  },
+  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$/,
+    },
+  },
+}

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

README.md

@@ -1 +1,102 @@
-# the-hack-2022-nov-team-3
+# Next.js with TypeScript example
+
+## How to use
+
+```sh
+
+## インストール
+yarn install
+
+## ローカル開発
+yarn dev
+
+## storybookを開く
+yarn storybook
+```
+
+## コンポーネントの作り方
+
+デザインが無いので、MUI で必要なパーツを見つけるか、自作してください。デザインは各自調整してください。　　
+コンポーネントは storybook で管理しようと思います。
+
+https://storybook.js.org/
+
+### MUI のカスタム Theme を Storybook で確認できるようにする
+
+https://zenn.dev/enish/articles/ff678649ecb6d9
+
+## git 運用
+
+### github-flow
+
+https://atmarkit.itmedia.co.jp/ait/articles/1708/01/news015.html
+
+## Node.js version
+
+.node-version で管理（各自バージョン管理ツールを使用してください）
+
+## UI ライブラリ
+
+### Material UI
+
+https://mui.com/material-ui/getting-started/overview/
+
+## CSS in JS
+
+### emotion
+
+https://emotion.sh/docs/introduction
+
+## ESLint + Prettier
+
+build 時に lint が、commit 時に、prettier が走ります。  
+エディタに上記のプラグインを入れると便利です。
+
+## ディレクトリ
+
+```sh
+
+■ src/components
+
+コンポーネントを格納
+
+■ src/constant
+
+定数を格納
+
+■ src/hooks
+
+カスタムhookを格納
+
+■ src/pages/api
+
+APIを使用する場合、格納
+
+■ src/types
+
+型定義ファイルを格納
+
+■ src/utils
+
+ユーティリティー関数を格納
+
+■ src/libs
+
+ライブラリなどの処理を格納
+
+■ app/
+
+ページのファイルはこちらに格納
+
+```
+
+## .env.local
+
+ローカルに「.env.local」ファイルを作成して,以下を記入してください。　　
+key は別ファイルで管理しています。
+
+```
+MICROCMS_SERVICE_DOMAIN=aaaaaaaaa
+MICROCMS_API_KEY=XXXXXXXXXXXXXXXXXXXXXXXX
+
+```

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -0,0 +1,8 @@
+/** @type {import('next').NextConfig} */
+module.exports = {
+  reactStrictMode: true,
+  experimental: { appDir: true },
+  images: {
+    domains: ['images.microcms-assets.io', 'res.cloudinary.com'],
+  },
+}

package.json

@@ -0,0 +1,51 @@
+{
+  "name": "the-hack-2022-nov-team-3",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "post-update": "echo \"codesandbox preview only, need an update\" && yarn upgrade --latest",
+    "prepare": "husky install",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
+  },
+  "dependencies": {
+    "@emotion/cache": "^11.10.5",
+    "@emotion/react": "^11.10.5",
+    "@emotion/server": "^11.10.0",
+    "@emotion/styled": "^11.10.5",
+    "@mui/icons-material": "^5.10.16",
+    "@mui/material": "^5.10.16",
+    "@next/font": "^13.0.5",
+    "microcms-js-sdk": "^2.3.2",
+    "next": "13.0.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.5",
+    "@storybook/addon-actions": "^6.5.14",
+    "@storybook/addon-essentials": "^6.5.14",
+    "@storybook/addon-interactions": "^6.5.14",
+    "@storybook/addon-links": "^6.5.14",
+    "@storybook/builder-webpack5": "^6.5.14",
+    "@storybook/manager-webpack5": "^6.5.14",
+    "@storybook/react": "^6.5.14",
+    "@storybook/testing-library": "^0.0.13",
+    "@types/node": "18.11.10",
+    "@types/react": "^18.0.25",
+    "babel-loader": "^8.3.0",
+    "eslint": "^8.28.0",
+    "eslint-config-next": "^13.0.5",
+    "husky": "^8.0.2",
+    "lint-staged": "^13.0.4",
+    "prettier": "^2.8.0",
+    "typescript": "^4.9.3"
+  },
+  "lint-staged": {
+    "**/*": "prettier --write --ignore-unknown"
+  }
+}