ghostfolio/libs/ui/src/lib/value/value.component.stories.ts

import { moduleMetadata } from '@storybook/angular';
import type { Meta, StoryObj } from '@storybook/angular';
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';

import { GfValueComponent } from './value.component';

export default {
  title: 'Value',
  component: GfValueComponent,
  decorators: [
    moduleMetadata({
      imports: [NgxSkeletonLoaderModule]
    })
  ],
  argTypes: {
    deviceType: {
      control: 'select',
      options: ['desktop', 'mobile']
    },
    size: {
      control: 'select',
      options: ['small', 'medium', 'large']
    }
  }
} as Meta<GfValueComponent>;

type Story = StoryObj<GfValueComponent>;

export const Loading: Story = {
  args: {
    value: undefined
  }
};

export const IsinNoLabel: Story = {
  args: {
    isCurrency: false,
    locale: 'en-US',
    unit: 'USD',
    value: 'US5949181045',
    enableCopyToClipboardButton: true
  },
  name: 'Without Label with Copy'
};

export const IsinWithLabel: Story = {
  args: {
    isCurrency: false,
    locale: 'en-US',
    unit: 'USD',
    value: 'US5949181045',
    enableCopyToClipboardButton: true
  },
  render: (args) => ({
    props: args,
    template: `<gf-value [enableCopyToClipboardButton]="enableCopyToClipboardButton" [locale]="locale" [size]="size" [value]="value">ISIN</gf-value>`
  }),
  name: 'With Label and Copy'
};

export const Currency: Story = {
  args: {
    isCurrency: true,
    locale: 'en-US',
    unit: 'USD',
    value: 7
  }
};

export const DateValue: Story = {
  args: {
    deviceType: 'desktop',
    isDate: true,
    locale: 'en-US',
    value: new Date().toISOString()
  },
  name: 'Date'
};

export const Label: Story = {
  args: {
    locale: 'en-US',
    value: 7.25
  },
  render: (args) => ({
    props: args,
    template: `<gf-value [locale]="locale" [size]="size" [value]="value">Label</gf-value>`
  })
};

export const PerformancePositive: Story = {
  args: {
    colorizeSign: true,
    isPercent: true,
    locale: 'en-US',
    value: 0.0136810853673890378
  },
  name: 'Performance (positive)'
};

export const PerformanceNegative: Story = {
  args: {
    colorizeSign: true,
    isPercent: true,
    locale: 'en-US',
    value: -0.0136810853673890378
  },
  name: 'Performance (negative)'
};

export const PerformanceCloseToZero: Story = {
  args: {
    colorizeSign: true,
    isPercent: true,
    locale: 'en-US',
    value: -2.388915360475e-8
  },
  name: 'Performance (negative zero)'
};

export const Precision: Story = {
  args: {
    locale: 'en-US',
    precision: 3,
    value: 7.2534802394809285309
  }
};