number-input.stories.ts

Overview

The number-input.stories.ts file defines Storybook stories for the NumberInput React component. Storybook is a tool for building UI components and pages in isolation, which helps in developing, testing, and documenting components.

This file serves several purposes:

• It provides metadata and configuration for how the NumberInput component stories appear in the Storybook interface.

• It documents the component's usage, features, and props through Storybook's Docs addon.

• It defines multiple stories showcasing different configurations of the NumberInput component (default, with initial value, custom height, and custom styling).

• It enables interactive controls and action logging for testing the component's behavior in Storybook.

Detailed Explanation

Top-Level Metadata (meta)

• Type: Meta<typeof NumberInput>

• Purpose: Defines the Storybook metadata for the NumberInput component.

• Key Properties:

  • title: The category and name under which the component appears in Storybook's sidebar (Example/NumberInput).

  • component: The NumberInput component itself.

  • parameters: Configuration for layout (centering), documentation (component description with markdown), and additional Storybook settings.

  • tags: Includes autodocs to enable automatic documentation generation.

  • argTypes: Defines controls and documentation for component props:

    • value (number input control) — current numeric value.

    • onChange (callback function) — triggered when the value changes, not controllable via Storybook UI.

    • height (text control) — custom height styling.

    • className (text control) — additional CSS classes for styling.

  • args: Default argument for the component's onChange prop, which uses a spy function (fn()) from Storybook's test utilities to log actions.

Usage Example:

import NumberInput from '@/components/originui/number-input';

const meta: Meta<typeof NumberInput> = {
  title: 'Example/NumberInput',
  component: NumberInput,
  // ... other configurations
};
export default meta;

Stories

Each story defines a particular state or configuration of the NumberInput component with its arguments (args) and documentation (parameters.docs.description.story). They also include tags to categorize them as development stories (['!dev']).

1. Default

• Description: Displays the number input with default styling and a zero value.

• Args:

  • value: 0

• Example Usage:

<NumberInput
  value={0}
  onChange={(value) => console.log('Value changed:', value)}
/>

2. WithInitialValue

• Description: Displays the number input with an initial value of 10.

• Args:

  • value: 10

• Example Usage:

<NumberInput
  value={10}
  onChange={(value) => console.log('Value changed:', value)}
/>

3. CustomHeight

• Description: Displays the number input with a custom height of 60px.

• Args:

  • value: 5

  • height: '60px'

• Example Usage:

<NumberInput
  value={5}
  height="60px"
  onChange={(value) => console.log('Value changed:', value)}
/>

4. WithCustomClass

• Description: Displays the number input with custom CSS classes for border and background color.

• Args:

  • value: 3

  • className: 'border-blue-500 bg-blue-50'

• Example Usage:

<NumberInput
  value={3}
  className="border-blue-500 bg-blue-50"
  onChange={(value) => console.log('Value changed:', value)}
/>

Important Implementation Details

• The file imports Meta and StoryObj types from Storybook for strict typing of stories.

• Uses fn() from storybook/test to create a spy function for the onChange handler, enabling action logging in Storybook's actions panel.

• Documentation for the component is written in markdown within the parameters.docs.description.component field, providing rich inline documentation visible in Storybook.

• The stories use the args pattern to define input props, enabling Storybook's controls for live editing.

• The component is centered in the Storybook canvas by setting layout: 'centered'.

• Tags like autodocs are used to trigger Storybook's Autodocs feature for automatic documentation generation.

• The file primarily focuses on configuring Storybook and does not implement any UI logic itself; it relies on the imported NumberInput component.

Interaction with Other Parts of the System

• NumberInput Component: This file imports the actual NumberInput component from the origin UI library (@/components/originui/number-input). The stories showcase and test this component.

• Storybook Framework: The file interacts heavily with Storybook's API and addon ecosystem (Docs, Controls, Actions) to provide an interactive playground and documentation for the NumberInput.

• Testing Utilities: Uses Storybook's fn() utility to spy on events.

• Styling: Tailwind CSS classes can be applied via the className prop to customize component appearance within stories.

Mermaid Diagram - Storybook Story Structure

classDiagram
    class Meta {
        +title: string
        +component: React.ComponentType
        +parameters: object
        +tags: string[]
        +argTypes: object
        +args: object
    }

    class Story {
        +args: object
        +parameters: object
        +tags: string[]
    }

    Meta <|-- Default : extends
    Meta <|-- WithInitialValue : extends
    Meta <|-- CustomHeight : extends
    Meta <|-- WithCustomClass : extends

Summary

The number-input.stories.ts file is a Storybook configuration file that documents and demonstrates the NumberInput component through multiple interactive stories. It provides rich documentation, interactive controls, and action logging to facilitate easy development, testing, and understanding of the component's capabilities and configurations in isolation from the main application.