@seed-design/lynx-react 0.3.1 → 0.4.1

package/src/components/TagGroup/TagGroup.test.tsx

@@ -0,0 +1,73 @@
+import "@testing-library/jest-dom";
+import type { ReactNode } from "@lynx-js/react";
+import { render } from "@lynx-js/react/testing-library";
+import { describe, expect, it } from "vitest";
+
+import * as TagGroup from "./TagGroup.namespace";
+
+function getRenderedRoot() {
+  const root = elementTree.root;
+
+  if (!root) {
+    throw new Error("Expected Lynx render root to exist.");
+  }
+
+  return root;
+}
+
+function renderTagGroup(separator?: ReactNode) {
+  render(
+    <TagGroup.Root separator={separator}>
+      <TagGroup.Item>
+        <TagGroup.ItemLabel>첫 번째</TagGroup.ItemLabel>
+      </TagGroup.Item>
+      <TagGroup.Item>
+        <TagGroup.ItemLabel>두 번째</TagGroup.ItemLabel>
+      </TagGroup.Item>
+      <TagGroup.Item>
+        <TagGroup.ItemLabel>세 번째</TagGroup.ItemLabel>
+      </TagGroup.Item>
+    </TagGroup.Root>,
+  );
+}
+
+describe("TagGroup", () => {
+  it("trims surrounding whitespace from the default string separator", () => {
+    renderTagGroup();
+
+    const separators = getRenderedRoot().querySelectorAll(".seed-tag-group__separator");
+
+    expect(separators).toHaveLength(2);
+    expect(Array.from(separators, (separator) => separator.textContent)).toEqual(["·", "·"]);
+  });
+
+  it("trims surrounding whitespace from a custom string separator", () => {
+    renderTagGroup(" \n / \t ");
+
+    const separators = getRenderedRoot().querySelectorAll(".seed-tag-group__separator");
+
+    expect(Array.from(separators, (separator) => separator.textContent)).toEqual(["/", "/"]);
+  });
+
+  it("preserves a non-string separator node", () => {
+    renderTagGroup(<text className="custom-separator"> 구분 </text>);
+
+    const customSeparators = getRenderedRoot().querySelectorAll(".custom-separator");
+
+    expect(customSeparators).toHaveLength(2);
+    expect(Array.from(customSeparators, (separator) => separator.textContent)).toEqual([
+      " 구분 ",
+      " 구분 ",
+    ]);
+  });
+
+  it("keeps each separator and following item in the same wrapper", () => {
+    renderTagGroup();
+
+    const wrappers = getRenderedRoot().querySelectorAll(".seed-tag-group__separatorWrapper");
+
+    expect(wrappers).toHaveLength(2);
+    expect(wrappers[0]?.textContent).toBe("·두 번째");
+    expect(wrappers[1]?.textContent).toBe("·세 번째");
+  });
+});

package/src/components/TagGroup/TagGroup.tsx

@@ -31,7 +31,8 @@ export interface TagGroupRootProps
     TagGroupItemVariantProps,
     LynxStyledElementProps {
   /**
-   * children 사이에 삽입되는 구분자. 기본값 `" · "`.
+   * children 사이에 삽입되는 구분자. 기본값 `"·"`.
+   * 문자열을 전달하면 앞뒤 공백을 제거합니다.
    */
   separator?: React.ReactNode;
 }
@@ -41,6 +42,7 @@ export const TagGroupRoot = React.forwardRef<unknown, TagGroupRootProps>((props,
     splitMultipleVariantsProps(props, { tagGroup, tagGroupItem });
   const { children, className, separator = " · ", ...nativeProps } = otherProps;
   const classes = tagGroup(tagGroupVariantProps);
+  const normalizedSeparator = typeof separator === "string" ? separator.trim() : separator;
 
   const visibleChildren = toArray(children);
 
@@ -61,7 +63,7 @@ export const TagGroupRoot = React.forwardRef<unknown, TagGroupRootProps>((props,
               key={(child as React.ReactElement).key ?? index}
               className={classes.separatorWrapper}
             >
-              <text className={classes.separator}>{separator}</text>
+              <text className={classes.separator}>{normalizedSeparator}</text>
               {child}
             </view>
           );

package/src/components/TextField/TextField.namespace.ts

@@ -0,0 +1,16 @@
+export {
+  TextFieldPrefixIcon as PrefixIcon,
+  TextFieldPrefixText as PrefixText,
+  TextFieldRoot as Root,
+  TextFieldSuffixIcon as SuffixIcon,
+  TextFieldSuffixText as SuffixText,
+  TextFieldInput as Input,
+  TextFieldTextarea as Textarea,
+  type TextFieldPrefixIconProps as PrefixIconProps,
+  type TextFieldPrefixTextProps as PrefixTextProps,
+  type TextFieldRootProps as RootProps,
+  type TextFieldSuffixIconProps as SuffixIconProps,
+  type TextFieldSuffixTextProps as SuffixTextProps,
+  type TextFieldInputProps as InputProps,
+  type TextFieldTextareaProps as TextareaProps,
+} from "./TextField";