w-design-system 0.0.1

package/src/components/Modal/index.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { closeSVG } from '../../assets/icon'
+import { theme } from '../Themes'
+import Title from '../Title'
+import IconWrapper from '../IconWrapper'
+import { ModalTypes } from '../Types'
+import { ModalContainer, Overlay } from './styles'
+const {
+  colors: { cyan50, shade30 },
+} = theme
+
+const Modal: React.FC<ModalTypes> = ({ children, onClose, footer, ...props }) => {
+  return ReactDOM.createPortal(
+    <>
+      <Overlay onClick={onClose} />
+      <ModalContainer {...props}>
+        <div className={'modalHeader'}>
+          <Title size={'medium'} bold color={cyan50}>
+            Enviar
+          </Title>
+          <IconWrapper src={closeSVG} width={'14px'} height={'14px'} color={shade30} onClick={onClose} />
+        </div>
+        <div className={'modalContainer'}>{children}</div>
+        <div className={'modalFooter'}>{footer}</div>
+      </ModalContainer>
+    </>,
+    document.body,
+  )
+}
+
+export default Modal

package/src/components/Modal/stories.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+import Modal from './index'
+import Button from '../Button '
+import Paragraph from '../Paragraph'
+
+const meta: Meta<typeof Modal> = {
+  title: 'Components/Modal',
+  component: Modal,
+} satisfies Meta<typeof Modal>
+
+export default meta
+
+type Story = StoryObj<typeof Modal>
+
+export const Playground: Story = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [isOpen, setIsOpen] = useState(false)
+
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
+        {isOpen && (
+          <Modal
+            onClose={() => setIsOpen(false)}
+            footer={
+              <>
+                <Button onClick={() => setIsOpen(true)} variant={'gray'}>
+                  Cancelar
+                </Button>
+                <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
+              </>
+            }
+          >
+            <Paragraph size={'medium'} weight={800}>
+              Modal Title
+            </Paragraph>
+            <Paragraph>
+              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
+              industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
+              scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
+              electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
+              of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
+              like Aldus PageMaker including versions of Lorem Ipsum.
+            </Paragraph>
+          </Modal>
+        )}
+      </>
+    )
+  },
+}

package/src/components/Modal/styles.ts

@@ -0,0 +1,51 @@
+import styled from 'styled-components'
+import { theme } from '../Themes'
+const {
+  colors: { shade20 },
+  zIndex: { z8, z9 },
+} = theme
+
+export const Overlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: ${z8};
+`
+export const ModalContainer = styled.div`
+  display: flex;
+  min-width: 360px;
+  width: auto;
+  height: auto;
+  padding: 30px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+  flex-shrink: 0;
+  border-radius: 24px;
+  border: 1px solid ${shade20};
+  background: white;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  z-index: ${z9};
+
+  .modalContainer {
+    min-height: 100px;
+  }
+  .modalHeader {
+    display: inline-flex;
+    justify-content: space-between;
+    width: 100%;
+  }
+  .modalFooter {
+    display: inline-flex;
+    justify-content: flex-end;
+    width: 100%;
+    gap: 0 24px;
+  }
+`

package/src/components/Paragraph/index.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+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
+  children: React.ReactNode
+}
+
+const sizes = {
+  'x-small': '12px',
+  small: '14px',
+  medium: '16px',
+  large: '18px',
+}
+
+const weights = {
+  400: 400,
+  600: 600,
+  700: 700,
+  800: 800,
+}
+
+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)};
+  line-height: 140%;
+  font-family: 'Nunito Sans', sans-serif;
+  color: ${props => props.color || 'inherit'}; // Aplicando a cor
+`
+
+const Paragraph: React.FC<ParagraphProps> = ({ size = 'small', weight, as = 'p', color, children }) => {
+  return (
+    <ParagraphStyled as={as} size={size} weight={weight} color={color}>
+      {children}
+    </ParagraphStyled>
+  )
+}
+
+export default Paragraph

package/src/components/Paragraph/stories.tsx

@@ -0,0 +1,107 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Paragraph from "./index";
+
+const meta: Meta<typeof Paragraph> = {
+    title: 'Components/Paragraph',
+    component: Paragraph,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        size: {
+            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
+            description: 'Select the color of the text',
+        },
+        children: {
+            control: 'text',
+            description: 'Content of the paragraph',
+        },
+    },
+} 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.',
+    },
+};
+
+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.',
+    },
+};
+
+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.',
+    },
+};
+
+export const Large: Story = {
+    args: {
+        size: 'large',
+        color: '#999999', // Definindo a cor para Large
+        children: 'This is a large paragraph.',
+    },
+};
+
+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.',
+    },
+};
+
+export const AllSizes: Story = {
+    args: {
+        size: 'medium',
+        color: '#000000',
+        children: 'This paragraph can be adjusted to any size using the controls.',
+    },
+};
+
+export const AllWeights: Story = {
+    args: {
+        size: 'medium',
+        weight: 400,
+        color: '#000000',
+        children: 'This paragraph weight can be adjusted to 400, 600, 700, or 800.',
+    },
+};
+
+export const AllElements: Story = {
+    args: {
+        size: 'medium',
+        as: 'div',
+        color: '#000000',
+        children: 'This paragraph can be rendered as different HTML elements.',
+    },
+};

package/src/components/Tabs/index.tsx

@@ -0,0 +1,26 @@
+import React, { useState } from 'react'
+import { TabsTypes } from '../Types'
+import { TabsContainerStyled, TabStyled } from './styles'
+
+const Tabs: React.FC<TabsTypes> = ({ tabs, defaultActiveTab, onTabChange }) => {
+  const [activeTab, setActiveTab] = useState(defaultActiveTab || tabs[0])
+
+  const handleTabClick = (tab: string) => {
+    setActiveTab(tab)
+    if (onTabChange) {
+      onTabChange(tab)
+    }
+  }
+
+  return (
+    <TabsContainerStyled>
+      {tabs.map(tab => (
+        <TabStyled key={tab} active={tab === activeTab} onClick={() => handleTabClick(tab)}>
+          {tab}
+        </TabStyled>
+      ))}
+    </TabsContainerStyled>
+  )
+}
+
+export default Tabs

package/src/components/Tabs/stories.tsx

@@ -0,0 +1,74 @@
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import Paragraph from '../Paragraph'
+import Tabs from './index'
+import { useState } from 'react'
+
+const meta: Meta<typeof Tabs> = {
+  title: 'Components/Tabs',
+  component: Tabs,
+} satisfies Meta<typeof Tabs>
+
+export default meta
+
+type Story = StoryObj<typeof Tabs>
+
+export const Playground: Story = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [activeTab, setActiveTab] = useState('Tab 1')
+    const handleTabChange = (activeTab: string) => {
+      setActiveTab(activeTab)
+    }
+
+    return (
+      <div style={{ background: '#e0dede', padding: '50px', height: '100vh' }}>
+        <Tabs tabs={['Tab 1', 'Tab 2', 'Tab 3']} defaultActiveTab="Tab 1" onTabChange={handleTabChange} />
+        <div style={{ background: 'white', padding: '50px 20px', borderRadius: '8px', marginTop: '-5px' }}>
+          {activeTab === 'Tab 1' && (
+            <>
+              <Paragraph size={'medium'} weight={800}>
+                Tab 1
+              </Paragraph>
+              <Paragraph>
+                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
+                industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
+                scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
+                into electronic
+              </Paragraph>
+            </>
+          )}
+          {activeTab === 'Tab 2' && (
+            <>
+              <Paragraph size={'medium'} weight={800}>
+                Tab 2
+              </Paragraph>
+              <Paragraph>
+                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
+                industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
+                scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
+                into electronic Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
+                has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
+                of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also
+                the leap into electronic
+              </Paragraph>
+            </>
+          )}
+          {activeTab === 'Tab 3' && (
+            <>
+              <Paragraph size={'medium'} weight={800}>
+                Tab 3
+              </Paragraph>
+              <Paragraph>
+                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
+                industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
+                scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
+                into electronic
+              </Paragraph>
+            </>
+          )}
+        </div>
+      </div>
+    )
+  },
+}

package/src/components/Tabs/styles.ts

@@ -0,0 +1,23 @@
+import styled from 'styled-components'
+
+export const TabsContainerStyled = styled.div`
+  display: flex;
+  align-items: flex-end;
+`
+
+export const TabStyled = styled.div<{ active: boolean }>`
+  padding: 8px 16px;
+  cursor: pointer;
+  border-radius: 24px 24px 0 0;
+  background: white;
+  opacity: ${props => (props.active ? 1 : 0.8)};
+  height: ${props => (props.active ? '45px' : '40px')};
+  min-width: 95px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-family: 'Nunito Sans', sans-serif;
+  font-weight: ${props => (props.active ? 'bold' : 'normal')};
+  color: ${props => (props.active ? 'var(--PrimaryColor, #000)' : 'var(--SecondaryColor, #666)')};
+  transition: opacity 0.3s;
+`

package/src/components/Themes/index.ts

@@ -0,0 +1,99 @@
+const cyan = {
+  cyan50: '#001640',
+  cyan40: '#1A3D7F',
+  cyan30: '#025FDE',
+  cyan20: '#217EFD',
+  cyan10: '#EEF5FF',
+}
+
+const shades = {
+  shade50: '#333333',
+  shade40: '#666666',
+  shade30: '#999999',
+  shade20: '#EEEEEE',
+  shade10: '#EFF1F3',
+  shade05: '#FAFAFA',
+}
+
+const red = {
+  red40: '#981010',
+  red30: '#B41313',
+  red20: '#F3D9D9',
+  red10: '#F9EDED',
+}
+
+const honey = {
+  honey40: '#F77202',
+  honey30: '#F77202',
+  honey20: '#FCCEA7',
+  honey10: '#FDE3CC',
+}
+
+const yellow = {
+  yellow30: '#D08007',
+  yellow20: '#EFD3A8',
+  yellow10: '#FAF2E6',
+}
+
+const mint = {
+  mint40: '#059D2F',
+  mint30: '#06B737',
+  mint20: '#D7EFDE',
+  mint10: '#EBF8EF',
+}
+
+const white = '#FFFFFF'
+const black = '#333333'
+const transparent = 'transparent'
+
+export const spacing = {
+  space1: '4px',
+  space2: '8px',
+  space3: '16px',
+  space4: '24px',
+  space5: '32px',
+  space6: '40px',
+  space7: '48px',
+  space8: '56px',
+  space9: '64px',
+}
+
+const zIndex = {
+  z1: 1,
+  z2: 2,
+  z3: 3,
+  z4: 4,
+  z5: 5,
+  z6: 6,
+  z7: 7,
+  z8: 8,
+  z9: 9,
+  full: 10000,
+}
+
+export const theme = {
+  zIndex,
+  spacing,
+  colors: {
+    ...yellow,
+    ...shades,
+    ...red,
+    ...honey,
+    ...mint,
+    ...cyan,
+    white,
+    black,
+    transparent,
+  },
+  fonts: ['Nunito Sans', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'],
+  title: {
+    medium: '24px',
+    large: '34px',
+  },
+  paragraph: {
+    'x-small': '12px',
+    small: '14px',
+    medium: '16px',
+    large: '18px',
+  },
+}

package/src/components/Title/index.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import styled from 'styled-components'
+import { theme } from '../Themes'
+
+interface ParagraphProps {
+  size: 'medium' | 'large'
+  bold?: boolean
+  as?: 'h1' | 'h2' | 'h3'
+  color?: string // Adicionando a propriedade color
+  children: React.ReactNode
+}
+
+const sizes = {
+  ...theme.title,
+}
+
+const TitleStyled = styled.p<ParagraphProps>`
+  margin: 0;
+  padding: 0;
+  font-size: ${props => sizes[props.size]};
+  font-weight: ${props => (props.bold ? 800 : 400)};
+  line-height: 130%;
+  font-family: 'Nunito Sans', sans-serif;
+  color: ${props => props.color || 'inherit'}; // Aplicando a cor
+`
+
+const Title: React.FC<ParagraphProps> = ({ size = 'medium', bold, as = 'h2', color, children }) => {
+  return (
+    <TitleStyled as={as} size={size} bold={bold} color={color}>
+      {children}
+    </TitleStyled>
+  )
+}
+
+export default Title

package/src/components/Title/stories.tsx

@@ -0,0 +1,70 @@
+// src/components/Title.stories.tsx
+import type { Meta, StoryObj } from '@storybook/react';
+import { theme } from '../Themes';
+import Title from "./index";
+
+const sizes = theme.title;
+
+const meta: Meta<typeof Title> = {
+    title: 'Components/Title',
+    component: Title,
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        size: {
+            control: { type: 'select', options: ['medium', 'large'] },
+            description: 'Font size of the title',
+        },
+        bold: {
+            control: 'boolean',
+            description: 'Apply bold font weight',
+        },
+        as: {
+            control: { type: 'select', options: ['h1', 'h2', 'h3'] },
+            description: 'HTML element to render',
+        },
+        color: {
+            control: 'color',
+            description: 'Font color of the title',
+        },
+        children: {
+            control: 'text',
+            description: 'Content of the title',
+        },
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+
+export const LargeBoldTitle: Story = {
+    args: {
+        size: 'large',
+        bold: true,
+        as: 'h1',
+        color: '#1A3D7F', // Example color
+        children: 'Large Bold Title',
+    },
+};
+
+export const MediumTitle: Story = {
+    args: {
+        size: 'medium',
+        bold: false,
+        as: 'h2',
+        color: '#025FDE', // Example color
+        children: 'Medium Title',
+    },
+};
+
+export const CustomColorTitle: Story = {
+    args: {
+        size: 'large',
+        bold: true,
+        as: 'h3',
+        color: '#FF5733', // Custom color
+        children: 'Custom Color Title',
+    },
+};

package/src/components/Types/index.ts

@@ -0,0 +1,45 @@
+import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react'
+
+type ColorsVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'gray' | 'warning' | 'yellow'
+type ColorsVariantBanner = 'notice' | 'success' | 'danger' | 'warning'
+export interface ButtonTypes extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ColorsVariant
+  icon?: string
+  radius?: boolean
+  outline?: boolean
+  halfLeft?: boolean
+  halfRight?: boolean
+  fullWidth?: boolean
+}
+
+export interface ButtonRadiusIconTypes extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ColorsVariant
+  icon?: string
+  subTitle?: string
+}
+
+export interface ButtonRoundTypes extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ColorsVariant
+  icon?: string
+  outline?: boolean
+  badge?: number
+}
+
+export interface BannerTypes extends HTMLAttributes<HTMLDivElement> {
+  variant?: ColorsVariantBanner
+  title?: string
+  subTitle?: string
+  onClick?: () => void
+}
+
+export interface ModalTypes extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode
+  onClose: () => void
+  footer?: ReactNode | ReactNode[]
+}
+
+export interface TabsTypes extends HTMLAttributes<HTMLDivElement> {
+  tabs: string[]
+  defaultActiveTab?: string
+  onTabChange?: (activeTab: string) => void
+}

package/src/components/index.ts

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

package/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}