From 046f039060aeab8c607ea8681109e9adc0db3858 Mon Sep 17 00:00:00 2001 From: ghdtjgus76 Date: Wed, 5 Jun 2024 11:57:13 +0900 Subject: [PATCH 01/26] =?UTF-8?q?feat:=20TextField=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../wow-ui/src/components/TextField/index.tsx | 332 ++++++++++++++++++ packages/wow-ui/src/hooks/.gitkeep | 0 .../wow-ui/src/hooks/useTextareaAutosize.ts | 27 ++ 3 files changed, 359 insertions(+) create mode 100644 packages/wow-ui/src/components/TextField/index.tsx delete mode 100644 packages/wow-ui/src/hooks/.gitkeep create mode 100644 packages/wow-ui/src/hooks/useTextareaAutosize.ts diff --git a/packages/wow-ui/src/components/TextField/index.tsx b/packages/wow-ui/src/components/TextField/index.tsx new file mode 100644 index 00000000..dbac3bb0 --- /dev/null +++ b/packages/wow-ui/src/components/TextField/index.tsx @@ -0,0 +1,332 @@ +"use client"; + +import { cva } from "@styled-system/css"; +import { Flex, styled } from "@styled-system/jsx"; +import type { + ChangeEvent, + CSSProperties, + FocusEvent, + ReactNode, + RefObject, + TextareaHTMLAttributes, +} from "react"; +import { forwardRef, useId, useLayoutEffect, useRef, useState } from "react"; + +import { useTextareaAutosize } from "@/hooks/useTextareaAutosize"; + +type VariantType = "default" | "typing" | "typed" | "success" | "error"; + +/** + * @description 사용자가 텍스트를 입력할 수 있는 텍스트필드 컴포넌트입니다. + * + * @param {string} label 텍스트 필드의 라벨. + * @param {string} [placeholder] 텍스트 필드의 플레이스홀더 텍스트. + * @param {string} [defaultValue] 텍스트 필드의 기본 값. + * @param {string} [value] 외부에서 제어할 활성 상태. + * @param {number} [maxLength] 텍스트 필드의 최대 입력 길이. + * @param {boolean} [error] 오류 상태 여부. + * @param {boolean} [success] 성공 상태 여부. + * @param {ReactNode} [helperText] 텍스트 필드 아래 추가적인 텍스트. + * @param {(value: string) => void} [onChange] 외부 활성 상태가 변경될 때 호출될 콜백 함수. + * @param {() => void} [onBlur] 텍스트 필드가 포커스를 잃을 때 호출될 콜백 함수. + * @param {() => void} [onFocus] 텍스트 필드가 포커스됐을 때 호출될 콜백 함수. + * @param {TextareaHTMLAttributes} [textareaProps] 추가 textarea 속성. + * @param {CSSProperties} [style] 텍스트 필드의 커스텀 스타일. + * @param {string} [className] 텍스트 필드에 전달하는 커스텀 클래스. + * @param {ComponentPropsWithoutRef} rest 렌더링된 요소 또는 컴포넌트에 전달할 추가 props. + * @param {ComponentPropsWithRef["ref"]} ref 렌더링된 요소 또는 컴포넌트에 연결할 ref. + */ +export interface TextFieldProps { + label: string; + placeholder?: string; + defaultValue?: string; + value?: string; + maxLength?: number; + error?: boolean; + success?: boolean; + helperText?: ReactNode; + onChange?: (value: string) => void; + onBlur?: () => void; + onFocus?: () => void; + textareaProps?: TextareaHTMLAttributes; + style?: CSSProperties; + className?: string; +} + +const TextField = forwardRef( + ( + { + helperText, + label, + onBlur, + onChange, + onFocus, + placeholder = "", + defaultValue, + value: valueProp, + maxLength, + error = false, + success = false, + textareaProps, + ...rest + }, + ref + ) => { + const id = useId(); + const textareaId = textareaProps?.id || id; + const errorMessageId = `${textareaId}-error-message`; + const helperTextId = `${textareaId}-helper-text`; + + const textareaRef = useRef(null); + const textareaElementRef = ref || textareaRef; + + const [value, setValue] = useState(() => valueProp ?? defaultValue ?? ""); + const [variant, setVariant] = useState("default"); + + useLayoutEffect(() => { + if (success) { + setVariant("success"); + } else if (error) { + setVariant("error"); + } + }, [error, success]); + + useTextareaAutosize(textareaElementRef as RefObject); + + const handleChange = (e: ChangeEvent) => { + const textareaValue = e.target.value; + setVariant("typing"); + + if (maxLength && textareaValue.length > maxLength) { + e.target.value = textareaValue.slice(0, maxLength); + } else { + setValue(textareaValue); + onChange?.(textareaValue); + } + }; + + const handleBlur = (e: FocusEvent) => { + const inputValue = e.target.value; + + if (variant !== "success" && variant !== "error") { + setVariant(inputValue ? "typed" : "default"); + } + onBlur?.(); + }; + + const handleFocus = () => { + onFocus?.(); + }; + + return ( + + + + {maxLength && ( + + )} + + + {helperText && {helperText}} + + ); + } +); + +TextField.displayName = "TextField"; +export default TextField; + +const Label = ({ + variant, + children, + textareaId, +}: { + variant: VariantType; + children: string; + textareaId: string; +}) => ( + + {children} + +); + +const TextLength = ({ + variant, + maxLength, + length, +}: { + variant: VariantType; + maxLength: number; + length: number; +}) => ( + + {length}/{maxLength} + +); + +const HelperText = ({ + variant, + children, +}: { + variant: VariantType; + children: ReactNode; +}) => ( + + {children} + +); + +const containerStyle = cva({ + base: { + "@media (min-width: 1280px)": { + minWidth: "19.75rem", + maxWidth: "40.75rem", + }, + "@media (max-width: 430px)": { + width: "100%", + }, + }, +}); + +const labelStyle = cva({ + base: { + textStyle: "label2", + }, + variants: { + type: { + default: { + color: "sub", + }, + focused: { + color: "textBlack", + }, + }, + }, +}); + +const textLengthStyle = cva({ + base: { + textStyle: "label3", + }, + variants: { + type: { + default: { + color: "sub", + }, + typing: { + color: "primary", + }, + typed: { + color: "sub", + }, + success: { + color: "success", + }, + error: { + color: "error", + }, + }, + }, +}); + +const textareaStyle = cva({ + base: { + borderRadius: "sm", + borderWidth: "button", + paddingX: "sm", + paddingY: "xs", + textStyle: "body1", + height: "2.625rem", + maxHeight: "7.5rem", + overflowY: "hidden", + resize: "none", + _placeholder: { + color: "sub", + }, + _focus: { + outline: "none", + }, + _scrollbar: { + width: "2px", + }, + _scrollbarThumb: { + width: "2px", + height: "65px", + borderRadius: "sm", + backgroundColor: "outline", + }, + _scrollbarTrack: { + marginTop: "2px", + marginBottom: "2px", + }, + }, + variants: { + type: { + default: { + borderColor: "outline", + color: "sub", + }, + typing: { + borderColor: "primary", + color: "textBlack", + }, + typed: { + borderColor: "sub", + color: "textBlack", + }, + success: { + borderColor: "success", + color: "textBlack", + }, + error: { + borderColor: "error", + color: "textBlack", + }, + }, + }, +}); + +const helperTextStyle = cva({ + base: { + textStyle: "body3", + }, + variants: { + type: { + default: { color: "sub" }, + typing: { color: "sub" }, + typed: { color: "sub" }, + success: { color: "success" }, + error: { color: "error" }, + }, + }, +}); diff --git a/packages/wow-ui/src/hooks/.gitkeep b/packages/wow-ui/src/hooks/.gitkeep deleted file mode 100644 index e69de29b..00000000 diff --git a/packages/wow-ui/src/hooks/useTextareaAutosize.ts b/packages/wow-ui/src/hooks/useTextareaAutosize.ts new file mode 100644 index 00000000..95b3a9ce --- /dev/null +++ b/packages/wow-ui/src/hooks/useTextareaAutosize.ts @@ -0,0 +1,27 @@ +import type { RefObject } from "react"; +import { useEffect } from "react"; + +export const useTextareaAutosize = (ref: RefObject) => { + useEffect(() => { + const textareaElement = ref.current; + if (!textareaElement) return; + + const handleResize = () => { + textareaElement.style.height = "auto"; + textareaElement.style.height = `${textareaElement.scrollHeight}px`; + }; + + const handleOverflow = () => { + textareaElement.style.overflowY = + textareaElement.scrollHeight > 120 ? "scroll" : "hidden"; + }; + + textareaElement.addEventListener("input", handleResize); + textareaElement.addEventListener("input", handleOverflow); + + return () => { + textareaElement.removeEventListener("input", handleResize); + textareaElement.removeEventListener("input", handleOverflow); + }; + }, [ref]); +}; From 769b00e4ebb6b1bc04ad0af8323a09dbe28bfdee Mon Sep 17 00:00:00 2001 From: ghdtjgus76 Date: Wed, 5 Jun 2024 12:25:46 +0900 Subject: [PATCH 02/26] =?UTF-8?q?chore:=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=ED=95=84=EB=93=9C=20=EC=9E=90=EC=9E=98=ED=95=9C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=EC=82=AC=ED=95=AD=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/src/components/TextField/index.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/wow-ui/src/components/TextField/index.tsx b/packages/wow-ui/src/components/TextField/index.tsx index dbac3bb0..42d13b2f 100644 --- a/packages/wow-ui/src/components/TextField/index.tsx +++ b/packages/wow-ui/src/components/TextField/index.tsx @@ -24,15 +24,15 @@ type VariantType = "default" | "typing" | "typed" | "success" | "error"; * @param {string} [defaultValue] 텍스트 필드의 기본 값. * @param {string} [value] 외부에서 제어할 활성 상태. * @param {number} [maxLength] 텍스트 필드의 최대 입력 길이. - * @param {boolean} [error] 오류 상태 여부. - * @param {boolean} [success] 성공 상태 여부. + * @param {boolean} [error] 텍스트 필드의 오류 상태 여부. + * @param {boolean} [success] 텍스트 필드의 성공 상태 여부. * @param {ReactNode} [helperText] 텍스트 필드 아래 추가적인 텍스트. * @param {(value: string) => void} [onChange] 외부 활성 상태가 변경될 때 호출될 콜백 함수. * @param {() => void} [onBlur] 텍스트 필드가 포커스를 잃을 때 호출될 콜백 함수. * @param {() => void} [onFocus] 텍스트 필드가 포커스됐을 때 호출될 콜백 함수. - * @param {TextareaHTMLAttributes} [textareaProps] 추가 textarea 속성. - * @param {CSSProperties} [style] 텍스트 필드의 커스텀 스타일. - * @param {string} [className] 텍스트 필드에 전달하는 커스텀 클래스. + * @param {TextareaHTMLAttributes} [textareaProps] 텍스트 필드에 전달할 추가 textarea 속성. + * @param {CSSProperties} [style] 텍스트 필드의 커스텀 스타일 속성. + * @param {string} [className] 텍스트 필드에 전달하는 커스텀 클래스명. * @param {ComponentPropsWithoutRef} rest 렌더링된 요소 또는 컴포넌트에 전달할 추가 props. * @param {ComponentPropsWithRef["ref"]} ref 렌더링된 요소 또는 컴포넌트에 연결할 ref. */ @@ -80,7 +80,7 @@ const TextField = forwardRef( const textareaRef = useRef(null); const textareaElementRef = ref || textareaRef; - const [value, setValue] = useState(() => valueProp ?? defaultValue ?? ""); + const [value, setValue] = useState(valueProp ?? defaultValue ?? ""); const [variant, setVariant] = useState("default"); useLayoutEffect(() => { @@ -141,6 +141,7 @@ const TextField = forwardRef( placeholder={placeholder} ref={textareaElementRef} rows={1} + value={value} onBlur={handleBlur} onChange={handleChange} onFocus={handleFocus} From 66518776a40e8f1da9a684a0e92bb592cbef1b95 Mon Sep 17 00:00:00 2001 From: ghdtjgus76 Date: Wed, 5 Jun 2024 12:27:11 +0900 Subject: [PATCH 03/26] =?UTF-8?q?feat:=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=ED=95=84=EB=93=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EC=8A=A4=ED=86=A0=EB=A6=AC=20=EC=BD=94=EB=93=9C=20=EC=9E=91?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TextField/TextField.stories.tsx | 240 ++++++++++++++++++ .../wow-ui/src/components/TextField/index.tsx | 24 +- 2 files changed, 252 insertions(+), 12 deletions(-) create mode 100644 packages/wow-ui/src/components/TextField/TextField.stories.tsx diff --git a/packages/wow-ui/src/components/TextField/TextField.stories.tsx b/packages/wow-ui/src/components/TextField/TextField.stories.tsx new file mode 100644 index 00000000..a48841f6 --- /dev/null +++ b/packages/wow-ui/src/components/TextField/TextField.stories.tsx @@ -0,0 +1,240 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { useState } from "react"; + +import TextField from "@/components/TextField"; + +const meta = { + title: "UI/TextField", + component: TextField, + tags: ["autodocs"], + parameters: { + componentSubtitle: "텍스트필드 컴포넌트", + }, + argTypes: { + label: { + description: "텍스트필드의 라벨입니다.", + table: { + type: { summary: "string" }, + defaultValue: { summary: null }, + }, + control: { + type: "text", + }, + type: { + name: "string", + required: true, + }, + }, + placeholder: { + description: "텍스트필드의 플레이스홀더 텍스트입니다.", + table: { + type: { summary: "string" }, + defaultValue: { summary: null }, + }, + control: { + type: "text", + }, + }, + defaultValue: { + description: "텍스트필드의 기본 값입니다.", + table: { + type: { summary: "string" }, + defaultValue: { summary: null }, + }, + control: { + type: "text", + }, + }, + value: { + description: "외부에서 제어할 활성 상태입니다.", + table: { + type: { summary: "string" }, + defaultValue: { summary: null }, + }, + control: { + type: "text", + }, + }, + maxLength: { + description: "텍스트필드의 최대 입력 길이입니다.", + table: { + type: { summary: "number" }, + defaultValue: { summary: null }, + }, + control: { + type: "number", + }, + }, + error: { + description: "텍스트필드의 오류 상태 여부입니다.", + table: { + type: { summary: "boolean" }, + defaultValue: { summary: false }, + }, + control: { + type: "boolean", + }, + }, + success: { + description: "텍스트필드의 성공 상태 여부입니다.", + table: { + type: { summary: "boolean" }, + defaultValue: { summary: false }, + }, + control: { + type: "boolean", + }, + }, + helperText: { + description: "텍스트필드 아래 추가적인 텍스트입니다.", + table: { + type: { summary: "ReactNode" }, + defaultValue: { summary: null }, + }, + control: { + type: "text", + }, + }, + onChange: { + description: "외부 활성 상태가 변경될 때 호출될 콜백 함수입니다.", + table: { + type: { summary: "(value: string) => void" }, + defaultValue: { summary: null }, + control: { + type: "function", + }, + }, + }, + onBlur: { + description: "텍스트필드가 포커스를 잃을 때 호출될 콜백 함수입니다.", + table: { + type: { summary: "() => void" }, + defaultValue: { summary: null }, + control: { + type: "function", + }, + }, + }, + onFocus: { + description: "텍스트필드가 포커스됐을 때 호출될 콜백 함수입니다.", + table: { + type: { summary: "() => void" }, + defaultValue: { summary: null }, + control: { + type: "function", + }, + }, + }, + textareaProps: { + description: "텍스트필드에 전달할 추가 textarea 속성입니다.", + table: { + type: { summary: "TextareaHTMLAttributes" }, + defaultValue: { summary: null }, + control: { + type: "object", + }, + }, + }, + style: { + description: "텍스트필드의 커스텀 스타일 속성입니다.", + table: { + type: { summary: "CSSProperties" }, + defaultValue: { summary: null }, + control: { + type: "object", + }, + }, + }, + className: { + description: "텍스트필드에 전달하는 커스텀 클래스명입니다.", + table: { + type: { summary: "string" }, + defaultValue: { summary: null }, + control: { + type: "text", + }, + }, + }, + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Primary: Story = { + args: { + label: "Label", + }, +}; + +export const WithMaxLength: Story = { + args: { + label: "Label", + maxLength: 10, + }, +}; + +export const WithPlaceholder: Story = { + args: { + label: "Label", + placeholder: "Placeholder", + }, +}; + +export const WithDefaultValue: Story = { + args: { + label: "Label", + defaultValue: "Text", + }, +}; + +export const WithHelperText: Story = { + args: { + label: "Label", + helperText: "*Caption", + }, +}; + +export const WithMaxLengthAndHelperText: Story = { + args: { + label: "Label", + maxLength: 100, + helperText: "*Caption", + }, +}; + +export const Success: Story = { + args: { + label: "Label", + maxLength: 100, + helperText: "*Caption", + success: true, + }, +}; + +export const Error: Story = { + args: { + label: "Label", + maxLength: 100, + helperText: "*Caption", + error: true, + }, +}; + +const ControlledTextField = () => { + const [value, setValue] = useState(""); + + const handleChange = (value: string) => { + setValue(value); + }; + + return ; +}; + +export const ControlledState: Story = { + render: () => , + args: { + label: "Label", + }, +}; diff --git a/packages/wow-ui/src/components/TextField/index.tsx b/packages/wow-ui/src/components/TextField/index.tsx index 42d13b2f..0710b81f 100644 --- a/packages/wow-ui/src/components/TextField/index.tsx +++ b/packages/wow-ui/src/components/TextField/index.tsx @@ -19,20 +19,20 @@ type VariantType = "default" | "typing" | "typed" | "success" | "error"; /** * @description 사용자가 텍스트를 입력할 수 있는 텍스트필드 컴포넌트입니다. * - * @param {string} label 텍스트 필드의 라벨. - * @param {string} [placeholder] 텍스트 필드의 플레이스홀더 텍스트. - * @param {string} [defaultValue] 텍스트 필드의 기본 값. + * @param {string} label 텍스트필드의 라벨. + * @param {string} [placeholder] 텍스트필드의 플레이스홀더 텍스트. + * @param {string} [defaultValue] 텍스트필드의 기본 값. * @param {string} [value] 외부에서 제어할 활성 상태. - * @param {number} [maxLength] 텍스트 필드의 최대 입력 길이. - * @param {boolean} [error] 텍스트 필드의 오류 상태 여부. - * @param {boolean} [success] 텍스트 필드의 성공 상태 여부. - * @param {ReactNode} [helperText] 텍스트 필드 아래 추가적인 텍스트. + * @param {number} [maxLength] 텍스트필드의 최대 입력 길이. + * @param {boolean} [error] 텍스트필드의 오류 상태 여부. + * @param {boolean} [success] 텍스트필드의 성공 상태 여부. + * @param {ReactNode} [helperText] 텍스트필드 아래 추가적인 텍스트. * @param {(value: string) => void} [onChange] 외부 활성 상태가 변경될 때 호출될 콜백 함수. - * @param {() => void} [onBlur] 텍스트 필드가 포커스를 잃을 때 호출될 콜백 함수. - * @param {() => void} [onFocus] 텍스트 필드가 포커스됐을 때 호출될 콜백 함수. - * @param {TextareaHTMLAttributes} [textareaProps] 텍스트 필드에 전달할 추가 textarea 속성. - * @param {CSSProperties} [style] 텍스트 필드의 커스텀 스타일 속성. - * @param {string} [className] 텍스트 필드에 전달하는 커스텀 클래스명. + * @param {() => void} [onBlur] 텍스트필드가 포커스를 잃을 때 호출될 콜백 함수. + * @param {() => void} [onFocus] 텍스트필드가 포커스됐을 때 호출될 콜백 함수. + * @param {TextareaHTMLAttributes} [textareaProps] 텍스트필드에 전달할 추가 textarea 속성. + * @param {CSSProperties} [style] 텍스트필드의 커스텀 스타일 속성. + * @param {string} [className] 텍스트필드에 전달하는 커스텀 클래스명. * @param {ComponentPropsWithoutRef} rest 렌더링된 요소 또는 컴포넌트에 전달할 추가 props. * @param {ComponentPropsWithRef["ref"]} ref 렌더링된 요소 또는 컴포넌트에 연결할 ref. */ From e1af0ed8371917b6689f2687cfe903f5b7439666 Mon Sep 17 00:00:00 2001 From: ghdtjgus76 Date: Wed, 5 Jun 2024 14:51:18 +0900 Subject: [PATCH 04/26] =?UTF-8?q?fix:=20max=20length=20=EA=B4=80=EB=A0=A8?= =?UTF-8?q?=20onChange=20=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/src/components/TextField/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/wow-ui/src/components/TextField/index.tsx b/packages/wow-ui/src/components/TextField/index.tsx index 0710b81f..7ea84bd7 100644 --- a/packages/wow-ui/src/components/TextField/index.tsx +++ b/packages/wow-ui/src/components/TextField/index.tsx @@ -98,7 +98,7 @@ const TextField = forwardRef( setVariant("typing"); if (maxLength && textareaValue.length > maxLength) { - e.target.value = textareaValue.slice(0, maxLength); + setValue(textareaValue.slice(0, maxLength)); } else { setValue(textareaValue); onChange?.(textareaValue); From cc5d84ec3b56c4759f2ae23553811c084cc76afa Mon Sep 17 00:00:00 2001 From: ghdtjgus76 Date: Wed, 5 Jun 2024 15:45:22 +0900 Subject: [PATCH 05/26] =?UTF-8?q?test:=20=ED=85=8D=EC=8A=A4=ED=8A=B8?= =?UTF-8?q?=ED=95=84=EB=93=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=ED=85=8C=EC=8A=A4=ED=8A=B8=20=EC=BD=94=EB=93=9C=20=EC=9E=91?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/TextField/TextField.test.tsx | 157 ++++++++++++++++++ 1 file changed, 157 insertions(+) create mode 100644 packages/wow-ui/src/components/TextField/TextField.test.tsx diff --git a/packages/wow-ui/src/components/TextField/TextField.test.tsx b/packages/wow-ui/src/components/TextField/TextField.test.tsx new file mode 100644 index 00000000..abdc2035 --- /dev/null +++ b/packages/wow-ui/src/components/TextField/TextField.test.tsx @@ -0,0 +1,157 @@ +import { fireEvent, render, waitFor } from "@testing-library/react"; +import { useState } from "react"; + +import TextField from "@/components/TextField"; + +describe("TextField component", () => { + it("should render label and placeholder", () => { + const { getByLabelText, getByPlaceholderText } = render( + + ); + const labelText = getByLabelText("Label"); + const placeholderText = getByPlaceholderText("Placeholder"); + + expect(labelText).toBeInTheDocument(); + expect(placeholderText).toBeInTheDocument(); + }); + + it("should render with default value", () => { + const { getByLabelText } = render( + + ); + const textField = getByLabelText("Label"); + + expect(textField).toHaveValue("textField"); + }); + + it("should render helperText", () => { + const { getByText } = render( + + ); + const helperText = getByText("HelperText"); + + expect(helperText).toBeInTheDocument(); + }); + + it("should handle max length correctly", async () => { + const { getByLabelText } = render( + + ); + const textField = getByLabelText("Label") as HTMLTextAreaElement; + + fireEvent.change(textField, { target: { value: "12345678910" } }); + + await waitFor(() => { + expect(textField.value).toHaveLength(5); + }); + }); + + it("should apply typing style while typing", async () => { + const { getByLabelText, getByText } = render(); + const textField = getByLabelText("Label"); + const label = getByText("Label"); + + fireEvent.change(textField, { target: { value: "12345" } }); + + await waitFor(() => { + expect(label).toHaveStyle("color: textBlack"); + expect(textField).toHaveStyle("borderColor: primary"); + expect(textField).toHaveStyle("color: textBlack"); + }); + }); + + it("should apply typed style after typing", async () => { + const { getByLabelText, getByText } = render(); + const textField = getByLabelText("Label"); + const label = getByText("Label"); + + fireEvent.change(textField, { target: { value: "12345" } }); + fireEvent.blur(textField); + + await waitFor(() => { + expect(label).toHaveStyle("color: textBlack"); + expect(textField).toHaveStyle("borderColor: sub"); + expect(textField).toHaveStyle("color: textBlack"); + }); + }); + + it("should apply success style if success is true", () => { + const { getByLabelText, getByText } = render( + + ); + const textField = getByLabelText("Label"); + const label = getByText("Label"); + + expect(label).toHaveStyle("color: textBlack"); + expect(textField).toHaveStyle("borderColor: success"); + expect(textField).toHaveStyle("color: textBlack"); + }); + + it("should apply error style if error is true", () => { + const { getByLabelText, getByText } = render( + + ); + const textField = getByLabelText("Label"); + const label = getByText("Label"); + + expect(label).toHaveStyle("color: textBlack"); + expect(textField).toHaveStyle("borderColor: error"); + expect(textField).toHaveStyle("color: textBlack"); + }); + + it("should display error message with proper aria-describedBy", () => { + const { getByLabelText } = render( + + ); + const textField = getByLabelText("Label"); + + expect(textField).toHaveAttribute( + "aria-describedby", + expect.stringContaining("error-message") + ); + }); + + it("should fire onFocus event when focused", () => { + const handleFocus = jest.fn(); + const { getByLabelText } = render( + + ); + const textField = getByLabelText("Label"); + + fireEvent.focus(textField); + + expect(handleFocus).toHaveBeenCalledTimes(1); + }); + + it("should fire onBlur event when focus is lost", () => { + const handleBlur = jest.fn(); + const { getByLabelText } = render( + + ); + const textField = getByLabelText("Label"); + + fireEvent.click(textField); + fireEvent.blur(textField); + + expect(handleBlur).toHaveBeenCalledTimes(1); + }); +}); + +describe("external control and events", () => { + it("should fire external onChange event", () => { + const Component = () => { + const [value, setValue] = useState("initial value"); + const handleChange = (newValue: string) => setValue(newValue); + + return ; + }; + const { getByLabelText } = render(); + const textField = getByLabelText("Label"); + + expect(textField).toHaveValue("initial value"); + + fireEvent.change(textField, { target: { value: "updated value" } }); + + expect(textField).toHaveValue("updated value"); + }); +}); From fe9e3627ca0bb2483cc4fd01c7ee03ba0ad4ed8f Mon Sep 17 00:00:00 2001 From: ghdtjgus76 Date: Fri, 7 Jun 2024 10:54:04 +0900 Subject: [PATCH 06/26] =?UTF-8?q?chore:=20=ED=86=A0=ED=81=B0=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-tokens/src/color.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/wow-tokens/src/color.ts b/packages/wow-tokens/src/color.ts index 4bf97d44..dbe30d4e 100644 --- a/packages/wow-tokens/src/color.ts +++ b/packages/wow-tokens/src/color.ts @@ -90,14 +90,14 @@ export const blackOpacity80 = "rgba(0, 0, 0, 0.8)"; // 시맨틱 토큰 export const primary = blue500; -export const success = green500; -export const error = red500; +export const success = green600; +export const error = red600; export const backgroundNormal = white; export const backgroundAlternative = mono50; export const backgroundDimmer = blackOpacity80; -export const sub = mono600; +export const sub = mono700; export const outline = mono400; export const textBlack = black; export const textWhite = white; From bcacf7234968877a4b37d6e71011d2f987a2a1d6 Mon Sep 17 00:00:00 2001 From: ghdtjgus76 Date: Fri, 7 Jun 2024 10:54:38 +0900 Subject: [PATCH 07/26] =?UTF-8?q?feat:=20TextField=20=EB=B9=8C=EB=93=9C=20?= =?UTF-8?q?=EC=84=B8=ED=8C=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/package.json | 5 +++++ packages/wow-ui/rollup.config.js | 1 + 2 files changed, 6 insertions(+) diff --git a/packages/wow-ui/package.json b/packages/wow-ui/package.json index 920f10dd..00290d49 100644 --- a/packages/wow-ui/package.json +++ b/packages/wow-ui/package.json @@ -39,6 +39,11 @@ "types": "./dist/Switch/index.d.ts", "require": "./dist/Switch.cjs", "import": "./dist/Switch.js" + }, + "./TextField": { + "types": "./dist/TextField/index.d.ts", + "require": "./dist/TextField.cjs", + "import": "./dist/TextField.js" } }, "keywords": [], diff --git a/packages/wow-ui/rollup.config.js b/packages/wow-ui/rollup.config.js index 04df3ac6..faf61a90 100644 --- a/packages/wow-ui/rollup.config.js +++ b/packages/wow-ui/rollup.config.js @@ -22,6 +22,7 @@ export default { Box: "./src/components/Box", Button: "./src/components/Button", Switch: "./src/components/Switch", + TextField: "./src/components/TextField", }, output: [ { From 212a2b8a6a2f53aef9c01e599f4f40314c3daa88 Mon Sep 17 00:00:00 2001 From: ghdtjgus76 Date: Fri, 7 Jun 2024 11:23:08 +0900 Subject: [PATCH 08/26] =?UTF-8?q?fix:=20a11y=20violation,=20incomplete=20?= =?UTF-8?q?=EC=82=AC=ED=95=AD=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/src/components/TextField/index.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/wow-ui/src/components/TextField/index.tsx b/packages/wow-ui/src/components/TextField/index.tsx index 7ea84bd7..a7af6bfb 100644 --- a/packages/wow-ui/src/components/TextField/index.tsx +++ b/packages/wow-ui/src/components/TextField/index.tsx @@ -76,6 +76,7 @@ const TextField = forwardRef( const textareaId = textareaProps?.id || id; const errorMessageId = `${textareaId}-error-message`; const helperTextId = `${textareaId}-helper-text`; + const descriptionId = error ? `${errorMessageId}` : `${helperTextId}`; const textareaRef = useRef(null); const textareaElementRef = ref || textareaRef; @@ -121,7 +122,7 @@ const TextField = forwardRef( return ( - Date: Fri, 7 Jun 2024 11:29:10 +0900 Subject: [PATCH 09/26] =?UTF-8?q?feat:=20=EB=B0=98=EC=9D=91=ED=98=95=20?= =?UTF-8?q?=EA=B4=80=EB=A0=A8=20breakpoint=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/theme/src/tokens/breakpoint.ts | 6 ++++++ packages/theme/src/tokens/index.ts | 2 ++ packages/wow-ui/panda.config.ts | 3 ++- 3 files changed, 10 insertions(+), 1 deletion(-) create mode 100644 packages/theme/src/tokens/breakpoint.ts diff --git a/packages/theme/src/tokens/breakpoint.ts b/packages/theme/src/tokens/breakpoint.ts new file mode 100644 index 00000000..e67cec0b --- /dev/null +++ b/packages/theme/src/tokens/breakpoint.ts @@ -0,0 +1,6 @@ +export const breakpoints = { + xs: "360px", + s: "600px", + m: "900px", + l: "1280px", +}; diff --git a/packages/theme/src/tokens/index.ts b/packages/theme/src/tokens/index.ts index 6f4d9c8f..55ddf098 100644 --- a/packages/theme/src/tokens/index.ts +++ b/packages/theme/src/tokens/index.ts @@ -1,5 +1,7 @@ +export * from "./breakpoint.ts"; export * from "./color.ts"; export * from "./typography.ts"; + import { defineTokens } from "@pandacss/dev"; import { colors, gradients } from "./color.ts"; diff --git a/packages/wow-ui/panda.config.ts b/packages/wow-ui/panda.config.ts index 94f87429..3dbc246d 100644 --- a/packages/wow-ui/panda.config.ts +++ b/packages/wow-ui/panda.config.ts @@ -1,5 +1,5 @@ import { defineConfig } from "@pandacss/dev"; -import { semanticTokens, textStyles, tokens } from "theme"; +import { semanticTokens, textStyles, tokens, breakpoints } from "theme"; import { removeUnusedCssVars, removeUnusedKeyframes } from "theme/utils"; export default defineConfig({ @@ -23,5 +23,6 @@ export default defineConfig({ tokens, textStyles, semanticTokens, + breakpoints, }, }); From 07d5ae2dc53b5725fcfc4423096d52b36db589be Mon Sep 17 00:00:00 2001 From: ghdtjgus76 Date: Fri, 7 Jun 2024 11:33:17 +0900 Subject: [PATCH 10/26] =?UTF-8?q?chore:=20token=EC=97=90=EC=84=9C=20breakp?= =?UTF-8?q?oint=20=EA=B0=80=EC=A0=B8=EC=98=A4=EB=8F=84=EB=A1=9D=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/theme/src/tokens/breakpoint.ts | 10 ++++++---- packages/wow-tokens/src/breakpoint.ts | 4 ++++ packages/wow-tokens/src/index.ts | 1 + 3 files changed, 11 insertions(+), 4 deletions(-) create mode 100644 packages/wow-tokens/src/breakpoint.ts diff --git a/packages/theme/src/tokens/breakpoint.ts b/packages/theme/src/tokens/breakpoint.ts index e67cec0b..69d044af 100644 --- a/packages/theme/src/tokens/breakpoint.ts +++ b/packages/theme/src/tokens/breakpoint.ts @@ -1,6 +1,8 @@ +import { breakpoint } from "wowds-tokens"; + export const breakpoints = { - xs: "360px", - s: "600px", - m: "900px", - l: "1280px", + xs: breakpoint.xs, + s: breakpoint.s, + m: breakpoint.m, + l: breakpoint.l, }; diff --git a/packages/wow-tokens/src/breakpoint.ts b/packages/wow-tokens/src/breakpoint.ts new file mode 100644 index 00000000..ba1fea2c --- /dev/null +++ b/packages/wow-tokens/src/breakpoint.ts @@ -0,0 +1,4 @@ +export const xs = "360px"; +export const s = "600px"; +export const m = "900px"; +export const l = "1280px"; diff --git a/packages/wow-tokens/src/index.ts b/packages/wow-tokens/src/index.ts index 430ffe95..2b62e05a 100644 --- a/packages/wow-tokens/src/index.ts +++ b/packages/wow-tokens/src/index.ts @@ -1,3 +1,4 @@ +export * as breakpoint from "./breakpoint.ts"; export * as color from "./color.ts"; export * as radius from "./radius.ts"; export * as space from "./space.ts"; From 46cf5656fada03d45f3ed08574cd333d94260d4d Mon Sep 17 00:00:00 2001 From: ghdtjgus76 Date: Fri, 7 Jun 2024 11:36:10 +0900 Subject: [PATCH 11/26] =?UTF-8?q?chore:=20label2=20=EC=9E=90=EA=B0=84=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=EC=82=AC=ED=95=AD=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-tokens/src/typography.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/wow-tokens/src/typography.ts b/packages/wow-tokens/src/typography.ts index 0ed14205..04a17c02 100644 --- a/packages/wow-tokens/src/typography.ts +++ b/packages/wow-tokens/src/typography.ts @@ -64,6 +64,7 @@ export const label2 = { fontSize: "0.875rem", lineHeight: "100%", fontWeight: 600, + letterSpacing: "-0.01rem", }; export const label3 = { From 7b70ad2b90c499aad672f2cc57a0578a2d612c65 Mon Sep 17 00:00:00 2001 From: ghdtjgus76 Date: Fri, 7 Jun 2024 12:09:12 +0900 Subject: [PATCH 12/26] =?UTF-8?q?chore:=20breakpoint=20=EB=84=A4=EC=9D=B4?= =?UTF-8?q?=EB=B0=8D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/theme/src/tokens/breakpoint.ts | 6 +++--- packages/wow-tokens/src/breakpoint.ts | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/theme/src/tokens/breakpoint.ts b/packages/theme/src/tokens/breakpoint.ts index 69d044af..4d348061 100644 --- a/packages/theme/src/tokens/breakpoint.ts +++ b/packages/theme/src/tokens/breakpoint.ts @@ -2,7 +2,7 @@ import { breakpoint } from "wowds-tokens"; export const breakpoints = { xs: breakpoint.xs, - s: breakpoint.s, - m: breakpoint.m, - l: breakpoint.l, + sm: breakpoint.sm, + md: breakpoint.md, + lg: breakpoint.lg, }; diff --git a/packages/wow-tokens/src/breakpoint.ts b/packages/wow-tokens/src/breakpoint.ts index ba1fea2c..dcfc17e2 100644 --- a/packages/wow-tokens/src/breakpoint.ts +++ b/packages/wow-tokens/src/breakpoint.ts @@ -1,4 +1,4 @@ export const xs = "360px"; -export const s = "600px"; -export const m = "900px"; -export const l = "1280px"; +export const sm = "600px"; +export const md = "900px"; +export const lg = "1280px"; From 9f0a3410291296b8d0c2d40e0e3fbc00e1268abc Mon Sep 17 00:00:00 2001 From: ghdtjgus76 Date: Fri, 7 Jun 2024 12:09:38 +0900 Subject: [PATCH 13/26] =?UTF-8?q?refactor:=20=ED=85=8D=EC=8A=A4=ED=8A=B8?= =?UTF-8?q?=ED=95=84=EB=93=9C=20=EB=B0=98=EC=9D=91=ED=98=95=20=ED=86=A0?= =?UTF-8?q?=ED=81=B0=20=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/src/components/TextField/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/wow-ui/src/components/TextField/index.tsx b/packages/wow-ui/src/components/TextField/index.tsx index a7af6bfb..2dba1c4d 100644 --- a/packages/wow-ui/src/components/TextField/index.tsx +++ b/packages/wow-ui/src/components/TextField/index.tsx @@ -210,11 +210,11 @@ const HelperText = ({ const containerStyle = cva({ base: { - "@media (min-width: 1280px)": { + lg: { minWidth: "19.75rem", maxWidth: "40.75rem", }, - "@media (max-width: 430px)": { + smDown: { width: "100%", }, }, From 8a172b6313106c866f1eb86846dd40194abdf50e Mon Sep 17 00:00:00 2001 From: ghdtjgus76 Date: Fri, 7 Jun 2024 12:15:18 +0900 Subject: [PATCH 14/26] =?UTF-8?q?chore:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20useEffect=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../wow-ui/src/hooks/useTextareaAutosize.ts | 35 +++++++++---------- 1 file changed, 16 insertions(+), 19 deletions(-) diff --git a/packages/wow-ui/src/hooks/useTextareaAutosize.ts b/packages/wow-ui/src/hooks/useTextareaAutosize.ts index 95b3a9ce..ace40a14 100644 --- a/packages/wow-ui/src/hooks/useTextareaAutosize.ts +++ b/packages/wow-ui/src/hooks/useTextareaAutosize.ts @@ -1,27 +1,24 @@ import type { RefObject } from "react"; -import { useEffect } from "react"; export const useTextareaAutosize = (ref: RefObject) => { - useEffect(() => { - const textareaElement = ref.current; - if (!textareaElement) return; + const textareaElement = ref.current; + if (!textareaElement) return; - const handleResize = () => { - textareaElement.style.height = "auto"; - textareaElement.style.height = `${textareaElement.scrollHeight}px`; - }; + const handleResize = () => { + textareaElement.style.height = "auto"; + textareaElement.style.height = `${textareaElement.scrollHeight}px`; + }; - const handleOverflow = () => { - textareaElement.style.overflowY = - textareaElement.scrollHeight > 120 ? "scroll" : "hidden"; - }; + const handleOverflow = () => { + textareaElement.style.overflowY = + textareaElement.scrollHeight > 120 ? "scroll" : "hidden"; + }; - textareaElement.addEventListener("input", handleResize); - textareaElement.addEventListener("input", handleOverflow); + textareaElement.addEventListener("input", handleResize); + textareaElement.addEventListener("input", handleOverflow); - return () => { - textareaElement.removeEventListener("input", handleResize); - textareaElement.removeEventListener("input", handleOverflow); - }; - }, [ref]); + return () => { + textareaElement.removeEventListener("input", handleResize); + textareaElement.removeEventListener("input", handleOverflow); + }; }; From 643006c63866ff8d073c852492ecc79564a4a754 Mon Sep 17 00:00:00 2001 From: ghdtjgus76 Date: Fri, 7 Jun 2024 12:16:49 +0900 Subject: [PATCH 15/26] =?UTF-8?q?chore:=20panda=20codegen=20=EC=8B=A4?= =?UTF-8?q?=ED=96=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/wow-docs/app/page.tsx | 2 - .../wow-ui/styled-system/css/conditions.js | 48 +- packages/wow-ui/styled-system/css/css.js | 56 +- .../wow-ui/styled-system/jsx/is-valid-prop.js | 2 +- packages/wow-ui/styled-system/tokens/index.js | 40 +- .../wow-ui/styled-system/tokens/tokens.d.ts | 13 +- .../styled-system/types/conditions.d.ts | 508 +++++++++--------- 7 files changed, 324 insertions(+), 345 deletions(-) diff --git a/apps/wow-docs/app/page.tsx b/apps/wow-docs/app/page.tsx index 2510e3f9..fcc15072 100644 --- a/apps/wow-docs/app/page.tsx +++ b/apps/wow-docs/app/page.tsx @@ -1,6 +1,5 @@ import { css } from "@styled-system/css/css"; import { UpArrow } from "wowds-icons"; -import Switch from "wowds-ui/Switch"; const Home = () => { return ( @@ -15,7 +14,6 @@ const Home = () => {

docs

- ); }; diff --git a/packages/wow-ui/styled-system/css/conditions.js b/packages/wow-ui/styled-system/css/conditions.js index 42b2cb8e..df6eed4e 100644 --- a/packages/wow-ui/styled-system/css/conditions.js +++ b/packages/wow-ui/styled-system/css/conditions.js @@ -1,34 +1,36 @@ -import { withoutSpace } from '../helpers.js'; +import { withoutSpace } from "../helpers.js"; -const conditionsStr = "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_default,_optional,_open,_closed,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_starting,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,2xlDown,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl,@/xs,@/sm,@/md,@/lg,@/xl,@/2xl,@/3xl,@/4xl,@/5xl,@/6xl,@/7xl,@/8xl,base" -const conditions = new Set(conditionsStr.split(',')) +const conditionsStr = + "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_default,_optional,_open,_closed,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_starting,xs,xsOnly,xsDown,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xsToSm,xsToMd,xsToLg,smToMd,smToLg,mdToLg,@/xs,@/sm,@/md,@/lg,@/xl,@/2xl,@/3xl,@/4xl,@/5xl,@/6xl,@/7xl,@/8xl,base"; +const conditions = new Set(conditionsStr.split(",")); -export function isCondition(value){ - return conditions.has(value) || /^@|&|&$/.test(value) +export function isCondition(value) { + return conditions.has(value) || /^@|&|&$/.test(value); } -const underscoreRegex = /^_/ -const conditionsSelectorRegex = /&|@/ +const underscoreRegex = /^_/; +const conditionsSelectorRegex = /&|@/; -export function finalizeConditions(paths){ +export function finalizeConditions(paths) { return paths.map((path) => { - if (conditions.has(path)){ - return path.replace(underscoreRegex, '') + if (conditions.has(path)) { + return path.replace(underscoreRegex, ""); } - if (conditionsSelectorRegex.test(path)){ - return `[${withoutSpace(path.trim())}]` + if (conditionsSelectorRegex.test(path)) { + return `[${withoutSpace(path.trim())}]`; } - return path - })} + return path; + }); +} - export function sortConditions(paths){ - return paths.sort((a, b) => { - const aa = isCondition(a) - const bb = isCondition(b) - if (aa && !bb) return 1 - if (!aa && bb) return -1 - return 0 - }) - } \ No newline at end of file +export function sortConditions(paths) { + return paths.sort((a, b) => { + const aa = isCondition(a); + const bb = isCondition(b); + if (aa && !bb) return 1; + if (!aa && bb) return -1; + return 0; + }); +} diff --git a/packages/wow-ui/styled-system/css/css.js b/packages/wow-ui/styled-system/css/css.js index ad99a48c..26dbe225 100644 --- a/packages/wow-ui/styled-system/css/css.js +++ b/packages/wow-ui/styled-system/css/css.js @@ -1,45 +1,49 @@ -import { createCss, createMergeCss, hypenateProperty, withoutSpace } from '../helpers.js'; -import { sortConditions, finalizeConditions } from './conditions.js'; +import { + createCss, + createMergeCss, + hypenateProperty, + withoutSpace, +} from "../helpers.js"; +import { sortConditions, finalizeConditions } from "./conditions.js"; -const utilities = "aspectRatio:aspect,boxDecorationBreak:decoration,zIndex:z,boxSizing:box,objectPosition:obj-pos,objectFit:obj-fit,overscrollBehavior:overscroll,overscrollBehaviorX:overscroll-x,overscrollBehaviorY:overscroll-y,position:pos/1,top:top,left:left,insetInline:inset-x/insetX,insetBlock:inset-y/insetY,inset:inset,insetBlockEnd:inset-b,insetBlockStart:inset-t,insetInlineEnd:end/insetEnd/1,insetInlineStart:start/insetStart/1,right:right,bottom:bottom,float:float,visibility:vis,display:d,hideFrom:hide,hideBelow:show,flexBasis:basis,flex:flex,flexDirection:flex/flexDir,flexGrow:grow,flexShrink:shrink,gridTemplateColumns:grid-cols,gridTemplateRows:grid-rows,gridColumn:col-span,gridRow:row-span,gridColumnStart:col-start,gridColumnEnd:col-end,gridAutoFlow:grid-flow,gridAutoColumns:auto-cols,gridAutoRows:auto-rows,gap:gap,gridGap:gap,gridRowGap:gap-x,gridColumnGap:gap-y,rowGap:gap-x,columnGap:gap-y,justifyContent:justify,alignContent:content,alignItems:items,alignSelf:self,padding:p/1,paddingLeft:pl/1,paddingRight:pr/1,paddingTop:pt/1,paddingBottom:pb/1,paddingBlock:py/1/paddingY,paddingBlockEnd:pb,paddingBlockStart:pt,paddingInline:px/paddingX/1,paddingInlineEnd:pe/1/paddingEnd,paddingInlineStart:ps/1/paddingStart,marginLeft:ml/1,marginRight:mr/1,marginTop:mt/1,marginBottom:mb/1,margin:m/1,marginBlock:my/1/marginY,marginBlockEnd:mb,marginBlockStart:mt,marginInline:mx/1/marginX,marginInlineEnd:me/1/marginEnd,marginInlineStart:ms/1/marginStart,spaceX:space-x,spaceY:space-y,outlineWidth:ring-width/ringWidth,outlineColor:ring-color/ringColor,outline:ring/1,outlineOffset:ring-offset/ringOffset,divideX:divide-x,divideY:divide-y,divideColor:divide-color,divideStyle:divide-style,width:w/1,inlineSize:w,minWidth:min-w/minW,minInlineSize:min-w,maxWidth:max-w/maxW,maxInlineSize:max-w,height:h/1,blockSize:h,minHeight:min-h/minH,minBlockSize:min-h,maxHeight:max-h/maxH,maxBlockSize:max-b,color:text,fontFamily:font,fontSize:fs,fontWeight:fw,fontSmoothing:smoothing,fontVariantNumeric:numeric,letterSpacing:tracking,lineHeight:leading,textAlign:text-align,textDecoration:text-decor,textDecorationColor:text-decor-color,textEmphasisColor:text-emphasis-color,textDecorationStyle:decoration-style,textDecorationThickness:decoration-thickness,textUnderlineOffset:underline-offset,textTransform:text-transform,textIndent:indent,textShadow:text-shadow,textShadowColor:text-shadow/textShadowColor,textOverflow:text-overflow,verticalAlign:v-align,wordBreak:break,textWrap:text-wrap,truncate:truncate,lineClamp:clamp,listStyleType:list-type,listStylePosition:list-pos,listStyleImage:list-img,backgroundPosition:bg-pos/bgPosition,backgroundPositionX:bg-pos-x/bgPositionX,backgroundPositionY:bg-pos-y/bgPositionY,backgroundAttachment:bg-attach/bgAttachment,backgroundClip:bg-clip/bgClip,background:bg/1,backgroundColor:bg/bgColor,backgroundOrigin:bg-origin/bgOrigin,backgroundImage:bg-img/bgImage,backgroundRepeat:bg-repeat/bgRepeat,backgroundBlendMode:bg-blend/bgBlendMode,backgroundSize:bg-size/bgSize,backgroundGradient:bg-gradient/bgGradient,textGradient:text-gradient,gradientFromPosition:gradient-from-pos,gradientToPosition:gradient-to-pos,gradientFrom:gradient-from,gradientTo:gradient-to,gradientVia:gradient-via,gradientViaPosition:gradient-via-pos,borderRadius:rounded/1,borderTopLeftRadius:rounded-tl/roundedTopLeft,borderTopRightRadius:rounded-tr/roundedTopRight,borderBottomRightRadius:rounded-br/roundedBottomRight,borderBottomLeftRadius:rounded-bl/roundedBottomLeft,borderTopRadius:rounded-t/roundedTop,borderRightRadius:rounded-r/roundedRight,borderBottomRadius:rounded-b/roundedBottom,borderLeftRadius:rounded-l/roundedLeft,borderStartStartRadius:rounded-ss/roundedStartStart,borderStartEndRadius:rounded-se/roundedStartEnd,borderStartRadius:rounded-s/roundedStart,borderEndStartRadius:rounded-es/roundedEndStart,borderEndEndRadius:rounded-ee/roundedEndEnd,borderEndRadius:rounded-e/roundedEnd,border:border,borderWidth:border-w,borderTopWidth:border-tw,borderLeftWidth:border-lw,borderRightWidth:border-rw,borderBottomWidth:border-bw,borderColor:border,borderInline:border-x/borderX,borderInlineWidth:border-x/borderXWidth,borderInlineColor:border-x/borderXColor,borderBlock:border-y/borderY,borderBlockWidth:border-y/borderYWidth,borderBlockColor:border-y/borderYColor,borderLeft:border-l,borderLeftColor:border-l,borderInlineStart:border-s/borderStart,borderInlineStartWidth:border-s/borderStartWidth,borderInlineStartColor:border-s/borderStartColor,borderRight:border-r,borderRightColor:border-r,borderInlineEnd:border-e/borderEnd,borderInlineEndWidth:border-e/borderEndWidth,borderInlineEndColor:border-e/borderEndColor,borderTop:border-t,borderTopColor:border-t,borderBottom:border-b,borderBottomColor:border-b,borderBlockEnd:border-be,borderBlockEndColor:border-be,borderBlockStart:border-bs,borderBlockStartColor:border-bs,boxShadow:shadow/1,boxShadowColor:shadow-color/shadowColor,mixBlendMode:mix-blend,filter:filter,brightness:brightness,contrast:contrast,grayscale:grayscale,hueRotate:hue-rotate,invert:invert,saturate:saturate,sepia:sepia,dropShadow:drop-shadow,blur:blur,backdropFilter:backdrop,backdropBlur:backdrop-blur,backdropBrightness:backdrop-brightness,backdropContrast:backdrop-contrast,backdropGrayscale:backdrop-grayscale,backdropHueRotate:backdrop-hue-rotate,backdropInvert:backdrop-invert,backdropOpacity:backdrop-opacity,backdropSaturate:backdrop-saturate,backdropSepia:backdrop-sepia,borderCollapse:border,borderSpacing:border-spacing,borderSpacingX:border-spacing-x,borderSpacingY:border-spacing-y,tableLayout:table,transitionTimingFunction:ease,transitionDelay:delay,transitionDuration:duration,transitionProperty:transition-prop,transition:transition,animation:animation,animationName:animation-name,animationTimingFunction:animation-ease,animationDuration:animation-duration,animationDelay:animation-delay,transformOrigin:origin,rotate:rotate,rotateX:rotate-x,rotateY:rotate-y,rotateZ:rotate-z,scale:scale,scaleX:scale-x,scaleY:scale-y,translate:translate,translateX:translate-x/x,translateY:translate-y/y,translateZ:translate-z/z,accentColor:accent,caretColor:caret,scrollBehavior:scroll,scrollbar:scrollbar,scrollMargin:scroll-m,scrollMarginLeft:scroll-ml,scrollMarginRight:scroll-mr,scrollMarginTop:scroll-mt,scrollMarginBottom:scroll-mb,scrollMarginBlock:scroll-my/scrollMarginY,scrollMarginBlockEnd:scroll-mb,scrollMarginBlockStart:scroll-mt,scrollMarginInline:scroll-mx/scrollMarginX,scrollMarginInlineEnd:scroll-me,scrollMarginInlineStart:scroll-ms,scrollPadding:scroll-p,scrollPaddingBlock:scroll-pb/scrollPaddingY,scrollPaddingBlockStart:scroll-pt,scrollPaddingBlockEnd:scroll-pb,scrollPaddingInline:scroll-px/scrollPaddingX,scrollPaddingInlineEnd:scroll-pe,scrollPaddingInlineStart:scroll-ps,scrollPaddingLeft:scroll-pl,scrollPaddingRight:scroll-pr,scrollPaddingTop:scroll-pt,scrollPaddingBottom:scroll-pb,scrollSnapAlign:snap-align,scrollSnapStop:snap-stop,scrollSnapType:snap-type,scrollSnapStrictness:snap-strictness,scrollSnapMargin:snap-m,scrollSnapMarginTop:snap-mt,scrollSnapMarginBottom:snap-mb,scrollSnapMarginLeft:snap-ml,scrollSnapMarginRight:snap-mr,touchAction:touch,userSelect:select,fill:fill,stroke:stroke,strokeWidth:stroke-w,srOnly:sr,debug:debug,appearance:appearance,backfaceVisibility:backface,clipPath:clip-path,hyphens:hyphens,mask:mask,maskImage:mask-image,maskSize:mask-size,textSizeAdjust:text-adjust,container:cq,containerName:cq-name,containerType:cq-type,textStyle:textStyle" +const utilities = + "aspectRatio:aspect,boxDecorationBreak:decoration,zIndex:z,boxSizing:box,objectPosition:obj-pos,objectFit:obj-fit,overscrollBehavior:overscroll,overscrollBehaviorX:overscroll-x,overscrollBehaviorY:overscroll-y,position:pos/1,top:top,left:left,insetInline:inset-x/insetX,insetBlock:inset-y/insetY,inset:inset,insetBlockEnd:inset-b,insetBlockStart:inset-t,insetInlineEnd:end/insetEnd/1,insetInlineStart:start/insetStart/1,right:right,bottom:bottom,float:float,visibility:vis,display:d,hideFrom:hide,hideBelow:show,flexBasis:basis,flex:flex,flexDirection:flex/flexDir,flexGrow:grow,flexShrink:shrink,gridTemplateColumns:grid-cols,gridTemplateRows:grid-rows,gridColumn:col-span,gridRow:row-span,gridColumnStart:col-start,gridColumnEnd:col-end,gridAutoFlow:grid-flow,gridAutoColumns:auto-cols,gridAutoRows:auto-rows,gap:gap,gridGap:gap,gridRowGap:gap-x,gridColumnGap:gap-y,rowGap:gap-x,columnGap:gap-y,justifyContent:justify,alignContent:content,alignItems:items,alignSelf:self,padding:p/1,paddingLeft:pl/1,paddingRight:pr/1,paddingTop:pt/1,paddingBottom:pb/1,paddingBlock:py/1/paddingY,paddingBlockEnd:pb,paddingBlockStart:pt,paddingInline:px/paddingX/1,paddingInlineEnd:pe/1/paddingEnd,paddingInlineStart:ps/1/paddingStart,marginLeft:ml/1,marginRight:mr/1,marginTop:mt/1,marginBottom:mb/1,margin:m/1,marginBlock:my/1/marginY,marginBlockEnd:mb,marginBlockStart:mt,marginInline:mx/1/marginX,marginInlineEnd:me/1/marginEnd,marginInlineStart:ms/1/marginStart,spaceX:space-x,spaceY:space-y,outlineWidth:ring-width/ringWidth,outlineColor:ring-color/ringColor,outline:ring/1,outlineOffset:ring-offset/ringOffset,divideX:divide-x,divideY:divide-y,divideColor:divide-color,divideStyle:divide-style,width:w/1,inlineSize:w,minWidth:min-w/minW,minInlineSize:min-w,maxWidth:max-w/maxW,maxInlineSize:max-w,height:h/1,blockSize:h,minHeight:min-h/minH,minBlockSize:min-h,maxHeight:max-h/maxH,maxBlockSize:max-b,color:text,fontFamily:font,fontSize:fs,fontWeight:fw,fontSmoothing:smoothing,fontVariantNumeric:numeric,letterSpacing:tracking,lineHeight:leading,textAlign:text-align,textDecoration:text-decor,textDecorationColor:text-decor-color,textEmphasisColor:text-emphasis-color,textDecorationStyle:decoration-style,textDecorationThickness:decoration-thickness,textUnderlineOffset:underline-offset,textTransform:text-transform,textIndent:indent,textShadow:text-shadow,textShadowColor:text-shadow/textShadowColor,textOverflow:text-overflow,verticalAlign:v-align,wordBreak:break,textWrap:text-wrap,truncate:truncate,lineClamp:clamp,listStyleType:list-type,listStylePosition:list-pos,listStyleImage:list-img,backgroundPosition:bg-pos/bgPosition,backgroundPositionX:bg-pos-x/bgPositionX,backgroundPositionY:bg-pos-y/bgPositionY,backgroundAttachment:bg-attach/bgAttachment,backgroundClip:bg-clip/bgClip,background:bg/1,backgroundColor:bg/bgColor,backgroundOrigin:bg-origin/bgOrigin,backgroundImage:bg-img/bgImage,backgroundRepeat:bg-repeat/bgRepeat,backgroundBlendMode:bg-blend/bgBlendMode,backgroundSize:bg-size/bgSize,backgroundGradient:bg-gradient/bgGradient,textGradient:text-gradient,gradientFromPosition:gradient-from-pos,gradientToPosition:gradient-to-pos,gradientFrom:gradient-from,gradientTo:gradient-to,gradientVia:gradient-via,gradientViaPosition:gradient-via-pos,borderRadius:rounded/1,borderTopLeftRadius:rounded-tl/roundedTopLeft,borderTopRightRadius:rounded-tr/roundedTopRight,borderBottomRightRadius:rounded-br/roundedBottomRight,borderBottomLeftRadius:rounded-bl/roundedBottomLeft,borderTopRadius:rounded-t/roundedTop,borderRightRadius:rounded-r/roundedRight,borderBottomRadius:rounded-b/roundedBottom,borderLeftRadius:rounded-l/roundedLeft,borderStartStartRadius:rounded-ss/roundedStartStart,borderStartEndRadius:rounded-se/roundedStartEnd,borderStartRadius:rounded-s/roundedStart,borderEndStartRadius:rounded-es/roundedEndStart,borderEndEndRadius:rounded-ee/roundedEndEnd,borderEndRadius:rounded-e/roundedEnd,border:border,borderWidth:border-w,borderTopWidth:border-tw,borderLeftWidth:border-lw,borderRightWidth:border-rw,borderBottomWidth:border-bw,borderColor:border,borderInline:border-x/borderX,borderInlineWidth:border-x/borderXWidth,borderInlineColor:border-x/borderXColor,borderBlock:border-y/borderY,borderBlockWidth:border-y/borderYWidth,borderBlockColor:border-y/borderYColor,borderLeft:border-l,borderLeftColor:border-l,borderInlineStart:border-s/borderStart,borderInlineStartWidth:border-s/borderStartWidth,borderInlineStartColor:border-s/borderStartColor,borderRight:border-r,borderRightColor:border-r,borderInlineEnd:border-e/borderEnd,borderInlineEndWidth:border-e/borderEndWidth,borderInlineEndColor:border-e/borderEndColor,borderTop:border-t,borderTopColor:border-t,borderBottom:border-b,borderBottomColor:border-b,borderBlockEnd:border-be,borderBlockEndColor:border-be,borderBlockStart:border-bs,borderBlockStartColor:border-bs,boxShadow:shadow/1,boxShadowColor:shadow-color/shadowColor,mixBlendMode:mix-blend,filter:filter,brightness:brightness,contrast:contrast,grayscale:grayscale,hueRotate:hue-rotate,invert:invert,saturate:saturate,sepia:sepia,dropShadow:drop-shadow,blur:blur,backdropFilter:backdrop,backdropBlur:backdrop-blur,backdropBrightness:backdrop-brightness,backdropContrast:backdrop-contrast,backdropGrayscale:backdrop-grayscale,backdropHueRotate:backdrop-hue-rotate,backdropInvert:backdrop-invert,backdropOpacity:backdrop-opacity,backdropSaturate:backdrop-saturate,backdropSepia:backdrop-sepia,borderCollapse:border,borderSpacing:border-spacing,borderSpacingX:border-spacing-x,borderSpacingY:border-spacing-y,tableLayout:table,transitionTimingFunction:ease,transitionDelay:delay,transitionDuration:duration,transitionProperty:transition-prop,transition:transition,animation:animation,animationName:animation-name,animationTimingFunction:animation-ease,animationDuration:animation-duration,animationDelay:animation-delay,transformOrigin:origin,rotate:rotate,rotateX:rotate-x,rotateY:rotate-y,rotateZ:rotate-z,scale:scale,scaleX:scale-x,scaleY:scale-y,translate:translate,translateX:translate-x/x,translateY:translate-y/y,translateZ:translate-z/z,accentColor:accent,caretColor:caret,scrollBehavior:scroll,scrollbar:scrollbar,scrollMargin:scroll-m,scrollMarginLeft:scroll-ml,scrollMarginRight:scroll-mr,scrollMarginTop:scroll-mt,scrollMarginBottom:scroll-mb,scrollMarginBlock:scroll-my/scrollMarginY,scrollMarginBlockEnd:scroll-mb,scrollMarginBlockStart:scroll-mt,scrollMarginInline:scroll-mx/scrollMarginX,scrollMarginInlineEnd:scroll-me,scrollMarginInlineStart:scroll-ms,scrollPadding:scroll-p,scrollPaddingBlock:scroll-pb/scrollPaddingY,scrollPaddingBlockStart:scroll-pt,scrollPaddingBlockEnd:scroll-pb,scrollPaddingInline:scroll-px/scrollPaddingX,scrollPaddingInlineEnd:scroll-pe,scrollPaddingInlineStart:scroll-ps,scrollPaddingLeft:scroll-pl,scrollPaddingRight:scroll-pr,scrollPaddingTop:scroll-pt,scrollPaddingBottom:scroll-pb,scrollSnapAlign:snap-align,scrollSnapStop:snap-stop,scrollSnapType:snap-type,scrollSnapStrictness:snap-strictness,scrollSnapMargin:snap-m,scrollSnapMarginTop:snap-mt,scrollSnapMarginBottom:snap-mb,scrollSnapMarginLeft:snap-ml,scrollSnapMarginRight:snap-mr,touchAction:touch,userSelect:select,fill:fill,stroke:stroke,strokeWidth:stroke-w,srOnly:sr,debug:debug,appearance:appearance,backfaceVisibility:backface,clipPath:clip-path,hyphens:hyphens,mask:mask,maskImage:mask-image,maskSize:mask-size,textSizeAdjust:text-adjust,container:cq,containerName:cq-name,containerType:cq-type,textStyle:textStyle"; -const classNameByProp = new Map() -const shorthands = new Map() -utilities.split(',').forEach((utility) => { - const [prop, meta] = utility.split(':') - const [className, ...shorthandList] = meta.split('/') - classNameByProp.set(prop, className) +const classNameByProp = new Map(); +const shorthands = new Map(); +utilities.split(",").forEach((utility) => { + const [prop, meta] = utility.split(":"); + const [className, ...shorthandList] = meta.split("/"); + classNameByProp.set(prop, className); if (shorthandList.length) { shorthandList.forEach((shorthand) => { - shorthands.set(shorthand === '1' ? className : shorthand, prop) - }) + shorthands.set(shorthand === "1" ? className : shorthand, prop); + }); } -}) +}); -const resolveShorthand = (prop) => shorthands.get(prop) || prop +const resolveShorthand = (prop) => shorthands.get(prop) || prop; const context = { - conditions: { shift: sortConditions, finalize: finalizeConditions, - breakpoints: { keys: ["base","sm","md","lg","xl","2xl"] } + breakpoints: { keys: ["base", "xs", "sm", "md", "lg"] }, }, utility: { - transform: (prop, value) => { - const key = resolveShorthand(prop) - const propKey = classNameByProp.get(key) || hypenateProperty(key) - return { className: `${propKey}_${withoutSpace(value)}` } - }, + const key = resolveShorthand(prop); + const propKey = classNameByProp.get(key) || hypenateProperty(key); + return { className: `${propKey}_${withoutSpace(value)}` }; + }, hasShorthand: true, toHash: (path, hashFn) => hashFn(path.join(":")), resolveShorthand: resolveShorthand, - } -} + }, +}; -const cssFn = createCss(context) -export const css = (...styles) => cssFn(mergeCss(...styles)) -css.raw = (...styles) => mergeCss(...styles) +const cssFn = createCss(context); +export const css = (...styles) => cssFn(mergeCss(...styles)); +css.raw = (...styles) => mergeCss(...styles); -export const { mergeCss, assignCss } = createMergeCss(context) \ No newline at end of file +export const { mergeCss, assignCss } = createMergeCss(context); diff --git a/packages/wow-ui/styled-system/jsx/is-valid-prop.js b/packages/wow-ui/styled-system/jsx/is-valid-prop.js index 0cb2bac4..7ea7b401 100644 --- a/packages/wow-ui/styled-system/jsx/is-valid-prop.js +++ b/packages/wow-ui/styled-system/jsx/is-valid-prop.js @@ -2,7 +2,7 @@ import { splitProps } from "../helpers.js"; import { memo } from "../helpers.js"; // src/index.ts var userGeneratedStr = - "css,pos,insetX,insetY,insetEnd,end,insetStart,start,flexDir,p,pl,pr,pt,pb,py,paddingY,paddingX,px,pe,paddingEnd,ps,paddingStart,ml,mr,mt,mb,m,my,marginY,mx,marginX,me,marginEnd,ms,marginStart,ringWidth,ringColor,ring,ringOffset,w,minW,maxW,h,minH,maxH,textShadowColor,bgPosition,bgPositionX,bgPositionY,bgAttachment,bgClip,bg,bgColor,bgOrigin,bgImage,bgRepeat,bgBlendMode,bgSize,bgGradient,rounded,roundedTopLeft,roundedTopRight,roundedBottomRight,roundedBottomLeft,roundedTop,roundedRight,roundedBottom,roundedLeft,roundedStartStart,roundedStartEnd,roundedStart,roundedEndStart,roundedEndEnd,roundedEnd,borderX,borderXWidth,borderXColor,borderY,borderYWidth,borderYColor,borderStart,borderStartWidth,borderStartColor,borderEnd,borderEndWidth,borderEndColor,shadow,shadowColor,x,y,z,scrollMarginY,scrollMarginX,scrollPaddingY,scrollPaddingX,aspectRatio,boxDecorationBreak,zIndex,boxSizing,objectPosition,objectFit,overscrollBehavior,overscrollBehaviorX,overscrollBehaviorY,position,top,left,insetInline,insetBlock,inset,insetBlockEnd,insetBlockStart,insetInlineEnd,insetInlineStart,right,bottom,float,visibility,display,hideFrom,hideBelow,flexBasis,flex,flexDirection,flexGrow,flexShrink,gridTemplateColumns,gridTemplateRows,gridColumn,gridRow,gridColumnStart,gridColumnEnd,gridAutoFlow,gridAutoColumns,gridAutoRows,gap,gridGap,gridRowGap,gridColumnGap,rowGap,columnGap,justifyContent,alignContent,alignItems,alignSelf,padding,paddingLeft,paddingRight,paddingTop,paddingBottom,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingInline,paddingInlineEnd,paddingInlineStart,marginLeft,marginRight,marginTop,marginBottom,margin,marginBlock,marginBlockEnd,marginBlockStart,marginInline,marginInlineEnd,marginInlineStart,spaceX,spaceY,outlineWidth,outlineColor,outline,outlineOffset,divideX,divideY,divideColor,divideStyle,width,inlineSize,minWidth,minInlineSize,maxWidth,maxInlineSize,height,blockSize,minHeight,minBlockSize,maxHeight,maxBlockSize,color,fontFamily,fontSize,fontWeight,fontSmoothing,fontVariantNumeric,letterSpacing,lineHeight,textAlign,textDecoration,textDecorationColor,textEmphasisColor,textDecorationStyle,textDecorationThickness,textUnderlineOffset,textTransform,textIndent,textShadow,textOverflow,verticalAlign,wordBreak,textWrap,truncate,lineClamp,listStyleType,listStylePosition,listStyleImage,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundAttachment,backgroundClip,background,backgroundColor,backgroundOrigin,backgroundImage,backgroundRepeat,backgroundBlendMode,backgroundSize,backgroundGradient,textGradient,gradientFromPosition,gradientToPosition,gradientFrom,gradientTo,gradientVia,gradientViaPosition,borderRadius,borderTopLeftRadius,borderTopRightRadius,borderBottomRightRadius,borderBottomLeftRadius,borderTopRadius,borderRightRadius,borderBottomRadius,borderLeftRadius,borderStartStartRadius,borderStartEndRadius,borderStartRadius,borderEndStartRadius,borderEndEndRadius,borderEndRadius,border,borderWidth,borderTopWidth,borderLeftWidth,borderRightWidth,borderBottomWidth,borderColor,borderInline,borderInlineWidth,borderInlineColor,borderBlock,borderBlockWidth,borderBlockColor,borderLeft,borderLeftColor,borderInlineStart,borderInlineStartWidth,borderInlineStartColor,borderRight,borderRightColor,borderInlineEnd,borderInlineEndWidth,borderInlineEndColor,borderTop,borderTopColor,borderBottom,borderBottomColor,borderBlockEnd,borderBlockEndColor,borderBlockStart,borderBlockStartColor,opacity,boxShadow,boxShadowColor,mixBlendMode,filter,brightness,contrast,grayscale,hueRotate,invert,saturate,sepia,dropShadow,blur,backdropFilter,backdropBlur,backdropBrightness,backdropContrast,backdropGrayscale,backdropHueRotate,backdropInvert,backdropOpacity,backdropSaturate,backdropSepia,borderCollapse,borderSpacing,borderSpacingX,borderSpacingY,tableLayout,transitionTimingFunction,transitionDelay,transitionDuration,transitionProperty,transition,animation,animationName,animationTimingFunction,animationDuration,animationDelay,transformOrigin,rotate,rotateX,rotateY,rotateZ,scale,scaleX,scaleY,translate,translateX,translateY,translateZ,accentColor,caretColor,scrollBehavior,scrollbar,scrollMargin,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollMarginBottom,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollPadding,scrollPaddingBlock,scrollPaddingBlockStart,scrollPaddingBlockEnd,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollPaddingBottom,scrollSnapAlign,scrollSnapStop,scrollSnapType,scrollSnapStrictness,scrollSnapMargin,scrollSnapMarginTop,scrollSnapMarginBottom,scrollSnapMarginLeft,scrollSnapMarginRight,touchAction,userSelect,fill,stroke,strokeWidth,srOnly,debug,appearance,backfaceVisibility,clipPath,hyphens,mask,maskImage,maskSize,textSizeAdjust,container,containerName,containerType,colorPalette,_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_default,_optional,_open,_closed,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_starting,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,2xlDown,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl,@/xs,@/sm,@/md,@/lg,@/xl,@/2xl,@/3xl,@/4xl,@/5xl,@/6xl,@/7xl,@/8xl,textStyle"; + "css,pos,insetX,insetY,insetEnd,end,insetStart,start,flexDir,p,pl,pr,pt,pb,py,paddingY,paddingX,px,pe,paddingEnd,ps,paddingStart,ml,mr,mt,mb,m,my,marginY,mx,marginX,me,marginEnd,ms,marginStart,ringWidth,ringColor,ring,ringOffset,w,minW,maxW,h,minH,maxH,textShadowColor,bgPosition,bgPositionX,bgPositionY,bgAttachment,bgClip,bg,bgColor,bgOrigin,bgImage,bgRepeat,bgBlendMode,bgSize,bgGradient,rounded,roundedTopLeft,roundedTopRight,roundedBottomRight,roundedBottomLeft,roundedTop,roundedRight,roundedBottom,roundedLeft,roundedStartStart,roundedStartEnd,roundedStart,roundedEndStart,roundedEndEnd,roundedEnd,borderX,borderXWidth,borderXColor,borderY,borderYWidth,borderYColor,borderStart,borderStartWidth,borderStartColor,borderEnd,borderEndWidth,borderEndColor,shadow,shadowColor,x,y,z,scrollMarginY,scrollMarginX,scrollPaddingY,scrollPaddingX,aspectRatio,boxDecorationBreak,zIndex,boxSizing,objectPosition,objectFit,overscrollBehavior,overscrollBehaviorX,overscrollBehaviorY,position,top,left,insetInline,insetBlock,inset,insetBlockEnd,insetBlockStart,insetInlineEnd,insetInlineStart,right,bottom,float,visibility,display,hideFrom,hideBelow,flexBasis,flex,flexDirection,flexGrow,flexShrink,gridTemplateColumns,gridTemplateRows,gridColumn,gridRow,gridColumnStart,gridColumnEnd,gridAutoFlow,gridAutoColumns,gridAutoRows,gap,gridGap,gridRowGap,gridColumnGap,rowGap,columnGap,justifyContent,alignContent,alignItems,alignSelf,padding,paddingLeft,paddingRight,paddingTop,paddingBottom,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingInline,paddingInlineEnd,paddingInlineStart,marginLeft,marginRight,marginTop,marginBottom,margin,marginBlock,marginBlockEnd,marginBlockStart,marginInline,marginInlineEnd,marginInlineStart,spaceX,spaceY,outlineWidth,outlineColor,outline,outlineOffset,divideX,divideY,divideColor,divideStyle,width,inlineSize,minWidth,minInlineSize,maxWidth,maxInlineSize,height,blockSize,minHeight,minBlockSize,maxHeight,maxBlockSize,color,fontFamily,fontSize,fontWeight,fontSmoothing,fontVariantNumeric,letterSpacing,lineHeight,textAlign,textDecoration,textDecorationColor,textEmphasisColor,textDecorationStyle,textDecorationThickness,textUnderlineOffset,textTransform,textIndent,textShadow,textOverflow,verticalAlign,wordBreak,textWrap,truncate,lineClamp,listStyleType,listStylePosition,listStyleImage,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundAttachment,backgroundClip,background,backgroundColor,backgroundOrigin,backgroundImage,backgroundRepeat,backgroundBlendMode,backgroundSize,backgroundGradient,textGradient,gradientFromPosition,gradientToPosition,gradientFrom,gradientTo,gradientVia,gradientViaPosition,borderRadius,borderTopLeftRadius,borderTopRightRadius,borderBottomRightRadius,borderBottomLeftRadius,borderTopRadius,borderRightRadius,borderBottomRadius,borderLeftRadius,borderStartStartRadius,borderStartEndRadius,borderStartRadius,borderEndStartRadius,borderEndEndRadius,borderEndRadius,border,borderWidth,borderTopWidth,borderLeftWidth,borderRightWidth,borderBottomWidth,borderColor,borderInline,borderInlineWidth,borderInlineColor,borderBlock,borderBlockWidth,borderBlockColor,borderLeft,borderLeftColor,borderInlineStart,borderInlineStartWidth,borderInlineStartColor,borderRight,borderRightColor,borderInlineEnd,borderInlineEndWidth,borderInlineEndColor,borderTop,borderTopColor,borderBottom,borderBottomColor,borderBlockEnd,borderBlockEndColor,borderBlockStart,borderBlockStartColor,opacity,boxShadow,boxShadowColor,mixBlendMode,filter,brightness,contrast,grayscale,hueRotate,invert,saturate,sepia,dropShadow,blur,backdropFilter,backdropBlur,backdropBrightness,backdropContrast,backdropGrayscale,backdropHueRotate,backdropInvert,backdropOpacity,backdropSaturate,backdropSepia,borderCollapse,borderSpacing,borderSpacingX,borderSpacingY,tableLayout,transitionTimingFunction,transitionDelay,transitionDuration,transitionProperty,transition,animation,animationName,animationTimingFunction,animationDuration,animationDelay,transformOrigin,rotate,rotateX,rotateY,rotateZ,scale,scaleX,scaleY,translate,translateX,translateY,translateZ,accentColor,caretColor,scrollBehavior,scrollbar,scrollMargin,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollMarginBottom,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollPadding,scrollPaddingBlock,scrollPaddingBlockStart,scrollPaddingBlockEnd,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollPaddingBottom,scrollSnapAlign,scrollSnapStop,scrollSnapType,scrollSnapStrictness,scrollSnapMargin,scrollSnapMarginTop,scrollSnapMarginBottom,scrollSnapMarginLeft,scrollSnapMarginRight,touchAction,userSelect,fill,stroke,strokeWidth,srOnly,debug,appearance,backfaceVisibility,clipPath,hyphens,mask,maskImage,maskSize,textSizeAdjust,container,containerName,containerType,colorPalette,_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_default,_optional,_open,_closed,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_starting,xs,xsOnly,xsDown,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xsToSm,xsToMd,xsToLg,smToMd,smToLg,mdToLg,@/xs,@/sm,@/md,@/lg,@/xl,@/2xl,@/3xl,@/4xl,@/5xl,@/6xl,@/7xl,@/8xl,textStyle"; var userGenerated = userGeneratedStr.split(","); var cssPropertiesStr = "WebkitAppearance,WebkitBorderBefore,WebkitBorderBeforeColor,WebkitBorderBeforeStyle,WebkitBorderBeforeWidth,WebkitBoxReflect,WebkitLineClamp,WebkitMask,WebkitMaskAttachment,WebkitMaskClip,WebkitMaskComposite,WebkitMaskImage,WebkitMaskOrigin,WebkitMaskPosition,WebkitMaskPositionX,WebkitMaskPositionY,WebkitMaskRepeat,WebkitMaskRepeatX,WebkitMaskRepeatY,WebkitMaskSize,WebkitOverflowScrolling,WebkitTapHighlightColor,WebkitTextFillColor,WebkitTextStroke,WebkitTextStrokeColor,WebkitTextStrokeWidth,WebkitTouchCallout,WebkitUserModify,accentColor,alignContent,alignItems,alignSelf,alignTracks,all,animation,animationComposition,animationDelay,animationDirection,animationDuration,animationFillMode,animationIterationCount,animationName,animationPlayState,animationRange,animationRangeEnd,animationRangeStart,animationTimingFunction,animationTimeline,appearance,aspectRatio,azimuth,backdropFilter,backfaceVisibility,background,backgroundAttachment,backgroundBlendMode,backgroundClip,backgroundColor,backgroundImage,backgroundOrigin,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundRepeat,backgroundSize,blockSize,border,borderBlock,borderBlockColor,borderBlockStyle,borderBlockWidth,borderBlockEnd,borderBlockEndColor,borderBlockEndStyle,borderBlockEndWidth,borderBlockStart,borderBlockStartColor,borderBlockStartStyle,borderBlockStartWidth,borderBottom,borderBottomColor,borderBottomLeftRadius,borderBottomRightRadius,borderBottomStyle,borderBottomWidth,borderCollapse,borderColor,borderEndEndRadius,borderEndStartRadius,borderImage,borderImageOutset,borderImageRepeat,borderImageSlice,borderImageSource,borderImageWidth,borderInline,borderInlineEnd,borderInlineColor,borderInlineStyle,borderInlineWidth,borderInlineEndColor,borderInlineEndStyle,borderInlineEndWidth,borderInlineStart,borderInlineStartColor,borderInlineStartStyle,borderInlineStartWidth,borderLeft,borderLeftColor,borderLeftStyle,borderLeftWidth,borderRadius,borderRight,borderRightColor,borderRightStyle,borderRightWidth,borderSpacing,borderStartEndRadius,borderStartStartRadius,borderStyle,borderTop,borderTopColor,borderTopLeftRadius,borderTopRightRadius,borderTopStyle,borderTopWidth,borderWidth,bottom,boxAlign,boxDecorationBreak,boxDirection,boxFlex,boxFlexGroup,boxLines,boxOrdinalGroup,boxOrient,boxPack,boxShadow,boxSizing,breakAfter,breakBefore,breakInside,captionSide,caret,caretColor,caretShape,clear,clip,clipPath,color,colorScheme,columnCount,columnFill,columnGap,columnRule,columnRuleColor,columnRuleStyle,columnRuleWidth,columnSpan,columnWidth,columns,contain,containIntrinsicSize,containIntrinsicBlockSize,containIntrinsicHeight,containIntrinsicInlineSize,containIntrinsicWidth,container,containerName,containerType,content,contentVisibility,counterIncrement,counterReset,counterSet,cursor,direction,display,emptyCells,filter,flex,flexBasis,flexDirection,flexFlow,flexGrow,flexShrink,flexWrap,float,font,fontFamily,fontFeatureSettings,fontKerning,fontLanguageOverride,fontOpticalSizing,fontPalette,fontVariationSettings,fontSize,fontSizeAdjust,fontSmooth,fontStretch,fontStyle,fontSynthesis,fontSynthesisPosition,fontSynthesisSmallCaps,fontSynthesisStyle,fontSynthesisWeight,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariantEastAsian,fontVariantEmoji,fontVariantLigatures,fontVariantNumeric,fontVariantPosition,fontWeight,forcedColorAdjust,gap,grid,gridArea,gridAutoColumns,gridAutoFlow,gridAutoRows,gridColumn,gridColumnEnd,gridColumnGap,gridColumnStart,gridGap,gridRow,gridRowEnd,gridRowGap,gridRowStart,gridTemplate,gridTemplateAreas,gridTemplateColumns,gridTemplateRows,hangingPunctuation,height,hyphenateCharacter,hyphenateLimitChars,hyphens,imageOrientation,imageRendering,imageResolution,imeMode,initialLetter,initialLetterAlign,inlineSize,inputSecurity,inset,insetBlock,insetBlockEnd,insetBlockStart,insetInline,insetInlineEnd,insetInlineStart,isolation,justifyContent,justifyItems,justifySelf,justifyTracks,left,letterSpacing,lineBreak,lineClamp,lineHeight,lineHeightStep,listStyle,listStyleImage,listStylePosition,listStyleType,margin,marginBlock,marginBlockEnd,marginBlockStart,marginBottom,marginInline,marginInlineEnd,marginInlineStart,marginLeft,marginRight,marginTop,marginTrim,mask,maskBorder,maskBorderMode,maskBorderOutset,maskBorderRepeat,maskBorderSlice,maskBorderSource,maskBorderWidth,maskClip,maskComposite,maskImage,maskMode,maskOrigin,maskPosition,maskRepeat,maskSize,maskType,masonryAutoFlow,mathDepth,mathShift,mathStyle,maxBlockSize,maxHeight,maxInlineSize,maxLines,maxWidth,minBlockSize,minHeight,minInlineSize,minWidth,mixBlendMode,objectFit,objectPosition,offset,offsetAnchor,offsetDistance,offsetPath,offsetPosition,offsetRotate,opacity,order,orphans,outline,outlineColor,outlineOffset,outlineStyle,outlineWidth,overflow,overflowAnchor,overflowBlock,overflowClipBox,overflowClipMargin,overflowInline,overflowWrap,overflowX,overflowY,overlay,overscrollBehavior,overscrollBehaviorBlock,overscrollBehaviorInline,overscrollBehaviorX,overscrollBehaviorY,padding,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingBottom,paddingInline,paddingInlineEnd,paddingInlineStart,paddingLeft,paddingRight,paddingTop,page,pageBreakAfter,pageBreakBefore,pageBreakInside,paintOrder,perspective,perspectiveOrigin,placeContent,placeItems,placeSelf,pointerEvents,position,printColorAdjust,quotes,resize,right,rotate,rowGap,rubyAlign,rubyMerge,rubyPosition,scale,scrollbarColor,scrollbarGutter,scrollbarWidth,scrollBehavior,scrollMargin,scrollMarginBlock,scrollMarginBlockStart,scrollMarginBlockEnd,scrollMarginBottom,scrollMarginInline,scrollMarginInlineStart,scrollMarginInlineEnd,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollPadding,scrollPaddingBlock,scrollPaddingBlockStart,scrollPaddingBlockEnd,scrollPaddingBottom,scrollPaddingInline,scrollPaddingInlineStart,scrollPaddingInlineEnd,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollSnapAlign,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapStop,scrollSnapType,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,shapeImageThreshold,shapeMargin,shapeOutside,tabSize,tableLayout,textAlign,textAlignLast,textCombineUpright,textDecoration,textDecorationColor,textDecorationLine,textDecorationSkip,textDecorationSkipInk,textDecorationStyle,textDecorationThickness,textEmphasis,textEmphasisColor,textEmphasisPosition,textEmphasisStyle,textIndent,textJustify,textOrientation,textOverflow,textRendering,textShadow,textSizeAdjust,textTransform,textUnderlineOffset,textUnderlinePosition,textWrap,timelineScope,top,touchAction,transform,transformBox,transformOrigin,transformStyle,transition,transitionBehavior,transitionDelay,transitionDuration,transitionProperty,transitionTimingFunction,translate,unicodeBidi,userSelect,verticalAlign,viewTimeline,viewTimelineAxis,viewTimelineInset,viewTimelineName,viewTransitionName,visibility,whiteSpace,whiteSpaceCollapse,widows,width,willChange,wordBreak,wordSpacing,wordWrap,writingMode,zIndex,zoom,alignmentBaseline,baselineShift,clipRule,colorInterpolation,colorRendering,dominantBaseline,fill,fillOpacity,fillRule,floodColor,floodOpacity,glyphOrientationVertical,lightingColor,marker,markerEnd,markerMid,markerStart,shapeRendering,stopColor,stopOpacity,stroke,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,strokeWidth,textAnchor,vectorEffect"; diff --git a/packages/wow-ui/styled-system/tokens/index.js b/packages/wow-ui/styled-system/tokens/index.js index f5d2dd7c..ecab0b24 100644 --- a/packages/wow-ui/styled-system/tokens/index.js +++ b/packages/wow-ui/styled-system/tokens/index.js @@ -283,56 +283,48 @@ const tokens = { value: "1.2px", variable: "var(--border-widths-arrow)", }, + "breakpoints.xs": { + value: "360px", + variable: "var(--breakpoints-xs)", + }, "breakpoints.sm": { - value: "640px", + value: "600px", variable: "var(--breakpoints-sm)", }, "breakpoints.md": { - value: "768px", + value: "900px", variable: "var(--breakpoints-md)", }, "breakpoints.lg": { - value: "1024px", - variable: "var(--breakpoints-lg)", - }, - "breakpoints.xl": { value: "1280px", - variable: "var(--breakpoints-xl)", + variable: "var(--breakpoints-lg)", }, - "breakpoints.2xl": { - value: "1536px", - variable: "var(--breakpoints-2xl)", + "sizes.breakpoint-xs": { + value: "360px", + variable: "var(--sizes-breakpoint-xs)", }, "sizes.breakpoint-sm": { - value: "640px", + value: "600px", variable: "var(--sizes-breakpoint-sm)", }, "sizes.breakpoint-md": { - value: "768px", + value: "900px", variable: "var(--sizes-breakpoint-md)", }, "sizes.breakpoint-lg": { - value: "1024px", - variable: "var(--sizes-breakpoint-lg)", - }, - "sizes.breakpoint-xl": { value: "1280px", - variable: "var(--sizes-breakpoint-xl)", - }, - "sizes.breakpoint-2xl": { - value: "1536px", - variable: "var(--sizes-breakpoint-2xl)", + variable: "var(--sizes-breakpoint-lg)", }, "colors.primary": { value: "#368FF7", variable: "var(--colors-primary)", }, "colors.success": { - value: "#34A853", + value: "#2A8642", variable: "var(--colors-success)", }, "colors.error": { - value: "#EA4335", + value: "#BB362A", variable: "var(--colors-error)", }, "colors.backgroundNormal": { @@ -348,7 +340,7 @@ const tokens = { variable: "var(--colors-background-dimmer)", }, "colors.sub": { - value: "#8F8F8F", + value: "#6B6B6B", variable: "var(--colors-sub)", }, "colors.outline": { diff --git a/packages/wow-ui/styled-system/tokens/tokens.d.ts b/packages/wow-ui/styled-system/tokens/tokens.d.ts index f8ab5cf7..bc6b1b40 100644 --- a/packages/wow-ui/styled-system/tokens/tokens.d.ts +++ b/packages/wow-ui/styled-system/tokens/tokens.d.ts @@ -71,16 +71,14 @@ export type Token = | "radii.full" | "borderWidths.button" | "borderWidths.arrow" + | "breakpoints.xs" | "breakpoints.sm" | "breakpoints.md" | "breakpoints.lg" - | "breakpoints.xl" - | "breakpoints.2xl" + | "sizes.breakpoint-xs" | "sizes.breakpoint-sm" | "sizes.breakpoint-md" | "sizes.breakpoint-lg" - | "sizes.breakpoint-xl" - | "sizes.breakpoint-2xl" | "colors.primary" | "colors.success" | "colors.error" @@ -273,14 +271,13 @@ export type RadiusToken = "sm" | "md" | "full"; export type BorderWidthToken = "button" | "arrow"; -export type BreakpointToken = "sm" | "md" | "lg" | "xl" | "2xl"; +export type BreakpointToken = "xs" | "sm" | "md" | "lg"; export type SizeToken = + | "breakpoint-xs" | "breakpoint-sm" | "breakpoint-md" - | "breakpoint-lg" - | "breakpoint-xl" - | "breakpoint-2xl"; + | "breakpoint-lg"; export type Tokens = { colors: ColorToken; diff --git a/packages/wow-ui/styled-system/types/conditions.d.ts b/packages/wow-ui/styled-system/types/conditions.d.ts index 7cff43ee..c31b9f52 100644 --- a/packages/wow-ui/styled-system/types/conditions.d.ts +++ b/packages/wow-ui/styled-system/types/conditions.d.ts @@ -1,274 +1,260 @@ /* eslint-disable */ -import type { AnySelector, Selectors } from './selectors'; +import type { AnySelector, Selectors } from "./selectors"; export interface Conditions { - /** `&:is(:hover, [data-hover])` */ - "_hover": string - /** `&:is(:focus, [data-focus])` */ - "_focus": string - /** `&:focus-within` */ - "_focusWithin": string - /** `&:is(:focus-visible, [data-focus-visible])` */ - "_focusVisible": string - /** `&:is(:disabled, [disabled], [data-disabled])` */ - "_disabled": string - /** `&:is(:active, [data-active])` */ - "_active": string - /** `&:visited` */ - "_visited": string - /** `&:target` */ - "_target": string - /** `&:is(:read-only, [data-read-only])` */ - "_readOnly": string - /** `&:read-write` */ - "_readWrite": string - /** `&:is(:empty, [data-empty])` */ - "_empty": string - /** `&:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"])` */ - "_checked": string - /** `&:enabled` */ - "_enabled": string - /** `&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])` */ - "_expanded": string - /** `&[data-highlighted]` */ - "_highlighted": string - /** `&::before` */ - "_before": string - /** `&::after` */ - "_after": string - /** `&::first-letter` */ - "_firstLetter": string - /** `&::first-line` */ - "_firstLine": string - /** `&::marker` */ - "_marker": string - /** `&::selection` */ - "_selection": string - /** `&::file-selector-button` */ - "_file": string - /** `&::backdrop` */ - "_backdrop": string - /** `&:first-child` */ - "_first": string - /** `&:last-child` */ - "_last": string - /** `&:only-child` */ - "_only": string - /** `&:nth-child(even)` */ - "_even": string - /** `&:nth-child(odd)` */ - "_odd": string - /** `&:first-of-type` */ - "_firstOfType": string - /** `&:last-of-type` */ - "_lastOfType": string - /** `&:only-of-type` */ - "_onlyOfType": string - /** `.peer:is(:focus, [data-focus]) ~ &` */ - "_peerFocus": string - /** `.peer:is(:hover, [data-hover]) ~ &` */ - "_peerHover": string - /** `.peer:is(:active, [data-active]) ~ &` */ - "_peerActive": string - /** `.peer:focus-within ~ &` */ - "_peerFocusWithin": string - /** `.peer:is(:focus-visible, [data-focus-visible]) ~ &` */ - "_peerFocusVisible": string - /** `.peer:is(:disabled, [disabled], [data-disabled]) ~ &` */ - "_peerDisabled": string - /** `.peer:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ &` */ - "_peerChecked": string - /** `.peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &` */ - "_peerInvalid": string - /** `.peer:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) ~ &` */ - "_peerExpanded": string - /** `.peer:placeholder-shown ~ &` */ - "_peerPlaceholderShown": string - /** `.group:is(:focus, [data-focus]) &` */ - "_groupFocus": string - /** `.group:is(:hover, [data-hover]) &` */ - "_groupHover": string - /** `.group:is(:active, [data-active]) &` */ - "_groupActive": string - /** `.group:focus-within &` */ - "_groupFocusWithin": string - /** `.group:is(:focus-visible, [data-focus-visible]) &` */ - "_groupFocusVisible": string - /** `.group:is(:disabled, [disabled], [data-disabled]) &` */ - "_groupDisabled": string - /** `.group:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) &` */ - "_groupChecked": string - /** `.group:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) &` */ - "_groupExpanded": string - /** `.group:invalid &` */ - "_groupInvalid": string - /** `&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate"])` */ - "_indeterminate": string - /** `&:is(:required, [data-required], [aria-required=true])` */ - "_required": string - /** `&:is(:valid, [data-valid])` */ - "_valid": string - /** `&:is(:invalid, [data-invalid])` */ - "_invalid": string - /** `&:autofill` */ - "_autofill": string - /** `&:in-range` */ - "_inRange": string - /** `&:out-of-range` */ - "_outOfRange": string - /** `&::placeholder, &[data-placeholder]` */ - "_placeholder": string - /** `&:is(:placeholder-shown, [data-placeholder-shown])` */ - "_placeholderShown": string - /** `&:is([aria-pressed=true], [data-pressed])` */ - "_pressed": string - /** `&:is([aria-selected=true], [data-selected])` */ - "_selected": string - /** `&:default` */ - "_default": string - /** `&:optional` */ - "_optional": string - /** `&:is([open], [data-open], [data-state="open"])` */ - "_open": string - /** `&:is([closed], [data-closed], [data-state="closed"])` */ - "_closed": string - /** `&:fullscreen` */ - "_fullscreen": string - /** `&:is([data-loading], [aria-busy=true])` */ - "_loading": string - /** `&[aria-current=page]` */ - "_currentPage": string - /** `&[aria-current=step]` */ - "_currentStep": string - /** `@media (prefers-reduced-motion: reduce)` */ - "_motionReduce": string - /** `@media (prefers-reduced-motion: no-preference)` */ - "_motionSafe": string - /** `@media print` */ - "_print": string - /** `@media (orientation: landscape)` */ - "_landscape": string - /** `@media (orientation: portrait)` */ - "_portrait": string - /** `.dark &` */ - "_dark": string - /** `.light &` */ - "_light": string - /** `@media (prefers-color-scheme: dark)` */ - "_osDark": string - /** `@media (prefers-color-scheme: light)` */ - "_osLight": string - /** `@media (forced-colors: active)` */ - "_highContrast": string - /** `@media (prefers-contrast: less)` */ - "_lessContrast": string - /** `@media (prefers-contrast: more)` */ - "_moreContrast": string - /** `[dir=ltr] &` */ - "_ltr": string - /** `[dir=rtl] &` */ - "_rtl": string - /** `&::-webkit-scrollbar` */ - "_scrollbar": string - /** `&::-webkit-scrollbar-thumb` */ - "_scrollbarThumb": string - /** `&::-webkit-scrollbar-track` */ - "_scrollbarTrack": string - /** `&[data-orientation=horizontal]` */ - "_horizontal": string - /** `&[data-orientation=vertical]` */ - "_vertical": string - /** `@starting-style` */ - "_starting": string - /** `@media screen and (min-width: 40rem)` */ - "sm": string - /** `@media screen and (min-width: 40rem) and (max-width: 47.9975rem)` */ - "smOnly": string - /** `@media screen and (max-width: 39.9975rem)` */ - "smDown": string - /** `@media screen and (min-width: 48rem)` */ - "md": string - /** `@media screen and (min-width: 48rem) and (max-width: 63.9975rem)` */ - "mdOnly": string - /** `@media screen and (max-width: 47.9975rem)` */ - "mdDown": string - /** `@media screen and (min-width: 64rem)` */ - "lg": string - /** `@media screen and (min-width: 64rem) and (max-width: 79.9975rem)` */ - "lgOnly": string - /** `@media screen and (max-width: 63.9975rem)` */ - "lgDown": string - /** `@media screen and (min-width: 80rem)` */ - "xl": string - /** `@media screen and (min-width: 80rem) and (max-width: 95.9975rem)` */ - "xlOnly": string - /** `@media screen and (max-width: 79.9975rem)` */ - "xlDown": string - /** `@media screen and (min-width: 96rem)` */ - "2xl": string - /** `@media screen and (min-width: 96rem)` */ - "2xlOnly": string - /** `@media screen and (max-width: 95.9975rem)` */ - "2xlDown": string - /** `@media screen and (min-width: 40rem) and (max-width: 47.9975rem)` */ - "smToMd": string - /** `@media screen and (min-width: 40rem) and (max-width: 63.9975rem)` */ - "smToLg": string - /** `@media screen and (min-width: 40rem) and (max-width: 79.9975rem)` */ - "smToXl": string - /** `@media screen and (min-width: 40rem) and (max-width: 95.9975rem)` */ - "smTo2xl": string - /** `@media screen and (min-width: 48rem) and (max-width: 63.9975rem)` */ - "mdToLg": string - /** `@media screen and (min-width: 48rem) and (max-width: 79.9975rem)` */ - "mdToXl": string - /** `@media screen and (min-width: 48rem) and (max-width: 95.9975rem)` */ - "mdTo2xl": string - /** `@media screen and (min-width: 64rem) and (max-width: 79.9975rem)` */ - "lgToXl": string - /** `@media screen and (min-width: 64rem) and (max-width: 95.9975rem)` */ - "lgTo2xl": string - /** `@media screen and (min-width: 80rem) and (max-width: 95.9975rem)` */ - "xlTo2xl": string - /** `@container (min-width: 20rem)` */ - "@/xs": string - /** `@container (min-width: 24rem)` */ - "@/sm": string - /** `@container (min-width: 28rem)` */ - "@/md": string - /** `@container (min-width: 32rem)` */ - "@/lg": string - /** `@container (min-width: 36rem)` */ - "@/xl": string - /** `@container (min-width: 42rem)` */ - "@/2xl": string - /** `@container (min-width: 48rem)` */ - "@/3xl": string - /** `@container (min-width: 56rem)` */ - "@/4xl": string - /** `@container (min-width: 64rem)` */ - "@/5xl": string - /** `@container (min-width: 72rem)` */ - "@/6xl": string - /** `@container (min-width: 80rem)` */ - "@/7xl": string - /** `@container (min-width: 90rem)` */ - "@/8xl": string - /** The base (=no conditions) styles to apply */ - "base": string + /** `&:is(:hover, [data-hover])` */ + _hover: string; + /** `&:is(:focus, [data-focus])` */ + _focus: string; + /** `&:focus-within` */ + _focusWithin: string; + /** `&:is(:focus-visible, [data-focus-visible])` */ + _focusVisible: string; + /** `&:is(:disabled, [disabled], [data-disabled])` */ + _disabled: string; + /** `&:is(:active, [data-active])` */ + _active: string; + /** `&:visited` */ + _visited: string; + /** `&:target` */ + _target: string; + /** `&:is(:read-only, [data-read-only])` */ + _readOnly: string; + /** `&:read-write` */ + _readWrite: string; + /** `&:is(:empty, [data-empty])` */ + _empty: string; + /** `&:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"])` */ + _checked: string; + /** `&:enabled` */ + _enabled: string; + /** `&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])` */ + _expanded: string; + /** `&[data-highlighted]` */ + _highlighted: string; + /** `&::before` */ + _before: string; + /** `&::after` */ + _after: string; + /** `&::first-letter` */ + _firstLetter: string; + /** `&::first-line` */ + _firstLine: string; + /** `&::marker` */ + _marker: string; + /** `&::selection` */ + _selection: string; + /** `&::file-selector-button` */ + _file: string; + /** `&::backdrop` */ + _backdrop: string; + /** `&:first-child` */ + _first: string; + /** `&:last-child` */ + _last: string; + /** `&:only-child` */ + _only: string; + /** `&:nth-child(even)` */ + _even: string; + /** `&:nth-child(odd)` */ + _odd: string; + /** `&:first-of-type` */ + _firstOfType: string; + /** `&:last-of-type` */ + _lastOfType: string; + /** `&:only-of-type` */ + _onlyOfType: string; + /** `.peer:is(:focus, [data-focus]) ~ &` */ + _peerFocus: string; + /** `.peer:is(:hover, [data-hover]) ~ &` */ + _peerHover: string; + /** `.peer:is(:active, [data-active]) ~ &` */ + _peerActive: string; + /** `.peer:focus-within ~ &` */ + _peerFocusWithin: string; + /** `.peer:is(:focus-visible, [data-focus-visible]) ~ &` */ + _peerFocusVisible: string; + /** `.peer:is(:disabled, [disabled], [data-disabled]) ~ &` */ + _peerDisabled: string; + /** `.peer:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ &` */ + _peerChecked: string; + /** `.peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &` */ + _peerInvalid: string; + /** `.peer:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) ~ &` */ + _peerExpanded: string; + /** `.peer:placeholder-shown ~ &` */ + _peerPlaceholderShown: string; + /** `.group:is(:focus, [data-focus]) &` */ + _groupFocus: string; + /** `.group:is(:hover, [data-hover]) &` */ + _groupHover: string; + /** `.group:is(:active, [data-active]) &` */ + _groupActive: string; + /** `.group:focus-within &` */ + _groupFocusWithin: string; + /** `.group:is(:focus-visible, [data-focus-visible]) &` */ + _groupFocusVisible: string; + /** `.group:is(:disabled, [disabled], [data-disabled]) &` */ + _groupDisabled: string; + /** `.group:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) &` */ + _groupChecked: string; + /** `.group:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) &` */ + _groupExpanded: string; + /** `.group:invalid &` */ + _groupInvalid: string; + /** `&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate"])` */ + _indeterminate: string; + /** `&:is(:required, [data-required], [aria-required=true])` */ + _required: string; + /** `&:is(:valid, [data-valid])` */ + _valid: string; + /** `&:is(:invalid, [data-invalid])` */ + _invalid: string; + /** `&:autofill` */ + _autofill: string; + /** `&:in-range` */ + _inRange: string; + /** `&:out-of-range` */ + _outOfRange: string; + /** `&::placeholder, &[data-placeholder]` */ + _placeholder: string; + /** `&:is(:placeholder-shown, [data-placeholder-shown])` */ + _placeholderShown: string; + /** `&:is([aria-pressed=true], [data-pressed])` */ + _pressed: string; + /** `&:is([aria-selected=true], [data-selected])` */ + _selected: string; + /** `&:default` */ + _default: string; + /** `&:optional` */ + _optional: string; + /** `&:is([open], [data-open], [data-state="open"])` */ + _open: string; + /** `&:is([closed], [data-closed], [data-state="closed"])` */ + _closed: string; + /** `&:fullscreen` */ + _fullscreen: string; + /** `&:is([data-loading], [aria-busy=true])` */ + _loading: string; + /** `&[aria-current=page]` */ + _currentPage: string; + /** `&[aria-current=step]` */ + _currentStep: string; + /** `@media (prefers-reduced-motion: reduce)` */ + _motionReduce: string; + /** `@media (prefers-reduced-motion: no-preference)` */ + _motionSafe: string; + /** `@media print` */ + _print: string; + /** `@media (orientation: landscape)` */ + _landscape: string; + /** `@media (orientation: portrait)` */ + _portrait: string; + /** `.dark &` */ + _dark: string; + /** `.light &` */ + _light: string; + /** `@media (prefers-color-scheme: dark)` */ + _osDark: string; + /** `@media (prefers-color-scheme: light)` */ + _osLight: string; + /** `@media (forced-colors: active)` */ + _highContrast: string; + /** `@media (prefers-contrast: less)` */ + _lessContrast: string; + /** `@media (prefers-contrast: more)` */ + _moreContrast: string; + /** `[dir=ltr] &` */ + _ltr: string; + /** `[dir=rtl] &` */ + _rtl: string; + /** `&::-webkit-scrollbar` */ + _scrollbar: string; + /** `&::-webkit-scrollbar-thumb` */ + _scrollbarThumb: string; + /** `&::-webkit-scrollbar-track` */ + _scrollbarTrack: string; + /** `&[data-orientation=horizontal]` */ + _horizontal: string; + /** `&[data-orientation=vertical]` */ + _vertical: string; + /** `@starting-style` */ + _starting: string; + /** `@media screen and (min-width: 22.5rem)` */ + xs: string; + /** `@media screen and (min-width: 22.5rem) and (max-width: 37.4975rem)` */ + xsOnly: string; + /** `@media screen and (max-width: 22.4975rem)` */ + xsDown: string; + /** `@media screen and (min-width: 37.5rem)` */ + sm: string; + /** `@media screen and (min-width: 37.5rem) and (max-width: 56.2475rem)` */ + smOnly: string; + /** `@media screen and (max-width: 37.4975rem)` */ + smDown: string; + /** `@media screen and (min-width: 56.25rem)` */ + md: string; + /** `@media screen and (min-width: 56.25rem) and (max-width: 79.9975rem)` */ + mdOnly: string; + /** `@media screen and (max-width: 56.2475rem)` */ + mdDown: string; + /** `@media screen and (min-width: 80rem)` */ + lg: string; + /** `@media screen and (min-width: 80rem)` */ + lgOnly: string; + /** `@media screen and (max-width: 79.9975rem)` */ + lgDown: string; + /** `@media screen and (min-width: 22.5rem) and (max-width: 37.4975rem)` */ + xsToSm: string; + /** `@media screen and (min-width: 22.5rem) and (max-width: 56.2475rem)` */ + xsToMd: string; + /** `@media screen and (min-width: 22.5rem) and (max-width: 79.9975rem)` */ + xsToLg: string; + /** `@media screen and (min-width: 37.5rem) and (max-width: 56.2475rem)` */ + smToMd: string; + /** `@media screen and (min-width: 37.5rem) and (max-width: 79.9975rem)` */ + smToLg: string; + /** `@media screen and (min-width: 56.25rem) and (max-width: 79.9975rem)` */ + mdToLg: string; + /** `@container (min-width: 20rem)` */ + "@/xs": string; + /** `@container (min-width: 24rem)` */ + "@/sm": string; + /** `@container (min-width: 28rem)` */ + "@/md": string; + /** `@container (min-width: 32rem)` */ + "@/lg": string; + /** `@container (min-width: 36rem)` */ + "@/xl": string; + /** `@container (min-width: 42rem)` */ + "@/2xl": string; + /** `@container (min-width: 48rem)` */ + "@/3xl": string; + /** `@container (min-width: 56rem)` */ + "@/4xl": string; + /** `@container (min-width: 64rem)` */ + "@/5xl": string; + /** `@container (min-width: 72rem)` */ + "@/6xl": string; + /** `@container (min-width: 80rem)` */ + "@/7xl": string; + /** `@container (min-width: 90rem)` */ + "@/8xl": string; + /** The base (=no conditions) styles to apply */ + base: string; } export type ConditionalValue = | V | Array | { - [K in keyof Conditions]?: ConditionalValue - } + [K in keyof Conditions]?: ConditionalValue; + }; export type Nested

= P & { - [K in Selectors]?: Nested

+ [K in Selectors]?: Nested

; } & { - [K in AnySelector]?: Nested

+ [K in AnySelector]?: Nested

; } & { - [K in keyof Conditions]?: Nested

-} + [K in keyof Conditions]?: Nested

; +}; From 972c22b5b956984c6326ec948146054b71268fc9 Mon Sep 17 00:00:00 2001 From: ghdtjgus76 Date: Fri, 7 Jun 2024 12:20:45 +0900 Subject: [PATCH 16/26] =?UTF-8?q?design:=20=EA=B8=80=EC=9E=90=20=EC=83=89?= =?UTF-8?q?=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/src/components/TextField/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/wow-ui/src/components/TextField/index.tsx b/packages/wow-ui/src/components/TextField/index.tsx index 2dba1c4d..82c1d32b 100644 --- a/packages/wow-ui/src/components/TextField/index.tsx +++ b/packages/wow-ui/src/components/TextField/index.tsx @@ -273,7 +273,7 @@ const textareaStyle = cva({ overflowY: "hidden", resize: "none", _placeholder: { - color: "sub", + color: "outline", }, _focus: { outline: "none", @@ -296,7 +296,7 @@ const textareaStyle = cva({ type: { default: { borderColor: "outline", - color: "sub", + color: "outline", }, typing: { borderColor: "primary", From e8fa0fa5251418524d2a41299f2f0f8bdc686c66 Mon Sep 17 00:00:00 2001 From: ghdtjgus76 Date: Fri, 7 Jun 2024 14:10:25 +0900 Subject: [PATCH 17/26] =?UTF-8?q?chore:=20useTextareaAutosize=20=ED=9B=85?= =?UTF-8?q?=EC=97=90=20useEffect=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../wow-ui/src/hooks/useTextareaAutosize.ts | 36 ++++++++++--------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/packages/wow-ui/src/hooks/useTextareaAutosize.ts b/packages/wow-ui/src/hooks/useTextareaAutosize.ts index ace40a14..13af9248 100644 --- a/packages/wow-ui/src/hooks/useTextareaAutosize.ts +++ b/packages/wow-ui/src/hooks/useTextareaAutosize.ts @@ -1,24 +1,26 @@ -import type { RefObject } from "react"; +import { type RefObject, useEffect } from "react"; export const useTextareaAutosize = (ref: RefObject) => { - const textareaElement = ref.current; - if (!textareaElement) return; + useEffect(() => { + const textareaElement = ref.current; + if (!textareaElement) return; - const handleResize = () => { - textareaElement.style.height = "auto"; - textareaElement.style.height = `${textareaElement.scrollHeight}px`; - }; + const handleResize = () => { + textareaElement.style.height = "auto"; + textareaElement.style.height = `${textareaElement.scrollHeight}px`; + }; - const handleOverflow = () => { - textareaElement.style.overflowY = - textareaElement.scrollHeight > 120 ? "scroll" : "hidden"; - }; + const handleOverflow = () => { + textareaElement.style.overflowY = + textareaElement.scrollHeight > 120 ? "scroll" : "hidden"; + }; - textareaElement.addEventListener("input", handleResize); - textareaElement.addEventListener("input", handleOverflow); + textareaElement.addEventListener("input", handleResize); + textareaElement.addEventListener("input", handleOverflow); - return () => { - textareaElement.removeEventListener("input", handleResize); - textareaElement.removeEventListener("input", handleOverflow); - }; + return () => { + textareaElement.removeEventListener("input", handleResize); + textareaElement.removeEventListener("input", handleOverflow); + }; + }, [ref]); }; From 0c6a97aadfe763a7f562f000473cbd0ad32447a2 Mon Sep 17 00:00:00 2001 From: ghdtjgus76 Date: Sat, 8 Jun 2024 00:28:09 +0900 Subject: [PATCH 18/26] =?UTF-8?q?fix:=20=ED=85=8D=EC=8A=A4=ED=8A=B8?= =?UTF-8?q?=ED=95=84=EB=93=9C=20=EC=83=89=EC=83=81=20=EB=8C=80=EC=A1=B0=20?= =?UTF-8?q?=EA=B4=80=EB=A0=A8=20=EC=9B=B9=20=EC=A0=91=EA=B7=BC=EC=84=B1=20?= =?UTF-8?q?=ED=85=8C=EC=8A=A4=ED=8A=B8=20=EB=81=84=EB=8F=84=EB=A1=9D=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../wow-ui/src/components/TextField/TextField.stories.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/wow-ui/src/components/TextField/TextField.stories.tsx b/packages/wow-ui/src/components/TextField/TextField.stories.tsx index a48841f6..d8dd239a 100644 --- a/packages/wow-ui/src/components/TextField/TextField.stories.tsx +++ b/packages/wow-ui/src/components/TextField/TextField.stories.tsx @@ -9,6 +9,11 @@ const meta = { tags: ["autodocs"], parameters: { componentSubtitle: "텍스트필드 컴포넌트", + a11y: { + config: { + rules: [{ id: "color-contrast", enabled: false }], + }, + }, }, argTypes: { label: { From fef6914233496812585d074b2c6780d4061110fe Mon Sep 17 00:00:00 2001 From: ghdtjgus76 Date: Sat, 8 Jun 2024 00:50:07 +0900 Subject: [PATCH 19/26] =?UTF-8?q?chore:=20=ED=8F=AC=EC=BB=A4=EC=8A=A4?= =?UTF-8?q?=EB=90=9C=20=EA=B2=BD=EC=9A=B0=EB=8F=84=20typing=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EC=B2=98=EB=A6=AC=ED=95=98=EB=8F=84=EB=A1=9D=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/src/components/TextField/index.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/wow-ui/src/components/TextField/index.tsx b/packages/wow-ui/src/components/TextField/index.tsx index 82c1d32b..c5969596 100644 --- a/packages/wow-ui/src/components/TextField/index.tsx +++ b/packages/wow-ui/src/components/TextField/index.tsx @@ -116,6 +116,9 @@ const TextField = forwardRef( }; const handleFocus = () => { + if (variant !== "typing") { + setVariant("typing"); + } onFocus?.(); }; From 08b135dac2dd73859ec8a770940d4a914f332678 Mon Sep 17 00:00:00 2001 From: ghdtjgus76 Date: Sat, 8 Jun 2024 01:27:18 +0900 Subject: [PATCH 20/26] =?UTF-8?q?chore:=20=EC=8A=A4=ED=86=A0=EB=A6=AC?= =?UTF-8?q?=EB=B6=81=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20=EB=9F=AC=EB=84=88=20?= =?UTF-8?q?a11y=20rule=20=EA=B4=80=EB=A0=A8=20=EC=84=A4=EC=A0=95=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/.storybook/test-runner.ts | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/wow-ui/.storybook/test-runner.ts b/packages/wow-ui/.storybook/test-runner.ts index fc12dcc4..7c8c95b8 100644 --- a/packages/wow-ui/.storybook/test-runner.ts +++ b/packages/wow-ui/.storybook/test-runner.ts @@ -1,5 +1,5 @@ -import type { TestRunnerConfig } from "@storybook/test-runner"; -import { injectAxe, checkA11y } from "axe-playwright"; +import { getStoryContext, type TestRunnerConfig } from "@storybook/test-runner"; +import { injectAxe, checkA11y, configureAxe } from "axe-playwright"; /* * See https://storybook.js.org/docs/writing-tests/test-runner#test-hook-api @@ -9,7 +9,13 @@ const config: TestRunnerConfig = { async preVisit(page) { await injectAxe(page); }, - async postVisit(page) { + async postVisit(page, context) { + const storyContext = await getStoryContext(page, context); + + await configureAxe(page, { + rules: storyContext.parameters?.a11y?.config?.rules, + }); + await checkA11y(page, "#storybook-root", { detailedReport: true, detailedReportOptions: { From 31663cda566c1d56acbe534e104b2e694045116f Mon Sep 17 00:00:00 2001 From: ghdtjgus76 Date: Sat, 8 Jun 2024 01:27:27 +0900 Subject: [PATCH 21/26] =?UTF-8?q?chore:=20=EB=B3=80=EA=B2=BD=EB=90=9C=20?= =?UTF-8?q?=EB=B9=8C=EB=93=9C=20=EC=84=A4=EC=A0=95=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/wow-ui/package.json b/packages/wow-ui/package.json index cd38529a..7691090a 100644 --- a/packages/wow-ui/package.json +++ b/packages/wow-ui/package.json @@ -41,7 +41,7 @@ "import": "./dist/Switch.js" }, "./TextField": { - "types": "./dist/TextField/index.d.ts", + "types": "./dist/components/TextField/index.d.ts", "require": "./dist/TextField.cjs", "import": "./dist/TextField.js" } From c2f411efd83610054c7cf84772cf1a655f0143e6 Mon Sep 17 00:00:00 2001 From: ghdtjgus76 Date: Sun, 9 Jun 2024 11:36:00 +0900 Subject: [PATCH 22/26] =?UTF-8?q?chore:=20placeholder=20=EC=97=AC=EB=9F=AC?= =?UTF-8?q?=20=EC=A4=84=EC=9D=B8=20=EA=B2=BD=EC=9A=B0=EB=8F=84=20=EC=88=98?= =?UTF-8?q?=EC=9A=A9=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/TextField/TextField.stories.tsx | 3 ++- packages/wow-ui/src/components/TextField/index.tsx | 4 +++- packages/wow-ui/src/hooks/useTextareaAutosize.ts | 13 ++++++++++++- 3 files changed, 17 insertions(+), 3 deletions(-) diff --git a/packages/wow-ui/src/components/TextField/TextField.stories.tsx b/packages/wow-ui/src/components/TextField/TextField.stories.tsx index d8dd239a..0df9f750 100644 --- a/packages/wow-ui/src/components/TextField/TextField.stories.tsx +++ b/packages/wow-ui/src/components/TextField/TextField.stories.tsx @@ -183,7 +183,8 @@ export const WithMaxLength: Story = { export const WithPlaceholder: Story = { args: { label: "Label", - placeholder: "Placeholder", + placeholder: + "PlaceholderPlaceholderPlaceholderPlaceholderPlaceholderPlaceholderPlaceholder", }, }; diff --git a/packages/wow-ui/src/components/TextField/index.tsx b/packages/wow-ui/src/components/TextField/index.tsx index c5969596..b84d3da6 100644 --- a/packages/wow-ui/src/components/TextField/index.tsx +++ b/packages/wow-ui/src/components/TextField/index.tsx @@ -89,8 +89,10 @@ const TextField = forwardRef( setVariant("success"); } else if (error) { setVariant("error"); + } else if (defaultValue) { + setVariant("typed"); } - }, [error, success]); + }, [defaultValue, error, success]); useTextareaAutosize(textareaElementRef as RefObject); diff --git a/packages/wow-ui/src/hooks/useTextareaAutosize.ts b/packages/wow-ui/src/hooks/useTextareaAutosize.ts index 13af9248..c454868f 100644 --- a/packages/wow-ui/src/hooks/useTextareaAutosize.ts +++ b/packages/wow-ui/src/hooks/useTextareaAutosize.ts @@ -5,9 +5,16 @@ export const useTextareaAutosize = (ref: RefObject) => { const textareaElement = ref.current; if (!textareaElement) return; + const placeholderLines = textareaElement.placeholder.split("\n").length; + const placeholderHeight = placeholderLines * 2.625; + + const setInitialHeight = () => { + textareaElement.style.height = `${placeholderHeight}rem`; + }; + const handleResize = () => { textareaElement.style.height = "auto"; - textareaElement.style.height = `${textareaElement.scrollHeight}px`; + textareaElement.style.height = `${Math.max(placeholderHeight, textareaElement.scrollHeight)}px`; }; const handleOverflow = () => { @@ -15,6 +22,10 @@ export const useTextareaAutosize = (ref: RefObject) => { textareaElement.scrollHeight > 120 ? "scroll" : "hidden"; }; + setInitialHeight(); + handleResize(); + handleOverflow(); + textareaElement.addEventListener("input", handleResize); textareaElement.addEventListener("input", handleOverflow); From d07dc245154aaa0e2508f6adb0c39cd45cbe85e3 Mon Sep 17 00:00:00 2001 From: ghdtjgus76 Date: Sun, 9 Jun 2024 12:17:42 +0900 Subject: [PATCH 23/26] =?UTF-8?q?fix:=20=EB=A8=B8=EC=A7=80=20=EC=97=90?= =?UTF-8?q?=EB=9F=AC=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/wow-ui/package.json b/packages/wow-ui/package.json index 978f4101..2a1d3d79 100644 --- a/packages/wow-ui/package.json +++ b/packages/wow-ui/package.json @@ -44,6 +44,7 @@ "types": "./dist/components/TextField/index.d.ts", "require": "./dist/TextField.cjs", "import": "./dist/TextField.js" + }, "./Chip": { "types": "./dist/components/Chip/index.d.ts", "require": "./dist/Chip.cjs", From 393dc42e5380b5b2611ee9ada8d4ef92605c87bd Mon Sep 17 00:00:00 2001 From: ghdtjgus76 Date: Sun, 9 Jun 2024 18:14:44 +0900 Subject: [PATCH 24/26] =?UTF-8?q?refactor:=20=EC=83=81=EC=88=98=EA=B0=92?= =?UTF-8?q?=20=EB=94=B0=EB=A1=9C=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/rollup.config.js | 1 + packages/wow-ui/src/hooks/useTextareaAutosize.ts | 9 +++++++-- pnpm-lock.yaml | 3 --- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/wow-ui/rollup.config.js b/packages/wow-ui/rollup.config.js index 47bbbd68..e08ef47f 100644 --- a/packages/wow-ui/rollup.config.js +++ b/packages/wow-ui/rollup.config.js @@ -22,6 +22,7 @@ export default { Box: "./src/components/Box", Button: "./src/components/Button", Checkbox: "./src/components/Checkbox", + Chip: "./src/components/Chip", Switch: "./src/components/Switch", TextField: "./src/components/TextField", }, diff --git a/packages/wow-ui/src/hooks/useTextareaAutosize.ts b/packages/wow-ui/src/hooks/useTextareaAutosize.ts index c454868f..5d472afd 100644 --- a/packages/wow-ui/src/hooks/useTextareaAutosize.ts +++ b/packages/wow-ui/src/hooks/useTextareaAutosize.ts @@ -1,12 +1,15 @@ import { type RefObject, useEffect } from "react"; +const TEXTAREA_LINE_HEIGHT = 2.625; +const MAX_TEXTAREA_HEIGHT = 120; + export const useTextareaAutosize = (ref: RefObject) => { useEffect(() => { const textareaElement = ref.current; if (!textareaElement) return; const placeholderLines = textareaElement.placeholder.split("\n").length; - const placeholderHeight = placeholderLines * 2.625; + const placeholderHeight = placeholderLines * TEXTAREA_LINE_HEIGHT; const setInitialHeight = () => { textareaElement.style.height = `${placeholderHeight}rem`; @@ -19,7 +22,9 @@ export const useTextareaAutosize = (ref: RefObject) => { const handleOverflow = () => { textareaElement.style.overflowY = - textareaElement.scrollHeight > 120 ? "scroll" : "hidden"; + textareaElement.scrollHeight > MAX_TEXTAREA_HEIGHT + ? "scroll" + : "hidden"; }; setInitialHeight(); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index eed497f3..43a44f9e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -320,9 +320,6 @@ importers: typescript: specifier: ^5.3.3 version: 5.3.3 - wowds-tokens: - specifier: workspace:^ - version: link:../wow-tokens packages: From 4594a0739bdfacb9765d274aa69e8760996aee95 Mon Sep 17 00:00:00 2001 From: ghdtjgus76 Date: Mon, 10 Jun 2024 11:49:49 +0900 Subject: [PATCH 25/26] =?UTF-8?q?chore:=20props=20style=EB=A1=9C=20?= =?UTF-8?q?=EB=84=A4=EC=9D=B4=EB=B0=8D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/src/components/Chip/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/wow-ui/src/components/Chip/index.tsx b/packages/wow-ui/src/components/Chip/index.tsx index 830bb353..c0f1863f 100644 --- a/packages/wow-ui/src/components/Chip/index.tsx +++ b/packages/wow-ui/src/components/Chip/index.tsx @@ -74,6 +74,7 @@ const Chip: ChipComponent & { displayName?: string } = forwardRef( isChecked: checkedProp = false, defaultChecked = false, disabled = false, + style, ...rest }: ChipProps, ref: any @@ -110,7 +111,7 @@ const Chip: ChipComponent & { displayName?: string } = forwardRef( aria-label={`chip ${isChecked ? "activated" : "inactivated"}`} data-selected={isChecked} ref={ref} - style={rest.customStyle} + style={style} className={chip({ clickable: disabled ? false : clickable, disabled: disabled, From e69b6a74a781a37a6a92e2ac9ff41b7a3bb9a049 Mon Sep 17 00:00:00 2001 From: ghdtjgus76 Date: Mon, 10 Jun 2024 11:53:53 +0900 Subject: [PATCH 26/26] =?UTF-8?q?chore:=20codegen=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/wow-docs/styled-system/tokens/index.js | 6 +++--- packages/wow-ui/styled-system/css/conditions.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/wow-docs/styled-system/tokens/index.js b/apps/wow-docs/styled-system/tokens/index.js index f64f4759..94ca0846 100644 --- a/apps/wow-docs/styled-system/tokens/index.js +++ b/apps/wow-docs/styled-system/tokens/index.js @@ -384,11 +384,11 @@ const tokens = { variable: "var(--colors-primary)", }, "colors.success": { - value: "#34A853", + value: "#2A8642", variable: "var(--colors-success)", }, "colors.error": { - value: "#EA4335", + value: "#BB362A", variable: "var(--colors-error)", }, "colors.backgroundNormal": { @@ -404,7 +404,7 @@ const tokens = { variable: "var(--colors-background-dimmer)", }, "colors.sub": { - value: "#8F8F8F", + value: "#6B6B6B", variable: "var(--colors-sub)", }, "colors.outline": { diff --git a/packages/wow-ui/styled-system/css/conditions.js b/packages/wow-ui/styled-system/css/conditions.js index 33673f36..df6eed4e 100644 --- a/packages/wow-ui/styled-system/css/conditions.js +++ b/packages/wow-ui/styled-system/css/conditions.js @@ -1,7 +1,7 @@ import { withoutSpace } from "../helpers.js"; const conditionsStr = - "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_default,_optional,_open,_closed,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_starting,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,2xlDown,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl,@/xs,@/sm,@/md,@/lg,@/xl,@/2xl,@/3xl,@/4xl,@/5xl,@/6xl,@/7xl,@/8xl,base"; + "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_default,_optional,_open,_closed,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_starting,xs,xsOnly,xsDown,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xsToSm,xsToMd,xsToLg,smToMd,smToLg,mdToLg,@/xs,@/sm,@/md,@/lg,@/xl,@/2xl,@/3xl,@/4xl,@/5xl,@/6xl,@/7xl,@/8xl,base"; const conditions = new Set(conditionsStr.split(",")); export function isCondition(value) {