@liguelead/design-system 0.0.9 → 0.0.11

package/components/TextField/TextField.styles.ts

@@ -1,98 +1,85 @@
-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} 
-    }
-  `}
-`
+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 Label = styled.label`
+    display: block;
+    font-weight: ${fontWeight.fontWeight600};
+    margin-bottom: ${spacing.spacing4}px;
+    font-size: ${fontSize.fontSize14}px;
+`
+
+export const HelperText = styled.span<{ error?: boolean }>`
+    font-size: ${fontSize.fontSize12}px;
+    line-height: ${lineHeight.lineHeight16}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;
+    border: 1px solid #CFCFD1;
+    transition: border-color 0.2s ease;
+    background: transparent;
+`
+
+
+export const Wrapper = styled.div<StyledInputProps>`
+    position: relative;
+    width: 100%;
+    ${({ $themefication, size }) => `
+        ${StyledInput} {
+            ${$themefication.input}
+            ${size.input}
+        }
+        ${Label} {
+            ${$themefication.label}
+            ${size.label}
+        }
+        ${HelperText} {
+            ${$themefication.label} 
+        }
+    `}
+`
+
+export const RequiredAsterisk = styled.span`
+    color: ${({ theme }) => parseColor(theme.colors.primary)};
+`

package/components/TextField/TextField.tsx

@@ -1,108 +1,108 @@
-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'
-
-export const getState = (disabled: boolean, error: boolean) => {
-    if (disabled) return 'disabled'
-    if (error) return 'error'
-    return 'default'
-}
-
-const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
-    (
-        {
-            className,
-            disabled = false,
-            error,
-            handleLeftIcon,
-            handleRightIcon,
-            helperText,
-            label,
-            leftIcon,
-            onChange,
-            rightIcon,
-            size = 'md',
-            type = 'text',
-            value,
-            register,
-            ...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}
-                        placeholder=" "
-                        disabled={disabled}
-                        {...props}
-                        {...register}
-                        onChange={e => {
-                            register?.onChange(e)
-                            onChange?.(e)
-                        }}
-                    />
-                    <FloatingLabel>{label}</FloatingLabel>
-                </InputWrapper>
-                {(helperText || error) && (
-                    <HelperText>{error?.message || helperText}</HelperText>
-                )}
-            </Wrapper>
-        )
-    }
-)
-
-TextField.displayName = 'TextField'
-
-export default TextField
+import React, { forwardRef, useState } from 'react'
+import { TextFieldProps } from './TextField.types'
+import { StateInterface, TextFieldStates } from './TextField.states'
+import {
+    Label,
+    HelperText,
+    IconWrapper,
+    InputWrapper,
+    StyledInput,
+    Wrapper,
+    RequiredAsterisk
+} from './TextField.styles'
+import { textFieldSizes } from './TextField.sizes'
+import { Eye, EyeClosed } from '@phosphor-icons/react'
+import  getState  from './utils/getState'
+
+const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
+    (
+        {
+            className,
+            disabled = false,
+            error,
+            handleLeftIcon,
+            handleRightIcon,
+            helperText,
+            label,
+            leftIcon,
+            onChange,
+            rightIcon,
+            size = 'md',
+            type = 'text',
+            value,
+            register,
+            placeholder,
+            ...props
+        },
+        ref
+    ) => {
+        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}
+            >
+                <Label>
+                    {label} {props.required && <RequiredAsterisk>*</RequiredAsterisk>}
+                </Label>
+                <InputWrapper>
+                    {leftIcon && (
+                        <IconWrapper onClick={handleLeftIcon}>
+                            {leftIcon}
+                        </IconWrapper>
+                    )}
+                    {transformRightIcon(type, rightIcon)}
+                    <StyledInput
+                        ref={ref}
+                        type={passwordVisible ? 'text' : 'password'}
+                        value={value}
+                        disabled={disabled}
+                        placeholder={placeholder}
+                        {...props}
+                        {...register}
+                        onChange={e => {
+                            register?.onChange(e)
+                            onChange?.(e)
+                        }}
+                    />
+                </InputWrapper>
+                {(helperText || error) && (
+                    <HelperText>{error?.message || helperText}</HelperText>
+                )}
+            </Wrapper>
+        )
+    }
+)
+
+TextField.displayName = 'TextField'
+
+export default TextField

package/components/TextField/TextField.types.ts

@@ -1,21 +1,22 @@
-import { FieldValues, UseFormRegisterReturn } 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
-    error?: TFieldValues
-    type?: 'text' | 'password' | 'email' | 'number'
-    register?: UseFormRegisterReturn<string>
-}
+import { FieldValues, UseFormRegisterReturn } 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
+    placeholder?: string
+    disabled?: boolean
+    leftIcon?: React.ReactNode
+    rightIcon?: React.ReactNode
+    error?: TFieldValues
+    type?: 'text' | 'password' | 'email' | 'number'
+    register?: UseFormRegisterReturn<string>
+}

package/components/TextField/index.ts

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

package/components/TextField/utils/getState.ts

@@ -0,0 +1,7 @@
+const getState = (disabled: boolean, error: boolean) => {
+    if (disabled) return 'disabled'
+    if (error) return 'error'
+    return 'default'
+}
+
+export default getState

package/components/ThemeProvider/ThemeProvider.tsx

@@ -1,21 +1,21 @@
-import { ThemeProvider as StyledTheme } from 'styled-components'
-import { themes } from '@liguelead/foundation'
-import { globalStyle as Reset } from './style'
-
-interface ThemeProviderProps {
-    children: React.ReactNode
-    theme?: 'spa'
-}
-
-const ThemeProvider = ({ children, theme }: ThemeProviderProps) => {
-    const appliedTheme = theme ? themes[theme] : themes['spa']
-
-    return (
-        <StyledTheme theme={appliedTheme}>
-            <Reset />
-            {children}
-        </StyledTheme>
-    )
-}
-
-export default ThemeProvider
+import { ThemeProvider as StyledTheme } from 'styled-components'
+import { themes } from '@liguelead/foundation'
+import { globalStyle as Reset } from './style'
+
+interface ThemeProviderProps {
+    children: React.ReactNode
+    theme?: 'spa'
+}
+
+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

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