@commercetools/nimbus-mcp 0.1.0 → 2.10.0

package/data/docs/routes/patterns-fields-multiline-text-input-field.json

@@ -0,0 +1,404 @@
+{
+  "meta": {
+    "id": "Patterns-MultilineTextInputField",
+    "title": "Multiline text input field",
+    "exportName": "MultilineTextInputField",
+    "description": "This pattern component integrates the MultilineTextInput within a FormField using a simple, consistent, and opinionated API.",
+    "order": 999,
+    "repoPath": "packages/nimbus/src/patterns/fields/multiline-text-input-field/multiline-text-input-field.mdx",
+    "menu": [
+      "Patterns",
+      "Fields",
+      "Multiline text input field"
+    ],
+    "route": "patterns/fields/multiline-text-input-field",
+    "tags": [
+      "component",
+      "pattern",
+      "field",
+      "MultilineTextInput",
+      "MultilineTextInputField"
+    ],
+    "toc": [
+      {
+        "value": "Overview",
+        "href": "#overview",
+        "depth": 2,
+        "numbering": [
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Resources",
+        "href": "#resources",
+        "depth": 3,
+        "numbering": [
+          1,
+          1,
+          1
+        ],
+        "parent": "root"
+      }
+    ],
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      },
+      {
+        "key": "dev",
+        "title": "Implementation",
+        "order": 3
+      }
+    ]
+  },
+  "mdx": "\n## Overview\n\nMultilineTextInputField is a pattern component that combines the FormField wrapper with the MultilineTextInput component. This integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated API.\n\n### Resources\n\nFor detailed guidance on the individual components that make up this pattern, consult the component guidelines:\n\n- [MultilineTextInput Guidelines](/components/forms/multiline-text-input) - Multiline text input patterns, interaction guidelines, and accessibility standards\n- [FormField Guidelines](/components/inputs/formfield) - Label options, helper text, validation patterns, and form field accessibility\n- [Storybook](https://nimbus-storybook.vercel.app/?path=/docs/patterns-fields-multilinetextinputfield--docs)\n\n",
+  "views": {
+    "overview": {
+      "mdx": "\n## Overview\n\nMultilineTextInputField is a pattern component that combines the FormField wrapper with the MultilineTextInput component. This integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated API.\n\n### Resources\n\nFor detailed guidance on the individual components that make up this pattern, consult the component guidelines:\n\n- [MultilineTextInput Guidelines](/components/forms/multiline-text-input) - Multiline text input patterns, interaction guidelines, and accessibility standards\n- [FormField Guidelines](/components/inputs/formfield) - Label options, helper text, validation patterns, and form field accessibility\n- [Storybook](https://nimbus-storybook.vercel.app/?path=/docs/patterns-fields-multilinetextinputfield--docs)\n\n",
+      "toc": [
+        {
+          "value": "Overview",
+          "href": "#overview",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "dev": {
+      "mdx": "\n## Comparison: field pattern vs manual composition\n\n**With MultilineTextInputField:**\n```tsx\n<MultilineTextInputField\n  label=\"Project Description\"\n  description=\"Enter a detailed description\"\n  value={value}\n  onChange={setValue}\n  errors={errors}\n  touched={touched}\n  isRequired\n  autoGrow\n/>\n```\n\n**Manual composition:**\n```tsx\n<FormField.Root isInvalid={!!(errors && touched)} isRequired>\n  <FormField.Label>Project Description</FormField.Label>\n  <FormField.Input>\n    <MultilineTextInput\n      value={value}\n      onChange={setValue}\n      width=\"full\"\n      autoGrow\n    />\n  </FormField.Input>\n  <FormField.Description>\n    Enter a detailed description\n  </FormField.Description>\n  {touched && errors && (\n    <FormField.Error>\n      <FieldErrors errors={errors} />\n    </FormField.Error>\n  )}\n</FormField.Root>\n```\n\n### When to use which\n\n**Use MultilineTextInputField when:**\n- Building standard forms with typical field layouts\n- You want consistent field patterns across your app\n- You need built-in error handling with FieldErrors\n- You want to minimize boilerplate code\n\n**Use MultilineTextInput with manual FormField composition when:**\n- You need custom field layouts\n- You're building complex, non-standard forms\n- You need granular control over FormField sub-components\n- You require a different error handling implementation\n\n## Getting started\n\n### Import\n\n```tsx\nimport { MultilineTextInputField, type MultilineTextInputFieldProps } from '@commercetools/nimbus';\n```\n\n### Basic usage\n\nThe simplest implementation with a label and controlled state:\n\n```jsx live-dev\nconst App = () => {\n  const [value, setValue] = useState<string>('');\n\n  return (\n    <MultilineTextInputField\n      label=\"Comments\"\n      value={value}\n      onChange={setValue}\n    />\n  );\n}\n```\n\n## Usage examples\n\n### Size options\n\nThe `sm` and `md` size variants are available to match your interface density:\n\n```jsx live-dev\nconst App = () => {\n  const [valueSmall, setValueSmall] = useState<string>('');\n  const [valueMedium, setValueMedium] = useState<string>('');\n\n  return (\n    <Stack direction=\"column\" gap=\"400\">\n      <MultilineTextInputField\n        size=\"sm\"\n        label=\"Small input\"\n        value={valueSmall}\n        onChange={setValueSmall}\n        placeholder=\"Small size\"\n      />\n      <MultilineTextInputField\n        size=\"md\"\n        label=\"Medium input\"\n        value={valueMedium}\n        onChange={setValueMedium}\n        placeholder=\"Medium size (default)\"\n      />\n    </Stack>\n  );\n}\n```\n\n### Visual variants\n\nChoose between `solid` and `ghost` variants to match your design context:\n\n```jsx live-dev\nconst App = () => {\n  const [valueSolid, setValueSolid] = useState<string>('');\n  const [valueGhost, setValueGhost] = useState<string>('');\n\n  return (\n    <Stack direction=\"column\" gap=\"400\">\n      <MultilineTextInputField\n        variant=\"solid\"\n        label=\"Solid variant\"\n        value={valueSolid}\n        onChange={setValueSolid}\n        placeholder=\"Solid variant (default)\"\n      />\n      <MultilineTextInputField\n        variant=\"ghost\"\n        label=\"Ghost variant\"\n        value={valueGhost}\n        onChange={setValueGhost}\n        placeholder=\"Ghost variant\"\n      />\n    </Stack>\n  );\n}\n```\n\n### Auto-growing input\n\nEnable `autoGrow` to let the input expand vertically as the user types:\n\n```jsx live-dev\nconst App = () => {\n  const [value, setValue] = useState<string>('');\n\n  return (\n    <MultilineTextInputField\n      label=\"Feedback\"\n      description=\"This field grows with your content\"\n      value={value}\n      onChange={setValue}\n      autoGrow\n      placeholder=\"Type multiple lines to see me grow...\"\n    />\n  );\n}\n```\n\n### Fixed rows\n\nSet a specific number of visible rows using the `rows` prop:\n\n```jsx live-dev\nconst App = () => {\n  const [value, setValue] = useState<string>('');\n\n  return (\n    <MultilineTextInputField\n      label=\"Notes\"\n      description=\"Starts with 5 visible rows\"\n      value={value}\n      onChange={setValue}\n      rows={5}\n      placeholder=\"Enter your notes here...\"\n    />\n  );\n}\n```\n\n### With description\n\nAdd helper text below the input to provide context:\n\n```jsx live-dev\nconst App = () => {\n  const [value, setValue] = useState<string>('');\n\n  return (\n    <MultilineTextInputField\n      label=\"Project Description\"\n      description=\"Provide a detailed summary of the project scope and goals\"\n      value={value}\n      onChange={setValue}\n      placeholder=\"Enter description...\"\n    />\n  );\n}\n```\n\n### With validation errors\n\nShow error messages when the field is touched and has validation errors:\n\n```jsx live-dev\nconst App = () => {\n  const [value, setValue] = useState<string>('');\n  const [touched, setTouched] = useState<boolean>(false);\n\n  // Simulate validation: require at least 10 characters\n  const errors = touched && value.length < 10 ? { missing: true } : undefined;\n\n  return (\n    <MultilineTextInputField\n      label=\"Review\"\n      description=\"Enter at least 10 characters\"\n      value={value}\n      onChange={setValue}\n      onBlur={() => setTouched(true)}\n      errors={errors}\n      touched={touched}\n      isRequired\n      placeholder=\"Write your review...\"\n    />\n  );\n}\n```\n\n**Note**: Errors only display when both `touched={true}` and `errors` exist. This prevents showing errors before the user interacts with the field.\n\n### With info popover\n\nProvide additional context through an info button and popover:\n\n```jsx live-dev\nconst App = () => {\n  const [value, setValue] = useState<string>('');\n\n  return (\n    <MultilineTextInputField\n      label=\"Configuration\"\n      description=\"Enter valid JSON configuration\"\n      info=\"The configuration must be valid JSON. Keys must be quoted strings. Trailing commas are not allowed.\"\n      value={value}\n      onChange={setValue}\n      rows={4}\n      placeholder=\"{}\"\n    />\n  );\n}\n```\n\n### Required field\n\nMark fields as required with the `isRequired` prop:\n\n```jsx live-dev\nconst App = () => {\n  const [value, setValue] = useState<string>('');\n\n  return (\n    <MultilineTextInputField\n      label=\"Reason for return\"\n      description=\"Please explain why you are returning this item\"\n      value={value}\n      onChange={setValue}\n      isRequired\n      placeholder=\"Explanation...\"\n    />\n  );\n}\n```\n\n### Disabled state\n\nPrevent user interaction with the `isDisabled` prop:\n\n```jsx live-dev\nconst App = () => {\n  const [value, setValue] = useState<string>('This content cannot be edited');\n\n  return (\n    <MultilineTextInputField\n      label=\"System Logs\"\n      description=\"Archived logs are read-only\"\n      value={value}\n      onChange={setValue}\n      isDisabled\n    />\n  );\n}\n```\n\n### Read-only state\n\nDisplay a non-editable value with the `isReadOnly` prop:\n\n```jsx live-dev\nconst App = () => {\n  const [value, setValue] = useState<string>('Generated description content...');\n\n  return (\n    <MultilineTextInputField\n      label=\"Generated Summary\"\n      description=\"This summary was AI-generated\"\n      value={value}\n      onChange={setValue}\n      isReadOnly\n      rows={3}\n    />\n  );\n}\n```\n\n### With leading element\n\nAdd icons or other elements to the start of the input area:\n\n```jsx live-dev\nconst App = () => {\n  const [value, setValue] = useState<string>('');\n\n  return (\n    <MultilineTextInputField\n      label=\"Message\"\n      value={value}\n      onChange={setValue}\n      placeholder=\"Type your message...\"\n      leadingElement={<Icons.Edit />}\n    />\n  );\n}\n```\n\n## Component requirements\n\n### Error handling\n\nMultilineTextInputField uses the `FieldErrors` component to display validation errors with built-in localized messages. For custom error messages, use the `renderError` prop (see [Custom error rendering](#custom-error-rendering) below).\n\n**Error object format** (`FieldErrorsData`):\n```tsx\ntype FieldErrorsData = {\n  [key: string]: boolean | string | ReactNode;\n};\n\n// Examples:\nconst errors = {\n  missing: true,              // Built-in message: \"This field is required\"\n  invalidFormat: true,        // Built-in message: \"Please enter a valid format\"\n  custom: \"Custom error text\" // Custom message\n};\n```\n\n## Accessibility\n\nMultilineTextInputField provides comprehensive accessibility through [FormField](components/inputs/formfield):\n\n**Automatic ARIA relationships:**\n- Labels connected via `aria-labelledby`\n- Descriptions connected via `aria-describedby`\n- Error messages connected via `aria-describedby`\n- Required fields indicated with `aria-required`\n- Invalid state indicated with `aria-invalid`\n\nIf your use case requires tracking and analytics for this component, add a **persistent**, **unique** id:\n\n```tsx\nconst PERSISTENT_ID = \"feedback-input\";\n\nexport const Example = () => (\n  <MultilineTextInputField\n    id={PERSISTENT_ID}\n    label=\"Feedback\"\n    value={value}\n    onChange={setValue}\n  />\n);\n```\n\n#### Keyboard navigation\n\nThe component supports standard textarea keyboard interaction:\n- `Tab` / `Shift+Tab`: Move focus to/from the input\n- `Arrow keys`: Navigate within the text\n- `Ctrl+A` / `Cmd+A`: Select all text\n\n## Form integration\n\nMultilineTextInputField integrates seamlessly with Formik:\n\n```tsx\nimport { useFormik } from 'formik';\nimport { MultilineTextInputField, Button, Stack } from '@commercetools/nimbus';\n\nconst MyForm = () => {\n  const formik = useFormik({\n    initialValues: {\n      description: '',\n      notes: '',\n    },\n    validate: (values) => {\n      const errors = {};\n\n      if (!values.description) {\n        errors.description = { missing: true };\n      } else if (values.description.length < 20) {\n        errors.description = { tooShort: true };\n      }\n\n      return errors;\n    },\n    onSubmit: (values) => {\n      console.log('Submitted:', values);\n    },\n  });\n\n  return (\n    <form onSubmit={formik.handleSubmit}>\n      <Stack direction=\"column\" gap=\"400\">\n        <MultilineTextInputField\n          name=\"description\"\n          label=\"Description\"\n          description=\"Enter a detailed description (min 20 chars)\"\n          value={formik.values.description}\n          onChange={(value) => formik.setFieldValue('description', value)}\n          onBlur={() => formik.setFieldTouched('description', true)}\n          errors={formik.errors.description}\n          touched={formik.touched.description}\n          isRequired\n          autoGrow\n        />\n        <MultilineTextInputField\n          name=\"notes\"\n          label=\"Internal Notes\"\n          description=\"Optional notes for the team\"\n          value={formik.values.notes}\n          onChange={(value) => formik.setFieldValue('notes', value)}\n          onBlur={() => formik.setFieldTouched('notes', true)}\n          errors={formik.errors.notes}\n          touched={formik.touched.notes}\n          rows={3}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </Stack>\n    </form>\n  );\n};\n```\n\n**Key integration points:**\n- **Value/OnChange**: Connect Formik values with `value` and `setFieldValue`\n- **OnBlur**: Mark field as touched on blur\n- **Errors**: Pass `errors.fieldName` (supports `FieldErrorsData` format or strings)\n- **Touched**: Pass `touched.fieldName` to control error visibility\n\n## API reference\n\n<PropsTable id=\"MultilineTextInputField\" />\n\n### Custom error rendering\n\nUse the `renderError` prop to customize how specific error keys are displayed:\n\n```tsx\n<MultilineTextInputField\n  label=\"Description\"\n  value={value}\n  onChange={setValue}\n  errors={{ tooShort: true, invalidContent: true }}\n  touched={true}\n  renderError={(key) => {\n    switch (key) {\n      case 'tooShort':\n        return 'Description must be at least 20 characters long';\n      case 'invalidContent':\n        return 'Content contains prohibited words';\n      default:\n        return null; // Fall back to FieldErrors built-in messages\n    }\n  }}\n/>\n```\n\n## Testing your implementation\n\nThese examples demonstrate how to test your implementation when using MultilineTextInputField within your application. As the component's internal functionality is already tested by Nimbus, these patterns help you verify your integration and application-specific logic.\n\n### Basic rendering tests\n\nVerify the component renders with expected elements:\n\n```tsx\nimport { render, screen } from '@testing-library/react';\nimport { MultilineTextInputField } from '@commercetools/nimbus';\n\ndescribe('MultilineTextInputField', () => {\n  it('renders label and textarea', () => {\n    render(\n      <MultilineTextInputField\n        label=\"Description\"\n        value=\"\"\n        onChange={() => {}}\n      />\n    );\n\n    // Verify label is rendered\n    expect(screen.getByText('Description')).toBeInTheDocument();\n\n    // Verify textarea is rendered\n    expect(screen.getByRole('textbox', { name: /description/i })).toBeInTheDocument();\n    expect(screen.getByRole('textbox').tagName).toBe('TEXTAREA');\n  });\n\n  it('renders description text', () => {\n    render(\n      <MultilineTextInputField\n        label=\"Notes\"\n        description=\"Enter your notes\"\n        value=\"\"\n        onChange={() => {}}\n      />\n    );\n\n    expect(screen.getByText('Enter your notes')).toBeInTheDocument();\n  });\n\n  it('shows required indicator', () => {\n    render(\n      <MultilineTextInputField\n        label=\"Required field\"\n        value=\"\"\n        onChange={() => {}}\n        isRequired\n      />\n    );\n\n    // Check for required indicator\n    const input = screen.getByRole('textbox');\n    expect(input).toHaveAttribute('aria-required', 'true');\n  });\n});\n```\n\n### Interaction tests\n\nTest user interactions with the component:\n\n```tsx\nimport { render, screen, waitFor } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { MultilineTextInputField } from '@commercetools/nimbus';\n\ndescribe('MultilineTextInputField interactions', () => {\n  it('calls onChange when user types', async () => {\n    const user = userEvent.setup();\n    const handleChange = jest.fn();\n\n    render(\n      <MultilineTextInputField\n        label=\"Description\"\n        value=\"\"\n        onChange={handleChange}\n      />\n    );\n\n    const input = screen.getByRole('textbox', { name: /description/i });\n    await user.type(input, 'hello world');\n\n    expect(handleChange).toHaveBeenCalled();\n    expect(handleChange).toHaveBeenLastCalledWith(expect.stringContaining('hello world'));\n  });\n\n  it('calls onBlur when input loses focus', async () => {\n    const user = userEvent.setup();\n    const handleBlur = jest.fn();\n\n    render(\n      <MultilineTextInputField\n        label=\"Notes\"\n        value=\"\"\n        onChange={() => {}}\n        onBlur={handleBlur}\n      />\n    );\n\n    const input = screen.getByRole('textbox');\n    await user.click(input);\n    await user.tab(); // Move focus away\n\n    expect(handleBlur).toHaveBeenCalledTimes(1);\n  });\n\n  it('does not call onChange when disabled', async () => {\n    const user = userEvent.setup();\n    const handleChange = jest.fn();\n\n    render(\n      <MultilineTextInputField\n        label=\"Notes\"\n        value=\"\"\n        onChange={handleChange}\n        isDisabled\n      />\n    );\n\n    const input = screen.getByRole('textbox');\n    expect(input).toBeDisabled();\n\n    // Attempt to type (should not work)\n    await user.type(input, 'test');\n    expect(handleChange).not.toHaveBeenCalled();\n  });\n});\n```\n\n### Testing validation and errors\n\nTest error handling and validation behavior:\n\n```tsx\nimport { render, screen } from '@testing-library/react';\nimport { MultilineTextInputField } from '@commercetools/nimbus';\n\ndescribe('MultilineTextInputField validation', () => {\n  it('does not show errors when untouched', () => {\n    render(\n      <MultilineTextInputField\n        label=\"Notes\"\n        value=\"\"\n        onChange={() => {}}\n        errors={{ missing: true }}\n        touched={false}\n      />\n    );\n\n    // Error should not be visible\n    expect(screen.queryByText(/required/i)).not.toBeInTheDocument();\n  });\n\n  it('shows errors when touched', () => {\n    render(\n      <MultilineTextInputField\n        label=\"Notes\"\n        value=\"\"\n        onChange={() => {}}\n        errors={{ missing: true }}\n        touched={true}\n      />\n    );\n\n    // Error should be visible\n    expect(screen.getByText(/required/i)).toBeInTheDocument();\n  });\n\n  it('applies invalid styling when isInvalid is true', () => {\n    render(\n      <MultilineTextInputField\n        label=\"Notes\"\n        value=\"\"\n        onChange={() => {}}\n        isInvalid\n      />\n    );\n\n    const input = screen.getByRole('textbox');\n    expect(input).toHaveAttribute('data-invalid', 'true');\n  });\n});\n```\n\n## Resources\n\n- [Storybook](https://nimbus-storybook.vercel.app/?path=/docs/patterns-fields-multilinetextinputfield--docs)\n- [MultilineTextInput Component](components/forms/multiline-text-input)\n- [FormField Component](components/inputs/formfield)\n- [FieldErrors Component](components/forms/fielderrors)\n- [React Aria TextField](https://react-spectrum.adobe.com/react-aria/TextField.html)\n",
+      "toc": [
+        {
+          "value": "Comparison: field pattern vs manual composition",
+          "href": "#comparison-field-pattern-vs-manual-composition",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "When to use which",
+          "href": "#when-to-use-which",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Getting started",
+          "href": "#getting-started",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Import",
+          "href": "#import",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Basic usage",
+          "href": "#basic-usage",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Usage examples",
+          "href": "#usage-examples",
+          "depth": 2,
+          "numbering": [
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Size options",
+          "href": "#size-options",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Visual variants",
+          "href": "#visual-variants",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Auto-growing input",
+          "href": "#auto-growing-input",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Fixed rows",
+          "href": "#fixed-rows",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "With description",
+          "href": "#with-description",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "With validation errors",
+          "href": "#with-validation-errors",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "With info popover",
+          "href": "#with-info-popover",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            7
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Required field",
+          "href": "#required-field",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            8
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Disabled state",
+          "href": "#disabled-state",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            9
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Read-only state",
+          "href": "#read-only-state",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            10
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "With leading element",
+          "href": "#with-leading-element",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            11
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Component requirements",
+          "href": "#component-requirements",
+          "depth": 2,
+          "numbering": [
+            1,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Error handling",
+          "href": "#error-handling",
+          "depth": 3,
+          "numbering": [
+            1,
+            4,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility",
+          "href": "#accessibility",
+          "depth": 2,
+          "numbering": [
+            1,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Keyboard navigation",
+          "href": "#keyboard-navigation",
+          "depth": 4,
+          "numbering": [
+            1,
+            5,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Form integration",
+          "href": "#form-integration",
+          "depth": 2,
+          "numbering": [
+            1,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "API reference",
+          "href": "#api-reference",
+          "depth": 2,
+          "numbering": [
+            1,
+            7
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Custom error rendering",
+          "href": "#custom-error-rendering",
+          "depth": 3,
+          "numbering": [
+            1,
+            7,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Testing your implementation",
+          "href": "#testing-your-implementation",
+          "depth": 2,
+          "numbering": [
+            1,
+            8
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Basic rendering tests",
+          "href": "#basic-rendering-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            8,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Interaction tests",
+          "href": "#interaction-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            8,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Testing validation and errors",
+          "href": "#testing-validation-and-errors",
+          "depth": 3,
+          "numbering": [
+            1,
+            8,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 2,
+          "numbering": [
+            1,
+            9
+          ],
+          "parent": "root"
+        }
+      ]
+    }
+  }
+}