origin/src/components/Table/Table.stories.tsx at a80c647c28c4c92474c69c078331b02f72f5a00b · lightsparkdev/origin · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
import type { Meta, StoryObj } from '@storybook/react';
import { Table } from './index';
import {
  BasicTable,
  SortableTable,
  SelectableTable,
  AlignedTable,
  LoadingTable,
  ResizableTable,
  ColumnSizingTable,
  SlotsTable,
  DescriptionTable,
  FooterTable,
  CompactFooterTable,
} from './Table.test-stories';

const meta: Meta<typeof Table.Root> = {
  title: 'Components/Table',
  component: Table.Root,
  parameters: {
    layout: 'padded',
  },
  argTypes: {
    size: {
      control: 'radio',
      options: ['default', 'compact'],
    },
  },
};

export default meta;

type Story = StoryObj<typeof Table.Root>;

export const Basic: Story = {
  args: { size: 'default' },
  render: (args) => <BasicTable size={args.size} />,
};

export const Sortable: Story = {
  render: () => <SortableTable />,
  parameters: {
    docs: {
      description: {
        story: 'Click column headers to sort. Columns must opt-in via `enableSorting: true`.',
      },
    },
  },
};

export const Selectable: Story = {
  render: () => <SelectableTable />,
  parameters: {
    docs: {
      description: {
        story: 'Single row selection with checkboxes.',
      },
    },
  },
};

export const Aligned: Story = {
  render: () => <AlignedTable />,
  parameters: {
    docs: {
      description: {
        story: 'Right-aligned columns using column meta.',
      },
    },
  },
};

export const Loading: Story = {
  render: () => <LoadingTable />,
  parameters: {
    docs: {
      description: {
        story: 'Per-cell loading state with skeleton placeholder.',
      },
    },
  },
};

export const Resizable: Story = {
  render: () => <ResizableTable />,
  parameters: {
    docs: {
      description: {
        story: 'Drag column borders to resize.',
      },
    },
  },
};

export const ColumnSizing: Story = {
  render: () => <ColumnSizingTable />,
  parameters: {
    docs: {
      description: {
        story:
          'Hug columns (checkbox, status, amount, actions) get explicit widths; fill columns (customer, product, note) omit width and split remaining space equally. Tag hug columns with `meta: { sizing: "hug" }` and only pass `style.width` when that flag is set.',
      },
    },
  },
};

export const WithSlots: Story = {
  render: () => <SlotsTable />,
  parameters: {
    docs: {
      description: {
        story: 'Cells with leading and trailing slots for icons, status dots, and action buttons.',
      },
    },
  },
};

export const WithDescription: Story = {
  render: () => <DescriptionTable />,
  parameters: {
    docs: {
      description: {
        story: 'Cells with primary label and secondary description text.',
      },
    },
  },
};

export const WithFooter: Story = {
  render: () => <FooterTable />,
  parameters: {
    docs: {
      description: {
        story: 'Table with an inline footer for pagination or summary content.',
      },
    },
  },
};

export const CompactWithFooter: Story = {
  render: () => <CompactFooterTable />,
  parameters: {
    docs: {
      description: {
        story: 'Compact density table with a compact footer.',
      },
    },
  },
};