@adlas/create-app 1.0.0

package/README.md

@@ -0,0 +1,476 @@
+# @adlas/create-app
+
+Professional project initializer for Adlas with AI-powered development tools.
+
+## Features
+
+- 🚀 **Quick Setup** - Initialize Next.js projects with best practices
+- 🎨 **Figma Integration** - Generate UI from Figma designs using Claude + Figma MCP
+- 📡 **Swagger Integration** - Auto-generate API layer from Swagger/OpenAPI specs
+- 📚 **Documentation** - Auto-generated project documentation
+- 🎯 **HeroUI** - Pre-configured with HeroUI components
+- 🏗️ **Architecture** - Clean service module pattern
+- 🔄 **Updatable** - Keep configs and docs up to date
+
+## Installation
+
+### Global Installation (Recommended)
+
+```bash
+npm install -g @adlas/create-app
+```
+
+### Use with NPX (No Installation)
+
+```bash
+npx @adlas/create-app init my-project
+```
+
+### Local Development
+
+```bash
+cd cli-tool
+pnpm install
+pnpm link
+```
+
+Now you can use `create-adlas-app` or `adlas` commands globally.
+
+## Commands
+
+### 1. Initialize New Project
+
+```bash
+adlas init [project-name]
+```
+
+**Interactive Mode:**
+```bash
+adlas init
+```
+
+Prompts you for:
+- Project name
+- Template (e-commerce, dashboard, landing, blank)
+- Features (auth, i18n, dark mode, PWA, analytics)
+- Figma integration (optional)
+- Swagger integration (optional)
+
+**With Options:**
+```bash
+adlas init my-store --template ecommerce
+```
+
+**Options:**
+- `-t, --template <template>` - Project template
+- `--skip-install` - Skip package installation
+- `--skip-git` - Skip git initialization
+
+**What it does:**
+1. ✅ Creates Next.js 15 project with TypeScript
+2. ✅ Installs HeroUI + dependencies (Zustand, React Query, Zod, etc.)
+3. ✅ Copies configuration files (.npmrc, prettier, svgr, postcss, etc.)
+4. ✅ Generates project-specific documentation
+5. ✅ Sets up folder structure (services, components, etc.)
+6. ✅ Copies boilerplate code (utils, providers, etc.)
+7. ✅ Initializes git with proper commit
+
+### 2. Generate UI from Figma
+
+```bash
+adlas figma <figma-url>
+```
+
+**Example:**
+```bash
+adlas figma https://www.figma.com/file/abc123/My-Design
+```
+
+**With Options:**
+```bash
+adlas figma <figma-url> --output src/components/features --pages "Home, Products"
+```
+
+**Options:**
+- `-o, --output <path>` - Output directory (default: `./src/components/features`)
+- `-p, --pages <pages...>` - Specific pages to generate
+
+**What it does:**
+1. ✅ Validates Figma URL
+2. ✅ Creates instruction file for Claude
+3. ✅ Guides you to use Claude with Figma MCP
+4. ✅ Claude analyzes Figma design
+5. ✅ Generates React components with HeroUI
+6. ✅ Creates service modules if needed
+7. ✅ Follows architecture patterns
+
+**Workflow:**
+1. Run the command
+2. Copy the generated prompt
+3. Give it to Claude in your IDE
+4. Claude fetches Figma design and generates components automatically
+
+### 3. Generate API Layer from Swagger
+
+```bash
+adlas swagger <swagger-url>
+```
+
+**Example:**
+```bash
+adlas swagger https://api.example.com/swagger.json
+```
+
+**With Options:**
+```bash
+adlas swagger <swagger-url> --output src/services --module products
+```
+
+**Options:**
+- `-o, --output <path>` - Output directory (default: `./src/services`)
+- `-m, --module <module>` - Specific module/tag to generate
+
+**What it does:**
+1. ✅ Fetches Swagger/OpenAPI spec
+2. ✅ Analyzes all endpoints
+3. ✅ Creates instruction file for Claude
+4. ✅ Saves spec locally
+5. ✅ Claude generates:
+   - TypeScript types from schemas
+   - API client functions
+   - React Query hooks (queries & mutations)
+   - Query keys
+   - Service modules
+
+**Generated Structure:**
+```
+src/services/
+├── product/
+│   ├── product.types.ts      # TypeScript types
+│   ├── product.keys.ts       # Query keys
+│   ├── product.api.ts        # API functions
+│   └── product.queries.ts    # React Query hooks
+├── user/
+│   └── ...
+└── client.ts                 # Shared Axios client
+```
+
+### 4. Update Project
+
+```bash
+adlas update
+```
+
+**Update only configs:**
+```bash
+adlas update --configs
+```
+
+**Update only docs:**
+```bash
+adlas update --docs
+```
+
+**What it does:**
+1. ✅ Updates configuration files to latest version
+2. ✅ Updates documentation to latest patterns
+3. ✅ Creates backups of existing files (.backup)
+
+## Project Structure
+
+After initialization, your project will have:
+
+```
+my-project/
+├── src/
+│   ├── app/                    # Next.js App Router pages
+│   │   └── [locale]/
+│   │       ├── (website)/      # Public pages
+│   │       └── (dashboard)/    # Protected pages
+│   ├── components/
+│   │   ├── ui/                 # Shared UI components
+│   │   └── features/           # Feature-specific components
+│   ├── services/               # Service modules (API layer)
+│   │   └── [module]/
+│   │       ├── [module].types.ts
+│   │       ├── [module].queries.ts
+│   │       └── [module].store.ts
+│   ├── hooks/                  # Custom React hooks
+│   ├── lib/                    # Utilities
+│   ├── utils/                  # Helper functions (cn, etc.)
+│   ├── types/                  # Global TypeScript types
+│   ├── locales/                # i18n translations
+│   └── providers.tsx           # React Query, HeroUI providers
+├── public/
+│   └── icons/                  # SVG icons
+├── docs/                       # Project documentation
+│   ├── PROJECT_OVERVIEW.md
+│   ├── ARCHITECTURE_PATTERNS.md
+│   ├── UI_COMPONENTS_GUIDE.md
+│   ├── IMPLEMENTATION_GUIDE.md
+│   ├── AI_QUICK_REFERENCE.md
+│   └── DOCUMENTATION_INDEX.md
+├── scripts/                    # Build/deployment scripts
+├── .npmrc                      # Package manager config
+├── prettier.config.mjs         # Code formatting
+├── svgr.config.mjs             # SVG import config
+├── postcss.config.mjs          # PostCSS config
+├── tailwind.config.ts          # Tailwind + HeroUI config
+└── tsconfig.json               # TypeScript config
+```
+
+## Templates
+
+### E-commerce
+- Product listing & detail pages
+- Shopping cart
+- Checkout flow
+- User authentication
+- Order management
+
+### Dashboard
+- Admin layout
+- Data tables
+- Forms
+- Charts
+- User management
+
+### Landing Page
+- Hero section
+- Features
+- Pricing
+- Contact form
+- Responsive design
+
+### Blank
+- Minimal setup
+- Just the structure
+- Build anything from scratch
+
+## Complete Workflow Example
+
+### 1. Create New E-commerce Project
+
+```bash
+adlas init my-store
+```
+
+Select:
+- Template: E-commerce
+- Features: Authentication, i18n, Dark Mode
+- Figma: Yes → `https://figma.com/file/abc123`
+- Swagger: Yes → `https://api.mystore.com/swagger.json`
+
+### 2. Project Created
+
+```bash
+cd my-store
+```
+
+Files generated:
+- ✅ Complete Next.js setup
+- ✅ HeroUI configured
+- ✅ Documentation ready
+- ✅ Project structure created
+
+### 3. Generate API Layer
+
+The CLI already prepared instructions. Open Claude and say:
+
+```
+Read .adlas-swagger-instructions.md and generate the API layer.
+```
+
+Claude will:
+- Read Swagger spec
+- Generate all types
+- Create React Query hooks
+- Set up service modules
+
+### 4. Generate UI from Figma
+
+Open Claude and say:
+
+```
+Read .adlas-figma-instructions.md and implement the UI from Figma.
+```
+
+Claude will:
+- Fetch Figma designs
+- Generate components with HeroUI
+- Create proper structure
+- Connect to API layer
+
+### 5. Start Development
+
+```bash
+pnpm dev
+```
+
+Your app is ready with:
+- ✅ Full type-safe API layer
+- ✅ UI components from Figma
+- ✅ Clean architecture
+- ✅ Best practices
+
+### 6. Update Later
+
+When new configs or patterns are available:
+
+```bash
+adlas update
+```
+
+## Tech Stack
+
+Projects created with this CLI include:
+
+### Core
+- **Next.js 15** - React framework with App Router
+- **TypeScript** - Type safety
+- **Tailwind CSS** - Styling
+- **HeroUI** - UI component library
+
+### State & Data
+- **Zustand** - State management
+- **TanStack Query (React Query)** - Server state
+- **React Hook Form** - Form handling
+- **Zod** - Schema validation
+
+### Features
+- **next-intl** - Internationalization (optional)
+- **Framer Motion** - Animations (via HeroUI)
+- **Lucide React** - Icons
+
+### Developer Experience
+- **SVGR** - SVG to React components
+- **Prettier** - Code formatting
+- **ESLint** - Code linting
+- **TypeScript** - Full type safety
+
+## Configuration Files
+
+All projects include pre-configured:
+
+- **`.npmrc`** - Package manager settings (auto-install peers, etc.)
+- **`prettier.config.mjs`** - Code formatting rules
+- **`svgr.config.mjs`** - SVG import configuration
+- **`postcss.config.mjs`** - PostCSS plugins
+- **`tailwind.config.ts`** - Tailwind + HeroUI theme
+- **`tsconfig.json`** - TypeScript compiler options
+- **`next.config.mjs`** - Next.js with SVGR support
+
+## Documentation
+
+Every project includes comprehensive documentation:
+
+1. **PROJECT_OVERVIEW.md** - Project-specific overview
+2. **ARCHITECTURE_PATTERNS.md** - Code structure and patterns
+3. **UI_COMPONENTS_GUIDE.md** - HeroUI component usage
+4. **IMPLEMENTATION_GUIDE.md** - Step-by-step workflows
+5. **AI_QUICK_REFERENCE.md** - DO/DON'T rules for AI
+6. **DOCUMENTATION_INDEX.md** - Navigation hub
+
+## Working with Claude
+
+This CLI is designed to work seamlessly with Claude AI:
+
+### After Init
+```
+I created a new project with @adlas/create-app.
+Read docs/DOCUMENTATION_INDEX.md to understand the project.
+```
+
+### For Figma
+```
+Read .adlas-figma-instructions.md and implement the UI.
+```
+
+### For Swagger
+```
+Read .adlas-swagger-instructions.md and generate the API layer.
+```
+
+Claude will:
+- ✅ Understand your architecture
+- ✅ Follow your patterns
+- ✅ Generate proper code
+- ✅ Use correct components
+- ✅ Create type-safe APIs
+
+## Requirements
+
+- **Node.js** 18+
+- **pnpm** (recommended) or npm
+- **Claude** with Figma MCP (for Figma integration)
+
+## Publishing
+
+### To NPM (for company use)
+
+```bash
+# Update version
+npm version patch|minor|major
+
+# Build
+pnpm build
+
+# Publish to private registry
+npm publish --access restricted
+
+# Or public
+npm publish --access public
+```
+
+### Private Registry
+
+Update `package.json`:
+
+```json
+{
+  "name": "@yourcompany/create-app",
+  "publishConfig": {
+    "registry": "https://npm.yourcompany.com"
+  }
+}
+```
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Link for local development
+pnpm link
+
+# Test
+adlas init test-project
+
+# Unlink
+pnpm unlink
+```
+
+## Roadmap
+
+- [ ] More templates (Blog, SaaS, Portfolio)
+- [ ] Component generator (`adlas generate component`)
+- [ ] Page generator (`adlas generate page`)
+- [ ] Tests generator
+- [ ] Storybook integration
+- [ ] Docker setup
+- [ ] CI/CD templates
+
+## Support
+
+- Documentation: `docs/` folder in every project
+- Issues: Create issue in repository
+- Updates: Run `adlas update` regularly
+
+## License
+
+MIT
+
+---
+
+**Built with ❤️ for Adlas**

package/dist/cli.d.ts

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+export {};
+//# sourceMappingURL=cli.d.ts.map

package/dist/cli.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli.d.ts","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":""}

package/dist/cli.js

@@ -0,0 +1,39 @@
+#!/usr/bin/env node
+import { Command } from 'commander';
+import { initCommand, figmaCommand, swaggerCommand, updateCommand } from './commands/index.js';
+const program = new Command();
+program
+    .name('create-adlas-app')
+    .description('Adlas project initializer with AI-powered development tools')
+    .version('1.0.0');
+// Init command - Create new project
+program
+    .command('init [project-name]')
+    .description('Initialize a new Adlas project')
+    .option('-t, --template <template>', 'Project template (e-commerce, dashboard, landing)')
+    .option('--skip-install', 'Skip package installation')
+    .option('--skip-git', 'Skip git initialization')
+    .action(initCommand);
+// Figma command - Generate UI from Figma
+program
+    .command('figma <figma-url>')
+    .description('Generate UI components from Figma design')
+    .option('-o, --output <path>', 'Output directory', './src/components/features')
+    .option('-p, --pages <pages...>', 'Specific pages to generate')
+    .action(figmaCommand);
+// Swagger command - Generate API layer from Swagger/OpenAPI
+program
+    .command('swagger <swagger-url>')
+    .description('Generate API layer (types, queries, mutations) from Swagger/OpenAPI spec')
+    .option('-o, --output <path>', 'Output directory', './src/services')
+    .option('-m, --module <module>', 'Service module name')
+    .action(swaggerCommand);
+// Update command - Update configs and docs
+program
+    .command('update')
+    .description('Update project configs and documentation to latest version')
+    .option('--configs', 'Update only config files')
+    .option('--docs', 'Update only documentation')
+    .action(updateCommand);
+program.parse();
+//# sourceMappingURL=cli.js.map

package/dist/cli.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAE/F,MAAM,OAAO,GAAG,IAAI,OAAO,EAAE,CAAC;AAE9B,OAAO;KACJ,IAAI,CAAC,kBAAkB,CAAC;KACxB,WAAW,CAAC,6DAA6D,CAAC;KAC1E,OAAO,CAAC,OAAO,CAAC,CAAC;AAEpB,oCAAoC;AACpC,OAAO;KACJ,OAAO,CAAC,qBAAqB,CAAC;KAC9B,WAAW,CAAC,gCAAgC,CAAC;KAC7C,MAAM,CAAC,2BAA2B,EAAE,mDAAmD,CAAC;KACxF,MAAM,CAAC,gBAAgB,EAAE,2BAA2B,CAAC;KACrD,MAAM,CAAC,YAAY,EAAE,yBAAyB,CAAC;KAC/C,MAAM,CAAC,WAAW,CAAC,CAAC;AAEvB,yCAAyC;AACzC,OAAO;KACJ,OAAO,CAAC,mBAAmB,CAAC;KAC5B,WAAW,CAAC,0CAA0C,CAAC;KACvD,MAAM,CAAC,qBAAqB,EAAE,kBAAkB,EAAE,2BAA2B,CAAC;KAC9E,MAAM,CAAC,wBAAwB,EAAE,4BAA4B,CAAC;KAC9D,MAAM,CAAC,YAAY,CAAC,CAAC;AAExB,4DAA4D;AAC5D,OAAO;KACJ,OAAO,CAAC,uBAAuB,CAAC;KAChC,WAAW,CAAC,0EAA0E,CAAC;KACvF,MAAM,CAAC,qBAAqB,EAAE,kBAAkB,EAAE,gBAAgB,CAAC;KACnE,MAAM,CAAC,uBAAuB,EAAE,qBAAqB,CAAC;KACtD,MAAM,CAAC,cAAc,CAAC,CAAC;AAE1B,2CAA2C;AAC3C,OAAO;KACJ,OAAO,CAAC,QAAQ,CAAC;KACjB,WAAW,CAAC,4DAA4D,CAAC;KACzE,MAAM,CAAC,WAAW,EAAE,0BAA0B,CAAC;KAC/C,MAAM,CAAC,QAAQ,EAAE,2BAA2B,CAAC;KAC7C,MAAM,CAAC,aAAa,CAAC,CAAC;AAEzB,OAAO,CAAC,KAAK,EAAE,CAAC"}

package/dist/commands/figma.d.ts

@@ -0,0 +1,16 @@
+interface FigmaOptions {
+    output: string;
+    pages?: string[];
+}
+/**
+ * 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 declare function figmaCommand(figmaUrl: string, options: FigmaOptions): Promise<void>;
+export {};
+//# sourceMappingURL=figma.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"figma.d.ts","sourceRoot":"","sources":["../../src/commands/figma.ts"],"names":[],"mappings":"AAIA,UAAU,YAAY;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;CAClB;AAED;;;;;;;;GAQG;AACH,wBAAsB,YAAY,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,CA0DzF"}