@dxos/react-ui 0.8.1 → 0.8.2-main.10c050d

package/src/components/Toast/Toast.stories.tsx

@@ -13,27 +13,27 @@ import { Button } from '../Buttons';
 type ActionTriggerProps = { altText: string; trigger: ReactNode };
 
 type StorybookToastProps = Partial<{
-  openTrigger: string;
   title: string;
   description: string;
   actionTriggers: ActionTriggerProps[];
+  openTrigger: string;
   closeTrigger: ReactNode;
 }>;
 
-const StorybookToast = (props: StorybookToastProps) => {
+const DefaultStory = ({ title, description, actionTriggers, openTrigger, closeTrigger }: StorybookToastProps) => {
   const [open, setOpen] = useState(true);
   return (
     <Toast.Provider>
-      <Button onClick={() => setOpen(true)}>{props.openTrigger}</Button>
+      <Button onClick={() => setOpen(true)}>{openTrigger}</Button>
       <Toast.Viewport />
       <Toast.Root open={open} onOpenChange={setOpen}>
         <Toast.Body>
-          <Toast.Title>{props.title}</Toast.Title>
-          <Toast.Description>{props.description}</Toast.Description>
+          <Toast.Title>{title}</Toast.Title>
+          <Toast.Description>{description}</Toast.Description>
         </Toast.Body>
         <Toast.Actions>
-          <Toast.Close asChild={typeof props.closeTrigger !== 'string'}>{props.closeTrigger}</Toast.Close>
-          {(props.actionTriggers || []).map(({ altText, trigger }: ActionTriggerProps, index: number) => (
+          <Toast.Close asChild={typeof closeTrigger !== 'string'}>{closeTrigger}</Toast.Close>
+          {(actionTriggers || []).map(({ altText, trigger }: ActionTriggerProps, index: number) => (
             <Toast.Action key={index} altText={altText} asChild={typeof trigger !== 'string'}>
               {trigger}
             </Toast.Action>
@@ -47,7 +47,7 @@ const StorybookToast = (props: StorybookToastProps) => {
 export default {
   title: 'ui/react-ui-core/Toast',
   component: Toast,
-  render: StorybookToast,
+  render: DefaultStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };
@@ -55,9 +55,14 @@ export default {
 export const Default = {
   args: {
     openTrigger: 'Open toast',
-    title: 'Hi, this is a toast',
+    title: 'This is a toast',
     description: 'This goes away on its own with a timer.',
-    actionTriggers: [{ altText: 'Press F5 to reload the page', trigger: <Button variant='primary'>Reload</Button> }],
+    actionTriggers: [
+      {
+        altText: 'Press F5 to reload the page',
+        trigger: <Button variant='primary'>Reload</Button>,
+      },
+    ],
     closeTrigger: <Button>Close</Button>,
   },
   parameters: {

package/src/components/Toolbar/Toolbar.stories.tsx

@@ -14,7 +14,7 @@ import { Select } from '../Select';
 
 type StorybookToolbarProps = {};
 
-const StorybookToolbar = (props: StorybookToolbarProps) => {
+const DefaultStory = (props: StorybookToolbarProps) => {
   return (
     <Toolbar.Root>
       {/* TODO(burdon): Should be fixed width (regardless of selection). */}
@@ -72,7 +72,7 @@ const StorybookToolbar = (props: StorybookToolbarProps) => {
 export default {
   title: 'ui/react-ui-core/Toolbar',
   component: Toolbar,
-  render: StorybookToolbar,
+  render: DefaultStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -3,55 +3,80 @@
 //
 
 import '@dxos-theme';
-
 import React from 'react';
 
+import { faker } from '@dxos/random';
+
 import { Tooltip } from './Tooltip';
 import { withTheme } from '../../testing';
 import { Button } from '../Buttons';
 
-type StoryTooltipProps = {
-  content: string;
+type StoryProps = {
+  tooltips: { label: string; content: string }[];
   defaultOpen?: boolean;
 };
 
-const StoryTooltip = ({ content, defaultOpen }: StoryTooltipProps) => (
-  <Tooltip.Provider>
-    <Tooltip.Root defaultOpen={defaultOpen}>
-      <Tooltip.Trigger asChild>
-        <Button>Trigger tooltip</Button>
-      </Tooltip.Trigger>
-      <Tooltip.Content side='right'>
-        <Tooltip.Arrow />
-        {content}
-      </Tooltip.Content>
-    </Tooltip.Root>
+const DefaultStory = ({ tooltips, defaultOpen }: StoryProps) => (
+  <Tooltip.Provider defaultOpen={defaultOpen}>
+    <div role='none' className='is-32'>
+      {tooltips.map(({ label, content }, i) => (
+        <Tooltip.Trigger asChild key={i} content={content} side='right'>
+          <Button classNames='block is-full'>{label}</Button>
+        </Tooltip.Trigger>
+      ))}
+    </div>
   </Tooltip.Provider>
 );
 
 export default {
   title: 'ui/react-ui-core/Tooltip',
   component: Tooltip,
-  render: StoryTooltip,
+  render: DefaultStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };
 
 export const Default = {
   args: {
-    content: 'This is the tooltip content',
+    tooltips: [
+      {
+        label: 'Tooltip trigger',
+        content: 'This is the tooltip content',
+      },
+    ],
   },
   parameters: {
     chromatic: { delay: 500 },
   },
 };
 
-export const Testing = {
+export const DefaultOpen = {
   args: {
     defaultOption: true,
-    content: 'This is the tooltip content',
+    tooltips: [
+      {
+        label: 'Tooltip trigger',
+        content: 'This is the tooltip content',
+      },
+    ],
   },
   parameters: {
     chromatic: { delay: 500 },
   },
 };
+
+export const StressTest = {
+  args: {
+    defaultOption: true,
+    tooltips: faker.helpers.multiple(
+      () => ({
+        label: faker.lorem.words(2),
+        content: faker.lorem.words(5),
+      }),
+      { count: 32 },
+    ),
+  },
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+};