@botim/botim-cli 0.1.3 → 0.1.6

package/dist/templates/react/.botim/app.json5

@@ -0,0 +1,12 @@
+{
+  app: 'dummy-app',
+  type: 'hybrid',
+  theme: {
+    favorite: false,
+    container: 2,
+    titleBgColor: '000000',
+    titleTextColor: 'FFFFFF',
+    hideStatusBar: 0,
+    hideCloseButton: 1
+  }
+}

package/dist/templates/react/.botim/ci/post-version.sh

@@ -0,0 +1,7 @@
+#!/bin/bash
+
+cur_branch=`git symbolic-ref --short -q HEAD`
+
+TAG=r-${cur_branch}-$(date +%Y%m%d%H%M%S)
+git tag $TAG
+git push origin $TAG

package/dist/templates/react/.cursorrules

@@ -0,0 +1,37 @@
+# Mini Program Starter Template - AI Rules
+
+## Error Handling Rules
+
+1. **Async API Call Errors**: 
+   - Async API call errors should throw `AppError`
+   - Use `logger.error` to record all async API call errors
+
+2. **Event Handler Errors**:
+   - Errors in event handlers should not happen (prevent with proper validation)
+   - If an error occurs, it should be caught and logged appropriately
+
+3. **Error Boundary**:
+   - The error boundary itself cannot throw any errors
+   - Must be robust and handle all error scenarios gracefully
+
+4. **React Component Errors**:
+   - Errors in React component render should be caught by ErrorBoundary
+   - Errors in component lifecycle should be caught by ErrorBoundary
+   - Errors in constructor should be caught by ErrorBoundary
+
+## Code Quality
+
+- Follow TypeScript strict mode
+- Use ESLint rules as configured
+- Maintain consistent code style (4 spaces indentation)
+- Use i18next for all user-facing strings
+- Follow React hooks rules
+
+## Architecture
+
+- Use Zustand for state management
+- Use React Router for routing
+- Use Emotion for styling
+- Follow the established folder structure
+- Keep components reusable and modular
+

package/dist/templates/templates/react/.botim/app.json5

@@ -0,0 +1,12 @@
+{
+  app: 'dummy-app',
+  type: 'hybrid',
+  theme: {
+    favorite: false,
+    container: 2,
+    titleBgColor: '000000',
+    titleTextColor: 'FFFFFF',
+    hideStatusBar: 0,
+    hideCloseButton: 1
+  }
+}

package/dist/templates/templates/react/.botim/ci/post-version.sh

@@ -0,0 +1,7 @@
+#!/bin/bash
+
+cur_branch=`git symbolic-ref --short -q HEAD`
+
+TAG=r-${cur_branch}-$(date +%Y%m%d%H%M%S)
+git tag $TAG
+git push origin $TAG

package/dist/templates/templates/react/.cursorrules

@@ -0,0 +1,37 @@
+# Mini Program Starter Template - AI Rules
+
+## Error Handling Rules
+
+1. **Async API Call Errors**: 
+   - Async API call errors should throw `AppError`
+   - Use `logger.error` to record all async API call errors
+
+2. **Event Handler Errors**:
+   - Errors in event handlers should not happen (prevent with proper validation)
+   - If an error occurs, it should be caught and logged appropriately
+
+3. **Error Boundary**:
+   - The error boundary itself cannot throw any errors
+   - Must be robust and handle all error scenarios gracefully
+
+4. **React Component Errors**:
+   - Errors in React component render should be caught by ErrorBoundary
+   - Errors in component lifecycle should be caught by ErrorBoundary
+   - Errors in constructor should be caught by ErrorBoundary
+
+## Code Quality
+
+- Follow TypeScript strict mode
+- Use ESLint rules as configured
+- Maintain consistent code style (4 spaces indentation)
+- Use i18next for all user-facing strings
+- Follow React hooks rules
+
+## Architecture
+
+- Use Zustand for state management
+- Use React Router for routing
+- Use Emotion for styling
+- Follow the established folder structure
+- Keep components reusable and modular
+

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

@@ -0,0 +1,48 @@
+# 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

@@ -0,0 +1,139 @@
+# 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

@@ -0,0 +1,69 @@
+# 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

@@ -0,0 +1,81 @@
+# 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

@@ -0,0 +1,59 @@
+# 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

@@ -0,0 +1,57 @@
+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

@@ -0,0 +1,12 @@
+<!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>