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

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/dialog/dialog.module.css

@@ -3,6 +3,17 @@
   align-items: center;
   justify-content: center;
   z-index: var(--layer-xxhigh);
+  opacity: 0;
+  transition: var(--transition-out);
+}
+
+.backdrop[data-enter] {
+  opacity: 1;
+  transition: var(--transition-in);
+}
+
+.backdrop[data-leave] {
+  pointer-events: none;
 }
 
 .backdrop::before {
@@ -27,6 +38,17 @@
   background: var(--color-background);
   box-shadow: 0 0 var(--space-medium) var(--color-shadow);
   z-index: var(--layer-xxhigh);
+  opacity: 0;
+  transition: var(--transition-out);
+}
+
+.dialog[data-enter] {
+  opacity: 1;
+  transition: var(--transition-in);
+}
+
+.digalog[data-leave] {
+  pointer-events: none;
 }
 
 .header {

package/src/ui/dialog/dialog.tsx

@@ -1,13 +1,20 @@
 import type { ComponentProps, ReactNode } from 'react';
 import React from 'react';
 import cx from 'classnames';
-import { Dialog as AriakitDialog, DialogDismiss as AriakitDialogDismiss } from 'ariakit/dialog';
+import {
+  Dialog as AriakitDialog,
+  DialogDismiss as AriakitDialogDismiss,
+  useDialogState as useAriakitDialogState,
+  type DialogStateProps,
+} from 'ariakit/dialog';
 
 import { Stack } from '../../layout/stack';
 import { BUTTON_GLYPHS, Button } from '../button';
 import css from './dialog.module.css';
 
-export { useDialogState } from 'ariakit/dialog';
+export const useDialogState = (options: DialogStateProps = {}) => {
+  return useAriakitDialogState({ animated: true, ...options });
+};
 
 type AriakitDialogProps = ComponentProps<typeof AriakitDialog>;
 

package/src/ui/dropdown/dropdown.module.css

@@ -16,6 +16,17 @@
   min-width: 12em;
   z-index: var(--layer-high);
   padding: calc(var(--space-xxxsmall) / 2);
+  opacity: 0;
+  transition: var(--transition-out);
+}
+
+.dropdown[data-enter] {
+  opacity: 1;
+  transition: var(--transition-in);
+}
+
+.dropdown[data-leave] {
+  pointer-events: none;
 }
 
 .dropdown:focus {

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/dropdown/dropdown.tsx

@@ -4,6 +4,7 @@ import { Menu, MenuButton, MenuItem, MenuStateProps, useMenuState } from 'ariaki
 
 import { Button, BUTTON_SIZE } from '../button';
 import css from './dropdown.module.css';
+import { Icon } from '../icon';
 
 interface DropdownItemProps {
   isActive?: boolean;
@@ -26,6 +27,7 @@ interface DropdownProps {
   placement?: MenuStateProps['placement'];
   gutter?: MenuStateProps['gutter'];
   shift?: MenuStateProps['shift'];
+  showChevron?: boolean;
 }
 
 export const Dropdown = (props: DropdownProps & React.ComponentProps<'div'>) => {
@@ -35,6 +37,7 @@ export const Dropdown = (props: DropdownProps & React.ComponentProps<'div'>) =>
     label = null,
     ariaLabel = '',
     glyph = '',
+    showChevron = true,
     disabled = false,
     placement,
     gutter = 4,
@@ -43,7 +46,7 @@ export const Dropdown = (props: DropdownProps & React.ComponentProps<'div'>) =>
   } = props;
 
   const dropdownAriaLabel = ariaLabel || (typeof label === 'string' ? label : '');
-  const menuState = useMenuState({ placement, gutter, shift });
+  const menuState = useMenuState({ animated: true, placement, gutter, shift });
 
   return (
     <>
@@ -52,6 +55,7 @@ export const Dropdown = (props: DropdownProps & React.ComponentProps<'div'>) =>
         outline
         size={BUTTON_SIZE.SMALL}
         glyph={glyph}
+        rightGlyph={showChevron ? Icon.ICONS.CHEVRON_DOWN : undefined}
         disabled={disabled}
         state={menuState}
         tabIndex={null}

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.module.css

@@ -5,11 +5,14 @@
 .anchor {
   display: inline-block;
   color: inherit;
+  cursor: default;
   text-decoration: none;
+  transition: var(--transition-out);
 }
 
 .anchor:hover {
   color: var(--color-primary);
+  transition: var(--transition-in);
 }
 
 .anchor:focus {
@@ -27,4 +30,15 @@
   will-change: filter;
   background: var(--color-light);
   font-size: var(--size-small);
+  opacity: 0;
+  transition: var(--transition-out);
+}
+
+.hoverCard[data-enter] {
+  opacity: 1;
+  transition: var(--transition-in);
+}
+
+.hoverCard[data-leave] {
+  pointer-events: none;
 }

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/hover-card/hover-card.tsx

@@ -31,7 +31,7 @@ export const HoverCard = (props: HoverCardProps) => {
     children,
   } = props;
 
-  const state = useHovercardState({ gutter: 8, timeout: 300, placement: 'top' });
+  const state = useHovercardState({ animated: true, gutter: 8, timeout: 300, placement: 'top' });
   const hovercardProps = useHovercard({ state, portal: true });
 
   // Fallback to span if no href

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