@bundle-stats/ui 4.22.2 → 4.23.0-beta.1

package/src/ui/input-search/input-search.stories.tsx

@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { getWrapperDecorator } from '../../stories';
+import { InputSearch } from '.';
+
+const meta = {
+  title: 'UI/InputSearch',
+  component: InputSearch,
+  decorators: [getWrapperDecorator()],
+} satisfies Meta<typeof InputSearch>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const InputSearchWithState = () => {
+  const [search, updateSearch] = useState('');
+
+  return (
+    <div>
+      <pre>{JSON.stringify({ search }, null, 2)}</pre>
+      <br />
+      <InputSearch placeholder="Search by name" defaultValue={search} onChange={updateSearch} />
+    </div>
+  );
+};
+
+export const Default: Story = {
+  render: () => <InputSearchWithState />,
+};

package/src/ui/loader/loader.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { getWrapperDecorator } from '../../stories';
+import { Loader } from '.';
+
+const meta = {
+  title: 'UI/Loader',
+  component: Loader,
+  decorators: [getWrapperDecorator()],
+} satisfies Meta<typeof Loader>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithSize: Story = {
+  args: {
+    size: Loader.SIZE_LARGE,
+  },
+};

package/src/ui/skeleton/skeleton.stories.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Skeleton } from '.';
+
+// Skeleton is a plain .jsx component with defaultProps instead of inline
+// destructuring defaults, so TS can't infer its props as optional on its own.
+const TypedSkeleton = Skeleton as unknown as React.ComponentType<
+  {
+    className?: string;
+    as?: React.ElementType;
+    block?: boolean;
+  } & React.HTMLAttributes<HTMLElement>
+>;
+
+const meta = {
+  title: 'UI/Skeleton',
+  component: TypedSkeleton,
+} satisfies Meta<typeof TypedSkeleton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const MultipleTextLines: Story = {
+  render: () => (
+    <>
+      <TypedSkeleton as="h1" style={{ outline: '1px solid magenta' }} />
+      <TypedSkeleton as="h2" style={{ outline: '1px solid magenta' }} />
+      <TypedSkeleton as="p" style={{ outline: '1px solid magenta' }} />
+      <TypedSkeleton style={{ outline: '1px solid pink' }} />
+    </>
+  ),
+};
+
+export const Block: Story = {
+  render: () => (
+    <div style={{ outline: '1px solid magenta' }}>
+      <TypedSkeleton as="div" block />
+    </div>
+  ),
+};

package/src/ui/table/table.module.css

@@ -16,7 +16,6 @@
 
 .root thead th {
   border-width: 0 0 1px;
-  text-transform: uppercase;
   vertical-align: top;
   background: var(--color-highlight);
 }

package/src/ui/table/table.stories.tsx

@@ -1,238 +1,264 @@
 import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { getWrapperDecorator } from '../../stories';
 import { Table } from '.';
 
 const { THead, TBody, Td, Tr, Th } = Table;
 
-export default {
+const meta = {
   title: 'UI/Table',
   component: Table,
   decorators: [getWrapperDecorator()],
+} satisfies Meta<typeof Table>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Table>
+      <TBody>
+        <Tr>
+          <Td>a1</Td>
+          <Td>b1</Td>
+          <Td>c1</Td>
+        </Tr>
+        <Tr>
+          <Td>a2</Td>
+          <Td>b2</Td>
+          <Td>c2</Td>
+        </Tr>
+        <Tr>
+          <Td>a3</Td>
+          <Td>b3</Td>
+          <Td>c3</Td>
+        </Tr>
+      </TBody>
+    </Table>
+  ),
 };
 
-export const Default = () => (
-  <Table>
-    <TBody>
-      <Tr>
-        <Td>a1</Td>
-        <Td>b1</Td>
-        <Td>c1</Td>
-      </Tr>
-      <Tr>
-        <Td>a2</Td>
-        <Td>b2</Td>
-        <Td>c2</Td>
-      </Tr>
-      <Tr>
-        <Td>a3</Td>
-        <Td>b3</Td>
-        <Td>c3</Td>
-      </Tr>
-    </TBody>
-  </Table>
-);
+export const Compact: Story = {
+  render: () => (
+    <Table compact>
+      <TBody>
+        <Tr>
+          <Td>a1</Td>
+          <Td>b1</Td>
+          <Td>c1</Td>
+        </Tr>
+        <Tr>
+          <Td>a2</Td>
+          <Td>b2</Td>
+          <Td>c2</Td>
+        </Tr>
+        <Tr>
+          <Td>a3</Td>
+          <Td>b3</Td>
+          <Td>c3</Td>
+        </Tr>
+      </TBody>
+    </Table>
+  ),
+};
 
-export const Compact = () => (
-  <Table compact>
-    <TBody>
-      <Tr>
-        <Td>a1</Td>
-        <Td>b1</Td>
-        <Td>c1</Td>
-      </Tr>
-      <Tr>
-        <Td>a2</Td>
-        <Td>b2</Td>
-        <Td>c2</Td>
-      </Tr>
-      <Tr>
-        <Td>a3</Td>
-        <Td>b3</Td>
-        <Td>c3</Td>
-      </Tr>
-    </TBody>
-  </Table>
-);
+export const Outline: Story = {
+  render: () => (
+    <Table outline>
+      <TBody>
+        <Tr>
+          <Td>a1</Td>
+          <Td>b1</Td>
+          <Td>c1</Td>
+        </Tr>
+        <Tr>
+          <Td>a2</Td>
+          <Td>b2</Td>
+          <Td>c2</Td>
+        </Tr>
+        <Tr>
+          <Td>a3</Td>
+          <Td>b3</Td>
+          <Td>c3</Td>
+        </Tr>
+      </TBody>
+    </Table>
+  ),
+};
 
-export const Outline = () => (
-  <Table outline>
-    <TBody>
-      <Tr>
-        <Td>a1</Td>
-        <Td>b1</Td>
-        <Td>c1</Td>
-      </Tr>
-      <Tr>
-        <Td>a2</Td>
-        <Td>b2</Td>
-        <Td>c2</Td>
-      </Tr>
-      <Tr>
-        <Td>a3</Td>
-        <Td>b3</Td>
-        <Td>c3</Td>
-      </Tr>
-    </TBody>
-  </Table>
-);
+export const Empty: Story = {
+  render: () => <Table />,
+};
 
-export const Empty = () => <Table />;
-export const EmptyWithCustomElement = () => (
-  <Table emptyMessage={<p style={{ outline: '1px solid lightgray' }}>No items available</p>} />
-);
+export const EmptyWithCustomElement: Story = {
+  render: () => (
+    <Table emptyMessage={<p style={{ outline: '1px solid lightgray' }}>No items available</p>} />
+  ),
+};
 
-export const WithHeaders = () => (
-  <Table>
-    <THead>
-      <Tr>
-        <Th>Col A</Th>
-        <Th>Col B</Th>
-        <Th>Col C</Th>
-      </Tr>
-    </THead>
-    <TBody>
-      <Tr>
-        <Td>a1</Td>
-        <Td>b1</Td>
-        <Td>c1</Td>
-      </Tr>
-      <Tr>
-        <Td>a2</Td>
-        <Td>b2</Td>
-        <Td>c2</Td>
-      </Tr>
-      <Tr>
-        <Td>a3</Td>
-        <Td>b3</Td>
-        <Td>c3</Td>
-      </Tr>
-    </TBody>
-  </Table>
-);
+export const WithHeaders: Story = {
+  render: () => (
+    <Table>
+      <THead>
+        <Tr>
+          <Th>Col A</Th>
+          <Th>Col B</Th>
+          <Th>Col C</Th>
+        </Tr>
+      </THead>
+      <TBody>
+        <Tr>
+          <Td>a1</Td>
+          <Td>b1</Td>
+          <Td>c1</Td>
+        </Tr>
+        <Tr>
+          <Td>a2</Td>
+          <Td>b2</Td>
+          <Td>c2</Td>
+        </Tr>
+        <Tr>
+          <Td>a3</Td>
+          <Td>b3</Td>
+          <Td>c3</Td>
+        </Tr>
+      </TBody>
+    </Table>
+  ),
+};
 
-export const WithHeadersAndOutline = () => (
-  <Table outline>
-    <THead>
-      <Tr>
-        <Th>Col A</Th>
-        <Th>Col B</Th>
-        <Th>Col C</Th>
-      </Tr>
-    </THead>
-    <TBody>
-      <Tr>
-        <Td>a1</Td>
-        <Td>b1</Td>
-        <Td>c1</Td>
-      </Tr>
-      <Tr>
-        <Td>a2</Td>
-        <Td>b2</Td>
-        <Td>c2</Td>
-      </Tr>
-      <Tr>
-        <Td>a3</Td>
-        <Td>b3</Td>
-        <Td>c3</Td>
-      </Tr>
-    </TBody>
-  </Table>
-);
+export const WithHeadersAndOutline: Story = {
+  render: () => (
+    <Table outline>
+      <THead>
+        <Tr>
+          <Th>Col A</Th>
+          <Th>Col B</Th>
+          <Th>Col C</Th>
+        </Tr>
+      </THead>
+      <TBody>
+        <Tr>
+          <Td>a1</Td>
+          <Td>b1</Td>
+          <Td>c1</Td>
+        </Tr>
+        <Tr>
+          <Td>a2</Td>
+          <Td>b2</Td>
+          <Td>c2</Td>
+        </Tr>
+        <Tr>
+          <Td>a3</Td>
+          <Td>b3</Td>
+          <Td>c3</Td>
+        </Tr>
+      </TBody>
+    </Table>
+  ),
+};
 
-export const WithMultipleRowsHeader = () => (
-  <Table>
-    <THead>
-      <Tr>
-        <Th> </Th>
-        <Th colSpan={2}>Colspan</Th>
-      </Tr>
-      <Tr>
-        <Th>Col A</Th>
-        <Th>Col B</Th>
-        <Th>Col C</Th>
-      </Tr>
-    </THead>
-    <TBody>
-      <Tr>
-        <Td>a1</Td>
-        <Td>b1</Td>
-        <Td>c1</Td>
-      </Tr>
-      <Tr>
-        <Td>a2</Td>
-        <Td>b2</Td>
-        <Td>c2</Td>
-      </Tr>
-      <Tr>
-        <Td>a3</Td>
-        <Td>b3</Td>
-        <Td>c3</Td>
-      </Tr>
-    </TBody>
-  </Table>
-);
+export const WithMultipleRowsHeader: Story = {
+  render: () => (
+    <Table>
+      <THead>
+        <Tr>
+          <Th> </Th>
+          <Th colSpan={2}>Colspan</Th>
+        </Tr>
+        <Tr>
+          <Th>Col A</Th>
+          <Th>Col B</Th>
+          <Th>Col C</Th>
+        </Tr>
+      </THead>
+      <TBody>
+        <Tr>
+          <Td>a1</Td>
+          <Td>b1</Td>
+          <Td>c1</Td>
+        </Tr>
+        <Tr>
+          <Td>a2</Td>
+          <Td>b2</Td>
+          <Td>c2</Td>
+        </Tr>
+        <Tr>
+          <Td>a3</Td>
+          <Td>b3</Td>
+          <Td>c3</Td>
+        </Tr>
+      </TBody>
+    </Table>
+  ),
+};
 
-export const WithRowHeaders = () => (
-  <Table>
-    <TBody>
-      <Tr>
-        <Th>row 1</Th>
-        <Td>a1</Td>
-        <Td>b1</Td>
-        <Td>c1</Td>
-      </Tr>
-      <Tr>
-        <Th>row 2</Th>
-        <Td>a2</Td>
-        <Td>b2</Td>
-        <Td>c2</Td>
-      </Tr>
-      <Tr>
-        <Th>row 3</Th>
-        <Td>a3</Td>
-        <Td>b3</Td>
-        <Td>c3</Td>
-      </Tr>
-    </TBody>
-  </Table>
-);
+export const WithRowHeaders: Story = {
+  render: () => (
+    <Table>
+      <TBody>
+        <Tr>
+          <Th>row 1</Th>
+          <Td>a1</Td>
+          <Td>b1</Td>
+          <Td>c1</Td>
+        </Tr>
+        <Tr>
+          <Th>row 2</Th>
+          <Td>a2</Td>
+          <Td>b2</Td>
+          <Td>c2</Td>
+        </Tr>
+        <Tr>
+          <Th>row 3</Th>
+          <Td>a3</Td>
+          <Td>b3</Td>
+          <Td>c3</Td>
+        </Tr>
+      </TBody>
+    </Table>
+  ),
+};
 
-export const WithCustomContentAndAttributes = () => (
-  <Table>
-    <THead>
-      <Tr>
-        <Th> </Th>
-        <Th style={{ textAlign: 'right' }}>Col A (right)</Th>
-        <Th style={{ textAlign: 'center' }}>Col B (center)</Th>
-        <Th style={{ textDecoration: 'underline' }}>Col C(underline)</Th>
-      </Tr>
-    </THead>
-    <TBody>
-      <Tr>
-        <Th>
-          <strong>row 1</strong>
-        </Th>
-        <Td style={{ textAlign: 'right' }}>a1</Td>
-        <Td style={{ textAlign: 'center', color: 'red' }}>b1</Td>
-        <Td style={{ textDecoration: 'underline' }}>c1</Td>
-      </Tr>
-      <Tr style={{ color: 'blue', fontSize: '1.5em' }}>
-        <Th>
-          <strong>row 2</strong>
-        </Th>
-        <Td style={{ textAlign: 'right' }}>a2</Td>
-        <Td style={{ textAlign: 'center' }}>b2</Td>
-        <Td style={{ textDecoration: 'underline' }}>c2</Td>
-      </Tr>
-      <Tr>
-        <Th>
-          <strong>row 3</strong>
-        </Th>
-        <Td style={{ textAlign: 'right' }}>a3</Td>
-        <Td style={{ textAlign: 'center' }}>b3</Td>
-        <Td style={{ textDecoration: 'underline' }}>c3</Td>
-      </Tr>
-    </TBody>
-  </Table>
-);
+export const WithCustomContentAndAttributes: Story = {
+  render: () => (
+    <Table>
+      <THead>
+        <Tr>
+          <Th> </Th>
+          <Th style={{ textAlign: 'right' }}>Col A (right)</Th>
+          <Th style={{ textAlign: 'center' }}>Col B (center)</Th>
+          <Th style={{ textDecoration: 'underline' }}>Col C(underline)</Th>
+        </Tr>
+      </THead>
+      <TBody>
+        <Tr>
+          <Th>
+            <strong>row 1</strong>
+          </Th>
+          <Td style={{ textAlign: 'right' }}>a1</Td>
+          <Td style={{ textAlign: 'center', color: 'red' }}>b1</Td>
+          <Td style={{ textDecoration: 'underline' }}>c1</Td>
+        </Tr>
+        <Tr style={{ color: 'blue', fontSize: '1.5em' }}>
+          <Th>
+            <strong>row 2</strong>
+          </Th>
+          <Td style={{ textAlign: 'right' }}>a2</Td>
+          <Td style={{ textAlign: 'center' }}>b2</Td>
+          <Td style={{ textDecoration: 'underline' }}>c2</Td>
+        </Tr>
+        <Tr>
+          <Th>
+            <strong>row 3</strong>
+          </Th>
+          <Td style={{ textAlign: 'right' }}>a3</Td>
+          <Td style={{ textAlign: 'center' }}>b3</Td>
+          <Td style={{ textDecoration: 'underline' }}>c3</Td>
+        </Tr>
+      </TBody>
+    </Table>
+  ),
+};

package/src/ui/tag/tag.stories.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
-import { Tag } from '.';
+import { Tag, TagProps } from '.';
 
-export default {
+const meta = {
   title: 'UI/Tag',
   component: Tag,
   argTypes: {
@@ -19,14 +18,16 @@ export default {
   args: {
     children: 'tag',
   },
-} as Meta;
+} satisfies Meta<TagProps>;
 
-const Template: Story = (args) => <Tag {...args} />;
+export default meta;
 
-export const Default = Template.bind({});
+type Story = StoryObj<typeof meta>;
 
-export const OneLetter = Template.bind({});
+export const Default: Story = {};
 
-OneLetter.args = {
-  children: 'd',
+export const OneLetter: Story = {
+  args: {
+    children: 'd',
+  },
 };

package/src/ui/toolbar/toolbar.stories.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { getWrapperDecorator } from '../../stories';
+import { Toolbar } from '.';
+
+// Toolbar is a plain .jsx component with defaultProps instead of inline
+// destructuring defaults, so TS can't infer its props as optional on its own.
+const TypedToolbar = Toolbar as unknown as React.ComponentType<{
+  className?: string;
+  children: React.ReactNode;
+  renderActions?: (params: { actionClassName: string }) => React.ReactNode;
+}>;
+
+const meta = {
+  title: 'UI/Toolbar',
+  component: TypedToolbar,
+  decorators: [getWrapperDecorator()],
+} satisfies Meta<typeof TypedToolbar>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: <div>Content</div>,
+  },
+};
+
+export const WithActions: Story = {
+  args: {
+    children: 'Content',
+    renderActions: ({ actionClassName }) => (
+      <>
+        <div className={actionClassName}>Action 1</div>
+        <div className={actionClassName}>Action 2</div>
+      </>
+    ),
+  },
+};