Storybook Configurator

A versatile tool to set up your components interactively and efficiently.

HOW TO USE

0. install

npm install -d storybook-configurator
yarn add -d storybook-configurator

1. Change the layout parameter into 'fullscreen'

layout: 'fullscreen'

2. On render function on Story, set states you want to change with useControlState

3. Create a array with controller

4. Place em all with Dashboard!

Table of Contents

• Dashboard Component
• State Management
• Control Components

Common Props

The following props are shared across all components:

| Prop | Type | Description | | ------------- | ------ | ---------------------------- | | title | string | Title of the component | | description | string | Description of the component |

Dashboard Component

The Dashboard component acts as the primary container for your interactive stories.

Props

| Prop | Type | Description | | ---------- | -------------------- | ---------------------------------------------------- | | controls | ReactNode[] | Array of control components to be placed on the left | | option | { minWidth: number } | Configuration option for the dashboard | | children | ReactNode | Components to display in the main area |

option

• minWidth : minimum width of control section

Example Usage

const [state, setState] = useControlState({
    numberarray: [1, 2, 3],
    numberinput: 1,
    numberslider: 1,
    objecteditor: { key: 'value' },
    colorpicker: '#ff0000',
    textarray: ['one', 'two', 'three'],
    textinput: 'text',
    textselect: 'o',
    booltoggle: true,
});

const textselectOptions = ['one', 'two', 'three'];

const controls = [
    <NumberArray
        title="Number Array"
        description="Modify an array of numbers"
        key="numberarray"
        value={state.numberarray}
        setValue={setState.numberarray}
    />,
    <NumberInput
        title="Number Input"
        description="Input a single number"
        key="numberinput"
        value={state.numberinput}
        setValue={setState.numberinput}
    />,
    <NumberSlider
        title="Number Slider"
        description="Slide to select a number"
        key="numberslider"
        value={state.numberslider}
        setValue={setState.numberslider}
        option={{
            showInput: false,
        }}
    />,
    <ObjectEditor
        title="Object Editor"
        description="Edit an object"
        key="objecteditor"
        value={state.objecteditor}
        setValue={setState.objecteditor}
    />,
    <ColorPicker
        title="Color Picker"
        description="Pick a color"
        key="colorpicker"
        value={state.colorpicker}
        setValue={setState.colorpicker}
    />,
    <TextArray
        title="Text Array"
        description="Modify an array of text"
        key="textarray"
        value={state.textarray}
        setValue={setState.textarray}
    />,
    <TextInput
        title="Text Input"
        description="Input a single text"
        key="textinput"
        value={state.textinput}
        setValue={setState.textinput}
    />,
    <TextSelector
        title="Text Selector"
        description="Select a text from options"
        key="textselect"
        value={state.textselect}
        setValue={setState.textselect}
        select={textselectOptions}
    />,
    <BoolToggle
        title="Boolean Toggle"
        description="Toggle a boolean value"
        key="booltoggle"
        value={state.booltoggle}
        setValue={setState.booltoggle}
    />,
];

return (
    <Dashboard
        controls={controls}
        title="Dashboard"
        description="This is Dashboard for storybook"
    >
        <div>
            <h2>Interactive Controls</h2>
            <ul>
                <li>Number Array: {state.numberarray.join(', ')}</li>
                <li>Number Input: {state.numberinput}</li>
                <li>Number Slider: {state.numberslider}</li>
                <li>Object Editor: {JSON.stringify(state.objecteditor)}</li>
                <li>
                    Color Picker:{' '}
                    <span style={{ color: state.colorpicker }}>{state.colorpicker}</span>
                </li>
                <li>Text Array: {state.textarray.join(', ')}</li>
                <li>Text Input: {state.textinput}</li>
                <li>Text Selector: {state.textselect}</li>
                <li>Boolean Toggle: {state.booltoggle ? 'true' : 'false'}</li>
            </ul>
        </div>
    </Dashboard>
);

State Management

useControlState Hook

The useControlState hook simplifies managing multiple states for controls in your Storybook.

const [state, setState] = useControlState({
    numberarray: [1, 2, 3],
    numberinput: 1,
    numberslider: 1,
    objecteditor: { key: 'value' },
    colorpicker: '#ff0000',
    textarray: ['one', 'two', 'three'],
    textinput: 'text',
    textselect: 'one',
    booltoggle: true,
});

// Usage
state.numberarray; // Get the current state value

setState.numberarray([1, 3]); // Update the state with a new array
setState.numberarray((prev) => prev.filter((item) => item !== 1)); // Works like useState

How to deal with types

empty array

• use as to set types for array

const [state, setState] = useControlState({
    numberarray: [] as number[],
    stringarray: [] as string[],
})

Control Components

1. NumberArray

A component for modifying an array of numbers.

Example

<NumberArray
    title="Number Array"
    description="Modify an array of numbers"
    key="numberarray"
    value={state.numberarray}
    setValue={setState.numberarray}
/>

Type

| Property | Type | Required | Description | | ---------- | ---------------------------------- | -------- | ------------------------ | | value | number[] | Yes | Current array of numbers | | setValue | Dispatch<SetStateAction<number[]>> | Yes | State setter function |

2. NumberInput

A component for entering a single numeric value.

Option

option?: {
    min?: number;
    // Minimum allowable input
    max?: number;
    // Maximum allowable input
    step?: number;
    // Step intervals for the input buttons
};

Example

<NumberInput
    title="Number Input"
    description="Input a single number"
    key="numberinput"
    value={state.numberinput}
    setValue={setState.numberinput}
/>

Type

| Property | Type | Required | Description | | ---------- | --------------------------------- | -------- | --------------------- | | value | number | Yes | Current number value | | setValue | Dispatch<SetStateAction<number>> | Yes | State setter function | | option | option | No | Configuration options |

3. NumberSlider

A slider for selecting numeric values.

Option

option?: {
    min?: number;
    // Minimum slider value
    max?: number;
    // Maximum slider value
    step?: number;
    // Step increment for the slider
    showInput?: boolean;
    // Display an input box below the slider
};

Example

<NumberSlider
    title="Number Slider"
    description="Slide to select a number"
    key="numberslider"
    value={state.numberslider}
    setValue={setState.numberslider}
    option={{
        showInput: false,
    }}
/>

Type

| Property | Type | Required | Description | | ---------- | --------------------------------- | -------- | ---------------------------- | | value | number | Yes | Current slider value | | setValue | Dispatch<SetStateAction<number>> | Yes | State setter function | | option | option | No | Slider configuration options |

4. ObjectEditor

A component for editing objects and arrays.

Option

option?: {
    height?: string;
    // Editor display height
    readOnly?: boolean;
    // Specifies if the editor is read-only
};

Example

<ObjectEditor
    title="Object Editor"
    description="Edit an object"
    key="objecteditor"
    value={state.objecteditor}
    setValue={setState.objecteditor}
/>

Type

| Property | Type | Required | Description | | ---------- | ---------------------------------- | -------- | ---------------------------- | | value | unknown | Yes | Current object value | | setValue | Dispatch<SetStateAction<unknown>> | Yes | State setter function | | option | ObjectEditorOptions | No | Editor configuration options |

5. ColorPicker

A component for selecting and displaying colors.

Example

<ColorPicker
    title="Color Picker"
    description="Pick a color"
    key="colorpicker"
    value={state.colorpicker}
    setValue={setState.colorpicker}
/>

Type

| Property | Type | Required | Description | | ---------- | --------------------------------- | -------- | -------------------------------- | | value | string | Yes | Current color value (hex format) | | setValue | Dispatch<SetStateAction<string>> | Yes | State setter function |

6. TextArray

A component for managing an array of text values.

Example

<TextArray
    title="Text Array"
    description="Modify an array of text"
    key="textarray"
    value={state.textarray}
    setValue={setState.textarray}
/>

Type

| Property | Type | Required | Description | | ---------- | ---------------------------------- | -------- | ------------------------ | | value | string[] | Yes | Current array of strings | | setValue | Dispatch<SetStateAction<string[]>> | Yes | State setter function |

7. TextInput

A component for entering text values.

Option

option?: {
    placeholder?: string;
    // Placeholder text for the input field
    maxLength?: number;
    // Maximum character length allowed
};

Example

<TextInput
    title="Text Input"
    description="Input a single text"
    key="textinput"
    value={state.textinput}
    setValue={setState.textinput}
/>

Type

| Property | Type | Required | Description | | ---------- | --------------------------------- | -------- | --------------------------- | | value | string | Yes | Current text value | | setValue | Dispatch<SetStateAction<string>> | Yes | State setter function | | option | option | No | Input configuration options |

8. TextSelector

A dropdown component for choosing from predefined options.

Example

const textselectOptions = ['one', 'two', 'three'];

<TextSelector
    title="Text Selector"
    description="Select a text from options"
    key="textselect"
    value={state.textselect}
    setValue={setState.textselect}
    select={textselectOptions}
/>;

Type

| Property | Type | Required | Description | | ---------- | --------------------------------- | -------- | --------------------------- | | value | string | Yes | Current selected value | | setValue | Dispatch<SetStateAction<string>> | Yes | State setter function | | select | string[] | Yes | Array of selectable options |

9. TextArea

A component for entering multi lined text values.

Example

<TextArea
    title="Text Area"
    description="Input a large text"
    key="textarea"
    value={state.textarea}
    setValue={setState.textarea}
    option={{
        maxLength: 100,
        maxLines: 10,
    }}
/>

Option

option?: {
    placeholder?: string;
    // Placeholder for string
    maxLength?: number;
    // Maximum length
    maxLines?: number;
    // Maximum lines
};

Type

| Property | Type | Required | Description | | ---------- | --------------------------------- | -------- | ---------------------- | | value | string | Yes | Current selected value | | setValue | Dispatch<SetStateAction<string>> | Yes | State setter function |

10. BoolToggle

A switch for toggling boolean values.

Example

<BoolToggle
    title="Boolean Toggle"
    description="Toggle a boolean value"
    key="booltoggle"
    value={state.booltoggle}
    setValue={setState.booltoggle}
/>

Type

| Property | Type | Required | Description | | ---------- | ---------------------------------- | -------- | --------------------- | | value | boolean | Yes | Current toggle state | | setValue | Dispatch<SetStateAction<boolean>> | Yes | State setter function |