feat: table

docs/src/stories/Table/Root.stories.tsx

@@ -0,0 +1,93 @@
+import { Button, Table, TableRootProps } from '@droz-js/visu'
+import { Pencil } from '@phosphor-icons/react'
+import { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<TableRootProps> = {
+  title: 'Table/Root',
+  component: Table.Root,
+  argTypes: {
+    children: {
+      control: 'none',
+      table: {
+        type: {
+          summary: 'React.ReactNode',
+        },
+      },
+      type: { name: 'other', required: false, value: 'React.ReactNode' },
+    },
+    hide: {
+      control: 'inline-check',
+      description: 'Aplica o hide em TableRoot',
+      options: [1, 2, 3, 4] as TableRootProps['hide'],
+      table: {
+        type: {
+          summary: [1, 2, 3, 4].join('|'),
+        },
+      },
+      type: { name: 'number', required: false },
+    },
+    fixed: {
+      control: 'boolean',
+      description: 'Aplica o fixed em TableRoot',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+      type: { name: 'boolean', required: false },
+      defaultValue: false as TableRootProps['fixed'],
+    },
+  },
+  args: {
+    children: '',
+  },
+} as Meta<TableRootProps>
+
+export default meta
+type TableRootStory = StoryObj<TableRootProps>
+
+export const Comum: TableRootStory = {
+  render: (args) => {
+    const test = ['test1', 'test2', 'test3', 'test4', 'test5', 'test6']
+
+    return (
+      <div className="border border-error" style={{ width: 920 }}>
+        <Table.Root {...args}>
+          <Table.Header>
+            <Table.Row>
+              <Table.Head>Name</Table.Head>
+              <Table.Head>Description</Table.Head>
+              <Table.Head className="text-right">Last Update</Table.Head>
+              <Table.Head className="text-right">Actions</Table.Head>
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {test.map((item, index) => (
+              <Table.Row
+                key={item}
+                selected={['test5', 'test6'].includes(item)}
+              >
+                <Table.Cell>{item}</Table.Cell>
+                <Table.Cell>
+                  <span>
+                    Lorem, ipsum dolor sit amet consectetur adipisicing elit.
+                    Quisquam, asperiores quis. Ex laboriosam quasi fugit
+                    obcaecati a quaerat sapiente culpa placeat dicta quisquam
+                    quibusdam deserunt sit, cum adipisci, labore iusto.
+                  </span>
+                </Table.Cell>
+                <Table.Cell className="justify-end">
+                  {new Date().toISOString()}
+                </Table.Cell>
+                <Table.Cell className="justify-end">
+                  <Button light size="sm">
+                    <Pencil />
+                  </Button>
+                </Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table.Root>
+      </div>
+    )
+  },
+}

docs/src/stories/Table/Row.stories.tsx

@@ -0,0 +1,57 @@
+import { Table, TableRowProps } from '@droz-js/visu'
+import { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<TableRowProps> = {
+  title: 'Table/Row',
+  component: Table.Row,
+  argTypes: {
+    children: {
+      control: 'none',
+      table: {
+        type: {
+          summary: 'React.ReactNode',
+        },
+      },
+      type: { name: 'other', required: false, value: 'React.ReactNode' },
+    },
+    selected: {
+      control: 'boolean',
+      description: 'Aplica o selected em TableRow',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+      type: { name: 'boolean', required: false },
+      defaultValue: false as TableRowProps['selected'],
+    },
+  },
+  args: {
+    children: '',
+  },
+} as Meta<TableRowProps>
+
+export default meta
+type TableRowStory = StoryObj<TableRowProps>
+
+export const Comum: TableRowStory = {
+  render: (args) => {
+    return (
+      <div className="border border-error" style={{ width: 920 }}>
+        <Table.Root fixed>
+          <Table.Body>
+            <Table.Row {...args}>
+              <Table.Cell>
+                <span>
+                  Lorem, ipsum dolor sit amet consectetur adipisicing elit.
+                  Quisquam, asperiores quis. Ex laboriosam quasi fugit obcaecati
+                  a quaerat sapiente culpa placeat dicta quisquam quibusdam
+                  deserunt sit, cum adipisci, labore iusto.
+                </span>
+              </Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table.Root>
+      </div>
+    )
+  },
+}

package/src/App.tsx

@@ -1,8 +1,8 @@
 import LayoutDefault from './layout/Default'
-import { Form, Input, TagList } from './library'
+import { Button, Form, Table } from './library'
 
 import { zodResolver } from '@hookform/resolvers/zod'
-import { Eraser } from '@phosphor-icons/react'
+import { Eraser, Pencil } from '@phosphor-icons/react'
 import { useState } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
 import { z } from 'zod'
@@ -54,19 +54,44 @@ function App() {
     >
       <Form.Root onSubmit={handleSubmit(onSubmit)}>
         {/* ================================= TEST AREA ================================= */}
-        <label>
-          focus test
-          <TagList
-            value={test}
-            onRemove={(tagToRemove) =>
-              setTest((old) => old.filter((item) => item !== tagToRemove))
-            }
-          >
-            <Input.Root borderless>
-              <Input.Input />
-            </Input.Root>
-          </TagList>
-        </label>
+        <div className="w-full border border-error">
+          <Table.Root fixed hide={[1, 3]}>
+            <Table.Header>
+              <Table.Row>
+                <Table.Head>Name</Table.Head>
+                <Table.Head>Description</Table.Head>
+                <Table.Head className="text-right">Last Update</Table.Head>
+                <Table.Head className="text-right">Actions</Table.Head>
+              </Table.Row>
+            </Table.Header>
+            <Table.Body>
+              {test.map((item, index) => (
+                <Table.Row
+                  key={item}
+                  selected={['test5', 'test6'].includes(item)}
+                >
+                  <Table.Cell>{item}</Table.Cell>
+                  <Table.Cell>
+                    <span>
+                      Lorem, ipsum dolor sit amet consectetur adipisicing elit.
+                      Quisquam, asperiores quis. Ex laboriosam quasi fugit
+                      obcaecati a quaerat sapiente culpa placeat dicta quisquam
+                      quibusdam deserunt sit, cum adipisci, labore iusto.
+                    </span>
+                  </Table.Cell>
+                  <Table.Cell className="justify-end">
+                    {new Date().toISOString()}
+                  </Table.Cell>
+                  <Table.Cell className="justify-end">
+                    <Button light size="sm">
+                      <Pencil />
+                    </Button>
+                  </Table.Cell>
+                </Table.Row>
+              ))}
+            </Table.Body>
+          </Table.Root>
+        </div>
         {/* ================================= TEST AREA ================================= */}
       </Form.Root>
     </LayoutDefault>

package/src/__tests__/Table/Body.test.tsx

@@ -0,0 +1,19 @@
+import { Table } from '@library'
+
+import { render, screen } from '@testing-library/react'
+import { clsx } from 'clsx'
+
+jest.mock('clsx', () => {
+  return {
+    clsx: jest.fn().mockImplementation(() => clsx),
+  }
+})
+
+describe('TableBody tests', () => {
+  it('Should render a TableBody element', () => {
+    render(<Table.Body data-testid="element"></Table.Body>)
+    const element = screen.queryByTestId('element')
+
+    expect(element).toBeDefined()
+  })
+})

package/src/__tests__/Table/Caption.test.tsx

@@ -0,0 +1,19 @@
+import { Table } from '@library'
+
+import { render, screen } from '@testing-library/react'
+import { clsx } from 'clsx'
+
+jest.mock('clsx', () => {
+  return {
+    clsx: jest.fn().mockImplementation(() => clsx),
+  }
+})
+
+describe('TableCaption tests', () => {
+  it('Should render a TableCaption element', () => {
+    render(<Table.Caption data-testid="element"></Table.Caption>)
+    const element = screen.queryByTestId('element')
+
+    expect(element).toBeDefined()
+  })
+})

package/src/__tests__/Table/Cell.test.tsx

@@ -0,0 +1,19 @@
+import { Table } from '@library'
+
+import { render, screen } from '@testing-library/react'
+import { clsx } from 'clsx'
+
+jest.mock('clsx', () => {
+  return {
+    clsx: jest.fn().mockImplementation(() => clsx),
+  }
+})
+
+describe('TableCell tests', () => {
+  it('Should render a TableCell element', () => {
+    render(<Table.Cell data-testid="element"></Table.Cell>)
+    const element = screen.queryByTestId('element')
+
+    expect(element).toBeDefined()
+  })
+})

package/src/__tests__/Table/Head.test.tsx

@@ -0,0 +1,19 @@
+import { Table } from '@library'
+
+import { render, screen } from '@testing-library/react'
+import { clsx } from 'clsx'
+
+jest.mock('clsx', () => {
+  return {
+    clsx: jest.fn().mockImplementation(() => clsx),
+  }
+})
+
+describe('TableHead tests', () => {
+  it('Should render a TableHead element', () => {
+    render(<Table.Head data-testid="element"></Table.Head>)
+    const element = screen.queryByTestId('element')
+
+    expect(element).toBeDefined()
+  })
+})

package/src/__tests__/Table/Header.test.tsx

@@ -0,0 +1,19 @@
+import { Table } from '@library'
+
+import { render, screen } from '@testing-library/react'
+import { clsx } from 'clsx'
+
+jest.mock('clsx', () => {
+  return {
+    clsx: jest.fn().mockImplementation(() => clsx),
+  }
+})
+
+describe('TableHeader tests', () => {
+  it('Should render a TableHeader element', () => {
+    render(<Table.Header data-testid="element"></Table.Header>)
+    const element = screen.queryByTestId('element')
+
+    expect(element).toBeDefined()
+  })
+})

package/src/__tests__/Table/Root.test.tsx

@@ -0,0 +1,19 @@
+import { Table } from '@library'
+
+import { render, screen } from '@testing-library/react'
+import { clsx } from 'clsx'
+
+jest.mock('clsx', () => {
+  return {
+    clsx: jest.fn().mockImplementation(() => clsx),
+  }
+})
+
+describe('TableRoot tests', () => {
+  it('Should render a TableRoot element', () => {
+    render(<Table.Root data-testid="element"></Table.Root>)
+    const element = screen.queryByTestId('element')
+
+    expect(element).toBeDefined()
+  })
+})

package/src/__tests__/Table/Row.test.tsx

@@ -0,0 +1,19 @@
+import { Table } from '@library'
+
+import { render, screen } from '@testing-library/react'
+import { clsx } from 'clsx'
+
+jest.mock('clsx', () => {
+  return {
+    clsx: jest.fn().mockImplementation(() => clsx),
+  }
+})
+
+describe('TableRow tests', () => {
+  it('Should render a TableRow element', () => {
+    render(<Table.Row data-testid="element"></Table.Row>)
+    const element = screen.queryByTestId('element')
+
+    expect(element).toBeDefined()
+  })
+})

package/src/library/Chip/Root.tsx

@@ -8,7 +8,7 @@ const ChipRoot: FC<ChipProps> = ({ children, className, ...rest }) => {
   return (
     <div
       className={cn(
-        'ellipsis flex max-w-full items-center gap-1 rounded-3xl bg-primary-200 px-4 py-1 text-xs',
+        'ellipsis flex w-fit max-w-full items-center justify-center gap-1 rounded-3xl bg-primary-200 px-4 py-1 text-xs',
         className,
       )}
       {...rest}

package/src/library/Pagination/index.tsx

@@ -4,9 +4,10 @@ import { FC } from 'react'
 import ReactPaginate, { ReactPaginateProps } from 'react-paginate'
 
 export interface PaginationProps
-  extends Omit<ReactPaginateProps, 'onPageChange'> {
+  extends Omit<ReactPaginateProps, 'onPageChange' | 'pageCount'> {
   current: number
   onPageChange: (data: number) => void
+  pageCount: number
   disabled?: boolean
   size?: number
 }