@component-hook/create-app 1.4.3 → 1.5.0

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

@@ -1,49 +0,0 @@
-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

@@ -1,8 +0,0 @@
-.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.tsx

@@ -1,37 +0,0 @@
-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} motion-safe:animate-logo-spin hover:filter-[drop-shadow(0_0_2em_#61dafbaa)]`}
-          />
-        </a>
-      </div>
-
-      <HelloWorld title="Vite + React" />
-    </>
-  );
-}

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

@@ -1,15 +0,0 @@
-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' };
-
-i18n.use(initReactI18next).init({
-  lng: navigator.language,
-  fallbackLng: 'en-US',
-  resources: {
-    'zh-TW': { translation: zhTW },
-    'en-US': { translation: enUS },
-  },
-});
-
-export default i18n;

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

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

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

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

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

@@ -1,22 +0,0 @@
-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

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

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

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

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

@@ -1,17 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,68 +0,0 @@
-: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

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

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

@@ -1,26 +0,0 @@
-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

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

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

@@ -1,14 +0,0 @@
-@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/vite-env.d.ts

@@ -1,9 +0,0 @@
-/// <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

@@ -1,32 +0,0 @@
-{
-  "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,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noEmit": true,
-    "verbatimModuleSyntax": true,
-    "erasableSyntaxOnly": true,
-    "skipLibCheck": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx"],
-  "exclude": ["src/**/__tests__/*"]
-}

package/template-react/tsconfig.vitest.json

@@ -1,10 +0,0 @@
-{
-  "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

@@ -1,40 +0,0 @@
-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

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

package/template-react/vitest.setup.ts

@@ -1,13 +0,0 @@
-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

@@ -1,10 +0,0 @@
-# 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

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

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

@@ -1,14 +0,0 @@
-{
-  "$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

@@ -1,22 +0,0 @@
-name: CI Pipeline
-
-on:
-  workflow_call:
-  workflow_dispatch:
-
-jobs:
-  CI:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v6
-      - 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

@@ -1,27 +0,0 @@
-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@v6
-      # - 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

@@ -1,17 +0,0 @@
-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@v6
-      # - name: setup environment
-      #   uses: './.github/actions/setup-environment'

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

@@ -1,18 +0,0 @@
-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

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

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

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

package/template-shared/_gitignore

@@ -1,32 +0,0 @@
-# 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

@@ -1,22 +0,0 @@
-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

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