Skip to content

Commit 2889e88

Browse files
malangcatmalangcat
committed
feat: Text component
1 parent 7162f03 commit 2889e88

File tree

15 files changed

+547
-271
lines changed

15 files changed

+547
-271
lines changed

‎docs/components/example/index.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -228,6 +228,7 @@
228228
"text-field-slicing": "import { useState } from \"react\";\nimport { FormControl, TextField } from \"seed-design/ui/text-field\";\n\nexport default function TextFieldSlicing() {\n const [value, setValue] = useState(\"\");\n\n return (\n <FormControl\n label=\"라벨\"\n description=\"6글자까지 입력 가능합니다\"\n maxGraphemeCount={6}\n value={value}\n onValueChange={({ slicedValue }) => setValue(slicedValue)}\n >\n <TextField placeholder=\"플레이스홀더\" />\n </FormControl>\n );\n}",
229229
"text-field-suffix": "import { IconWonLine } from \"@daangn/react-monochrome-icon\";\nimport { FormControl, TextField } from \"seed-design/ui/text-field\";\n\nexport default function TextFieldSuffix() {\n return (\n <div className=\"flex gap-4 w-full\">\n <FormControl label=\"라벨\" description=\"설명을 써주세요\">\n <TextField placeholder=\"플레이스홀더\" suffix=\"cm\" />\n </FormControl>\n <FormControl label=\"라벨\" description=\"설명을 써주세요\">\n <TextField placeholder=\"플레이스홀더\" suffixIcon={<IconWonLine />} />\n </FormControl>\n </div>\n );\n}",
230230
"text-field-xlarge": "import { FormControl, TextField } from \"seed-design/ui/text-field\";\n\nexport default function TextFieldXlarge() {\n return (\n <FormControl label=\"라벨\" description=\"설명을 써주세요\" size=\"xlarge\">\n <TextField placeholder=\"플레이스홀더\" />\n </FormControl>\n );\n}",
231+
"text-preview": "import { Text } from \"seed-design/ui/text\";\n\nexport default function TextPreview() {\n return (\n <Text color=\"fg.neutral\" variant=\"typeBodyMediumDefault\">\n 다람쥐 헌 쳇바퀴에 타고파\n </Text>\n );\n}",
231232
"toggle-button-brand-solid": "import { useState } from \"react\";\nimport { ToggleButton } from \"seed-design/ui/toggle-button\";\n\nexport default function ToggleButtonBrandSolid() {\n const [pressed, setPressed] = useState(false);\n\n return (\n <ToggleButton variant=\"brandSolid\" pressed={pressed} onPressedChange={setPressed}>\n {pressed ? \"선택됨\" : \"미선택\"}\n </ToggleButton>\n );\n}",
232233
"toggle-button-disabled": "import { ToggleButton } from \"seed-design/ui/toggle-button\";\n\nexport default function ToggleButtonDisabled() {\n return <ToggleButton disabled>비활성</ToggleButton>;\n}",
233234
"toggle-button-loading": "import { useState } from \"react\";\nimport { ToggleButton } from \"seed-design/ui/toggle-button\";\n\nexport default function ToggleButtonLoading() {\n const [pressed, setPressed] = useState(false);\n const [loading, setLoading] = useState(false);\n\n function handleToggle() {\n setLoading(true);\n setTimeout(() => {\n setLoading(false);\n setPressed((prev) => !prev);\n }, 2000);\n }\n\n // 이벤트 핸들링이 필요할 수 있으므로 loading은 disabled를 포함하지 않습니다. 이벤트 발생을 원하지 않는 경우, disabled 속성을 추가해주세요.\n return (\n <ToggleButton loading={loading} pressed={pressed} onPressedChange={handleToggle}>\n 시간이 걸리는 토글\n </ToggleButton>\n );\n}",

‎docs/components/example/text-preview.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { Flex } from "seed-design/ui/layout";
2+
import { Text } from "seed-design/ui/text";
3+
4+
export default function TextPreview() {
5+
return (
6+
<Flex direction="column" gap="s2">
7+
<Text color="fg.neutral" variant="labelSmallDefault">
8+
다람쥐 헌 쳇바퀴에 타고파
9+
</Text>
10+
<Text color="fg.neutral" variant="labelMediumDefault">
11+
다람쥐 헌 쳇바퀴에 타고파
12+
</Text>
13+
<Text color="fg.neutral" variant="labelLargeDefault">
14+
다람쥐 헌 쳇바퀴에 타고파
15+
</Text>
16+
<Text color="fg.neutral" variant="bodySmallDefault">
17+
다람쥐 헌 쳇바퀴에 타고파
18+
</Text>
19+
<Text color="fg.neutral" variant="bodyMediumDefault">
20+
다람쥐 헌 쳇바퀴에 타고파
21+
</Text>
22+
<Text color="fg.neutral" variant="titleSmallDefault">
23+
다람쥐 헌 쳇바퀴에 타고파
24+
</Text>
25+
<Text color="fg.neutral" variant="titleMediumDefault">
26+
다람쥐 헌 쳇바퀴에 타고파
27+
</Text>
28+
<Text color="fg.neutral" variant="titleLargeDefault">
29+
다람쥐 헌 쳇바퀴에 타고파
30+
</Text>
31+
<Text color="fg.neutral" variant="headingSmallDefault">
32+
다람쥐 헌 쳇바퀴에 타고파
33+
</Text>
34+
<Text color="fg.neutral" variant="headingMediumDefault">
35+
다람쥐 헌 쳇바퀴에 타고파
36+
</Text>
37+
<Text color="fg.neutral" variant="headingLargeDefault">
38+
다람쥐 헌 쳇바퀴에 타고파
39+
</Text>
40+
</Flex>
41+
);
42+
}

‎docs/content/docs/react/components/text.mdx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
title: Text
3+
---
4+
5+
<ComponentExample name="text-preview" />
6+
7+
## 설치
8+
9+
<Installation name="text" />
10+
11+
## Props
12+
13+
<ReactTypeTable path="./registry/ui/text.tsx" name="TextProps" />
14+
15+
## 예제

‎docs/public/__registry__/ui/text.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"name": "text",
3+
"dependencies": [
4+
"@seed-design/react"
5+
],
6+
"registries": [
7+
{
8+
"name": "text.tsx",
9+
"type": "ui",
10+
"content": "import {\n Text as SeedText,\n type TextProps as SeedTextProps,\n} from \"@seed-design/react\";\n\nexport type TextProps = SeedTextProps;\n\n/**\n * @see https://seed-design.systems/docs/components/text\n */\nexport const Text = SeedText;\n\n/**\n * This file is generated snippet from the Seed Design.\n * You can extend the functionality from this snippet if needed.\n */\n"
11+
}
12+
]
13+
}

‎docs/registry/registry-ui.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,11 @@ export const registryUI: RegistryUI = [
1515
files: ["ui:app-screen.tsx"],
1616
dependencies: ["@seed-design/stackflow"],
1717
},
18+
{
19+
name: "text",
20+
files: ["ui:text.tsx"],
21+
dependencies: ["@seed-design/react"],
22+
},
1823
{
1924
name: "alert-dialog",
2025
innerDependencies: ["action-button"],

‎docs/registry/ui/layout.tsx‎

Lines changed: 17 additions & 271 deletions
Original file line numberDiff line numberDiff line change
@@ -1,276 +1,22 @@
1-
import type {
2-
ColorBg,
3-
ColorFg,
4-
ColorPalette,
5-
ColorStroke,
6-
HorizontalSpacing,
7-
Radius,
8-
Unit,
9-
} from "@seed-design/vars";
10-
import { vars } from "@seed-design/vars";
11-
import clsx from "clsx";
12-
import * as React from "react";
1+
"use client";
132

14-
function handleColor(color: string | undefined) {
15-
if (!color) {
16-
return undefined;
17-
}
18-
const [type, value] = color.split(".");
19-
// @ts-ignore
20-
return vars.$color[type][value] ?? undefined;
21-
}
3+
import {
4+
Box as SeedBox,
5+
Flex as SeedFlex,
6+
type BoxProps as SeedBoxProps,
7+
type FlexProps as SeedFlexProps,
8+
} from "@seed-design/react";
229

23-
function handleSpacing(spacing: string | undefined) {
24-
if (!spacing) {
25-
return undefined;
26-
}
27-
// @ts-ignore
28-
return vars.$unit[spacing] ?? vars.$horizontalSpacing[spacing] ?? undefined;
29-
}
10+
export type BoxProps = SeedBoxProps;
3011

31-
function handleSize(size: string | undefined) {
32-
if (!size) {
33-
return undefined;
34-
}
35-
if (size === "full") {
36-
return "100%";
37-
}
38-
// @ts-ignore
39-
return vars.$unit[size] ?? undefined;
40-
}
12+
/**
13+
* @see https://seed-design.systems/docs/components/layout/box
14+
*/
15+
export const Box = SeedBox;
4116

42-
export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
43-
background?: `bg.${ColorBg}` | `palette.${ColorPalette}`;
17+
export type FlexProps = SeedFlexProps;
4418

45-
color?: `fg.${ColorFg}` | `palette.${ColorPalette}`;
46-
47-
borderColor?: `stroke.${ColorStroke}` | `palette.${ColorPalette}`;
48-
49-
borderWidth?: 0 | 1 | (number & {});
50-
51-
borderTopWidth?: 0 | 1 | (number & {});
52-
53-
borderRightWidth?: 0 | 1 | (number & {});
54-
55-
borderBottomWidth?: 0 | 1 | (number & {});
56-
57-
borderLeftWidth?: 0 | 1 | (number & {});
58-
59-
borderRadius?: Radius;
60-
61-
borderTopLeftRadius?: Radius;
62-
63-
borderTopRightRadius?: Radius;
64-
65-
borderBottomRightRadius?: Radius;
66-
67-
borderBottomLeftRadius?: Radius;
68-
69-
width?: Unit | "full";
70-
71-
minWidth?: Unit | "full";
72-
73-
maxWidth?: Unit | "full";
74-
75-
height?: Unit | "full";
76-
77-
minHeight?: Unit | "full";
78-
79-
maxHeight?: Unit | "full";
80-
81-
top?: 0;
82-
83-
left?: 0;
84-
85-
right?: 0;
86-
87-
bottom?: 0;
88-
89-
padding?: Unit;
90-
91-
paddingX?: Unit | HorizontalSpacing;
92-
93-
paddingY?: Unit;
94-
95-
paddingTop?: Unit;
96-
97-
paddingRight?: Unit | HorizontalSpacing;
98-
99-
paddingBottom?: Unit;
100-
101-
paddingLeft?: Unit | HorizontalSpacing;
102-
103-
display?: "block" | "flex" | "inline" | "inlineBlock" | "none";
104-
105-
position?: "relative" | "absolute" | "fixed" | "sticky";
106-
107-
overflowX?: "visible" | "hidden" | "scroll" | "auto";
108-
109-
overflowY?: "visible" | "hidden" | "scroll" | "auto";
110-
111-
flexGrow?: 0 | 1 | (number & {});
112-
113-
flexShrink?: 0 | (number & {});
114-
115-
// Flex
116-
117-
flexDirection?: "row" | "column" | "row-reverse" | "column-reverse";
118-
119-
flexWrap?: "wrap" | "nowrap";
120-
121-
justifyContent?:
122-
| "flex-start"
123-
| "flex-end"
124-
| "center"
125-
| "space-between"
126-
| "space-around";
127-
128-
alignItems?: "flex-start" | "flex-end" | "center" | "stretch";
129-
130-
alignContent?: "flex-start" | "flex-end" | "center" | "stretch";
131-
132-
gap?: Unit;
133-
}
134-
135-
export const Box = React.forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
136-
const {
137-
background,
138-
color,
139-
borderColor,
140-
borderWidth,
141-
borderTopWidth,
142-
borderRightWidth,
143-
borderBottomWidth,
144-
borderLeftWidth,
145-
borderRadius,
146-
borderTopLeftRadius,
147-
borderTopRightRadius,
148-
borderBottomRightRadius,
149-
borderBottomLeftRadius,
150-
width,
151-
minWidth,
152-
maxWidth,
153-
height,
154-
minHeight,
155-
maxHeight,
156-
padding,
157-
paddingX,
158-
paddingY,
159-
paddingTop,
160-
paddingRight,
161-
paddingBottom,
162-
paddingLeft,
163-
display,
164-
position,
165-
overflowX,
166-
overflowY,
167-
flexGrow,
168-
flexShrink,
169-
flexDirection,
170-
flexWrap,
171-
justifyContent,
172-
alignItems,
173-
alignContent,
174-
gap,
175-
className,
176-
style,
177-
...nativeProps
178-
} = props;
179-
180-
return (
181-
<div
182-
ref={ref}
183-
className={clsx("seed-box", className)}
184-
style={
185-
{
186-
"--seed-box-background": handleColor(background),
187-
"--seed-box-color": handleColor(color),
188-
"--seed-box-border-color": handleColor(borderColor),
189-
"--seed-box-border-width":
190-
borderWidth !== undefined ? `${borderWidth}px` : undefined,
191-
"--seed-box-border-top-width":
192-
borderTopWidth !== undefined ? `${borderTopWidth}px` : undefined,
193-
"--seed-box-border-right-width":
194-
borderRightWidth !== undefined
195-
? `${borderRightWidth}px`
196-
: undefined,
197-
"--seed-box-border-bottom-width":
198-
borderBottomWidth !== undefined
199-
? `${borderBottomWidth}px`
200-
: undefined,
201-
"--seed-box-border-left-width":
202-
borderLeftWidth !== undefined ? `${borderLeftWidth}px` : undefined,
203-
"--seed-box-border-radius": borderRadius
204-
? `var(--seed-v3-radius-${borderRadius})`
205-
: undefined,
206-
"--seed-box-border-top-left-radius": borderTopLeftRadius
207-
? `var(--seed-v3-radius-${borderTopLeftRadius})`
208-
: undefined,
209-
"--seed-box-border-top-right-radius": borderTopRightRadius
210-
? `var(--seed-v3-radius-${borderTopRightRadius})`
211-
: undefined,
212-
"--seed-box-border-bottom-right-radius": borderBottomRightRadius
213-
? `var(--seed-v3-radius-${borderBottomRightRadius})`
214-
: undefined,
215-
"--seed-box-border-bottom-left-radius": borderBottomLeftRadius
216-
? `var(--seed-v3-radius-${borderBottomLeftRadius})`
217-
: undefined,
218-
"--seed-box-width": handleSize(width),
219-
"--seed-box-min-width": handleSize(minWidth),
220-
"--seed-box-max-width": handleSize(maxWidth),
221-
"--seed-box-height": handleSize(height),
222-
"--seed-box-min-height": handleSize(minHeight),
223-
"--seed-box-max-height": handleSize(maxHeight),
224-
"--seed-box-padding": handleSpacing(padding),
225-
"--seed-box-padding-x": handleSpacing(paddingX),
226-
"--seed-box-padding-y": handleSpacing(paddingY),
227-
"--seed-box-padding-top": handleSpacing(paddingTop),
228-
"--seed-box-padding-right": handleSpacing(paddingRight),
229-
"--seed-box-padding-bottom": handleSpacing(paddingBottom),
230-
"--seed-box-padding-left": handleSpacing(paddingLeft),
231-
"--seed-box-display": display,
232-
"--seed-box-position": position,
233-
"--seed-box-overflow-x": overflowX,
234-
"--seed-box-overflow-y": overflowY,
235-
"--seed-box-flex-grow": flexGrow,
236-
"--seed-box-flex-shrink": flexShrink,
237-
"--seed-box-flex-direction": flexDirection,
238-
"--seed-box-flex-wrap": flexWrap,
239-
"--seed-box-justify-content": justifyContent,
240-
"--seed-box-align-items": alignItems,
241-
"--seed-box-align-content": alignContent,
242-
"--seed-box-gap": gap ? `var(--seed-v3-unit-${gap})` : undefined,
243-
...style,
244-
} as React.CSSProperties
245-
}
246-
{...nativeProps}
247-
/>
248-
);
249-
});
250-
251-
export interface FlexProps extends Omit<BoxProps, "display"> {
252-
/**
253-
* @default "flex"
254-
*/
255-
display?: "flex" | "none";
256-
257-
direction?: "row" | "column" | "row-reverse" | "column-reverse";
258-
259-
wrap?: "wrap" | "nowrap";
260-
}
261-
262-
export const Flex = React.forwardRef<HTMLDivElement, FlexProps>(
263-
(props, ref) => {
264-
const { direction, wrap, ...rest } = props;
265-
266-
return (
267-
<Box
268-
ref={ref}
269-
display="flex"
270-
flexDirection={direction}
271-
flexWrap={wrap}
272-
{...rest}
273-
/>
274-
);
275-
},
276-
);
19+
/**
20+
* @see https://seed-design.systems/docs/components/layout/flex
21+
*/
22+
export const Flex = SeedFlex;

0 commit comments

Comments
 (0)