feat(ds): avatar description (#16)

design-system/molecules/avatar-description/adapters/default/default.adapter.tsx

@@ -0,0 +1,26 @@
+import { Avatar } from "@/design-system/atoms/avatar";
+import { Typo } from "@/design-system/atoms/typo";
+
+import { cn } from "@/shared/helpers/cn";
+
+import { AvatarDescriptionPort } from "../../avatar-description.types";
+import { AvatarDescriptionDefaultVariants } from "./default.variants";
+
+export function AvatarDescriptionDefaultAdapter({
+  avatarProps,
+  labelProps,
+  descriptionProps,
+  classNames,
+}: AvatarDescriptionPort) {
+  const slots = AvatarDescriptionDefaultVariants();
+
+  return (
+    <div className={cn(slots.base(), classNames?.base)}>
+      <Avatar {...avatarProps} size={"m"} />
+      <div className={"grid"}>
+        <Typo {...labelProps} size={"xs"} weight={"medium"} color={"text-1"} />
+        {descriptionProps ? <Typo {...labelProps} size={"xxs"} weight={"regular"} color={"text-2"} /> : null}
+      </div>
+    </div>
+  );
+}

design-system/molecules/avatar-description/adapters/default/default.variants.ts

@@ -0,0 +1,9 @@
+import { tv } from "tailwind-variants";
+
+export const AvatarDescriptionDefaultVariants = tv({
+  slots: {
+    base: "flex gap-1",
+  },
+  variants: {},
+  defaultVariants: {},
+});

design-system/molecules/avatar-description/avatar-description.loading.tsx

@@ -0,0 +1,28 @@
+import { ComponentProps } from "react";
+
+import { AvatarLoading } from "@/design-system/atoms/avatar/avatar.loading";
+import { Skeleton } from "@/design-system/atoms/skeleton";
+import { AvatarDescriptionDefaultVariants } from "@/design-system/molecules/avatar-description/adapters/default/default.variants";
+import { AvatarDescriptionPort } from "@/design-system/molecules/avatar-description/avatar-description.types";
+
+import { cn } from "@/shared/helpers/cn";
+
+export function AvatarDescriptionLoading({
+  avatarShape,
+  classNames,
+}: {
+  avatarShape?: ComponentProps<typeof AvatarLoading>["shape"];
+  classNames?: AvatarDescriptionPort["classNames"];
+}) {
+  const slots = AvatarDescriptionDefaultVariants();
+
+  return (
+    <div className={cn(slots.base(), classNames?.base)}>
+      <AvatarLoading size={"m"} shape={avatarShape} />
+      <div className={"flex flex-col justify-between"}>
+        <Skeleton classNames={{ base: "h-3 w-20" }} />
+        <Skeleton classNames={{ base: "h-3 w-10" }} />
+      </div>
+    </div>
+  );
+}

design-system/molecules/avatar-description/avatar-description.stories.tsx

@@ -0,0 +1,58 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { AvatarDescriptionLoading } from "@/design-system/molecules/avatar-description/avatar-description.loading";
+
+import { AvatarDescription } from "./variants/avatar-description-default";
+
+type Story = StoryObj<typeof AvatarDescription>;
+
+const meta: Meta<typeof AvatarDescription> = {
+  component: AvatarDescription,
+  title: "Molecules/AvatarDescription",
+  tags: ["autodocs"],
+  parameters: {
+    backgrounds: {
+      default: "black",
+      values: [{ name: "black", value: "#05051E" }],
+    },
+  },
+};
+
+export const Default: Story = {
+  parameters: {
+    docs: {
+      source: { code: "<AvatarDescription />" },
+    },
+  },
+  render: args => {
+    return (
+      <div className="flex w-full items-center gap-2">
+        <AvatarDescription
+          {...args}
+          avatarProps={{ shape: "square" }}
+          labelProps={{ children: "Label" }}
+          descriptionProps={{ children: "Description" }}
+        />
+
+        <AvatarDescription {...args} avatarProps={{ shape: "square" }} labelProps={{ children: "Label" }} />
+      </div>
+    );
+  },
+};
+
+export const Loading: Story = {
+  parameters: {
+    docs: {
+      source: { code: "<AvatarDescriptionLoading />" },
+    },
+  },
+  render: () => {
+    return (
+      <div className="flex w-full items-center gap-2">
+        <AvatarDescriptionLoading avatarShape={"square"} />
+      </div>
+    );
+  },
+};
+
+export default meta;

design-system/molecules/avatar-description/avatar-description.types.ts

@@ -0,0 +1,17 @@
+import { ComponentProps } from "react";
+
+import { AvatarPort } from "@/design-system/atoms/avatar";
+import { Typo } from "@/design-system/atoms/typo";
+
+interface Variants {}
+
+interface ClassNames {
+  base: string;
+}
+
+export interface AvatarDescriptionPort extends Partial<Variants> {
+  avatarProps: AvatarPort;
+  labelProps: ComponentProps<typeof Typo>;
+  descriptionProps?: ComponentProps<typeof Typo>;
+  classNames?: Partial<ClassNames>;
+}

design-system/molecules/avatar-description/index.ts

@@ -0,0 +1,3 @@
+export * from "./variants/avatar-description-default";
+export * from "./avatar-description.types";
+export * from "./avatar-description.loading";

design-system/molecules/avatar-description/variants/avatar-description-default.tsx

@@ -0,0 +1,8 @@
+import { withComponentAdapter } from "@/design-system/helpers/with-component-adapter";
+
+import { AvatarDescriptionDefaultAdapter } from "../adapters/default/default.adapter";
+import { AvatarDescriptionPort } from "../avatar-description.types";
+
+export function AvatarDescription(props: AvatarDescriptionPort) {
+  return withComponentAdapter<AvatarDescriptionPort>(AvatarDescriptionDefaultAdapter)(props);
+}