@commercetools/nimbus-mcp 0.1.0 → 2.10.0

package/data/docs/routes/patterns-fields-date-range-picker-field.json

@@ -0,0 +1,393 @@
+{
+  "meta": {
+    "id": "Patterns-DateRangePickerField",
+    "title": "Date range picker field",
+    "exportName": "DateRangePickerField",
+    "description": "This pattern component integrates the DateRangePicker within a FormField using a simple, consistent, and opinionated API.",
+    "order": 999,
+    "repoPath": "packages/nimbus/src/patterns/fields/date-range-picker-field/date-range-picker-field.mdx",
+    "menu": [
+      "Patterns",
+      "Fields",
+      "Date range picker field"
+    ],
+    "route": "patterns/fields/date-range-picker-field",
+    "tags": [
+      "component",
+      "pattern",
+      "field",
+      "DateRangePicker",
+      "DateRangePickerField"
+    ],
+    "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\nDateRangePickerField is a pattern component that combines the FormField wrapper with the DateRangePicker input 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- [DateRangePicker Guidelines](/components/inputs/daterangepicker) - Date range selection 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-daterangepickerfield--docs)\n",
+  "views": {
+    "overview": {
+      "mdx": "\n## Overview\n\nDateRangePickerField is a pattern component that combines the FormField wrapper with the DateRangePicker input 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- [DateRangePicker Guidelines](/components/inputs/daterangepicker) - Date range selection 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-daterangepickerfield--docs)\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\n## Comparison: field pattern vs manual composition\n\n**With DateRangePickerField:**\n```tsx\n<DateRangePickerField\n  label=\"Event Date Range\"\n  description=\"Select start and end dates\"\n  value={dateRange}\n  onChange={setDateRange}\n  onBlur={() => formik.setFieldTouched('dateRange', true)}\n  errors={formik.errors.dateRange}\n  touched={formik.touched.dateRange}\n/>\n```\n\n**Manual composition:**\n```tsx\n<FormField.Root isInvalid={!!(formik.errors.dateRange && formik.touched.dateRange)}>\n  <FormField.Label>Event Date Range</FormField.Label>\n  <FormField.Input>\n    <DateRangePicker\n      value={dateRange}\n      onChange={setDateRange}\n      width=\"full\"\n    />\n  </FormField.Input>\n  <FormField.Description>\n    Select start and end dates\n  </FormField.Description>\n  {formik.touched.dateRange && formik.errors.dateRange && (\n    <FormField.Error>{formik.errors.dateRange}</FormField.Error>\n  )}\n</FormField.Root>\n```\n\n### When to use which\n\n**Use DateRangePickerField 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 DateRangePicker 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 { DateRangePickerField, type DateRangePickerFieldProps } 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<DateRangePickerProps[\"value\"]>(null);\n\n  return (\n    <DateRangePickerField\n      label=\"Select Date Range\"\n      value={value}\n      onChange={setValue}\n    />\n  );\n}\n```\n\n### Working with date values\n\nDateRangePickerField uses the same `@internationalized/date` library as DateRangePicker.\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<DateRangePickerProps[\"value\"]>(null);\n  const [valueMedium, setValueMedium] = useState<DateRangePickerProps[\"value\"]>(null);\n\n  return (\n    <Stack direction=\"column\" gap=\"400\">\n      <DateRangePickerField\n        size=\"sm\"\n        label=\"Small size\"\n        value={valueSmall}\n        onChange={setValueSmall}\n      />\n      <DateRangePickerField\n        size=\"md\"\n        label=\"Medium size (default)\"\n        value={valueMedium}\n        onChange={setValueMedium}\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<DateRangePickerProps[\"value\"]>(null);\n  const [valueGhost, setValueGhost] = useState<DateRangePickerProps[\"value\"]>(null);\n\n  return (\n    <Stack direction=\"column\" gap=\"400\">\n      <DateRangePickerField\n        variant=\"solid\"\n        label=\"Solid variant (default)\"\n        value={valueSolid}\n        onChange={setValueSolid}\n      />\n      <DateRangePickerField\n        variant=\"ghost\"\n        label=\"Ghost variant\"\n        value={valueGhost}\n        onChange={setValueGhost}\n      />\n    </Stack>\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<DateRangePickerProps[\"value\"]>(null);\n\n  return (\n    <DateRangePickerField\n      label=\"Event Duration\"\n      description=\"Select the start and end dates for your event\"\n      value={value}\n      onChange={setValue}\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<DateRangePickerProps[\"value\"]>(null);\n  const [touched, setTouched] = useState<boolean>(false);\n\n  // Simulate validation errors\n  const errors = !value && touched ? { missing: true } : undefined;\n\n  return (\n    <DateRangePickerField\n      label=\"Required Date Range\"\n      description=\"Please select a date range\"\n      value={value}\n      onChange={setValue}\n      onBlur={() => setTouched(true)}\n      errors={errors}\n      touched={touched}\n      isRequired\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<DateRangePickerProps[\"value\"]>(null);\n\n  return (\n    <DateRangePickerField\n      label=\"Report Period\"\n      description=\"Select the date range for your report\"\n      info=\"Date ranges are inclusive. Both the start and end dates will be included in the report results.\"\n      value={value}\n      onChange={setValue}\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<DateRangePickerProps[\"value\"]>(null);\n\n  return (\n    <DateRangePickerField\n      label=\"Event Dates\"\n      description=\"Select your event dates\"\n      value={value}\n      onChange={setValue}\n      isRequired\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<DateRangePickerProps[\"value\"]>(null);\n\n  return (\n    <DateRangePickerField\n      label=\"Unavailable Dates\"\n      description=\"This field cannot be modified\"\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<DateRangePickerProps[\"value\"]>(null);\n\n  return (\n    <DateRangePickerField\n      label=\"Scheduled Period\"\n      description=\"This period is set and cannot be changed\"\n      value={value}\n      onChange={setValue}\n      isReadOnly\n    />\n  );\n}\n```\n\n### With time selection\n\nInclude time selection by setting the granularity prop:\n\n```jsx live-dev\nconst App = () => {\n  const [value, setValue] = useState<DateRangePickerProps[\"value\"]>(null);\n\n  return (\n    <DateRangePickerField\n      label=\"Meeting Schedule\"\n      description=\"Select date range with specific times\"\n      granularity=\"minute\"\n      value={value}\n      onChange={setValue}\n    />\n  );\n}\n```\n\nWhen `granularity=\"minute\"` (or other time values), the calendar remains open after date selection to allow time input.\n\n## Component requirements\n\n### Error handling\n\nDateRangePickerField 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  format: true,               // Built-in message: \"Please enter a valid format\"\n  custom: \"Custom error text\" // Custom message\n};\n```\n\n## Accessibility\n\nDateRangePickerField 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 = \"report-date-range-picker\";\n\nexport const Example = () => {\n  const [value, setValue] = useState<DateRangePickerProps[\"value\"]>(null);\n\n  return (\n    <DateRangePickerField\n      id={PERSISTENT_ID}\n      label=\"Report Period\"\n      description=\"Select the date range for your report\"\n      value={value}\n      onChange={setValue}\n    />\n  );\n};\n```\n\n**Note:** The `label` prop already provides an accessible name, so `aria-label` is not needed.\n\n#### Keyboard navigation\n\nThe component supports keyboard interaction inherited from DateRangePicker:\n- `Tab` / `Shift+Tab`: Navigate between segments and buttons\n- `Arrow keys`: Increment/decrement date segments\n- `Enter` / `Space`: Open calendar\n- `Escape`: Close calendar\n\n## Form integration\n\nDateRangePickerField integrates seamlessly with Formik:\n\n```tsx\nimport { useFormik } from 'formik';\nimport { DateRangePickerField } from '@commercetools/nimbus';\n\nconst MyForm = () => {\n  const formik = useFormik({\n    initialValues: {\n      dateRange: null,\n    },\n    validate: (values) => {\n      const errors = {};\n      if (!values.dateRange) {\n        errors.dateRange = { missing: true };\n      }\n      return errors;\n    },\n    onSubmit: (values) => {\n      console.log('Submitted:', values);\n    },\n  });\n\n  return (\n    <form onSubmit={formik.handleSubmit}>\n      <DateRangePickerField\n        name=\"dateRange\"\n        label=\"Event Dates\"\n        description=\"Select your event dates\"\n        value={formik.values.dateRange}\n        onChange={(value) => formik.setFieldValue('dateRange', value)}\n        onBlur={() => formik.setFieldTouched('dateRange', true)}\n        errors={formik.errors.dateRange}\n        touched={formik.touched.dateRange}\n        isRequired\n      />\n      <Button type=\"submit\">Submit</Button>\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=\"DateRangePickerField\" />\n\n### Custom error rendering\n\nUse the `renderError` prop to customize how specific error keys are displayed:\n\n```tsx\n<DateRangePickerField\n  label=\"Custom Validation\"\n  value={value}\n  onChange={setValue}\n  errors={{ tooLong: true, overlap: true }}\n  touched={true}\n  renderError={(key) => {\n    switch (key) {\n      case 'tooLong':\n        return 'Date range cannot exceed 90 days';\n      case 'overlap':\n        return 'This date range overlaps with an existing booking';\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 DateRangePickerField in 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 { DateRangePickerField } from '@commercetools/nimbus';\n\ndescribe('DateRangePickerField', () => {\n  it('renders label and description', () => {\n    render(\n      <DateRangePickerField\n        label=\"Event Dates\"\n        description=\"Select your event dates\"\n      />\n    );\n\n    expect(screen.getByText('Event Dates')).toBeInTheDocument();\n    expect(screen.getByText('Select your event dates')).toBeInTheDocument();\n  });\n\n  it('renders DateRangePicker with date segments', () => {\n    render(<DateRangePickerField label=\"Dates\" />);\n\n    // 6 segments: start (month, day, year) + end (month, day, year)\n    const segments = screen.getAllByRole('spinbutton');\n    expect(segments).toHaveLength(6);\n  });\n\n  it('shows required indicator when isRequired', () => {\n    render(<DateRangePickerField label=\"Required Field\" isRequired />);\n\n    expect(screen.getByText('*')).toBeInTheDocument();\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 { DateRangePickerField } from '@commercetools/nimbus';\n\ndescribe('DateRangePickerField interactions', () => {\n  it('opens calendar when trigger button is clicked', async () => {\n    const user = userEvent.setup();\n\n    render(\n      <DateRangePickerField\n        label=\"Event Dates\"\n        value={null}\n        onChange={() => {}}\n      />\n    );\n\n    const calendarButton = screen.getByRole('button', { name: /calendar/i });\n    await user.click(calendarButton);\n\n    await waitFor(() => {\n      expect(screen.getByRole('dialog')).toBeInTheDocument();\n    });\n  });\n\n  it('allows keyboard navigation through date segments', async () => {\n    const user = userEvent.setup();\n\n    render(\n      <DateRangePickerField\n        label=\"Event Dates\"\n        value={null}\n        onChange={() => {}}\n      />\n    );\n\n    // Get first date segment (start date month)\n    const segments = screen.getAllByRole('spinbutton');\n    const firstSegment = segments[0];\n\n    await user.click(firstSegment);\n    expect(firstSegment).toHaveFocus();\n\n    // Navigate to next segment with arrow key\n    await user.keyboard('{ArrowRight}');\n    expect(segments[1]).toHaveFocus();\n  });\n\n  it('calls onChange when date is selected from calendar', async () => {\n    const user = userEvent.setup();\n    const handleChange = jest.fn();\n\n    render(\n      <DateRangePickerField\n        label=\"Event Dates\"\n        value={null}\n        onChange={handleChange}\n      />\n    );\n\n    // Open calendar\n    const calendarButton = screen.getByRole('button', { name: /calendar/i });\n    await user.click(calendarButton);\n\n    await waitFor(() => {\n      expect(screen.getByRole('dialog')).toBeInTheDocument();\n    });\n\n    // Select a date (this will vary based on current month)\n    const dateButtons = screen.getAllByRole('button');\n    const selectableDate = dateButtons.find(btn =>\n      btn.getAttribute('data-focused') === 'true'\n    );\n\n    if (selectableDate) {\n      await user.click(selectableDate);\n      expect(handleChange).toHaveBeenCalled();\n    }\n  });\n\n  it('calls onBlur when focus leaves the field', async () => {\n    const user = userEvent.setup();\n    const handleBlur = jest.fn();\n\n    render(\n      <DateRangePickerField\n        label=\"Event Dates\"\n        value={null}\n        onChange={() => {}}\n        onBlur={handleBlur}\n      />\n    );\n\n    const segments = screen.getAllByRole('spinbutton');\n    await user.click(segments[0]);\n    await user.tab(); // Move focus away from all segments\n\n    expect(handleBlur).toHaveBeenCalled();\n  });\n\n  it('does not allow interaction when disabled', async () => {\n    const user = userEvent.setup();\n    const handleChange = jest.fn();\n\n    render(\n      <DateRangePickerField\n        label=\"Event Dates\"\n        value={null}\n        onChange={handleChange}\n        isDisabled\n      />\n    );\n\n    const calendarButton = screen.getByRole('button', { name: /calendar/i });\n    expect(calendarButton).toBeDisabled();\n\n    // Attempt to open calendar (should not work)\n    await user.click(calendarButton);\n    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();\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 { DateRangePickerField } from '@commercetools/nimbus';\n\ndescribe('DateRangePickerField error handling', () => {\n  it('does not show errors when field is not touched', () => {\n    render(\n      <DateRangePickerField\n        label=\"Dates\"\n        errors={{ missing: true }}\n        touched={false}\n      />\n    );\n\n    expect(screen.queryByRole('alert')).not.toBeInTheDocument();\n  });\n\n  it('shows errors when field is touched and has errors', () => {\n    render(\n      <DateRangePickerField\n        label=\"Dates\"\n        errors={{ missing: true }}\n        touched={true}\n      />\n    );\n\n    expect(screen.getByRole('alert')).toBeInTheDocument();\n    expect(screen.getByText(/field is required/i)).toBeInTheDocument();\n  });\n\n  it('displays custom error messages', () => {\n    render(\n      <DateRangePickerField\n        label=\"Dates\"\n        errors={{ custom: \"Date range cannot exceed 30 days\" }}\n        touched={true}\n      />\n    );\n\n    expect(screen.getByText(\"Date range cannot exceed 30 days\")).toBeInTheDocument();\n  });\n});\n```\n\n## Resources\n\n- [Storybook](https://nimbus-storybook.vercel.app/?path=/docs/patterns-fields-daterangepickerfield--docs)\n- [DateRangePicker Component](/components/inputs/daterangepicker)\n- [FormField Component](/components/inputs/formfield)\n- [FieldErrors Component](/components/forms/fielderrors)\n- [React Aria DateRangePicker](https://react-spectrum.adobe.com/react-aria/DateRangePicker.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": "Working with date values",
+          "href": "#working-with-date-values",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            3
+          ],
+          "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": "With description",
+          "href": "#with-description",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "With validation errors",
+          "href": "#with-validation-errors",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "With info popover",
+          "href": "#with-info-popover",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Required field",
+          "href": "#required-field",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Disabled state",
+          "href": "#disabled-state",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            7
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Read-only state",
+          "href": "#read-only-state",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            8
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "With time selection",
+          "href": "#with-time-selection",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            9
+          ],
+          "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"
+        }
+      ]
+    }
+  }
+}