@adlas/create-app 1.0.44 → 1.0.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adlas/create-app",
-  "version": "1.0.44",
+  "version": "1.0.45",
   "description": "Adlas project initializer with Figma and Swagger integration",
   "type": "module",
   "main": "./dist/cli.js",

package/templates/docs/FIGMA_TO_CODE_GUIDE.md

@@ -6,11 +6,52 @@ This document provides comprehensive guidelines for converting Figma designs to
 
 ## 🎯 Core Principles
 
-1. **Use ONLY existing components** - Never create custom implementations when project components exist
-2. **Follow project structure** - Place files in correct locations as defined below
-3. **Match coding patterns** - Use the same patterns found in existing code
-4. **Maintain consistency** - Follow naming conventions and code style
-5. **Type safety first** - Use TypeScript strictly, no `any` types
+1. **Use HeroUI components first** - Always prefer HeroUI components. Only use Tailwind CSS for custom styling when HeroUI doesn't provide the component
+2. **Use ONLY existing components** - Never create custom implementations when project components exist
+3. **i18n for ALL text** - ALL labels, placeholders, titles, error messages MUST use translation keys
+4. **Navigation from config** - NEVER hardcode URLs. Always use `NAVIGATION_URLS` from config
+5. **HeroUI icons only** - Use icons from HeroUI Figma Kit: https://www.figma.com/design/kFGcjHsNKZx7zh2NxEJXYt/HeroUI-Figma-Kit--Community---Community-?node-id=10-1849
+6. **Follow project structure** - Place files in correct locations as defined below
+7. **Match coding patterns** - Use the same patterns found in existing code
+8. **Type safety first** - Use TypeScript strictly, no `any` types
+
+---
+
+## 🎨 Component Priority & Usage Strategy
+
+### 1. Check HeroUI First
+Before creating ANY component, check if HeroUI provides it:
+- **HeroUI Documentation**: https://heroui.com/docs/components
+- **HeroUI Figma Kit**: https://www.figma.com/design/kFGcjHsNKZx7zh2NxEJXYt/HeroUI-Figma-Kit--Community---Community-
+
+### 2. Component Selection Flow
+```
+1. Does HeroUI have this component?
+   → YES: Use HeroUI component (via @/components/ui wrapper if exists)
+   → NO: Go to step 2
+
+2. Does project have wrapper in src/components/ui/?
+   → YES: Use the wrapper
+   → NO: Go to step 3
+
+3. Build with Tailwind CSS utilities
+   → Use HeroUI theme colors and patterns
+   → Follow mobile-first responsive design
+```
+
+### 3. Example Decision Tree
+```tsx
+// Need a Button?
+import { Button } from '@/components/ui';  // ✅ Use HeroUI Button wrapper
+
+// Need an Input?
+import { Input } from '@/components/ui';   // ✅ Use HeroUI Input wrapper
+
+// Need a Card?
+// HeroUI has Card, but check if wrapper exists in project
+// If not, use Tailwind utilities with HeroUI colors:
+<div className="rounded-lg bg-white p-6 shadow-md">  // ✅ Custom with Tailwind
+```
 
 ---
 
@@ -172,18 +213,23 @@ import { Modal, Chip, Breadcrumbs, Tabs, Icon } from '@/components/ui';
 ```
 
 ### Icons
+
+**IMPORTANT**: ALL icons MUST come from HeroUI Figma Kit
+- **Figma Source**: https://www.figma.com/design/kFGcjHsNKZx7zh2NxEJXYt/HeroUI-Figma-Kit--Community---Community-?node-id=10-1849
+- **Available in project**: ChevronDown, ChevronRight, Close, Eye, EyeSlash
+
 ```tsx
 import { ChevronDownIcon, ChevronRightIcon, CloseIcon, EyeIcon, EyeSlashIcon } from '@/components/icons';
 
 <ChevronDownIcon className="h-4 w-4" />
 ```
 
-**For other icons**: Use `lucide-react` package:
-```tsx
-import { Search, Menu, User } from 'lucide-react';
+**For icons not yet in project**:
+1. Find the icon in HeroUI Figma Kit
+2. Create a new icon component in `src/components/icons/` following the existing pattern
+3. Export it from `src/components/icons/index.ts`
 
-<Search className="h-5 w-5" />
-```
+**DO NOT use Lucide, Font Awesome, or other icon libraries**
 
 ---
 
@@ -315,30 +361,85 @@ export default function LoginForm() {
 
 ## 🌐 Internationalization (i18n)
 
-### Navigation
+**CRITICAL**: ALL text content MUST use i18n translation keys
+
+### Navigation with i18n
 ```tsx
 import { Link } from '@/libs/I18nNavigation';
+import { NAVIGATION_URLS } from '@/config/navigationUrls';
+
+// ✅ CORRECT - Using NAVIGATION_URLS
+<Link href={NAVIGATION_URLS.ABOUT}>About</Link>
 
+// ❌ WRONG - Hardcoded URL
 <Link href="/about">About</Link>
 ```
 
-### Translations
+### Translations for ALL text
 ```tsx
 import { useTranslations } from 'next-intl';
 
 function MyComponent() {
   const t = useTranslations();
 
-  return <h1>{t('welcome')}</h1>;
+  return (
+    <div>
+      {/* ✅ CORRECT - Using translation key */}
+      <h1>{t('welcome')}</h1>
+      <p>{t('description')}</p>
+
+      {/* ❌ WRONG - Hardcoded text */}
+      <h1>Welcome</h1>
+    </div>
+  );
+}
+```
+
+### Form labels, placeholders, errors - ALL must use i18n
+```tsx
+import { useTranslations } from 'next-intl';
+
+function LoginForm() {
+  const t = useTranslations();
+
+  return (
+    <form>
+      {/* ✅ CORRECT */}
+      <Input
+        label={t('email')}
+        placeholder={t('enterEmail')}
+        errorMessage={errors.email?.message ? t(errors.email.message) : undefined}
+      />
+
+      {/* ❌ WRONG - Hardcoded text */}
+      <Input
+        label="Email"
+        placeholder="Enter your email"
+        errorMessage="Invalid email"
+      />
+    </form>
+  );
 }
 ```
 
-### Navigation URLs
+### Navigation URLs Reference
 ```tsx
 import { NAVIGATION_URLS } from '@/config/navigationUrls';
 
+// Available URLs (based on project type):
+NAVIGATION_URLS.ROOT                    // '/'
+NAVIGATION_URLS.ABOUT                   // '/about'
+NAVIGATION_URLS.CONTACT                 // '/contact'
+NAVIGATION_URLS.PRODUCTS.INDEX          // '/products'
+NAVIGATION_URLS.PRODUCTS.DETAIL('123')  // '/products/123'
+NAVIGATION_URLS.AUTH.LOGIN              // '/auth/login'
+NAVIGATION_URLS.DASHBOARD.INDEX         // '/dashboard'
+
+// ✅ ALWAYS use NAVIGATION_URLS
 <Link href={NAVIGATION_URLS.PRODUCTS.INDEX}>Products</Link>
-<Link href={NAVIGATION_URLS.PRODUCTS.DETAIL('123')}>Product Detail</Link>
+
+// ❌ NEVER hardcode URLs
+<Link href="/products">Products</Link>
 ```
 
 ---
@@ -416,24 +517,30 @@ import { Footer, Navbar } from '@/components/layout';
 ## ⚠️ CRITICAL RULES
 
 ### ❌ DO NOT
-1. ❌ Create custom input components when `Input`, `Select`, etc. exist
-2. ❌ Use CSS modules or styled-components
-3. ❌ Import from `@heroui/react` directly (use `@/components/ui` wrappers)
-4. ❌ Create duplicate utility functions (check `src/utils/helpers.ts` first)
-5. ❌ Use `any` type in TypeScript
-6. ❌ Hardcode URLs (use `NAVIGATION_URLS` from config)
-7. ❌ Ignore responsive design (always implement mobile-first)
-8. ❌ Skip form validation (always use Zod schemas)
+1. ❌ Use non-HeroUI icons (Lucide, Font Awesome, etc.) - ONLY use HeroUI Figma Kit icons
+2. ❌ Hardcode ANY text - ALL text MUST use i18n translation keys
+3. ❌ Hardcode URLs - ALWAYS use `NAVIGATION_URLS` from config
+4. ❌ Create custom components when HeroUI provides them - check HeroUI first, then project components
+5. ❌ Use CSS modules or styled-components - ONLY Tailwind CSS
+6. ❌ Import from `@heroui/react` directly (use `@/components/ui` wrappers)
+7. ❌ Create duplicate utility functions (check `src/utils/helpers.ts` first)
+8. ❌ Use `any` type in TypeScript
+9. ❌ Ignore responsive design (always implement mobile-first)
+10. ❌ Skip form validation (always use Zod schemas)
 
 ### ✅ DO
-1. ✅ Use existing UI components from `src/components/ui/`
-2. ✅ Follow Tailwind CSS utility-first approach
-3. ✅ Implement TypeScript strictly with proper types
-4. ✅ Use `'use client'` directive for interactive components
-5. ✅ Follow mobile-first responsive design
-6. ✅ Use semantic color classes from HeroUI theme
-7. ✅ Implement proper loading and error states
-8. ✅ Follow existing code patterns and naming conventions
+1. ✅ Use HeroUI components first (check HeroUI library before creating custom components)
+2. ✅ Use icons ONLY from HeroUI Figma Kit
+3. ✅ Use i18n translation keys for ALL text (labels, placeholders, titles, errors, etc.)
+4. ✅ Use `NAVIGATION_URLS` for ALL navigation links
+5. ✅ Use existing UI components from `src/components/ui/`
+6. ✅ Use Tailwind CSS ONLY for styling (no CSS modules, no styled-components)
+7. ✅ Implement TypeScript strictly with proper types
+8. ✅ Use `'use client'` directive for interactive components
+9. ✅ Follow mobile-first responsive design
+10. ✅ Use semantic color classes from HeroUI theme
+11. ✅ Implement proper loading and error states
+12. ✅ Follow existing code patterns and naming conventions
 
 ---
 
@@ -441,18 +548,38 @@ import { Footer, Navbar } from '@/components/layout';
 
 When converting Figma to code, ensure:
 
+### Component & Styling
+- [ ] Checked HeroUI library first for component availability
+- [ ] Used HeroUI components via `src/components/ui/` wrappers
+- [ ] Used ONLY HeroUI Figma Kit icons (no Lucide, Font Awesome, etc.)
+- [ ] Applied Tailwind CSS classes only (no custom CSS, no CSS modules)
+- [ ] Followed HeroUI theme colors (bg-background, bg-primary, etc.)
+
+### Content & Navigation
+- [ ] ALL text uses i18n translation keys (no hardcoded text)
+- [ ] ALL labels use `t('labelKey')`
+- [ ] ALL placeholders use `t('placeholderKey')`
+- [ ] ALL error messages use `t('errorKey')`
+- [ ] ALL titles and headings use `t('titleKey')`
+- [ ] ALL URLs use `NAVIGATION_URLS` from config (no hardcoded URLs)
+
+### Structure & Types
 - [ ] Page created in correct location (`src/app/[locale]/...`)
-- [ ] Used existing UI components from `src/components/ui/`
-- [ ] Applied Tailwind CSS classes only (no custom CSS)
-- [ ] Implemented responsive design (mobile-first)
 - [ ] Added TypeScript types for all data structures
 - [ ] Used `'use client'` for interactive components
-- [ ] Implemented forms with Zod validation if needed
-- [ ] Used i18n for all text content
-- [ ] Added proper loading and error states
-- [ ] Followed semantic color system
-- [ ] Used navigation URLs from config
-- [ ] Tested on multiple breakpoints
+- [ ] No `any` types used
+
+### Forms & Validation
+- [ ] Implemented forms with Zod validation schemas
+- [ ] Form labels use i18n
+- [ ] Form placeholders use i18n
+- [ ] Form errors use i18n
+
+### Responsive & States
+- [ ] Implemented responsive design (mobile-first)
+- [ ] Added proper loading states
+- [ ] Added proper error states
+- [ ] Tested on multiple breakpoints (mobile, tablet, desktop)
 
 ---
 
@@ -460,14 +587,26 @@ When converting Figma to code, ensure:
 
 Before finalizing code, verify:
 
-1. **No direct HeroUI imports** - Only through `@/components/ui`
-2. **Consistent spacing** - Use `space-y-*` and `space-x-*` utilities
-3. **Proper TypeScript** - No `any`, all props typed
-4. **Mobile-first** - Base styles for mobile, then `md:`, `lg:`, etc.
-5. **Color usage** - Use theme colors, not arbitrary values
-6. **Component reuse** - Don't duplicate existing components
-7. **Form validation** - Zod schemas for all forms
-8. **i18n ready** - All text uses translation keys
+### Icons & Components
+1. **Icons from HeroUI only** - Check all icons come from HeroUI Figma Kit
+2. **HeroUI components first** - Verify HeroUI library was checked before custom implementation
+3. **No direct HeroUI imports** - Only through `@/components/ui`
+4. **Component reuse** - Don't duplicate existing components
+
+### i18n & Navigation
+5. **Zero hardcoded text** - ALL text uses `t('key')`
+6. **Zero hardcoded URLs** - ALL links use `NAVIGATION_URLS`
+7. **Form fields i18n** - Labels, placeholders, errors all use translation keys
+
+### Styling & Layout
+8. **Tailwind only** - No CSS modules, no styled-components
+9. **HeroUI theme colors** - Use semantic colors, not arbitrary values
+10. **Consistent spacing** - Use `space-y-*` and `space-x-*` utilities
+11. **Mobile-first** - Base styles for mobile, then `md:`, `lg:`, etc.
+
+### TypeScript & Validation
+12. **Proper TypeScript** - No `any`, all props typed
+13. **Form validation** - Zod schemas for all forms
 
 ---