feat/make-dokan-settings-components

[Aunshon]

Summary by CodeRabbit

Release Notes

New Features

• Added Settings component for dynamic, schema-driven configuration management
• Added ColorPicker component for color selection
• Added RadioImageCard for rich radio button options with image support

Documentation

• Added comprehensive Settings component developer documentation

Improvements

• Enhanced Input component styling and focus states
• Updated Storybook to support MDX documentation files
• Expanded Popover component with Close and Arrow variants
• Improved menu navigation with automatic expansion for nested items

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

📝 Walkthrough

Walkthrough

A comprehensive Settings component system is introduced with context-based state management, field rendering for multiple input types, sidebar navigation, and supporting utilities for data formatting, validation, and dependency resolution. Package.json is expanded with build scripts, dependencies, and public subpath exports. Storybook configuration is updated to support MDX files, and new UI components (ColorPicker, RadioImageCard) are added.

Changes

Cohort / File(s)	Summary
Settings Component System src/components/settings/index.tsx, src/components/settings/settings-context.tsx, src/components/settings/settings-content.tsx, src/components/settings/field-renderer.tsx, src/components/settings/fields.tsx, src/components/settings/settings-sidebar.tsx, src/components/settings/settings-formatter.ts, src/components/settings/settings-types.ts, src/components/settings/Settings.mdx	Introduces complete settings UI system with context-based state, field components (text, number, textarea, select, switch, radio, checkbox, color picker, HTML), dependency-driven rendering, per-scope dirty tracking, validation with multiple rules, searchable sidebar navigation, data formatting with hierarchy resolution, and comprehensive developer documentation.
Package Configuration .storybook/main.ts, package.json	Updates Storybook to load MDX story files. Expands package.json with build scripts (storybook, build, lint, typecheck), peer dependencies (React >=17.0.0), runtime dependencies (WordPress, UI, styling libraries), dev dependencies (Storybook, Tailwind, types), Node >=22 requirement, and public subpath exports for components/ui, providers, themes, utils, and settings.
UI Component Enhancements src/components/ui/color-picker.tsx, src/components/ui/color-picker.stories.tsx, src/components/ui/radio-group.tsx, src/components/ui/popover.tsx, src/components/ui/input.tsx, src/components/ui/layout-menu.tsx, src/components/ui/index.ts	Introduces ColorPicker component with Popover integration and four story variants. Adds RadioImageCard for image-based radio selections. Extends Popover with Close and Arrow components. Adds testId and auto-expand logic to LayoutMenu. Minor Input styling adjustment.
Public API src/index.ts	Re-exports Settings component, useSettings hook, data utilities (formatSettingsData, extractValues), and types from the new settings module.

Sequence Diagram(s)

sequenceDiagram
    actor User
    participant SettingsUI as Settings UI
    participant SettingsProvider as SettingsProvider
    participant FieldRenderer as FieldRenderer
    participant Context as Settings Context

    User->>SettingsUI: Open Settings with schema
    SettingsUI->>SettingsProvider: Initialize with schema/values
    SettingsProvider->>SettingsProvider: Format & normalize schema
    SettingsProvider->>Context: Set initial state (pages, values, errors)
    
    User->>SettingsUI: Click sidebar item
    SettingsUI->>Context: Update navigation (activePage/activeSubpage)
    Context->>SettingsUI: Notify state change
    SettingsUI->>SettingsUI: Re-render content area

    User->>SettingsUI: Update field value
    SettingsUI->>FieldRenderer: Trigger onChange
    FieldRenderer->>Context: Call updateValue(scope, key, value)
    Context->>Context: Validate field & update values
    Context->>Context: Mark scope as dirty
    SettingsUI->>SettingsUI: Re-render with updated state

    User->>SettingsUI: Click Save button
    SettingsUI->>Context: Trigger onSave with page values
    Context->>SettingsUI: Call onSave callback
    SettingsUI->>SettingsUI: Reset dirty state

Loading

sequenceDiagram
    participant Schema as Schema (Flat Array)
    participant Formatter as formatSettingsData()
    participant Tree as Hierarchical Tree
    participant Evaluator as evaluateDependencies()
    participant Validator as validateField()

    Schema->>Formatter: Pass flat settings array
    Formatter->>Formatter: Resolve parent pointers (bottom-up)
    Formatter->>Formatter: Construct root pages
    Formatter->>Formatter: Enrich nodes recursively
    Formatter->>Formatter: Normalize options & validations
    Formatter->>Tree: Return hierarchical structure
    
    Tree->>Evaluator: Element + values
    Evaluator->>Evaluator: Evaluate dependencies
    Evaluator->>Tree: Return shouldDisplay boolean

    Tree->>Validator: Element + field value
    Validator->>Validator: Check validation rules (required, min, max, etc.)
    Validator->>Tree: Return error string or null

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~75 minutes

Poem

🐰 Through fields and forms we hippity-hop,
Settings flow from page to stop,
Context wisdom lights the way,
Dependencies kept neat each day,
Save your state with joy and cheer—
The perfect form is finally here! ✨

🚥 Pre-merge checks | ✅ 3 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 76.19% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat/make-dokan-settings-components' accurately describes the main change: introducing a comprehensive new Settings component system with multiple related sub-components, hooks, and utilities.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into feat/settings-components

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/make-dokan-settings-components

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}