feat: storybook of attachment

apps/storybook/src/stories/Attachment.stories.tsx

@@ -0,0 +1,109 @@
+import { ApiProvider } from "@repo/apis/providers/api-provider";
+import { AttachmentAdmin } from "@repo/ui/components/attachment/attachmentAdmin/attachmentAdmin";
+import { AttachmentLanding } from "@repo/ui/components/attachment/attachmentLanding/attachmentLanding";
+import {
+  AttachmentThumbnail,
+  AttachmentThumbnailProps,
+} from "@repo/ui/components/attachment/attachmentThumbnail/attachmentThumbnail";
+import { AttachmentProps } from "@repo/ui/components/attachment/useAttachment";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<AttachmentProps & Partial<AttachmentThumbnailProps>> = {
+  title: "Components/Attachment",
+  tags: ["autodocs"],
+
+  argTypes: {
+    title: { control: "text" },
+    fileCategory: { control: "radio", options: ["request_author", "product"] },
+    onChange: { action: "changed" },
+    multiple: { type: "boolean" },
+    maxSize: { type: "number" },
+    disabled: { type: "boolean" },
+    error: { type: "string" },
+    canDeleteFile: { type: "boolean" },
+    allowedTypes: { control: "object", description: "Array of strings" },
+    price: { type: "number" },
+    username: { type: "string" },
+    priceUnit: { type: "string" },
+    productName: { type: "string" },
+    avatar: { type: "string" },
+  },
+  args: {
+    multiple: false,
+    allowedTypes: ["jpg", "jpeg", "png"],
+    fileCategory: "request_author",
+    onChange: (fileIds: number[] | []) => {
+      console.log(fileIds);
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ✅ **Individual Button Stories**
+export const Dashboard: Story = {
+  args: {
+    title: "Upload Your CV and Portfolio",
+    onChange: (filesId: number[]) => {
+      console.log(filesId);
+    },
+    fileCategory: "request_author",
+  },
+  render: (args) => (
+    <ApiProvider>
+      <AttachmentAdmin
+        title={args.title}
+        onChange={args.onChange}
+        fileCategory={args.fileCategory}
+        allowedTypes={args.allowedTypes}
+      />
+    </ApiProvider>
+  ),
+};
+
+export const Landing: Story = {
+  args: {
+    title: "Upload Your CV and Portfolio",
+    onChange: (filesId: number[]) => {
+      console.log(filesId);
+    },
+    fileCategory: "request_author",
+  },
+  render: (args) => (
+    <ApiProvider>
+      <AttachmentLanding
+        title={args.title}
+        onChange={args.onChange}
+        fileCategory={args.fileCategory}
+      />
+    </ApiProvider>
+  ),
+};
+
+export const Thumbnail: Story = {
+  argTypes: {
+    price: { control: "number" },
+    productName: { control: "text" },
+    username: { control: "text" },
+  },
+  args: {
+    title: "Upload Your CV and Portfolio",
+    onChange: (filesId: number[]) => {
+      console.log(filesId);
+    },
+    fileCategory: "request_author",
+  },
+  render: (args) => (
+    <ApiProvider>
+      <AttachmentThumbnail
+        price={args.price || 0}
+        productName={args.productName || ""}
+        username={args.username || ""}
+        title={args.title}
+        onChange={args.onChange}
+        fileCategory={args.fileCategory}
+      />
+    </ApiProvider>
+  ),
+};

packages/ui/src/components/molecules/attachment/attachmentAdmin/attachmentAdmin.tsx

@@ -10,10 +10,9 @@ const AttachmentAdmin = (props: AttachmentProps) => {
   const { title, multiple = false, maxSize = 10, allowedTypes } = props;
   const { inputFileRef, handleChange, handleRemove, files, allowedTypesText } =
     useAttachment(props);
-
   return (
     <>
-      <Card className="bg-[#26262666] p-4 border-0 mb-3">
+      <Card className="bg-card p-4 border-0 mb-3">
         <div className="w-full border-dashed border-[0.76px] py-7 flex flex-wrap justify-center">
           <input
             type="file"
@@ -56,7 +55,7 @@ const AttachmentAdmin = (props: AttachmentProps) => {
             initial={{ opacity: 0, scale: 0.95 }}
             animate={{ opacity: 1, scale: 1 }}
           >
-            <Card className="bg-[#26262666] p-4 border-0 flex gap-4">
+            <Card className="bg-card p-4 border-0 flex gap-4">
               <ScrollArea>
                 {files.map((file) => (
                   <motion.div

packages/ui/src/components/molecules/attachment/attachmentAdmin/attachmentItem/attachmentItem.tsx

@@ -34,7 +34,7 @@ const AttachmentItem = ({ file, handleRemove }: AttachmentItemProps) => {
           {file.loading ? null : (
             <Button
               onClick={handleClick}
-              className={`p-0 flex justify-center items-center absolute top-[50%] translate-y-[-50%] bg-error left-[50%] translate-x-[-50%] w-[20px] h-[20px] rounded-sm hover:bg-error`}
+              className={`p-0 min-w-auto flex justify-center items-center absolute top-[50%] translate-y-[-50%] bg-error left-[50%] translate-x-[-50%] w-[20px] h-[20px] rounded-sm hover:bg-error`}
             >
               <Trash2 color="#fff" size={14} />
             </Button>
@@ -51,16 +51,10 @@ const AttachmentItem = ({ file, handleRemove }: AttachmentItemProps) => {
           <Typography className="text-foreground">{file.type}</Typography>
         )}
       </div>
-      <p
-        title={file.name}
-        className="w-full text-center flex items-center text-xs"
-      >
-        <span className="inline-block truncate w-[80%]">
-          {file.name.slice(0, file.name.lastIndexOf(".") - 1)}
-        </span>
-        <span className="inline-block w-[20%]">
-          {file.name.slice(file.name.lastIndexOf("."), file.name.length)}
-        </span>
+      <p title={file.name}>
+        <Typography variant="paragraph/xs" className="truncate text-center">
+          {file.name}
+        </Typography>
       </p>
       <p className="w-full text-center text-xs text-gray-500">
         {(file.size / 1024 / 1024).toFixed(2)}mb

packages/ui/src/components/molecules/attachment/attachmentThumbnail/attachmentThumbnail.tsx

@@ -9,7 +9,7 @@ import { useState } from "react";
 import { Card } from "../../../atoms/card";
 import Typography from "@repo/ui/components/typography";
 
-interface AttachmentThumbnailProps extends AttachmentProps {
+export interface AttachmentThumbnailProps extends AttachmentProps {
   avatar?: string;
   price: number;
   priceUnit?: string;
@@ -38,7 +38,7 @@ const AttachmentThumbnail = (
 
   return (
     <Card
-      className="bg-[#26262666] py-3 px-4 border-0"
+      className="bg-card py-3 px-4 border-0"
       onDrop={handleDrop}
       onDragOver={handleDragOver}
     >
@@ -155,7 +155,9 @@ const AttachmentThumbnail = (
           ) : (
             <Avatar />
           )}
-          <Typography className="text-[10px] font-normal">Ali Ebrahimi Kashef</Typography>
+          <Typography className="text-[10px] font-normal">
+            Ali Ebrahimi Kashef
+          </Typography>
         </div>
         <div className="flex flex-wrap items-center gap-1">
           <span className="cursor-pointer">

packages/ui/src/components/molecules/attachment/useAttachment.ts

@@ -94,6 +94,7 @@ const useAttachment = ({
         file.type.slice(file.type.lastIndexOf("/") + 1, file.type.length),
       ),
     );
+    console.log(allowedTypes);
     if (includesType) {
       const maxSizeBytes = maxSize * 1024 * 1024;
       const validSize = filesInput.every((file) => file.size <= maxSizeBytes);