@wangs-ui/create-react-app 1.0.39 → 1.0.40

package/dist/bin.js

@@ -1215,7 +1215,7 @@ function initGitRepository(targetDir) {
 	}
 }
 //#endregion
-//#region ../skills/dist/src-95qOyh-g.js
+//#region ../skills/dist/src-ER4GIzua.js
 var SKILL_default$5 = "---\nname: create-form\ndescription: Real-world patterns for building strongly-typed forms, multipart file uploads, server validation mapping, and dirty tracking with @wangs-ui/form.\n---\n\n# Skill: Real-World Form Workflows with `@wangs-ui/form`\n\nUse this skill when building CRUD forms, data entry dialogs, multi-field settings pages, or multipart forms in Wangs UI applications.\n\n---\n\n## 1. MCP Inspection Step (Before Building Fields)\n\nBefore implementing specific input controls, query the MCP server to inspect their exact prop signatures:\n\n- `get-documentation({ id: \"select\" })` — Check option formats (`{ label, value }` vs object).\n- `get-documentation({ id: \"datepicker\" })` — Check `selectionMode` (`single`, `range`, `multiple`) and date format props.\n- `get-documentation({ id: \"multiselect\" })` — Check chips display and filter behavior.\n- `get-documentation({ id: \"fileupload\" })` — Check accepted mime types and upload handlers.\n\n---\n\n## 2. Recipe 1: Standard CRUD Form with Server Validation Mapping\n\nReal-world forms must handle async submission, loading state, and map backend validation errors back into `<Field>` errors:\n\n```tsx\nimport React, { useState } from 'react';\nimport Card from '@wangs-ui/react-core/primitive/card';\nimport Button from '@wangs-ui/react-core/primitive/button';\nimport InputText from '@wangs-ui/react-core/primitive/inputtext';\nimport Select from '@wangs-ui/react-core/primitive/select';\nimport { Form, Field } from '@wangs-ui/react-core';\nimport { useFormControl } from '@wangs-ui/form';\nimport { useI18n } from '@wangs-ui/react-i18n';\n\ninterface UserFormValues {\n  fullName: string;\n  email: string;\n  role: string;\n}\n\nexport default function UserForm({ onSuccess }: { onSuccess?: () => void }) {\n  const { t } = useI18n();\n  const formControl = useFormControl<UserFormValues>({ type: 'json' });\n  const [isSubmitting, setIsSubmitting] = useState(false);\n\n  const roleOptions = [\n    { label: t('Administrator'), value: 'admin' },\n    { label: t('Operator'), value: 'operator' },\n    { label: t('Viewer'), value: 'viewer' },\n  ];\n\n  const handleSubmit = async (values: UserFormValues) => {\n    setIsSubmitting(true);\n    try {\n      // Execute API call: await api.createUser(values);\n      onSuccess?.();\n    } catch (err: any) {\n      // Map server validation error directly to field\n      if (err?.fieldErrors?.email) {\n        formControl.setError('email', {\n          type: 'server',\n          message: err.fieldErrors.email,\n        });\n      }\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  return (\n    <Card className=\"p-6\">\n      <Form control={formControl} onSubmit={handleSubmit} className=\"flex flex-col gap-m\">\n        <h2 className=\"heading-2\">{t('User Information')}</h2>\n\n        {/* Text Field */}\n        <Field<string>\n          name=\"fullName\"\n          label={t('Full Name')}\n          required\n          rules={{ required: t('Full name is required') }}\n        >\n          {(field) => (\n            <InputText {...field} placeholder={t('e.g. Jane Doe')} value={field.value || ''} />\n          )}\n        </Field>\n\n        {/* Email Field with Regex Validation */}\n        <Field<string>\n          name=\"email\"\n          label={t('Email Address')}\n          required\n          rules={{\n            required: t('Email is required'),\n            pattern: {\n              value: /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/,\n              message: t('Enter a valid email address'),\n            },\n          }}\n        >\n          {(field) => (\n            <InputText {...field} placeholder={t('name@company.com')} value={field.value || ''} />\n          )}\n        </Field>\n\n        {/* Select Dropdown Field */}\n        <Field<string>\n          name=\"role\"\n          label={t('Access Role')}\n          required\n          rules={{ required: t('Role selection is required') }}\n        >\n          {(field) => (\n            <Select\n              {...field}\n              options={roleOptions}\n              placeholder={t('Select role')}\n              value={field.value}\n              onChange={(e) => field.onChange(e.value)}\n            />\n          )}\n        </Field>\n\n        {/* Form Actions */}\n        <div className=\"flex justify-end gap-s pt-s\">\n          <Button\n            type=\"button\"\n            variant=\"text\"\n            label={t('Reset')}\n            onClick={() => formControl.reset()}\n            disabled={isSubmitting}\n          />\n          <Button type=\"submit\" label={t('Save User')} severity=\"primary\" loading={isSubmitting} />\n        </div>\n      </Form>\n    </Card>\n  );\n}\n```\n\n---\n\n## 3. Recipe 2: Multipart Form (File Upload + Metadata)\n\nFor file uploads (avatar, attachment, documents), set `type: 'formdata'`:\n\n```tsx\nimport { useFormControl } from '@wangs-ui/form';\n\ninterface ProfileUploadValues {\n  displayName: string;\n  avatar: File | null;\n}\n\n// Generates FormData under the hood\nconst formControl = useFormControl<ProfileUploadValues>({ type: 'formdata' });\n```\n\n---\n\n## 4. Key Implementation Rules\n\n1. **Always Use `<Form>` & `<Field>`**: Never bind raw uncontrolled inputs.\n2. **Translate All Labels & Error Messages**: Wrap text in `t('...')`.\n3. **Handle Loading State**: Disable reset buttons and set `loading={isSubmitting}` on submit buttons.\n";
 var SKILL_default$4 = "---\nname: data-table\ndescription: Real-world patterns for building full CRUD DataTables with server pagination, search filters, batch actions, and confirmation modals.\n---\n\n# Skill: Real-World DataTable & Filter Workflows\n\nUse this skill when building administrative grids, filtered listing pages, or management dashboards with `@wangs-ui/react-core`.\n\n---\n\n## 1. MCP Inspection Step (Before Building Table)\n\nQuery the MCP server to inspect supported features and slots:\n\n- `get-documentation({ id: \"datatable\" })` — Check `paginator`, `lazy`, `onPage`, `onSort`, `selectionMode`, and `dataKey`.\n- `get-documentation({ id: \"column\" })` — Check `body` template, `sortable`, `frozen`, and `headerStyle`.\n- `get-documentation({ id: \"tag\" })` — Check severity colors for status pill badges (`success`, `warning`, `danger`, `info`).\n\n---\n\n## 2. Recipe: Full CRUD Data Grid with Filter Toolbar & Batch Actions\n\n```tsx\nimport React, { useState } from 'react';\nimport DataTable, { Column } from '@wangs-ui/react-core/primitive/datatable';\nimport Button from '@wangs-ui/react-core/primitive/button';\nimport InputText from '@wangs-ui/react-core/primitive/inputtext';\nimport Select from '@wangs-ui/react-core/primitive/select';\nimport Tag from '@wangs-ui/react-core/primitive/tag';\nimport Dialog from '@wangs-ui/react-core/primitive/dialog';\nimport Card from '@wangs-ui/react-core/primitive/card';\nimport { useI18n } from '@wangs-ui/react-i18n';\nimport { SearchLine, DeleteBin6Line, EditLine, AddLine } from '@wangs-ui/react-icons';\n\ninterface CustomerRecord {\n  id: string;\n  name: string;\n  email: string;\n  status: 'active' | 'pending' | 'suspended';\n  createdAt: string;\n}\n\nexport default function CustomerManagementView() {\n  const { t } = useI18n();\n  const [records, setRecords] = useState<CustomerRecord[]>([]);\n  const [loading, setLoading] = useState(false);\n  const [searchQuery, setSearchQuery] = useState('');\n  const [selectedStatus, setSelectedStatus] = useState<string | null>(null);\n  const [selectedRows, setSelectedRows] = useState<CustomerRecord[]>([]);\n  const [deleteTarget, setDeleteTarget] = useState<CustomerRecord | null>(null);\n\n  // Status Badge Template\n  const statusTemplate = (row: CustomerRecord) => {\n    const severityMap: Record<string, 'success' | 'warning' | 'danger'> = {\n      active: 'success',\n      pending: 'warning',\n      suspended: 'danger',\n    };\n    return <Tag value={t(row.status)} severity={severityMap[row.status] || 'info'} />;\n  };\n\n  // Row Actions Template\n  const actionsTemplate = (row: CustomerRecord) => (\n    <div className=\"flex items-center gap-xs\">\n      <Button\n        variant=\"text\"\n        icon={<EditLine />}\n        aria-label={t('Edit')}\n        onClick={() => console.log('Edit', row.id)}\n      />\n      <Button\n        variant=\"text\"\n        severity=\"danger\"\n        icon={<DeleteBin6Line />}\n        aria-label={t('Delete')}\n        onClick={() => setDeleteTarget(row)}\n      />\n    </div>\n  );\n\n  return (\n    <Card className=\"flex flex-col gap-m p-6\">\n      {/* 1. Filter & Search Toolbar */}\n      <div className=\"flex flex-wrap items-center justify-between gap-s\">\n        <div className=\"flex flex-wrap items-center gap-s\">\n          <InputText\n            value={searchQuery}\n            onChange={(e) => setSearchQuery(e.target.value)}\n            placeholder={t('Search customer...')}\n            className=\"w-64\"\n          />\n          <Select\n            value={selectedStatus}\n            options={[\n              { label: t('All Statuses'), value: null },\n              { label: t('Active'), value: 'active' },\n              { label: t('Pending'), value: 'pending' },\n              { label: t('Suspended'), value: 'suspended' },\n            ]}\n            onChange={(e) => setSelectedStatus(e.value)}\n            placeholder={t('Filter status')}\n          />\n        </div>\n\n        <Button label={t('Add Customer')} icon={<AddLine />} severity=\"primary\" />\n      </div>\n\n      {/* 2. Batch Selection Action Bar */}\n      {selectedRows.length > 0 && (\n        <div className=\"flex items-center justify-between rounded bg-primary-50 px-4 py-2 text-primary-900\">\n          <span className=\"p font-medium\">\n            {t('{{count}} items selected', { count: selectedRows.length })}\n          </span>\n          <Button\n            size=\"small\"\n            severity=\"danger\"\n            label={t('Delete Selected')}\n            icon={<DeleteBin6Line />}\n            onClick={() => console.log('Batch delete', selectedRows)}\n          />\n        </div>\n      )}\n\n      {/* 3. Paginated DataTable */}\n      <DataTable\n        value={records}\n        loading={loading}\n        selection={selectedRows}\n        onSelectionChange={(e) => setSelectedRows(e.value)}\n        dataKey=\"id\"\n        paginator\n        rows={10}\n        rowsPerPageOptions={[10, 25, 50]}\n        emptyMessage={t('No customers found')}\n      >\n        <Column selectionMode=\"multiple\" headerStyle={{ width: '3rem' }} />\n        <Column field=\"name\" header={t('Customer Name')} sortable />\n        <Column field=\"email\" header={t('Email')} sortable />\n        <Column field=\"status\" header={t('Status')} body={statusTemplate} sortable />\n        <Column header={t('Actions')} body={actionsTemplate} headerStyle={{ width: '6rem' }} />\n      </DataTable>\n\n      {/* 4. Delete Confirmation Dialog */}\n      <Dialog\n        visible={!!deleteTarget}\n        onHide={() => setDeleteTarget(null)}\n        header={t('Delete Customer')}\n        footer={\n          <div className=\"flex justify-end gap-xs\">\n            <Button variant=\"text\" label={t('Cancel')} onClick={() => setDeleteTarget(null)} />\n            <Button\n              severity=\"danger\"\n              label={t('Delete')}\n              onClick={() => {\n                // Execute delete API\n                setDeleteTarget(null);\n              }}\n            />\n          </div>\n        }\n      >\n        <p className=\"p\">\n          {t('Are you sure you want to delete {{name}}?', { name: deleteTarget?.name })}\n        </p>\n      </Dialog>\n    </Card>\n  );\n}\n```\n\n---\n\n## 3. Mandatory Best Practices\n\n1. **Always Supply `dataKey`**: Never enable row selection without `dataKey=\"id\"`.\n2. **Translate All Headers & Messages**: Pass table headers and empty state messages into `t()`.\n3. **Control Batch Action Appearance**: Show batch action banner only when `selectedRows.length > 0`.\n";
 var SKILL_default$3 = "---\nname: dialog-modal\ndescription: Real-world patterns for modal forms, async confirmation workflows, and multi-step dialogs with Wangs UI Dialog and Modal components.\n---\n\n# Skill: Real-World Dialog & Modal Workflows\n\nUse this skill when building interactive modals, create/edit modal forms, destructive action confirmations, or slide-in overlay panels.\n\n---\n\n## 1. MCP Inspection Step (Before Implementing Overlays)\n\nQuery the MCP server to check overlay configuration and animation options:\n\n- `get-documentation({ id: \"dialog\" })` — Check `header`, `footer`, `visible`, `onHide`, `modal`, and `dismissableMask`.\n- `get-documentation({ id: \"modal\" })` — Check fullscreen modes, size variants, and slide-in drawer options.\n- `get-documentation({ id: \"toast\" })` — Check severity toasts (`success`, `error`, `info`, `warn`) to trigger after modal actions.\n\n---\n\n## 2. Recipe: Create/Edit Form inside a Modal Dialog\n\nThis real-world recipe coordinates a modal wrapper with an embedded `@wangs-ui/form`, handles saving state, prevents accidental dismiss while saving, and resets state upon close:\n\n```tsx\nimport React, { useState, useEffect } from 'react';\nimport Dialog from '@wangs-ui/react-core/primitive/dialog';\nimport Button from '@wangs-ui/react-core/primitive/button';\nimport InputText from '@wangs-ui/react-core/primitive/inputtext';\nimport { Form, Field } from '@wangs-ui/react-core';\nimport { useFormControl } from '@wangs-ui/form';\nimport { useI18n } from '@wangs-ui/react-i18n';\n\ninterface EditItemModel {\n  title: string;\n  code: string;\n}\n\ninterface ItemModalProps {\n  visible: boolean;\n  item?: EditItemModel | null;\n  onHide: () => void;\n  onSaved: (item: EditItemModel) => void;\n}\n\nexport default function ItemFormModal({ visible, item, onHide, onSaved }: ItemModalProps) {\n  const { t } = useI18n();\n  const formControl = useFormControl<EditItemModel>({ type: 'json' });\n  const [saving, setSaving] = useState(false);\n\n  // Sync form values when modal opens or item changes\n  useEffect(() => {\n    if (visible) {\n      formControl.reset(item || { title: '', code: '' });\n    }\n  }, [visible, item]);\n\n  const handleFormSubmit = async (values: EditItemModel) => {\n    setSaving(true);\n    try {\n      // Execute API call: await api.save(values);\n      onSaved(values);\n      onHide();\n    } finally {\n      setSaving(false);\n    }\n  };\n\n  const footerActions = (\n    <div className=\"flex justify-end gap-xs\">\n      <Button type=\"button\" variant=\"text\" label={t('Cancel')} onClick={onHide} disabled={saving} />\n      <Button\n        type=\"submit\"\n        form=\"modal-item-form\"\n        label={item ? t('Save Changes') : t('Create Item')}\n        severity=\"primary\"\n        loading={saving}\n      />\n    </div>\n  );\n\n  return (\n    <Dialog\n      visible={visible}\n      onHide={() => !saving && onHide()}\n      header={item ? t('Edit Item') : t('New Item')}\n      footer={footerActions}\n      style={{ width: '450px' }}\n      modal\n    >\n      <Form\n        id=\"modal-item-form\"\n        control={formControl}\n        onSubmit={handleFormSubmit}\n        className=\"flex flex-col gap-m pt-xs\"\n      >\n        <Field<string>\n          name=\"title\"\n          label={t('Item Title')}\n          required\n          rules={{ required: t('Title is required') }}\n        >\n          {(field) => (\n            <InputText {...field} placeholder={t('Enter title')} value={field.value || ''} />\n          )}\n        </Field>\n\n        <Field<string>\n          name=\"code\"\n          label={t('Item Code')}\n          required\n          rules={{ required: t('Code is required') }}\n        >\n          {(field) => (\n            <InputText {...field} placeholder={t('e.g. SKU-100')} value={field.value || ''} />\n          )}\n        </Field>\n      </Form>\n    </Dialog>\n  );\n}\n```\n\n---\n\n## 3. Mandatory Best Practices\n\n1. **Decouple Submit Button from Form Body**: Use `form=\"modal-item-form\"` on the submit button inside `footer` so actions stay neatly aligned in the footer bar.\n2. **Prevent Close During Mutation**: Guard `onHide={() => !saving && onHide()}` to prevent accidental dismissal during in-flight network requests.\n3. **Always Reset on Open**: Sync initial values in an effect keyed on `visible`.\n";
@@ -1432,7 +1432,7 @@ async function promptUser(initialOptions) {
 		skills: skills || allSkills.map((s) => s.id),
 		git: git !== void 0 ? git : true
 	};
-	intro(`\x1b[36m🚀 Wangs UI React App Scaffolder\x1b[0m (v1.0.39)`);
+	intro(`\x1b[36m🚀 Wangs UI React App Scaffolder\x1b[0m (v1.0.40)`);
 	if (!projectName) {
 		const nameResponse = await text({
 			message: "What is your project name?",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wangs-ui/create-react-app",
-  "version": "1.0.39",
+  "version": "1.0.40",
   "description": "Scaffold a modern React app with Wangs UI, Vite 8, Oxlint, Oxfmt, and AI Agent MCP integration",
   "keywords": [
     "antigravity",
@@ -51,7 +51,7 @@
   },
   "dependencies": {
     "@clack/prompts": "^1.7.0",
-    "@wangs-ui/skills": "1.0.39"
+    "@wangs-ui/skills": "1.0.40"
   },
   "devDependencies": {},
   "scripts": {

package/template/package.json

@@ -13,10 +13,10 @@
     "format:check": "oxfmt --check"
   },
   "dependencies": {
-    "@wangs-ui/react-core": "^1.0.39",
-    "@wangs-ui/react-i18n": "^1.0.39",
-    "@wangs-ui/react-icons": "^1.0.39",
-    "@wangs-ui/react-presets": "^1.0.39",
+    "@wangs-ui/react-core": "^1.0.40",
+    "@wangs-ui/react-i18n": "^1.0.40",
+    "@wangs-ui/react-icons": "^1.0.40",
+    "@wangs-ui/react-presets": "^1.0.40",
     "clsx": "^2.1.1",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",