プロジェクトを作るときに考えたいこと

pnpm init --init-type module

tree .
.
├── apps
│   ├── desktop
│   └── web
└── packages
    ├── ui
    └── utils

7 directories, 0 files

create next-app@latest web
✔ Would you like to use the recommended Next.js defaults? › No, customize settings
✔ Would you like to use TypeScript? … No / Yes
✔ Which linter would you like to use? › Biome
✔ Would you like to use React Compiler? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes
✔ What import alias would you like configured? … @/*

pnpm create tauri-app
✔ Project name · desktop
✔ Identifier · dev.usbharu.test
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, deno, bun)
✔ Choose your package manager · pnpm
✔ Choose your UI template · React - (https://react.dev/)
✔ Choose your UI flavor · TypeScript

pnpm add -D typescript
npx tsc --init

"typecheck": "tsc --noEmit"

pnpm add --workspace @test/ui

pnpm add -w -D @biomejs/biome
pnpm exec biome init

{
  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "useIgnoreFile": true
  },
  "files": {
    "ignoreUnknown": true,
    "includes": ["**", "!**/*.d.ts"]
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "a11y": {
        "noStaticElementInteractions": "off"
      },
      "nursery": {
        "useSortedClasses": {
          "fix": "safe",
          "level": "error",
          "options": {
            "functions": ["twMerge", "twJoin", "tv", "cn"]
          }
        }
      }
    }
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "double"
    }
  },
  "css": {
    "parser": {
      "cssModules": true,
      "allowWrongLineComments": true,
      "tailwindDirectives": true
    },
    "formatter": {
      "enabled": false
    },
    "linter": {
      "enabled": false
    }
  },
  "assist": {
    "enabled": true,
    "actions": {
      "source": {
        "organizeImports": "on"
      }
    }
  }
}

"scripts": {
    "lint": "biome check",
    "lint:fix" : "biome check --write --unsafe"
  },

pnpm add -D vitest

  "scripts": {
    "test": "vitest"
  },

pnpm create storybook@latest

pnpm add -D @storycap-testrun/browser

import { page } from "vitest/browser";
import { screenshot } from "@storycap-testrun/browser";


afterEach(async (context) => {
	await screenshot(page, context);
});

import storycap from "@storycap-testrun/browser/vitest-plugin";

storycap({
  output: {
    file: (context) => `${context.id}.png`,
  },
}),

git init .

pnpm add -D -w lefthook

pre-commit:
  commands:
    check:
      glob: "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}"
      run: npx @biomejs/biome check --write --no-errors-on-unmatched --files-ignore-unknown=true --colors=off {staged_files}
      stage_fixed: true

pre-push:
  commands:
    check:
      glob: "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}"
      run: npx @biomejs/biome check --no-errors-on-unmatched --files-ignore-unknown=true --colors=off {push_files}

pnpm lefthook install

{
  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
  "extends": ["config:recommended"],
  "packageRules": [
    { "matchUpdateTypes": ["minor", "patch"], "automerge": true }
  ],
  "platformAutomerge": true,
  "rebaseWhen": "conflicted",
  "lockFileMaintenance": {
    "enabled": true,
    "recreateWhen": "always",
    "rebaseStalePrs": true,
    "branchTopic": "lock-file-maintenance",
    "commitMessageAction": "Lock file maintenance",
    "commitMessageTopic": null,
    "commitMessageExtra": null,
    "schedule": ["before 4am on monday"],
    "groupName": null,
    "prBodyDefinitions": {
      "Change": "All locks refreshed"
    }
  }
}

"test:all": "pnpm -r --reporter-hide-prefix test"

name: Visual Regression Test
on:
  push:
    branches: [develop, main]
  pull_request:
    branches: [develop, main]

permissions:
  contents: write
  actions: write
  pull-requests: write

jobs:
  test:
    timeout-minutes: 10
    runs-on: ubuntu-latest
    strategy:
      fail-fast: false
      matrix:
        shard: [1/3, 2/3, 3/3]
    steps:
      - uses: actions/checkout@v6

      - uses: pnpm/action-setup@v4

      - uses: actions/setup-node@v6
        with:
          node-version: 22
          cache: "pnpm"

      - name: Install dependencies
        run: pnpm install

      - name: Cache Playwright binaries
        uses: actions/cache@v5
        id: playwright-cache
        with:
          path: ~/.cache/ms-playwright
          key: ${{ runner.os }}-playwright-${{ hashFiles('**/pnpm-lock.yaml') }}

      - name: Install Playwright Browsers
        if: steps.playwright-cache.outputs.cache-hit != 'true'
        run: pnpm -F @travel-scheduler/ui exec playwright install chromium

      - name: Install Playwright system dependencies
        run: pnpm -F @travel-scheduler/ui exec playwright install-deps chromium

      - name: Run storycap tests (shard ${{ matrix.shard }})
        run: pnpm -F @travel-scheduler/ui exec vitest run --project=storybook --shard=${{ matrix.shard }}

      - name: Upload screenshots
        uses: actions/upload-artifact@v6
        if: always()
        with:
          name: screenshots-${{ strategy.job-index }}
          path: packages/ui/__screenshots__
          retention-days: 1

  compare:
    needs: test
    if: always()
    timeout-minutes: 5
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v6

      - name: Download all screenshot artifacts
        uses: actions/download-artifact@v7
        with:
          pattern: screenshots-*
          path: downloaded-screenshots

      - name: Merge screenshots
        run: |
          mkdir -p packages/ui/__screenshots__
          for dir in downloaded-screenshots/screenshots-*; do
            if [ -d "$dir" ]; then
              cp -r "$dir"/* packages/ui/__screenshots__/ 2>/dev/null || true
            fi
          done
          echo "Merged screenshots:"
          ls -la packages/ui/__screenshots__/

      - name: Upload merged screenshots
        uses: actions/upload-artifact@v6
        with:
          name: storycap-report
          path: packages/ui/__screenshots__
          retention-days: 30

      - name: Run visual regression comparison
        uses: reg-viz/reg-actions@v3
        with:
          github-token: "${{ secrets.GITHUB_TOKEN }}"
          image-directory-path: "./packages/ui/__screenshots__"

pnpm add -wD @changesets/cli

npx changesets init

npx changesets

npx changesets version

name: Release

on:
  push:
    branches:
      - master

concurrency: ${{ github.workflow }}-${{ github.ref }}

jobs:
  release:
    name: Release
    permissions:
      pull-requests: write
      contents: write
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@v3
      - uses: pnpm/action-setup@v4
        with:
          run_install: false
      - name: Setup Node.js 20
        uses: actions/setup-node@v3
        with:
          node-version: 22

      - name: Install Dependencies
        run: pnpm install

      - name: Create Release Pull Request
        uses: changesets/action@v1
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}