@adlas/create-app 1.0.51 → 1.0.52

package/package.json

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

package/templates/docs/FIGMA_TO_CODE_GUIDE.md

@@ -45,6 +45,7 @@ mcp__figma-dev-mode-mcp-server__get_design_context({
 9. **Follow project structure** - Place files in correct locations as defined below
 10. **Match coding patterns** - Use the same patterns found in existing code
 11. **Type safety first** - Use TypeScript strictly, no `any` types
+12. **❌ NEVER run build** - Do NOT run `pnpm build` or `pnpm lint` commands. The user will run these manually
 
 ---
 
@@ -78,13 +79,16 @@ export const Button = extendVariants(HeroUIButton, {
   variants: {
     color: {
       // ✅ Use theme colors from hero.ts, NOT custom colors
-      primary: 'bg-primary text-black',
+      primary: 'bg-primary-500 text-black',
     },
     size: {
-      sm: 'h-8 px-3 text-xs',
+      sm: 'h-10 px-4 text-sm',
       md: 'h-10 px-4 text-sm',
       lg: 'h-12 px-6 text-base',
     },
+    radius: {
+      full: 'rounded-full',
+    },
   },
   defaultVariants: {
     size: 'md',
@@ -166,16 +170,17 @@ const Button = extendVariants(HerouiButton, {
 
 // In component usage:
 <Button
-  color="primary"              // ✅ Specify only when different from default
-  radius="full"                // ✅ HeroUI built-in prop (don't configure in wrapper)
+  color="primary"              // ✅ Configured variant
+  size="sm"                    // ✅ Configured variant (can omit if md is default)
+  radius="full"                // ✅ Configured radius variant
   className="mt-4 hidden lg:block"  // ✅ Layout utilities only
 >
   {t('navbar.bookDemo')}      // ✅ i18n text
 </Button>
-// Note: size="md" NOT needed because it's the defaultVariant
+// Note: Omit props that match defaultVariants to keep code clean
 
 // Using size prop when you need different size:
-<Button color="primary" size="lg">  // ✅ Override default size
+<Button color="primary" size="lg" radius="full">  // ✅ Override default size
   Large Button
 </Button>
 
@@ -339,6 +344,86 @@ import { Button } from '@/components/ui';
 - ✅ className ONLY for layout (`hidden`, `lg:flex`, `bg-black`)
 - ❌ DON'T use custom `<header>` or `<nav>` tags
 
+#### Dropdown Menus in Navbar
+**CRITICAL**: Always use HeroUI Dropdown components for dropdown menus:
+
+```tsx
+import {
+  Dropdown,
+  DropdownTrigger,
+  DropdownMenu,
+  DropdownItem,
+} from '@heroui/react';
+import { Button, Icon } from '@/components/ui';
+
+// Dropdown with menu items from config
+{item.hasDropdown && item.items && item.items.length > 0 ? (
+  <Dropdown>
+    <DropdownTrigger>
+      <Button
+        variant="light"
+        endContent={<Icon name="ChevronDownIcon" className="size-5" />}
+      >
+        {t(item.labelKey)}
+      </Button>
+    </DropdownTrigger>
+    <DropdownMenu aria-label={t(item.labelKey)}>
+      {item.items.map(subItem => (
+        <DropdownItem key={subItem.key} href={subItem.href}>
+          {t(subItem.labelKey)}
+        </DropdownItem>
+      ))}
+    </DropdownMenu>
+  </Dropdown>
+) : (
+  <Button variant="light">
+    {t(item.labelKey)}
+  </Button>
+)}
+```
+
+**Example Menu Configuration** (`src/config/menuItems.ts`):
+```tsx
+export type MenuItem = {
+  key: string;
+  labelKey: 'product' | 'useCases' | 'resources' | 'company' | 'pricing';
+  href?: string;
+  hasDropdown?: boolean;
+  items?: Array<{
+    key: string;
+    labelKey: string;
+    href: string;
+  }>;
+};
+
+export const navbarMenuItems: MenuItem[] = [
+  {
+    key: 'product',
+    labelKey: 'product',
+    hasDropdown: true,
+    items: [
+      { key: 'analytics', labelKey: 'navbar.analytics', href: NAVIGATION_URLS.ROOT },
+      { key: 'dashboard', labelKey: 'navbar.dashboard', href: NAVIGATION_URLS.ROOT },
+      { key: 'reports', labelKey: 'navbar.reports', href: NAVIGATION_URLS.ROOT },
+    ],
+  },
+  {
+    key: 'pricing',
+    labelKey: 'pricing',
+    href: NAVIGATION_URLS.ROOT,
+  },
+];
+```
+
+**Key Points**:
+- ✅ Always check `items && items.length > 0` before rendering dropdown
+- ✅ Use `Icon` component with proper name (e.g., `ChevronDownIcon`)
+- ✅ Use `endContent` prop for icons in buttons
+- ✅ Add `aria-label` to DropdownMenu for accessibility
+- ✅ Map menu items from config constants, never hardcode
+- ✅ Use union types for `labelKey` to ensure type safety
+- ❌ DON'T render dropdown without checking array exists
+
 ### Form Components
 All located in `src/components/ui/`:
 
@@ -495,9 +580,15 @@ pnpm generate-icons
 This command will:
 - Convert all SVG files in `src/assets/icons/` to React components
 - Place them in `src/components/icons/`
+- **Automatically add "Icon" suffix** to all component names (configured in `svgr.config.mjs`)
 - Auto-format and lint the generated code
 - Update `src/components/icons/index.ts` with exports
 
+**Icon Naming Convention**:
+- SVG filename: `chevron-down.svg` or `chevron-down-icon.svg`
+- Generated component: `ChevronDownIcon.tsx` (Icon suffix added automatically)
+- The svgr config ensures ALL icons end with "Icon" suffix regardless of SVG filename
+
 #### Step 4: Use in Code
 
 **CORRECT USAGE**: Use the `Icon` component with `name` prop (PascalCase):
@@ -643,18 +734,28 @@ export const IMAGES = {
 
 #### Step 5: Reference in Code
 
+**CRITICAL: ALWAYS import and use IMAGES constant - NEVER hardcode paths**
+
 ```tsx
-// Import from centralized constants
+// ✅ CORRECT - Import from centralized constants
 import { IMAGES } from '@/config/images';
 import Image from 'next/image';
 
 // Using Next.js Image component (recommended)
 <Image
-  src={IMAGES.LOGOS.FULL}
-  alt="Company Logo"
-  width={120}
-  height={40}
-  priority
+  src={IMAGES.LOGOS.BINA}  // ✅ Use constant
+  alt="BINA"
+  width={54}
+  height={41}
+  className="h-10 w-auto"
+/>
+
+// ❌ WRONG - Hardcoded path
+<Image
+  src="/images/logos/bina.png"  // ❌ Don't hardcode
+  alt="BINA"
+  width={54}
+  height={41}
 />
 
 // Using standard img tag (for SVGs with CSS control)
@@ -683,7 +784,8 @@ import Image from 'next/image';
 - Import images as modules unless necessary
 - Use base64 encoded images inline
 - Forget to optimize images before adding
-- Hardcode image paths directly in components (use centralized constants)
+- **CRITICAL**: Hardcode image paths directly in components - MUST use `IMAGES` constant from `@/config/images`
+- Use hardcoded strings like `src="/images/logos/bina.png"` - Use `src={IMAGES.LOGOS.BINA}` instead
 
 **✅ DO**:
 - Always place in `public/` directory
@@ -1033,25 +1135,62 @@ export function MyComponent() {
 ```
 
 ### Translations for ALL text
+
+**CRITICAL: Specify namespace to avoid TypeScript errors**
+
 ```tsx
 import { useTranslations } from 'next-intl';
 
 function MyComponent() {
-  const t = useTranslations();
+  // ✅ CORRECT - Specify namespace for type safety
+  const t = useTranslations('namespace');
 
   return (
     <div>
-      {/* ✅ CORRECT - Using translation key */}
+      {/* Now you can use keys directly without type errors */}
       <h1>{t('welcome')}</h1>
       <p>{t('description')}</p>
+    </div>
+  );
+}
 
-      {/* ❌ WRONG - Hardcoded text */}
-      <h1>Welcome</h1>
+// ❌ WRONG - No namespace causes TypeScript errors with dynamic keys
+function BadComponent() {
+  const t = useTranslations(); // Missing namespace
+
+  const items = [
+    { key: 'product', labelKey: 'navbar.product' }
+  ];
+
+  return (
+    <div>
+      {/* TypeScript error: Argument of type 'string' is not assignable */}
+      {items.map(item => <p key={item.key}>{t(item.labelKey)}</p>)}
     </div>
   );
 }
 ```
 
+**Type-Safe Translation Pattern:**
+```tsx
+// 1. Define translation key types in config
+export type MenuItem = {
+  key: string;
+  labelKey: 'product' | 'useCases' | 'resources'; // Union type of valid keys
+  href?: string;
+};
+
+// 2. Use with namespace
+const t = useTranslations('navbar');
+
+// 3. Access keys directly (type-safe)
+{menuItems.map(item => (
+  <Button key={item.key}>
+    {t(item.labelKey)} {/* No TypeScript error */}
+  </Button>
+))}
+```
+
 ### Form labels, placeholders, errors - ALL must use i18n
 ```tsx
 import { useTranslations } from 'next-intl';
@@ -1169,11 +1308,15 @@ import { Navbar } from '@/components/layout';
 <main>{children}</main>
 ```
 
-**Implementation details** (see `src/components/layout/Navbar.tsx`):
-- ✅ Uses HeroUI `Navbar`, `NavbarBrand`, `NavbarContent`, `NavbarItem`
+**Implementation details** (see `src/components/layout/Navbar.tsx` and `docs/NAVBAR_IMPLEMENTATION.md`):
+- ✅ Uses HeroUI `Navbar`, `NavbarBrand`, `NavbarContent`, `NavbarItem`, `Dropdown`
 - ✅ Uses `Button` from `@/components/ui` with props (`color`, `size`, `variant`)
+- ✅ Uses `useTranslations('navbar')` with namespace for type safety
+- ✅ Menu items mapped from `src/config/menuItems.ts` with typed `labelKey`
+- ✅ Dropdown menus with HeroUI `Dropdown`, `DropdownTrigger`, `DropdownMenu`
 - ✅ All styles via props, NO className for component styles
 - ✅ className ONLY for layout utilities
+- ✅ NO `any` types - uses union types for translation keys
 
 ---
 
@@ -1185,11 +1328,12 @@ import { Navbar } from '@/components/layout';
 3. ❌ **Icons**: Import individual icon components (e.g., `import { ChevronDownIcon }`) - MUST use `<Icon name="ChevronDownIcon" />`
 4. ❌ **Icons**: Create manual icon components - MUST use `pnpm generate-icons` workflow
 5. ❌ **Icons**: Use non-project icons (Lucide, Font Awesome, etc.)
-6. ❌ **Logos**: Put logos/images in `src/` folder - MUST go in `public/`
-7. ❌ **Logos**: Import images as modules unless necessary
-8. ❌ **Logos**: Hardcode image paths in components - MUST use centralized constants from `@/config/images`
-9. ❌ **Tailwind**: Use arbitrary values when standard classes exist (e.g., `h-[40px]` → use `h-10`)
-10. ❌ **Tailwind**: Use custom values like `w-[100%]` (use `w-full`)
+6. ❌ **Images**: Put logos/images in `src/` folder - MUST go in `public/`
+7. ❌ **Images**: Import images as modules unless necessary
+8. ❌ **Images**: **CRITICAL** - Hardcode image/video paths (e.g., `src="/images/logos/bina.png"`) - MUST use `IMAGES` constant
+9. ❌ **Images**: Use direct path strings anywhere - ALL paths MUST come from `@/config/images`
+10. ❌ **Tailwind**: Use arbitrary values when standard classes exist (e.g., `h-[40px]` → use `h-10`)
+11. ❌ **Tailwind**: Use custom values like `w-[100%]` (use `w-full`)
 11. ❌ **Colors**: Use custom color values (e.g., `bg-[#19ffa3]`, `text-[#ff0000]`) - MUST use theme colors from hero.ts
 12. ❌ **Colors**: Use hex, rgb, or hsl values inline - Use semantic color classes instead
 13. ❌ **Text**: Hardcode ANY text - ALL text MUST use i18n translation keys
@@ -1203,23 +1347,28 @@ import { Navbar } from '@/components/layout';
 21. ❌ **Imports**: Import from `@heroui/react` directly (use `@/components/ui` wrappers when available)
 22. ❌ **Navigation**: Use HeroUI `Link` for internal navigation (use Next.js `Link` from `next/link`)
 23. ❌ **Navigation**: Import `usePathname`, `useRouter` from wrong source (MUST use `next/navigation`)
-24. ❌ **TypeScript**: Use `any` type
-25. ❌ **Design**: Ignore responsive design (always implement mobile-first)
-26. ❌ **Forms**: Skip form validation (always use Zod schemas)
+24. ❌ **TypeScript**: Use `any` type - Use union types and proper typing instead
+25. ❌ **i18n**: Use `useTranslations()` without namespace - MUST specify namespace for type safety
+26. ❌ **i18n**: Use dynamic translation keys without proper typing - Define union types for keys
+27. ❌ **Design**: Ignore responsive design (always implement mobile-first)
+28. ❌ **Forms**: Skip form validation (always use Zod schemas)
+29. ❌ **Dropdowns**: Render dropdown items without checking if items array exists/has length
+30. ❌ **Build**: Run `pnpm build` or `pnpm lint` commands - The user will run these manually
 
 ### ✅ DO
 1. ✅ **Figma**: Use Figma MCP server with `get_design_context` and node-id from Figma URL
 2. ✅ **Figma**: Extract node-id from URL (e.g., `node-id=8486-1580` → `"8486:1580"`)
 3. ✅ **Icons**: Export SVG from Figma → `src/assets/icons/` → Run `pnpm generate-icons`
 4. ✅ **Icons**: Use `<Icon name="IconName" />` pattern with PascalCase - NEVER import individual icon components
-5. ✅ **Logos**: Check `public/images/index.ts` BEFORE exporting from Figma
-6. ✅ **Logos**: Check `public/images/logos/` directory for existing assets
-7. ✅ **Logos**: Export SVG/PNG from Figma ONLY if not existing → Place in `public/images/` with organized folders
-8. ✅ **Logos**: Create centralized constants file `src/config/images.ts` with LOGOS, AUTH, WEBSITE, etc.
-9. ✅ **Logos**: Import from `@/config/images` and use `IMAGES.LOGOS.PRIMARY`
-10. ✅ **Logos**: Prefer SVG over PNG when source is vector
-11. ✅ **Tailwind**: Use standard classes (`h-10`, `p-6`, `text-sm` instead of arbitrary values)
-12. ✅ **Tailwind**: Use size utilities (`size-4`, `size-5`) for icons
+5. ✅ **Images**: Check `public/images/index.ts` BEFORE exporting from Figma
+6. ✅ **Images**: Check `public/images/logos/` directory for existing assets
+7. ✅ **Images**: Export SVG/PNG from Figma ONLY if not existing → Place in `public/images/` with organized folders
+8. ✅ **Images**: **CRITICAL** - Create/update `src/config/images.ts` with ALL image paths
+9. ✅ **Images**: **ALWAYS** import from `@/config/images` and use `IMAGES.LOGOS.BINA` (NEVER hardcode)
+10. ✅ **Images**: Add new images to centralized config immediately
+11. ✅ **Images**: Prefer SVG over PNG when source is vector
+12. ✅ **Tailwind**: Use standard classes (`h-10`, `p-6`, `text-sm` instead of arbitrary values)
+13. ✅ **Tailwind**: Use size utilities (`size-4`, `size-5`) for icons
 13. ✅ **Colors**: Use theme colors from hero.ts (`bg-primary`, `text-primary-600`, `bg-success`)
 14. ✅ **Colors**: Check hero.ts and globals.css for available colors before using custom values
 15. ✅ **Navigation**: Use Next.js `Link` from `next/link` for internal navigation
@@ -1235,11 +1384,15 @@ import { Navbar } from '@/components/layout';
 25. ✅ **Styling**: Omit props that match defaultVariants (e.g., don't write `size="md"` if `md` is default)
 26. ✅ **Styling**: Use className ONLY for layout utilities (`mt-4`, `hidden`, `lg:flex`)
 27. ✅ **Styling**: Use Tailwind CSS ONLY (utility classes)
-28. ✅ **TypeScript**: Implement strict typing with proper types
-29. ✅ **React**: Use `'use client'` directive for interactive components
-30. ✅ **Design**: Follow mobile-first responsive design
-31. ✅ **States**: Implement proper loading and error states
-32. ✅ **Patterns**: Follow existing code patterns and naming conventions
+28. ✅ **TypeScript**: Implement strict typing with proper types (NO `any`)
+29. ✅ **TypeScript**: Use union types for translation keys (e.g., `labelKey: 'product' | 'useCases'`)
+30. ✅ **i18n**: Specify namespace in `useTranslations('namespace')` for type safety
+31. ✅ **i18n**: Define typed keys in config to avoid dynamic string issues
+32. ✅ **Dropdowns**: Check array exists and has length before mapping (`items && items.length > 0`)
+33. ✅ **React**: Use `'use client'` directive for interactive components
+34. ✅ **Design**: Follow mobile-first responsive design
+35. ✅ **States**: Implement proper loading and error states
+36. ✅ **Patterns**: Follow existing code patterns and naming conventions
 
 ---
 
@@ -1384,11 +1537,14 @@ export const IMAGES = {
   WEBSITE,
 } as const;
 
-# 4. Use in code
+# 4. Use in code - ALWAYS use IMAGES constant
 import { IMAGES } from '@/config/images';
-<img src={IMAGES.LOGOS.PRIMARY} alt="Logo" className="h-10 w-auto" />
-# OR
-<Image src={IMAGES.LOGOS.PRIMARY} alt="Logo" width={120} height={40} />
+
+# ✅ CORRECT
+<Image src={IMAGES.LOGOS.BINA} alt="Logo" width={54} height={41} />
+
+# ❌ WRONG - Hardcoded path
+<Image src="/images/logos/bina.png" alt="Logo" width={54} height={41} />
 ```
 
 ### Tailwind Standard Classes
@@ -1416,9 +1572,14 @@ text-lg = 18px    text-3xl = 30px
 import { MenuIcon, CloseIcon } from '@/components/icons';
 <MenuIcon className="size-6 text-white" />
 
-// Logos (centralized constants)
+// Images & Logos (ALWAYS use IMAGES constant - NEVER hardcode)
 import { IMAGES } from '@/config/images';
-<img src={IMAGES.LOGOS.PRIMARY} alt="Logo" className="h-10 w-auto" />
+
+// ✅ CORRECT
+<Image src={IMAGES.LOGOS.BINA} alt="Logo" width={54} height={41} />
+
+// ❌ WRONG
+<Image src="/images/logos/bina.png" alt="Logo" />
 
 // Navigation (Next.js Link + constants)
 import Link from 'next/link';