@famgia/omnify-typescript 0.0.27 → 0.0.29

package/ai-guides/antdesign-guide.md

@@ -0,0 +1,401 @@
+# Omnify + Ant Design Integration Guide
+
+This guide shows how to use Omnify-generated validation rules with Ant Design Forms.
+
+## Generated Files
+
+Omnify generates validation rules in `rules/` directory:
+- `rules/{Model}.rules.ts` - Validation rules for each model
+
+## File Structure
+
+```typescript
+// rules/User.rules.ts
+
+// Display name for model (multi-locale)
+export const UserDisplayName: LocaleMap = {
+  ja: 'ユーザー',
+  en: 'User',
+};
+
+// Display names for properties (multi-locale)
+export const UserPropertyDisplayNames: Record<string, LocaleMap> = {
+  name: { ja: '名前', en: 'Name' },
+  email: { ja: 'メールアドレス', en: 'Email' },
+};
+
+// Validation rules with multi-locale messages
+export const UserRules: Record<string, ValidationRule[]> = {
+  name: [
+    { required: true, message: { ja: '名前は必須です', en: 'Name is required' } },
+    { max: 100, message: { ja: '名前は100文字以内で入力してください', en: 'Name must be at most 100 characters' } },
+  ],
+  email: [
+    { required: true, message: { ja: 'メールアドレスは必須です', en: 'Email is required' } },
+    { type: 'email', message: { ja: 'メールアドレスの形式が正しくありません', en: 'Email is not a valid email address' } },
+  ],
+};
+
+// Helper functions
+export function getUserRules(locale: string): Record<string, Rule[]>;
+export function getUserDisplayName(locale: string): string;
+export function getUserPropertyDisplayName(property: string, locale: string): string;
+```
+
+## Basic Usage
+
+```tsx
+import { Form, Input, Button } from 'antd';
+import {
+  getUserRules,
+  getUserDisplayName,
+  getUserPropertyDisplayName
+} from '@/types/model/rules/User.rules';
+
+interface UserFormProps {
+  locale?: string;
+  onSubmit: (values: User) => void;
+}
+
+export function UserForm({ locale = 'ja', onSubmit }: UserFormProps) {
+  const [form] = Form.useForm();
+  const rules = getUserRules(locale);
+
+  return (
+    <Form
+      form={form}
+      layout="vertical"
+      onFinish={onSubmit}
+    >
+      <Form.Item
+        name="name"
+        label={getUserPropertyDisplayName('name', locale)}
+        rules={rules.name}
+      >
+        <Input placeholder={getUserPropertyDisplayName('name', locale)} />
+      </Form.Item>
+
+      <Form.Item
+        name="email"
+        label={getUserPropertyDisplayName('email', locale)}
+        rules={rules.email}
+      >
+        <Input type="email" />
+      </Form.Item>
+
+      <Form.Item>
+        <Button type="primary" htmlType="submit">
+          {locale === 'ja' ? '送信' : 'Submit'}
+        </Button>
+      </Form.Item>
+    </Form>
+  );
+}
+```
+
+## With Edit Mode (Initial Values)
+
+```tsx
+import { Form, Input, Button, Spin } from 'antd';
+import { getUserRules, getUserPropertyDisplayName } from '@/types/model/rules/User.rules';
+import { User } from '@/types/model';
+
+interface UserEditFormProps {
+  user: User;
+  locale?: string;
+  onSubmit: (values: Partial<User>) => void;
+  loading?: boolean;
+}
+
+export function UserEditForm({ user, locale = 'ja', onSubmit, loading }: UserEditFormProps) {
+  const [form] = Form.useForm();
+  const rules = getUserRules(locale);
+
+  // Set initial values when user data changes
+  React.useEffect(() => {
+    form.setFieldsValue(user);
+  }, [user, form]);
+
+  return (
+    <Spin spinning={loading}>
+      <Form
+        form={form}
+        layout="vertical"
+        initialValues={user}
+        onFinish={onSubmit}
+      >
+        <Form.Item
+          name="name"
+          label={getUserPropertyDisplayName('name', locale)}
+          rules={rules.name}
+        >
+          <Input />
+        </Form.Item>
+
+        <Form.Item
+          name="email"
+          label={getUserPropertyDisplayName('email', locale)}
+          rules={rules.email}
+        >
+          <Input type="email" />
+        </Form.Item>
+
+        <Form.Item>
+          <Button type="primary" htmlType="submit" loading={loading}>
+            {locale === 'ja' ? '更新' : 'Update'}
+          </Button>
+        </Form.Item>
+      </Form>
+    </Spin>
+  );
+}
+```
+
+## Dynamic Locale Switching
+
+```tsx
+import { Form, Input, Select } from 'antd';
+import { useState, useMemo } from 'react';
+import { getUserRules, getUserPropertyDisplayName, getUserDisplayName } from '@/types/model/rules/User.rules';
+
+export function UserFormWithLocale() {
+  const [locale, setLocale] = useState('ja');
+  const [form] = Form.useForm();
+
+  // Memoize rules to avoid recalculation
+  const rules = useMemo(() => getUserRules(locale), [locale]);
+
+  return (
+    <>
+      <Select value={locale} onChange={setLocale} style={{ marginBottom: 16 }}>
+        <Select.Option value="ja">日本語</Select.Option>
+        <Select.Option value="en">English</Select.Option>
+        <Select.Option value="vi">Tiếng Việt</Select.Option>
+      </Select>
+
+      <h2>{getUserDisplayName(locale)}</h2>
+
+      <Form form={form} layout="vertical">
+        <Form.Item
+          name="name"
+          label={getUserPropertyDisplayName('name', locale)}
+          rules={rules.name}
+        >
+          <Input />
+        </Form.Item>
+
+        <Form.Item
+          name="email"
+          label={getUserPropertyDisplayName('email', locale)}
+          rules={rules.email}
+        >
+          <Input type="email" />
+        </Form.Item>
+      </Form>
+    </>
+  );
+}
+```
+
+## With Table Columns
+
+```tsx
+import { Table, TableColumnsType } from 'antd';
+import { getUserPropertyDisplayName } from '@/types/model/rules/User.rules';
+import { User } from '@/types/model';
+
+interface UserTableProps {
+  users: User[];
+  locale?: string;
+  loading?: boolean;
+}
+
+export function UserTable({ users, locale = 'ja', loading }: UserTableProps) {
+  const columns: TableColumnsType<User> = [
+    {
+      title: getUserPropertyDisplayName('name', locale),
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: getUserPropertyDisplayName('email', locale),
+      dataIndex: 'email',
+      key: 'email',
+    },
+  ];
+
+  return (
+    <Table
+      columns={columns}
+      dataSource={users}
+      rowKey="id"
+      loading={loading}
+    />
+  );
+}
+```
+
+## Custom Form Hook
+
+```tsx
+import { Form, FormInstance } from 'antd';
+import { useMemo } from 'react';
+
+// Generic hook for any model's rules
+export function useModelForm<T>(
+  getRules: (locale: string) => Record<string, any[]>,
+  locale: string = 'ja'
+): {
+  form: FormInstance<T>;
+  rules: Record<string, any[]>;
+} {
+  const [form] = Form.useForm<T>();
+  const rules = useMemo(() => getRules(locale), [getRules, locale]);
+
+  return { form, rules };
+}
+
+// Usage
+import { getUserRules } from '@/types/model/rules/User.rules';
+
+function MyComponent() {
+  const { form, rules } = useModelForm(getUserRules, 'ja');
+
+  return (
+    <Form form={form}>
+      <Form.Item name="name" rules={rules.name}>
+        <Input />
+      </Form.Item>
+    </Form>
+  );
+}
+```
+
+## Modal Form
+
+```tsx
+import { Modal, Form, Input, message } from 'antd';
+import { getUserRules, getUserDisplayName, getUserPropertyDisplayName } from '@/types/model/rules/User.rules';
+import { User } from '@/types/model';
+
+interface UserModalFormProps {
+  open: boolean;
+  onClose: () => void;
+  onSubmit: (values: Partial<User>) => Promise<void>;
+  initialValues?: Partial<User>;
+  locale?: string;
+}
+
+export function UserModalForm({
+  open,
+  onClose,
+  onSubmit,
+  initialValues,
+  locale = 'ja'
+}: UserModalFormProps) {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+  const rules = getUserRules(locale);
+
+  const handleSubmit = async () => {
+    try {
+      const values = await form.validateFields();
+      setLoading(true);
+      await onSubmit(values);
+      message.success(locale === 'ja' ? '保存しました' : 'Saved successfully');
+      form.resetFields();
+      onClose();
+    } catch (error) {
+      if (error instanceof Error) {
+        message.error(error.message);
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Modal
+      title={getUserDisplayName(locale)}
+      open={open}
+      onCancel={onClose}
+      onOk={handleSubmit}
+      confirmLoading={loading}
+      okText={locale === 'ja' ? '保存' : 'Save'}
+      cancelText={locale === 'ja' ? 'キャンセル' : 'Cancel'}
+    >
+      <Form
+        form={form}
+        layout="vertical"
+        initialValues={initialValues}
+      >
+        <Form.Item
+          name="name"
+          label={getUserPropertyDisplayName('name', locale)}
+          rules={rules.name}
+        >
+          <Input />
+        </Form.Item>
+
+        <Form.Item
+          name="email"
+          label={getUserPropertyDisplayName('email', locale)}
+          rules={rules.email}
+        >
+          <Input type="email" />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+}
+```
+
+## Validation Rule Types
+
+Omnify generates these rule types based on schema:
+
+| Schema | Generated Rule |
+|--------|---------------|
+| `required: true` | `{ required: true, message: {...} }` |
+| `type: Email` | `{ type: 'email', message: {...} }` |
+| `maxLength: N` | `{ max: N, message: {...} }` |
+| `minLength: N` | `{ min: N, message: {...} }` |
+| `max: N` (numeric) | `{ max: N, type: 'number', message: {...} }` |
+| `min: N` (numeric) | `{ min: N, type: 'number', message: {...} }` |
+| `pattern: regex` | `{ pattern: /regex/, message: {...} }` |
+
+## Built-in Validation Messages
+
+Omnify includes templates for 5 languages:
+- Japanese (ja)
+- English (en)
+- Vietnamese (vi)
+- Korean (ko)
+- Chinese (zh)
+
+Custom templates can be configured in `omnify.config.ts`:
+
+```typescript
+export default defineConfig({
+  output: {
+    typescript: {
+      validationTemplates: {
+        required: {
+          ja: '${displayName}を入力してください',
+          en: '${displayName} is required',
+          vi: '${displayName} là bắt buộc',
+        },
+        maxLength: {
+          ja: '${displayName}は${max}文字以内です',
+          en: '${displayName} must be at most ${max} characters',
+        },
+      },
+    },
+  },
+});
+```
+
+Available placeholders:
+- `${displayName}` - Property display name
+- `${min}` - Minimum value/length
+- `${max}` - Maximum value/length

package/ai-guides/typescript-guide.md

@@ -0,0 +1,254 @@
+# Omnify TypeScript Generator Guide
+
+This guide covers TypeScript-specific features and generated code patterns for Omnify.
+
+## Generated Files
+
+When you run `npx omnify generate`, the following TypeScript files are generated:
+
+- `base/*.ts` - Base model interfaces
+- `enum/*.ts` - Enum types with multi-locale labels
+- `rules/*.ts` - Ant Design compatible validation rules
+
+## Type Generation
+
+### Object Schema → Interface
+
+```yaml
+# yaml-language-server: $schema=./node_modules/.omnify/combined-schema.json
+name: User
+properties:
+  id:
+    type: BigInt
+    required: true
+  name:
+    type: String
+    required: true
+    maxLength: 255
+  email:
+    type: String
+    required: true
+    unique: true
+  profile:
+    type: Json
+  createdAt:
+    type: DateTime
+```
+
+Generated:
+```typescript
+export interface User {
+  id: number;
+  name: string;
+  email: string;
+  profile: Record<string, unknown> | null;
+  createdAt: Date | null;
+}
+```
+
+## Type Mapping
+
+| Schema Type | TypeScript Type |
+|-------------|-----------------|
+| `String` | `string` |
+| `LongText` | `string` |
+| `Int` | `number` |
+| `BigInt` | `number` |
+| `Float` | `number` |
+| `Boolean` | `boolean` |
+| `Date` | `Date` |
+| `DateTime` | `Date` |
+| `Json` | `Record<string, unknown>` |
+| `EnumRef` | Generated enum type |
+| `Association` | Related model type / array |
+
+## Enum Generation (Multi-locale)
+
+```yaml
+# schemas/PostStatus.yaml
+name: PostStatus
+kind: enum
+displayName:
+  ja: 投稿ステータス
+  en: Post Status
+values:
+  draft:
+    ja: 下書き
+    en: Draft
+  published:
+    ja: 公開済み
+    en: Published
+  archived:
+    ja: アーカイブ
+    en: Archived
+```
+
+Generated:
+```typescript
+export const PostStatus = {
+  draft: 'draft',
+  published: 'published',
+  archived: 'archived',
+} as const;
+
+export type PostStatus = typeof PostStatus[keyof typeof PostStatus];
+
+// Multi-locale labels
+export const PostStatusLabels: Record<PostStatus, Record<string, string>> = {
+  draft: { ja: '下書き', en: 'Draft' },
+  published: { ja: '公開済み', en: 'Published' },
+  archived: { ja: 'アーカイブ', en: 'Archived' },
+};
+
+// Get label for specific locale
+export function getPostStatusLabel(value: PostStatus, locale: string = 'en'): string {
+  return PostStatusLabels[value]?.[locale] ?? PostStatusLabels[value]?.['en'] ?? value;
+}
+
+// Helper functions
+export const PostStatusValues = Object.values(PostStatus);
+export function isPostStatus(value: unknown): value is PostStatus {
+  return PostStatusValues.includes(value as PostStatus);
+}
+```
+
+## Validation Rules (Ant Design)
+
+Omnify generates Ant Design compatible validation rules in `rules/` directory.
+
+**See detailed guide:** `.claude/omnify/antdesign-guide.md`
+
+Quick example:
+```tsx
+import { Form, Input } from 'antd';
+import { getUserRules, getUserPropertyDisplayName } from './types/model/rules/User.rules';
+
+function UserForm({ locale = 'ja' }) {
+  const rules = getUserRules(locale);
+  return (
+    <Form>
+      <Form.Item name="name" label={getUserPropertyDisplayName('name', locale)} rules={rules.name}>
+        <Input />
+      </Form.Item>
+    </Form>
+  );
+}
+```
+
+## Association Types
+
+### ManyToOne
+```yaml
+author:
+  type: Association
+  relation: ManyToOne
+  target: User
+```
+
+Generated:
+```typescript
+export interface Post {
+  authorId: number;
+  author?: User;  // Optional: loaded relation
+}
+```
+
+### OneToMany
+```yaml
+posts:
+  type: Association
+  relation: OneToMany
+  target: Post
+```
+
+Generated:
+```typescript
+export interface User {
+  posts?: Post[];  // Optional: loaded relation array
+}
+```
+
+### ManyToMany
+```yaml
+tags:
+  type: Association
+  relation: ManyToMany
+  target: Tag
+```
+
+Generated:
+```typescript
+export interface Post {
+  tags?: Tag[];  // Optional: loaded relation array
+}
+```
+
+## Nullable Fields
+
+Fields without `required: true` are nullable:
+
+```yaml
+description:
+  type: LongText  # No required: true
+```
+
+Generated:
+```typescript
+description: string | null;
+```
+
+## Using Generated Types
+
+```typescript
+import { User, Post, PostStatus, isPostStatus } from './types/omnify-types';
+
+// Type-safe object creation
+const user: User = {
+  id: 1,
+  name: 'John',
+  email: 'john@example.com',
+  profile: null,
+  createdAt: new Date(),
+};
+
+// Enum usage
+const status: PostStatus = PostStatus.draft;
+
+// Type guard
+function handleStatus(value: unknown) {
+  if (isPostStatus(value)) {
+    console.log('Valid status:', value);
+  }
+}
+```
+
+## Commands
+
+```bash
+# Generate TypeScript types
+npx omnify generate
+
+# Force regenerate all files
+npx omnify generate --force
+```
+
+## Configuration
+
+```typescript
+// omnify.config.ts
+import { defineConfig } from '@famgia/omnify';
+
+export default defineConfig({
+  schemasDir: './schemas',
+  output: {
+    typescript: {
+      path: './src/types/model',
+      generateRules: true,  // Generate Ant Design validation rules
+    },
+  },
+  locale: {
+    locales: ['ja', 'en'],
+    defaultLocale: 'ja',
+  },
+});
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@famgia/omnify-typescript",
-  "version": "0.0.27",
+  "version": "0.0.29",
   "description": "TypeScript type definitions generator for Omnify schemas",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -30,7 +30,8 @@
   },
   "files": [
     "dist",
-    "scripts"
+    "scripts",
+    "ai-guides"
   ],
   "keywords": [
     "omnify",
@@ -47,7 +48,7 @@
     "directory": "packages/typescript-generator"
   },
   "dependencies": {
-    "@famgia/omnify-types": "0.0.35"
+    "@famgia/omnify-types": "0.0.37"
   },
   "devDependencies": {
     "tsup": "^8.5.1",

package/scripts/postinstall.js

@@ -2,228 +2,10 @@
 
 import fs from 'fs';
 import path from 'path';
+import { fileURLToPath } from 'url';
 
-const TYPESCRIPT_GUIDE_CONTENT = `# Omnify TypeScript Generator Guide
-
-This guide covers TypeScript-specific features and generated code patterns for Omnify.
-
-## Generated Files
-
-When you run \`npx omnify generate\`, the following TypeScript files are generated:
-
-- \`types/omnify-types.ts\` - All type definitions
-- \`types/enums.ts\` - Enum types and helpers
-
-## Type Generation
-
-### Object Schema → Interface
-
-\`\`\`yaml
-# yaml-language-server: $schema=./node_modules/.omnify/combined-schema.json
-name: User
-properties:
-  id:
-    type: BigInt
-    required: true
-  name:
-    type: String
-    required: true
-    maxLength: 255
-  email:
-    type: String
-    required: true
-    unique: true
-  profile:
-    type: Json
-  createdAt:
-    type: DateTime
-\`\`\`
-
-Generated:
-\`\`\`typescript
-export interface User {
-  id: number;
-  name: string;
-  email: string;
-  profile: Record<string, unknown> | null;
-  createdAt: Date | null;
-}
-\`\`\`
-
-## Type Mapping
-
-| Schema Type | TypeScript Type |
-|-------------|-----------------|
-| \`String\` | \`string\` |
-| \`LongText\` | \`string\` |
-| \`Int\` | \`number\` |
-| \`BigInt\` | \`number\` |
-| \`Float\` | \`number\` |
-| \`Boolean\` | \`boolean\` |
-| \`Date\` | \`Date\` |
-| \`DateTime\` | \`Date\` |
-| \`Json\` | \`Record<string, unknown>\` |
-| \`EnumRef\` | Generated enum type |
-| \`Association\` | Related model type / array |
-
-## Enum Generation
-
-\`\`\`yaml
-# schemas/PostStatus.yaml
-name: PostStatus
-kind: enum
-values:
-  draft: 下書き
-  published: 公開済み
-  archived: アーカイブ
-\`\`\`
-
-Generated:
-\`\`\`typescript
-export const PostStatus = {
-  draft: 'draft',
-  published: 'published',
-  archived: 'archived',
-} as const;
-
-export type PostStatus = typeof PostStatus[keyof typeof PostStatus];
-
-// Helper functions
-export const PostStatusValues = Object.values(PostStatus);
-export const PostStatusKeys = Object.keys(PostStatus) as (keyof typeof PostStatus)[];
-
-export function isPostStatus(value: unknown): value is PostStatus {
-  return PostStatusValues.includes(value as PostStatus);
-}
-
-// Display names for UI
-export const PostStatusDisplayNames: Record<PostStatus, string> = {
-  draft: '下書き',
-  published: '公開済み',
-  archived: 'アーカイブ',
-};
-
-export function getPostStatusDisplayName(value: PostStatus): string {
-  return PostStatusDisplayNames[value];
-}
-\`\`\`
-
-## Association Types
-
-### ManyToOne
-\`\`\`yaml
-author:
-  type: Association
-  relation: ManyToOne
-  target: User
-\`\`\`
-
-Generated:
-\`\`\`typescript
-export interface Post {
-  authorId: number;
-  author?: User;  // Optional: loaded relation
-}
-\`\`\`
-
-### OneToMany
-\`\`\`yaml
-posts:
-  type: Association
-  relation: OneToMany
-  target: Post
-\`\`\`
-
-Generated:
-\`\`\`typescript
-export interface User {
-  posts?: Post[];  // Optional: loaded relation array
-}
-\`\`\`
-
-### ManyToMany
-\`\`\`yaml
-tags:
-  type: Association
-  relation: ManyToMany
-  target: Tag
-\`\`\`
-
-Generated:
-\`\`\`typescript
-export interface Post {
-  tags?: Tag[];  // Optional: loaded relation array
-}
-\`\`\`
-
-## Nullable Fields
-
-Fields without \`required: true\` are nullable:
-
-\`\`\`yaml
-description:
-  type: LongText  # No required: true
-\`\`\`
-
-Generated:
-\`\`\`typescript
-description: string | null;
-\`\`\`
-
-## Using Generated Types
-
-\`\`\`typescript
-import { User, Post, PostStatus, isPostStatus } from './types/omnify-types';
-
-// Type-safe object creation
-const user: User = {
-  id: 1,
-  name: 'John',
-  email: 'john@example.com',
-  profile: null,
-  createdAt: new Date(),
-};
-
-// Enum usage
-const status: PostStatus = PostStatus.draft;
-
-// Type guard
-function handleStatus(value: unknown) {
-  if (isPostStatus(value)) {
-    console.log('Valid status:', value);
-  }
-}
-\`\`\`
-
-## Commands
-
-\`\`\`bash
-# Generate TypeScript types
-npx omnify generate --typescript
-
-# Generate to specific output
-npx omnify generate --typescript --output ./src/types
-
-# Watch for changes
-npx omnify watch --typescript
-\`\`\`
-
-## Configuration
-
-\`\`\`javascript
-// omnify.config.js
-export default {
-  schemasDir: './schemas',
-  typescript: {
-    outputDir: './types',
-    outputFile: 'omnify-types.ts',
-    enumsFile: 'enums.ts',
-    generateHelpers: true,  // Generate enum helpers
-    strictNullChecks: true  // Use | null for optional
-  }
-};
-\`\`\`
-`;
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 function findProjectRoot() {
   // npm/pnpm set INIT_CWD to the directory where the install was run
@@ -239,17 +21,30 @@ function findProjectRoot() {
   return null;
 }
 
-function createTypescriptSkillFile(projectRoot) {
+function copyAiGuidesToProject(projectRoot) {
   const omnifyDir = path.join(projectRoot, '.claude', 'omnify');
+  const aiGuidesDir = path.join(__dirname, '..', 'ai-guides');
 
   try {
+    // Create target directory
     if (!fs.existsSync(omnifyDir)) {
       fs.mkdirSync(omnifyDir, { recursive: true });
     }
 
-    const guidePath = path.join(omnifyDir, 'typescript-guide.md');
-    fs.writeFileSync(guidePath, TYPESCRIPT_GUIDE_CONTENT, 'utf-8');
-    console.log('  Created .claude/omnify/typescript-guide.md');
+    // Copy all files from ai-guides directory
+    if (fs.existsSync(aiGuidesDir)) {
+      const files = fs.readdirSync(aiGuidesDir);
+      for (const file of files) {
+        const srcPath = path.join(aiGuidesDir, file);
+        const destPath = path.join(omnifyDir, file);
+
+        if (fs.statSync(srcPath).isFile()) {
+          fs.copyFileSync(srcPath, destPath);
+          console.log(`  Created .claude/omnify/${file}`);
+        }
+      }
+    }
+
     return true;
   } catch {
     return false;
@@ -269,7 +64,7 @@ function main() {
 
   const projectRoot = findProjectRoot();
   if (projectRoot) {
-    createTypescriptSkillFile(projectRoot);
+    copyAiGuidesToProject(projectRoot);
   }
 }