carriera-intern 0.0.0

package/projects/carriera-intern-components/src/app/components/drop-zone/drop-zone.stories.ts

@@ -0,0 +1,1253 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { DropZoneComponent } from './drop-zone.component';
+import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
+
+const meta: Meta<DropZoneComponent> = {
+  title: 'Components/DropZone',
+  component: DropZoneComponent,
+  tags: ['autodocs'],
+  decorators: [],
+  argTypes: {
+    fileTypes: {
+      control: 'object',
+      defaultValue: { summary: '[]' },
+      description: 'Array of supported file extensions',
+    },
+    files: {
+      control: 'object',
+      defaultValue: { summary: '[]' },
+      description: 'Array of existing files to display',
+    },
+    excludedFileTypes: {
+      control: 'object',
+      defaultValue: { summary: '[]' },
+      description: 'Array of file extensions to exclude from supported types',
+    },
+    crop: {
+      control: 'boolean',
+      defaultValue: false,
+      description: 'Enable image cropping functionality',
+    },
+    variant: {
+      control: { type: 'select' },
+      options: ['document', 'video', 'profile', 'cover', 'logo'],
+      defaultValue: 'document',
+      description: 'Visual variant of the drop zone',
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['480px', '640px'],
+      defaultValue: '480px',
+      description: 'Width of the drop zone component',
+    },
+    rounded: {
+      control: 'boolean',
+      defaultValue: false,
+      description: 'Apply rounded corners (for profile/avatar variants)',
+    },
+    parentForm: {
+      control: 'object',
+      description:
+        'FormGroup object for form validation. When cropper is active, sets form to invalid state.',
+    },
+  },
+  args: {
+    fileTypes: [],
+    files: [],
+    excludedFileTypes: [],
+    crop: false,
+    variant: 'document',
+    size: '480px',
+    rounded: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<DropZoneComponent>;
+
+// --- Stories ---
+
+export const Document480px: Story = {
+  args: {
+    crop: false,
+    variant: 'document',
+    size: '480px',
+    maxCountFiles: 4,
+    fileTypes: ['pdf', 'jpg', 'png', 'jpeg', 'gif', 'avi', 'mov', 'mp4'],
+    files: [
+      {
+        fileId: 2889,
+        fileName: 'truck.jpg',
+        url: 'https://s3.rute.co/devcarriera/9/4/455/24d3bb61-a5f1-4b49-b372-000d4f15aa02-truck.jpg',
+        fileSize: 43902,
+        tags: ['HOS Agreement'],
+        tagGeneratedByUser: true,
+        updatedAt: null,
+        companyUserId: null,
+      },
+      {
+        fileId: 2890,
+        fileName: 'commercial-license-north-dakota.pdf',
+        url: 'https://s3.rute.co/devcarriera/9/4/455/d01d50b5-f8e9-41d3-ac56-4bba61679ec2-commercial-license-north-dakota.pdf',
+        fileSize: 21459,
+        tags: ['CDL'],
+        tagGeneratedByUser: false,
+        updatedAt: null,
+        companyUserId: null,
+      },
+      {
+        fileId: 2885,
+        fileName: '9375 3.21.23+ (2).pdf',
+        url: 'https://s3.rute.co/devcarriera/9/4/455/42c33389-2d62-4740-8050-77a327c6c3c8-9375 3.21.23+ (2).pdf',
+        fileSize: 66520,
+        tags: ['Invoice'],
+        tagGeneratedByUser: true,
+        updatedAt: null,
+        companyUserId: null,
+      },
+    ],
+    documentTags: [
+      { tagId: 9, tagName: 'HOS Agreement' },
+      { tagId: 10, tagName: 'Unsafe Driving Agreement' },
+      { tagId: 11, tagName: 'Maintenance Agreement' },
+      { tagId: 12, tagName: 'Application' },
+      { tagId: 13, tagName: 'MVR Auth' },
+      { tagId: 14, tagName: 'PSP Auth' },
+      { tagId: 15, tagName: 'HOS Rules' },
+      { tagId: 16, tagName: 'SPH Auth' },
+      { tagId: 50, tagName: 'SSN Card' },
+      { tagId: 51, tagName: 'TWIC Card' },
+      { tagId: 52, tagName: 'Voided Check' },
+    ],
+    // New input properties that exist on the component
+    excludedFileTypes: ['mov', 'mp4', 'avi', 'gif', 'jpeg'],
+    rounded: false,
+  },
+  render: (args) => {
+    return {
+      props: {
+        ...args,
+        onDocsChange: (newFiles: any[]) => {
+          console.log('Files changed:', newFiles);
+
+          // Convert AppFile to FileResponse format
+          const updatedFiles = newFiles.map((file) => ({
+            fileId: file.fileId || Math.random(),
+            fileName: file.fileName || '',
+            url: file.imagePreviewUrl || file.url || '',
+            fileSize: file.size || 0,
+            tags: file.tags || [],
+            tagGeneratedByUser: true,
+            updatedAt: new Date().toISOString(),
+            companyUserId: null,
+          }));
+
+          // Update the args directly
+          args.files = updatedFiles;
+
+          // Log the updated files for debugging
+          console.log('Updated args.files:', args.files);
+        },
+        logDocs: (dropZone: any) => {
+          console.log('docs():', dropZone.docs());
+        },
+      },
+      template: `
+        <div style="width: 456px">
+          <cai-drop-zone 
+          #dropZone
+            [crop]="crop" 
+            [variant]="variant" 
+            [size]="size" 
+            [files]="files"
+            [fileTypes]="fileTypes"
+            [excludedFileTypes]="excludedFileTypes"
+            [rounded]="rounded"
+            [maxCountFiles]="maxCountFiles"
+            [documentTags]="documentTags"
+            (docsChange)="onDocsChange($event)">
+          </cai-drop-zone>
+          <button (click)="logDocs(dropZone)">Log docs()</button>
+        </div>
+      `,
+    };
+  },
+};
+
+export const Document640px: Story = {
+  args: {
+    crop: false,
+    variant: 'document',
+    fileTypes: ['pdf', 'jpg', 'png', 'jpeg', 'gif', 'avi', 'mov', 'mp4'],
+    excludedFileTypes: ['mov', 'mp4', 'avi', 'gif', 'jpeg'],
+    size: '640px',
+    maxCountFiles: 4,
+    files: [
+      {
+        fileId: 3046,
+        fileName: 'Genetski algoritmi.pdf',
+        url: 'https://s3.rute.co/devcarriera/9/5/753/af7eb4ee-3810-451b-b82a-3960eb48b648-Genetski algoritmi.pdf',
+        fileSize: 995037,
+        tags: [],
+        tagGeneratedByUser: true,
+        updatedAt: null,
+        companyUserId: null,
+      },
+      {
+        fileId: 3106,
+        fileName: 'inv.pdf.pdf',
+        url: 'https://s3.rute.co/devcarriera/9/5/753/d5fbedd9-3f15-4f96-9cf1-d0bd416ae8b0-inv.pdf.pdf',
+        fileSize: 201865,
+        tags: [],
+        tagGeneratedByUser: true,
+        updatedAt: null,
+        companyUserId: null,
+      },
+      {
+        fileId: 3108,
+        fileName: '12.png.png',
+        url: 'https://s3.rute.co/devcarriera/9/5/753/4c4fd7c3-bd8e-4ac7-af6f-6b4831ac555d-12.png.png',
+        fileSize: 72891,
+        tags: [],
+        tagGeneratedByUser: true,
+        updatedAt: null,
+        companyUserId: null,
+      },
+    ],
+    documentTags: [
+      {
+        tagId: 1,
+        tagName: 'Article of Incorporation',
+      },
+      {
+        tagId: 2,
+        tagName: 'IFTA Licence',
+      },
+      {
+        tagId: 3,
+        tagName: 'EIN',
+      },
+      {
+        tagId: 4,
+        tagName: 'W9',
+      },
+    ],
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <div style="width: 616px">
+        <cai-drop-zone 
+          [files]="files" 
+          [crop]="crop" 
+          [variant]="variant" 
+          [size]="size" 
+          [fileTypes]="fileTypes"
+          [excludedFileTypes]="excludedFileTypes"
+          [maxCountFiles]="maxCountFiles" 
+        >
+        </cai-drop-zone>
+      </div>      
+    `,
+  }),
+};
+
+export const WithCropper: Story = {
+  args: {
+    crop: true,
+    variant: 'document',
+    fileTypes: ['pdf', 'jpg', 'png', 'jpeg', 'gif', 'avi', 'mov', 'mp4'],
+    excludedFileTypes: ['mov', 'mp4', 'avi', 'gif', 'jpeg'],
+    size: '480px',
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <div style="width: 456px">
+        <cai-drop-zone 
+          [crop]="crop" 
+          [variant]="variant" 
+          [size]="size" 
+          [fileTypes]="fileTypes"
+          [excludedFileTypes]="excludedFileTypes"
+        ></cai-drop-zone>
+      </div>
+    `,
+  }),
+};
+
+export const Video: Story = {
+  args: {
+    crop: false,
+    variant: 'video',
+    fileTypes: ['pdf', 'jpg', 'png', 'jpeg', 'gif', 'avi', 'mov', 'mp4'],
+    excludedFileTypes: ['pdf', 'gif', 'jpeg'],
+    size: '640px',
+    maxCountFiles: 3,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <div style="width: 616px">
+        <cai-drop-zone 
+          [files]="files" 
+          [maxCountFiles]="maxCountFiles"
+          [crop]="crop"  
+          [variant]="variant" 
+          [size]="size" 
+          [fileTypes]="fileTypes"
+          [excludedFileTypes]="excludedFileTypes"
+        ></cai-drop-zone>
+      </div>
+    `,
+  }),
+};
+
+export const ProfileRounded: Story = {
+  args: {
+    crop: true,
+    variant: 'profile',
+    rounded: true,
+    fileTypes: ['pdf', 'jpg', 'png', 'jpeg', 'gif', 'avi', 'mov', 'mp4'],
+    excludedFileTypes: ['pdf', 'gif', 'avi', 'mov', 'mp4', 'jpeg'],
+    size: '480px',
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <div style="width: 456px;">
+        <cai-drop-zone 
+          [files]="files" 
+          [crop]="crop" 
+          [variant]="variant" 
+          [rounded]="rounded" 
+          [size]="size"
+          [fileTypes]="fileTypes"
+          [excludedFileTypes]="excludedFileTypes"
+        ></cai-drop-zone>
+      </div>
+    `,
+  }),
+};
+
+export const ProfileSquare: Story = {
+  args: {
+    crop: true,
+    variant: 'profile',
+    rounded: false,
+    fileTypes: ['pdf', 'jpg', 'png', 'jpeg', 'gif', 'avi', 'mov', 'mp4'],
+    excludedFileTypes: ['pdf', 'gif', 'avi', 'mov', 'mp4', 'jpeg'],
+    size: '640px',
+    files: [
+      {
+        fileId: 1846,
+        fileName: 'run-stage.png',
+        url: 'https://s3.rute.co:9000/devcarriera/144/5/389/56e5045b-878e-4722-8dc7-0daee4fd8b0a-run-stage.png',
+        fileSize: 621568,
+        tags: ['EIN'],
+        tagGeneratedByUser: true,
+        updatedAt: null,
+        companyUserId: null,
+      },
+    ],
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <div style="width: 616px;">
+        <cai-drop-zone 
+          [crop]="crop" 
+          [files]="files"  
+          [variant]="variant" 
+          [rounded]="rounded" 
+          [size]="size"
+          [fileTypes]="fileTypes"
+          [excludedFileTypes]="excludedFileTypes"
+        ></cai-drop-zone>
+      </div>
+    `,
+  }),
+};
+
+export const Logo: Story = {
+  args: {
+    crop: true,
+    variant: 'logo',
+    fileTypes: ['pdf', 'jpg', 'png', 'jpeg', 'gif', 'avi', 'mov', 'mp4'],
+    excludedFileTypes: ['pdf', 'gif', 'avi', 'mov', 'mp4', 'jpeg'],
+    size: '640px',
+    files: [
+      {
+        fileId: 3108,
+        fileName: '12.png.png',
+        url: 'https://s3.rute.co/devcarriera/9/5/753/4c4fd7c3-bd8e-4ac7-af6f-6b4831ac555d-12.png.png',
+        fileSize: 72891,
+        tags: [],
+        tagGeneratedByUser: true,
+        updatedAt: null,
+        companyUserId: null,
+      },
+    ],
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <button (click)="dropZone.logoUrl = ''">Clear Logo</button>
+      <div style="width: 616px;">
+        <cai-drop-zone 
+          #dropZone
+          [crop]="crop"  
+          [variant]="variant" 
+          [files]="files" 
+          [size]="size"
+          [fileTypes]="fileTypes"
+          [excludedFileTypes]="excludedFileTypes"
+        ></cai-drop-zone>
+      </div>
+    `,
+  }),
+};
+
+export const Cover480px: Story = {
+  args: {
+    crop: true,
+    variant: 'cover',
+    fileTypes: ['pdf', 'jpg', 'png', 'jpeg', 'gif', 'avi', 'mov', 'mp4'],
+    excludedFileTypes: ['pdf', 'gif', 'avi', 'mov', 'mp4', 'jpeg'],
+    size: '480px',
+    files: [
+      /* 
+      {
+        fileId: 2365,
+        fileName: 'driverAvatar.png',
+        url: 'https://s3.rute.co:9000/devcarriera/144/38/389/5d898485-e2a9-427f-aa63-0f4ea542fb60-driverAvatar.png',
+        fileSize: 56580,
+        tags: null,
+        tagGeneratedByUser: false,
+        updatedAt: null,
+        companyUserId: null,
+      },
+     */
+    ],
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <div style="width: 456px;">
+        <cai-drop-zone 
+          [crop]="crop" 
+          [files]="files" 
+          [variant]="variant" 
+          [size]="size"
+          [fileTypes]="fileTypes"
+          [excludedFileTypes]="excludedFileTypes"
+        ></cai-drop-zone>
+      </div>
+    `,
+  }),
+};
+
+export const Cover640px: Story = {
+  args: {
+    crop: true,
+    variant: 'cover',
+    fileTypes: ['pdf', 'jpg', 'png', 'jpeg', 'gif', 'avi', 'mov', 'mp4'],
+    excludedFileTypes: ['pdf', 'gif', 'avi', 'mov', 'mp4', 'jpeg'],
+    size: '640px',
+    files: [],
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <div style="width: 616px;">
+        <cai-drop-zone 
+          [crop]="crop"  
+          [variant]="variant" 
+          [size]="size" 
+          [files]="files"
+          [fileTypes]="fileTypes"
+          [excludedFileTypes]="excludedFileTypes"
+        ></cai-drop-zone>
+      </div>
+    `,
+  }),
+};
+
+export const WithFormValidation: Story = {
+  args: {
+    crop: true,
+    variant: 'profile',
+    fileTypes: ['pdf', 'jpg', 'png', 'jpeg', 'gif', 'avi', 'mov', 'mp4'],
+    excludedFileTypes: ['pdf', 'gif', 'avi', 'mov', 'mp4'],
+    size: '480px',
+    rounded: true,
+  },
+  render: (args) => {
+    const fb = new FormBuilder();
+    const form = fb.group({
+      profileImage: [''],
+      name: [''],
+      email: [''],
+    });
+
+    return {
+      imports: [ReactiveFormsModule],
+      props: {
+        ...args,
+        form,
+        onSubmit: () => {
+          if (form.valid) {
+            console.log('Form is valid, submitting...', form.value);
+          } else {
+            console.log('Form is invalid:', form.errors);
+          }
+        },
+      },
+      template: `
+        <div style="width: 456px;">
+          <form [formGroup]="form" (ngSubmit)="onSubmit()">
+            <div style="margin-bottom: 20px;">
+              <cai-drop-zone 
+                [crop]="crop" 
+                [variant]="variant" 
+                [size]="size" 
+                [rounded]="rounded"
+                [parentForm]="form"
+                [fileTypes]="fileTypes"
+                [excludedFileTypes]="excludedFileTypes">
+              </cai-drop-zone>
+            </div>
+          </form>
+        </div>
+      `,
+    };
+  },
+};
+
+export const FormValidationWithCropper: Story = {
+  args: {
+    crop: true,
+    variant: 'cover',
+    fileTypes: ['jpg', 'png'],
+    size: '640px',
+  },
+  render: (args) => {
+    const fb = new FormBuilder();
+    const form = fb.group({
+      coverImage: [''],
+      title: [''],
+      description: [''],
+    });
+
+    return {
+      imports: [ReactiveFormsModule],
+      props: {
+        ...args,
+        form,
+        onSubmit: () => {
+          if (form.valid) {
+            console.log('Form is valid, submitting...', form.value);
+            alert('Form submitted successfully!');
+          } else {
+            console.log('Form is invalid:', form.errors);
+            if (form.errors?.['childInvalid']) {
+              alert(
+                'Please complete the image cropping before submitting the form.',
+              );
+            } else {
+              alert('Please fill in all required fields.');
+            }
+          }
+        },
+        onReset: () => {
+          form.reset();
+          console.log('Form reset');
+        },
+      },
+      template: `
+        <div style="width: 616px;">
+          <form [formGroup]="form" (ngSubmit)="onSubmit()">
+            <div style="margin-bottom: 20px;">
+              <label style="display: block; margin-bottom: 10px; font-weight: bold;">Cover Image:</label>
+              <cai-drop-zone 
+                [crop]="crop" 
+                [variant]="variant"
+                [size]="size"
+                [parentForm]="form">
+              </cai-drop-zone>
+            </div>
+          </form>
+        </div>
+      `,
+    };
+  },
+};
+
+export const CropperContainer: Story = {
+  args: {
+    crop: true,
+    variant: 'profile',
+    fileTypes: ['jpg', 'png'],
+    size: '480px',
+    rounded: true,
+  },
+  render: (args) => {
+    return {
+      imports: [ReactiveFormsModule],
+      props: {
+        ...args,
+      },
+      template: `
+        <div style="width: 468px; border: 1px solid black;">
+           <div style="padding: 4px 6px 4px 6px;">Documents</div>
+            <div style="margin-bottom: 12px; margin-top: 8px;">
+              <cai-drop-zone 
+                [crop]="crop" 
+                [variant]="variant" 
+                [size]="size" 
+                [rounded]="rounded"
+                [parentForm]="form">
+              </cai-drop-zone>
+            </div>
+        </div>
+      `,
+    };
+  },
+};
+
+export const CropperContainer640px: Story = {
+  args: {
+    crop: true,
+    variant: 'profile',
+    fileTypes: ['jpg', 'png'],
+    size: '640px',
+    rounded: true,
+  },
+  render: (args) => {
+    return {
+      imports: [ReactiveFormsModule],
+      props: {
+        ...args,
+      },
+      template: `
+        <div style="width: 616px; border: 1px solid black;">
+           <div style="padding: 4px 6px 4px 6px;">Documents</div>
+            <div style="margin-bottom: 12px; margin-top: 8px;">
+              <cai-drop-zone 
+                [crop]="crop" 
+                [variant]="variant" 
+                [size]="size" 
+                [rounded]="rounded"
+                [parentForm]="form">
+              </cai-drop-zone>
+            </div>
+        </div>
+      `,
+    };
+  },
+};
+
+export const UploadSlider: Story = {
+  args: {
+    crop: false,
+    variant: 'document',
+    maxCountFiles: 4,
+    fileTypes: ['pdf', 'jpg', 'png'],
+    isDetailsSlider: true,
+    files: [
+      {
+        fileId: 2300,
+        fileName: 'cdl.png',
+        url: '/assets/cdl.png',
+        fileSize: 201865,
+        tags: ['Invoice'],
+        tagGeneratedByUser: true,
+        updatedAt: null,
+        companyUserId: null,
+      },
+      {
+        fileId: 1846,
+        fileName: 'Invoice Doc.png',
+        url: '/assets/exampledoc.png',
+        fileSize: 621568,
+        tags: ['EIN'],
+        tagGeneratedByUser: true,
+        updatedAt: null,
+        companyUserId: null,
+      },
+      {
+        fileId: 2301,
+        fileName: 'truck.png',
+        url: '/assets/truck.png',
+        fileSize: 12345,
+        tags: ['Truck'],
+        tagGeneratedByUser: true,
+        updatedAt: null,
+        companyUserId: null,
+      },
+      {
+        fileId: 3394,
+        fileName: 'Genetski algoritmi.pdf',
+        fileSize: 995037,
+        tagGeneratedByUser: true,
+        tags: [],
+        updatedAt: null,
+        url: 'https://s3.rute.co/devcarriera/9/5/636/267c367b-9cf2-4ca7-a8b8-fe168c12df53-Genetski algoritmi.pdf',
+        companyUserId: null,
+      },
+    ],
+    documentTags: [],
+    // New input properties that exist on the component
+    excludedFileTypes: [],
+    rounded: false,
+  },
+  render: (args) => {
+    return {
+      props: {
+        ...args,
+        onDocsChange: (newFiles: any[]) => {
+          console.log('Files changed:', newFiles);
+
+          // Convert AppFile to FileResponse format
+          const updatedFiles = newFiles.map((file) => ({
+            fileId: file.fileId || Math.random(),
+            fileName: file.fileName || '',
+            url: file.imagePreviewUrl || file.url || '',
+            fileSize: file.size || 0,
+            tags: file.tags || [],
+            tagGeneratedByUser: true,
+            updatedAt: new Date().toISOString(),
+            companyUserId: null,
+          }));
+
+          // Update the args directly
+          args.files = updatedFiles;
+
+          // Log the updated files for debugging
+          console.log('Updated args.files:', args.files);
+        },
+        logDocs: (dropZone: any) => {
+          console.log('docs():', dropZone.docs());
+        },
+      },
+      template: `
+        <div>
+          <div style="width: 324px; padding: 4px 6px;">
+          <cai-drop-zone 
+          #dropZone
+            [crop]="crop" 
+            [variant]="variant" 
+            [files]="files"
+            [fileTypes]="fileTypes"
+            [excludedFileTypes]="excludedFileTypes"
+            [rounded]="rounded"
+            [maxCountFiles]="maxCountFiles"
+            [documentTags]="documentTags"
+            [isDetailsSlider]="isDetailsSlider"
+            (docsChange)="onDocsChange($event)">
+          </cai-drop-zone>
+          </div>
+        </div>
+      `,
+    };
+  },
+};
+
+export const DrawerMode: Story = {
+  args: {
+    crop: false,
+    variant: 'document',
+    maxCountFiles: 9,
+    fileTypes: ['pdf', 'jpg', 'png'],
+    isDrawerMode: true,
+    isDetailsSlider: false,
+    files: [
+      {
+        fileId: 2300,
+        fileName: 'cdl.png',
+        url: '/assets/cdl.png',
+        fileSize: 201865,
+        tags: ['Invoice'],
+        tagGeneratedByUser: true,
+        updatedAt: null,
+        companyUserId: null,
+      },
+      {
+        fileId: 1846,
+        fileName: 'Invoice Doc.png',
+        url: '/assets/exampledoc.png',
+        fileSize: 621568,
+        tags: ['EIN'],
+        tagGeneratedByUser: true,
+        updatedAt: null,
+        companyUserId: null,
+      },
+      {
+        fileId: 2301,
+        fileName: 'truck.png',
+        url: '/assets/truck.png',
+        fileSize: 12345,
+        tags: ['Truck'],
+        tagGeneratedByUser: true,
+        updatedAt: null,
+        companyUserId: null,
+      },
+      {
+        fileId: 2302,
+        fileName: 'invoice.png',
+        url: '/assets/invoice.png',
+        fileSize: 12345,
+        tags: ['Invoice'],
+        tagGeneratedByUser: true,
+        updatedAt: null,
+        companyUserId: null,
+      },
+      {
+        fileId: 2303,
+        fileName: 'invexample.png',
+        url: '/assets/invexample.png',
+        fileSize: 12345,
+        tags: ['Invoice'],
+        tagGeneratedByUser: true,
+        updatedAt: null,
+        companyUserId: null,
+      },
+      /*{
+        fileId: 2304,
+        fileName: 'invexample.png',
+        url: '/assets/invexample.png',
+        fileSize: 12345,
+        tags: ['Invoice'],
+        tagGeneratedByUser: true,
+        updatedAt: null,
+        companyUserId: null,
+      }, */
+      {
+        fileId: 2305,
+        fileName: 'cdl.png',
+        url: '/assets/cdl.png',
+        fileSize: 12345,
+        tags: ['CDL'],
+        tagGeneratedByUser: true,
+        updatedAt: null,
+        companyUserId: null,
+      },
+      {
+        fileId: 2306,
+        fileName: 'truck.png',
+        url: '/assets/truck.png',
+        fileSize: 12345,
+        tags: ['Truck'],
+        tagGeneratedByUser: true,
+        updatedAt: null,
+        companyUserId: null,
+      },
+      {
+        fileId: 2307,
+        fileName: 'truck.png',
+        url: '/assets/truck.png',
+        fileSize: 12345,
+        tags: ['Truck'],
+        tagGeneratedByUser: true,
+        updatedAt: null,
+        companyUserId: null,
+      },
+      {
+        fileId: 2308,
+        fileName: 'truck.png',
+        url: '/assets/truck.png',
+        fileSize: 12345,
+        tags: ['Truck'],
+        tagGeneratedByUser: true,
+        updatedAt: null,
+        companyUserId: null,
+      },
+      {
+        fileId: 2569,
+        fileName: 'cdl1.png',
+        url: '/assets/cdl.png',
+        fileSize: 201865,
+        tags: ['Invoice'],
+        tagGeneratedByUser: true,
+        updatedAt: null,
+        companyUserId: null,
+      },
+    ],
+    documentTags: [
+      {
+        tagId: 1,
+        tagName: 'Article of Incorporation',
+      },
+      {
+        tagId: 2,
+        tagName: 'IFTA Licence',
+      },
+      {
+        tagId: 3,
+        tagName: 'EIN',
+      },
+      {
+        tagId: 4,
+        tagName: 'W9',
+      },
+    ],
+    // New input properties that exist on the component
+    excludedFileTypes: [],
+    rounded: false,
+  },
+  render: (args) => {
+    return {
+      props: {
+        ...args,
+        onDocsChange: (newFiles: any[]) => {
+          console.log('Files changed:', newFiles);
+
+          // Convert AppFile to FileResponse format
+          const updatedFiles = newFiles.map((file) => ({
+            fileId: file.fileId || Math.random(),
+            fileName: file.fileName || '',
+            url: file.imagePreviewUrl || file.url || '',
+            fileSize: file.size || 0,
+            tags: file.tags || [],
+            tagGeneratedByUser: true,
+            updatedAt: new Date().toISOString(),
+            companyUserId: null,
+          }));
+
+          // Update the args directly
+          args.files = updatedFiles;
+
+          // Log the updated files for debugging
+          console.log('Updated args.files:', args.files);
+        },
+        logDocs: (dropZone: any) => {
+          console.log('docs():', dropZone.docs());
+        },
+      },
+      template: `
+        <div>
+        <div style="display: flex; position: relative; width: 100%;">
+          <cai-drop-zone 
+          #dropZone
+            [crop]="crop" 
+            [variant]="variant" 
+            [files]="files"
+            [fileTypes]="fileTypes"
+            [excludedFileTypes]="excludedFileTypes"
+            [rounded]="rounded"
+            [maxCountFiles]="maxCountFiles"
+            [documentTags]="documentTags"
+            [isDrawerMode]="isDrawerMode"
+            (docsChange)="onDocsChange($event)">
+          </cai-drop-zone>
+          </div>
+        </div>
+      `,
+    };
+  },
+};
+
+export const CoverDetails: Story = {
+  args: {
+    fileTypes: ['pdf', 'jpg', 'png'],
+    isCoverDetails: true,
+    files: [
+      {
+        fileId: 2300,
+        fileName: 'cdl.png',
+        url: '/assets/cdl.png',
+        fileSize: 201865,
+        tags: ['Invoice'],
+        tagGeneratedByUser: true,
+        updatedAt: null,
+        companyUserId: null,
+      },
+    ],
+  },
+  render: (args) => {
+    return {
+      props: {
+        ...args,
+      },
+      template: `
+        <div style="width: 428px; padding: 4px 6px;">
+          <cai-drop-zone [files]="files" [isCoverDetails]="isCoverDetails"></cai-drop-zone>
+        </div>
+        `,
+    };
+  },
+};
+
+export const DocumentsMode: Story = {
+  args: {
+    crop: false,
+    variant: 'document',
+    maxCountFiles: 9,
+    fileTypes: ['pdf', 'jpg', 'png'],
+    isDrawerMode: false,
+    isDetailsSlider: false,
+    isDocumentsMode: true,
+    files: [
+      {
+        fileId: 2300,
+        fileName: 'cdl.png',
+        url: '/assets/cdl.png',
+        fileSize: 201865,
+        tags: ['Invoice'],
+        tagGeneratedByUser: true,
+        updatedAt: null,
+        companyUserId: null,
+      },
+      {
+        fileId: 1846,
+        fileName: 'Invoice Doc.png',
+        url: '/assets/exampledoc.png',
+        fileSize: 621568,
+        tags: ['EIN'],
+        tagGeneratedByUser: true,
+        updatedAt: null,
+        companyUserId: null,
+      },
+      {
+        fileId: 2301,
+        fileName: 'truck.png',
+        url: '/assets/truck.png',
+        fileSize: 12345,
+        tags: ['Truck'],
+        tagGeneratedByUser: true,
+        updatedAt: null,
+        companyUserId: null,
+      },
+      {
+        fileId: 2302,
+        fileName: 'truck.png',
+        url: '/assets/truck.png',
+        fileSize: 12345,
+        tags: ['Truck'],
+        tagGeneratedByUser: true,
+        updatedAt: null,
+        companyUserId: null,
+      },
+      {
+        fileId: 2303,
+        fileName: 'truck.png',
+        url: '/assets/truck.png',
+        fileSize: 12345,
+        tags: ['Truck'],
+        tagGeneratedByUser: true,
+        updatedAt: null,
+        companyUserId: null,
+      },
+      {
+        fileId: 2304,
+        fileName: 'truck.png',
+        url: '/assets/truck.png',
+        fileSize: 12345,
+        tags: ['Truck'],
+        tagGeneratedByUser: true,
+        updatedAt: null,
+        companyUserId: null,
+      },
+      {
+        fileId: 2305,
+        fileName: 'truck.png',
+        url: '/assets/truck.png',
+        fileSize: 12345,
+        tags: ['Truck'],
+        tagGeneratedByUser: true,
+        updatedAt: null,
+        companyUserId: null,
+      },
+      {
+        fileId: 2306,
+        fileName: 'truck.png',
+        url: '/assets/truck.png',
+        fileSize: 12345,
+        tags: ['Truck'],
+        tagGeneratedByUser: true,
+        updatedAt: null,
+        companyUserId: null,
+      },
+      {
+        fileId: 2307,
+        fileName: 'truck.png',
+        url: '/assets/truck.png',
+        fileSize: 12345,
+        tags: ['Truck'],
+        tagGeneratedByUser: true,
+        updatedAt: null,
+        companyUserId: null,
+      },
+      {
+        fileId: 2308,
+        fileName: 'truck.png',
+        url: '/assets/truck.png',
+        fileSize: 12345,
+        tags: ['Truck'],
+        tagGeneratedByUser: true,
+        updatedAt: null,
+        companyUserId: null,
+      },
+    ],
+    documentTags: [
+      {
+        tagId: 1,
+        tagName: 'Article of Incorporation',
+      },
+      {
+        tagId: 2,
+        tagName: 'IFTA Licence',
+      },
+      {
+        tagId: 3,
+        tagName: 'EIN',
+      },
+      {
+        tagId: 4,
+        tagName: 'W9',
+      },
+    ],
+    // New input properties that exist on the component
+    excludedFileTypes: [],
+    rounded: false,
+    documentsDropZoneOpen: true,
+    searchText: '',
+  },
+  argTypes: {
+    searchText: {
+      control: 'text',
+      description: 'Search text to highlight in document file names',
+    },
+  },
+  render: (args) => {
+    return {
+      props: {
+        ...args,
+        onDocsChange: (newFiles: any[]) => {
+          console.log('Files changed:', newFiles);
+
+          // Convert AppFile to FileResponse format
+          const updatedFiles = newFiles.map((file) => ({
+            fileId: file.fileId || Math.random(),
+            fileName: file.fileName || '',
+            url: file.imagePreviewUrl || file.url || '',
+            fileSize: file.size || 0,
+            tags: file.tags || [],
+            tagGeneratedByUser: true,
+            updatedAt: new Date().toISOString(),
+            companyUserId: null,
+          }));
+
+          // Update the args directly
+          args.files = updatedFiles;
+
+          // Log the updated files for debugging
+          console.log('Updated args.files:', args.files);
+        },
+        closeDropZone: function () {
+          this['documentsDropZoneOpen'] = false;
+        },
+        onDocumentsDropZoneOpenChange: function (open: boolean) {
+          this['documentsDropZoneOpen'] = open;
+        },
+        logDocs: (dropZone: any) => {
+          console.log('docs():', dropZone.docs());
+        },
+      },
+      template: `
+            <div style="display: flex; flex-direction: column; gap: 12px;">
+              <label style="display: flex; align-items: center; gap: 8px; font-size: 14px;">
+                Search file name:
+                <input
+                  type="text"
+                  [value]="searchText"
+                  (input)="searchText = $any($event.target).value"
+                  placeholder="e.g. truck, Invoice, cdl"
+                  style="flex: 1; max-width: 280px; padding: 6px 10px; border: 1px solid #ccc; border-radius: 6px;"
+                />
+              </label>
+              <cai-drop-zone
+                #dropZone
+                [crop]="crop"
+                [variant]="variant"
+                [files]="files"
+                [fileTypes]="fileTypes"
+                [excludedFileTypes]="excludedFileTypes"
+                [rounded]="rounded"
+                [maxCountFiles]="maxCountFiles"
+                [documentTags]="documentTags"
+                [isDrawerMode]="isDrawerMode"
+                [isDocumentsMode]="isDocumentsMode"
+                [documentsDropZoneOpen]="documentsDropZoneOpen"
+                [searchText]="searchText"
+                (onDocumentDropZoneOpenChange)="onDocumentsDropZoneOpenChange($event)"
+                (docsChange)="onDocsChange($event)">
+              </cai-drop-zone>
+            </div>
+        `,
+    };
+  },
+};
+
+export const DropZoneInModal: Story = {
+  args: {
+    crop: false,
+    variant: 'document',
+    size: '640px',
+    fileTypes: ['pdf', 'jpg', 'png', 'jpeg', 'gif', 'avi', 'mov', 'mp4'],
+    excludedFileTypes: ['mov', 'mp4', 'avi', 'gif', 'jpeg'],
+    maxCountFiles: 4,
+    rounded: false,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <form
+        style="
+          width: 700px;
+          height: 520px;
+          position: relative;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-direction: column;
+          border-radius: 16px;
+          background: #ffffff;
+          box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
+        "
+      >
+          <div style="width: 100%; height: 100%; z-index: 10;">
+            <span style="font-size: 24px; font-weight: 800; color: #000;">Add Driver</span>
+          </div>
+      
+          <cai-drop-zone
+            [variant]="variant"
+            [size]="size"
+            [fileTypes]="fileTypes"
+            [excludedFileTypes]="excludedFileTypes"
+            [maxCountFiles]="maxCountFiles"
+            [rounded]="rounded"
+          >
+          </cai-drop-zone>
+      </form>
+    `,
+  }),
+};