npm package: @licuido-ui/ui_filter
Description: The Filter component is a flexible and customizable filtering tool. It allows users to apply filters and refine their data based on various criteria. The component provides a user-friendly interface with options like search functionality, chip display, an
Latest version: 0.0.2

# Filter

The Filter component is a flexible and customizable filtering tool. It allows users to apply filters and refine their data based on various criteria. The component provides a user-friendly interface with options like search functionality, chip display, and more. Users can select from a list of custom data items and use buttons to trigger specific actions based on their selected filters. With its configurable styles and options, the Filter component offers a powerful solution for creating interactive and dynamic filtering experiences in web applications.

### Author

- @author Akila Kalaiyarasan <akila@crayond.co>

## Link

[Story Book Link ButtonGroup](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i @licuido-ui/ui_filter
```

## Import component

```jsx
import { Filter } from '@licuido-ui/ui_filter';
```

## Usage

```jsx
<Filter customData={[]} buttons={[]} />
```

## Image

![alt text](./filter.png)

## Sample code

```jsx
    <Filter
      icon={<FunnelIcon color='#fff' width='16px' height='16px' />,}
    customData={[
      {
        listName: 'Category',
        selected: false,
        subList: [
          {
            list: 'Category1',
            selected: false,
            listStyle: {},
            LabelbgColor: '#E9E9E9',
            LabelColor: '#666666',
          },
          {
            list: 'Category2',
            selected: false,
            listStyle: {},
            LabelbgColor: '#E9E9E9',
            LabelColor: '#666666',
          },
          {
            list: 'Category3',
            selected: false,
            listStyle: {},
            LabelbgColor: '#E9E9E9',
            LabelColor: '#666666',
          },
          {
            list: 'Category4',
            selected: false,
            listStyle: {},
            LabelbgColor: '#E9E9E9',
            LabelColor: '#666666',
          },
          {
            list: 'Category5',
            selected: false,
            listStyle: {},
            LabelbgColor: '#E9E9E9',
            LabelColor: '#666666',
          },
          {
            list: 'Category6',
            selected: false,
            listStyle: {},
            LabelbgColor: '#E9E9E9',
            LabelColor: '#666666',
          },
        ],
        listNameStyle: {},
        subListType: 'checkbox',
      }
      {
        listName: 'product',
        selected: false,
        subList: [
          {
            list: 'Product1',
            selected: false,
            LabelbgColor: '#E9E9E9',
            LabelColor: '#666666',
          },
          {
            list: 'product2',
            selected: false,
            LabelbgColor: '#E9E9E9',
            LabelColor: '#666666',
          },
          {
            list: 'product3',
            selected: false,
            LabelbgColor: '#E9E9E9',
            LabelColor: '#666666',
          },
          {
            list: 'product4',
            selected: false,
            LabelbgColor: '#E9E9E9',
            LabelColor: '#666666',
          },
        ],
        subListType: 'chip',
      },
      {
        listName: 'Price',
        selected: false,
        subList: [
          {
            list: '100',
            selected: false,
            LabelbgColor: '#E9E9E9',
            LabelColor: '#666666',
          },
          {
            list: '200',
            selected: false,
            LabelbgColor: '#E9E9E9',
            LabelColor: '#666666',
          },
          {
            list: '300',
            selected: false,
            LabelbgColor: '#E9E9E9',
            LabelColor: '#666666',
          },
        ],
        subListType: 'checkbox',
      },
    ]}

    buttons={[
      {
        label: 'Clear all',
        onClick: (data, getClearState) => {
          getClearState();
        },
        btnstyle: {
          backgroundColor: '#FFE8E9',
          padding: '4px',
          color: '#F44F5A',
          width: '121px',
          height: '36px',
        },
      },
      {
        label: 'Apply',
        onClick: (data: any) => {
          const selectedData: any = [];

          data.forEach((item: any) => {
            const { listName, subList } = item;
            const selectedSubList = subList?.filter((subItem: any) => subItem.selected);
            if (selectedSubList && selectedSubList.length > 0) {
              selectedData.push({ listName, subList: selectedSubList });
            }
          });
          console.log(selectedData);
        },
        btnstyle: {
          backgroundColor: '#665CD7',
          padding: '4px',
          color: '#fff',
          width: '121px',
          height: '36px',
        },
      },
    ]}
    rootStyle={{}}
    anchorOrigin={{
     vertical: 'bottom',
      horizontal: 'left',
    }}

    filterTitle={'Filter'}
    filterTitleStyle={{
      fontSize: '16px',
      textalign: 'left',
      color: '#262626',
      fontWeight: 'bold',
    }}
    listIconStyle={{}}
    subListContainerStyle={{}}
    buttonContainerStyle={{}}
    PopoverStyle={{}}
    contentWrapStyle={{}}
    searchBarStyle={{}}
    showSearchBar={true}
    filterButtonStyle={{ height: '36px', width: '10px' }}
    labelStyle={{}}
    listItemStyle={{}}
    maxLabelShow={}
    moreLabelStyle={{
     backgroundColor: '#E9E9E9',
      fontSize: '10px',
      m: 0,
      borderRadius: '4px',
    }}
    titleWrapperStyle={{}}
    btnWrapperStyle={{}}
    selectedchipConStyle={{}}
    searchPlaceHolder={'Search'}
    searchVariant={'outlined'}
    searchbarSize={'small'}
    checkboxStyle={{}}
    chipStyle={{}}
    chipVariant={'outlined'}
    visibleSubList={3}
    badgeColor={'secondary'}
    moreLabelcolor={'#666666'}
  />

```

## Props

| Name                    | Type                                                                       | Default Value                                | Description                                                                   |
| ----------------------- | -------------------------------------------------------------------------- | -------------------------------------------- | ----------------------------------------------------------------------------- |
| filterId                | string                                                                     | string                                       | string                                                                        |
| `className`             | string                                                                     | `''`                                         | Additional CSS class for styling the component.                               |
| `sx`                    | SxProps<Theme>                                                             | `{}`                                         | Custom style prop for using MUI's sx prop.                                    |
| `icon`                  | JSX.Element                                                                | `<FunnelIcon />`                             | The icon element to display as the filter button.                             |
| `customData`            | CustomData[]                                                               | `[]`                                         | An array of objects representing custom data for the filter.                  |
| `buttons`               | ButtonItem[]                                                               | `[]`                                         | An array of objects representing buttons in the filter.                       |
| `rootStyle`             | SxProps                                                                    | `{}`                                         | Additional custom style for the root container.                               |
| `filterButtonStyle`     | SxProps                                                                    | `{}`                                         | Additional custom style for the filter button.                                |
| `anchorOrigin`          | { vertical: 'top' \| 'bottom', horizontal: 'left' \| 'center' \| 'right' } | `{ vertical: 'bottom', horizontal: 'left' }` | The anchor origin for the Popover component.                                  |
| `transformOrigin`       | { vertical: 'top' \| 'bottom', horizontal: 'left' \| 'center' \| 'right' } | `{ vertical: 'top', horizontal: 'left' }`    | The transform origin for the Popover component.                               |
| `filterTitle`           | string                                                                     | ''                                           | The title to display at the top of the filter.                                |
| `filterTitleStyle`      | SxProps                                                                    | `{}`                                         | Additional custom style for the filter title.                                 |
| `listContainerStyle`    | SxProps                                                                    | `{}`                                         | Additional custom style for the list container.                               |
| `listIconStyle`         | SxProps                                                                    | `{}`                                         | Additional custom style for the list icon.                                    |
| `subListContainerStyle` | SxProps                                                                    | `{}`                                         | Additional custom style for the sublist container.                            |
| `buttonContainerStyle`  | SxProps                                                                    | `{}`                                         | Additional custom style for the button container.                             |
| `PopoverStyle`          | SxProps                                                                    | `{}`                                         | Additional custom style for the Popover component.                            |
| `contentWrapStyle`      | SxProps                                                                    | `{}`                                         | Additional custom style for the content wrapper.                              |
| `searchBarStyle`        | SxProps                                                                    | `{}`                                         | Additional custom style for the search bar.                                   |
| `showSearchBar`         | true \| false                                                              | `true`                                       | Whether to show the search bar in the filter.                                 |
| `chipStyle`             | SxProps                                                                    | `{}`                                         | Additional custom style for the chip.                                         |
| `labelStyle`            | SxProps                                                                    | `{}`                                         | Additional custom style for the label.                                        |
| `listItemStyle`         | SxProps                                                                    | `{}`                                         | Additional custom style for each list item.                                   |
| `maxLabelShow`          | number                                                                     | `2`                                          | The maximum number of labels to show before displaying the "more" label.      |
| `visibleSubList`        | number                                                                     | `3`                                          | The maximum number of sublist items to display before showing a "more" label. |
| `moreLabelStyle`        | SxProps                                                                    | `{}`                                         | Additional custom style for the "more" label.                                 |
| `titleWrapperStyle`     | SxProps                                                                    | `{}`                                         | Additional custom style for the title wrapper.                                |
| `btnWrapperStyle`       | SxProps                                                                    | `{}`                                         | Additional custom style for the button wrapper.                               |
| `selectedchipConStyle`  | SxProps                                                                    | `{}`                                         | Additional custom style for the selected chip container.                      |
| `searchPlaceHolder`     | string                                                                     | ''                                           | The placeholder text for the search bar.                                      |
| `searchVariant`         | 'standard' \| 'filled' \| 'outlined'                                       | `'outlined'`                                 | The variant of the search bar.                                                |
| `searchbarSize`         | 'small' \| 'medium'                                                        | `'small'`                                    | The size of the search bar.                                                   |
| `checkboxStyle`         | SxProps                                                                    | `{}`                                         | Additional custom style for the checkbox (if sublistType is 'checkbox').      |
| `chipVariant`           | 'filled' \| 'outlined'                                                     | `'outlined'`                                 | The variant of the chip (if sublistType is 'chip').                           |
| `badgeColor`            | 'success' \| 'primary' \| 'secondary' \| 'error'                           | `'primary'`                                  | The color of the badge on the filter button.                                  |
| `moreLabelcolor`        | string                                                                     | `'#666666'`                                  | The color of the text for the "more" label.                                   |
| `moreLabelbgColor`      | string                                                                     | `'#E9E9E9'`                                  | The background color of the "more" label.                                     |