feat: refactor #101
Merged
feat: refactor #101
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Remove GraphQL dependencies and code generation - Create entity types for all models - Restructure to queries/ and mutations/ folders - Implement REST API hooks with React Query - Update providers for REST client - Update IMPLEMENTATION_STATUS.md with current progress
- Configure Storybook 8.0 with React and Vite - Add responsive breakpoints (sm, md, lg, xl, 2xl) to panda.config - Enhance Input component with variants and sizes - Create Select component with size variants - Create Icon component with lucide-react - Create Modal component with overlay and sizes - Create Toast component with variants (success, error, warning, info) - Create Skeleton component with text/circular/rectangular variants - Create Divider component with horizontal/vertical orientation - Create Avatar component with image, initials, and fallback - Update component exports and organization - Add lucide-react for icon system - Typography components (Heading, Text) already exist - Button component already enhanced - Badge component already exists - ProductCard components already exist
- Organize components into Atoms/Molecules/Organisms folders - Extract colors and spacing tokens into separate files - Import tokens in panda.config.ts for better maintainability - Update component exports to reflect new structure Atomic Design Structure: - Atoms: Icon, Input, Button, Badge, Avatar, Divider, Skeleton, Text, Heading, Layout components - Molecules: Select, PriceDisplay, Rating, Toast - Organisms: Modal, ProductCard
- Split each hook into separate folders with dedicated files - Add types.ts for input/output type definitions - Add key.ts for React Query keys - Add request.ts for API request logic - Add index.ts for hook implementation Structure: - queries/auth/useMe/ - mutations/auth/useLogin/ - mutations/auth/useRegister/ - mutations/auth/useLogout/ Benefits: - Better separation of concerns - Easier to test individual parts - More maintainable codebase - Clearer dependencies
- Add route constants in SDK (AUTH_ROUTES, PRODUCT_ROUTES, etc.) - Configure tsconfig path aliases for all packages - Update SDK auth hooks to use absolute imports - Remove relative imports (../../) in favor of @Aliases - Add comprehensive documentation (ABSOLUTE_PATHS_GUIDE.md) Path aliases configured: - SDK: @Entities, @providers, @services - Design System: @Atoms, @molecules, @organisms, @theme - Web App: @components, @app, @lib, @hooks, @utils - Server: @user, @auth, @Product, @cart, etc. Benefits: - Cleaner, more maintainable imports - Centralized API route management - Easier refactoring and file moves - Better IDE support and auto-completion
- Remove duplicate route entries (CREATE, UPDATE, DELETE)
- Use HTTP methods (GET, POST, PUT, DELETE) instead of separate constants
- Change to lowercase camelCase naming (list, detail, base)
- Consolidate routes using same URL
Before:
PRODUCT_ROUTES = {
LIST: '/api/products',
CREATE: '/api/products',
UPDATE: (id) => '/api/products/${id}',
DELETE: (id) => '/api/products/${id}',
}
After:
PRODUCT_ROUTES = {
list: '/api/products',
detail: (id) => '/api/products/${id}',
}
Updated all route constants:
- AUTH_ROUTES: login, register, logout, me
- PRODUCT_ROUTES: list, detail
- CATEGORY_ROUTES: list, detail
- CART_ROUTES: base, items, item, clear
- ORDER_ROUTES: list, detail, status, cancel, all
- REVIEW_ROUTES: list, base, detail, moderate
- Update to Next.js 14.2+ and React 19 - Add SDK and Design System dependencies - Configure Next.js with package transpilation - Create App Router structure (src/app) - Add root layout with SdkProvider - Create home page with: - Hero section - Product list (SDK integration test) - Design System components showcase - Loading states with Skeleton - Error handling - Configure absolute paths in tsconfig - Add PostCSS config for PandaCSS - Create comprehensive documentation: - FEATURES_WEB.md (complete feature roadmap) - README.md (setup and development guide) - ENV_SETUP.md (environment variables) Dependencies added: - next@14.2.0, react@19.0.0, react-dom@19.0.0 - react-hook-form, zod, @hookform/resolvers - @react-shop/sdk, @react-shop/design-system Next steps: - Install dependencies - Start backend server - Test home page with real API data
- Move from src/app to app/ (Next.js 14 convention) - Update tsconfig paths to remove src/ - Fix React.Node to React.ReactNode type - Update documentation to reflect correct structure Next.js 14 structure: apps/web/ ├── app/ # Next.js App Router (NOT src/app) ├── components/ ├── lib/ ├── hooks/ └── public/
- Ignore .next/ build output - Ignore node_modules and dependencies - Ignore environment files - Ignore TypeScript build info
- Move global.css to Design System (src/styles/global.css) - Import global.css from DS in web app layout - Add @styled-system path alias in tsconfig - Update Badge and Button components to use @styled-system imports - Define inline CVA recipes for components - Include styled-system in tsconfig - Add comprehensive PANDACSS_SETUP.md guide Changes per PandaCSS docs: - Use @styled-system/* for all PandaCSS imports - Generate styled-system via 'panda codegen' - Import global CSS with layers in app - Use CVA for component variants Next steps: 1. Run 'pnpm install' in root 2. Run 'cd packages/design-system && pnpm prepare' 3. This generates the styled-system directory 4. All components will have type-safe styling Reference: https://panda-css.com/docs/installation/nextjs
Updated all components (20+ files) to fix import errors: Atoms: - Avatar, Badge, Box, Button: Use @styled-system/jsx and @styled-system/css - Card: Inline CVA recipe with variants (elevated, outline, filled) - Container, Flex, Grid, Stack: Simple styled components - Divider: Horizontal/vertical orientation - Heading, Text: Typography with size/weight props - Icon: Lucide integration with size/color variants - Input: Form input with variants (outline, filled) and validation states - Skeleton: Loading states (text, circular, rectangular) Molecules: - Select: Custom select with chevron icon - Toast: Notification with variants (success, error, warning, info) - PriceDisplay: Currency formatting with original price strikethrough - Rating: Star rating display Organisms: - Modal: Dialog with overlay, sizes, and keyboard controls - ProductCard: Complete product card with image, price, rating, discount badge All components now: - ✅ Use @styled-system/* imports (no relative paths) - ✅ Define inline CVA recipes - ✅ Have proper TypeScript types - ✅ Support variants and sizes - ✅ Work with PandaCSS generated styles No more import errors after running 'panda codegen'!
Phase 1: Setup & Basic Components Dependencies: - ✅ Remove @pandacss/dev - ✅ Add tailwindcss, autoprefixer, postcss - ✅ Add tailwind-merge, tailwind-variants, clsx Configuration: - ✅ Create tailwind.config.ts for DS and web app - ✅ Update postcss.config.js - ✅ Update global.css with Tailwind directives - ✅ Create cn() utility function Migrated Components (7/20): - ✅ Box, Container, Flex, Grid, Stack (layout) - ✅ Button (with tailwind-variants) - ✅ Badge (with tailwind-variants) Benefits: - More beginner-friendly - Better community support - Intuitive class names - Excellent VS Code integration - Industry standard Next: Migrate remaining 13 components
Migrated all 20 components from PandaCSS to Tailwind Added tailwind-variants for component variants Updated all documentation and configs Removed PandaCSS dependencies and files
Changed all component imports from @lib/utils to ../../../lib/utils to fix module resolution in Next.js web app
Added webpack configuration to Next.js to resolve absolute paths: - @lib -> Design System lib folder - @Entities, @providers, @services -> SDK folders Updated tsconfig.json with path mappings Reverted all components to use @lib/utils imports
- Fixed layout.tsx to pass apiConfig object instead of apiUrl string - Added validation in ApiProvider for config object - Changed useMemo dependency to use full config object
- Added setRefreshToken and getStoredRefreshToken helpers - Implemented automatic token refresh on 401 errors - Added request queue to handle multiple failed requests during refresh - Updated useLogin and useRegister to save both access and refresh tokens - Integrated Poppins font from Google Fonts with weights 300-700 - Updated Tailwind config to use Poppins as default font family
- Backend is responsible for token validation - Removed client-side refresh token check - Simplified token refresh flow - Fixed CSS syntax in global.css
- Updated apps/web/FEATURES.md with detailed customer-facing features - Created apps/admin/FEATURES.md with admin dashboard features - Created apps/APPS_ARCHITECTURE.md explaining app relationships - Organized features by priority and implementation phases - Clarified that admin is a separate app, not a URL in web
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🚀 feat: Complete authentication system, absolute paths, and comprehensive documentation
📋 Summary
This PR establishes the foundational infrastructure for the React Ecommerce boilerplate, including a complete authentication system with automatic token refresh, absolute path configuration across the monorepo, Poppins font integration, and extensive documentation for both web and admin apps.
✨ Features
🔐 Authentication System
Token Management
Auto Token Refresh
/loginif refresh failsImplementation
📁 Absolute Paths Configuration
SDK Package (
@react-shop/sdk)@/to@sdk/to avoid conflicts@sdk/*,@entities/*,@providers/*,@services/*Web App
tsconfig.jsonwith absolute pathsnext.config.jswith webpack aliases@lib,@entities,@providers,@services,@sdkBenefits
🎨 Typography
Poppins Font Integration
next/font/googlefor optimal performancefont-sansandfont-headingin Tailwind configdisplay: swap--font-poppins📚 Documentation
New Documentation Files
apps/web/FEATURES.md(266 lines)apps/admin/FEATURES.md(357 lines)apps/APPS_ARCHITECTURE.md(444 lines)packages/sdk/AUTH_FLOW.md(342 lines)QUICK_START.md(269 lines)IMPLEMENTATION_SUMMARY.md(163 lines)ABSOLUTE_PATHS_GUIDE.md(updated)@sdkalias documentation🔧 Technical Changes
Modified Files
SDK (
packages/sdk/)Web App (
apps/web/)Design System (
packages/design-system/)Documentation
🎯 Key Decisions
1. Admin as Separate App
Decision: Admin dashboard is a separate Next.js app (
apps/admin), not a route in web app.Reasons:
2. Backend Token Validation
Decision: Removed client-side refresh token validation, let backend handle it.
Benefits:
3. Absolute Paths Strategy
Decision: Use
@sdk/prefix instead of@/for SDK package.Reasons:
@/alias🧪 Testing Checklist
📊 Impact
Performance
Developer Experience
Maintainability
🚀 What's Ready
📋 Next Steps (Follow-up PRs)
Phase 1: Foundation
Phase 2: Web App - Core Shopping
Phase 3: Admin App - Product Management
📝 Breaking Changes
None. This is foundational work that doesn't affect existing functionality.
📸 Screenshots
Poppins Font Applied
✅ Font loads correctly in browser with proper weights
Dev Server Running
✅
http://localhost:3001- Web app running without errors✅ All absolute imports resolved
✅ Hot reload working
👥 Review Notes
For Reviewers
Focus Areas:
packages/sdk/src/client.tstsconfig.jsonfilesAPPS_ARCHITECTURE.mdTesting:
pnpm dev@sdk/*,@entities/*should resolve✅ Checklist
📞 Questions?
packages/sdk/AUTH_FLOW.mdapps/APPS_ARCHITECTURE.mdQUICK_START.mdapps/web/FEATURES.mdapps/admin/FEATURES.mdReady to merge and start building features! 🎉