@liguelead/design-system 0.0.28 → 0.0.30

package/components/Table/Table.stories.tsx

@@ -0,0 +1,53 @@
+import type {Meta, StoryObj} from '@storybook/react-vite';
+
+import Table from './Table';
+
+const meta: Meta<typeof Table> = {
+  title: 'Data Display/Table',
+  component: Table,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    data: {
+      control: 'object',
+      description: 'Array of data objects to be displayed in the table',
+    },
+    columns: {
+      control: 'object',
+      description: 'Column definitions for the table',
+    },
+    footerText: {
+      control: {type: undefined},
+      description:
+        'Function to render custom footer text, receives total and filtered counts',
+    },
+    showPagination: {
+      control: 'boolean',
+      description: 'Whether to enable pagination for the table',
+    },
+    pageSize: {
+      control: 'number',
+      description: 'Initial number of rows per page when pagination is enabled',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    data: [
+      {name: 'John Doe', email: 'john.doe@example.com'},
+      {name: 'Jane Smith', email: 'jane.smith@example.com'},
+    ],
+    columns: [
+      {header: 'Name', accessorKey: 'name'},
+      {header: 'Email', accessorKey: 'email'},
+    ],
+    showPagination: true,
+    pageSize: 10,
+  },
+};

package/components/Table/Table.styles.ts

@@ -0,0 +1,76 @@
+import styled from 'styled-components'
+import { spacing, fontSize, fontWeight } from '@liguelead/foundation'
+import { parseColor } from '../../utils'
+
+export const TableWrapper = styled.div`
+  background: ${({ theme }) => parseColor(theme.colors.white)};
+`
+
+export const StyledTable = styled.table`
+  width: 100%;
+`
+
+export const TableFooter = styled.div<{ $hasPagination: boolean }>`
+  display: flex;
+  justify-content: center;
+  flex-direction: ${({ $hasPagination }) => ($hasPagination ? 'column-reverse' : 'row')};
+  align-items: center;
+  gap: ${spacing.spacing8}px;
+  padding: ${spacing.spacing16}px;
+  font-size: ${fontSize.fontSize14}px;
+  border-top: 1px solid #e5e7eb;
+`
+
+export const FooterText = styled.div`
+  display: flex;
+  align-items: center;
+`
+
+export const PaginationContainer = styled.div`
+  display: flex;
+  align-items: center;
+`
+
+export const PaginationControls = styled.div`
+  display: flex;
+  gap: ${spacing.spacing4}px;
+`
+
+export const PaginationElipsis = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: ${spacing.spacing8}px;
+  
+  & svg {
+    fill: ${({ theme }) => parseColor(theme.colors.primary)};
+    font-size: ${fontSize.fontSize14}px;
+    color: ${({ theme }) => parseColor(theme.colors.primary)};
+  }
+`
+
+export const Td = styled.td`
+  padding: ${spacing.spacing16}px ${spacing.spacing8}px;
+  font-size: ${fontSize.fontSize14}px;
+  color: ${({ theme }) => parseColor(theme.colors.textDark)};
+`
+
+export const Tr = styled.tr`
+  &:not(:last-child) td {
+    border-bottom: 1px solid #e5e7eb;
+  }
+`
+export const Th = styled.th`
+  padding: 12px 16px;
+  color: ${({ theme }) => parseColor(theme.colors.textMedium)};
+  font-size: ${fontSize.fontSize14}px;
+  font-weight: ${fontWeight.fontWeight600};
+  border-bottom: 1px solid ${({ theme }) => parseColor(theme.colors.neutral300)};
+`
+
+export const EmptyMessage = styled.td`
+  padding: ${spacing.spacing16}px;
+  color: ${({ theme }) => parseColor(theme.colors.textMedium)};
+  font-size: ${fontSize.fontSize14}px;
+  text-align: center;
+`

package/components/Table/Table.tsx

@@ -0,0 +1,157 @@
+import { useState } from 'react'
+import {
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  useReactTable,
+} from '@tanstack/react-table'
+
+import {
+  CaretLeftIcon,
+  CaretRightIcon,
+  DotsThreeIcon,
+} from '@phosphor-icons/react'
+
+import {
+  EmptyMessage,
+  FooterText,
+  PaginationContainer,
+  PaginationControls,
+  PaginationElipsis,
+  StyledTable,
+  TableFooter,
+  TableWrapper,
+  Td,
+  Th,
+  Tr,
+} from './Table.styles'
+import { TTableProps } from './Table.types'
+import { getPageNumbers } from './utils'
+import IconButton from '../IconButton'
+import Button from '../Button'
+
+
+function Table<TData>({
+  data,
+  columns,
+  emptyTitle = 'Nenhum registro encontrado.',
+  footerText,
+  pageSize = 10,
+  showPagination = true,
+}: TTableProps<TData>) {
+  const [pagination, setPagination] = useState({
+    pageIndex: 0,
+    pageSize,
+  });
+
+  const table = useReactTable({
+    data,
+    columns,
+    state: {
+      pagination,
+    },
+    onPaginationChange: setPagination,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+  });
+
+  const total = table.getFilteredRowModel().rows.length;
+  const pageCount = table.getPageCount();
+  const hasPagination = showPagination && pageCount > 1;
+  const currentPage = pagination.pageIndex + 1;
+  const pageNumbersArray = getPageNumbers({ currentPage, pageCount });
+
+  return (
+    <TableWrapper>
+      <StyledTable>
+        <thead>
+          {table.getHeaderGroups().map((hg) => (
+            <tr key={hg.id}>
+              {hg.headers.map((header) => (
+                <Th key={header.id}>
+                  {flexRender(
+                    header.column.columnDef.header,
+                    header.getContext()
+                  )}
+                </Th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+
+        <tbody>
+          {table.getRowModel().rows.length === 0 ? (
+            <tr>
+              <EmptyMessage colSpan={columns.length}>{emptyTitle}</EmptyMessage>
+            </tr>
+          ) : (
+            table.getRowModel().rows.map((row) => (
+              <Tr key={row.id}>
+                {row.getVisibleCells().map((cell) => (
+                  <Td key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </Td>
+                ))}
+              </Tr>
+            ))
+          )}
+        </tbody>
+      </StyledTable>
+
+      {(footerText || hasPagination) && total > 0 && (
+        <TableFooter $hasPagination={hasPagination}>
+          {footerText && (
+            <FooterText>
+              {footerText({
+                total: data.length,
+                filtered: total,
+              })}
+            </FooterText>
+          )}
+          {hasPagination && (
+            <PaginationContainer>
+              <PaginationControls>
+                <IconButton
+                  variant="outline"
+                  onClick={() => table.previousPage()}
+                  disabled={!table.getCanPreviousPage()}
+                >
+                  <CaretLeftIcon />
+                </IconButton>
+                {pageNumbersArray.map((page, index) =>
+                  page === "ellipsis" ? (
+                    <PaginationElipsis key={`ellipsis-${index}`}>
+                      <DotsThreeIcon size={16} />
+                    </PaginationElipsis>
+                  ) : (
+                    <Button
+                      key={page}
+                      size="sm"
+                      variant={page === currentPage ? "solid" : "ghost"}
+                      onClick={() => {
+                        if (typeof page === "number") {
+                          table.setPageIndex(page - 1);
+                        }
+                      }}
+                    >
+                      {page}
+                    </Button>
+                  )
+                )}
+                <IconButton
+                  variant="outline"
+                  onClick={() => table.nextPage()}
+                  disabled={!table.getCanNextPage()}
+                >
+                  <CaretRightIcon />
+                </IconButton>
+              </PaginationControls>
+            </PaginationContainer>
+          )}
+        </TableFooter>
+      )}
+    </TableWrapper>
+  );
+}
+
+export default Table

package/components/Table/Table.types.ts

@@ -0,0 +1,16 @@
+import { ColumnDef } from '@tanstack/react-table';
+
+export type TTableProps<TData> = {
+  data: TData[]
+  columns: ColumnDef<TData, unknown>[]
+
+  emptyTitle?: string
+  pageSize?: number
+  showPagination?: boolean
+
+  footerText?: (info: {
+    total: number
+    filtered: number
+  }) => string
+
+};

package/components/Table/index.ts

@@ -0,0 +1 @@
+export { default } from './Table'

package/components/Table/utils/getPageNumbers.ts

@@ -0,0 +1,35 @@
+import { TPageNumbersProps } from './types'
+
+const getPageNumbers = ({ currentPage, pageCount }: TPageNumbersProps) => {
+  if (pageCount <= 7) {
+    return Array.from({ length: pageCount }, (_, idx) => idx + 1)
+  }
+
+  if (currentPage <= 3) {
+    return [1, 2, 3, 'ellipsis', pageCount]
+  }
+
+  if (currentPage >= pageCount - 2) {
+    return [
+      1,
+      'ellipsis',
+      pageCount - 4,
+      pageCount - 3,
+      pageCount - 2,
+      pageCount - 1,
+      pageCount,
+    ]
+  }
+
+  return [
+    1,
+    'ellipsis',
+    currentPage - 1,
+    currentPage,
+    currentPage + 1,
+    'ellipsis',
+    pageCount,
+  ]
+}
+
+export default getPageNumbers

package/components/Table/utils/index.ts

@@ -0,0 +1 @@
+export {default as getPageNumbers} from './getPageNumbers'

package/components/Table/utils/types.ts

@@ -0,0 +1,4 @@
+export type TPageNumbersProps = {
+  currentPage: number
+  pageCount: number
+};

package/components/Text/Text.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Text from './Text'
+import { themes } from '@liguelead/foundation'
+import { fontWeight } from '@liguelead/foundation'
+
+const themeColors = Object.keys(themes.spa.colors)
+const themeTypography = Object.keys(themes.spa.typography)
+const themeFontWeights = Object.keys(fontWeight)
+
+const meta: Meta<typeof Text> = {
+  title: 'Data Display/Text',
+  component: Text,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: themeTypography,
+      description: 'Text size variant'
+    },
+    tag: {
+      control: 'select',
+      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'label', 'small', 'b', 'i', 'em', 'td', 'div', 'a'],
+      description: 'HTML tag to render'
+    },
+    weight: {
+      control: 'select',
+      options: themeFontWeights,
+      description: 'Font weight'
+    },
+    align: {
+      control: 'select',
+      options: ['left', 'center', 'right', 'justify'],
+      description: 'Text alignment'
+    },
+    color: {
+      control: 'select',
+      options: themeColors,
+      description: 'Text color'
+    },
+    isTitle: {
+      control: 'boolean',
+      description: 'Whether text is a title'
+    },
+    children: {
+      control: 'text',
+      description: 'Text content'
+    }
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    children: 'This is a text component',
+  },
+}

package/components/Text/Text.types.ts

@@ -42,4 +42,5 @@ export interface TextProps {
     size?: SizeType
     weight?: WeightType
     className?: string
+    style?: React.CSSProperties
 }

package/components/TextField/TextField.stories.tsx

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import TextField from './TextField'
+import { iconMap, iconOptions } from '../../../stories/utils/icons'
+
+const meta: Meta<typeof TextField> = {
+  title: 'Form/TextField',
+  component: TextField,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Field label'
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Input placeholder'
+    },
+    helperText: {
+      control: 'text',
+      description: 'Helper text below input'
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Input size'
+    },
+    type: {
+      control: 'select',
+      options: ['text', 'password', 'email', 'number', 'file'],
+      description: 'Input type'
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether input is disabled'
+    },
+    requiredSymbol: {
+      control: 'boolean',
+      description: 'Show required asterisk'
+    },
+    leftIcon: {
+      control: 'select',
+      options: iconOptions,
+      description: 'Left icon',
+    },
+    rightIcon: {
+      control: 'select',
+      options: iconOptions,
+      description: 'Right icon',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    label: 'Label',
+    placeholder: 'Enter text...',
+    leftIcon: 'none',
+    rightIcon: 'none',
+  },
+  render: (args) => {
+    const leftIcon = args.leftIcon === 'none' ? undefined : iconMap[args.leftIcon as keyof typeof iconMap]
+    const rightIcon = args.rightIcon === 'none' ? undefined : iconMap[args.rightIcon as keyof typeof iconMap]
+    
+    return (
+      <TextField
+        label={args.label}
+        placeholder={args.placeholder}
+        helperText={args.helperText}
+        size={args.size}
+        type={args.type}
+        disabled={args.disabled}
+        requiredSymbol={args.requiredSymbol}
+        leftIcon={leftIcon}
+        rightIcon={rightIcon}
+      />
+    )
+  },
+}

package/components/Toaster/Toaster.stories.tsx

@@ -0,0 +1,129 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import Button from '../Button'
+import { ToastType, triggerToast } from './Toaster'
+import ToasterProvider from './ToasterProvider'
+
+interface ToasterStoryArgs {
+  type: ToastType
+  message: string
+  autoClose: number
+  position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center'
+  theme: 'light' | 'dark' | 'colored'
+}
+
+const ToasterDemo = () => <div />
+
+const meta = {
+  title: 'Feedback/Toaster',
+  component: ToasterDemo,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['success', 'error', 'warning', 'info'],
+      description: 'Type of toast notification'
+    },
+    message: {
+      control: 'text',
+      description: 'Toast message content'
+    },
+    autoClose: {
+      control: 'number',
+      description: 'Auto close time in milliseconds'
+    },
+    position: {
+      control: 'select',
+      options: ['top-right', 'top-left', 'bottom-right', 'bottom-left', 'top-center', 'bottom-center'],
+      description: 'Toast position'
+    },
+    theme: {
+      control: 'select',
+      options: ['light', 'dark', 'colored'],
+      description: 'Toast theme'
+    }
+  },
+} satisfies Meta<typeof ToasterDemo>
+
+export default meta
+type Story = StoryObj<ToasterStoryArgs>
+
+export const Default: Story = {
+  args: {
+    type: 'success',
+    message: 'This is a toast message!',
+    autoClose: 5000,
+    position: 'top-right',
+    theme: 'light'
+  },
+  render: (args) => (
+    <ToasterProvider>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+        <Button
+          onClick={() =>
+            triggerToast(args.type, args.message, {
+              autoClose: args.autoClose,
+              position: args.position,
+              theme: args.theme
+            })
+          }
+          color="primary"
+        >
+          Show Toast
+        </Button>
+      </div>
+    </ToasterProvider>
+  ),
+}
+
+export const Types: Story = {
+  render: () => (
+    <ToasterProvider>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+        <Button onClick={() => triggerToast('success', 'Success message!')}>
+          Success Toast
+        </Button>
+        <Button onClick={() => triggerToast('error', 'Error message!')}>
+          Error Toast
+        </Button>
+        <Button onClick={() => triggerToast('warning', 'Warning message!')}>
+          Warning Toast
+        </Button>
+        <Button onClick={() => triggerToast('info', 'Info message!')}>
+          Info Toast
+        </Button>
+      </div>
+    </ToasterProvider>
+  ),
+}
+
+export const Positions: Story = {
+  render: () => {
+    const [position, setPosition] = useState<'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'>('top-right')
+    
+    return (
+      <ToasterProvider>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+          <select 
+            value={position} 
+            onChange={(e) => setPosition(e.target.value as any)}
+            style={{ padding: '8px', marginBottom: '12px' }}
+          >
+            <option value="top-right">Top Right</option>
+            <option value="top-left">Top Left</option>
+            <option value="bottom-right">Bottom Right</option>
+            <option value="bottom-left">Bottom Left</option>
+          </select>
+          <Button 
+            onClick={() => triggerToast('info', `Toast at ${position}`, { position })}
+          >
+            Show Toast at {position}
+          </Button>
+        </div>
+      </ToasterProvider>
+    )
+  },
+}

package/components/Toaster/Toaster.ts

@@ -9,6 +9,25 @@ const defaultOptions: ToastOptions = {
   theme: 'light'
 }
 
+export type ToastType = 'success' | 'error' | 'warning' | 'info'
+
+export const triggerToast = (type: ToastType, message: string, options?: ToastOptions) => {
+  const mergedOptions = { ...defaultOptions, ...options }
+  
+  switch (type) {
+    case 'success':
+      return toast.success(message, mergedOptions)
+    case 'error':
+      return toast.error(message, mergedOptions)
+    case 'warning':
+      return toast.warning(message, mergedOptions)
+    case 'info':
+      return toast.info(message, mergedOptions)
+    default:
+      return toast(message, mergedOptions)
+  }
+}
+
 const Toaster = {
   success: (message: string, options?: ToastOptions) =>
     toast.success(message, { ...defaultOptions, ...options }),

package/components/Toaster/ToasterProvider.tsx

@@ -1,9 +1,17 @@
 import 'react-toastify/dist/ReactToastify.css'
 import { ToasterStyledContainer } from './Toaster.style'
+import { ReactNode } from 'react'
 
-const ToastProvider = () => {
+interface ToasterProviderProps {
+  children?: ReactNode
+}
+
+const ToastProvider = ({ children }: ToasterProviderProps) => {
   return(
+    <>
+      {children}
       <ToasterStyledContainer newestOnTop />
+    </>
   ) 
 }