@skopon-cool/form-sdk 0.1.0 → 0.1.1

package/package.json

@@ -3,9 +3,13 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Skopon form rendering SDK (A2UI + form_definition) with submit helpers",
   "type": "module",
+  "sideEffects": [
+    "*.css",
+    "dist/form-sdk.css"
+  ],
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -48,6 +52,8 @@
     "typescript": "~5.8.3",
     "vite": "^6.3.5",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^3.2.4"
+    "vitest": "^3.2.4",
+    "jsdom": "^29.1.1",
+    "@testing-library/react": "^16.3.2"
   }
 }

package/src/adapter/a2uiAdapter.test.ts

@@ -120,6 +120,29 @@ describe('a2uiAdapter blocks <-> surface', () => {
     expect(back.blocks.find((b) => b.name === 'tags')?.type).toBe('multiselect')
   })
 
+  it('round-trips textarea placeholder through blocksToA2ui', () => {
+    const doc = blocksToA2ui(
+      {
+        title: '',
+        description: '',
+        blocks: [
+          {
+            id: 'b-bio',
+            type: 'textarea',
+            name: 'bio',
+            label: '简介',
+            placeholder: '请填写简介',
+          },
+        ],
+      },
+      { includeHeader: false },
+    )
+    const bioNode = doc.components.find((c) => c.id === 'b-bio')
+    expect(bioNode?.placeholder).toBe('请填写简介')
+    const back = a2uiToBlocks(doc)
+    expect(back.blocks.find((b) => b.name === 'bio')?.placeholder).toBe('请填写简介')
+  })
+
   it('surfaceDocToMessages emits createSurface + updateComponents + updateDataModel', () => {
     const doc = blocksToA2ui(makeDefinition())
     const messages = surfaceDocToMessages(doc, { surfaceId: 's1', catalogId: 'c1' })

package/src/adapter/a2uiAdapter.ts

@@ -136,7 +136,14 @@ function blockToComponent(block: FormBlock): {
     case 'text':
     case 'tel':
     case 'url':
-      return withData({ id, component: 'TextField', label, variant: 'shortText', value: { path } })
+      return withData({
+        id,
+        component: 'TextField',
+        label,
+        variant: 'shortText',
+        ...(block.placeholder ? { placeholder: block.placeholder } : {}),
+        value: { path },
+      })
     case 'email':
       return withData({
         id,
@@ -144,12 +151,27 @@ function blockToComponent(block: FormBlock): {
         label,
         variant: 'shortText',
         validationRegexp: EMAIL_REGEXP,
+        ...(block.placeholder ? { placeholder: block.placeholder } : {}),
         value: { path },
       })
     case 'textarea':
-      return withData({ id, component: 'TextField', label, variant: 'longText', value: { path } })
+      return withData({
+        id,
+        component: 'TextField',
+        label,
+        variant: 'longText',
+        ...(block.placeholder ? { placeholder: block.placeholder } : {}),
+        value: { path },
+      })
     case 'number':
-      return withData({ id, component: 'TextField', label, variant: 'number', value: { path } })
+      return withData({
+        id,
+        component: 'TextField',
+        label,
+        variant: 'number',
+        ...(block.placeholder ? { placeholder: block.placeholder } : {}),
+        value: { path },
+      })
 
     case 'select':
       return withData({
@@ -337,7 +359,10 @@ function componentToBlock(node: A2uiComponentNode): FormBlock | null {
       if (variant === 'longText') type = 'textarea'
       else if (variant === 'number') type = 'number'
       else if (asLiteral(node.validationRegexp) === EMAIL_REGEXP) type = 'email'
-      return { ...base(type), name }
+      const block: FormBlock = { ...base(type), name }
+      const placeholder = asLiteral(node.placeholder)
+      if (placeholder) block.placeholder = placeholder
+      return block
     }
     case 'CheckBox':
       return { ...base('toggle'), name }

package/src/catalog/a2uiCustomCatalog.tsx

@@ -1,11 +1,23 @@
 import { z } from 'zod'
+import type { ReactNode } from 'react'
 import { Catalog, type ComponentContext } from '@a2ui/web_core/v0_9'
 import {
   basicCatalog,
   createBinderlessComponentImplementation,
   type ReactComponentImplementation,
 } from '@a2ui/react/v0_9'
-import { Checkbox, DatePicker, Radio, Select, Switch, TimePicker, Typography, Upload } from 'antd'
+import {
+  Checkbox,
+  DatePicker,
+  Input,
+  InputNumber,
+  Radio,
+  Select,
+  Switch,
+  TimePicker,
+  Typography,
+  Upload,
+} from 'antd'
 import dayjs, { type Dayjs } from 'dayjs'
 import type { FormFilePlaceholderIcon, FormMediaSize } from '../types/index'
 import {
@@ -37,8 +49,12 @@ const SKOPON_COMPONENT_NAMES = new Set([
   'CheckBox',
   'DateTimeInput',
   'FileUpload',
+  'TextField',
+  'Text',
 ])
 
+const NON_MARKDOWN_TEXT_VARIANTS = new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'caption'])
+
 function getBasicSchema(name: string): z.ZodTypeAny {
   const impl = [...basicCatalog.components.values()].find((c) => c.name === name)
   if (!impl) throw new Error(`Missing basic catalog component: ${name}`)
@@ -526,6 +542,114 @@ const FileUploadImpl = createBinderlessComponentImplementation(
   FileUploadPreview,
 )
 
+function TextFieldPreview({ context }: { context: ComponentContext }) {
+  const { interactive } = useA2uiPreviewMode()
+  const { value, setValue } = useSkoponBoundField(context)
+  const props = context.componentModel.properties as Record<string, unknown>
+  const label = readString(props.label)
+  const placeholder = readString(props.placeholder)
+  const variant = readString(props.variant) || 'shortText'
+  const stringValue = asOptionalString(value) ?? ''
+  const disabled = !interactive
+
+  const controlClassName = 'form-block-preview-control'
+
+  let control: ReactNode
+  if (variant === 'longText') {
+    control = (
+      <Input.TextArea
+        disabled={disabled}
+        className={controlClassName}
+        placeholder={placeholder || '长文本回答...'}
+        autoSize={{ minRows: 2, maxRows: 6 }}
+        value={stringValue}
+        onChange={(e) => setValue(e.target.value)}
+      />
+    )
+  } else if (variant === 'number') {
+    control = (
+      <InputNumber
+        disabled={disabled}
+        className={controlClassName}
+        style={{ width: '100%' }}
+        placeholder={placeholder || '数字'}
+        value={stringValue ? Number(stringValue) : undefined}
+        onChange={(next) => setValue(next == null ? '' : String(next))}
+      />
+    )
+  } else if (variant === 'obscured') {
+    control = (
+      <Input.Password
+        disabled={disabled}
+        className={controlClassName}
+        placeholder={placeholder}
+        value={stringValue}
+        onChange={(e) => setValue(e.target.value)}
+      />
+    )
+  } else {
+    control = (
+      <Input
+        disabled={disabled}
+        className={controlClassName}
+        placeholder={placeholder}
+        value={stringValue}
+        onChange={(e) => setValue(e.target.value)}
+      />
+    )
+  }
+
+  return (
+    <div className="form-block-preview">
+      {label ? <div className="form-block-preview-label">{label}</div> : null}
+      {control}
+    </div>
+  )
+}
+
+const TextFieldImpl = createBinderlessComponentImplementation(
+  {
+    name: 'TextField',
+    schema: z
+      .object({
+        label: z.any().optional(),
+        variant: z.any().optional(),
+        placeholder: z.any().optional(),
+        validationRegexp: z.any().optional(),
+        value: z.any().optional(),
+      })
+      .passthrough(),
+  },
+  TextFieldPreview,
+)
+
+function TextPreview({ context }: { context: ComponentContext }) {
+  const props = context.componentModel.properties as Record<string, unknown>
+  const text = readString(props.text)
+  const variant = readString(props.variant) || 'body'
+
+  if (NON_MARKDOWN_TEXT_VARIANTS.has(variant)) {
+    if (variant === 'caption') {
+      return (
+        <Typography.Text type="secondary" className="form-block-preview-paragraph">
+          <em>{text}</em>
+        </Typography.Text>
+      )
+    }
+    const Tag = variant as 'h1' | 'h2' | 'h3' | 'h4' | 'h5'
+    return <Tag className="form-block-preview-heading">{text}</Tag>
+  }
+
+  return (
+    <Typography.Paragraph className="form-block-preview-paragraph">{text}</Typography.Paragraph>
+  )
+}
+
+const TextImpl = createBinderlessComponentImplementation(
+  { name: 'Text', schema: getBasicSchema('Text') },
+  TextPreview,
+)
+
 /** 构建合并后的 skopon catalog（预览每次重建，避免 HMR 缓存旧组件）。 */
 export function buildSkoponCatalog(): Catalog<ReactComponentImplementation> {
   const baseComponents = [...basicCatalog.components.values()].filter(
@@ -542,6 +666,8 @@ export function buildSkoponCatalog(): Catalog<ReactComponentImplementation> {
     CheckBoxImpl,
     DateTimeInputImpl,
     FileUploadImpl,
+    TextFieldImpl,
+    TextImpl,
   ]
   const functions = [...basicCatalog.functions.values()]
   return new Catalog(SKOPON_CATALOG_ID, components, functions, basicCatalog.themeSchema)

package/src/catalog/textFieldPreview.test.tsx

@@ -0,0 +1,88 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, afterEach, beforeAll } from 'vitest'
+
+vi.mock('@a2ui/web_core/v0_9/basic_catalog', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@a2ui/web_core/v0_9/basic_catalog')>()
+  return { ...actual, injectBasicCatalogStyles: vi.fn() }
+})
+
+vi.mock('@a2ui/react/styles', () => ({
+  injectStyles: vi.fn(),
+  removeStyles: vi.fn(),
+}))
+
+import { createElement, createRef } from 'react'
+import { render, cleanup, fireEvent } from '@testing-library/react'
+import { blocksToA2ui } from '../adapter/a2uiAdapter'
+import SkoponFormRenderer, { type SkoponFormRendererRef } from '../components/SkoponFormRenderer'
+
+beforeAll(() => {
+  class ResizeObserverMock {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+  vi.stubGlobal('ResizeObserver', ResizeObserverMock)
+})
+
+function renderTextareaSurface() {
+  const doc = blocksToA2ui(
+    {
+      title: '',
+      description: '',
+      blocks: [
+        {
+          id: 'b-bio',
+          type: 'textarea',
+          name: 'bio',
+          label: '简介',
+          placeholder: '请填写简介',
+        },
+        {
+          id: 'b-desc',
+          type: 'paragraph',
+          label: '这是一段说明文字',
+        },
+      ],
+    },
+    { includeHeader: false },
+  )
+
+  const ref = createRef<SkoponFormRendererRef>()
+  const view = render(
+    createElement(SkoponFormRenderer, {
+      ref,
+      doc,
+      surfaceId: 'test-form',
+      fieldNames: ['bio'],
+    }),
+  )
+  return { ref, ...view }
+}
+
+describe('SkoponFormRenderer TextField longText', () => {
+  afterEach(() => {
+    cleanup()
+  })
+
+  it('renders Ant Design TextArea for textarea blocks', () => {
+    const { container, getByText } = renderTextareaSurface()
+    expect(getByText('简介')).toBeTruthy()
+    const textarea = container.querySelector('textarea.ant-input')
+    expect(textarea).toBeTruthy()
+    expect(textarea?.getAttribute('placeholder')).toBe('请填写简介')
+  })
+
+  it('reads textarea values via getValues()', () => {
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const { container, ref } = renderTextareaSurface()
+    const textarea = container.querySelector('textarea.ant-input')
+    expect(textarea).toBeTruthy()
+    if (textarea) {
+      fireEvent.change(textarea, { target: { value: 'hello world' } })
+    }
+    expect(ref.current?.getValues(['bio'])).toEqual({ bio: 'hello world' })
+    expect(warnSpy.mock.calls.some((call) => String(call[0]).includes('[useMarkdown]'))).toBe(false)
+    warnSpy.mockRestore()
+  })
+})