@liguelead/design-system 0.0.8 → 0.0.10

package/components/Wizard/StepContent.tsx

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

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

@@ -1,76 +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 }
+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

@@ -1,126 +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
-}
+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
+}

package/components/Wizard/Wizard.tsx

@@ -1,55 +1,55 @@
-import React, { ReactElement } from 'react'
-
-import StepContent from './StepContent'
-import StepMenuItem from './StepMenuItem'
-import { WizardContextProvider } from './Wizard.context'
-import { WizardWrapper, WizardMenu, WizardContent, WizardMenuList } from './Wizard.styles'
-
-type StepProps = {
-  label?: string
-  stepNumber?: number
-}
-
-type WizardStep = ReactElement<StepProps>
-
-interface WizardProps {
-  children: WizardStep[]
-  menuNavigation?: boolean
-}
-
-function Wizard({ menuNavigation = true, children }: Readonly<WizardProps>) {
-  if (!children) {
-    return <div>Necessário criar os Wizards Steps</div>
-  }
-
-  const totalSteps = children.length
-
-  return (
-    <WizardContextProvider totalSteps={totalSteps}>
-      <WizardWrapper>
-        <WizardMenu>
-          <WizardMenuList>
-            {children.map((item, index) => (
-              <StepMenuItem
-                menuNavigation={menuNavigation}
-                key={index}
-                stepNumber={index + 1}
-                label={item.props.label}
-              />
-            ))}
-          </WizardMenuList>
-        </WizardMenu>
-        <WizardContent>
-          {React.Children.map(children, (child, index) => {
-            return React.cloneElement(child, {
-              stepNumber: index + 1
-            })
-          })}
-        </WizardContent>
-      </WizardWrapper>
-    </WizardContextProvider>
-  )
-}
-
-Wizard.Step = StepContent
-export default Wizard
+import React, { ReactElement } from 'react'
+
+import StepContent from './StepContent'
+import StepMenuItem from './StepMenuItem'
+import { WizardContextProvider } from './Wizard.context'
+import { WizardWrapper, WizardMenu, WizardContent, WizardMenuList } from './Wizard.styles'
+
+type StepProps = {
+  label?: string
+  stepNumber?: number
+}
+
+type WizardStep = ReactElement<StepProps>
+
+interface WizardProps {
+  children: WizardStep[]
+  menuNavigation?: boolean
+}
+
+function Wizard({ menuNavigation = true, children }: Readonly<WizardProps>) {
+  if (!children) {
+    return <div>Necessário criar os Wizards Steps</div>
+  }
+
+  const totalSteps = children.length
+
+  return (
+    <WizardContextProvider totalSteps={totalSteps}>
+      <WizardWrapper>
+        <WizardMenu>
+          <WizardMenuList>
+            {children.map((item, index) => (
+              <StepMenuItem
+                menuNavigation={menuNavigation}
+                key={index}
+                stepNumber={index + 1}
+                label={item.props.label}
+              />
+            ))}
+          </WizardMenuList>
+        </WizardMenu>
+        <WizardContent>
+          {React.Children.map(children, (child, index) => {
+            return React.cloneElement(child, {
+              stepNumber: index + 1
+            })
+          })}
+        </WizardContent>
+      </WizardWrapper>
+    </WizardContextProvider>
+  )
+}
+
+Wizard.Step = StepContent
+export default Wizard

package/components/Wizard/index.ts

@@ -1 +1 @@
-export { default } from './Wizard'
+export { default } from './Wizard'

package/components/index.ts

@@ -1,11 +1,11 @@
-export { default as Button } from './Button'
-export { default as Checkbox } from './Checkbox'
-export { default as DatePicker } from './DatePicker'
-export { default as IconButton } from './IconButton'
-export { default as PageWrapper } from './PageWrapper'
-export { default as Text } from './Text'
-export { default as TextField } from './TextField'
-export { default as ThemeProvider } from './ThemeProvider'
-export { default as Wizard } from './Wizard'
-export { default as Select } from './Select'
-export { default as SegmentedButton } from './SegmentedButton'
+export { default as Button } from './Button'
+export { default as Checkbox } from './Checkbox'
+export { default as DatePicker } from './DatePicker'
+export { default as IconButton } from './IconButton'
+export { default as PageWrapper } from './PageWrapper'
+export { default as Text } from './Text'
+export { default as TextField } from './TextField'
+export { default as ThemeProvider } from './ThemeProvider'
+export { default as Wizard } from './Wizard'
+export { default as Select } from './Select'
+export { default as SegmentedButton } from './SegmentedButton'