w-design-system 0.0.3 → 0.0.4

package/src/components/Paragraph/stories.tsx

@@ -1,107 +0,0 @@
-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

@@ -1,24 +0,0 @@
-import React, { useState } from 'react'
-import { TabsTypes } from '../Types'
-import { TabsContainerStyled, TabStyled } from './styles'
-
-export 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>
-  )
-}

package/src/components/Tabs/stories.tsx

@@ -1,74 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,99 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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
-`
-
-export const Title: React.FC<ParagraphProps> = ({ size = 'medium', bold, as = 'h2', color, children }) => {
-  return (
-    <TitleStyled as={as} size={size} bold={bold} color={color}>
-      {children}
-    </TitleStyled>
-  )
-}

package/src/components/Title/stories.tsx

@@ -1,68 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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/index.ts

@@ -1,10 +0,0 @@
-export { Banner } from './components/Banner/index'
-export { Button } from './components/Button/index'
-export { ButtonRadiusIcon } from './components/ButtonRadiusIcon/index'
-export { ButtonRound } from './components/ButtonRound/index'
-export { IconWrapper } from './components/IconWrapper/index'
-export { Modal } from './components/Modal/index'
-export { Paragraph } from './components/Paragraph/index'
-export { Tabs } from './components/Tabs/index'
-export { theme } from './components/Themes/index'
-export { Title } from './components/Title/index'

package/src/prettier.config.js

@@ -1,11 +0,0 @@
-module.exports = {
-  semi: false,
-  tabWidth: 2,
-  singleQuote: true,
-  trailingComma: 'all',
-  arrowParens: 'avoid',
-  printWidth: 120,
-  jsxSingleQuote: false,
-  jsxBracketSameLine: false,
-  bracketSpacing: true,
-}

package/src/react-app-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="react-scripts" />

package/src/reportWebVitals.ts

@@ -1,16 +0,0 @@
-import { ReportHandler } from 'web-vitals'
-
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    // @ts-ignore
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry)
-      getFID(onPerfEntry)
-      getFCP(onPerfEntry)
-      getLCP(onPerfEntry)
-      getTTFB(onPerfEntry)
-    })
-  }
-}
-
-export default reportWebVitals

package/src/setupTests.ts

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';

package/src/src/globalStyles.ts

@@ -1,11 +0,0 @@
-import { createGlobalStyle } from 'styled-components';
-
-const GlobalStyle = createGlobalStyle`
-  @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;700&display=swap');
-
-  body {
-    font-family: 'Nunito Sans', sans-serif;
-  }
-`;
-
-export default GlobalStyle;

package/src/stories/Button.stories.ts

@@ -1,52 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-import { Button } from './Button';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: 'Example/Button',
-  component: Button,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
-  args: { onClick: fn() },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Primary: Story = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    label: 'Button',
-  },
-};
-
-export const Large: Story = {
-  args: {
-    size: 'large',
-    label: 'Button',
-  },
-};
-
-export const Small: Story = {
-  args: {
-    size: 'small',
-    label: 'Button',
-  },
-};

package/src/stories/Button.tsx

@@ -1,42 +0,0 @@
-import React from 'react'
-import './button.css'
-
-export interface ButtonTypes {
-  /**
-   * Is this the principal call to action on the page?
-   */
-  primary?: boolean
-  /**
-   * What background color to use
-   */
-  backgroundColor?: string
-  /**
-   * How large should the button be?
-   */
-  size?: 'small' | 'medium' | 'large'
-  /**
-   * Button contents
-   */
-  label: string
-  /**
-   * Optional click handler
-   */
-  onClick?: () => void
-}
-
-/**
- * Primary UI component for user interaction
- */
-export const Button = ({ primary = false, size = 'medium', backgroundColor, label, ...props }: ButtonTypes) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'
-  return (
-    <button
-      type="button"
-      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
-      style={{ backgroundColor }}
-      {...props}
-    >
-      {label}
-    </button>
-  )
-}