carriera-intern 0.0.0 → 1.1.76

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

@@ -1,1253 +0,0 @@
-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>
-    `,
-  }),
-};