@liguelead/design-system 0.0.8 → 0.0.10

package/components/Select/Select.tsx

@@ -1,144 +1,145 @@
-import { forwardRef, useState } from 'react'
-import * as RadixSelect from '@radix-ui/react-select'
-import { CaretDown, Plus } from '@phosphor-icons/react'
-import {
-    FloatingLabel,
-    HelperText,
-    IconWrapper,
-    InputWrapper,
-    StyledContent,
-    StyledInput,
-    StyledItem,
-    Wrapper
-} from './Select.styles'
-import { SelectStates } from './Select.states'
-import { textFieldSizes } from './Select.sizes'
-import TextField, { getState } from '../TextField/TextField'
-import { SelectProps, StateInterface } from './Select.types'
-
-const Select = forwardRef<HTMLInputElement, SelectProps>(
-    (
-        {
-            label,
-            defaultValue,
-            error,
-            helperText,
-            leftIcon,
-            size = 'md',
-            options,
-            className,
-            disabled = false,
-            handleLeftIcon,
-            register
-        },
-        ref
-    ) => {
-        const [selectValue, setSelectValue] = useState(
-            defaultValue ?? options[0]?.value
-        )
-        const [open, setOpen] = useState(false)
-
-        const handleOnChange = (value: string) => {
-            if (value) {
-                setSelectValue(value)
-                register?.onChange({
-                    target: {
-                        name: register.name,
-                        value
-                    }
-                })
-            }
-        }
-
-        const state = getState(disabled, !!error)
-        const textFieldState: StateInterface = SelectStates(state)
-        const textFieldSize = textFieldSizes(size, !!leftIcon, false)
-        const selectedLabel =
-            options.find(option => option.value === selectValue)?.label ?? ''
-
-        return (
-            <Wrapper
-                className={className}
-                size={textFieldSize}
-                $themefication={textFieldState}>
-                <input
-                    type="hidden"
-                    value={selectValue}
-                    ref={instance => {
-                        if (typeof ref === 'function') {
-                            ref(instance)
-                        } else if (ref) {
-                            ref.current = instance
-                        }
-                        register?.ref(instance)
-                    }}
-                    onChange={register?.onChange}
-                    onBlur={register?.onBlur}
-                />
-                {!disabled ? (
-                    <RadixSelect.Root
-                        value={selectValue}
-                        onOpenChange={open => setOpen(open)}
-                        defaultValue={defaultValue}
-                        onValueChange={(value: string) =>
-                            handleOnChange(value)
-                        }>
-                        <RadixSelect.Trigger asChild>
-                            <InputWrapper>
-                                {leftIcon && (
-                                    <IconWrapper onClick={handleLeftIcon}>
-                                        {leftIcon}
-                                    </IconWrapper>
-                                )}
-                                <IconWrapper $right $error={!!error}>
-                                    <CaretDown weight="fill" size={14} />
-                                </IconWrapper>
-                                <StyledInput
-                                    readOnly
-                                    style={{ cursor: 'pointer !important' }}
-                                    value={selectedLabel}
-                                    placeholder=" "
-                                    className={open ? 'is-open' : ''}
-                                />
-                                <FloatingLabel
-                                    className={open ? 'is-open' : ''}>
-                                    {label}
-                                </FloatingLabel>
-                            </InputWrapper>
-                        </RadixSelect.Trigger>
-                        <StyledContent
-                            asChild
-                            sideOffset={0}
-                            position="popper"
-                            align="start"
-                            className="RadixSelectContent">
-                            <RadixSelect.Viewport className="RadixSelectViewport">
-                                {options.map(option => (
-                                    <StyledItem
-                                        key={option.value}
-                                        value={option.value}>
-                                        <Plus width={20} />
-                                        {option.label}
-                                    </StyledItem>
-                                ))}
-                            </RadixSelect.Viewport>
-                        </StyledContent>
-                    </RadixSelect.Root>
-                ) : (
-                    <TextField
-                        leftIcon={leftIcon}
-                        rightIcon={<CaretDown weight="fill" size={14} />}
-                        label={label}
-                        size={size}
-                        disabled
-                    />
-                )}
-                {(helperText || error) && (
-                    <HelperText>{error?.message || helperText}</HelperText>
-                )}
-            </Wrapper>
-        )
-    }
-)
-
-export default Select
+import { forwardRef, useState } from 'react'
+import * as RadixSelect from '@radix-ui/react-select'
+import { CaretDown, Plus } from '@phosphor-icons/react'
+import {
+    FloatingLabel,
+    HelperText,
+    IconWrapper,
+    InputWrapper,
+    StyledContent,
+    StyledInput,
+    StyledItem,
+    Wrapper
+} from './Select.styles'
+import { SelectStates } from './Select.states'
+import { textFieldSizes } from './Select.sizes'
+import TextField from '../TextField/TextField'
+import { SelectProps, StateInterface } from './Select.types'
+import getState from '../TextField/utils/getState'
+
+const Select = forwardRef<HTMLInputElement, SelectProps>(
+    (
+        {
+            label,
+            defaultValue,
+            error,
+            helperText,
+            leftIcon,
+            size = 'md',
+            options,
+            className,
+            disabled = false,
+            handleLeftIcon,
+            register
+        },
+        ref
+    ) => {
+        const [selectValue, setSelectValue] = useState(
+            defaultValue ?? options[0]?.value
+        )
+        const [open, setOpen] = useState(false)
+
+        const handleOnChange = (value: string) => {
+            if (value) {
+                setSelectValue(value)
+                register?.onChange({
+                    target: {
+                        name: register.name,
+                        value
+                    }
+                })
+            }
+        }
+
+        const state = getState(disabled, !!error)
+        const textFieldState: StateInterface = SelectStates(state)
+        const textFieldSize = textFieldSizes(size, !!leftIcon, false)
+        const selectedLabel =
+            options.find(option => option.value === selectValue)?.label ?? ''
+
+        return (
+            <Wrapper
+                className={className}
+                size={textFieldSize}
+                $themefication={textFieldState}>
+                <input
+                    type="hidden"
+                    value={selectValue}
+                    ref={instance => {
+                        if (typeof ref === 'function') {
+                            ref(instance)
+                        } else if (ref) {
+                            ref.current = instance
+                        }
+                        register?.ref(instance)
+                    }}
+                    onChange={register?.onChange}
+                    onBlur={register?.onBlur}
+                />
+                {!disabled ? (
+                    <RadixSelect.Root
+                        value={selectValue}
+                        onOpenChange={open => setOpen(open)}
+                        defaultValue={defaultValue}
+                        onValueChange={(value: string) =>
+                            handleOnChange(value)
+                        }>
+                        <RadixSelect.Trigger asChild>
+                            <InputWrapper>
+                                {leftIcon && (
+                                    <IconWrapper onClick={handleLeftIcon}>
+                                        {leftIcon}
+                                    </IconWrapper>
+                                )}
+                                <IconWrapper $right $error={!!error}>
+                                    <CaretDown weight="fill" size={14} />
+                                </IconWrapper>
+                                <StyledInput
+                                    readOnly
+                                    style={{ cursor: 'pointer !important' }}
+                                    value={selectedLabel}
+                                    placeholder=" "
+                                    className={open ? 'is-open' : ''}
+                                />
+                                <FloatingLabel
+                                    className={open ? 'is-open' : ''}>
+                                    {label}
+                                </FloatingLabel>
+                            </InputWrapper>
+                        </RadixSelect.Trigger>
+                        <StyledContent
+                            asChild
+                            sideOffset={0}
+                            position="popper"
+                            align="start"
+                            className="RadixSelectContent">
+                            <RadixSelect.Viewport className="RadixSelectViewport">
+                                {options.map(option => (
+                                    <StyledItem
+                                        key={option.value}
+                                        value={option.value}>
+                                        <Plus width={20} />
+                                        {option.label}
+                                    </StyledItem>
+                                ))}
+                            </RadixSelect.Viewport>
+                        </StyledContent>
+                    </RadixSelect.Root>
+                ) : (
+                    <TextField
+                        leftIcon={leftIcon}
+                        rightIcon={<CaretDown weight="fill" size={14} />}
+                        label={label}
+                        size={size}
+                        disabled
+                    />
+                )}
+                {(helperText || error) && (
+                    <HelperText>{error?.message || helperText}</HelperText>
+                )}
+            </Wrapper>
+        )
+    }
+)
+
+export default Select

package/components/Select/Select.types.ts

@@ -1,36 +1,36 @@
-import { FieldValues, UseFormRegisterReturn } from 'react-hook-form'
-export interface SelectProps<TFieldValues extends FieldValues = FieldValues> {
-    className?: string
-    disabled?: boolean
-    error?: TFieldValues
-    label: string
-    options: Array<{ label: string; value: string }>
-    value?: string
-    defaultValue?: string
-    handleLeftIcon?: () => void
-    helperText?: string
-    leftIcon?: React.ReactNode
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
-    size?: 'sm' | 'md' | 'lg'
-    register?: UseFormRegisterReturn<string>
-}
-
-export interface StateInterface {
-    input: string
-    label: string
-    helperText: string
-    animation?: string
-}
-
-export interface TextFieldStates {
-    error: StateInterface
-    default: StateInterface
-    disabled: StateInterface
-}
-
-export type TextFieldSize = 'sm' | 'md' | 'lg'
-
-export type TextFieldSizeType = {
-    input: string
-    label: string
-}
+import { FieldValues, UseFormRegisterReturn } from 'react-hook-form'
+export interface SelectProps<TFieldValues extends FieldValues = FieldValues> {
+    className?: string
+    disabled?: boolean
+    error?: TFieldValues
+    label: string
+    options: Array<{ label: string; value: string }>
+    value?: string
+    defaultValue?: string
+    handleLeftIcon?: () => void
+    helperText?: string
+    leftIcon?: React.ReactNode
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+    size?: 'sm' | 'md' | 'lg'
+    register?: UseFormRegisterReturn<string>
+}
+
+export interface StateInterface {
+    input: string
+    label: string
+    helperText: string
+    animation?: string
+}
+
+export interface TextFieldStates {
+    error: StateInterface
+    default: StateInterface
+    disabled: StateInterface
+}
+
+export type TextFieldSize = 'sm' | 'md' | 'lg'
+
+export type TextFieldSizeType = {
+    input: string
+    label: string
+}

package/components/Select/index.ts

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

package/components/Text/Text.styles.ts

@@ -1,43 +1,43 @@
-import { parseColor } from '../../utils'
-import styled, { css } from 'styled-components'
-import {
-    fontSize,
-    fontWeight,
-    lineHeight,
-    fontFamily
-} from '@liguelead/foundation'
-import { TextProps } from './Text.types'
-
-type BodyProps = Omit<TextProps, 'tag'>
-
-const Body = styled.p.withConfig({
-    shouldForwardProp: prop =>
-        !['color', 'margin', 'isTitle', 'size', 'align', 'weight'].includes(
-            prop
-        )
-})<BodyProps>`
-    position: relative;
-
-    ${({
-        align = 'left',
-        color = 'neutral800',
-        isTitle,
-        theme,
-        size = 'body01'
-    }) => css`
-        text-align: ${align};
-        color: ${parseColor(theme.colors[color] || theme.colors.neutral800)};
-        font-family: '${isTitle
-                ? fontFamily[theme.fonts.headings]
-                : fontFamily[theme.fonts.default]}',
-            sans-serif;
-        font-weight: ${fontWeight[theme.typography[size]?.fontWeight] ||
-        'normal'};
-        font-size: ${fontSize[theme.typography[size]?.fontSize] ||
-        fontSize.fontSize16}px;
-        line-height: ${lineHeight[theme.typography[size]?.lineHeight] ||
-        lineHeight.lineHeight24}px;
-    `}
-`
-
-export { Body }
+import { parseColor } from '../../utils'
+import styled, { css } from 'styled-components'
+import {
+    fontSize,
+    fontWeight,
+    lineHeight,
+    fontFamily
+} from '@liguelead/foundation'
+import { TextProps } from './Text.types'
+
+type BodyProps = Omit<TextProps, 'tag'>
+
+const Body = styled.p.withConfig({
+    shouldForwardProp: prop =>
+        !['color', 'margin', 'isTitle', 'size', 'align', 'weight'].includes(
+            prop
+        )
+})<BodyProps>`
+    position: relative;
+
+    ${({
+        align = 'left',
+        color = 'neutral800',
+        isTitle,
+        theme,
+        size = 'body01'
+    }) => css`
+        text-align: ${align};
+        color: ${parseColor(theme.colors[color] || theme.colors.neutral800)};
+        font-family: '${isTitle
+                ? fontFamily[theme.fonts.headings]
+                : fontFamily[theme.fonts.default]}',
+            sans-serif;
+        font-weight: ${fontWeight[theme.typography[size]?.fontWeight] ||
+        'normal'};
+        font-size: ${fontSize[theme.typography[size]?.fontSize] ||
+        fontSize.fontSize16}px;
+        line-height: ${lineHeight[theme.typography[size]?.lineHeight] ||
+        lineHeight.lineHeight24}px;
+    `}
+`
+
+export { Body }

package/components/Text/Text.tsx

@@ -1,27 +1,27 @@
-import React from 'react'
-import { Body } from './Text.styles'
-import { TextProps } from './Text.types'
-
-const Text: React.FC<TextProps> = ({
-    align,
-    children,
-    color = 'neutral1000',
-    isTitle = false,
-    tag = 'p',
-    size,
-    ...rest
-}) => {
-    return (
-        <Body
-            as={isTitle ? 'h2' : tag}
-            align={align}
-            color={color}
-            size={size}
-            isTitle={isTitle}
-            {...rest}>
-            {children}
-        </Body>
-    )
-}
-
-export default Text
+import React from 'react'
+import { Body } from './Text.styles'
+import { TextProps } from './Text.types'
+
+const Text: React.FC<TextProps> = ({
+    align,
+    children,
+    color = 'neutral1000',
+    isTitle = false,
+    tag = 'p',
+    size,
+    ...rest
+}) => {
+    return (
+        <Body
+            as={isTitle ? 'h2' : tag}
+            align={align}
+            color={color}
+            size={size}
+            isTitle={isTitle}
+            {...rest}>
+            {children}
+        </Body>
+    )
+}
+
+export default Text

package/components/Text/Text.types.ts

@@ -1,42 +1,42 @@
-import { colorType } from 'types'
-import { ReactNode } from 'react'
-
-type AlignType = 'left' | 'center' | 'right' | 'justify'
-
-type SizeType =
-    | 'span01'
-    | 'body01'
-    | 'body02'
-    | 'heading01'
-    | 'heading02'
-    | 'heading03'
-    | 'heading04'
-
-type TagType =
-    | 'h1'
-    | 'h2'
-    | 'h3'
-    | 'h4'
-    | 'h5'
-    | 'h6'
-    | 'p'
-    | 'span'
-    | 'label'
-    | 'small'
-    | 'b'
-    | 'i'
-    | 'em'
-    | 'td'
-    | 'div'
-    | 'a'
-
-export interface TextProps {
-    align?: AlignType
-    children?: ReactNode
-    color?: colorType
-    isTitle?: boolean
-    tag?: TagType
-    size?: SizeType
-    weight?: string
-    className?: string
-}
+import { colorType } from 'types'
+import { ReactNode } from 'react'
+
+type AlignType = 'left' | 'center' | 'right' | 'justify'
+
+type SizeType =
+    | 'span01'
+    | 'body01'
+    | 'body02'
+    | 'heading01'
+    | 'heading02'
+    | 'heading03'
+    | 'heading04'
+
+type TagType =
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'p'
+    | 'span'
+    | 'label'
+    | 'small'
+    | 'b'
+    | 'i'
+    | 'em'
+    | 'td'
+    | 'div'
+    | 'a'
+
+export interface TextProps {
+    align?: AlignType
+    children?: ReactNode
+    color?: colorType
+    isTitle?: boolean
+    tag?: TagType
+    size?: SizeType
+    weight?: string
+    className?: string
+}

package/components/Text/index.ts

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