3

I am currently implementing a React Customized Input component with storybook. What I am hoping to achieve is this customized Input component will take few args, one of the args is onChangeInput, it'll be responsible to setState value for 'input value' later on, below is my main Input component implementation:

Input.tsx

import React from 'react'

export type Props = {
  /**
   * This is the Label text value
   */
  labelText?: string,
  /**
   * Placeholder text for input
   */
  placeholder?: string,
  /**
   * Classes defined here will be appended to the input's default classes
   */
  className?: string,
  /**
   * Value attribute of Input
   */
  value?: string,
  /**
   * Name attribute of Input
   */
  name?: string,
  /**
   * Label for attribute
   */
  htmlFor?: string,
  /**
   * Callback for when user typing in Input
   */
  onChangeInput: any,
}

/**
 * Generic input component.
 */
export function Input({labelText, placeholder='', className='', value='', name='', htmlFor='', onChangeInput}:Props) {    
    return (
        <div>
            <label className='text-text-01-normal font-medium text-sm leading-5' htmlFor={htmlFor}>
                {labelText}
            </label>
            <div className="relative">
                <input
                    id={htmlFor}
                    className={[
                        "relative w-64 pl-3 h-8 py-2 border rounded bg-ui-03 border-ui-06 text-text-01-normal leading-5 text-sm text-left hover:bg-ui-03 hover:border-ui-07 focus:bg-ui-03 focus:outline-none focus:border-interactive-01-active active:bg-ui-03",                        
                        className
                        ].join(' ')} 
                    placeholder={placeholder}
                    value={value}
                    name={name}
                    onChange={ (e) => { onChangeInput(e.target.value) }}
                />
            </div>
        </div>
    )
}   

Then in my storybook file, I was hoping to have a hook useState for localValue, when onChangeInput as a method passed into customized Input component , the native onChange from input will start to let it setState for localValue , so my customized Input Component could display the input value as user typing...

Input.stories.tsx

import React, { useState } from 'react';
import { Story, Meta } from '@storybook/react';
import { withDesign } from 'storybook-addon-designs'

import { Input, Props } from './Input';

const [localValue, setValue] = useState<string>('');
const onChangeInput = (inputValue: string) => {
    console.log(inputValue);
    setValue(inputValue);
}

export default {
  title: 'General/Input',
  component: Input,
  decorators: [withDesign],
  parameters: {
    design: {
      type: 'figma',
    },
  },
} as Meta;

const Template: Story<Props> = (args:Props) => <Input {...args} />;

export const Default: Story<Props> = Template.bind({});
Default.args = {
  labelText: 'Label',
  placeholder: 'Placeholder',
  name: 'test-name',  
  htmlFor: 'test-for',
  value: localValue,
  onChange: onChangeInput,
} as Partial<Props>;
Default.parameters = {
  design: {
    url: 'https://www.figma.com/to-some-design-url'
  }
}

but unfortunately I cannot get it work, so here to ask for help, please suggest with code example, thanks

1 Answer 1

12

After some investigation by myself. Nothing wrong with the Input.tsx file. Just had some missunderstanding on storybook. Below is the solution, works fine, for anyone in future searches for the same issue, please feel free to copy paste to your own project :) thanks

import React, { useState } from 'react';
import { Story, Meta } from '@storybook/react';
import { withDesign } from 'storybook-addon-designs'

import { Input, Props } from './Input';

export default {
  title: 'General/Input',
  component: Input,
  decorators: [withDesign],
  parameters: {
    design: {
      type: 'figma',
    },
  },
} as Meta;

const Template: Story<Props> = () => {    
    const [localValue, setValue] = useState<string>('');
    const onChangeInput = (inputValue: string) => {
        setValue(inputValue);
    }
    return (
        <Input 
            labelText='Label'
            placeholder='Placeholder'
            className='test-class-name'
            name='test-name'            
            value={localValue}
            htmlFor='test-for'
            onChangeInput={ onChangeInput }
        />
    )
}

export const Default: Story<Props> = Template.bind({});
Default.parameters = {
  design: {
    url: 'https://www.figma.com/link-to-design'
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.