ghostfolio/libs/ui/src/lib/holdings-table/holdings-table.component.stories.ts

import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { MatDialogModule } from '@angular/material/dialog';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { moduleMetadata } from '@storybook/angular';
import type { Meta, StoryObj } from '@storybook/angular';
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';

import { GfEntityLogoComponent } from '../entity-logo';
import { holdings } from '../mocks/holdings';
import { GfValueComponent } from '../value';
import { GfHoldingsTableComponent } from './holdings-table.component';

export default {
  title: 'Holdings Table',
  component: GfHoldingsTableComponent,
  decorators: [
    moduleMetadata({
      imports: [
        CommonModule,
        GfEntityLogoComponent,
        GfValueComponent,
        MatButtonModule,
        MatDialogModule,
        MatPaginatorModule,
        MatSortModule,
        MatTableModule,
        NgxSkeletonLoaderModule
      ]
    })
  ]
} as Meta<GfHoldingsTableComponent>;

type Story = StoryObj<GfHoldingsTableComponent>;

export const Loading: Story = {
  args: {
    holdings: undefined,
    baseCurrency: 'USD',
    deviceType: 'desktop',
    hasPermissionToOpenDetails: true,
    hasPermissionToShowQuantities: true,
    hasPermissionToShowValues: true,
    locale: 'en-US',
    pageSize: Number.MAX_SAFE_INTEGER
  }
};

export const Default: Story = {
  args: {
    holdings,
    baseCurrency: 'USD',
    deviceType: 'desktop',
    hasPermissionToOpenDetails: true,
    hasPermissionToShowQuantities: true,
    hasPermissionToShowValues: true,
    locale: 'en-US',
    pageSize: Number.MAX_SAFE_INTEGER
  }
};

export const WithoutQuantities: Story = {
  args: {
    holdings,
    baseCurrency: 'USD',
    deviceType: 'desktop',
    hasPermissionToOpenDetails: true,
    hasPermissionToShowQuantities: false,
    hasPermissionToShowValues: true,
    locale: 'en-US',
    pageSize: Number.MAX_SAFE_INTEGER
  }
};

export const WithoutValues: Story = {
  args: {
    holdings,
    baseCurrency: 'USD',
    deviceType: 'desktop',
    hasPermissionToOpenDetails: true,
    hasPermissionToShowQuantities: true,
    hasPermissionToShowValues: false,
    locale: 'en-US',
    pageSize: Number.MAX_SAFE_INTEGER
  }
};