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

package/src/layout/stack/stack.stories.tsx

@@ -1,53 +1,77 @@
 import React from 'react';
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { getWrapperDecorator } from '../../stories';
 import { Box } from '../box';
 import { Stack } from '.';
 
-export default {
+const meta = {
   title: 'Layout/Stack',
   component: Stack,
   decorators: [getWrapperDecorator()],
-} as Meta<typeof Stack>;
-
-export const Default = () => (
-  <Stack>
-    <Box outline>Lorem ipsum 1</Box>
-    <Box outline>Lorem ipsum 2</Box>
-    {null}
-    Lorem ipsum 3
-  </Stack>
-);
-
-export const WithCustomWrapper = () => (
-  <Stack as="main" className="wrapper">
-    <Box outline>Lorem ipsum 1</Box>
-    <Box outline>Lorem ipsum 2</Box>
-  </Stack>
-);
-
-export const WithSpace = () => (
-  <Stack space="large">
-    <Box outline>Lorem ipsum 1</Box>
-    <Box outline>Lorem ipsum 2</Box>
-    <Box outline>Lorem ipsum 3</Box>
-  </Stack>
-);
-
-export const WithNestedStacks = () => (
-  <Stack space="large">
-    <Box outline>Lorem ipsum 1</Box>
-    <Box outline>Lorem ipsum 2</Box>
-    <Stack space="small">
-      <Box outline>Lorem ipsum 3.1</Box>
-      <Box outline>Lorem ipsum 3.2</Box>
-    </Stack>
-  </Stack>
-);
-
-export const WithSingleItem = () => (
-  <Stack>
-    <Box outline>Lorem ipsum</Box>
-  </Stack>
-);
+} satisfies Meta<typeof Stack>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <Box outline>Lorem ipsum 1</Box>
+        <Box outline>Lorem ipsum 2</Box>
+        {null}
+        Lorem ipsum 3
+      </>
+    ),
+  },
+};
+
+export const WithCustomWrapper: Story = {
+  args: {
+    as: 'main',
+    className: 'wrapper',
+    children: (
+      <>
+        <Box outline>Lorem ipsum 1</Box>
+        <Box outline>Lorem ipsum 2</Box>
+      </>
+    ),
+  },
+};
+
+export const WithSpace: Story = {
+  args: {
+    space: 'large',
+    children: (
+      <>
+        <Box outline>Lorem ipsum 1</Box>
+        <Box outline>Lorem ipsum 2</Box>
+        <Box outline>Lorem ipsum 3</Box>
+      </>
+    ),
+  },
+};
+
+export const WithNestedStacks: Story = {
+  args: {
+    space: 'large',
+    children: (
+      <>
+        <Box outline>Lorem ipsum 1</Box>
+        <Box outline>Lorem ipsum 2</Box>
+        <Stack space="small">
+          <Box outline>Lorem ipsum 3.1</Box>
+          <Box outline>Lorem ipsum 3.2</Box>
+        </Stack>
+      </>
+    ),
+  },
+};
+
+export const WithSingleItem: Story = {
+  args: {
+    children: <Box outline>Lorem ipsum</Box>,
+  },
+};

package/src/ui/alert/alert.stories.tsx

@@ -1,39 +1,43 @@
-import React from 'react';
-import type { Meta, Story } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { getWrapperDecorator } from '../../stories';
 import { Alert } from '.';
 
-export default {
+const meta = {
   title: 'UI/Alert',
   component: Alert,
   decorators: [getWrapperDecorator()],
-} as Meta<typeof Alert>;
+  args: {
+    children: 'Lorem ipsum',
+  },
+} satisfies Meta<typeof Alert>;
 
-const Template: Story = (args) => <Alert {...args}>Lorem ipsum</Alert>;
+export default meta;
 
-export const Default = Template.bind({});
+type Story = StoryObj<typeof meta>;
 
-export const WithKindSuccess = Template.bind({});
+export const Default: Story = {};
 
-WithKindSuccess.args = {
-  kind: 'success',
+export const WithKindSuccess: Story = {
+  args: {
+    kind: 'success',
+  },
 };
 
-export const WithKindInfo = Template.bind({});
-
-WithKindInfo.args = {
-  kind: 'info',
+export const WithKindInfo: Story = {
+  args: {
+    kind: 'info',
+  },
 };
 
-export const WithKindWarning = Template.bind({});
-
-WithKindWarning.args = {
-  kind: 'warning',
+export const WithKindWarning: Story = {
+  args: {
+    kind: 'warning',
+  },
 };
 
-export const WithKindDanger = Template.bind({});
-
-WithKindDanger.args = {
-  kind: 'danger',
+export const WithKindDanger: Story = {
+  args: {
+    kind: 'danger',
+  },
 };

package/src/ui/button/button.stories.tsx

@@ -1,234 +1,239 @@
 import React from 'react';
-import { Meta, Story } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Stack } from '../../layout/stack';
 import { FlexStack } from '../../layout/flex-stack';
 import { Icon } from '../icon';
 import { Button, BUTTON_SIZE, BUTTON_KIND } from '.';
 
-export default {
+const meta = {
   title: 'UI/Button',
   component: Button,
-} as Meta;
+  args: {
+    children: 'Action',
+  },
+} satisfies Meta<typeof Button>;
 
-const Template: Story = ({ children = 'Action', ...props }) => (
-  <Button {...props}>{children}</Button>
-);
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-const Items = (props) => (
+const Items = (props: React.ComponentProps<typeof FlexStack>) => (
   <FlexStack alignItems="top" style={{ flexWrap: 'wrap', gap: '12px' }} {...props} />
 );
 
-export const Default = Template.bind({});
+export const Default: Story = {};
 
-export const All = () => (
-  <Stack space="large">
-    <Stack space="medium">
-      <h2>Size</h2>
-      <Items>
-        {Object.values(BUTTON_SIZE).map((size) => (
-          <Button size={size} key={size}>
-            Action {size}
-          </Button>
-        ))}
-      </Items>
-    </Stack>
-    <Stack space="medium">
-      <h2>Kind</h2>
+export const All: Story = {
+  render: () => (
+    <Stack space="large">
       <Stack space="medium">
+        <h2>Size</h2>
         <Items>
-          {Object.values(BUTTON_KIND).map((kind) => (
-            <Button kind={kind} key={kind}>
-              Action {kind}
-            </Button>
-          ))}
-        </Items>
-        <h3>Active</h3>
-        <Items>
-          {Object.values(BUTTON_KIND).map((kind) => (
-            <Button kind={kind} key={kind} active>
-              Action {kind}
-            </Button>
-          ))}
-        </Items>
-        <h3>As link</h3>
-        <Items>
-          {Object.values(BUTTON_KIND).map((kind) => (
-            <Button kind={kind} key={kind} as="a" href="#">
-              Action {kind}
-            </Button>
-          ))}
-        </Items>
-        <h3>With icon</h3>
-        <Items>
-          {Object.values(BUTTON_KIND).map((kind) => (
-            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} kind={kind} key={kind}>
-              Action {kind}
-            </Button>
-          ))}
-        </Items>
-        <Items>
-          {Object.values(BUTTON_KIND).map((kind) => (
-            <Button rightGlyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} kind={kind} key={kind}>
-              Action {kind}
-            </Button>
-          ))}
-        </Items>
-        <h3>Disabled</h3>
-        <Items>
-          {Object.values(BUTTON_KIND).map((kind) => (
-            <Button kind={kind} key={kind} disabled>
-              Action {kind}
+          {Object.values(BUTTON_SIZE).map((size) => (
+            <Button size={size} key={size}>
+              Action {size}
             </Button>
           ))}
         </Items>
       </Stack>
-    </Stack>
-    <Stack space="medium">
-      <h2>Outline & Kind</h2>
       <Stack space="medium">
-        {Object.values(BUTTON_SIZE).map((size) => (
-          <Items key={size}>
-            <Button outline size={size}>
-              Action default
-            </Button>
+        <h2>Kind</h2>
+        <Stack space="medium">
+          <Items>
             {Object.values(BUTTON_KIND).map((kind) => (
-              <Button outline kind={kind} key={kind} size={size}>
+              <Button kind={kind} key={kind}>
                 Action {kind}
               </Button>
             ))}
           </Items>
-        ))}
-        <h3>Active</h3>
-        <Items>
-          <Button outline active>
-            Action default
-          </Button>
-          {Object.values(BUTTON_KIND).map((kind) => (
-            <Button outline kind={kind} key={kind} active>
-              Action {kind}
-            </Button>
-          ))}
-        </Items>
-        <h3>With icon</h3>
-        {Object.values(BUTTON_SIZE).map((size) => (
-          <Items key={size}>
-            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} outline size={size}>
-              Action default
-            </Button>
+          <h3>Active</h3>
+          <Items>
             {Object.values(BUTTON_KIND).map((kind) => (
-              <Button
-                glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE}
-                outline
-                kind={kind}
-                size={size}
-                key={kind}
-              >
+              <Button kind={kind} key={kind} active>
                 Action {kind}
               </Button>
             ))}
           </Items>
-        ))}
-        <h3>Only icon</h3>
-        {Object.values(BUTTON_SIZE).map((size) => (
-          <Items key={size}>
-            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} outline size={size} />
+          <h3>As link</h3>
+          <Items>
             {Object.values(BUTTON_KIND).map((kind) => (
-              <Button
-                glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE}
-                outline
-                kind={kind}
-                size={size}
-                key={kind}
-              />
+              <Button kind={kind} key={kind} as="a" href="#">
+                Action {kind}
+              </Button>
             ))}
           </Items>
-        ))}
-        <h3>Disabled</h3>
-        <Items>
-          <Button outline disabled>
-            Action default
-          </Button>
-          {Object.values(BUTTON_KIND).map((kind) => (
-            <Button outline kind={kind} key={kind} disabled>
-              Action {kind}
-            </Button>
-          ))}
-        </Items>
+          <h3>With icon</h3>
+          <Items>
+            {Object.values(BUTTON_KIND).map((kind) => (
+              <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} kind={kind} key={kind}>
+                Action {kind}
+              </Button>
+            ))}
+          </Items>
+          <Items>
+            {Object.values(BUTTON_KIND).map((kind) => (
+              <Button rightGlyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} kind={kind} key={kind}>
+                Action {kind}
+              </Button>
+            ))}
+          </Items>
+          <h3>Disabled</h3>
+          <Items>
+            {Object.values(BUTTON_KIND).map((kind) => (
+              <Button kind={kind} key={kind} disabled>
+                Action {kind}
+              </Button>
+            ))}
+          </Items>
+        </Stack>
       </Stack>
-    </Stack>
-    <Stack space="medium">
-      <h2>Solid & Kind</h2>
       <Stack space="medium">
-        {Object.values(BUTTON_SIZE).map((size) => (
-          <Items key={size}>
-            <Button solid size={size}>
+        <h2>Outline &amp; Kind</h2>
+        <Stack space="medium">
+          {Object.values(BUTTON_SIZE).map((size) => (
+            <Items key={size}>
+              <Button outline size={size}>
+                Action default
+              </Button>
+              {Object.values(BUTTON_KIND).map((kind) => (
+                <Button outline kind={kind} key={kind} size={size}>
+                  Action {kind}
+                </Button>
+              ))}
+            </Items>
+          ))}
+          <h3>Active</h3>
+          <Items>
+            <Button outline active>
               Action default
             </Button>
             {Object.values(BUTTON_KIND).map((kind) => (
-              <Button solid kind={kind} key={kind} size={size}>
+              <Button outline kind={kind} key={kind} active>
                 Action {kind}
               </Button>
             ))}
           </Items>
-        ))}
-        <h3>Active</h3>
-        <Items>
-          <Button solid active>
-            Action default
-          </Button>
-          {Object.values(BUTTON_KIND).map((kind) => (
-            <Button solid kind={kind} key={kind} active>
-              Action {kind}
-            </Button>
+          <h3>With icon</h3>
+          {Object.values(BUTTON_SIZE).map((size) => (
+            <Items key={size}>
+              <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} outline size={size}>
+                Action default
+              </Button>
+              {Object.values(BUTTON_KIND).map((kind) => (
+                <Button
+                  glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE}
+                  outline
+                  kind={kind}
+                  size={size}
+                  key={kind}
+                >
+                  Action {kind}
+                </Button>
+              ))}
+            </Items>
           ))}
-        </Items>
-        <h3>With icon</h3>
-        {Object.values(BUTTON_SIZE).map((size) => (
-          <Items key={size}>
-            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} solid size={size}>
+          <h3>Only icon</h3>
+          {Object.values(BUTTON_SIZE).map((size) => (
+            <Items key={size}>
+              <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} outline size={size} />
+              {Object.values(BUTTON_KIND).map((kind) => (
+                <Button
+                  glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE}
+                  outline
+                  kind={kind}
+                  size={size}
+                  key={kind}
+                />
+              ))}
+            </Items>
+          ))}
+          <h3>Disabled</h3>
+          <Items>
+            <Button outline disabled>
               Action default
             </Button>
             {Object.values(BUTTON_KIND).map((kind) => (
-              <Button
-                glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE}
-                solid
-                kind={kind}
-                size={size}
-                key={kind}
-              >
+              <Button outline kind={kind} key={kind} disabled>
                 Action {kind}
               </Button>
             ))}
           </Items>
-        ))}
-        <h3>Only icon</h3>
-        {Object.values(BUTTON_SIZE).map((size) => (
-          <Items key={size}>
-            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} solid size={size} />
+        </Stack>
+      </Stack>
+      <Stack space="medium">
+        <h2>Solid &amp; Kind</h2>
+        <Stack space="medium">
+          {Object.values(BUTTON_SIZE).map((size) => (
+            <Items key={size}>
+              <Button solid size={size}>
+                Action default
+              </Button>
+              {Object.values(BUTTON_KIND).map((kind) => (
+                <Button solid kind={kind} key={kind} size={size}>
+                  Action {kind}
+                </Button>
+              ))}
+            </Items>
+          ))}
+          <h3>Active</h3>
+          <Items>
+            <Button solid active>
+              Action default
+            </Button>
             {Object.values(BUTTON_KIND).map((kind) => (
-              <Button
-                glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE}
-                solid
-                kind={kind}
-                size={size}
-                key={kind}
-              />
+              <Button solid kind={kind} key={kind} active>
+                Action {kind}
+              </Button>
             ))}
           </Items>
-        ))}
-        <h3>Disabled</h3>
-        <Items>
-          <Button solid disabled>
-            Action default
-          </Button>
-          {Object.values(BUTTON_KIND).map((kind) => (
-            <Button solid kind={kind} key={kind} disabled>
-              Action {kind}
-            </Button>
+          <h3>With icon</h3>
+          {Object.values(BUTTON_SIZE).map((size) => (
+            <Items key={size}>
+              <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} solid size={size}>
+                Action default
+              </Button>
+              {Object.values(BUTTON_KIND).map((kind) => (
+                <Button
+                  glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE}
+                  solid
+                  kind={kind}
+                  size={size}
+                  key={kind}
+                >
+                  Action {kind}
+                </Button>
+              ))}
+            </Items>
           ))}
-        </Items>
+          <h3>Only icon</h3>
+          {Object.values(BUTTON_SIZE).map((size) => (
+            <Items key={size}>
+              <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} solid size={size} />
+              {Object.values(BUTTON_KIND).map((kind) => (
+                <Button
+                  glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE}
+                  solid
+                  kind={kind}
+                  size={size}
+                  key={kind}
+                />
+              ))}
+            </Items>
+          ))}
+          <h3>Disabled</h3>
+          <Items>
+            <Button solid disabled>
+              Action default
+            </Button>
+            {Object.values(BUTTON_KIND).map((kind) => (
+              <Button solid kind={kind} key={kind} disabled>
+                Action {kind}
+              </Button>
+            ))}
+          </Items>
+        </Stack>
       </Stack>
     </Stack>
-  </Stack>
-);
+  ),
+};

package/src/ui/button/button.tsx

@@ -94,4 +94,11 @@ const ButtonComponent = <T extends React.ElementType = 'button'>(
   );
 };
 
-export const Button = React.forwardRef(ButtonComponent);
+// React.forwardRef collapses ButtonComponent's generic `as` parameter down to
+// its default ('button'), so cast back to a polymorphic signature to keep
+// `as`/its associated element props (e.g. `href` with `as="a"`) type-checked.
+export const Button = React.forwardRef(ButtonComponent) as <T extends React.ElementType = 'button'>(
+  props: ButtonProps<T> &
+    Omit<React.ComponentPropsWithoutRef<T>, keyof ButtonProps<T>> &
+    React.RefAttributes<Element>,
+) => React.ReactElement | null;

package/src/ui/container/container.stories.tsx

@@ -1,29 +1,36 @@
 import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Container } from '.';
 
-export default {
+const meta = {
   title: 'UI/Container',
   component: Container,
-};
+} satisfies Meta<typeof Container>;
+
+export default meta;
 
-export const Default = () => (
-  <Container style={{ background: 'white' }}>
-    <div
-      style={{
-        background: 'white',
-        padding: '24px',
-      }}
-    >
-      Content
-    </div>
-  </Container>
-);
+type Story = StoryObj<typeof meta>;
 
-Default.decorators = [
-  (Story: React.FunctionComponent) => (
-    <div style={{ background: 'hotpink' }}>
-      <Story />
-    </div>
-  ),
-];
+export const Default: Story = {
+  args: {
+    style: { background: 'white' },
+    children: (
+      <div
+        style={{
+          background: 'white',
+          padding: '24px',
+        }}
+      >
+        Content
+      </div>
+    ),
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ background: 'hotpink' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};