w-design-system 0.0.21 → 0.0.23

package/src/components/Paginate/stories.tsx

@@ -0,0 +1,53 @@
+import { Meta, StoryObj } from '@storybook/react'
+import React, { useState } from 'react'
+
+import { action } from '@storybook/addon-actions'
+import { fn } from '@storybook/test'
+import { Paginate, PropsPaginate } from '.'
+
+const meta: Meta<PropsPaginate> = {
+  title: 'Components/Paginate',
+  component: Paginate,
+  tags: ['autodocs'],
+  args: {
+    currentPage: 1,
+    itemCount: 100,
+    itemsPerPage: 10,
+    onChangePage: fn(),
+    onChangeItemsPerPage: fn(),
+  },
+}
+
+export default meta
+
+const NewPaginate = (args: PropsPaginate) => {
+  const [currentPage, setCurrentPage] = useState(args.currentPage)
+  const [itemCount, setItemCount] = useState(args.itemCount)
+  const [itemsPerPage, setItemsPerPage] = useState(args.itemsPerPage)
+
+  const handleChangePage = (page: number) => {
+    setCurrentPage(page)
+    action('changePage')(page)
+  }
+
+  const handleChangeItemsPerPage = (items: number) => {
+    setItemsPerPage(items)
+    action('changeItemsPerPage')(items)
+  }
+  return (
+    <Paginate
+      {...args}
+      currentPage={currentPage}
+      itemCount={itemCount}
+      itemsPerPage={itemsPerPage}
+      onChangePage={handleChangePage}
+      onChangeItemsPerPage={handleChangeItemsPerPage}
+    />
+  )
+}
+
+export const Default: StoryObj<PropsPaginate> = {
+  render: args => {
+    return <NewPaginate {...args} />
+  },
+}

package/src/components/Paginate/styles.ts

@@ -0,0 +1,96 @@
+import styled from 'styled-components'
+import { theme } from '../Themes'
+import { chevronDownSVG } from '../../assets/icon'
+export const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .icon,
+  .icon svg,
+  .icon svg path {
+    fill: ${theme.colors.shade30} !important;
+  }
+
+  .icon:hover,
+  .icon:hover svg,
+  .icon:hover svg path {
+    fill: ${theme.colors.cyan30} !important;
+  }
+
+  .icon-disabled,
+  .icon-disabled svg,
+  .icon-disabled svg path {
+    fill: ${theme.colors.shade20} !important;
+  }
+
+  ul.pagination {
+    display: flex;
+    gap: 1rem;
+    font-family: 'Nunito Sans', sans-serif;
+    font-size: 1rem;
+    color: ${theme.colors.shade40};
+    li {
+      list-style: none;
+    }
+
+    li.page {
+      cursor: pointer;
+    }
+
+    li.page:hover {
+      color: ${theme.colors.cyan30};
+    }
+
+    li.page-active {
+      color: ${theme.colors.cyan30};
+      cursor: default;
+    }
+  }
+
+  .items-per-page-wrapper {
+    display: flex;
+    align-items: center;
+
+    gap: 1rem;
+    font-family: 'Nunito Sans', sans-serif;
+    color: ${theme.colors.shade40};
+
+    select {
+      /* styling */
+      cursor: pointer;
+      background-color: ${theme.colors.shade05};
+      background-image: url(${chevronDownSVG});
+      background-repeat: no-repeat;
+      background-size: 1rem;
+      background-position: right 1rem top calc(50% + 1px);
+      border: 1px solid ${theme.colors.shade20};
+      color: ${theme.colors.shade40};
+      border-radius: 4px;
+      display: inline-block;
+      font: inherit;
+      outline: 0;
+
+      padding: 18px 48px 14px 16px;
+
+      margin: 0;
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+      -webkit-appearance: none;
+      -moz-appearance: none; /* Firefox */
+      -webkit-appearance: none; /* Safari and Chrome */
+      appearance: none;
+    }
+
+    select:hover {
+      background-color: ${theme.colors.shade10};
+      border: 1px solid ${theme.colors.shade20};
+    }
+
+    select:focus {
+      background-color: ${theme.colors.shade10};
+      border: 1px solid ${theme.colors.shade30};
+    }
+  }
+`

package/src/components/Paragraph/index.tsx

@@ -3,10 +3,14 @@ import styled from 'styled-components'
 
 interface ParagraphProps {
   size?: 'x-small' | 'small' | 'medium' | 'large'
-  weight?: 400 | 600 | 700 | 800
   as?: 'span' | 'div' | 'label' | 'p'
-  color?: string // Adicionando a propriedade color
+  color?: string
+  textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase'
   children: React.ReactNode
+  lightBod?: boolean
+  semiBod?: boolean
+  strongBod?: boolean
+  heavyBod?: boolean
 }
 
 const sizes = {
@@ -17,25 +21,40 @@ const sizes = {
 }
 
 const weights = {
-  400: 400,
-  600: 600,
-  700: 700,
-  800: 800,
+  lightBod: 400,
+  semiBod: 600,
+  strongBod: 700,
+  heavyBod: 800,
+}
+
+const getFontWeight = (props: ParagraphProps) => {
+  if (props.heavyBod) return weights.heavyBod
+  if (props.strongBod) return weights.strongBod
+  if (props.semiBod) return weights.semiBod
+  return weights.lightBod
 }
 
 const ParagraphStyled = styled.p<ParagraphProps>`
   margin: 0;
   padding: 0;
-  font-size: ${props => sizes[props.size || 'small']};
-  font-weight: ${props => (props.weight ? weights[props.weight] : 400)};
+  font-size: ${({ size = 'small' }) => sizes[size]};
+  font-weight: ${props => getFontWeight(props)};
   line-height: 140%;
   font-family: 'Nunito Sans', sans-serif;
-  color: ${props => props.color || 'inherit'}; // Aplicando a cor
+  color: ${({ color = 'inherit' }) => color};
+  text-transform: ${({ textTransform = 'none' }) => textTransform};
 `
 
-export const Paragraph: React.FC<ParagraphProps> = ({ size = 'small', weight, as = 'p', color, children }) => {
+export const Paragraph: React.FC<ParagraphProps> = ({
+  size = 'small',
+  as = 'p',
+  color = 'inherit',
+  textTransform = 'none',
+  children,
+  ...props
+}) => {
   return (
-    <ParagraphStyled as={as} size={size} weight={weight} color={color}>
+    <ParagraphStyled as={as} size={size} color={color} textTransform={textTransform} {...props}>
       {children}
     </ParagraphStyled>
   )

package/src/components/Paragraph/stories.tsx

@@ -13,61 +13,58 @@ const meta: Meta<typeof Paragraph> = {
       control: { type: 'select', options: ['x-small', 'small', 'medium', 'large'] },
       description: 'Select the size of the paragraph',
     },
-    weight: {
-      control: { type: 'select', options: [400, 600, 700, 800] },
-      description: 'Select the font weight of the paragraph',
-    },
     as: {
       control: { type: 'select', options: ['span', 'div', 'label', 'p'] },
       description: 'Select the HTML element to render',
     },
     color: {
-      control: 'color', // Adicionando o controle de cor
+      control: 'color',
       description: 'Select the color of the text',
     },
     children: {
       control: 'text',
       description: 'Content of the paragraph',
     },
+    semiBod: { control: 'boolean', description: 'Use semiBod weight' },
+    strongBod: { control: 'boolean', description: 'Use strongBod weight' },
+    heavyBod: { control: 'boolean', description: 'Use heavyBod weight' },
   },
 } satisfies Meta<typeof Paragraph>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-// Define different stories for the Paragraph component
-
 export const XSmall: Story = {
   args: {
     size: 'x-small',
-    color: '#000000', // Definindo a cor para XSmall
-    children: 'This is an X-small paragraph.',
+    color: '#000000',
+    children: 'This is an X-small paragraph with LightBod weight.',
   },
 }
 
 export const Small: Story = {
   args: {
     size: 'small',
-    weight: 600,
-    color: '#333333', // Definindo a cor para Small
-    children: 'This is a small paragraph with weight 600.',
+    semiBod: true,
+    color: '#333333',
+    children: 'This is a small paragraph with SemiBod weight.',
   },
 }
 
 export const Medium: Story = {
   args: {
     size: 'medium',
-    weight: 700,
-    color: '#666666', // Definindo a cor para Medium
-    children: 'This is a medium paragraph with weight 700.',
+    strongBod: true,
+    color: '#666666',
+    children: 'This is a medium paragraph with StrongBod weight.',
   },
 }
 
 export const Large: Story = {
   args: {
     size: 'large',
-    color: '#999999', // Definindo a cor para Large
-    children: 'This is a large paragraph.',
+    color: '#999999',
+    children: 'This is a large paragraph with LightBod weight.',
   },
 }
 
@@ -75,8 +72,9 @@ export const CustomElement: Story = {
   args: {
     size: 'medium',
     as: 'label',
-    color: '#CC0000', // Definindo a cor para CustomElement
-    children: 'This is a medium paragraph rendered as a label.',
+    color: '#CC0000',
+    children: 'This is a medium paragraph rendered as a label with LightBod weight.',
+    strongBod: true,
   },
 }
 
@@ -91,9 +89,8 @@ export const AllSizes: Story = {
 export const AllWeights: Story = {
   args: {
     size: 'medium',
-    weight: 400,
     color: '#000000',
-    children: 'This paragraph weight can be adjusted to 400, 600, 700, or 800.',
+    children: 'This paragraph weight can be adjusted to LightBod, SemiBod, StrongBod, or HeavyBod.',
   },
 }
 

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'}>
+                    {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>
+  )
+}