text.stories.js

import { action } from 'storybook/actions';
import { createTemplateFromVueFile } from '@/common/storybook_utils';
import DtText from './text.vue';
import DtTextDefault from './text_default.story.vue';
import DtTextVariants from './text_variants.story.vue';
import {
  TEXT_KIND_MODIFIERS,
  TEXT_SIZE_MODIFIERS,
  TEXT_ALIGN_MODIFIERS,
  TEXT_TONE_MODIFIERS,
  TEXT_STRENGTH_MODIFIERS,
  TEXT_DENSITY_MODIFIERS,
  TEXT_WRAP_MODIFIERS,
  TEXT_BOX_TRIM_MODIFIERS,
} from './text_constants';

const kindOptions = Object.keys(TEXT_KIND_MODIFIERS);
const sizeOptions = Array.from(new Set(Object.values(TEXT_SIZE_MODIFIERS).flat()));
const alignOptions = [undefined, ...Object.keys(TEXT_ALIGN_MODIFIERS)];
const strengthOptions = [undefined, ...Object.keys(TEXT_STRENGTH_MODIFIERS)];
const densityOptions = [undefined, ...Object.keys(TEXT_DENSITY_MODIFIERS)];
const wrapOptions = [undefined, ...Object.keys(TEXT_WRAP_MODIFIERS)];
const toneOptions = [undefined, ...Object.keys(TEXT_TONE_MODIFIERS)];
const textBoxTrimOptions = [undefined, ...Object.keys(TEXT_BOX_TRIM_MODIFIERS)];

export const argsData = {
  default: 'The quick brown fox jumps over the lazy dog.',
  as: 'span',
  kind: 'body',
  size: 300,
  strength: undefined,
  density: undefined,
  tone: undefined,
  align: undefined,
  truncate: false,
  maxLines: undefined,
  numeric: false,
  onClick: action('click'),
};

export const argTypesData = {
  default: {
    control: 'text',
    table: {
      type: { summary: 'VNode' },
    },
  },
  as: {
    control: 'text',
  },
  kind: {
    options: kindOptions,
    control: { type: 'select' },
  },
  size: {
    options: sizeOptions,
    control: { type: 'select' },
  },
  strength: {
    options: strengthOptions,
    control: { type: 'select' },
  },
  density: {
    options: densityOptions,
    control: { type: 'select' },
  },
  tone: {
    options: toneOptions,
    control: { type: 'select' },
  },
  align: {
    options: alignOptions,
    control: { type: 'select' },
  },
  truncate: {
    control: 'boolean',
  },
  maxLines: {
    control: { type: 'number', min: 1 },
  },
  numeric: {
    control: 'boolean',
  },
  wrap: {
    options: wrapOptions,
    control: { type: 'select' },
    description: 'wrap: default | nowrap: prevent wrapping | balance: even line lengths | pretty: avoid orphans/widows',
  },
  textBoxTrim: {
    options: textBoxTrimOptions,
    control: { type: 'select' },
    description: 'start: trim above | end: trim below | both: trim above and below. CSS text-box-trim for tighter layouts.',
  },
  onClick: {
    table: {
      disable: true,
    },
  },
};

export default {
  title: 'Components/Text',
  component: DtText,
  args: argsData,
  argTypes: argTypesData,
  parameters: {
    docs: {
      description: {
        component: 'Dialtone\'s typography primitive. `DtText` maps semantic props (`kind`, `size`, `tone`, `align`) to token-backed classes and supports structural helpers like `as`, truncation, multi-line clamping, and numeric tabular figures. The Variants story enumerates every supported combination validated against `apps/dialtone-documentation/docs/_data/type.json`.',
      },
    },
  },
  excludeStories: /.*Data$/,
};

const DefaultTemplate = (args, { argTypes }) => createTemplateFromVueFile(args, argTypes, DtTextDefault);
const VariantsTemplate = (args, { argTypes }) => createTemplateFromVueFile(args, argTypes, DtTextVariants);

export const Default = {
  render: DefaultTemplate,
  args: {},
};

export const Variants = {
  render: VariantsTemplate,
  args: {},
  parameters: {
    controls: { disable: true },
    options: { showPanel: false },
  },
};