import InputFilterText from '../InputFilterText';
import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';

export const argTypes = {
  component: InputFilterText,
  title: 'Components/InputFilterText',
};

<Meta title="Components/InputFilterText" component={InputFilterText} />

export const InputFilterTextTemplate = args => (
  <div className="w-80">
    <InputFilterText {...args} />
  </div>
)

<Heading title="InputFilterText" componentRelativePath="InputFilterText/InputFilterText.tsx" />

- [Overview](#overview)
- [Props](#props)
- [Contribute](#contribute)

## Overview

InputFilterText is a component that is styled such that it can be used as a text input to
filter a list of textual items. It allows you to enter any text. There are two (optional)
callbacks that can be invoked as the characters of the text are entered: one
callback is invoked as each character is typed and another is debounced so that
any filtering can occur once the user has entered a significant amount of info and
pausing by a configurable amount of time in milliseconds. The component also
provides a button on the far right of the component that when clicked will clear the input
text. The button only appears when there is text in the component.

<Canvas>
  <Story
    name="Overview"
    args={{
      className: "w-full text-white",
      placeholder: "Search for...",
      onChange: () => console.log('input text changed'),
      onDebounceChange: () => console.log('debounce text changed'),
    }}
  >
    {InputFilterTextTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable of={InputFilterText} />

## Contribute

<Footer componentRelativePath="InputFilterText/__stories__/InputFilterText.stories.mdx" />
