@component-hook/create-app 1.5.1 → 1.6.0

package/template-react/src/stores/middleware.ts

@@ -0,0 +1,17 @@
+import { create, type StateCreator } from 'zustand';
+import { createJSONStorage, persist, type PersistOptions } from 'zustand/middleware';
+import { STORAGE_PREFIX } from './constants';
+
+export function createPersistedStore<T, S = Partial<T>>(
+  id: string,
+  initializer: StateCreator<T>,
+  persistOptions?: Partial<PersistOptions<T, S>>,
+) {
+  return create(
+    persist<T, [], [], S>(initializer, {
+      name: `${STORAGE_PREFIX}-${id}`,
+      storage: createJSONStorage(() => localStorage),
+      ...persistOptions,
+    }),
+  );
+}

package/template-react/src/stores/modules/config.ts

@@ -0,0 +1,27 @@
+import { createPersistedStore } from '../middleware';
+
+interface ConfigState {
+  appMeta: {
+    version: string;
+    builtAt: Date;
+  };
+}
+
+const versionString = `${import.meta.env.VITE_APP_VERSION}-${import.meta.env.VITE_APP_LAST_COMMIT_HASH}`;
+
+const defaultState = {
+  appMeta: {
+    version: import.meta.env.MODE === 'development' ? `${versionString}-dev` : versionString,
+    builtAt: new Date(Number(import.meta.env.VITE_APP_BUILD_EPOCH)),
+  },
+};
+
+export const useConfigStore = createPersistedStore<ConfigState>(
+  'config',
+  () => ({
+    ...defaultState,
+  }),
+  {
+    partialize: () => ({}),
+  },
+);

package/template-react/src/styles/base.css

@@ -0,0 +1,68 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  overscroll-behavior: none none;
+  touch-action: manipulation;
+  user-select: none;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+  -moz-touch-callout: none;
+  -ms-touch-callout: none;
+  -webkit-font-smoothing: antialiased;
+  -webkit-touch-callout: none;
+  -webkit-overflow-scrolling: touch;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+
+  &:hover {
+    color: #535bf2;
+  }
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+img {
+  -webkit-touch-callout: none;
+  -webkit-user-drag: none;
+  user-select: none;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+#root {
+  max-width: 1280px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+
+  a:hover {
+    color: #747bff;
+  }
+}

package/template-react/src/styles/common/all.css

@@ -0,0 +1 @@
+@import './button.css';

package/template-react/src/styles/common/button.css

@@ -0,0 +1,26 @@
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+
+  &:hover {
+    border-color: #646cff;
+  }
+
+  &:focus,
+  &:focus-visible {
+    outline: 4px auto -webkit-focus-ring-color;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/template-react/src/styles/index.css

@@ -0,0 +1,3 @@
+@import './tailwind.css';
+@import './base.css';
+@import './common/all.css';

package/template-react/src/styles/tailwind.css

@@ -0,0 +1,14 @@
+@import 'tailwindcss';
+
+@theme {
+  --animate-logo-spin: logo-spin infinite 20s linear;
+
+  @keyframes logo-spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}

package/template-react/src/test-utils/index.tsx

@@ -0,0 +1,15 @@
+import { render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import type { RenderOptions } from '@testing-library/react/types';
+import type { ReactElement, ReactNode } from 'react';
+
+function ProvidersWrapper({ children }: { children: ReactNode }) {
+  return <MemoryRouter>{children}</MemoryRouter>;
+}
+
+export function renderComponent(
+  component: ReactElement,
+  options?: Omit<RenderOptions, 'wrapper'>,
+): ReturnType<typeof render> {
+  return render(component, { wrapper: ProvidersWrapper, ...options });
+}

package/template-react/src/vite-env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+declare module 'virtual:svg-icons-register';
+
+interface ImportMetaEnv extends Readonly<Record<string, string>> {
+  readonly VITE_APP_VERSION: string;
+  readonly VITE_APP_MOCK?: 'service-worker';
+  readonly VITE_APP_BUILD_EPOCH?: string;
+}

package/template-react/tsconfig.app.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "jsx": "react-jsx",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "moduleDetection": "force",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "allowImportingTsExtensions": true,
+
+    /* Linting */
+    "strict": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noEmit": true,
+    "verbatimModuleSyntax": true,
+    "erasableSyntaxOnly": true,
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx"],
+  "exclude": ["src/**/*.test.*", "src/test-utils"]
+}

package/template-react/tsconfig.vitest.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.app.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.vitest.tsbuildinfo",
+    "types": ["vitest/globals"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "vitest.setup.ts"],
+  "exclude": []
+}

package/template-react/vite.config.ts

@@ -0,0 +1,40 @@
+import { resolve } from 'node:path';
+import { fileURLToPath, URL } from 'node:url';
+import tailwindcss from '@tailwindcss/vite';
+import react from '@vitejs/plugin-react-swc';
+import { defineConfig } from 'vite';
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
+import './scripts/build-info';
+
+export default defineConfig({
+  base: './',
+  plugins: [
+    react(),
+    tailwindcss(),
+    createSvgIconsPlugin({
+      iconDirs: [resolve(process.cwd(), 'src/assets/svg-icons')],
+    }),
+  ],
+  esbuild: {
+    pure: ['console.log'],
+    drop: ['debugger'],
+  },
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('src', import.meta.url)),
+    },
+  },
+  build: {
+    rollupOptions: {
+      output: {
+        chunkFileNames: 'chunks/[name]-[hash].js',
+        assetFileNames: 'assets/[name].[hash].[ext]',
+        entryFileNames: 'entries/[name].[hash].js',
+        manualChunks: {
+          core: ['react', 'react-dom', 'react-i18next', 'react-router-dom', 'zustand', 'i18next'],
+          vender: ['axios'],
+        },
+      },
+    },
+  },
+});

package/template-react/vitest.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig, mergeConfig } from 'vitest/config';
+import viteConfig from './vite.config';
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      globals: true,
+      environment: 'jsdom',
+      include: ['src/**/*.test.tsx'],
+      setupFiles: ['./vitest.setup.ts'],
+      coverage: {
+        provider: 'v8',
+        include: ['!src/main.tsx', 'src/**/*.tsx', 'src/**/*.ts'],
+      },
+    },
+  }),
+);

package/template-react/vitest.setup.ts

@@ -0,0 +1,13 @@
+import { cleanup } from '@testing-library/react';
+import { mswServer } from '@/mocks/server';
+import '@testing-library/jest-dom';
+import '@/plugins/i18n';
+
+beforeAll(() => mswServer.listen());
+
+afterEach(() => {
+  cleanup();
+  mswServer.resetHandlers();
+});
+
+afterAll(() => mswServer.close());

package/template-shared/.browserslistrc

@@ -0,0 +1,10 @@
+# Click this link to view browser coverage https://browsersl.ist/#q=%3E+1.5%25%0Aios+%3E%3D+13%0Achrome+%3E%3D+60%0Anot+ie+%3C%3D+11%0Alast+2+versions%0Anot+dead
+
+# Browsers that support
+
+> 1.5%
+ios >= 13
+chrome >= 60
+not ie <= 11
+last 2 versions
+not dead

package/template-shared/.github/actions/setup-environment/action.yml

@@ -0,0 +1,21 @@
+name: Setup environment
+
+description: Install dependencies
+
+runs:
+  using: composite
+  steps:
+    - name: install pnpm
+      uses: pnpm/action-setup@v6
+      with:
+        run_install: false
+
+    - name: install Node.js
+      uses: actions/setup-node@v7
+      with:
+        node-version: 24.12.0
+        cache: pnpm
+
+    - name: install dependencies
+      shell: bash
+      run: pnpm install

package/template-shared/.github/renovate.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": ["config:recommended", "schedule:weekly", "group:allNonMajor"],
+  "labels": ["dependencies"],
+  "rangeStrategy": "bump",
+  "ignoreDeps": ["node"],
+  "packageRules": [
+    {
+      "matchDepTypes": ["peerDependencies"],
+      "enabled": false
+    }
+  ],
+  "postUpdateOptions": ["pnpmDedupe"]
+}

package/template-shared/.github/workflows/ci.yml

@@ -0,0 +1,22 @@
+name: CI Pipeline
+
+on:
+  workflow_call:
+  workflow_dispatch:
+
+jobs:
+  CI:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v7
+      - name: setup environment
+        uses: ./.github/actions/setup-environment
+
+      - name: install Playwright browsers
+        run: npx playwright install --with-deps
+
+      - name: run unit test
+        run: pnpm test:unit
+
+      - name: run e2e test
+        run: pnpm test:ci-e2e

package/template-shared/.github/workflows/deploy.yml

@@ -0,0 +1,27 @@
+name: Deploy to Production
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - 'src/**'
+      - pnpm-lock.yaml
+      - package.json
+
+jobs:
+  CI:
+    uses: ./.github/workflows/ci.yml
+
+  deploy:
+    runs-on: ubuntu-latest
+    needs: CI
+    steps:
+      - uses: actions/checkout@v7
+      # - name: setup environment
+      #   uses: './.github/actions/setup-environment'
+
+      # - name: build production
+      #   run: pnpm build:production
+
+      # - name: deploy to production
+      #   run: pnpm deploy

package/template-shared/.github/workflows/preview.yml

@@ -0,0 +1,17 @@
+name: Preview Pull Request
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  CI:
+    uses: ./.github/workflows/ci.yml
+
+  preview:
+    runs-on: ubuntu-latest
+    needs: CI
+    steps:
+      - uses: actions/checkout@v7
+      # - name: setup environment
+      #   uses: './.github/actions/setup-environment'

package/template-shared/.gitlab/setup.yml

@@ -0,0 +1,18 @@
+variables:
+  NODE_VERSION: '22'
+  CACHE_KEY: '${CI_PROJECT_PATH_SLUG}-${CI_COMMIT_REF_SLUG}'
+
+image: node:${NODE_VERSION}-alpine
+
+cache:
+  key: ${CACHE_KEY}
+  paths:
+    - .pnpm-store
+    - node_modules/
+  policy: pull-push
+
+before_script:
+  - corepack enable
+  - corepack prepare --activate
+  - pnpm config set store-dir .pnpm-store
+  - pnpm install

package/template-shared/.husky/commit-msg

@@ -0,0 +1 @@
+npx --no -- commitlint --edit ${1}

package/template-shared/.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

package/{LICENSE → template-shared/LICENSE}

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Tzuyi 
+Copyright (c)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/template-shared/_gitignore

@@ -0,0 +1,32 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+.env
+
+# Editor directories and files
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Test reports
+coverage
+/test-results/
+/playwright-report/
+/playwright/.cache/
+
+# Visualizer
+stats.html

package/template-shared/_gitlab-ci.yml

@@ -0,0 +1,22 @@
+stages:
+  - test
+  # - deploy
+
+include:
+  - local: .gitlab/setup.yml
+
+run_test:
+  stage: test
+  image: mcr.microsoft.com/playwright:focal
+  script:
+    - npx playwright install --with-deps
+    - pnpm test:unit
+    - pnpm test:ci-e2e
+  rules:
+    - if: $CI_COMMIT_BRANCH
+      changes:
+        - 'src/**'
+        - pnpm-lock.yaml
+        - package.json
+    - if: '$CI_PIPELINE_SOURCE == "merge_request_event"'
+    - when: manual

package/template-shared/commitlint.config.js

@@ -0,0 +1,3 @@
+export default {
+  extends: ['@commitlint/config-conventional'],
+};

package/template-shared/playwright.config.ts

@@ -0,0 +1,49 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e',
+  /* If gets stuck during the test, it will fail if it exceeds the timeout time. */
+  timeout: 30 * 1000,
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://localhost:5173',
+    trace: 'on-first-retry',
+  },
+  webServer: {
+    command: 'pnpm dev:mock',
+    port: 5173,
+    reuseExistingServer: !process.env.CI,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        browserName: 'chromium',
+        ...devices['Macbook Pro'],
+      },
+    },
+
+    {
+      name: 'firefox',
+      use: {
+        browserName: 'firefox',
+        ...devices['Macbook 11'],
+      },
+    },
+
+    {
+      name: 'webkit',
+      use: {
+        browserName: 'webkit',
+        ...devices['iPhone SE'],
+      },
+    },
+  ],
+});

package/template-shared/postcss.config.js

@@ -0,0 +1,15 @@
+import cssnano from 'cssnano';
+import postcssPresetEnv from 'postcss-preset-env';
+import postcssPxtorem from 'postcss-pxtorem';
+
+export default {
+  plugins: [
+    postcssPresetEnv({ stage: 3 }),
+    postcssPxtorem({
+      rootValue: 16,
+      propList: ['*'],
+      selectorBlackList: ['norem'],
+    }),
+    ...(process.env.NODE_ENV === 'production' ? [cssnano({ preset: 'default' })] : []),
+  ],
+};

package/template-shared/prettier.config.js

@@ -0,0 +1,13 @@
+/** @type {import('prettier').RequiredOptions} */
+
+export default {
+  $schema: 'https://json.schemastore.org/prettierrc',
+  singleQuote: true,
+  semi: true,
+  endOfLine: 'lf',
+  printWidth: 120,
+  proseWrap: 'preserve',
+  arrowParens: 'avoid',
+  singleAttributePerLine: true,
+  plugins: ['prettier-plugin-tailwindcss'],
+};

package/template-shared/scripts/build-info/index.ts

@@ -0,0 +1,21 @@
+import { execFileSync } from 'node:child_process';
+import os from 'node:os';
+import packageJson from '../../package.json' with { type: 'json' };
+
+const platform = os.platform();
+const git = platform === 'win32' ? String.raw`C:\Program Files\Git\bin\git.exe` : '/usr/bin/git';
+let hash = 'unknown';
+
+try {
+  hash = execFileSync(git, ['rev-parse', 'HEAD']).toString().trim().slice(0, 7);
+} catch {
+  hash = 'no-git-detected';
+}
+
+process.env.VITE_APP_VERSION = packageJson.version;
+process.env.VITE_APP_LAST_COMMIT_HASH = hash;
+process.env.VITE_APP_BUILD_EPOCH = Date.now().toString();
+
+if (process.env.MOCK) {
+  process.env.VITE_APP_MOCK = 'service-worker';
+}

package/template-shared/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.vitest.json"
+    }
+  ],
+  "files": []
+}

package/template-shared/tsconfig.node.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@tsconfig/node24/tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "types": ["node"],
+    "noEmit": true
+  },
+  "include": ["vite.config.ts", "package.json", "vitest.config.ts", "playwright.config.ts", "scripts/**/*.ts"]
+}

package/template-vue/.vscode/extensions.json

@@ -0,0 +1,10 @@
+{
+  "recommendations": [
+    "vue.volar",
+    "bradlc.vscode-tailwindcss",
+    "esbenp.prettier-vscode",
+    "csstools.postcss",
+    "cpylua.language-postcss",
+    "streetsidesoftware.code-spell-checker"
+  ]
+}