@liguelead/design-system 0.0.6 → 0.0.8

package/components/SegmentedButton/SegmentedButton.tsx

@@ -0,0 +1,49 @@
+import { SegmentedButtonProps } from './SegmentedButton.types'
+import {
+    LeftButton,
+    RightButton,
+    WrapperSegmentedButton
+} from './SegmentedButton.styles'
+import { useState } from 'react'
+
+const SegmentedButton: React.FC<SegmentedButtonProps> = ({
+    options,
+    disabled = false,
+    color = 'primary',
+    size = 'md',
+    ...rest
+}) => {
+    const { leftButton, rightButton } = options
+    const [selected, setSelected] = useState<string>('left')
+
+    return (
+        <WrapperSegmentedButton {...rest}>
+            <LeftButton
+                color={color}
+                disabled={disabled}
+                appearance={selected === 'left' ? 'solid' : 'outline'}
+                size={size}
+                onClick={() => {
+                    setSelected('left')
+                    leftButton.action?.()
+                }}
+                type="button">
+                {leftButton.label}
+            </LeftButton>
+            <RightButton
+                color={color}
+                appearance={selected === 'right' ? 'solid' : 'outline'}
+                disabled={disabled}
+                onClick={() => {
+                    setSelected('right')
+                    rightButton.action?.()
+                }}
+                size={size}
+                type="button">
+                {rightButton.label}
+            </RightButton>
+        </WrapperSegmentedButton>
+    )
+}
+
+export default SegmentedButton

package/components/SegmentedButton/SegmentedButton.types.ts

@@ -0,0 +1,20 @@
+import { colorType } from 'types'
+type SegmentedButtonType = {
+    label: string
+    action?: () => void
+}
+
+interface SegmentedButtons {
+    leftButton: SegmentedButtonType
+    rightButton: SegmentedButtonType
+}
+
+export interface SegmentedButtonProps {
+    className?: string
+    options: SegmentedButtons
+    disabled?: boolean
+    color?: colorType
+    size?: SegmentedButtonSizeTypes
+}
+
+export type SegmentedButtonSizeTypes = 'sm' | 'md' | 'lg'

package/components/SegmentedButton/index.ts

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

package/components/Select/Select.sizes.ts

@@ -0,0 +1,56 @@
+import { fontSize, lineHeight, spacing } from '@liguelead/foundation'
+import { TextFieldSize } from './Select.types'
+
+export const textFieldSizes = (
+    size: TextFieldSize,
+    leftIcon: boolean,
+    rightIcon: boolean
+) => {
+    const withIconMargin = Number(spacing.spacing8) + 20
+    const withIconPadding = {
+        sm: Number(spacing.spacing12) + Number(withIconMargin),
+        md: Number(spacing.spacing16) + Number(withIconMargin),
+        lg: Number(spacing.spacing16) + Number(withIconMargin)
+    }
+
+    const sizes = {
+        sm: {
+            input: `
+        font-size: ${fontSize.fontSize14}px;    
+        line-height: ${lineHeight.lineHeight22}px;    
+        padding: ${spacing.spacing8}px ${spacing.spacing12}px;
+        padding-left: ${leftIcon ? withIconPadding.sm : spacing.spacing12}px;
+        padding-right: ${rightIcon ? withIconPadding.sm : spacing.spacing12}px;
+      `,
+            label: `font-size: ${fontSize.fontSize14}px;
+              margin-left: ${leftIcon ? withIconMargin : 0}px;
+              margin-right: ${rightIcon ? withIconMargin : 0}px;`
+        },
+        md: {
+            input: `
+      font-size: ${fontSize.fontSize14}px;
+      line-height: ${lineHeight.lineHeight20}px;
+      padding: ${spacing.spacing12}px ${spacing.spacing16}px;
+      padding-left: ${leftIcon ? withIconPadding.md : spacing.spacing16}px;
+      padding-right: ${rightIcon ? withIconPadding.md : spacing.spacing16}px;
+    `,
+            label: `font-size: ${fontSize.fontSize14}px;
+            margin-left: ${leftIcon ? withIconMargin : 0}px;
+            margin-right: ${rightIcon ? withIconMargin : 0}px;`
+        },
+        lg: {
+            input: `
+      font-size: ${fontSize.fontSize16}px;
+      line-height: ${lineHeight.lineHeight24}px;
+      padding: ${spacing.spacing12}px ${spacing.spacing16}px;
+      padding-left: ${leftIcon ? withIconPadding.lg : spacing.spacing16}px;
+      padding-right: ${rightIcon ? withIconPadding.lg : spacing.spacing16}px;
+    `,
+            label: `font-size: ${fontSize.fontSize16}px;
+            margin-left: ${leftIcon ? withIconMargin : 0}px;
+            margin-right: ${rightIcon ? withIconMargin : 0}px;`
+        }
+    }
+
+    return sizes[size]
+}

package/components/Select/Select.states.tsx

@@ -0,0 +1,69 @@
+import { parseColor } from '../../utils'
+import { useTheme } from 'styled-components'
+import { fontWeight, fontSize } from '@liguelead/foundation'
+import { TextFieldStates } from './Select.types'
+
+export const SelectStates = (state: keyof TextFieldStates) => {
+    const theme = useTheme()
+    const states: TextFieldStates = {
+        error: {
+            input: `
+                border: 1px solid ${parseColor(theme.colors.danger100)};
+                color: ${parseColor(theme.colors.neutral1000)};
+                &:focus {
+                    border-color: ${parseColor(theme.colors.danger100)};
+                }
+                &:focus + label {
+                    color: ${parseColor(theme.colors.danger100)};
+                }
+            `,
+            label: `color: ${parseColor(theme.colors.danger100)};`,
+            helperText: `color: ${parseColor(theme.colors.danger100)};`,
+            animation: `
+                &:focus div + label,
+                &:not(:placeholder-shown) + label {
+                    top: 0px;
+                    left: 12px;
+                    font-size: ${fontSize.fontSize12}px;
+                }`
+        },
+        default: {
+            input: `
+                border: 1px solid ${parseColor(theme.colors.neutral700)};
+                color: ${parseColor(theme.colors.neutral1000)};
+             
+                &:focus {
+                    border-color: ${parseColor(theme.colors.primary)};
+                }
+                &:focus label,
+                &:focus-within label {
+                    color: ${parseColor(theme.colors.primary)} !important;
+                    font-weight: ${fontWeight.fontWeight600};
+                    .select-label {
+                        color: ${parseColor(theme.colors.primary)};
+                    }
+                }
+            `,
+            label: `color: ${parseColor(theme.colors.neutral800)};`,
+            helperText: `color: ${parseColor(theme.colors.neutral700)};`,
+            animation: `
+                &:focus + label,
+                &:not(:placeholder-shown) + label {
+                    top: 0px;
+                    left: 12px;
+                    font-size: ${fontSize.fontSize12}px;
+                }`
+        },
+        disabled: {
+            input: `
+                border: 2px solid ${parseColor(theme.colors.neutral500)};
+                color: ${parseColor(theme.colors.neutral600)};
+            `,
+            label: `color: ${parseColor(theme.colors.neutral500)};
+                    background: transparent;`,
+            helperText: `color: ${parseColor(theme.colors.neutral500)};`,
+            animation: ``
+        }
+    }
+    return states[state]
+}

package/components/Select/Select.styles.ts

@@ -0,0 +1,148 @@
+import styled from 'styled-components'
+import { TextFieldSizeType, StateInterface } from './Select.types'
+import {
+    fontSize,
+    fontWeight,
+    lineHeight,
+    spacing
+} from '@liguelead/foundation'
+import { parseColor } from '../../utils'
+import { Content, Item } from '@radix-ui/react-select'
+
+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;
+    &.is-open {
+        color: ${({ theme }) => parseColor(theme.colors.primary)} !important;
+    }
+`
+
+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; $error?: 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, $error }) =>
+            $error
+                ? parseColor(theme.colors.danger100)
+                : parseColor(theme.colors.neutral700)};
+        transition: fill 0.2s ease;
+    }
+`
+
+export const StyledContent = styled(Content)`
+    padding: 0px;
+    background-color: #fff;
+    min-width: var(--radix-select-trigger-width, auto);
+    width: 100%;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    border: 1px solid ${({ theme }) => parseColor(theme.colors.neutral500)};
+    border-top: 0px;
+    max-height: var(--radix-select-content-height, 314px);
+    overflow-y: scroll !important;
+    z-index: 10;
+    & .RadixSelectViewport {
+        max-height: 200px; /* Limite de altura do dropdown */
+        overflow-y: auto; /* Adiciona o scroll quando necessário */
+        scrollbar-width: thin; /* Personaliza a largura do scroll (opcional) */
+    }
+`
+
+export const StyledItem = styled(Item)`
+    padding: ${spacing.spacing12}px ${spacing.spacing20}px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    transition: all 0.2s ease;
+    cursor: pointer;
+    &:hover {
+        background-color: ${({ theme }) => parseColor(theme.colors.neutral200)};
+    }
+    &[data-state='checked'] {
+        background-color: ${({ theme }) =>
+            parseColor(theme.colors.primaryLight)};
+    }
+`
+
+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;
+    &.is-open {
+        border-color: ${({ theme }) =>
+            parseColor(theme.colors.primary)} !important;
+    }
+`
+
+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%;
+    cursor: pointer;
+    ${({ $themefication, size }) => `
+            ${StyledInput} {
+                ${$themefication.animation}
+                ${$themefication.input}
+                ${size.input}
+            }
+            ${FloatingLabel} {
+                ${$themefication.label}
+                ${size.label}
+            }
+            ${HelperText} {
+                ${$themefication.label} 
+            }
+        `}
+`

package/components/Select/Select.tsx

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

package/components/Select/Select.types.ts

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

package/components/Select/index.ts

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

package/components/Text/Text.styles.ts

@@ -1,12 +1,12 @@
-import {parseColor} from '../../utils'
-import styled, {css} from 'styled-components'
+import { parseColor } from '../../utils'
+import styled, { css } from 'styled-components'
 import {
     fontSize,
     fontWeight,
     lineHeight,
     fontFamily
 } from '@liguelead/foundation'
-import {TextProps} from './Text'
+import { TextProps } from './Text.types'
 
 type BodyProps = Omit<TextProps, 'tag'>
 
@@ -21,7 +21,7 @@ const Body = styled.p.withConfig({
     ${({
         align = 'left',
         color = 'neutral800',
-        isTitle = false,
+        isTitle,
         theme,
         size = 'body01'
     }) => css`
@@ -40,4 +40,4 @@ const Body = styled.p.withConfig({
     `}
 `
 
-export {Body}
+export { Body }

package/components/Text/Text.tsx

@@ -1,57 +1,19 @@
 import React from 'react'
-import {Body} from './Text.styles'
-import {colorType} from 'types'
-
-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?: React.ReactNode
-    color?: colorType
-    isTitle?: boolean
-    tag?: TagType
-    size?: SizeType
-    weight?: string
-    className?: string
-}
+import { Body } from './Text.styles'
+import { TextProps } from './Text.types'
 
 const Text: React.FC<TextProps> = ({
     align,
     children,
     color = 'neutral1000',
-    isTitle,
+    isTitle = false,
     tag = 'p',
     size,
     ...rest
 }) => {
     return (
         <Body
-            as={tag}
+            as={isTitle ? 'h2' : tag}
             align={align}
             color={color}
             size={size}

package/components/Text/Text.types.ts

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