saku-1101 / teamenver Goto Github PK

jasonkuhrt/graphql-request#77 (comment)
https://hasura.io/learn/graphql/nextjs-fullstack-serverless/apollo-client/

https://github.com/topics/css-framework
https://github.com/topics/ui-framework

🙆‍♀️受け入れ条件

• CI workflowを二つとも通すこと

📝設計メモ

supabaseUrlが認識されない

調べたこと：storybookではbuildファイルに環境変数が含まれてしまうのを防ぐため、STORYBOOK_プレフィクスから始まる環境変数以外はビルドから除外される仕様？？？
https://storybook.js.org/docs/7.4/react/configure/environment-variables

• idea1: そもそもstory自体を消してしまうor除外する
• idea2: mswでモックしたものを返す

🚨注意事項

PR

#98

基本的にConfiguringに沿う形で
以下詳細

• tsconfig.json
  ルートディレクトリから直接インポートできるようにbaseUrlを設定．
  後続のpathsの設定もbaseUrlの相対パスで認識されるようになる
  パスエイリアスの設定によりStorybookでは追加のwebpack設定が必要

 "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@/api/*": ["src/app/api*"],
      "@/components/*": ["src/app/components/*"]
    }

• tsconfig/bases TSの型チェックを堅く（硬すぎるので入れない）
  ⭐️ tsconfig-cheat-sheet
  https://zenn.dev/yuta_ura/articles/introduce-tsconfig-bases
• eslint
  プロジェクト作成したらeslint, eslint-config-nextはデフォで入ってる．next lintで基本的にOK
  さらに，拡張のnext/core-web-vitalsが有効化される．これは，extends[0]のeslint-config-nextつまり/eslint-config-next/index.jsを踏襲したもの＋extends[1]のplugin:@next/next/core-web-vitalsで構成されている．nextに必要な規約は基本的に網羅されているので問題ない(はず．コンパイルエラー出てほしいとこで出てくれなかったら都度プラグインを足す)

eslint-config-prettier
eslint-plugin-import：importの秩序を保つ(eslint-plugin-nextに元からある．自分でルールを設定)
eslint-plugin-unused-imports：使ってないインポートを自動削除(@typescript-eslint/no-unused-varsとバッティングするので←をoffに)
.lintstagedrc.js: nextのlint設定＆.eslintignore内のファイルをリント対象外とする
https://qiita.com/mu-suke08/items/be6a6d37f443b73cfd58

設定例 .eslintrc.json

• prettier
  prettier-plugin-tailwindcss：classの自動並び替え

prettierrc.json (私はvscodeプラグインの読み込みをjson拡張子にしてるからこう)

{
  "plugins": ["prettier-plugin-tailwindcss"],
  "semi": false,
  "singleQuote": true,
  "printWidth": 90,
  "tabWidth": 2,
  "trailingComma": "all",
  "jsxSingleQuote": true
}

• markuplint(https://zenn.dev/chot/articles/bcc178c481a9c2)
  アクセシビリティに対応したHTMLマークアップを矯正
• lint-staged, husky, commitlint
  出力の仕方がいいので結局husky
  pre-commit: lint-staged(lint, format)
  pre-push: test, build
  くらい
  next.jsでlint-staged使う時
  commitメッセージsyntaxを矯正する
• renovate
  ライブラリの最新状態を監視してプルリクを出してくれる．
  包括範囲がrenovate>>>dependabotだったので，将来的なことを考えてrenovateを採用した方が良さそうだった．
  アクティベートはGithub Appあるのでそれで対応．
  automergeするので最初のプルリクはそのままマージせずにrenovate.jsonを以下などに修正する．

{
  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
  "extends": [
    "config:base"
  ],
  "ignorePresets": [":prHourlyLimit2"],
  "timezone": "Asia/Tokyo",
  "dependencyDashboard": false,
  "automerge": true,
  "branchConcurrentLimit": 0
}

• .vscode
  参考
  extensions.json

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "streetsidesoftware.code-spell-checker",
    "bradlc.vscode-tailwindcss"
  ]
}

settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.quickSuggestions": {
    "strings": true
  },
  "files.eol": "\n",
  "typescript.updateImportsOnFileMove.enabled": "always"
}

• hygen: テンプレート生成(react component, storybook component with play function, styled-component)
• Storybook
• volta: nodeバージョン管理/project only works when all team members installed volta(Voltaを持っていない場合でも, package.json内のvoltaセクションは無視されるため，エラーは発生しません)
• .npmrcengine-strict = trueにして指定されたバージョンでnpm installさせる
• devモードの時だけturboでビルドするようにすると早くて良い
• Branch protection rule
• project structure
• CI

🙆‍♀️受け入れ条件

• メンバーでないチームにチームを共有できる
• QRコードを利用している
  -> デスクトップを想定しているのでQRよりリンクの方が良い

📝設計メモ

• 現時点では手動で直にDBにメンバーを追加することでしか既存のチームにJoinできない
• QR生成リンク生成
• 共有されたQRリンクを読むとmemberに追加されてチームボードにリダイレクトされる

🚨注意事項

PR

#107
#108

🙆‍♀️受け入れ条件

• エラーが起こった時にステータスとメッセージ・対処方法が示されたページが出る

📝設計メモ

🚨注意事項

🙆‍♀️受け入れ条件

• ユーザ名が更新できる
• メールアドレスが更新できる
• sns系が更新できる
• アバター画像が更新できる
• 更新時にトーストを表示できる

📝設計メモ

🚨注意事項

PR

テーブルレベルのパーミッション

• 全てのユーザは自分のチームルームのみ閲覧できる．編集はできない．
• 全てのユーザは自分のチームのパブリックなボードを編集できない．閲覧のみ．
• 全てのユーザは自分の全てのボードを編集・閲覧できる
• 全てのユーザは自分以外のcommentsを編集できない．閲覧のみ．
• 全てのユーザは自分以外のagreementsを編集できない．閲覧のみ．
• 全てのユーザは自分以外のlikesを編集できない．閲覧のみ．
• リーダーはチームに一人存在する（チームルームを作成したひとがリーダーとなる）
• リーダーはteam_board_detailsを閲覧・編集できる．以外のユーザは閲覧のみ．
• リーダーはproject_detailsを閲覧・編集できる．以外のユーザは閲覧のみ．

フィールドレベルのパーミッション

• 全てのテーブルにおいてid系・created_at, updated_atは手動挿入・編集可能条件から除外しておく

• public/privateの設定
• 他の人のボードはコメント以外編集できない
• 保存されているフローの復元

今回はUIコンポーネント・BFFロジックの機能テスト，UIコンポーネントの非機能テスト・VRTを単体・結合テストの範囲で行う．
また，テストをCIとして組み込み，継続的にコード品質を保持する．

• インタラクションテスト

  • Storybook : @storybook/addon-interactions（play() 関数によるインタラクションを Storybook 上のタブで確認するためのアドオン） @storybook/jest（テストランナーjest） @storybook/testing-library （インタラクションテストは内部でtesting-libraryを使用しているので，似た記述でかける．文法はここを参照する）@storybook/test-runner（Storybook 上のストーリーをテストできるテストランナー） jest（@storybook/test-runner を動かすために必要）

• ロジックテスト

  • jest

• CI: Github Actions

  • Storybook test runnerでインタラクションテスト・アクセシビリティテスト
  • Chromatic でVRT

フロントエンドテストを導入するモチベーション

一つの機能を実現するために必要なモジュール（Webアプリを作るものたち）

1. ライブラリが提供する関数
2. ロジックを担う関数
3. UIを表現する関数
4. WebAPIクライアント
5. APIサーバ
6. DBサーバ

テスト範囲（どんなモジュールをテストするのか？）

1. 静的解析：TS, ESLint．コーディング規約に沿ったコードベースになっているか．ライブラリをインストールしているなら，そのライブラリ向けの推奨設定も導入することで，正しい使用ができたり，将来非推奨になるAPIに気付けたりなどする．
2. 単体テスト：上記の中から一つのモジュールに対して実行するテスト．フロントエンドの主な開発対象である「UIコンポーネント」や一つの機能を提供する関数など．
3. 結合テスト：複数のモジュールを繋げて実現されるテスト．テスティングトロフィーで最も厚い部分．
4. E2Eテスト：全てのモジュールを通し，アプリケーション全体の動作を本番に近い状態でテスト．ヘッドレスブラウザ+UIオートメーションで行われる．

テストタイプ（それぞれの範囲でどのようなテストをしていくか？）

1. 機能テスト：インタラクションテストなど．Webフロントの開発対象機能の大部分がUIコンポーネントの操作（インタラクション）であるため，インタラクションをテストする==Webフロントの開発対象の機能をテストする”機能テスト”となる．Jest, Vitest + Testing Library, Storybookなど
   https://storybook.js.org/addons/@storybook/addon-interactions
   https://www.npmjs.com/package/@storybook/jest
   https://www.npmjs.com/package/@storybook/testing-library
   https://storybook.js.org/addons/@storybook/test-runner

2. 非機能テスト：a11yテストなど．Storybook

3. リグレッションテスト：ビジュアルリグレッションテストなど．特定時点からの差分を検出し，想定外の不具合が発生していないかを検証する．フロントは見た目における変更が大部分を占めるのでvrtとなることが多い．reg-suit, Chromaticなど

そしてそれぞれのテスト目的にあったツールがある

テストの必要性

• 認証認可などバグが含まれては困る実装を含むBFF開発をする機会が増えてきたため
• リファクタリングが怖く無くなるから．テストコードを日常的に書く習慣がつくと，リファクタリングを行なった際は逐一テストを実行して既存実装が壊れていないかを確認できる．テストコードがあるという安心感により，積極的なリファクタリングが推し進められ，健全なコードベースが維持できる
• 本当にマージしていい変更か？を素早く判断できる．「テスト通ってればマージOK」などの指標を設けられる
• 適切な機能分割・より良い実装が促進される．テストコードが書きにくい＝テスト対象に処理を詰め込み過ぎている可能性がある．単一責任の法則(SOLID 1)を維持しているコードを担保しやすくなる．（一方でモジュール同士の依存関係が発生し，依存先の変更によるリグレッションも起きやすくはなる．．．）
• テストコードを見ただけで「どのような機能を提供しているのか」「どのような振る舞いをするのか」がわかる
• テストコード＋仕様を見て実装をチェックできればレビューもしやすい

以上の理由から，テストを導入する

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Other Branches

These updates are pending. To force PRs open, click the checkbox below.

• fix(deps): update dependency @auth0/nextjs-auth0 to v3.0.1

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

• navigation
  • team board tab
  • individual board tab
  • add board function
  • project specification
  • share team
  • team member list
  • avatar
    • profile
    • setting(dark mode/light mode?)
    • new team
    • log out

👇with navigation

• profile
• boards
  • comment function
  • selection pane
• project specification

🙆‍♀️受け入れ条件

• シェアリンクボタンのcopyを押した時にリンクがクリップボードにコピーされる

📝設計メモ

https://x.com/d151005/status/1719623564645789869?s=20
https://github.com/nkbt/react-copy-to-clipboard
https://www.npmjs.com/package/copy-to-clipboard

🚨注意事項

🙆‍♀️受け入れ条件

• ノードを削除がDBに反映され、リロード後に削除後の状態が反映されるようにする

📝設計メモ

• ノードを削除したらDBのそのcolumnがnullになるようにする

🚨注意事項

• deps checkの速度が遅すぎてvercelで504errorが出る

受け入れ条件

• deps checkしてリクエストを処理するまでの時間を10秒以内に抑えること
• vercelで504が出ないこと

🙆‍♀️受け入れ条件

• それぞれのライブラリをwebcontainerのスクリプトベースで実行できる

📝設計メモ

• DB情報をフェッチ
• ↑を元にwebcontainer side fileで実行する内容を条件分岐で変更

🚨注意事項

• webcontainer side fileの書き換えはランタイム上でできないため入力された情報を元に条件分岐で実行するスクリプトを変更するという感じになる

PR

#99
#100

フレームワークからnode pkmでインストールできるのを絞る (すべてのフレームワークに対してというのが厳しいならnext特化(他は最低限だけ)という形にする？)
→app routerの選択など
→レンダリング方式の選択など
→選択したFWのUIライブラリをフェッチするAPI（依存のチェック）
→選択したFWのCSSライブラリをフェッチするAPI OR tailwindはインストールしますか？的な簡易なもの（依存のチェック）
→選択したFWのリンタやフォーマッタをフェッチする（依存のチェック）
→最適な設定をできるように．．．どうしよう（できるならこれの設定もUIベースでしたい）
→tsの設定（パスのみ？）
→lint-staged, husky
→hygen
→vscode拡張機能・設定
→nodeバージョン管理

https://github.com/npm/registry/blob/master/docs/REGISTRY-API.md

https://www.edoardoscibona.com/exploring-the-npm-registry-api

🙆‍♀️受け入れ条件

• チームボードはadminしか編集できない
• それぞれのボードはそれぞれのユーザしか編集できない
• それぞれのボードには誰でもコメントできる
• 自分の承認ボタンしか押せない

📝設計メモ

🚨注意事項

🙆‍♀️受け入れ条件

• Requirement 1
• Requirement 2

📝設計メモ

https://resend.com/overview

🚨注意事項

🙆‍♀️受け入れ条件

• プロジェクトに必要な仕様がまとまったページがタブから開ける
• プロジェクトの概要
• Github Repository
• デザインシステム
• その他

📝設計メモ

🚨注意事項

• プロジェクトの概要はこっちで決め打ちにしないようにする

PR

• serverless functionsと接続

on vercel

• フレームワーク・ライブラリフェッチでサイドバーノード変更
• サイドバーから選択したノードを検知. グラフの先端の要素を検知．１ノード選択したらdisabledまたは即ローディング開始
• 検知されたノードに基づいてライブラリを取得
• インストールコマンドをDBに保存
• 繰り返す

セーブ機能：https://reactflow.dev/docs/examples/interaction/save-and-restore/
接続できるノード数の制限：https://reactflow.dev/docs/examples/nodes/connection-limit/
一つのノードを消したらその子ノードも全部消える：done

• pandacss
• react flow

受け入れ条件

• ログインユーザ以外のボードのflowを編集することができない
• 他のユーザのボードに対するコメントはできる
• 公開非公開機能を閉じる

設計メモ

ボードは常に公開にしておき、他の人が見ることができる状態にすることで正しい方向性をもって編集を進められるようにするという意図。
「オープンな環境での開発」というプロダクトの理念とも沿っているので採用

注意事項

🙆‍♀️受け入れ条件

• Figma通りかそれに近い見た目になること！
• View Transition APIなどを用いてアニメーションを入れる
• 不要なコードも削除していく

📝設計メモ

🚨注意事項

serverless functions上に作成すれば良い

🙆‍♀️受け入れ条件

• ページの読み込み時にローディングが出るようになっている
• コンポーネントの読み込み時にローディングが出るようになっている

📝設計メモ

🚨注意事項

🙆‍♀️受け入れ条件

• チームボードに承認スタンプを押せるようになる
• メンバー全員の承認を確認したら実行ボタンを押せるようになる
• Flowと同期のとれたライブラリのpaneを作成する
• ライブラリpaneから値の変更もできる

📝設計メモ

• チームボード情報を一旦zustandに詰める
• flowpage(zustand context)> flow + flow paneという形にしてflowとflow paneで状態を共有できる様にする
• swrのauto revalidationを用いてデータの変更があったら自動的に再fetchする

🚨注意事項

• 自分の承認ボタンしか押せない

PR

• Web containerを使えばいけそう
  https://webcontainers.io/guides/introduction