w-design-system 0.0.20 → 0.0.22

package/src/assets/icon/index.ts

@@ -3,4 +3,20 @@ import { default as alertSVG } from './alert.svg'
 import { default as commentSVG } from './comment.svg'
 import { default as imageSVG } from './image.svg'
 import { default as closeSVG } from './close.svg'
-export { docCheckSVG, alertSVG, commentSVG, imageSVG, closeSVG }
+import { default as dumpSVG } from './dump.svg'
+import { default as editSVG } from './edit.svg'
+import { default as chevronDownSVG } from './chevron-down.svg'
+import { default as chevronLeftSVG } from './chevron-left.svg'
+import { default as chevronRightSVG } from './chevron-right.svg'
+export {
+  docCheckSVG,
+  alertSVG,
+  commentSVG,
+  imageSVG,
+  closeSVG,
+  dumpSVG,
+  editSVG,
+  chevronDownSVG,
+  chevronRightSVG,
+  chevronLeftSVG,
+}

package/src/assets/icon/spin.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M13.125 4.875C13.125 5.49844 12.6234 6 12 6C11.3766 6 10.875 5.49844 10.875 4.875V1.125C10.875 0.503906 11.3766 0 12 0C12.6234 0 13.125 0.503906 13.125 1.125V4.875ZM13.125 22.875C13.125 23.4984 12.6234 24 12 24C11.3766 24 10.875 23.4984 10.875 22.875V19.125C10.875 18.5016 11.3766 18 12 18C12.6234 18 13.125 18.5016 13.125 19.125V22.875ZM0 12C0 11.3766 0.503906 10.875 1.125 10.875H4.875C5.49844 10.875 6 11.3766 6 12C6 12.6234 5.49844 13.125 4.875 13.125H1.125C0.503906 13.125 0 12.6234 0 12ZM22.875 10.875C23.4984 10.875 24 11.3766 24 12C24 12.6234 23.4984 13.125 22.875 13.125H19.125C18.5016 13.125 18 12.6234 18 12C18 11.3766 18.5016 10.875 19.125 10.875H22.875ZM20.4844 3.51469C20.925 3.95391 20.925 4.66641 20.4844 5.10469L17.8359 7.75781C17.3953 8.19844 16.6828 8.19844 16.2422 7.75781C15.8016 7.31719 15.8016 6.60469 16.2422 6.16875L18.8953 3.51469C19.3359 3.07547 20.0438 3.07547 20.4844 3.51469ZM5.10469 20.4844C4.66406 20.925 3.95625 20.925 3.47344 20.4844C3.07547 20.0438 3.07547 19.3313 3.47344 18.8953L6.16406 16.2422C6.60469 15.8016 7.31719 15.8016 7.75781 16.2422C8.19844 16.6828 8.19844 17.3953 7.75781 17.8312L5.10469 20.4844ZM3.47344 3.51469C3.95625 3.07547 4.66406 3.07547 5.10469 3.51469L7.75781 6.16875C8.19844 6.60469 8.19844 7.31719 7.75781 7.75781C7.31719 8.19844 6.60469 8.19844 6.16406 7.75781L3.47344 5.10469C3.07547 4.66641 3.07547 3.95391 3.47344 3.51469ZM20.4844 18.8953C20.925 19.3313 20.925 20.0438 20.4844 20.4844C20.0438 20.925 19.3359 20.925 18.8953 20.4844L16.2422 17.8312C15.8016 17.3953 15.8016 16.6828 16.2422 16.2422C16.6828 15.8016 17.3953 15.8016 17.8359 16.2422L20.4844 18.8953Z" fill="black"/>
+</svg>

package/src/components/ButtonRound/index.tsx

@@ -10,15 +10,16 @@ export const ButtonRound: React.FC<ButtonRoundTypes> = ({
   icon,
   outline,
   badge,
+  size = 'medium',
   ...props
 }) => (
-  <ButtonStyled variant={variant} disabled={disabled} outline={outline} badge={badge} {...props}>
-    {badge && <span className={'buttonRoundBadge'}>{badge}</span>}
+  <ButtonStyled variant={variant} disabled={disabled} outline={outline} badge={badge} size={size} {...props}>
+    {badge && size === 'medium' && <span className={'buttonRoundBadge'}>{badge}</span>}
     <IconWrapper
       src={icon || ''}
       color={'white'}
-      width={'20px'}
-      height={'20px'}
+      width={size === 'small' ? '16px' : '20px'}
+      height={size === 'small' ? '16px' : '20px'}
       className={'buttonRadiusWrapperIcon'}
     />
   </ButtonStyled>

package/src/components/ButtonRound/stories.tsx

@@ -39,12 +39,12 @@ export const Playground: Story = {
     icon: exampleIcon,
   },
 }
+
 export const ButtonBadge: Story = {
   args: {
-    variant: 'success',
+    variant: 'primary',
     children: 'ButtonPlayground',
     disabled: false,
     icon: exampleIcon,
-    badge: 10,
   },
 }

package/src/components/ButtonRound/styles.ts

@@ -98,8 +98,8 @@ export const ButtonStyled = styled.button<ButtonRoundTypes>`
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  height: 48px;
-  width: 48px;
+  height: ${({ size }) => (size === 'small' ? '32px' : '40px')};
+  width: ${({ size }) => (size === 'small' ? '32px' : '40px')};
   font-size: 16px;
   font-weight: 600;
   line-height: 140%;
@@ -111,7 +111,7 @@ export const ButtonStyled = styled.button<ButtonRoundTypes>`
     background-color 0.3s,
     opacity 0.3s;
   color: white;
-  gap: 12px;
+  gap: ${({ size }) => (size === 'small' ? '8' : '12px')};
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
   opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
   ${({ variant = 'primary', outline }) => colorScheme[variant]};
@@ -124,8 +124,8 @@ export const ButtonStyled = styled.button<ButtonRoundTypes>`
     margin-bottom: 24px;
     margin-left: 54px;
     position: absolute;
-    width: 26px;
-    height: 26px;
+    width: ${({ size }) => (size === 'small' ? '16px' : '26px')};
+    height: ${({ size }) => (size === 'small' ? '16px' : '26px')};
     border-radius: 100%;
     font-size: 12px;
     display: flex;

package/src/components/CardStories/index.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import styled, { keyframes } from 'styled-components'
+import { Paragraph } from '../Paragraph'
+import { theme } from '../Themes'
+
+const ContainerCardStories = styled.div`
+  min-height: 300px;
+  min-width: 200px;
+  height: auto;
+  width: auto;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+`
+
+const Wrapper = styled.div`
+  padding: 16px;
+  display: flex;
+  min-height: 240px;
+  min-width: 200px;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  flex-direction: column;
+`
+const WrapperFooter = styled.div`
+  height: 50px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-top: 1px solid #e0e0e0;
+  flex-direction: column;
+`
+
+interface CardStoriesProps {
+  title?: string
+  subTitle?: string
+  children?: React.ReactNode
+}
+const CardStories = ({ title, subTitle, children }: CardStoriesProps) => {
+  return (
+    <ContainerCardStories>
+      <Wrapper>{children}</Wrapper>
+      <WrapperFooter>
+        <Paragraph color={theme.colors.shade50} weight={800}>
+          {title}
+        </Paragraph>
+        <Paragraph size={'x-small'} color={theme.colors.shade30}>
+          {subTitle}
+        </Paragraph>
+      </WrapperFooter>
+    </ContainerCardStories>
+  )
+}
+
+export default CardStories

package/src/components/CardStories/stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import CardStories from './index'
+import { Paragraph } from '../Paragraph'
+import React from 'react'
+
+const meta: Meta<typeof CardStories> = {
+  title: 'Components/CardStories',
+  component: CardStories,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof CardStories>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    title: 'Default Title',
+    subTitle: 'Default Subtitle',
+    children: 'This is the default content.',
+  },
+}
+
+export const WithCustomContent: Story = {
+  args: {
+    title: 'Custom Title',
+    subTitle: 'Custom Subtitle',
+    children: (
+      <>
+        <Paragraph>This is custom content.</Paragraph>
+        <Paragraph size="small">Additional custom content.</Paragraph>
+      </>
+    ),
+  },
+}
+
+export const WithoutSubtitle: Story = {
+  args: {
+    title: 'Title Only',
+    children: <Paragraph>This card has no subtitle.</Paragraph>,
+  },
+}

package/src/components/Loading/index.tsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import styled, { keyframes } from 'styled-components'
+import spinSVG from '../../assets/icon/spin.svg'
+import { Paragraph } from '../Paragraph'
+import { theme } from '../Themes'
+
+// Animação de rotação
+const spinAnimation = keyframes`
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+`
+
+// Estilos para o wrapper de tela cheia
+const FullScreenWrapper = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgb(164, 162, 162);
+  z-index: 9999;
+`
+
+// Estilos para o wrapper do contêiner
+const ContainerWrapper = styled.div``
+
+// Estilos para o wrapper do conteúdo
+const ContainerWrapperStyles = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 16px;
+`
+
+// Estilos para a imagem de loading
+const LoadingImage = styled.img<{ size: 'small' | 'medium' | 'large' }>`
+  width: ${({ size }) => (size === 'small' ? '30px' : size === 'medium' ? '50px' : '70px')};
+  height: ${({ size }) => (size === 'small' ? '30px' : size === 'medium' ? '50px' : '70px')};
+  animation: ${spinAnimation} 2s linear infinite;
+`
+
+// Tipagem para as props de loading
+interface LoadingProps {
+  size?: 'small' | 'medium' | 'large'
+}
+
+// Componente de loading em tela cheia
+export const FullScreenLoading: React.FC<LoadingProps> = ({ size = 'medium' }) => (
+  <FullScreenWrapper>
+    <ContainerWrapperStyles>
+      <LoadingImage src={spinSVG} alt="loading" size={size} />
+      <Paragraph color={theme.colors.shade40} size="x-small">
+        CARREGANDO
+      </Paragraph>
+    </ContainerWrapperStyles>
+  </FullScreenWrapper>
+)
+
+// Componente de loading no contêiner
+export const ContainerLoading: React.FC<LoadingProps> = ({ size = 'medium' }) => (
+  <ContainerWrapper>
+    <ContainerWrapperStyles>
+      <LoadingImage src={spinSVG} alt="loading" size={size} />
+      <Paragraph color={theme.colors.shade30} size="x-small">
+        CARREGANDO
+      </Paragraph>
+    </ContainerWrapperStyles>
+  </ContainerWrapper>
+)

package/src/components/Loading/stories.tsx

@@ -0,0 +1,65 @@
+// src/components/Loading/stories.tsx
+import type { Meta, StoryObj } from '@storybook/react'
+import { FullScreenLoading, ContainerLoading } from './index'
+import React from 'react'
+import CardStories from '../CardStories'
+
+const meta: Meta<typeof FullScreenLoading> = {
+  title: 'Components/Loading',
+  component: FullScreenLoading,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: { type: 'select', options: ['small', 'medium', 'large'] },
+      description: 'Select the size of the loading spinner',
+    },
+  },
+} satisfies Meta<typeof FullScreenLoading>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const FullScreenSmall: Story = {
+  args: {
+    size: 'small',
+  },
+}
+
+export const FullScreenMedium: Story = {
+  args: {
+    size: 'medium',
+  },
+}
+
+export const FullScreenLarge: Story = {
+  args: {
+    size: 'large',
+  },
+}
+
+export const ContainerSmall: Story = {
+  render: () => (
+    <CardStories title="Loading" subTitle="small">
+      <ContainerLoading size="small" />
+    </CardStories>
+  ),
+}
+
+export const ContainerMedium: Story = {
+  render: () => (
+    <CardStories title="Loading" subTitle="medium">
+      <ContainerLoading size="medium" />
+    </CardStories>
+  ),
+}
+
+export const ContainerLarge: Story = {
+  render: () => (
+    <CardStories title="Loading" subTitle="large">
+      <ContainerLoading size="large" />
+    </CardStories>
+  ),
+}

package/src/components/Paginate/index.tsx

@@ -0,0 +1,108 @@
+import React from 'react'
+import { Container } from './styles'
+import { IconWrapper } from '../IconWrapper'
+import { chevronLeftSVG, chevronRightSVG } from '../../assets/icon'
+export type PropsPaginate = {
+  currentPage: number
+  itemCount: number
+  itemsPerPage?: number
+  onChangePage: (page: number) => void
+  onChangeItemsPerPage: (itemsPerPage: number) => void
+}
+
+export const Paginate = ({
+  currentPage,
+  itemCount,
+  onChangePage,
+  itemsPerPage,
+  onChangeItemsPerPage,
+}: PropsPaginate) => {
+  // Se itemsPerPage for undefined, o valor default e 20
+  let itemsPerPageValue = itemsPerPage || 20
+
+  const pageCount = Math.ceil(itemCount / itemsPerPageValue)
+
+  const pages: (number | 'elipsis')[] = []
+
+  // o interval indica quantas paginas mostrar antes e depois da pagina atual
+  const interval = 2
+
+  // Adiciona a primeira pagina
+  if (pageCount > 0 && currentPage - interval > 1) {
+    pages.push(1)
+  }
+
+  // Adiciona as paginas entre a primeira e a ultima do intervalo
+  const start = Math.max(currentPage - interval, 1)
+  const end = Math.min(currentPage + interval, pageCount)
+
+  if (start > 2) {
+    pages.push('elipsis')
+  }
+
+  for (let i = start; i <= end; i++) {
+    pages.push(i)
+  }
+
+  if (end < pageCount - 1) {
+    pages.push('elipsis')
+  }
+
+  if (pageCount > currentPage + interval) {
+    pages.push(pageCount)
+  }
+
+  const minItem = (currentPage - 1) * itemsPerPageValue + 1
+  const maxItem = Math.min(currentPage * itemsPerPageValue, itemCount)
+
+  const itemPerPageOptions = Array.from(new Set([10, 20, 50, 100, itemsPerPage]))
+
+  return (
+    <Container>
+      <ul className="pagination">
+        <IconWrapper
+          className={currentPage === 1 ? 'icon-disabled' : 'icon'}
+          src={chevronLeftSVG}
+          width="14px"
+          onClick={() => onChangePage(currentPage - 1)}
+        />
+        {pages.map((page, index) => {
+          if (page === 'elipsis') {
+            return <li key={`elipsis-${index}`}>...</li>
+          }
+          return (
+            <li key={page} className={page === currentPage ? 'page-active' : 'page'} onClick={() => onChangePage(page)}>
+              {page}
+            </li>
+          )
+        })}
+        <IconWrapper
+          className={currentPage === pageCount ? 'icon-disabled' : 'icon'}
+          src={chevronRightSVG}
+          width="14px"
+          onClick={() => onChangePage(currentPage + 1)}
+        />
+      </ul>
+      <div className="items-per-page-wrapper">
+        <div className="item-per-page">Itens por página</div>
+        <select
+          value={itemsPerPageValue}
+          onChange={e => {
+            onChangeItemsPerPage(Number(e.target.value))
+          }}
+        >
+          {itemPerPageOptions.map((item, index) => {
+            return (
+              <option key={index} value={item}>
+                {item}
+              </option>
+            )
+          })}
+        </select>
+        <div className="items-per-page-selected">
+          {minItem} - {maxItem} de {itemCount}
+        </div>
+      </div>
+    </Container>
+  )
+}

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

@@ -5,7 +5,8 @@ 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' // Adicionando a propriedade textTransform
   children: React.ReactNode
 }
 
@@ -30,12 +31,20 @@ const ParagraphStyled = styled.p<ParagraphProps>`
   font-weight: ${props => (props.weight ? weights[props.weight] : 400)};
   line-height: 140%;
   font-family: 'Nunito Sans', sans-serif;
-  color: ${props => props.color || 'inherit'}; // Aplicando a cor
+  color: ${props => props.color || 'inherit'};
+  text-transform: ${props => props.textTransform || 'none'}; // Aplicando textTransform
 `
 
-export const Paragraph: React.FC<ParagraphProps> = ({ size = 'small', weight, as = 'p', color, children }) => {
+export const Paragraph: React.FC<ParagraphProps> = ({
+  size = 'small',
+  weight,
+  as = 'p',
+  color,
+  textTransform,
+  children,
+}) => {
   return (
-    <ParagraphStyled as={as} size={size} weight={weight} color={color}>
+    <ParagraphStyled as={as} size={size} weight={weight} color={color} textTransform={textTransform}>
       {children}
     </ParagraphStyled>
   )