@component-hook/create-app 1.5.0 → 1.6.0

package/template-react/src/pages/home/components/hello-world/index.test.tsx

@@ -0,0 +1,45 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { HelloWorld } from '@/pages/home/components/hello-world';
+import i18n from '@/plugins/i18n';
+import { useConfigStore } from '@/stores';
+import { renderComponent } from '@/test-utils';
+
+describe('home page HelloWorld component', () => {
+  const { t } = i18n;
+
+  it('renders the correct content', () => {
+    const title = 'Hello World!';
+    const { appMeta } = useConfigStore.getState();
+
+    renderComponent(<HelloWorld title={title} />);
+    expect(screen.getByRole('heading', { name: title })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /count is 0/i })).toBeInTheDocument();
+    expect(screen.getByText(/edit/i)).toBeInTheDocument();
+    expect(screen.getByText(/src\/app\.tsx/i)).toBeInTheDocument();
+    expect(screen.getByText(/save to test hmr/i)).toBeInTheDocument();
+    expect(screen.getByText(/click on the vite and react logos to learn more/i)).toBeInTheDocument();
+    expect(screen.getByText(`${appMeta.version} - Built at: ${appMeta.builtAt.toLocaleString()}`)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: t('language') })).toBeInTheDocument();
+  });
+
+  it('count button interact', async () => {
+    renderComponent(<HelloWorld />);
+    const countButton = screen.getByRole('button', { name: /count is 0/i });
+
+    await userEvent.click(countButton);
+    expect(countButton).toHaveTextContent(/count is 1/i);
+    await userEvent.click(countButton);
+    await userEvent.click(countButton);
+    expect(countButton).toHaveTextContent(/count is 3/i);
+  });
+
+  it('locale change interact', async () => {
+    renderComponent(<HelloWorld />);
+    const localeButton = screen.getByRole('button', { name: t('language') });
+
+    expect(localeButton).toHaveTextContent('English');
+    await userEvent.click(localeButton);
+    expect(localeButton).toHaveTextContent('中文');
+  });
+});

package/template-react/src/pages/home/components/hello-world/index.tsx

@@ -0,0 +1,49 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useConfigStore } from '@/stores';
+
+interface Props {
+  title?: string;
+}
+
+export function HelloWorld({ title = '' }: Props) {
+  const [count, setCount] = useState(0);
+  const { t, i18n } = useTranslation();
+  const { appMeta } = useConfigStore();
+
+  function changeLanguage() {
+    const language = i18n.language === 'zh-TW' ? 'en-US' : 'zh-TW';
+
+    i18n.changeLanguage(language);
+  }
+
+  return (
+    <>
+      <h1>{title}</h1>
+
+      <div className="p-8">
+        <button
+          className="mb-4"
+          onClick={() => setCount(originCount => originCount + 1)}
+        >
+          count is {count}
+        </button>
+        <p>
+          Edit <code>src/App.tsx</code> and save to test HMR
+        </p>
+      </div>
+
+      <p className="text-[#888]">Click on the Vite and React logos to learn more</p>
+      <p className="mt-1 text-[#888]">
+        {appMeta.version} - Built at: {appMeta.builtAt.toLocaleString()}
+      </p>
+
+      <button
+        className="my-4"
+        onClick={() => changeLanguage()}
+      >
+        {t('language')}
+      </button>
+    </>
+  );
+}

package/template-react/src/pages/home/index.module.css

@@ -0,0 +1,8 @@
+.logo {
+  height: 96px;
+  width: 96px;
+  padding: 24px;
+  will-change: filter;
+  transition: filter 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  margin: 0 auto;
+}

package/template-react/src/pages/home/index.test.tsx

@@ -0,0 +1,19 @@
+import { screen } from '@testing-library/react';
+import { Home } from '@/pages/home';
+import { renderComponent } from '@/test-utils';
+
+describe('home page', () => {
+  it('renders the correct content', () => {
+    renderComponent(<Home />);
+    const viteLink = screen.getByRole('link', { name: /vite logo/i });
+    const reactLink = screen.getByLabelText(/react link/i);
+
+    expect(viteLink).toHaveAttribute('href', 'https://vite.dev');
+    expect(viteLink).toHaveAttribute('rel', 'noreferrer');
+    expect(viteLink).toHaveAttribute('target', '_blank');
+
+    expect(reactLink).toHaveAttribute('href', 'https://react.dev');
+    expect(reactLink).toHaveAttribute('rel', 'noreferrer');
+    expect(reactLink).toHaveAttribute('target', '_blank');
+  });
+});

package/template-react/src/pages/home/index.tsx

@@ -0,0 +1,37 @@
+import { SvgIcon } from '@/components/common';
+import { HelloWorld } from './components/hello-world';
+import styles from './index.module.css';
+import viteLogo from '/vite.svg';
+
+export function Home() {
+  return (
+    <>
+      <div>
+        <a
+          href="https://vite.dev"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <img
+            src={viteLogo}
+            className={`${styles.logo} hover:filter-[drop-shadow(0_0_2em_#646cffaa)]`}
+            alt="Vite logo"
+          />
+        </a>
+        <a
+          href="https://react.dev"
+          target="_blank"
+          rel="noreferrer"
+          aria-label="React link"
+        >
+          <SvgIcon
+            name="react"
+            className={`${styles.logo} hover:filter-[drop-shadow(0_0_2em_#61dafbaa)] motion-safe:animate-logo-spin`}
+          />
+        </a>
+      </div>
+
+      <HelloWorld title="Vite + React" />
+    </>
+  );
+}

package/template-react/src/plugins/i18n/index.ts

@@ -0,0 +1,19 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import enUS from './locales/en-US.json' with { type: 'json' };
+import zhTW from './locales/zh-TW.json' with { type: 'json' };
+
+function setupI18n() {
+  i18n.use(initReactI18next).init({
+    lng: navigator.language,
+    fallbackLng: 'en-US',
+    resources: {
+      'zh-TW': { translation: zhTW },
+      'en-US': { translation: enUS },
+    },
+  });
+
+  return i18n;
+}
+
+export default setupI18n();

package/template-react/src/plugins/i18n/locales/en-US.json

@@ -0,0 +1,3 @@
+{
+  "language": "English"
+}

package/template-react/src/plugins/i18n/locales/zh-TW.json

@@ -0,0 +1,3 @@
+{
+  "language": "中文"
+}

package/template-react/src/router/index.tsx

@@ -0,0 +1,22 @@
+import { createBrowserRouter, Navigate } from 'react-router-dom';
+import { Home } from '@/pages/home';
+
+export const routes = [
+  {
+    path: '*',
+    element: (
+      <Navigate
+        to="/"
+        replace
+      />
+    ),
+  },
+  {
+    path: '/',
+    element: <Home />,
+  },
+];
+
+const router = createBrowserRouter(routes);
+
+export default router;

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

@@ -0,0 +1 @@
+export const STORAGE_PREFIX = 'react-starter';

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

@@ -0,0 +1 @@
+export { useConfigStore } from './modules/config';

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