-
Notifications
You must be signed in to change notification settings - Fork 28
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
15 changed files
with
370 additions
and
51 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| "use client"; | ||
|
|
||
| import { useState } from "react"; | ||
| import { MultilineTextField } from "seed-design/ui/multiline-text-field"; | ||
|
|
||
| export default function TextFieldPreview() { | ||
| const [value, setValue] = useState(""); | ||
|
|
||
| return ( | ||
| <div className="flex flex-col items-center w-full"> | ||
| <MultilineTextField autoFocus value={value} onValueChange={setValue} /> | ||
| <p className="text-center">현재 값: {value}</p> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| { | ||
| "title": "Text Fields", | ||
| "pages": ["..."], | ||
| "defaultOpen": true | ||
| } |
61 changes: 61 additions & 0 deletions
61
docs/content/docs/react/components/text-fields/multiline-text-field.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| --- | ||
| title: Multiline Text Field | ||
| description: 사용자가 입력할 수 있는 텍스트를 받는 컴포넌트에요. 여러 줄의 텍스트를 입력할 수 있고 높이가 자동으로 조절돼요. | ||
| --- | ||
|
|
||
| <ComponentExample name="multiline-text-field-preview" /> | ||
|
|
||
| ## 설치 | ||
|
|
||
| <Installation name="multiline-text-field" /> | ||
|
|
||
| ## Props | ||
|
|
||
| <AutoTypeTable | ||
| path="./registry/ui/multiline-text-field.tsx" | ||
| name="MultilineTextFieldProps" | ||
| /> | ||
|
|
||
| ## 예제 | ||
|
|
||
| ### Status | ||
|
|
||
| #### Enabled | ||
|
|
||
| <ComponentExample name="multiline-text-field-enabled" /> | ||
|
|
||
| #### Disabled | ||
|
|
||
| <ComponentExample name="multiline-text-field-disabled" /> | ||
|
|
||
| #### Read Only | ||
|
|
||
| <ComponentExample name="multiline-text-field-read-only" /> | ||
|
|
||
| ### Customizable Parts | ||
|
|
||
| #### Required Indicator | ||
|
|
||
| <ComponentExample name="multiline-text-field-required" /> | ||
|
|
||
| #### Optional Indicator | ||
|
|
||
| <ComponentExample name="multiline-text-field-optional" /> | ||
|
|
||
| #### Grapheme Count | ||
|
|
||
| <ComponentExample name="multiline-text-field-grapheme-count" /> | ||
|
|
||
| ### Size | ||
|
|
||
| #### XLarge | ||
|
|
||
| <ComponentExample name="multiline-text-field-xlarge" /> | ||
|
|
||
| #### Large | ||
|
|
||
| <ComponentExample name="multiline-text-field-large" /> | ||
|
|
||
| #### Medium | ||
|
|
||
| <ComponentExample name="multiline-text-field-medium" /> |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| { | ||
| "name": "multiline-text-field", | ||
| "dependencies": [ | ||
| "@seed-design/react-text-field", | ||
| "@daangn/react-monochrome-icon" | ||
| ], | ||
| "registries": [ | ||
| { | ||
| "name": "multiline-text-field.tsx", | ||
| "type": "ui", | ||
| "content": "\"use client\";\n\nimport \"@seed-design/stylesheet/textField.css\";\n\nimport * as React from \"react\";\nimport clsx from \"clsx\";\nimport {\n textField,\n type TextFieldVariantProps,\n} from \"@seed-design/recipe/textField\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\nimport {\n useTextField,\n type UseTextFieldProps,\n} from \"@seed-design/react-text-field\";\nimport type { Assign } from \"../util/types\";\n\nexport interface MultilineTextFieldProps\n extends UseTextFieldProps,\n TextFieldVariantProps {\n label?: string;\n requiredIndicator?: string;\n optionalIndicator?: string;\n\n description?: string;\n errorMessage?: string;\n\n maxGraphemeCount?: number;\n hideGraphemeCount?: boolean;\n}\n\ntype ReactMultilineTextFieldProps = Assign<\n Omit<\n React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n \"children\" | \"maxLength\"\n >,\n MultilineTextFieldProps\n>;\n\nexport const MultilineTextField = React.forwardRef<\n HTMLTextAreaElement,\n ReactMultilineTextFieldProps\n>(\n (\n {\n size = \"medium\",\n label,\n requiredIndicator,\n optionalIndicator,\n hideGraphemeCount,\n ...restProps\n },\n ref,\n ) => {\n const {\n rootProps: { className: rootClassName, ...rootProps },\n inputProps: { className: inputClassName, ...inputProps },\n labelProps: { className: labelClassName, ...labelProps },\n descriptionProps,\n errorMessageProps,\n stateProps,\n restProps: restInternalProps,\n isInvalid,\n isRequired,\n graphemes,\n } = useTextField({ ...restProps });\n\n const { description, errorMessage, maxGraphemeCount } = restProps;\n\n const classNames = textField({ size });\n\n const indicator = isRequired ? requiredIndicator : optionalIndicator;\n\n const renderDescription = !isInvalid && description;\n const renderErrorMessage = isInvalid && !!errorMessage;\n const renderCharacterCount = !hideGraphemeCount && maxGraphemeCount;\n\n return (\n <div\n className={clsx(classNames.root, rootClassName)}\n {...rootProps}\n {...stateProps}\n >\n {label && (\n // XXX\n // biome-ignore lint/a11y/noLabelWithoutControl: <explanation>\n <label {...labelProps} className={classNames.header}>\n <span className={clsx(classNames.label, labelClassName)}>\n {label}\n </span>\n {indicator && (\n <span className={classNames.indicator}>{indicator}</span>\n )}\n </label>\n )}\n <textarea\n rows={3}\n ref={ref}\n className={clsx(\n classNames.inputText,\n classNames.input,\n inputClassName,\n )}\n {...inputProps}\n {...restInternalProps}\n />\n {(renderDescription || renderErrorMessage || renderCharacterCount) && (\n <div className={classNames.footer}>\n {renderDescription && (\n <div {...descriptionProps} className={classNames.description}>\n {description}\n </div>\n )}\n {renderErrorMessage && (\n <div {...errorMessageProps} className={classNames.errorMessage}>\n <IconExclamationmarkCircleFill\n className={classNames.errorIcon}\n />\n <div>{errorMessage}</div>\n </div>\n )}\n {renderCharacterCount && (\n <div className={classNames.graphemeCount}>\n <span\n {...stateProps}\n className={classNames.currentGraphemeCount}\n >\n {graphemes.length}\n </span>\n <span className={classNames.maxGraphemeCount}>\n /{maxGraphemeCount}\n </span>\n </div>\n )}\n </div>\n )}\n </div>\n );\n },\n);\nMultilineTextField.displayName = \"MultilineTextField\";\n" | ||
| } | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,139 @@ | ||
| "use client"; | ||
|
|
||
| import "@seed-design/stylesheet/textField.css"; | ||
|
|
||
| import * as React from "react"; | ||
| import clsx from "clsx"; | ||
| import { | ||
| textField, | ||
| type TextFieldVariantProps, | ||
| } from "@seed-design/recipe/textField"; | ||
| import { IconExclamationmarkCircleFill } from "@daangn/react-monochrome-icon"; | ||
| import { | ||
| useTextField, | ||
| type UseTextFieldProps, | ||
| } from "@seed-design/react-text-field"; | ||
| import type { Assign } from "../util/types"; | ||
|
|
||
| export interface MultilineTextFieldProps | ||
| extends UseTextFieldProps, | ||
| TextFieldVariantProps { | ||
| label?: string; | ||
| requiredIndicator?: string; | ||
| optionalIndicator?: string; | ||
|
|
||
| description?: string; | ||
| errorMessage?: string; | ||
|
|
||
| maxGraphemeCount?: number; | ||
| hideGraphemeCount?: boolean; | ||
| } | ||
|
|
||
| type ReactMultilineTextFieldProps = Assign< | ||
| Omit< | ||
| React.TextareaHTMLAttributes<HTMLTextAreaElement>, | ||
| "children" | "maxLength" | ||
| >, | ||
| MultilineTextFieldProps | ||
| >; | ||
|
|
||
| export const MultilineTextField = React.forwardRef< | ||
| HTMLTextAreaElement, | ||
| ReactMultilineTextFieldProps | ||
| >( | ||
| ( | ||
| { | ||
| size = "medium", | ||
| label, | ||
| requiredIndicator, | ||
| optionalIndicator, | ||
| hideGraphemeCount, | ||
| ...restProps | ||
| }, | ||
| ref, | ||
| ) => { | ||
| const { | ||
| rootProps: { className: rootClassName, ...rootProps }, | ||
| textareaProps: { className: textareaClassName, ...textareaProps }, | ||
| labelProps: { className: labelClassName, ...labelProps }, | ||
| descriptionProps, | ||
| errorMessageProps, | ||
| stateProps, | ||
| restProps: restInternalProps, | ||
| isInvalid, | ||
| isRequired, | ||
| graphemes, | ||
| } = useTextField({ elementType: "textarea", ...restProps }); | ||
|
|
||
| const { description, errorMessage, maxGraphemeCount } = restProps; | ||
|
|
||
| const classNames = textField({ size }); | ||
|
|
||
| const indicator = isRequired ? requiredIndicator : optionalIndicator; | ||
|
|
||
| const renderDescription = !isInvalid && description; | ||
| const renderErrorMessage = isInvalid && !!errorMessage; | ||
| const renderCharacterCount = !hideGraphemeCount && maxGraphemeCount; | ||
|
|
||
| return ( | ||
| <div | ||
| className={clsx(classNames.root, rootClassName)} | ||
| {...rootProps} | ||
| {...stateProps} | ||
| > | ||
| {label && ( | ||
| // XXX | ||
| // biome-ignore lint/a11y/noLabelWithoutControl: <explanation> | ||
| <label {...labelProps} className={classNames.header}> | ||
| <span className={clsx(classNames.label, labelClassName)}> | ||
| {label} | ||
| </span> | ||
| {indicator && ( | ||
| <span className={classNames.indicator}>{indicator}</span> | ||
| )} | ||
| </label> | ||
| )} | ||
| <div className={classNames.input}> | ||
| <textarea | ||
| rows={3} | ||
| ref={ref} | ||
| className={clsx(classNames.inputText, textareaClassName)} | ||
| {...textareaProps} | ||
| {...restInternalProps} | ||
| /> | ||
| </div> | ||
| {(renderDescription || renderErrorMessage || renderCharacterCount) && ( | ||
| <div className={classNames.footer}> | ||
| {renderDescription && ( | ||
| <div {...descriptionProps} className={classNames.description}> | ||
| {description} | ||
| </div> | ||
| )} | ||
| {renderErrorMessage && ( | ||
| <div {...errorMessageProps} className={classNames.errorMessage}> | ||
| <IconExclamationmarkCircleFill | ||
| className={classNames.errorIcon} | ||
| /> | ||
| <div>{errorMessage}</div> | ||
| </div> | ||
| )} | ||
| {renderCharacterCount && ( | ||
| <div className={classNames.graphemeCount}> | ||
| <span | ||
| {...stateProps} | ||
| className={classNames.currentGraphemeCount} | ||
| > | ||
| {graphemes.length} | ||
| </span> | ||
| <span className={classNames.maxGraphemeCount}> | ||
| /{maxGraphemeCount} | ||
| </span> | ||
| </div> | ||
| )} | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| }, | ||
| ); | ||
| MultilineTextField.displayName = "MultilineTextField"; |
Oops, something went wrong.