@adlas/create-app 1.0.0

package/dist/commands/figma.js

@@ -0,0 +1,172 @@
+import chalk from 'chalk';
+import ora from 'ora';
+import fs from 'fs-extra';
+/**
+ * Figma Command - Generate UI components from Figma design
+ *
+ * This uses Claude with Figma MCP to:
+ * 1. Fetch Figma design
+ * 2. Analyze components and screens
+ * 3. Generate React components using HeroUI
+ * 4. Follow architecture patterns from docs/
+ */
+export async function figmaCommand(figmaUrl, options) {
+    console.log(chalk.blue.bold('\n🎨 Figma UI Generator\n'));
+    const spinner = ora();
+    try {
+        // Validate Figma URL
+        if (!figmaUrl.includes('figma.com')) {
+            throw new Error('Invalid Figma URL');
+        }
+        // Check if docs exist
+        const docsExist = await fs.pathExists('docs/ARCHITECTURE_PATTERNS.md');
+        if (!docsExist) {
+            throw new Error('Documentation not found. Run this command in an Adlas project.');
+        }
+        // Ensure output directory exists
+        await fs.ensureDir(options.output);
+        spinner.start('Preparing Figma integration...');
+        // Create a temporary file with instructions for Claude
+        const instructionsPath = '.adlas-figma-instructions.md';
+        const instructions = generateFigmaInstructions(figmaUrl, options);
+        await fs.writeFile(instructionsPath, instructions);
+        spinner.succeed('Instructions prepared');
+        // Print next steps for user
+        console.log(chalk.green('\n✨ Ready to generate UI from Figma!\n'));
+        console.log(chalk.blue('Next steps:\n'));
+        console.log(chalk.gray('1. Open Claude Code or Claude in your IDE'));
+        console.log(chalk.gray('2. Give Claude this prompt:\n'));
+        console.log(chalk.white('---\n'));
+        console.log(chalk.cyan(`Read .adlas-figma-instructions.md and start implementing the UI from Figma.
+
+Figma URL: ${figmaUrl}
+Output directory: ${options.output}
+
+Please:
+1. Use Figma MCP to fetch the design
+2. Follow the architecture patterns in docs/ARCHITECTURE_PATTERNS.md
+3. Use HeroUI components from docs/UI_COMPONENTS_GUIDE.md
+4. Generate components in the specified output directory
+5. Create proper service modules if needed
+
+${options.pages ? `Focus on these pages: ${options.pages.join(', ')}` : 'Start with the most important pages/screens'}
+`));
+        console.log(chalk.white('---\n'));
+        console.log(chalk.yellow('💡 Tip: Claude will read the Figma design and generate components automatically!\n'));
+    }
+    catch (error) {
+        spinner.fail('Failed to prepare Figma integration');
+        console.error(chalk.red('\nError:'), error.message);
+        process.exit(1);
+    }
+}
+function generateFigmaInstructions(figmaUrl, options) {
+    return `# Figma UI Implementation Instructions
+
+**Figma URL:** ${figmaUrl}
+**Output Directory:** ${options.output}
+${options.pages ? `**Focus Pages:** ${options.pages.join(', ')}\n` : ''}
+
+## Your Task
+
+Implement UI components from the Figma design following these steps:
+
+### Step 1: Analyze Figma Design
+
+Use Figma MCP to:
+1. Fetch the Figma file: ${figmaUrl}
+2. List all frames/screens
+3. Identify components and their hierarchy
+4. Extract design tokens (colors, spacing, typography)
+
+### Step 2: Plan Implementation
+
+For each screen/page:
+1. Identify reusable components
+2. Determine if service modules are needed
+3. Plan component structure following docs/ARCHITECTURE_PATTERNS.md
+
+### Step 3: Generate Components
+
+For each component:
+1. **Use HeroUI components** - Reference docs/UI_COMPONENTS_GUIDE.md
+2. **Follow patterns** - Use docs/ARCHITECTURE_PATTERNS.md structure
+3. **Extract to features** - Create in ${options.output}
+4. **Add TypeScript types** - Proper interfaces and types
+5. **Make responsive** - Mobile-first approach
+
+### Step 4: Service Modules (if needed)
+
+If the page needs data fetching:
+1. Create service module in src/services/[module-name]/
+2. Define types in [module-name].types.ts
+3. Create queries in [module-name].queries.ts using React Query
+4. Add store in [module-name].store.ts if state management needed
+
+### Important Guidelines
+
+✅ **DO:**
+- Use HeroUI components exclusively (Button, Input, Card, etc.)
+- Follow the service module pattern
+- Add proper TypeScript types
+- Make components responsive
+- Extract reusable components
+- Follow naming conventions from docs
+
+❌ **DON'T:**
+- Use other UI libraries
+- Create inline styles
+- Skip TypeScript types
+- Create monolithic components
+- Ignore the documentation patterns
+
+### Example Structure
+
+For a "Product List" page from Figma:
+
+\`\`\`
+${options.output}/product/
+├── ProductCard.tsx          # Individual product card
+├── ProductGrid.tsx          # Grid of products
+├── ProductFilters.tsx       # Filter sidebar
+└── ProductSearch.tsx        # Search input
+
+src/services/product/
+├── product.types.ts         # Types
+├── product.queries.ts       # React Query hooks
+└── product.store.ts         # Zustand store (if needed)
+
+src/app/[locale]/(website)/products/
+└── page.tsx                 # Page using the components
+\`\`\`
+
+### Workflow
+
+1. Start with the main/home page (or specified pages)
+2. Break down into components
+3. Implement one component at a time
+4. Test and refine
+5. Move to next page
+6. Document any decisions made
+
+### Questions to Ask Before Starting
+
+1. What screens/pages are in the Figma file?
+2. Which page should we start with?
+3. Are there any specific requirements or priorities?
+4. Should I create service modules for data fetching?
+
+### After Implementation
+
+Update this file with:
+- [x] Pages implemented
+- [ ] Components created
+- [ ] Service modules added
+- [ ] Any issues or notes
+
+---
+
+**Ready?** Let's build amazing UI from Figma! 🚀
+`;
+}
+//# sourceMappingURL=figma.js.map

package/dist/commands/figma.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"figma.js","sourceRoot":"","sources":["../../src/commands/figma.ts"],"names":[],"mappings":"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"}

package/dist/commands/index.d.ts

@@ -0,0 +1,5 @@
+export { initCommand } from './init.js';
+export { figmaCommand } from './figma.js';
+export { swaggerCommand } from './swagger.js';
+export { updateCommand } from './update.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/commands/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/commands/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC"}

package/dist/commands/index.js

@@ -0,0 +1,5 @@
+export { initCommand } from './init.js';
+export { figmaCommand } from './figma.js';
+export { swaggerCommand } from './swagger.js';
+export { updateCommand } from './update.js';
+//# sourceMappingURL=index.js.map

package/dist/commands/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/commands/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC"}

package/dist/commands/init.d.ts

@@ -0,0 +1,8 @@
+interface InitOptions {
+    projectType?: string;
+    skipInstall?: boolean;
+    skipGit?: boolean;
+}
+export declare function initCommand(projectName: string | undefined, options: InitOptions): Promise<void>;
+export {};
+//# sourceMappingURL=init.d.ts.map

package/dist/commands/init.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"init.d.ts","sourceRoot":"","sources":["../../src/commands/init.ts"],"names":[],"mappings":"AAyBA,UAAU,WAAW;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAsB,WAAW,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,EAAE,OAAO,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC,CA6EtG"}