@botim/botim-cli 0.1.6 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botim/botim-cli",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "A CLI tool that generates boilerplate code for React and Vue applications and manages Mini-Program apps",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -13,8 +13,7 @@
     "LICENSE"
   ],
   "scripts": {
-    "build": "tsup && npm run copy-templates && npm run build:bundle",
-    "copy-templates": "cp -r templates dist/templates",
+    "build": "tsup && npm run build:bundle",
     "build:bundle": "ncc build src/cli.ts -o dist-bundled -m -e @vercel/ncc && cp dist-bundled/index.js dist/cli.mjs && cp dist-bundled/sourcemap-register.cjs dist/ 2>/dev/null || true && rm -rf dist-bundled && npm run inject-version",
     "inject-version": "node -e \"const fs=require('fs');const pkg=require('./package.json');const f='dist/cli.mjs';let c=fs.readFileSync(f,'utf8');c=c.replace(/process\\.env\\.BOTIM_CLI_VERSION\\|\\|\\\"1\\.0\\.0\\\"/g,'\\\"'+pkg.version+'\\\"');fs.writeFileSync(f,c);\"",
     "build:tsup": "tsup",

package/dist/templates/templates/react/README.md

@@ -1,48 +0,0 @@
-# React + Vite Mini Program Template
-
-This template captures the reusable project structure, tooling, and architectural patterns from the original repository without including product-specific business logic. Use it as the starting point for new React + Vite micro-applications that rely on Emotion, Zustand, routing, and i18n.
-
-## What's Included
-
-- Vite + React + TypeScript baseline
-- Emotion styling with global theme helpers
-- React Router with centralized route definitions
-- i18n setup with lazy-loaded namespaces
-- Zustand-powered state management scaffold
-- Modular folder structure for APIs, modules, pages, and shared UI components
-- ESLint + TypeScript configs aligned with the original code style
-
-## Getting Started
-
-```bash
-npm install
-npm run dev
-```
-
-## Project Structure
-
-```
-src/
-  api/          # API modules and service wrappers
-  components/   # Reusable UI components
-  hooks/        # Custom React hooks
-  i18n/         # Localization configuration
-  modules/      # Domain modules composed from core + common utilities
-  pages/        # Route-level views
-  stores/       # Zustand stores
-  styles/       # Global styles and utility classes
-  theme/        # Theme tokens and helpers
-  utils/        # General-purpose utilities
-```
-
-## Customization Checklist
-
-1. Update `package.json` metadata (`name`, `version`, `description`).
-2. Replace placeholder assets and translations in `src/assets` and `src/i18n/languages`.
-3. Flesh out routes inside `src/routes.tsx`.
-4. Extend stores, modules, and API clients as needed.
-5. Adjust ESLint rules or tooling to match team conventions.
-
-## Optional Integrations
-
-The original project integrates several proprietary Botim packages (MP bridge, Buckit resolver, Sentry plugin, etc.). Add them back in `vite.config.ts` or `package.json` if the consuming project requires them.

package/dist/templates/templates/react/docs/code-patterns.md

@@ -1,139 +0,0 @@
-# Code Patterns
-
-## Generation Order
-
-```
-Types → API → Hooks → Components → Page → Routes
-```
-
-```
-src/
-├── types/{feature}.types.ts
-├── api/modules/{feature}.api.ts
-├── hooks/use{Feature}.ts
-├── pages/{feature}/
-│   ├── index.tsx
-│   └── components/
-└── routes.tsx
-```
-
----
-
-## Hook Patterns
-
-### Data Fetching
-```typescript
-export function useItems() {
-  const [items, setItems] = useState<Item[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  const fetchItems = useCallback(async () => {
-    try {
-      setLoading(true);
-      const data = await itemApi.getAll();
-      setItems(data);
-    } catch (err) {
-      setError(err.message);
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  useEffect(() => { fetchItems(); }, []);
-  return { items, loading, error, refetch: fetchItems };
-}
-```
-
-### Form Hook
-```typescript
-export function useForm<T>(initial: T) {
-  const [data, setData] = useState(initial);
-  const [errors, setErrors] = useState({});
-
-  const handleChange = (field: keyof T, value: T[keyof T]) => {
-    setData(prev => ({ ...prev, [field]: value }));
-  };
-
-  const handleSubmit = async (submitFn: (data: T) => Promise<void>) => {
-    try {
-      await submitFn(data);
-      return true;
-    } catch (err) {
-      setErrors({ submit: err.message });
-      return false;
-    }
-  };
-
-  return { data, errors, handleChange, handleSubmit };
-}
-```
-
-### Bridge API Hook
-```typescript
-import { useBOT } from '@botim/framework';
-
-export function useLocation() {
-  const BOT = useBOT();
-  const [location, setLocation] = useState(null);
-  const [loading, setLoading] = useState(false);
-
-  const getLocation = useCallback(() => {
-    setLoading(true);
-    BOT.getLocation({
-      success: (res) => setLocation(res),
-      fail: (err) => console.error(err),
-      complete: () => setLoading(false)
-    });
-  }, [BOT]);
-
-  return { location, loading, getLocation };
-}
-```
-
----
-
-## Component Pattern
-
-```typescript
-// ComponentName.tsx
-import React from 'react';
-import { Container } from './ComponentName.styles';
-import type { ComponentNameProps } from './ComponentName.types';
-
-export const ComponentName: React.FC<ComponentNameProps> = ({ title }) => {
-  return <Container>{title}</Container>;
-};
-```
-
-### List with States
-```typescript
-const ItemList = () => {
-  const { items, loading, error } = useItems();
-  if (loading) return <LoadingSpinner />;
-  if (error) return <ErrorMessage message={error} />;
-  return <List>{items.map(item => <ItemCard key={item.id} {...item} />)}</List>;
-};
-```
-
----
-
-## Custom Component Structure
-
-```
-ComponentName/
-├── index.ts
-├── ComponentName.tsx
-├── ComponentName.styles.ts
-└── ComponentName.types.ts
-```
-
----
-
-## Validation Commands
-
-```bash
-npm run type-check
-npm run build
-npm run lint:fix
-```

package/dist/templates/templates/react/docs/core-rules.md

@@ -1,69 +0,0 @@
-# Core Rules
-
-## Rule 1: Code Connect Components
-
-When Code Connect provides a mapping, use the component directly from code-connect components
-
-```tsx
-// Check Code Connect first
-const codeConnect = await mcp__botim-figma-mcp__get_code_connect_map({ fileKey, nodeId });
-
-// Use library components directly
-Use code connect components
-
-// For spacing, use wrapper div
-<div style={{ padding: 16 }}><Header /></div>
-```
-
----
-
-## Rule 2: Mobile-First
-
-- Viewport: 375-428px
-- Touch targets: 44x44px minimum
-- Base styles for mobile, media queries for larger screens
-
-```typescript
-const Container = styled.div`
-  padding: 16px;
-  @media (min-width: 768px) { padding: 24px; }
-`;
-```
-
----
-
-## Rule 3: Layer Separation
-
-| Layer | Location | Purpose |
-|-------|----------|---------|
-| UI | `pages/`, `components/` | JSX only |
-| Hooks | `hooks/` | Logic, data fetching |
-| API | `api/modules/` | HTTP calls |
-| Types | `*.types.ts` | Interfaces |
-| Styles | `*.styles.ts` | Styled components |
-
-**Components never call APIs directly** - use hooks.
-
----
-
-## Rule 4: File Limits
-
-- Components: **100 lines max**
-- Split into: `.tsx`, `.styles.ts`, `.types.ts`
-- Use `@/` for cross-directory imports
-
----
-
-## Rule 5: TypeScript
-
-- No `any` types
-- Type-only imports: `import type { T } from '@/types'`
-- All hook returns must be typed
-
----
-
-## Rule 6: Styling
-
-- Emotion styled-components only
-- No inline styles, no CSS files
-- Transient props use `$` prefix

package/dist/templates/templates/react/docs/figma-workflow.md

@@ -1,81 +0,0 @@
-# Figma Workflow
-
-## MCP Servers
-
-### botim-figma-mcp
-- `get_design_context`: Layout, styles, structure
-- `get_screenshot`: Visual reference
-- `get_variable_defs`: Design tokens
-- `get_code_connect_map`: Component mappings
-
-### botim-mp-mcp
-- `get_doc_content('botim-components')`: Component docs
-- `get_icons_library()`: Icons catalog
-- `get_all_sdk_methods()`: Native bridge APIs
-- `search_docs()` / `list_docs()`: Backend API docs
-
----
-
-## Implementation Workflow
-
-### Step 1: Fetch Design
-```typescript
-const design = await mcp__botim-figma-mcp__get_design_context({ fileKey, nodeId });
-const screenshot = await mcp__botim-figma-mcp__get_screenshot({ fileKey, nodeId });
-const variables = await mcp__botim-figma-mcp__get_variable_defs({ fileKey, nodeId });
-```
-
-### Step 2: Check Code Connect (Required)
-```typescript
-const codeConnect = await mcp__botim-figma-mcp__get_code_connect_map({ fileKey, nodeId });
-```
-
-### Step 3: Get Component Details
-```typescript
-await mcp__botim-mp-mcp__get_doc_content('botim-components');
-```
-
-### Step 4: Apply Design Tokens
-Extract exact values from Figma:
-- Colors (hex values)
-- Typography (font-size, weight, line-height)
-- Spacing (padding, margin, gap)
-- Border radius, shadows
-
-```typescript
-const styles = {
-  background: '#F5F7FA',
-  padding: '16px 24px',
-  borderRadius: '12px',
-};
-```
-
----
-
-## Component Priority
-
-1. **Code Connect mapped** → Use those first
-2. **Not available** → Create custom (rare)
-
----
-
-## Import Pattern
-
-```typescript
-
-// Bridge APIs
-import { useBOT } from '@botim/framework';
-const BOT = useBOT();
-
-// Backend APIs
-import { httpClient } from '@/api/http-client';
-```
-
----
-
-## Visual Match Target: 95%+
-
-Validate against Figma:
-- Colors, typography, spacing
-- Layout, alignment, icons
-- Shadows, borders

package/dist/templates/templates/react/docs/validation.md

@@ -1,59 +0,0 @@
-# Validation
-
-## Quick Validation
-
-### Step 1: Code Check
-```bash
-npm run type-check && npm run build && npm run lint:fix
-```
-
-### Step 2: Visual Validation
-```typescript
-// Mobile viewport required
-mcp__playwright__browser_resize({ width: 375, height: 667 })
-
-// Navigate and screenshot
-mcp__playwright__browser_navigate({ url: "http://localhost:5173/route" })
-mcp__playwright__browser_wait_for({ time: 2 })
-mcp__playwright__browser_take_screenshot({ fullPage: true })
-
-// Compare with Figma
-mcp__botim-figma-mcp__get_screenshot({ fileKey, nodeId })
-```
-
-### Step 3: Use Implementation Validator
-```typescript
-Task({
-  subagent_type: "implementation-validator",
-  prompt: "Validate PRD requirements, routes, visual match with Figma"
-})
-```
-
----
-
-## Match Threshold
-
-| Match % | Action |
-|---------|--------|
-| < 98% | Fix spacing/margins |
-| 98%+ | Pass |
-
----
-
-## Spacing Checklist
-
-- Container padding
-- Margin between elements
-- Gap in flex/grid
-- Text spacing from borders
-
----
-
-## Common Fixes
-
-| Error | Fix |
-|-------|-----|
-| `Cannot find module 'X'` | `npm install X` |
-| `Property 'X' does not exist` | Check interface |
-| `Type 'X' is not assignable` | Fix type |
-| `'X' defined but never used` | Remove import |

package/dist/templates/templates/react/eslint.config.ts

@@ -1,57 +0,0 @@
-import js from '@eslint/js';
-import eslintPluginReact from 'eslint-plugin-react';
-import eslintPluginReactHooks from 'eslint-plugin-react-hooks';
-import eslintPluginImport from 'eslint-plugin-import';
-// jsx-a11y plugin ships without TS types
-import eslintPluginJsxA11y from 'eslint-plugin-jsx-a11y';
-import eslintPluginSimpleImportSort from 'eslint-plugin-simple-import-sort';
-import tseslint from 'typescript-eslint';
-
-export default tseslint.config(
-    {
-        ignores: [
-            'dist',
-            'coverage'
-        ]
-    },
-    js.configs.recommended,
-    ...tseslint.configs.recommended,
-    {
-        files: [ '**/*.ts', '**/*.tsx' ],
-        languageOptions: {
-            parserOptions: {
-                ecmaVersion: 'latest',
-                sourceType: 'module'
-            }
-        },
-        plugins: {
-            react: eslintPluginReact,
-            'react-hooks': eslintPluginReactHooks,
-            import: eslintPluginImport,
-            'jsx-a11y': eslintPluginJsxA11y as unknown as import('eslint').ESLint.Plugin,
-            'simple-import-sort': eslintPluginSimpleImportSort
-        },
-        settings: {
-            react: {
-                version: 'detect'
-            },
-            'import/resolver': {
-                typescript: true,
-                node: {
-                    extensions: [ '.js', '.jsx', '.ts', '.tsx' ]
-                }
-            }
-        },
-        rules: {
-            'react/react-in-jsx-scope': 'off',
-            'react/prop-types': 'off',
-            'react/jsx-uses-react': 'off',
-            'react/jsx-uses-vars': 'error',
-            'react-hooks/rules-of-hooks': 'error',
-            'react-hooks/exhaustive-deps': 'warn',
-            'import/order': 'off',
-            'simple-import-sort/imports': 'error',
-            'simple-import-sort/exports': 'error'
-        }
-    }
-);

package/dist/templates/templates/react/index.html

@@ -1,12 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>React Mini App</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>