@liguelead/design-system 0.0.1 → 0.0.2

package/components/TextField/TextField.tsx

@@ -2,86 +2,102 @@ import React, { forwardRef, useState } from 'react'
 import { TextFieldProps } from './TextField.types'
 import { StateInterface, TextFieldStates } from './TextField.states'
 import {
-  FloatingLabel,
-  HelperText,
-  IconWrapper,
-  InputWrapper,
-  StyledInput,
-  Wrapper
+    FloatingLabel,
+    HelperText,
+    IconWrapper,
+    InputWrapper,
+    StyledInput,
+    Wrapper
 } from './TextField.styles'
-import { textFieldSizes } from './TextField.sizes';
+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';
-};
+    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)
+    (
+        {
+            className,
+            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 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>
+            )
+        }
 
-    const transformRightIcon = (type: string, rightIcon: React.ReactNode) => {
-      if (type === 'password') {
         return (
-          <IconWrapper onClick={togglePasswordVisibility} $right>
-            {passwordVisible ? <Eye /> : <EyeClosed />}
-          </IconWrapper>
+            <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>
         )
-      }
-      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';
+TextField.displayName = 'TextField'
 
 export default TextField

package/components/TextField/TextField.types.ts

@@ -1,21 +1,20 @@
-import { Control, FieldValues } from 'react-hook-form'
+import { 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'
+    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'
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@liguelead/design-system",
-    "version": "0.0.1",
+    "version": "0.0.2",
     "type": "module",
     "main": "components/index.ts",
     "publishConfig": {
@@ -11,7 +11,8 @@
         "@phosphor-icons/react": "^2.1.7"
     },
     "scripts": {
-        "lint": "eslint ."
+        "lint": "eslint .",
+        "ll-create-types": "node ./scripts/createTypes.js"
     },
     "files": [
         "components/",