w-design-system 0.0.21 → 0.0.22

package/src/components/Table/index.tsx

@@ -0,0 +1,203 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { Paragraph } from '../Paragraph'
+import { theme } from '../Themes'
+import { ContainerLoading } from '../Loading'
+
+type Column = {
+  header: string
+  accessor: string
+  width?: string
+  sortable?: boolean
+  onClick?: (row: any) => void
+  Cell?: (row: any, handleExpandClick: (id: number) => void) => React.ReactNode
+  align?: 'left' | 'center' | 'right'
+}
+
+type TableProps = {
+  columns: Column[] | any
+  data: any[]
+  height?: string
+  loading?: boolean
+  emptyStateMessage?: string
+  striped?: boolean
+}
+
+const TableContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow-x: auto;
+`
+
+const StyledTable = styled.table`
+  width: 100%;
+  border-collapse: collapse;
+  height: 100%;
+`
+
+const Thead = styled.thead`
+  display: table-header-group;
+  border-bottom: 1px solid #ddd;
+`
+
+const Tbody = styled.tbody<{ height?: string }>`
+  display: block;
+  width: 100%;
+  overflow-y: auto;
+  height: ${props => props.height || '100%'};
+`
+
+const Tr = styled.tr<{ striped?: boolean }>`
+  display: table;
+  width: 100%;
+  table-layout: fixed;
+`
+const TrRow = styled.tr<{ striped?: boolean }>`
+  display: table;
+  width: 100%;
+  table-layout: fixed;
+  &:nth-of-type(n + 2) {
+    background-color: ${props => (props.striped ? '#f9f9f9' : 'transparent')};
+  }
+  &:nth-of-type(odd) {
+    background-color: ${props => (props.striped ? '#fff' : 'transparent')};
+  }
+`
+
+const Th = styled.th<{ width?: string; align?: 'left' | 'center' | 'right' }>`
+  padding: 10px;
+  text-align: ${props => props.align || 'left'};
+  width: ${props => props.width || 'auto'};
+`
+
+const Td = styled.td<{ width?: string; align: 'left' | 'center' | 'right' }>`
+  padding: 12px;
+  width: ${props => props?.width || 'auto'};
+  text-align: ${props => props?.align || 'left'};
+`
+
+const ExpandableRow = styled.div`
+  padding: 8px;
+  min-height: 50px;
+`
+
+const LoadingWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+`
+
+const EmptyStateWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+`
+
+export const Table: React.FC<TableProps> = ({
+  columns,
+  data,
+  height = '100%',
+  loading = false,
+  emptyStateMessage = 'No data available',
+  striped = false,
+}) => {
+  const [expandedRow, setExpandedRow] = useState<number | null>(null)
+
+  const handleExpandClick = (id: number) => {
+    setExpandedRow(expandedRow === id ? null : id)
+  }
+
+  // @ts-ignore
+  return (
+    <TableContainer>
+      <StyledTable>
+        <Thead>
+          <Tr striped={striped}>
+            {columns.map(
+              (
+                col: {
+                  width: string | undefined
+                  align: any
+                  header:
+                    | string
+                    | number
+                    | boolean
+                    | React.ReactElement<any, string | React.JSXElementConstructor<any>>
+                    | Iterable<React.ReactNode>
+                    | React.ReactPortal
+                    | null
+                    | undefined
+                },
+                index: React.Key | null | undefined,
+              ) => (
+                <Th key={index} width={col.width} align={col.align}>
+                  <Paragraph color={theme.colors.shade30} textTransform={'uppercase'} weight={400}>
+                    {col.header}
+                  </Paragraph>
+                </Th>
+              ),
+            )}
+          </Tr>
+        </Thead>
+        <Tbody height={height}>
+          {loading ? (
+            <LoadingWrapper>
+              <ContainerLoading size={'small'} />
+            </LoadingWrapper>
+          ) : data.length === 0 ? (
+            <EmptyStateWrapper>
+              <Paragraph>{emptyStateMessage}</Paragraph>
+            </EmptyStateWrapper>
+          ) : (
+            data.map((row, rowIndex) => (
+              <React.Fragment key={row.id}>
+                <TrRow striped={striped}>
+                  {columns.map(
+                    (
+                      col: {
+                        width: string | undefined
+                        align: any
+                        Cell: (
+                          arg0: any,
+                          arg1: (id: number) => void,
+                        ) =>
+                          | string
+                          | number
+                          | boolean
+                          | React.ReactElement<any, string | React.JSXElementConstructor<any>>
+                          | Iterable<React.ReactNode>
+                          | React.ReactPortal
+                          | null
+                          | undefined
+                        accessor: string | number
+                      },
+                      colIndex: React.Key | null | undefined,
+                    ) => (
+                      <Td key={colIndex} width={col?.width} align={col?.align}>
+                        {col.Cell ? (
+                          col.Cell(row, handleExpandClick)
+                        ) : (
+                          <Paragraph color={theme.colors.shade40}>{row[col.accessor]}</Paragraph>
+                        )}
+                      </Td>
+                    ),
+                  )}
+                </TrRow>
+                {expandedRow === row.id && row.containerColapsed && (
+                  <ExpandableRow>{row.containerColapsed(row)}</ExpandableRow>
+                )}
+              </React.Fragment>
+            ))
+          )}
+        </Tbody>
+      </StyledTable>
+    </TableContainer>
+  )
+}

package/src/components/Table/stories.tsx

@@ -0,0 +1,198 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+import { ButtonRound } from '../ButtonRound'
+import { dumpSVG, editSVG } from '../../assets/icon'
+import { Table } from './index'
+import CardStories from '../CardStories'
+import { Paragraph } from '../Paragraph'
+
+const meta: Meta<typeof Table> = {
+  title: 'Components/Table',
+  component: Table,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    columns: {
+      control: 'object',
+      description: 'Array of column definitions',
+    },
+    data: {
+      control: 'object',
+      description: 'Array of data objects',
+    },
+    loading: {
+      control: 'boolean',
+      description: 'Loading state of the table',
+    },
+    emptyStateMessage: {
+      control: 'text',
+      description: 'Message to display when there is no data',
+    },
+  },
+} satisfies Meta<typeof Table>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const columns = [
+  {
+    header: 'id',
+    accessor: 'id',
+    width: 'auto',
+  },
+  {
+    header: 'item',
+    accessor: 'item',
+    width: 'auto',
+    sortable: true,
+  },
+  {
+    header: 'unidades',
+    accessor: 'unidades',
+    width: 'auto',
+    sortable: true,
+  },
+  {
+    header: 'marca/ fabricante',
+    accessor: 'marca_fabricante',
+    width: 'auto',
+    Cell: (row: any) => (
+      <div
+        onClick={() => alert('aqui')}
+        style={{
+          background: 'red',
+          color: 'white',
+          padding: '4px, 2px',
+          borderRadius: '8px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        {row.marca_fabricante}
+      </div>
+    ),
+  },
+  {
+    header: 'modelo',
+    accessor: 'modelo',
+    width: 'auto',
+    sortable: true,
+  },
+  {
+    header: 'quantidade solitada',
+    accessor: 'quantidade_solitada',
+    width: 'auto',
+    sortable: true,
+  },
+  {
+    header: 'valor estimado unitario',
+    accessor: 'valor_estimado_unitario',
+    width: 'auto',
+    sortable: true,
+  },
+  {
+    header: 'valor estimado total',
+    accessor: 'valor_estimado_total',
+    width: 'auto',
+    sortable: true,
+  },
+  {
+    header: 'Actions',
+    accessor: 'valor_estimado_total',
+    width: '100px',
+    align: 'center',
+    Cell: (row: any, handleExpandClick: (id: number) => void) => (
+      <div style={{ display: 'flex', gap: '8px', justifyContent: 'center' }}>
+        <ButtonRound icon={editSVG} onClick={() => handleExpandClick(row.id)} />
+        <ButtonRound icon={dumpSVG} onClick={() => alert(`Delete ID: ${row.id}`)} variant={'danger'} />
+      </div>
+    ),
+  },
+]
+
+export const Default: Story = {
+  args: {
+    height: 'auto',
+    columns: columns,
+    striped: true,
+    loading: false,
+    emptyStateMessage: 'No data available',
+    data: [
+      {
+        id: 1,
+        item: 'Beetlejuice',
+        unidades: '1988',
+        marca_fabricante: 'adidas',
+        modelo: 'modelo',
+        quantidade_solitada: '10000',
+        valor_estimado_unitario: '1000',
+        valor_estimado_total: '10000000',
+        colapsed: true,
+        containerColapsed: ({ item }: any) => (
+          <div>
+            <Paragraph size={'large'} weight={800}>
+              {item}
+            </Paragraph>
+            <Paragraph>Esta é uma informação adicional sobre .</Paragraph>
+          </div>
+        ),
+      },
+      {
+        id: 2,
+        item: 'Beetlejuice',
+        unidades: '1988',
+        marca_fabricante: 'adidas',
+        modelo: 'modelo',
+        quantidade_solitada: '10000',
+        valor_estimado_unitario: '1000',
+        valor_estimado_total: '10000000',
+        containerColapsed: ({ item }: any) => (
+          <div>
+            <Paragraph size={'large'} weight={800}>
+              {item}
+            </Paragraph>
+            <Paragraph>Esta é uma informação adicional sobre .</Paragraph>
+          </div>
+        ),
+      },
+      {
+        id: 3,
+        item: 'Beetlejuice',
+        unidades: '1988',
+        marca_fabricante: 'adidas',
+        modelo: 'modelo',
+        quantidade_solitada: '10000',
+        valor_estimado_unitario: '1000',
+        valor_estimado_total: '10000000',
+        containerColapsed: ({ item }: any) => (
+          <div>
+            <Paragraph size={'large'} weight={800}>
+              {item}
+            </Paragraph>
+            <Paragraph>Esta é uma informação adicional sobre .</Paragraph>
+          </div>
+        ),
+      },
+    ],
+  },
+}
+
+export const LoadingState: Story = {
+  render: () => (
+    <CardStories title={'Tabela'} subTitle={'tabela-loading'}>
+      <div style={{ width: '900px', height: '800px' }}>
+        <Table columns={columns} loading={true} height={'100%'} data={[]} />
+      </div>
+    </CardStories>
+  ),
+}
+
+export const EmptyState: Story = {
+  args: {
+    ...Default.args,
+    data: [],
+  },
+}

package/src/components/Types/index.ts

@@ -23,6 +23,7 @@ export interface ButtonRoundTypes extends ButtonHTMLAttributes<HTMLButtonElement
   icon?: string
   outline?: boolean
   badge?: number
+  size?: 'small' | 'medium'
 }
 
 export interface BannerTypes extends HTMLAttributes<HTMLDivElement> {

package/src/components/index.tsx

@@ -8,3 +8,5 @@ export { Paragraph } from './Paragraph/index'
 export { Tabs } from './Tabs/index'
 export { theme } from './Themes/index'
 export { Title } from './Title/index'
+export { Paginate } from './Paginate/index'
+export { Table } from './Table/index'