w-design-system 0.0.91 → 0.0.92

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "w-design-system",
-  "version": "0.0.91",
+  "version": "0.0.92",
   "main": "dist/w-design-system.umd.js",
   "module": "dist/w-design-system.es.js",
   "types": "dist/index.d.ts",

package/src/components/Table/index.tsx

@@ -5,28 +5,31 @@ import { theme } from '../Themes'
 import { ContainerLoading } from '../Loading'
 import { EmptyState } from '../EmptyState'
 
-type Column = {
+type Column<T> = {
   header: string
-  accessor: string
+  accessor?: keyof T
   width?: string
   sortable?: boolean
-  onClick?: (row: any) => void
-  Cell?: (row: any, handleExpandClick: (id: number) => void) => React.ReactNode
+  onClick?: (row: T) => void
+  Cell?: (row: T, handleExpandClick: (id: number) => void) => React.ReactNode
   align?: 'left' | 'center' | 'right'
 }
 
-type emptyStateMessage = {
+type EmptyStateMessage = {
   title: string
   subTitle?: string
   description?: string
 }
-type TableProps = {
-  columns: Column[] | any
-  data: any[]
+
+type TableProps<T extends { id: number }> = {
+  columns: Column<T>[]
+  data: T[]
   height?: string
   loading?: boolean
-  emptyStateMessage?: emptyStateMessage
+  emptyStateMessage?: EmptyStateMessage
   striped?: boolean
+  rowClickable?: boolean
+  onRowClick?: (row: T) => void
 }
 
 const TableContainer = styled.div`
@@ -34,40 +37,33 @@ const TableContainer = styled.div`
   flex-direction: column;
   width: 100%;
   height: 100%;
-  overflow-x: auto;
 `
 
 const StyledTable = styled.table`
   width: 100%;
   border-collapse: collapse;
-  height: 100%;
+  table-layout: fixed;
 `
 
 const Thead = styled.thead`
-  display: table-header-group;
   border-bottom: 1px solid #ddd;
 `
 
-const Tbody = styled.tbody<{ height?: string }>`
-  display: block;
-  width: 100%;
+const TbodyContainer = styled.div<{ height?: string }>`
   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 }>`
+const Tbody = styled.tbody``
+
+const Tr = styled.tr<{ striped?: boolean; clickable?: 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 ? '#f9f9f9' : 'transparent')};
+  cursor: ${props => (props.clickable ? 'pointer' : 'default')};
+
+  &:nth-child(odd) {
     background-color: ${props => (props.striped ? '#fff' : 'transparent')};
   }
 `
@@ -76,9 +72,10 @@ const Th = styled.th<{ width?: string; align?: 'left' | 'center' | 'right' }>`
   padding: 10px;
   text-align: ${props => props.align || 'left'};
   width: ${props => props.width || 'auto'};
+  vertical-align: middle;
 `
 
-const Td = styled.td<{ width?: string; align: 'left' | 'center' | 'right' }>`
+const Td = styled.td<{ width?: string; align?: 'left' | 'center' | 'right' }>`
   padding: 12px;
   width: ${props => props?.width || 'auto'};
   text-align: ${props => props?.align || 'left'};
@@ -106,7 +103,7 @@ const EmptyStateWrapper = styled.div`
   padding: 20px;
 `
 
-export const Table: React.FC<TableProps> = ({
+export const Table = <T extends { id: number }>({
   columns,
   data,
   height = '100%',
@@ -117,101 +114,76 @@ export const Table: React.FC<TableProps> = ({
     description: 'Não há registros para exibir',
   },
   striped = false,
-}) => {
-  const [expandedRow, setExpandedRow] = useState<number | null>(null)
+  rowClickable = false,
+  onRowClick,
+}: TableProps<T>) => {
+  const [expandedRows, setExpandedRows] = useState<number[]>([])
 
   const handleExpandClick = (id: number) => {
-    setExpandedRow(expandedRow === id ? null : id)
+    setExpandedRows(prev => (prev.includes(id) ? prev.filter(x => x !== id) : [...prev, 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'} strongBod>
-                    {col.header}
-                  </Paragraph>
-                </Th>
-              ),
-            )}
+            {columns.map((col, index) => (
+              <Th key={index} width={col.width} align={col.align}>
+                <Paragraph color={theme.colors.shade30} textTransform={'uppercase'} strongBod>
+                  {col.header}
+                </Paragraph>
+              </Th>
+            ))}
           </Tr>
         </Thead>
-        <Tbody height={height}>
-          {loading ? (
-            <LoadingWrapper>
-              <ContainerLoading size={'small'} />
-            </LoadingWrapper>
-          ) : data.length === 0 ? (
-            <EmptyStateWrapper>
-              <EmptyState
-                title={emptyStateMessage?.title}
-                subTitle={emptyStateMessage?.subTitle}
-                description={emptyStateMessage?.description}
-              />
-            </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}>
+      </StyledTable>
+      <TbodyContainer height={height}>
+        <StyledTable>
+          <Tbody>
+            {loading ? (
+              <LoadingWrapper>
+                <ContainerLoading size={'small'} />
+              </LoadingWrapper>
+            ) : data.length === 0 ? (
+              <EmptyStateWrapper>
+                <EmptyState
+                  title={emptyStateMessage?.title}
+                  subTitle={emptyStateMessage?.subTitle}
+                  description={emptyStateMessage?.description}
+                />
+              </EmptyStateWrapper>
+            ) : (
+              data.map(row => (
+                <React.Fragment key={row.id}>
+                  <Tr
+                    striped={striped}
+                    clickable={rowClickable && !!onRowClick}
+                    onClick={() => rowClickable && onRowClick && onRowClick(row)}
+                  >
+                    {columns.map((col, colIndex) => (
+                      <Td key={colIndex} width={col.width} align={col.align || 'left'}>
                         {col.Cell ? (
+                          // Exemplo de uso de stopPropagation():
+                          // Se o Cell renderiza um botão, no onClick do botão faça event.stopPropagation()
                           col.Cell(row, handleExpandClick)
-                        ) : (
-                          <Paragraph color={theme.colors.shade40}>{row[col.accessor]}</Paragraph>
-                        )}
+                        ) : col.accessor ? (
+                          <Paragraph color={theme.colors.shade40}>{String(row[col.accessor])}</Paragraph>
+                        ) : null}
                       </Td>
-                    ),
-                  )}
-                </TrRow>
-                {expandedRow === row.id && row.containerColapsed && (
-                  <ExpandableRow>{row.containerColapsed(row)}</ExpandableRow>
-                )}
-              </React.Fragment>
-            ))
-          )}
-        </Tbody>
-      </StyledTable>
+                    ))}
+                  </Tr>
+                  {expandedRows.includes(row.id) &&
+                    'containerColapsed' in row &&
+                    typeof (row as any).containerColapsed === 'function' && (
+                      <ExpandableRow>{(row as any).containerColapsed(row)}</ExpandableRow>
+                    )}
+                </React.Fragment>
+              ))
+            )}
+          </Tbody>
+        </StyledTable>
+      </TbodyContainer>
     </TableContainer>
   )
 }

package/src/components/Table/stories.tsx

@@ -2,7 +2,7 @@ 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 { Table } from './index' // importe também o tipo Column
 import CardStories from '../CardStories'
 import { Paragraph } from '../Paragraph'
 
@@ -27,44 +27,51 @@ const meta: Meta<typeof Table> = {
       description: 'Loading state of the table',
     },
     emptyStateMessage: {
-      control: 'text',
+      control: 'object',
       description: 'Message to display when there is no data',
     },
+    rowClickable: {
+      control: 'boolean',
+      description: 'Permite clicar em qualquer parte da linha',
+    },
+    onRowClick: {
+      control: false,
+      description: 'Função chamada ao clicar em uma linha',
+    },
   },
 } 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,
-  },
+type Column<T> = {
+  header: string
+  accessor?: keyof T
+  width?: string
+  sortable?: boolean
+  onClick?: (row: T) => void
+  Cell?: (row: T, handleExpandClick: (id: number) => void) => React.ReactNode
+  align?: 'left' | 'center' | 'right'
+}
+// Aqui anotamos explicitamente o tipo das colunas para evitar inferência incorreta de "string":
+const columns: Column<any>[] = [
+  { 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')}
+        onClick={e => {
+          e.stopPropagation()
+          alert('Marca clicada')
+        }}
         style={{
           background: 'red',
           color: 'white',
-          padding: '4px, 2px',
+          padding: '4px 2px',
           borderRadius: '8px',
           display: 'flex',
           alignItems: 'center',
@@ -75,26 +82,21 @@ const columns = [
       </div>
     ),
   },
+  { header: 'modelo', accessor: 'modelo', width: 'auto', sortable: true },
   {
-    header: 'modelo',
-    accessor: 'modelo',
-    width: 'auto',
-    sortable: true,
-  },
-  {
-    header: 'quantidade solitada',
+    header: 'quantidade solicitada',
     accessor: 'quantidade_solitada',
     width: 'auto',
     sortable: true,
   },
   {
-    header: 'valor estimado unitario',
+    header: 'valor unitário',
     accessor: 'valor_estimado_unitario',
     width: 'auto',
     sortable: true,
   },
   {
-    header: 'valor estimado total',
+    header: 'valor total',
     accessor: 'valor_estimado_total',
     width: 'auto',
     sortable: true,
@@ -103,11 +105,24 @@ const columns = [
     header: 'Actions',
     accessor: 'valor_estimado_total',
     width: '100px',
-    align: 'center',
+    align: 'center', // agora já é inferido corretamente como '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'} />
+        <ButtonRound
+          icon={editSVG}
+          onClick={e => {
+            e.stopPropagation()
+            handleExpandClick(row.id)
+          }}
+        />
+        <ButtonRound
+          icon={dumpSVG}
+          onClick={e => {
+            e.stopPropagation()
+            alert(`Delete ID: ${row.id}`)
+          }}
+          variant={'danger'}
+        />
       </div>
     ),
   },
@@ -119,6 +134,9 @@ export const Default: Story = {
     columns: columns,
     striped: true,
     loading: false,
+    rowClickable: true,
+    onRowClick: (row: any) => alert(`Você clicou na linha ID: ${row.id}`),
+
     emptyStateMessage: {
       title: 'Nenhum registro encontrado',
       subTitle: 'Não há registros para exibir',
@@ -130,53 +148,52 @@ export const Default: Story = {
         item: 'Beetlejuice',
         unidades: '1988',
         marca_fabricante: 'adidas',
-        modelo: 'modelo',
+        modelo: 'modelo X',
         quantidade_solitada: '10000',
         valor_estimado_unitario: '1000',
         valor_estimado_total: '10000000',
-        colapsed: true,
         containerColapsed: ({ item }: any) => (
           <div>
             <Paragraph size={'large'} heavyBod>
               {item}
             </Paragraph>
-            <Paragraph>Esta é uma informação adicional sobre .</Paragraph>
+            <Paragraph>Esta é uma informação adicional sobre {item}.</Paragraph>
           </div>
         ),
       },
       {
         id: 2,
-        item: 'Beetlejuice',
-        unidades: '1988',
-        marca_fabricante: 'adidas',
-        modelo: 'modelo',
-        quantidade_solitada: '10000',
-        valor_estimado_unitario: '1000',
-        valor_estimado_total: '10000000',
+        item: 'Ghostbusters',
+        unidades: '1984',
+        marca_fabricante: 'nike',
+        modelo: 'modelo Y',
+        quantidade_solitada: '20000',
+        valor_estimado_unitario: '2000',
+        valor_estimado_total: '40000000',
         containerColapsed: ({ item }: any) => (
           <div>
             <Paragraph size={'large'} heavyBod>
               {item}
             </Paragraph>
-            <Paragraph>Esta é uma informação adicional sobre .</Paragraph>
+            <Paragraph>Detalhes adicionais sobre {item}.</Paragraph>
           </div>
         ),
       },
       {
         id: 3,
-        item: 'Beetlejuice',
-        unidades: '1988',
-        marca_fabricante: 'adidas',
-        modelo: 'modelo',
-        quantidade_solitada: '10000',
-        valor_estimado_unitario: '1000',
-        valor_estimado_total: '10000000',
+        item: 'Mad Max',
+        unidades: '1979',
+        marca_fabricante: 'puma',
+        modelo: 'modelo Z',
+        quantidade_solitada: '15000',
+        valor_estimado_unitario: '1500',
+        valor_estimado_total: '22500000',
         containerColapsed: ({ item }: any) => (
           <div>
             <Paragraph size={'large'} heavyBod>
               {item}
             </Paragraph>
-            <Paragraph>Esta é uma informação adicional sobre .</Paragraph>
+            <Paragraph>Mais informações sobre {item} aqui.</Paragraph>
           </div>
         ),
       },
@@ -184,6 +201,7 @@ export const Default: Story = {
   },
 }
 
+// @ts-ignore
 export const LoadingState: Story = {
   render: () => (
     <CardStories title={'Tabela'} subTitle={'tabela-loading'}>

package/src/components/Themes/index.ts

@@ -47,10 +47,6 @@ const special = {
   cyan30opacity16: 'rgba(33, 126, 253, 0.16)',
 }
 
-const shadow = {
-  shadow1: '0px 2px 5px 1px rgba(0, 0, 0, 0.05)',
-}
-
 const white = '#FFFFFF'
 const black = '#333333'
 const transparent = 'transparent'
@@ -95,7 +91,6 @@ export const theme = {
     transparent,
     ...special,
   },
-  shadow,
   fonts: ['Nunito Sans', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'],
   title: {
     medium: '24px',