npm package: @licuido-ui/ui_kanban-view
Description: Kanbam View uploading files, moving items between multiple lists, and rearranging images and assets.
Latest version: 0.0.2

# kanbanView

Kanbam View uploading files, moving items between multiple lists, and rearranging images and assets.

### Author
 * @author Henry Dyson J <henry@crayond.co>
## Link
[Story Book Link kanbanView](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_kanban-view
```

## Import component

```jsx
import { KanbanView } from '@licuido-ui/ui_kanban-view';
```

## Usage

```jsx
<KanbanView dragData={[]} />
```

## Image
![alt text](./kanbanView.png)

## Sample Code

```jsx
<KanbanView
    dragData={[
        {
      id: '1',
      title: 'Processing',
      bottomButton: {
        buttonLabel: 'string',
        icon: <AddNewButtonIcon />,
        onClick: () => false,
      },
      tasks: [
        {
      id: '1',
      title: 'title1',
      status: 'Progress',
      cardTitle: 'Progress Create Components',
      isActive: true,
      notifyIcon: <ActiveNotification />,
      moreIcon: <MoreIcon />,
      component: '',
      subTitles: [
        {
          label: '# design',
          bgColor: '',
          borderColor: '#D3D3D3',
          textColor: '',
        },
        {
          label: 'Design System',
          bgColor: '#DEE6F9',
          borderColor: '',
          textColor: '#2B5ED6',
        },
      ],
      images: [
        { img: '/sample.jpg', height: '', width: '' },
        { img: '/sample.jpg', height: '', width: '' },
      ],
      createdAt: 'On 17 Mar, 23',
    },
      ],
    },
    ]}
    rootStyle={{}}
    columnContainerRootStyle={{}}

    columnTitleColor={'#262626'}
    columnTitleBoxStyle={{}}
    columnTitleStyle={{}}

    rowDropShadowBgColor={''}
    rowDropShadowBorderColor={'#665CD7'}
    rowDropShadowStyles={{}}
    rowDropShadowWidth={'360px'}

    addButtonLabelColor={'#665CD7'}
    columnContainerBgColor={''}
    addButtonLabelSize={12}
    addTodoButtonRootStyle={{}}
    addButtonLabelStyle={{}}

    childItemBgColor={'#FFFF'}
    childItemComponentBgColor={'#FFFF'}
    rowChildItemRootStyle={{}}
    rowChildItemComponentRootStyle={{}}

    childItemHoverBorderColor={'#665CD7'}
    childItemHoverRootStyle={{}}
    childItemActiveBorderColor={'#665CD7'}
    childItemActiveRootStyle={{}}

    childItemComponentHoverBorderColor={'#665CD7'}
    childItemComponentHoverRootStyle={{}}
    childItemComponentActiveBorderColor={'#665CD7'}
    childItemComponentActiveRootStyle={{}}

    handleStartFun={() => {}}
    handleUpdateFun={() => {}}
    handleEndFun={() => {}}
/>
```

## Props

| **Name**                                | **Description**      | **Default** | **Control**                                        |
| --------------------------------------- | -------------------- | ----------- | -------------------------------------------------- |
| **className**                           | string               | ""          |
| **kanbanId**                            | string               | string      | string                                             |
| **sx**                                  | SxProps&lt;Theme&gt; | \{ \}       | sx : \{\}                                          |
| **rootStyle**                           | SxProps&lt;\{\}&gt;  | \{ \}       | rootStyle : \{\}                                   |
| **dragData**                            | ColumnType\[\]       | \[\]        | []                                                 |
| **columnContainerRootStyle**            | SxProps&lt;\{\}&gt;  | \{ \}       | columnContainerRootStyle : \{\}                    |
| **columnTitleColor**                    | string               | "\#262626"  | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **columnTitleBoxStyle**                 | SxProps&lt;\{\}&gt;  | \{ \}       | columnTitleBoxStyle : \{\}                         |
| **columnTitleStyle**                    | SxProps&lt;\{\}&gt;  | \{ \}       | columnTitleStyle : \{\}                            |
| **rowDropShadowBgColor**                | string               | ""          | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **rowDropShadowBorderColor**            | string               | "\#665CD7"  | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **rowDropShadowStyles**                 | SxProps&lt;\{\}&gt;  | \{ \}       | rowDropShadowStyles : \{\}                         |
| **rowDropShadowWidth**                  | string  `or` number  | "360px"     | "360px"                                            |
| **addButtonLabelColor**                 | string               | "\#665CD7"  | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **columnContainerBgColor**              | string               | "red"       | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **addButtonLabelSize**                  | string  `or` number  | 12          | 12                                                 |
| **addTodoButtonRootStyle**              | SxProps&lt;\{\}&gt;  | \{ \}       | addTodoButtonRootStyle : \{\}                      |
| **addButtonLabelStyle**                 | SxProps&lt;\{\}&gt;  | \{ \}       | addButtonLabelStyle : \{\}                         |
| **childItemBgColor**                    | string               | "\#FFFF"    | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **childItemComponentBgColor**           | string               | "\#FFFF"    | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **rowChildItemRootStyle**               | SxProps&lt;\{\}&gt;  | \{ \}       | rowChildItemRootStyle : \{\}                       |
| **rowChildItemComponentRootStyle**      | SxProps&lt;\{\}&gt;  | \{ \}       | rowChildItemComponentRootStyle : \{\}              |
| **childItemHoverBorderColor**           | string               | "\#665CD7"  | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **childItemHoverRootStyle**             | SxProps&lt;\{\}&gt;  | \{ \}       | childItemHoverRootStyle : \{\}                     |
| **childItemActiveBorderColor**          | string               | "\#665CD7"  | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **childItemActiveRootStyle**            | SxProps&lt;\{\}&gt;  | \{ \}       | childItemActiveRootStyle : \{\}                    |
| **childItemComponentHoverBorderColor**  | string               | "\#665CD7"  | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **childItemComponentHoverRootStyle**    | SxProps&lt;\{\}&gt;  | \{ \}       | childItemComponentHoverRootStyle : \{\}            |
| **childItemComponentActiveBorderColor** | string               | "\#665CD7"  | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **childItemComponentActiveRootStyle**   | SxProps&lt;\{\}&gt;  | \{ \}       | childItemComponentActiveRootStyle : \{\}           |
| **handleStartFun**                      | ()=>                 | \-          | -                                                  |
| **handleUpdateFun**                     | ()=>                 | \-          | -                                                  |
| **handleEndFun**                        | ()=>                 | \-          | -                                                  |