carriera-intern 0.0.0

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

@@ -0,0 +1,787 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { AvatarComponent } from './avatar.component';
+
+const meta: Meta<AvatarComponent> = {
+  title: 'Components/Avatar',
+  component: AvatarComponent,
+  tags: ['autodocs'],
+  decorators: [],
+  args: {
+    driver: {
+      id: 0,
+      firstName: '',
+      lastName: '',
+      avatarFile: undefined,
+      avatarColor: 'Green',
+    },
+    size: 18,
+    rounded: false,
+  },
+  argTypes: {
+    driver: {
+      control: 'object',
+      defaultValue: {
+        summary: {},
+      },
+    },
+    size: {
+      control: 'select',
+      options: [18, 22, 32, 74, 160, 28],
+      defaultValue: 18,
+    },
+    rounded: {
+      control: 'boolean',
+      defaultValue: false,
+    },
+    inverse: {
+      control: 'boolean',
+      defaultValue: false,
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<AvatarComponent>;
+
+// --- Stories ---
+
+export const Size18px: Story = {
+  args: {
+    driver: {
+      id: 0,
+      firstName: 'Jovan',
+      lastName: 'Kostić',
+      avatarFile: undefined,
+      avatarColor: 'Blue',
+    },
+    size: 18,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <cai-avatar [driver]="driver" [size]="size" [rounded]="rounded" ></cai-avatar>
+    `,
+  }),
+};
+
+export const Size18pxOwner: Story = {
+  args: {
+    driver: {
+      id: 0,
+      firstName: 'Jovan',
+      lastName: 'Kostić',
+      avatarFile: undefined,
+      avatarColor: 'Green',
+      owner: true,
+    },
+    size: 18,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <cai-avatar [driver]="driver" [size]="size" [rounded]="rounded" ></cai-avatar>
+    `,
+  }),
+};
+
+export const Size18pxImage: Story = {
+  args: {
+    driver: {
+      id: 0,
+      firstName: 'Jovan',
+      lastName: 'Kostić',
+      avatarFile: {
+        fileId: 889,
+        fileName: 'driverAvatar.png',
+        url: 'https://s3.rute.co:9000/devcarriera/9/38/10/256c6555-e040-4f7f-84ac-d6dc8e2680a9-driverAvatar.png',
+        fileSize: 72994,
+        tags: null,
+        tagGeneratedByUser: false,
+        updatedAt: null,
+      },
+      avatarColor: 'Blue',
+    },
+    size: 18,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <cai-avatar [driver]="driver" [size]="size" [rounded]="rounded" ></cai-avatar>
+    `,
+  }),
+};
+
+export const Size18pxImageOwner: Story = {
+  args: {
+    driver: {
+      id: 0,
+      firstName: 'Jovan',
+      lastName: 'Kostić',
+      avatarFile: {
+        fileId: 889,
+        fileName: 'driverAvatar.png',
+        url: 'https://s3.rute.co:9000/devcarriera/9/38/10/256c6555-e040-4f7f-84ac-d6dc8e2680a9-driverAvatar.png',
+        fileSize: 72994,
+        tags: null,
+        tagGeneratedByUser: false,
+        updatedAt: null,
+      },
+      avatarColor: 'Blue',
+      owner: true,
+    },
+    size: 18,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <cai-avatar [driver]="driver" [size]="size" [rounded]="rounded" ></cai-avatar>
+    `,
+  }),
+};
+
+export const Size18pxRounded: Story = {
+  args: {
+    driver: {
+      id: 0,
+      firstName: 'Jovan',
+      lastName: 'Kostić',
+      avatarFile: undefined,
+      avatarColor: 'Blue',
+    },
+    size: 18,
+    rounded: true,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <cai-avatar [driver]="driver" [size]="size" [rounded]="rounded" ></cai-avatar>
+    `,
+  }),
+};
+
+export const Size18pxOwnerRounded: Story = {
+  args: {
+    driver: {
+      id: 0,
+      firstName: 'Jovan',
+      lastName: 'Kostić',
+      avatarFile: undefined,
+      avatarColor: 'Green',
+      owner: true,
+    },
+    size: 18,
+    rounded: true,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <cai-avatar [driver]="driver" [size]="size" [rounded]="rounded" ></cai-avatar>
+    `,
+  }),
+};
+
+export const Size18pxImageRounded: Story = {
+  args: {
+    driver: {
+      id: 0,
+      firstName: 'Jovan',
+      lastName: 'Kostić',
+      avatarFile: {
+        fileId: 889,
+        fileName: 'driverAvatar.png',
+        url: 'https://s3.rute.co:9000/devcarriera/9/38/10/256c6555-e040-4f7f-84ac-d6dc8e2680a9-driverAvatar.png',
+        fileSize: 72994,
+        tags: null,
+        tagGeneratedByUser: false,
+        updatedAt: null,
+      },
+      avatarColor: 'Blue',
+    },
+    size: 18,
+    rounded: true,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <cai-avatar [driver]="driver" [size]="size" [rounded]="rounded" ></cai-avatar>
+    `,
+  }),
+};
+
+export const Size18pxImageOwnerRounded: Story = {
+  args: {
+    driver: {
+      id: 0,
+      firstName: 'Jovan',
+      lastName: 'Kostić',
+      avatarFile: {
+        fileId: 889,
+        fileName: 'driverAvatar.png',
+        url: 'https://s3.rute.co:9000/devcarriera/9/38/10/256c6555-e040-4f7f-84ac-d6dc8e2680a9-driverAvatar.png',
+        fileSize: 72994,
+        tags: null,
+        tagGeneratedByUser: false,
+        updatedAt: null,
+      },
+      avatarColor: 'Blue',
+      owner: true,
+    },
+    size: 18,
+    rounded: true,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <cai-avatar [driver]="driver" [size]="size" [rounded]="rounded" ></cai-avatar>
+    `,
+  }),
+};
+
+export const Size22px: Story = {
+  args: {
+    driver: {
+      id: 0,
+      firstName: 'Jovan',
+      lastName: 'Kostić',
+      avatarFile: undefined,
+      avatarColor: 'Red',
+    },
+    size: 22,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <cai-avatar [driver]="driver" [size]="size" [rounded]="rounded" ></cai-avatar>
+    `,
+  }),
+};
+
+export const Size22pxOwner: Story = {
+  args: {
+    driver: {
+      id: 0,
+      firstName: 'Jovan',
+      lastName: 'Kostić',
+      avatarFile: undefined,
+      avatarColor: 'Yellow',
+      owner: true,
+    },
+    size: 22,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <cai-avatar [driver]="driver" [size]="size" [rounded]="rounded" ></cai-avatar>
+    `,
+  }),
+};
+
+export const Size22pxImage: Story = {
+  args: {
+    driver: {
+      id: 0,
+      firstName: 'Jovan',
+      lastName: 'Kostić',
+      avatarFile: {
+        fileId: 889,
+        fileName: 'driverAvatar.png',
+        url: 'https://s3.rute.co:9000/devcarriera/9/38/10/256c6555-e040-4f7f-84ac-d6dc8e2680a9-driverAvatar.png',
+        fileSize: 72994,
+        tags: null,
+        tagGeneratedByUser: false,
+        updatedAt: null,
+      },
+      avatarColor: 'Blue',
+    },
+    size: 22,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <cai-avatar [driver]="driver" [size]="size" [rounded]="rounded" ></cai-avatar>
+    `,
+  }),
+};
+
+export const Size22pxImageOwner: Story = {
+  args: {
+    driver: {
+      id: 0,
+      firstName: 'Jovan',
+      lastName: 'Kostić',
+      avatarFile: {
+        fileId: 889,
+        fileName: 'driverAvatar.png',
+        url: 'https://s3.rute.co:9000/devcarriera/9/38/10/256c6555-e040-4f7f-84ac-d6dc8e2680a9-driverAvatar.png',
+        fileSize: 72994,
+        tags: null,
+        tagGeneratedByUser: false,
+        updatedAt: null,
+      },
+      avatarColor: 'Blue',
+      owner: true,
+    },
+    size: 22,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <cai-avatar [driver]="driver" [size]="size" [rounded]="rounded" ></cai-avatar>
+    `,
+  }),
+};
+
+export const Size28px: Story = {
+  args: {
+    driver: {
+      id: 0,
+      firstName: 'Jovan',
+      lastName: 'Kostić',
+      avatarFile: undefined,
+      avatarColor: 'Red',
+    },
+    size: 28,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <cai-avatar [driver]="driver" [size]="size" [rounded]="rounded" ></cai-avatar>
+    `,
+  }),
+};
+
+export const Size28pxOwner: Story = {
+  args: {
+    driver: {
+      id: 0,
+      firstName: 'Jovan',
+      lastName: 'Kostić',
+      avatarFile: undefined,
+      avatarColor: 'Yellow',
+      owner: true,
+    },
+    size: 28,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <cai-avatar [driver]="driver" [size]="size" [rounded]="rounded" ></cai-avatar>
+    `,
+  }),
+};
+
+export const Size28pxImage: Story = {
+  args: {
+    driver: {
+      id: 0,
+      firstName: 'Jovan',
+      lastName: 'Kostić',
+      avatarFile: {
+        fileId: 889,
+        fileName: 'driverAvatar.png',
+        url: 'https://s3.rute.co:9000/devcarriera/9/38/10/256c6555-e040-4f7f-84ac-d6dc8e2680a9-driverAvatar.png',
+        fileSize: 72994,
+        tags: null,
+        tagGeneratedByUser: false,
+        updatedAt: null,
+      },
+      avatarColor: 'Blue',
+    },
+    size: 28,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <cai-avatar [driver]="driver" [size]="size" [rounded]="rounded" ></cai-avatar>
+    `,
+  }),
+};
+
+export const Size28pxImageOwner: Story = {
+  args: {
+    driver: {
+      id: 0,
+      firstName: 'Jovan',
+      lastName: 'Kostić',
+      avatarFile: {
+        fileId: 889,
+        fileName: 'driverAvatar.png',
+        url: 'https://s3.rute.co:9000/devcarriera/9/38/10/256c6555-e040-4f7f-84ac-d6dc8e2680a9-driverAvatar.png',
+        fileSize: 72994,
+        tags: null,
+        tagGeneratedByUser: false,
+        updatedAt: null,
+      },
+      avatarColor: 'Blue',
+      owner: true,
+    },
+    size: 28,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <cai-avatar [driver]="driver" [size]="size" [rounded]="rounded" ></cai-avatar>
+    `,
+  }),
+};
+
+export const Size32px: Story = {
+  args: {
+    driver: {
+      id: 0,
+      firstName: 'Jovan',
+      lastName: 'Kostić',
+      avatarFile: undefined,
+      avatarColor: 'Purple',
+    },
+    size: 32,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <cai-avatar [driver]="driver" [size]="size" [rounded]="rounded" ></cai-avatar>
+    `,
+  }),
+};
+
+export const Size32pxOwner: Story = {
+  args: {
+    driver: {
+      id: 0,
+      firstName: 'Jovan',
+      lastName: 'Kostić',
+      avatarFile: undefined,
+      avatarColor: 'Gold',
+      owner: true,
+    },
+    size: 32,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <cai-avatar [driver]="driver" [size]="size" [rounded]="rounded" ></cai-avatar>
+    `,
+  }),
+};
+
+export const Size32pxImage: Story = {
+  args: {
+    driver: {
+      id: 0,
+      firstName: 'Jovan',
+      lastName: 'Kostić',
+      avatarFile: {
+        fileId: 889,
+        fileName: 'driverAvatar.png',
+        url: 'https://s3.rute.co:9000/devcarriera/9/38/10/256c6555-e040-4f7f-84ac-d6dc8e2680a9-driverAvatar.png',
+        fileSize: 72994,
+        tags: null,
+        tagGeneratedByUser: false,
+        updatedAt: null,
+      },
+      avatarColor: 'Blue',
+    },
+    size: 32,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <cai-avatar [driver]="driver" [size]="size" [rounded]="rounded" ></cai-avatar>
+    `,
+  }),
+};
+
+export const Size32pxImageOwner: Story = {
+  args: {
+    driver: {
+      id: 0,
+      firstName: 'Jovan',
+      lastName: 'Kostić',
+      avatarFile: {
+        fileId: 889,
+        fileName: 'driverAvatar.png',
+        url: 'https://s3.rute.co:9000/devcarriera/9/38/10/256c6555-e040-4f7f-84ac-d6dc8e2680a9-driverAvatar.png',
+        fileSize: 72994,
+        tags: null,
+        tagGeneratedByUser: false,
+        updatedAt: null,
+      },
+      avatarColor: 'Blue',
+      owner: true,
+    },
+    size: 32,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <cai-avatar [driver]="driver" [size]="size" [rounded]="rounded" ></cai-avatar>
+    `,
+  }),
+};
+
+export const Size74px: Story = {
+  args: {
+    driver: {
+      id: 0,
+      firstName: 'Jovan',
+      lastName: 'Kostić',
+      avatarFile: undefined,
+      avatarColor: 'Light Green',
+    },
+    size: 74,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <cai-avatar [driver]="driver" [size]="size" [rounded]="rounded" ></cai-avatar>
+    `,
+  }),
+};
+
+export const Size74pxRounded: Story = {
+  args: {
+    driver: {
+      id: 0,
+      firstName: 'Jovan',
+      lastName: 'Kostić',
+      avatarFile: undefined,
+      avatarColor: 'Orange',
+    },
+    size: 74,
+    rounded: true,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <cai-avatar [driver]="driver" [size]="size" [rounded]="rounded" ></cai-avatar>
+    `,
+  }),
+};
+
+export const Size74pxImage: Story = {
+  args: {
+    driver: {
+      id: 0,
+      firstName: 'Jovan',
+      lastName: 'Kostić',
+      avatarFile: {
+        fileId: 889,
+        fileName: 'driverAvatar.png',
+        url: 'https://s3.rute.co:9000/devcarriera/9/38/10/256c6555-e040-4f7f-84ac-d6dc8e2680a9-driverAvatar.png',
+        fileSize: 72994,
+        tags: null,
+        tagGeneratedByUser: false,
+        updatedAt: null,
+      },
+      avatarColor: 'Light Green',
+    },
+    size: 74,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <cai-avatar [driver]="driver" [size]="size" [rounded]="rounded" ></cai-avatar>
+    `,
+  }),
+};
+
+export const Size74pxImageRounded: Story = {
+  args: {
+    driver: {
+      id: 0,
+      firstName: 'Jovan',
+      lastName: 'Kostić',
+      avatarFile: {
+        fileId: 889,
+        fileName: 'driverAvatar.png',
+        url: 'https://s3.rute.co:9000/devcarriera/9/38/10/256c6555-e040-4f7f-84ac-d6dc8e2680a9-driverAvatar.png',
+        fileSize: 72994,
+        tags: null,
+        tagGeneratedByUser: false,
+        updatedAt: null,
+      },
+      avatarColor: 'Orange',
+    },
+    size: 74,
+    rounded: true,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <cai-avatar [driver]="driver" [size]="size" [rounded]="rounded" ></cai-avatar>
+    `,
+  }),
+};
+
+export const Size160px: Story = {
+  args: {
+    driver: {
+      id: 0,
+      firstName: 'Jovan',
+      lastName: 'Kostić',
+      avatarFile: undefined,
+      avatarColor: 'Light Blue',
+    },
+    size: 160,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <cai-avatar [driver]="driver" [size]="size" [rounded]="rounded" ></cai-avatar>
+    `,
+  }),
+};
+
+export const Size160pxRounded: Story = {
+  args: {
+    driver: {
+      id: 0,
+      firstName: 'Jovan',
+      lastName: 'Kostić',
+      avatarFile: undefined,
+      avatarColor: 'Pink',
+    },
+    size: 160,
+    rounded: true,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <cai-avatar [driver]="driver" [size]="size" [rounded]="rounded" ></cai-avatar>
+    `,
+  }),
+};
+
+export const Size160pxImage: Story = {
+  args: {
+    driver: {
+      id: 0,
+      firstName: 'Jovan',
+      lastName: 'Kostić',
+      avatarFile: {
+        fileId: 889,
+        fileName: 'driverAvatar.png',
+        url: 'https://s3.rute.co:9000/devcarriera/9/38/10/256c6555-e040-4f7f-84ac-d6dc8e2680a9-driverAvatar.png',
+        fileSize: 72994,
+        tags: null,
+        tagGeneratedByUser: false,
+        updatedAt: null,
+      },
+      avatarColor: 'Light Blue',
+    },
+    size: 160,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <cai-avatar [driver]="driver" [size]="size" [rounded]="rounded" ></cai-avatar>
+    `,
+  }),
+};
+
+export const Size160pxImageRounded: Story = {
+  args: {
+    driver: {
+      id: 0,
+      firstName: 'Jovan',
+      lastName: 'Kostić',
+      avatarFile: {
+        fileId: 889,
+        fileName: 'driverAvatar.png',
+        url: 'https://s3.rute.co:9000/devcarriera/9/38/10/256c6555-e040-4f7f-84ac-d6dc8e2680a9-driverAvatar.png',
+        fileSize: 72994,
+        tags: null,
+        tagGeneratedByUser: false,
+        updatedAt: null,
+      },
+      avatarColor: 'Pink',
+    },
+    size: 160,
+    rounded: true,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <cai-avatar [driver]="driver" [size]="size" [rounded]="rounded" ></cai-avatar>
+    `,
+  }),
+};
+
+export const CustomHoverScale: Story = {
+  args: {
+    driver: {
+      id: 0,
+      firstName: 'Jovan',
+      lastName: 'Kostić',
+      avatarFile: undefined,
+      avatarColor: 'Blue',
+    },
+    rounded: true,
+    size: 18,
+    customHoverSize: 22,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+    <cai-avatar [driver]="driver" [size]="size" [rounded]="rounded" [customHoverSize]="customHoverSize" ></cai-avatar>
+    `,
+  }),
+};