@moises.ai/design-system 3.5.7 → 3.6.0

package/src/components/useForm/useForm.stories.jsx

@@ -0,0 +1,459 @@
+import { useEffect, useState } from 'react'
+import { z } from 'zod'
+import {
+  Button,
+  Card,
+  Checkbox,
+  Flex,
+  Select,
+  Switch,
+  Text,
+  TextArea,
+  TextField,
+} from '../../index'
+import { useForm } from './useForm'
+
+
+const sidebarDecorator = (Story) => (
+  <Flex direction="column" gap="3">
+    <Story />
+  </Flex>
+)
+
+export default {
+  title: 'Form/useForm',
+  decorators: [sidebarDecorator],
+  parameters: { layout: 'centered' },
+}
+
+// ---------------------------------------------------------------------------
+// Full form (mirrors DemoForm extension)
+// ---------------------------------------------------------------------------
+
+const fullSchema = z.object({
+  name: z.string().min(2, 'Too short').default(''),
+  email: z.string().email('Invalid email').default(''),
+  bio: z.string().default(''),
+  role: z.string().min(1, 'Pick a role').default(''),
+  notifications: z.boolean().default(true),
+  terms: z.boolean().refine((v) => v, 'Required').default(false),
+})
+
+function FullFormExample() {
+  const { connectField, Field, getValues, reset, watchValues } = useForm({ schema: fullSchema })
+
+  useEffect(() => watchValues((data) => console.log('Changed:', data)), [])
+
+  const handleSave = () => {
+    const { isValid, data } = getValues()
+    console.log('getValues:', { isValid, data })
+  }
+
+  return (
+    <Card>
+      <Flex direction="column" gap="3">
+        <Field name="name">
+          <TextField placeholder="Name" {...connectField('name')} />
+        </Field>
+
+        <Field name="email">
+          <TextField placeholder="Email" {...connectField('email')} />
+        </Field>
+
+        <Field name="bio">
+          <TextArea placeholder="Bio" {...connectField('bio')} />
+        </Field>
+
+        <Field name="role">
+          <Select
+            placeholder="Choose role"
+            {...connectField('role')}
+            items={[
+              { value: 'admin', label: 'Admin' },
+              { value: 'editor', label: 'Editor' },
+              { value: 'viewer', label: 'Viewer' },
+            ]}
+          />
+        </Field>
+
+        <Flex align="center" gap="2">
+          <Switch {...connectField('notifications', 'switch')} />
+          <Text size="2">Email notifications</Text>
+        </Flex>
+
+        <Field name="terms">
+          <Flex align="center" gap="2">
+            <Checkbox {...connectField('terms', 'checkbox')} />
+            <Text size="2">I accept the terms</Text>
+          </Flex>
+        </Field>
+      </Flex>
+    </Card>
+  )
+}
+
+export const FullForm = {
+  name: 'Full Form (All Controls)',
+  render: () => <FullFormExample />,
+}
+
+// ---------------------------------------------------------------------------
+// connectField — text input
+// ---------------------------------------------------------------------------
+
+const textSchema = z.object({
+  username: z.string().min(3, 'At least 3 characters').default(''),
+})
+
+function ConnectFieldTextExample() {
+  const { connectField, Field, getValues } = useForm({ schema: textSchema })
+
+  return (
+    <Flex direction="column" gap="3">
+      <Field name="username">
+        <TextField placeholder="Username" {...connectField('username')} />
+      </Field>
+      <Button size="1" onClick={() => console.log(getValues())}>Validate</Button>
+    </Flex>
+  )
+}
+
+export const ConnectFieldText = {
+  name: 'connectField — TextField',
+  render: () => <ConnectFieldTextExample />,
+}
+
+// ---------------------------------------------------------------------------
+// connectField — checkbox & switch
+// ---------------------------------------------------------------------------
+
+const toggleSchema = z.object({
+  darkMode: z.boolean().default(false),
+  agree: z.boolean().refine((v) => v, 'You must agree').default(false),
+})
+
+function ConnectFieldToggleExample() {
+  const { connectField, Field, getValues } = useForm({ schema: toggleSchema })
+
+  return (
+    <Flex direction="column" gap="3">
+      <Flex align="center" gap="2">
+        <Switch {...connectField('darkMode', 'switch')} />
+        <Text size="2">Dark mode</Text>
+      </Flex>
+
+      <Field name="agree">
+        <Flex align="center" gap="2">
+          <Checkbox {...connectField('agree', 'checkbox')} />
+          <Text size="2">I agree to the terms</Text>
+        </Flex>
+      </Field>
+
+      <Button size="1" onClick={() => console.log(getValues())}>Validate</Button>
+    </Flex>
+  )
+}
+
+export const ConnectFieldToggle = {
+  name: 'connectField — Switch & Checkbox',
+  render: () => <ConnectFieldToggleExample />,
+}
+
+// ---------------------------------------------------------------------------
+// connectField — Select
+// ---------------------------------------------------------------------------
+
+const selectSchema = z.object({
+  color: z.string().min(1, 'Pick a color').default(''),
+})
+
+function ConnectFieldSelectExample() {
+  const { connectField, Field, getValues } = useForm({ schema: selectSchema })
+
+  return (
+    <Flex direction="column" gap="3">
+      <Field name="color">
+        <Select
+          placeholder="Pick a color"
+          {...connectField('color')}
+          items={[
+            { value: 'red', label: 'Red' },
+            { value: 'green', label: 'Green' },
+            { value: 'blue', label: 'Blue' },
+          ]}
+        />
+      </Field>
+      <Button size="1" onClick={() => console.log(getValues())}>Validate</Button>
+    </Flex>
+  )
+}
+
+export const ConnectFieldSelect = {
+  name: 'connectField — Select',
+  render: () => <ConnectFieldSelectExample />,
+}
+
+// ---------------------------------------------------------------------------
+// Field wrapper with validation errors
+// ---------------------------------------------------------------------------
+
+const validationSchema = z.object({
+  name: z.string().min(2, 'Name too short').default(''),
+  email: z.string().email('Enter a valid email').default(''),
+  age: z.string().regex(/^\d+$/, 'Must be a number').default(''),
+})
+
+function FieldValidationExample() {
+  const { connectField, Field, getValues } = useForm({ schema: validationSchema })
+
+  return (
+    <Flex direction="column" gap="3">
+      <Field name="name">
+        <TextField placeholder="Name (min 2)" {...connectField('name')} />
+      </Field>
+      <Field name="email">
+        <TextField placeholder="Email" {...connectField('email')} />
+      </Field>
+      <Field name="age">
+        <TextField placeholder="Age (digits only)" {...connectField('age')} />
+      </Field>
+      <Button size="1" onClick={() => console.log(getValues())}>
+        Submit (check console)
+      </Button>
+    </Flex>
+  )
+}
+
+export const FieldValidation = {
+  name: 'Field — Inline Errors',
+  render: () => <FieldValidationExample />,
+}
+
+// ---------------------------------------------------------------------------
+// error() — standalone error renderer
+// ---------------------------------------------------------------------------
+
+const errorSchema = z.object({
+  code: z.string().length(6, 'Must be exactly 6 characters').default(''),
+})
+
+function StandaloneErrorExample() {
+  const { connectField, error, getValues } = useForm({ schema: errorSchema })
+
+  return (
+    <Flex direction="column" gap="3">
+      <TextField placeholder="6-char code" {...connectField('code')} />
+      {error('code')}
+      <Text size="1" color="gray">
+        Uses `error('code')` instead of the `Field` wrapper.
+      </Text>
+      <Button size="1" onClick={() => getValues()}>Validate</Button>
+    </Flex>
+  )
+}
+
+export const StandaloneError = {
+  name: 'error() — Standalone',
+  render: () => <StandaloneErrorExample />,
+}
+
+// ---------------------------------------------------------------------------
+// values — reactive form state
+// ---------------------------------------------------------------------------
+
+const valuesSchema = z.object({
+  firstName: z.string().default(''),
+  lastName: z.string().default(''),
+})
+
+function ReactiveValuesExample() {
+  const { connectField, values } = useForm({ schema: valuesSchema })
+
+  return (
+    <Flex direction="column" gap="3">
+      <TextField placeholder="First name" {...connectField('firstName')} />
+      <TextField placeholder="Last name" {...connectField('lastName')} />
+      <Card>
+        <Text size="1" style={{ fontFamily: 'monospace', whiteSpace: 'pre' }}>
+          {JSON.stringify(values, null, 2)}
+        </Text>
+      </Card>
+    </Flex>
+  )
+}
+
+export const ReactiveValues = {
+  name: 'values — Live Preview',
+  render: () => <ReactiveValuesExample />,
+}
+
+// ---------------------------------------------------------------------------
+// set() — imperative field setter
+// ---------------------------------------------------------------------------
+
+const setSchema = z.object({
+  color: z.string().default(''),
+})
+
+function ImperativeSetExample() {
+  const { connectField, set, values } = useForm({ schema: setSchema })
+
+  return (
+    <Flex direction="column" gap="3">
+      <TextField placeholder="Color" {...connectField('color')} />
+      <Flex gap="2" wrap="wrap">
+        {['red', 'green', 'blue', 'purple'].map((c) => (
+          <Button key={c} variant="soft" size="1" onClick={() => set('color', c)}>
+            {c}
+          </Button>
+        ))}
+      </Flex>
+      <Text size="1" color="gray">Current: {values.color || '(empty)'}</Text>
+    </Flex>
+  )
+}
+
+export const ImperativeSet = {
+  name: 'set() — Imperative Setter',
+  render: () => <ImperativeSetExample />,
+}
+
+// ---------------------------------------------------------------------------
+// reset() — default and custom reset
+// ---------------------------------------------------------------------------
+
+const resetSchema = z.object({
+  title: z.string().default(''),
+  priority: z.string().default('medium'),
+})
+
+function ResetExample() {
+  const { connectField, reset, values } = useForm({ schema: resetSchema })
+
+  return (
+    <Flex direction="column" gap="3">
+      <TextField placeholder="Title" {...connectField('title')} />
+      <Select
+        placeholder="Priority"
+        {...connectField('priority')}
+        items={[
+          { value: 'low', label: 'Low' },
+          { value: 'medium', label: 'Medium' },
+          { value: 'high', label: 'High' },
+        ]}
+      />
+      <Card>
+        <Text size="1" style={{ fontFamily: 'monospace', whiteSpace: 'pre' }}>
+          {JSON.stringify(values, null, 2)}
+        </Text>
+      </Card>
+      <Flex gap="2">
+        <Button variant="ghost" size="1" onClick={() => reset()}>
+          Reset to defaults
+        </Button>
+        <Button variant="soft" size="1" onClick={() => reset({ title: 'Preset', priority: 'high' })}>
+          Reset to preset
+        </Button>
+      </Flex>
+    </Flex>
+  )
+}
+
+export const Reset = {
+  name: 'reset() — Default & Custom',
+  render: () => <ResetExample />,
+}
+
+// ---------------------------------------------------------------------------
+// watchValues — subscribe to changes
+// ---------------------------------------------------------------------------
+
+const watchSchema = z.object({
+  search: z.string().default(''),
+})
+
+function WatchValuesExample() {
+  const { connectField, watchValues } = useForm({ schema: watchSchema })
+  const [log, setLog] = useState([])
+
+  useEffect(() => {
+    return watchValues((data) => {
+      setLog((prev) => [...prev.slice(-4), JSON.stringify(data)])
+    })
+  }, [])
+
+  return (
+    <Flex direction="column" gap="3">
+      <TextField placeholder="Type something…" {...connectField('search')} />
+      <Card>
+        <Flex direction="column" gap="1">
+          <Text size="1" weight="medium">Change log (last 5):</Text>
+          {log.length === 0 && <Text size="1" color="gray">No changes yet</Text>}
+          {log.map((entry, i) => (
+            <Text key={i} size="1" style={{ fontFamily: 'monospace' }}>{entry}</Text>
+          ))}
+        </Flex>
+      </Card>
+    </Flex>
+  )
+}
+
+export const WatchValues = {
+  name: 'watchValues() — Subscription',
+  render: () => <WatchValuesExample />,
+}
+
+// ---------------------------------------------------------------------------
+// getValues() — validate and read
+// ---------------------------------------------------------------------------
+
+const getValuesSchema = z.object({
+  amount: z.string().regex(/^\d+(\.\d{1,2})?$/, 'Enter a valid amount').default(''),
+  currency: z.string().min(1, 'Required').default(''),
+})
+
+function GetValuesExample() {
+  const { connectField, Field, getValues } = useForm({ schema: getValuesSchema })
+  const [result, setResult] = useState(null)
+
+  const handleSubmit = () => {
+    setResult(getValues())
+  }
+
+  return (
+    <Flex direction="column" gap="3">
+      <Field name="amount">
+        <TextField placeholder="Amount (e.g. 9.99)" {...connectField('amount')} />
+      </Field>
+      <Field name="currency">
+        <Select
+          placeholder="Currency"
+          {...connectField('currency')}
+          items={[
+            { value: 'usd', label: 'USD' },
+            { value: 'eur', label: 'EUR' },
+            { value: 'brl', label: 'BRL' },
+          ]}
+        />
+      </Field>
+      <Button size="1" onClick={handleSubmit}>Submit</Button>
+      {result && (
+        <Card>
+          <Flex direction="column" gap="1">
+            <Text size="1" weight="medium">
+              {result.isValid ? '✓ Valid' : '✗ Invalid'}
+            </Text>
+            <Text size="1" style={{ fontFamily: 'monospace', whiteSpace: 'pre' }}>
+              {JSON.stringify(result.data, null, 2)}
+            </Text>
+          </Flex>
+        </Card>
+      )}
+    </Flex>
+  )
+}
+
+export const GetValues = {
+  name: 'getValues() — Validate & Read',
+  render: () => <GetValuesExample />,
+}

package/src/index.jsx

@@ -96,6 +96,9 @@ export { GenerationStatus } from './components/StemSeparationForm/GenerationStat
 
 export { Slider } from './components/Slider/Slider'
 
+export { useForm } from './components/useForm/useForm'
+export { Extension } from './components/Extension/Extension'
+
 export { TextArea } from './components/TextArea/TextArea'
 
 export { Button } from './components/Button/Button'