w-design-system 0.0.21 → 0.0.23

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'} heavyBod>
+              {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'} heavyBod>
+              {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'} heavyBod>
+              {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/Tabs/stories.tsx

@@ -27,7 +27,7 @@ export const Playground: Story = {
         <div style={{ background: 'white', padding: '50px 20px', borderRadius: '8px', marginTop: '-5px' }}>
           {activeTab === 'Tab 1' && (
             <>
-              <Paragraph size={'medium'} weight={800}>
+              <Paragraph size={'medium'} heavyBod>
                 Tab 1
               </Paragraph>
               <Paragraph>
@@ -40,7 +40,7 @@ export const Playground: Story = {
           )}
           {activeTab === 'Tab 2' && (
             <>
-              <Paragraph size={'medium'} weight={800}>
+              <Paragraph size={'medium'} heavyBod>
                 Tab 2
               </Paragraph>
               <Paragraph>
@@ -56,7 +56,7 @@ export const Playground: Story = {
           )}
           {activeTab === 'Tab 3' && (
             <>
-              <Paragraph size={'medium'} weight={800}>
+              <Paragraph size={'medium'} heavyBod>
                 Tab 3
               </Paragraph>
               <Paragraph>

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'