From 342104eeabb0fce84db9cdae8ade8de8788dbe48 Mon Sep 17 00:00:00 2001 From: dwindown Date: Fri, 21 Nov 2025 13:05:04 +0700 Subject: [PATCH] feat: Initialize customer-spa project structure MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Sprint 1 - Foundation Setup: Created customer-spa/ folder structure: ``` customer-spa/ ├── src/ │ ├── pages/ # Customer pages (Shop, Cart, Checkout, Account) │ ├── components/ # Reusable components │ ├── lib/ │ │ ├── api/ # API client │ │ ├── cart/ # Cart state management │ │ ├── checkout/ # Checkout logic │ │ └── tracking/ # Analytics & pixel tracking │ ├── hooks/ # Custom React hooks │ ├── contexts/ # React contexts │ └── types/ # TypeScript types ├── public/ # Static assets ├── package.json # Dependencies ├── vite.config.ts # Vite configuration (port 5174) ├── tsconfig.json # TypeScript configuration ├── tailwind.config.js # TailwindCSS configuration ├── postcss.config.js # PostCSS configuration └── .eslintrc.cjs # ESLint configuration ``` Configuration: ✅ Vite dev server on port 5174 (admin-spa uses 5173) ✅ HTTPS with shared SSL cert ✅ TypeScript + React 18 ✅ TailwindCSS + shadcn/ui ✅ React Query for data fetching ✅ Zustand for state management ✅ React Hook Form + Zod for forms ✅ React Router for routing Dependencies Added: - Core: React 18, React DOM, React Router - UI: Radix UI components, Lucide icons - State: Zustand, TanStack Query - Forms: React Hook Form, Zod, @hookform/resolvers - Styling: TailwindCSS, class-variance-authority - Utils: clsx, tailwind-merge, sonner (toast) Next Steps: - Create main.tsx entry point - Create App.tsx with routing - Create base layout components - Setup API client - Implement cart state management Ready for Sprint 1 implementation! --- customer-spa/.eslintrc.cjs | 20 +++++++++++ customer-spa/package.json | 59 +++++++++++++++++++++++++++++++++ customer-spa/postcss.config.js | 6 ++++ customer-spa/tailwind.config.js | 25 ++++++++++++++ customer-spa/tsconfig.json | 20 +++++++++++ customer-spa/vite.config.ts | 29 ++++++++++++++++ 6 files changed, 159 insertions(+) create mode 100644 customer-spa/.eslintrc.cjs create mode 100644 customer-spa/package.json create mode 100644 customer-spa/postcss.config.js create mode 100644 customer-spa/tailwind.config.js create mode 100644 customer-spa/tsconfig.json create mode 100644 customer-spa/vite.config.ts diff --git a/customer-spa/.eslintrc.cjs b/customer-spa/.eslintrc.cjs new file mode 100644 index 0000000..9104dea --- /dev/null +++ b/customer-spa/.eslintrc.cjs @@ -0,0 +1,20 @@ +module.exports = { + root: true, + env: { browser: true, es2020: true }, + extends: [ + 'eslint:recommended', + 'plugin:@typescript-eslint/recommended', + 'plugin:react-hooks/recommended', + ], + ignorePatterns: ['dist', '.eslintrc.cjs', 'eslint.config.js'], + parser: '@typescript-eslint/parser', + plugins: ['react-refresh'], + rules: { + 'react-refresh/only-export-components': [ + 'warn', + { allowConstantExport: true }, + ], + '@typescript-eslint/no-explicit-any': 'off', + '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }], + }, +} diff --git a/customer-spa/package.json b/customer-spa/package.json new file mode 100644 index 0000000..e45a214 --- /dev/null +++ b/customer-spa/package.json @@ -0,0 +1,59 @@ +{ + "name": "woonoow-customer-spa", + "private": true, + "type": "module", + "version": "0.0.1", + "scripts": { + "dev": "vite --host woonoow.local --port 5174 --strictPort", + "build": "vite build", + "preview": "vite preview --port 5174", + "lint": "ESLINT_USE_FLAT_CONFIG=false eslint . --ext ts,tsx --report-unused-disable-directives" + }, + "dependencies": { + "@radix-ui/react-accordion": "^1.2.12", + "@radix-ui/react-alert-dialog": "^1.1.15", + "@radix-ui/react-avatar": "^1.1.10", + "@radix-ui/react-checkbox": "^1.3.3", + "@radix-ui/react-dialog": "^1.1.15", + "@radix-ui/react-dropdown-menu": "^2.1.16", + "@radix-ui/react-label": "^2.1.7", + "@radix-ui/react-popover": "^1.1.15", + "@radix-ui/react-radio-group": "^1.3.8", + "@radix-ui/react-select": "^2.2.6", + "@radix-ui/react-separator": "^1.1.7", + "@radix-ui/react-slot": "^1.2.3", + "@radix-ui/react-switch": "^1.2.6", + "@radix-ui/react-tabs": "^1.1.13", + "@tanstack/react-query": "^5.90.5", + "class-variance-authority": "^0.7.1", + "clsx": "^2.1.1", + "lucide-react": "^0.547.0", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "react-hook-form": "^7.54.2", + "react-router-dom": "^7.9.4", + "sonner": "^2.0.7", + "tailwind-merge": "^3.3.1", + "vaul": "^1.1.2", + "zod": "^3.24.1", + "zustand": "^5.0.8" + }, + "devDependencies": { + "@hookform/resolvers": "^3.10.0", + "@types/react": "^18.3.5", + "@types/react-dom": "^18.3.0", + "@typescript-eslint/eslint-plugin": "^8.46.3", + "@typescript-eslint/parser": "^8.46.3", + "@vitejs/plugin-react": "^5.1.0", + "autoprefixer": "^10.4.21", + "eslint": "^9.39.1", + "eslint-plugin-react": "^7.37.5", + "eslint-plugin-react-hooks": "^7.0.1", + "eslint-plugin-react-refresh": "^0.4.24", + "postcss": "^8.5.6", + "tailwindcss": "^3.4.13", + "tailwindcss-animate": "^1.0.7", + "typescript": "^5.6.3", + "vite": "^5.4.8" + } +} diff --git a/customer-spa/postcss.config.js b/customer-spa/postcss.config.js new file mode 100644 index 0000000..2e7af2b --- /dev/null +++ b/customer-spa/postcss.config.js @@ -0,0 +1,6 @@ +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/customer-spa/tailwind.config.js b/customer-spa/tailwind.config.js new file mode 100644 index 0000000..99d049c --- /dev/null +++ b/customer-spa/tailwind.config.js @@ -0,0 +1,25 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + darkMode: ["class"], + content: ["./src/**/*.{ts,tsx,css}", "./components/**/*.{ts,tsx,css}"], + theme: { + container: { center: true, padding: "1rem" }, + extend: { + colors: { + border: "hsl(var(--border))", + input: "hsl(var(--input))", + ring: "hsl(var(--ring))", + background: "hsl(var(--background))", + foreground: "hsl(var(--foreground))", + primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))" }, + secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))" }, + muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))" }, + accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))" }, + popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))" }, + card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))" } + }, + borderRadius: { lg: "12px", md: "10px", sm: "8px" } + } + }, + plugins: [require("tailwindcss-animate")] +}; \ No newline at end of file diff --git a/customer-spa/tsconfig.json b/customer-spa/tsconfig.json new file mode 100644 index 0000000..c2d3f21 --- /dev/null +++ b/customer-spa/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + "moduleResolution": "Bundler", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "react-jsx", + "noEmit": true, + "strict": true, + "allowJs": false, + "types": [], + "baseUrl": ".", + "paths": { "@/*": ["./src/*"] } + }, + "include": ["src"] +} \ No newline at end of file diff --git a/customer-spa/vite.config.ts b/customer-spa/vite.config.ts new file mode 100644 index 0000000..7cb2d21 --- /dev/null +++ b/customer-spa/vite.config.ts @@ -0,0 +1,29 @@ +import react from '@vitejs/plugin-react'; +import { defineConfig } from 'vite'; +import fs from 'node:fs'; +import path from 'node:path'; + +const key = fs.readFileSync(path.resolve(__dirname, '../admin-spa/.cert/woonoow.local-key.pem')); +const cert = fs.readFileSync(path.resolve(__dirname, '../admin-spa/.cert/woonoow.local-cert.pem')); + +export default defineConfig({ + plugins: [react()], + resolve: { alias: { '@': path.resolve(__dirname, './src') } }, + server: { + host: 'woonoow.local', + port: 5174, + strictPort: true, + https: { key, cert }, + cors: true, + origin: 'https://woonoow.local:5174', + hmr: { protocol: 'wss', host: 'woonoow.local', port: 5174 } + }, + build: { + outDir: 'dist', + emptyOutDir: true, + rollupOptions: { + input: { app: 'src/main.tsx' }, + output: { entryFileNames: 'app.js', assetFileNames: 'app.[ext]' } + } + } +});