@liguelead/design-system 0.0.1

package/components/Wizard/Wizard.tsx

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

package/components/Wizard/index.ts

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

package/components/index.ts

@@ -0,0 +1,7 @@
+export { default as Button } from './Button'
+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'

package/package.json

@@ -0,0 +1,32 @@
+{
+    "name": "@liguelead/design-system",
+    "version": "0.0.1",
+    "type": "module",
+    "main": "components/index.ts",
+    "publishConfig": {
+        "access": "public"
+    },
+    "dependencies": {
+        "@liguelead/foundation": "^0.0.11",
+        "@phosphor-icons/react": "^2.1.7"
+    },
+    "scripts": {
+        "lint": "eslint ."
+    },
+    "files": [
+        "components/",
+        "utils/"
+    ],
+    "devDependencies": {
+        "@eslint/js": "^9.13.0",
+        "@types/react": "^18.3.12",
+        "eslint": "^9.13.0",
+        "eslint-plugin-react-hooks": "^5.0.0",
+        "eslint-plugin-react-refresh": "^0.4.14",
+        "globals": "^15.11.0",
+        "react": "^18.3.1",
+        "styled-components": "6.1.13",
+        "typescript": "5.6.2",
+        "typescript-eslint": "^8.11.0"
+    }
+}

package/utils/colorDarken.ts

@@ -0,0 +1,10 @@
+const darken = (amount: number, color: string): string => {
+  const value = Math.max(0, Math.min(1, amount))
+  const colorValue = parseInt(color.slice(1), 16)
+  const r = Math.max(0, Math.min(255, (colorValue >> 16) - Math.round(255 * value)))
+  const g = Math.max(0, Math.min(255, ((colorValue >> 8) & 0x00ff) - Math.round(255 * value)))
+  const b = Math.max(0, Math.min(255, (colorValue & 0x0000ff) - Math.round(255 * value)))
+  return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`
+}
+
+export default darken

package/utils/colorLighten.ts

@@ -0,0 +1,10 @@
+const lighten = (amount: number, color: string): string => {
+  const value = Math.max(0, Math.min(1, amount))
+  const colorValue = parseInt(color.slice(1), 16)
+  const r = Math.min(255, (colorValue >> 16) + Math.round(255 * value))
+  const g = Math.min(255, ((colorValue >> 8) & 0x00ff) + Math.round(255 * value))
+  const b = Math.min(255, (colorValue & 0x0000ff) + Math.round(255 * value))
+  return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`
+}
+
+export default lighten

package/utils/darkenOrLighen.ts

@@ -0,0 +1,19 @@
+import darken from './colorDarken'
+import lighten from './colorLighten'
+
+const darkenOrLighten = (amount: number, bgColor: string): string => {
+  const hex = bgColor.replace('#', '')
+  const r = parseInt(hex.substring(0, 2), 16)
+  const g = parseInt(hex.substring(2, 4), 16)
+  const b = parseInt(hex.substring(4, 6), 16)
+
+  const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b
+
+  if (luminance < 95) {
+    return lighten(amount, bgColor)
+  }
+
+  return darken(amount, bgColor)
+}
+
+export default darkenOrLighten

package/utils/getTextColor.ts

@@ -0,0 +1,12 @@
+const getTextColor = (bgColor: string): 'neutral50' | 'neutral1000' => {
+  const hex = bgColor.replace('#', '')
+  const r = parseInt(hex.substring(0, 2), 16)
+  const g = parseInt(hex.substring(2, 4), 16)
+  const b = parseInt(hex.substring(4, 6), 16)
+
+  const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b
+
+  return luminance < 128 ? 'neutral50' : 'neutral1000'
+}
+
+export default getTextColor

package/utils/index.ts

@@ -0,0 +1,5 @@
+export {default as parseColor} from './parseColor'
+export {default as getTextColor} from './getTextColor'
+export {default as darken} from './colorDarken'
+export {default as lighten} from './colorLighten'
+export {default as darkenOrLighten} from './darkenOrLighen'

package/utils/parseColor.ts

@@ -0,0 +1,7 @@
+import { colors, ColorsInterface } from '@liguelead/foundation'
+
+const parseColor = (themeColor: keyof ColorsInterface) => {
+  return colors[themeColor]
+}
+
+export default parseColor