w-design-system 0.0.21 → 0.0.22

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>
   )