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

package/src/ui/control-group/control-group.stories.tsx

@@ -1,24 +1,31 @@
 import React from 'react';
-import { Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from '../button';
 import { ControlGroup } from '.';
 
-export default {
+const meta = {
   title: 'UI/ControlGroup',
   component: ControlGroup,
-} as Meta;
+  args: {
+    children: (
+      <>
+        <Button outline type="button">
+          Option A
+        </Button>
+        <Button outline type="button">
+          Option B
+        </Button>
+        <Button outline type="button">
+          Option C
+        </Button>
+      </>
+    ),
+  },
+} satisfies Meta<typeof ControlGroup>;
 
-export const Default = () => (
-  <ControlGroup>
-    <Button outline type="button">
-      Option A
-    </Button>
-    <Button outline type="button">
-      Option B
-    </Button>
-    <Button outline type="button">
-      Option C
-    </Button>
-  </ControlGroup>
-);
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/ui/dropdown/dropdown.stories.tsx

@@ -1,25 +1,33 @@
 import React from 'react';
-import { Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { getWrapperDecorator } from '../../stories';
 import { Dropdown, DropdownItem } from '.';
 
-export default {
+const meta = {
   title: 'UI/Dropdown',
   component: Dropdown,
   decorators: [getWrapperDecorator()],
-} as Meta;
+  args: {
+    glyph: 'filter',
+    label: 'Toggle',
+    children: (
+      <>
+        <DropdownItem>Option 1</DropdownItem>
+        <DropdownItem>Option 2</DropdownItem>
+      </>
+    ),
+  },
+} satisfies Meta<typeof Dropdown>;
 
-export const Defualt = () => (
-  <Dropdown glyph="filter" label="Toggle">
-    <DropdownItem>Option 1</DropdownItem>
-    <DropdownItem>Option 2</DropdownItem>
-  </Dropdown>
-);
+export default meta;
 
-export const Disabled = () => (
-  <Dropdown glyph="filter" label="Toggle" disabled>
-    <DropdownItem>Option 1</DropdownItem>
-    <DropdownItem>Option 2</DropdownItem>
-  </Dropdown>
-);
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};

package/src/ui/empty-set/empty-set.jsx

@@ -13,14 +13,26 @@ export const EmptySet = (props) => {
   const actions = [
     ...(handleResetFilters
       ? [
-          <Button kind="primary" type="button" onClick={handleResetFilters} className={css.action}>
+          <Button
+            key="reset-filters"
+            kind="primary"
+            type="button"
+            onClick={handleResetFilters}
+            className={css.action}
+          >
             {I18N.RESET_FILTERS}
           </Button>,
         ]
       : []),
     ...(handleViewAll
       ? [
-          <Button kind="primary" type="button" onClick={handleViewAll} className={css.action}>
+          <Button
+            key="view-all"
+            kind="primary"
+            type="button"
+            onClick={handleViewAll}
+            className={css.action}
+          >
             {I18N.VIEW_ALL}
           </Button>,
         ]
@@ -32,10 +44,10 @@ export const EmptySet = (props) => {
       <p>{message}</p>
       {filtered &&
         actions.map((action, index) => (
-          <>
+          <React.Fragment key={action.key}>
             {index > 0 && ' or '}
             {action}
-          </>
+          </React.Fragment>
         ))}
     </Stack>
   );

package/src/ui/empty-set/empty-set.stories.tsx

@@ -0,0 +1,41 @@
+import type React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { getWrapperDecorator } from '../../stories';
+import { EmptySet } from '.';
+
+// EmptySet 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 TypedEmptySet = EmptySet as unknown as React.ComponentType<{
+  resources: string;
+  filtered: boolean;
+  handleResetFilters?: () => void;
+  handleViewAll?: () => void;
+}>;
+
+const meta = {
+  title: 'UI/EmptySet',
+  component: TypedEmptySet,
+  decorators: [getWrapperDecorator()],
+  args: {
+    resources: 'assets',
+  },
+} satisfies Meta<typeof TypedEmptySet>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    filtered: true,
+    handleResetFilters: () => console.log('RESET_FILTERS'),
+    handleViewAll: () => console.log('VIEW_ALL'),
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    filtered: false,
+  },
+};

package/src/ui/file-name/file-name.stories.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { getWrapperDecorator } from '../../stories';
+import { FileName } from './file-name';
+
+// FileName 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 TypedFileName = FileName as unknown as React.ComponentType<{
+  className?: string;
+  as?: React.ElementType;
+  name?: React.ReactNode;
+}>;
+
+const meta = {
+  title: 'Ui/FileName',
+  component: TypedFileName,
+  decorators: [getWrapperDecorator()],
+} satisfies Meta<typeof TypedFileName>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const NAMES = [
+  'styles.css',
+  './src/components/sources/styles.css',
+  'css ./node_modules/css-loader/dist/cjs.js??ref--6-1!./node_modules/postcss-loader/src!./src/components/sources/source/styles.css',
+  'rreallylongwordreallylongwordreallylongwordreallylongwordreallylongwordreallylongwordreallylongwordreallylongwordreallylongwordreallylongwordeallylongwordrreallylongwordreallylongwordreallylongwordreallylongwordreallylongwordreallylongwordreallylongwordreallylongwordreallylongwordreallylongwordeallylongwordrreallylongwordreallylongwordreallylongwordreallylongwordreallylongwordreallylongwordreallylongwordreallylongwordreallylongwordreallylongwordeallylongword',
+];
+
+export const Default: Story = {
+  render: () => (
+    <div>
+      {NAMES.map((name) => (
+        <div
+          key={name}
+          style={{ padding: '12px', outline: '1px dotted lightpink', margin: '12px' }}
+        >
+          <TypedFileName name={name} />
+        </div>
+      ))}
+    </div>
+  ),
+};

package/src/ui/filters/filters.stories.tsx

@@ -1,20 +1,25 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
-import { action } from 'storybook/actions'; // eslint-disable-line
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from 'storybook/actions';
 
 import { getWrapperDecorator } from '../../stories';
 import { Filters } from '.';
 
-export default {
+const meta = {
   title: 'UI/Filters',
   component: Filters,
   decorators: [getWrapperDecorator({ paddingLeft: '200px' })],
-} as Meta;
+  args: {
+    onChange: action('CHANGE'),
+  },
+} satisfies Meta<typeof Filters>;
 
-export const Default = () => (
-  <Filters
-    onChange={action('CHANGE')}
-    filters={{
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    filters: {
       changed: {
         label: 'Changed',
         defaultValue: true,
@@ -44,14 +49,13 @@ export const Default = () => (
           },
         ],
       },
-    }}
-  />
-);
+    },
+  },
+};
 
-export const Overflow = () => (
-  <Filters
-    onChange={action('CHANGE')}
-    filters={{
+export const Overflow: Story = {
+  args: {
+    filters: {
       changed: {
         label: 'Changed',
         defaultValue: true,
@@ -66,14 +70,13 @@ export const Overflow = () => (
             defaultValue: true,
           })),
       },
-    }}
-  />
-);
+    },
+  },
+};
 
-export const DisableOptions = () => (
-  <Filters
-    onChange={action('CHANGE')}
-    filters={{
+export const DisableOptions: Story = {
+  args: {
+    filters: {
       changed: {
         label: 'Changed',
         defaultValue: false,
@@ -104,6 +107,6 @@ export const DisableOptions = () => (
           },
         ],
       },
-    }}
-  />
-);
+    },
+  },
+};

package/src/ui/hover-card/hover-card.stories.tsx

@@ -1,34 +1,43 @@
 import React from 'react';
-import { Meta, Story } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
-import { HoverCard, HoverCardProps } from '.';
+import { HoverCard } from '.';
 
-export default {
+const meta = {
   title: 'UI/HoverCard',
   component: HoverCard,
-} as Meta;
+  render: (args) => (
+    <>
+      <HoverCard {...args} />
+      <p style={{ position: 'relative', zIndex: 1, maxWidth: 360 }}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in neque ante. Curabitur
+        vehicula, lorem sit amet fringilla dapibus, justo mauris varius elit, ut fermentum leo velit
+        eget risus
+      </p>
+    </>
+  ),
+} satisfies Meta<typeof HoverCard>;
 
-const Template: Story<HoverCardProps> = (props) => (
-  <>
-    <HoverCard {...props} />
-    <p style={{ position: 'relative', zIndex: 1, maxWidth: 360 }}>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in neque ante. Curabitur
-      vehicula, lorem sit amet fringilla dapibus, justo mauris varius elit, ut fermentum leo velit
-      eget risus
-    </p>
-  </>
-);
+export default meta;
 
-export const Default = () => (
-  <Template label="main.js">
-    <h1>main.js</h1>
-    <p>info</p>
-  </Template>
-);
+type Story = StoryObj<typeof meta>;
 
-export const WithRenderFn = () => (
-  <Template label="main.js">
-    {({ close }) => (
+export const Default: Story = {
+  args: {
+    label: 'main.js',
+    children: (
+      <>
+        <h1>main.js</h1>
+        <p>info</p>
+      </>
+    ),
+  },
+};
+
+export const WithRenderFn: Story = {
+  args: {
+    label: 'main.js',
+    children: ({ close }) => (
       <div>
         <h1>main.js</h1>
         <p>info</p>
@@ -36,6 +45,6 @@ export const WithRenderFn = () => (
           close
         </button>
       </div>
-    )}
-  </Template>
-);
+    ),
+  },
+};

package/src/ui/icon/icon.stories.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Meta, Story } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Icon } from '.';
 
-export default {
+const meta = {
   title: 'UI/Icon',
   component: Icon,
   args: {
@@ -19,36 +19,44 @@ export default {
       control: { type: 'select' },
     },
   },
-} as Meta;
+} satisfies Meta<typeof Icon>;
 
-const Template: Story = (args: any) => <Icon {...args} />;
+export default meta;
 
-export const Standard = Template.bind({});
+type Story = StoryObj<typeof meta>;
 
-Standard.args = {
-  glyph: Icon.ICONS.ARROW,
+export const Standard: Story = {
+  args: {
+    glyph: Icon.ICONS.ARROW,
+  },
 };
 
-export const CustomSize = Template.bind({});
-
-CustomSize.args = {
-  glyph: Icon.ICONS.ARROW,
-  size: Icon.SIZE_LARGE,
+export const CustomSize: Story = {
+  args: {
+    glyph: Icon.ICONS.ARROW,
+    size: Icon.SIZE_LARGE,
+  },
 };
 
-export const All = ({ size }: Pick<React.ComponentProps<typeof Icon>, 'size'>) => (
-  <>
-    {Object.values(Icon.ICONS).map((glyph) => (
-      <div
-        style={{
-          display: 'inline-block',
-          padding: '1rem',
-          textAlign: 'center',
-        }}
-      >
-        <Icon glyph={glyph} size={size} key={glyph} />
-        <code style={{ display: 'block' }}>{glyph}</code>
-      </div>
-    ))}
-  </>
-);
+export const All: Story = {
+  args: {
+    glyph: Icon.ICONS.ARROW,
+  },
+  render: ({ size }) => (
+    <>
+      {Object.values(Icon.ICONS).map((glyph) => (
+        <div
+          key={glyph}
+          style={{
+            display: 'inline-block',
+            padding: '1rem',
+            textAlign: 'center',
+          }}
+        >
+          <Icon glyph={glyph} size={size} />
+          <code style={{ display: 'block' }}>{glyph}</code>
+        </div>
+      ))}
+    </>
+  ),
+};

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

@@ -1,13 +1,25 @@
-import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { getWrapperDecorator } from '../../stories';
 import { Input } from '.';
 
-export default {
+const meta = {
   title: 'UI/Input',
   component: Input,
   decorators: [getWrapperDecorator()],
-};
+  args: {
+    placeholder: 'Search',
+  },
+} satisfies Meta<typeof Input>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = () => <Input placeholder="Search" />;
-export const WithSize = () => <Input placeholder="Search" size="small" />;
+export const Default: Story = {};
+
+export const WithSize: Story = {
+  args: {
+    size: 'small',
+  },
+};

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>
+  ),
+};