refactor: cleanup identity-placeholder

daangn · Feb 14, 2025 · fb24864 · fb24864
1 parent 2b19c24
commit fb24864
Show file tree

Hide file tree

Showing 8 changed files with 259 additions and 216 deletions.
diff --git a/docs/components/example/index.json b/docs/components/example/index.json
diff --git a/docs/public/__registry__/ui/identity-placeholder.json b/docs/public/__registry__/ui/identity-placeholder.json
@@ -5,7 +5,7 @@
     {
       "name": "identity-placeholder.tsx",
       "type": "ui",
-      "content": "\"use client\";\n\nimport {\n  identityPlaceholder,\n  type IdentityPlaceholderVariantProps,\n} from \"@seed-design/css/recipes/identity-placeholder\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\n\nexport interface IdentityPlaceholderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    IdentityPlaceholderVariantProps {}\n\n/**\n * @see https://v3.seed-design.io/docs/react/components/identity-placeholder\n */\nexport const IdentityPlaceholder = React.forwardRef<\n  HTMLDivElement,\n  IdentityPlaceholderProps\n>(({ className, identity = \"person\", ...otherProps }, ref) => {\n  const classNames = identityPlaceholder({ identity });\n  return (\n    <div ref={ref} className={clsx(classNames.root, className)} {...otherProps}>\n      <svg\n        className={classNames.image}\n        viewBox=\"0 0 640 640\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        role=\"img\"\n        aria-label=\"Identity placeholder\"\n      >\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M481 301c0 56-29 106-72 135a264 264 0 0 1 175 248c0 18-118 38-264 38S56 702 56 684c0-114 73-211 174-248a162 162 0 1 1 251-135Zm-203-1c8 0 14-9 14-20s-6-20-14-20-15 9-15 20 7 20 15 20Zm83 0c8 0 15-9 15-20s-7-20-15-20-15 9-15 20 7 20 15 20Zm-88 25c4-2 9-1 11 4 4 7 15 19 36 19s32-12 36-19a8 8 0 1 1 15 8c-7 12-23 27-51 27s-44-15-50-27c-3-5-1-10 3-12Z\"\n        />\n      </svg>\n    </div>\n  );\n});\nIdentityPlaceholder.displayName = \"IdentityPlaceholder\";\n"
+      "content": "\"use client\";\n\nimport { IdentityPlaceholder as SeedIdentityPlaceholder } from \"@seed-design/react\";\nimport * as React from \"react\";\n\nexport interface IdentityPlaceholderProps\n  extends SeedIdentityPlaceholder.RootProps {}\n\n/**\n * @see https://v3.seed-design.io/docs/react/components/identity-placeholder\n */\nexport const IdentityPlaceholder = React.forwardRef<\n  HTMLDivElement,\n  IdentityPlaceholderProps\n>((props, ref) => {\n  return (\n    <SeedIdentityPlaceholder.Root {...props} ref={ref}>\n      <SeedIdentityPlaceholder.Image />\n    </SeedIdentityPlaceholder.Root>\n  );\n});\nIdentityPlaceholder.displayName = \"IdentityPlaceholder\";\n"
     }
   ]
-}
+}
diff --git a/docs/registry/registry-ui.ts b/docs/registry/registry-ui.ts
@@ -110,7 +110,7 @@ export const registryUI: RegistryUI = [
   },
   {
     name: "identity-placeholder",
-    dependencies: [],
+    dependencies: ["@seed-design/react"],
     files: ["ui:identity-placeholder.tsx"],
   },
   {

diff --git a/docs/registry/ui/identity-placeholder.tsx b/docs/registry/ui/identity-placeholder.tsx
@@ -1,41 +1,22 @@
 "use client";
 
-import {
-  identityPlaceholder,
-  type IdentityPlaceholderVariantProps,
-} from "@seed-design/css/recipes/identity-placeholder";
-import clsx from "clsx";
+import { IdentityPlaceholder as SeedIdentityPlaceholder } from "@seed-design/react";
 import * as React from "react";
 
 export interface IdentityPlaceholderProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    IdentityPlaceholderVariantProps {}
+  extends SeedIdentityPlaceholder.RootProps {}
 
 /**
  * @see https://v3.seed-design.io/docs/react/components/identity-placeholder
  */
 export const IdentityPlaceholder = React.forwardRef<
   HTMLDivElement,
   IdentityPlaceholderProps
->(({ className, identity = "person", ...otherProps }, ref) => {
-  const classNames = identityPlaceholder({ identity });
+>((props, ref) => {
   return (
-    <div ref={ref} className={clsx(classNames.root, className)} {...otherProps}>
-      <svg
-        className={classNames.image}
-        viewBox="0 0 640 640"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        role="img"
-        aria-label="Identity placeholder"
-      >
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M481 301c0 56-29 106-72 135a264 264 0 0 1 175 248c0 18-118 38-264 38S56 702 56 684c0-114 73-211 174-248a162 162 0 1 1 251-135Zm-203-1c8 0 14-9 14-20s-6-20-14-20-15 9-15 20 7 20 15 20Zm83 0c8 0 15-9 15-20s-7-20-15-20-15 9-15 20 7 20 15 20Zm-88 25c4-2 9-1 11 4 4 7 15 19 36 19s32-12 36-19a8 8 0 1 1 15 8c-7 12-23 27-51 27s-44-15-50-27c-3-5-1-10 3-12Z"
-        />
-      </svg>
-    </div>
+    <SeedIdentityPlaceholder.Root {...props} ref={ref}>
+      <SeedIdentityPlaceholder.Image />
+    </SeedIdentityPlaceholder.Root>
   );
 });
 IdentityPlaceholder.displayName = "IdentityPlaceholder";
diff --git a/packages/react/src/components/IdentityPlaceholder/IdentityPlaceholder.namespace.ts b/packages/react/src/components/IdentityPlaceholder/IdentityPlaceholder.namespace.ts
@@ -0,0 +1,6 @@
+export {
+  IdentityPlaceholderRoot as Root,
+  IdentityPlaceholderImage as Image,
+  type IdentityPlaceholderRootProps as RootProps,
+  type IdentityPlaceholderImageProps as ImageProps,
+} from "./IdentityPlaceholder";
diff --git a/packages/react/src/components/IdentityPlaceholder/IdentityPlaceholder.tsx b/packages/react/src/components/IdentityPlaceholder/IdentityPlaceholder.tsx
@@ -0,0 +1,47 @@
+import {
+  identityPlaceholder,
+  type IdentityPlaceholderVariantProps,
+} from "@seed-design/css/recipes/identity-placeholder";
+import { mergeProps } from "@seed-design/dom-utils";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import * as React from "react";
+import { createStyleContext } from "../../utils/createStyleContext";
+
+const { useClassNames, withProvider } = createStyleContext(identityPlaceholder);
+
+export interface IdentityPlaceholderRootProps
+  extends IdentityPlaceholderVariantProps,
+    PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const IdentityPlaceholderRoot = withProvider<HTMLDivElement, IdentityPlaceholderRootProps>(
+  Primitive.div,
+  "root",
+);
+
+export interface IdentityPlaceholderImageProps extends React.SVGProps<SVGSVGElement> {}
+
+export const IdentityPlaceholderImage = React.forwardRef<
+  SVGSVGElement,
+  IdentityPlaceholderImageProps
+>((props, ref) => {
+  const classNames = useClassNames();
+  return (
+    <svg
+      ref={ref}
+      viewBox="0 0 640 640"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-label="Identity placeholder"
+      {...mergeProps({ className: classNames.image }, props)}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M481 301c0 56-29 106-72 135a264 264 0 0 1 175 248c0 18-118 38-264 38S56 702 56 684c0-114 73-211 174-248a162 162 0 1 1 251-135Zm-203-1c8 0 14-9 14-20s-6-20-14-20-15 9-15 20 7 20 15 20Zm83 0c8 0 15-9 15-20s-7-20-15-20-15 9-15 20 7 20 15 20Zm-88 25c4-2 9-1 11 4 4 7 15 19 36 19s32-12 36-19a8 8 0 1 1 15 8c-7 12-23 27-51 27s-44-15-50-27c-3-5-1-10 3-12Z"
+      />
+    </svg>
+  );
+});
+IdentityPlaceholderImage.displayName = "IdentityPlaceholderImage";
diff --git a/packages/react/src/components/IdentityPlaceholder/index.ts b/packages/react/src/components/IdentityPlaceholder/index.ts
@@ -0,0 +1,8 @@
+export {
+  IdentityPlaceholderRoot,
+  IdentityPlaceholderImage,
+  type IdentityPlaceholderRootProps,
+  type IdentityPlaceholderImageProps,
+} from "./IdentityPlaceholder";
+
+export * as IdentityPlaceholder from "./IdentityPlaceholder.namespace";
diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts
@@ -17,6 +17,7 @@ export * from "./ExtendedFab";
 export * from "./Fab";
 export * from "./Flex";
 export * from "./HelpBubble";
+export * from "./IdentityPlaceholder";
 export * from "./Inline";
 export * from "./InlineBanner";
 export * from "./MannerTempBadge";