@liguelead/design-system 0.0.1

package/components/TextField/TextField.styles.ts

@@ -0,0 +1,98 @@
+import styled from 'styled-components'
+import {TextFieldSizeType} from './TextField.sizes'
+import {fontSize, fontWeight, lineHeight, spacing} from '@liguelead/foundation'
+import {StateInterface} from './TextField.states'
+import {parseColor} from '../../utils'
+
+interface StyledInputProps {
+    size: TextFieldSizeType
+    $themefication: StateInterface
+}
+
+export const InputWrapper = styled.div`
+    position: relative;
+    width: 100%;
+`
+
+export const FloatingLabel = styled.label`
+    position: absolute;
+    top: 50%;
+    left: 12px;
+    transform: translateY(-50%);
+    font-weight: ${fontWeight.fontWeight600};
+    transition: all 0.2s ease;
+    pointer-events: none;
+    background-color: white;
+    padding: 0 4px;
+`
+
+export const HelperText = styled.span<{error?: boolean}>`
+    font-size: ${fontSize.fontSize12}px;
+    line-height: ${lineHeight.lineHeight12}px;
+    padding-left: ${spacing.spacing16}px;
+`
+
+export const IconWrapper = styled.div<{$right?: boolean}>`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: absolute;
+    top: 0px;
+    height: 100%;
+    cursor: pointer;
+    ${({$right}) => ($right ? 'right: 0px;' : 'left: 0px;')}
+    padding: 0px ${spacing.spacing16}px;
+
+    & svg {
+        width: 20px;
+        height: 20px;
+        fill: ${({theme}) => parseColor(theme.colors.neutral700)};
+        transition: fill 0.2s ease;
+    }
+`
+
+export const StyledInput = styled.input.withConfig({
+    shouldForwardProp: prop => !['control', 'errors', 'rules'].includes(prop)
+})`
+    width: 100%;
+    border-radius: 4px;
+    outline: none;
+    transition: border-color 0.2s ease;
+    background: transparent;
+`
+
+export const BorderWrapper = styled.div`
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    border: 2px solid #ccc;
+    border-radius: 4px;
+    background-color: transparent;
+    z-index: -1;
+
+    ${StyledInput}:focus ~ & {
+        border-color: ${({theme}) => theme.colors.primary};
+    }
+`
+
+export const Wrapper = styled.div<StyledInputProps>`
+    position: relative;
+    width: 100%;
+    ${({$themefication, size}) => `
+    ${StyledInput} {
+      ${$themefication.animation}
+      ${$themefication.input}
+      ${size.input}
+    }
+    ${FloatingLabel} {
+      ${$themefication.label}
+      ${size.label}
+    }
+    ${HelperText} {
+      ${$themefication.label} 
+    }
+  `}
+`

package/components/TextField/TextField.tsx

@@ -0,0 +1,87 @@
+import React, { forwardRef, useState } from 'react'
+import { TextFieldProps } from './TextField.types'
+import { StateInterface, TextFieldStates } from './TextField.states'
+import {
+  FloatingLabel,
+  HelperText,
+  IconWrapper,
+  InputWrapper,
+  StyledInput,
+  Wrapper
+} from './TextField.styles'
+import { textFieldSizes } from './TextField.sizes';
+import { Eye, EyeClosed } from '@phosphor-icons/react'
+
+const getState = (disabled: boolean, error: boolean) => {
+  if (disabled) return 'disabled';
+  if (error) return 'error';
+  return 'default';
+};
+
+const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
+  (
+    {
+      className,
+      control,
+      disabled = false,
+      error,
+      handleLeftIcon,
+      handleRightIcon,
+      helperText,
+      label,
+      leftIcon,
+      onChange,
+      rightIcon,
+      size = 'md',
+      type = 'text',
+      value,
+      ...props
+    },
+    ref // A ref passada pelo componente pai
+  ) => {
+    const [passwordVisible, setPasswordVisible] = useState(type !== 'password');
+    const state = getState(disabled, !!error);
+    const textFieldState: StateInterface = TextFieldStates(state)
+    const textFieldSize = textFieldSizes(size, !!leftIcon, !!rightIcon)
+
+    const togglePasswordVisibility = () => {
+      setPasswordVisible(!passwordVisible);
+    };
+
+    const transformRightIcon = (type: string, rightIcon: React.ReactNode) => {
+      if (type === 'password') {
+        return (
+          <IconWrapper onClick={togglePasswordVisibility} $right>
+            {passwordVisible ? <Eye /> : <EyeClosed />}
+          </IconWrapper>
+        )
+      }
+      return <IconWrapper onClick={handleRightIcon} $right>{rightIcon}</IconWrapper>
+    }
+
+    return (
+      <Wrapper className={className} size={textFieldSize} $themefication={textFieldState}>
+
+        <InputWrapper>
+          {leftIcon && <IconWrapper onClick={handleLeftIcon}>{leftIcon}</IconWrapper>}
+          {transformRightIcon(type, rightIcon)}
+          <StyledInput
+            ref={ref}
+            type={passwordVisible ? 'text' : 'password'}
+            value={value}
+            onChange={onChange}
+            placeholder=" "
+            disabled={disabled}
+            {...props}
+          />
+          <FloatingLabel>{label}</FloatingLabel>
+        </InputWrapper>
+        {(helperText || error) && (<HelperText>{error?.message || helperText}</HelperText>)}
+      </Wrapper>
+    )
+  }
+)
+
+TextField.displayName = 'TextField';
+
+export default TextField

package/components/TextField/TextField.types.ts

@@ -0,0 +1,21 @@
+import { Control, FieldValues } from 'react-hook-form'
+import { TextFieldSize } from './TextField.sizes'
+import React from 'react'
+
+export interface TextFieldProps<TFieldValues extends FieldValues = FieldValues>
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  label: string
+  value?: string
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+  handleLeftIcon?: () => void
+  handleRightIcon?: () => void
+  helperText?: string
+  size?: TextFieldSize
+  className?: string
+  disabled?: boolean
+  leftIcon?: React.ReactNode
+  rightIcon?: React.ReactNode
+  control?: Control<{ [key: string]: unknown }>
+  error?: TFieldValues
+  type?: 'text' | 'password' | 'email' | 'number'
+}

package/components/TextField/index.ts

@@ -0,0 +1,2 @@
+export { default } from './TextField'
+export type { TextFieldProps } from './TextField.types'

package/components/ThemeProvider/ThemeProvider.tsx

@@ -0,0 +1,30 @@
+import { ThemeProvider as StyledTheme } from 'styled-components'
+import { themes} from '@liguelead/foundation'
+import { SpaThemeTypes } from '@liguelead/foundation/src/themes/spa'
+import { globalStyle as Reset } from './style'
+
+
+interface ThemeProviderProps {
+  children: React.ReactNode
+  theme?: 'spa'
+}
+
+type SpaTheme = SpaThemeTypes
+
+declare module 'styled-components' {
+  export interface DefaultTheme extends SpaTheme{}
+}
+
+const ThemeProvider = ({ children, theme }: ThemeProviderProps) => {
+  const appliedTheme = theme ? themes[theme] : themes['spa']
+
+
+  return (
+    <StyledTheme theme={appliedTheme}>
+      <Reset />
+      {children}
+    </StyledTheme>
+  )
+}
+
+export default ThemeProvider

package/components/ThemeProvider/index.ts

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

package/components/ThemeProvider/style.ts

@@ -0,0 +1,200 @@
+import { spacing, SpacingInterface } from '@liguelead/foundation'
+import { createGlobalStyle } from 'styled-components'
+
+// Função para gerar estilos de margem
+export const marginStyles = (): string => {
+  let result = ''
+
+  Object.keys(spacing).forEach((item) => {
+    if (item !== 'none') {
+      const key = item as keyof SpacingInterface
+      const value = spacing[key] === 'auto' ? 'auto' : `${spacing[key]}px`
+      const name = item.replace('spacing', '')
+      result += `
+        .mb-${name} {
+          margin-bottom: ${value};
+        }
+        .mt-${name} {
+          margin-top: ${value};
+        }
+        .my-${name} {
+          margin-top: ${value};
+          margin-bottom: ${value};
+        }
+         .ml-${name} {
+          margin-left: ${value};
+        }
+        .mr-${name} {
+          margin-right: ${value};
+        }
+        .mx-${name} {
+          margin-left: ${value};
+          margin-right: ${value};
+        }
+      `
+    }
+  })
+
+  return result
+}
+
+// Estilos globais utilizando `createGlobalStyle`
+export const globalStyle = createGlobalStyle`
+  *, *::before, *::after {
+    box-sizing: border-box;
+    outline: none;
+  }
+
+  body {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 400;
+    font-family: Manrope, sans-serif;
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+  }
+
+  
+  input:-webkit-autofill {
+    background-color: transparent !important; /* Cor de fundo personalizada */
+  }
+
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  input:-webkit-autofill:active {
+    background-color: transparent
+  }
+
+  [tabindex="-1"]:focus:not(:focus-visible) {
+    outline: 0 !important;
+  }
+
+  hr {
+    margin: 1rem 0;
+    color: inherit;
+    border: 0;
+    opacity: 0.25;
+  }
+
+  hr:not([size]) {
+    height: 1px;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    margin-top: 0;
+    margin-bottom: 0;
+    font-weight: 500;
+    line-height: 1.2;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  abbr[title], abbr[data-original-title] {
+    text-decoration: underline;
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+    cursor: help;
+    -webkit-text-decoration-skip-ink: none;
+    text-decoration-skip-ink: none;
+  }
+
+  address {
+    margin: 0;
+    font-style: normal;
+    line-height: inherit;
+  }
+
+  ol, ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  figure {
+    margin: 0;
+  }
+
+  img {
+    vertical-align: middle;
+  }
+
+  svg {
+    overflow: hidden;
+    vertical-align: middle;
+  }
+
+  table {
+    border-collapse: collapse;
+  }
+
+  caption {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    text-align: left;
+    caption-side: bottom;
+  }
+
+  th {
+    text-align: inherit;
+  }
+
+  input, button, select, optgroup, textarea {
+    margin: 0;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+  }
+
+  button, input {
+    overflow: visible;
+  }
+
+  button, select {
+    text-transform: none;
+  }
+
+  [list]::-webkit-calendar-picker-indicator {
+    display: none;
+  }
+
+  button, [type="button"], [type="reset"], [type="submit"] {
+    -webkit-appearance: button;
+  }
+
+  button:not(:disabled), [type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled) {
+    cursor: pointer;
+  }
+
+  ::-moz-focus-inner {
+    padding: 0;
+    border-style: none;
+  }
+
+  textarea {
+    overflow: auto;
+    resize: none;
+  }
+
+  fieldset {
+    min-width: 0;
+    padding: 0;
+    margin: 0;
+    border: 0;
+  }
+
+  main {
+    display: block;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  ${marginStyles()}
+`

package/components/Wizard/StepContent.tsx

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react'
+
+import { useWizard } from './Wizard.context'
+
+interface IChildrenFunctionParams {
+  nextStep: () => void
+  prevStep: () => void
+}
+interface StepContentProps {
+  children: ((params: IChildrenFunctionParams) => ReactNode) | ReactNode
+  stepNumber?: number
+  label?: string
+}
+
+function StepContent({ children, stepNumber }: StepContentProps) {
+  const { state, nextStep, prevStep } = useWizard()
+  const notActive = stepNumber !== state.currentStep
+
+  if (notActive) return null
+
+  if (typeof children === 'function') {
+    return <div>{children({ nextStep, prevStep })}</div>
+  }
+
+  return <>{children}</>
+}
+
+export default StepContent

package/components/Wizard/StepMenuItem.tsx

@@ -0,0 +1,33 @@
+import { useWizard } from './Wizard.context'
+import { WizardMenuItem, StepNumber, StepLabel } from './Wizard.styles'
+
+interface StepMenuItemProps {
+  stepNumber: number
+  label?: string
+  menuNavigation?: boolean
+}
+
+function StepMenuItem({ stepNumber, label, menuNavigation }: StepMenuItemProps) {
+  const { setState, state } = useWizard()
+
+  const active = stepNumber === state.currentStep
+  const completed = state.currentStep > stepNumber
+
+  return (
+    <WizardMenuItem
+      $active={active}
+      $completed={completed}
+      $menuNavigation={menuNavigation}
+      onClick={() => {
+        if (menuNavigation) {
+          setState((curr) => ({ ...curr, currentStep: stepNumber }))
+        }
+      }}
+    >
+      <StepNumber>{completed ? <span>C</span> : stepNumber}</StepNumber>
+      <StepLabel>{label}</StepLabel>
+    </WizardMenuItem>
+  )
+}
+
+export default StepMenuItem

package/components/Wizard/Wizard.context.tsx

@@ -0,0 +1,76 @@
+import React, { createContext, ReactNode, useContext, useState } from 'react'
+
+interface IWizardState {
+  currentStep: number
+  totalSteps: number
+}
+
+export interface IWizardContext {
+  state: IWizardState
+  setState: React.Dispatch<React.SetStateAction<IWizardState>>
+  nextStep: () => void
+  prevStep: () => void
+}
+
+interface IWizardContextProvider {
+  children: ReactNode
+  totalSteps: number
+}
+
+const INITIAL_VALUE = {
+  state: {
+    currentStep: 0,
+    totalSteps: 0
+  },
+  setState: () => {},
+  nextStep: () => {},
+  prevStep: () => {}
+}
+
+const WizardContext = createContext<IWizardContext>(INITIAL_VALUE)
+
+function WizardContextProvider({ children, totalSteps }: IWizardContextProvider) {
+  const [state, setState] = useState({
+    currentStep: 1,
+    totalSteps
+  })
+
+  function nextStep() {
+    const nextStep = state.currentStep + 1
+
+    if (nextStep > state.totalSteps) {
+      return
+    }
+
+    setState((curr) => ({
+      ...curr,
+      currentStep: nextStep
+    }))
+  }
+
+  function prevStep() {
+    const prevStep = state.currentStep - 1
+
+    if (prevStep === 0) {
+      return
+    }
+
+    setState((curr) => ({
+      ...curr,
+      currentStep: prevStep
+    }))
+  }
+
+  const value = { state, setState, nextStep, prevStep }
+  return <WizardContext.Provider value={value}>{children}</WizardContext.Provider>
+}
+
+function useWizard() {
+  const context = useContext(WizardContext)
+  if (context === undefined) {
+    throw new Error('useWizard must be used within a WizardContextProvider')
+  }
+  return context
+}
+
+export { WizardContextProvider, useWizard }

package/components/Wizard/Wizard.styles.ts

@@ -0,0 +1,126 @@
+import {parseColor} from '../../utils'
+import styled, {css, DefaultTheme} from 'styled-components'
+import Text from '../Text'
+
+interface WizardMenuItemProps {
+    $active?: boolean
+    $completed?: boolean
+    $menuNavigation?: boolean
+}
+
+const WizardWrapper = styled.div`
+    display: flex;
+    width: 100%;
+`
+
+const WizardMenu = styled.div`
+    flex: 1;
+    padding: 32px 24px;
+    border-radius: 4px 0 0 4px;
+    border: 1px solid #ddd;
+    border-right: 0;
+    background-color: #efefef;
+`
+
+const WizardContent = styled.div`
+    display: flex;
+    flex-direction: column;
+    flex: 3;
+    padding: 32px 24px;
+    border-radius: 0 4px 4px 0;
+    border: 1px solid #ddd;
+    border-left: 0;
+    background-color: ${({theme}) => parseColor(theme.colors.white)};
+
+    & > div {
+        height: 100%;
+    }
+`
+
+const itemActive = (theme: DefaultTheme) => {
+    return css`
+        .step-number {
+            background-color: ${parseColor(theme.colors.primary)};
+            border-color: ${parseColor(theme.colors.primary)};
+            color: ${parseColor(theme.colors.neutral100)};
+        }
+        .step-number::after {
+            border-left: 1px dashed ${parseColor(theme.colors.primary)};
+        }
+    `
+}
+
+const itemCompleted = (theme: DefaultTheme) => {
+    return css`
+        .step-number {
+            background-color: ${parseColor(theme.colors.primary)};
+            border-color: ${parseColor(theme.colors.primary)};
+            color: ${parseColor(theme.colors.neutral200)};
+        }
+        .step-number::after {
+            background-color: ${parseColor(theme.colors.primary)};
+            border-left: 1px solid ${parseColor(theme.colors.primary)};
+        }
+    `
+}
+
+const WizardMenuList = styled.ul``
+const WizardMenuItem = styled.li<WizardMenuItemProps>`
+    cursor: ${({$menuNavigation}) => ($menuNavigation ? 'pointer' : 'default')};
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    & + li {
+        margin-top: 30px;
+    }
+
+    ${({theme, $active}) => $active && itemActive(theme)}
+    ${({theme, $completed}) => $completed && itemCompleted(theme)}
+`
+
+const StepNumber = styled(Text).attrs({
+    tag: 'span',
+    size: 'body01',
+    className: 'step-number'
+})`
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background-color: ${({theme}) => parseColor(theme.colors.neutral300)};
+    border: 1px dashed ${({theme}) => parseColor(theme.colors.primary)};
+    color: ${({theme}) => parseColor(theme.colors.primary)};
+
+    &::after {
+        content: '';
+        position: absolute;
+        top: 31px;
+        height: 32px;
+        width: 1px;
+        border-left: 1px dashed ${({theme}) => parseColor(theme.colors.primary)};
+    }
+
+    ${WizardMenuItem}:last-child &::after {
+        display: none;
+    }
+`
+const StepLabel = styled(Text).attrs({
+    tag: 'p',
+    size: 'body01',
+    className: 'step-label'
+})`
+    color: ${({theme}) => parseColor(theme.colors.neutral900)};
+`
+
+export {
+    WizardWrapper,
+    WizardMenu,
+    WizardContent,
+    WizardMenuList,
+    WizardMenuItem,
+    StepNumber,
+    StepLabel
+}