@aarhus-university/au-lib-react-components 12.0.2 → 12.1.0

package/stories/AUErrorComponent.stories.tsx

@@ -1,11 +1,28 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryObj, Meta } from '@storybook/react';
 import AUErrorComponent from '../src/components/AUErrorComponent';
 import { ThemeWrapper } from './lib/helpers';
 
 export default {
   title: 'Delphinus/Error',
   component: AUErrorComponent,
+  argTypes: {
+    error: {
+      table: {
+        disable: true,
+      }
+    },
+    fetchError: {
+      table: {
+        disable: true,
+      }
+    },
+    serializedError: {
+      table: {
+        disable: true,
+      }
+    },
+  },
   decorators: [
     (Story, context) => (
       <ThemeWrapper theme={context.globals.theme}>
@@ -13,86 +30,104 @@ export default {
       </ThemeWrapper>
     )
   ],
-} as ComponentMeta<typeof AUErrorComponent>;
+} as Meta<typeof AUErrorComponent>;
 
-const Template: ComponentStory<typeof AUErrorComponent> = (args) => <AUErrorComponent {...args} />;
+type Story = StoryObj<typeof AUErrorComponent>;
 
-export const AU_Error = Template.bind({});
-AU_Error.args = {
-  error: {
-    header: 'Our own custom error',
-    message: 'With a nice header and descriptive error message, maybe a hint of some <a href="mailto:#">contact support info</a>',
-    status: 500,
+export const AU_Error: Story = {
+  args: {
+    error: {
+      header: 'Our own custom error',
+      message: 'With a nice header and descriptive error message',
+      status: 500,
+    },
+    withStatus: false,
   },
+  render: (args) => <AUErrorComponent {...args} />,
 };
 
-export const AU_Error_With_Status = Template.bind({});
-AU_Error_With_Status.args = {
-  error: {
-    header: 'Our own custom error',
-    message: 'With a nice header and descriptive error message',
-    status: 500,
+export const AU_Error_With_Status: Story = {
+  args: {
+    error: {
+      header: 'Our own custom error',
+      message: 'With a nice header and descriptive error message',
+      status: 500,
+    },
+    withStatus: true,
   },
-  withStatus: true,
+  render: (args) => <AUErrorComponent {...args} />,
 };
 
-export const Fetch_Error = Template.bind({});
-Fetch_Error.args = {
-  fetchError: {
-    error: 'Something horrible has happened on the server...',
-    status: 'FETCH_ERROR',
+export const Fetch_Error: Story = {
+  args: {
+    fetchError: {
+      error: 'Something horrible has happened on the server...',
+      status: 'FETCH_ERROR',
+    },
+    withStatus: false,
   },
+  render: (args) => <AUErrorComponent {...args} />,
 };
 
-export const Fetch_Error_With_Status = Template.bind({});
-Fetch_Error_With_Status.args = {
-  fetchError: {
-    error: 'Something horrible has happened on the server...',
-    status: 'FETCH_ERROR',
+export const Fetch_Error_With_Status: Story = {
+  args: {
+    fetchError: {
+      error: 'Something horrible has happened on the server...',
+      status: 'FETCH_ERROR',
+    },
+    withStatus: true,
   },
-  withStatus: true,
+  render: (args) => <AUErrorComponent {...args} />,
 };
 
-export const Fetch_Error_With_Data = Template.bind({});
-Fetch_Error_With_Data.args = {
-  fetchError: {
-    data: {
-      status: 'Error',
-      message: 'This could be anything...',
-      somethingElse: 'Even this...',
+export const Fetch_Error_With_Data: Story = {
+  args: {
+    fetchError: {
+      data: {
+        status: 'Error',
+        message: 'This could be anything...',
+        somethingElse: 'Even this...',
+      },
+      status: 500,
     },
-    status: 500,
+    withStatus: false,
   },
-  withStatus: false,
+  render: (args) => <AUErrorComponent {...args} />,
 };
 
-export const Fetch_Error_With_Data_And_Status = Template.bind({});
-Fetch_Error_With_Data_And_Status.args = {
-  fetchError: {
-    data: {
-      status: 'Error',
-      message: 'This could be anything...',
-      somethingElse: 'Even this...',
+export const Fetch_Error_With_Data_And_Status: Story = {
+  args: {
+    fetchError: {
+      data: {
+        status: 'Error',
+        message: 'This could be anything...',
+        somethingElse: 'Even this...',
+      },
+      status: 500,
     },
-    status: 500,
+    withStatus: true,
   },
-  withStatus: true,
+  render: (args) => <AUErrorComponent {...args} />,
 };
 
-export const Serialized_Error = Template.bind({});
-Serialized_Error.args = {
-  serializedError: {
-    message: 'Something funky has happened in the code...',
-    code: '500',
+export const Serialized_Error: Story = {
+  args: {
+    serializedError: {
+      message: 'Something funky has happened in the code...',
+      code: '500',
+    },
+    withStatus: false,
   },
-  withStatus: false,
+  render: (args) => <AUErrorComponent {...args} />,
 };
 
-export const Serialized_Error_With_Code = Template.bind({});
-Serialized_Error_With_Code.args = {
-  serializedError: {
-    message: 'Something funky has happened in the code...',
-    code: '500',
+export const Serialized_Error_With_Code: Story = {
+  args: {
+    serializedError: {
+      message: 'Something funky has happened in the code...',
+      code: '500',
+    },
+    withStatus: true,
   },
-  withStatus: true,
-};
+  render: (args) => <AUErrorComponent {...args} />,
+};

package/stories/AUModalComponent.stories.tsx

@@ -1,10 +1,21 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { useArgs } from '@storybook/client-api';
+import { StoryObj, Meta } from '@storybook/react';
+import { useArgs } from '@storybook/preview-api';
 import AUModalComponent from '../src/components/AUModalComponent';
 import AUButtonComponent from '../src/components/AUButtonComponent';
 import { ThemeWrapper } from './lib/helpers';
 
+const modalContent = (
+  <>
+    <h2 className="modal-view__header">
+      The quick brown fox jumps over the lazy dog
+    </h2>
+    <div className="modal-view__content">
+      <p>"The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all of the letters of the alphabet. It is commonly used for touch-typing practice, testing typewriters and computer keyboards, displaying examples of fonts, and other applications involving text where the use of all letters in the alphabet is desired. Owing to its brevity and coherence, it has become widely known.</p><h3>History</h3><p>The earliest known appearance of the phrase is from The Boston Journal. In an article titled "Current Notes" in the February 10, 1885, morning edition, the phrase is mentioned as a good practice sentence for writing students: "A favorite copy set by writing teachers for their pupils is the following, because it contains every letter of the alphabet: 'A quick brown fox jumps over the lazy dog.'"[1] Dozens of other newspapers published the phrase over the next few months, all using the version of the sentence starting with "A" rather than "The".[2] The earliest known use of the phrase in its modern form (starting with "The") is from the 1888 book Illustrative Shorthand by Linda Bronson.[3] The modern form (starting with "The") became more common despite the fact that it is slightly longer than the original (starting with "A").</p>
+    </div>
+  </>
+);
+
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
   title: 'Delphinus/Modal',
@@ -23,62 +34,127 @@ export default {
       </ThemeWrapper>
     )
   ],
-} as ComponentMeta<typeof AUModalComponent>;
+} as Meta<typeof AUModalComponent>;
 
 const fakeBtn = document.createElement('button');
 
-const Template: ComponentStory<typeof AUModalComponent> = (args) => {
-  const [_, updateArgs] = useArgs();
-  return (
-    <div className="page__content__block">
-      <AUButtonComponent
-        label="Open modal"
-        ariaHasPopup
-        onClick={() => updateArgs({ ...args, show: true })}
-      />
-      <AUModalComponent {...args} onClose={() => updateArgs({ ...args, show: false })}>
-        <>
-          <h2 className="modal-view__header">
-            The quick brown fox jumps over the lazy dog
-          </h2>
-          <div className="modal-view__content">
-            <p>"The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all of the letters of the alphabet. It is commonly used for touch-typing practice, testing typewriters and computer keyboards, displaying examples of fonts, and other applications involving text where the use of all letters in the alphabet is desired. Owing to its brevity and coherence, it has become widely known.</p><h3>History</h3><p>The earliest known appearance of the phrase is from The Boston Journal. In an article titled "Current Notes" in the February 10, 1885, morning edition, the phrase is mentioned as a good practice sentence for writing students: "A favorite copy set by writing teachers for their pupils is the following, because it contains every letter of the alphabet: 'A quick brown fox jumps over the lazy dog.'"[1] Dozens of other newspapers published the phrase over the next few months, all using the version of the sentence starting with "A" rather than "The".[2] The earliest known use of the phrase in its modern form (starting with "The") is from the 1888 book Illustrative Shorthand by Linda Bronson.[3] The modern form (starting with "The") became more common despite the fact that it is slightly longer than the original (starting with "A").</p>
-          </div>
-        </>
-      </AUModalComponent>
-    </div>
-  )
-};
+type Story = StoryObj<typeof AUModalComponent>;
+
+export const Default: Story = {
+  args: {
+    show: true,
+    sender: fakeBtn,
+    closeButtonDisabled: false,
+  },
+  render: (args) => {
+    const [_, updateArgs] = useArgs();
 
-export const Default = Template.bind({});
-Default.args = {
-  show: true,
-  sender: fakeBtn,
+    return (
+      <div className="page__content__block">
+        <AUButtonComponent
+          label="Open modal"
+          ariaHasPopup
+          onClick={() => updateArgs({ ...args, show: true })}
+        />
+        <AUModalComponent {...args} onClose={() => updateArgs({ ...args, show: false })}>
+          {modalContent}
+        </AUModalComponent>
+      </div>
+    );
+  },
 };
 
-export const Hidden = Template.bind({});
-Hidden.args = {
-  show: false,
-  sender: fakeBtn,
+export const Hidden: Story = {
+  args: {
+    show: false,
+    sender: fakeBtn,
+  },
+  render: (args) => {
+    const [_, updateArgs] = useArgs();
+
+    return (
+      <div className="page__content__block">
+        <AUButtonComponent
+          label="Open modal"
+          ariaHasPopup
+          onClick={() => updateArgs({ ...args, show: true })}
+        />
+        <AUModalComponent {...args} onClose={() => updateArgs({ ...args, show: false })}>
+          {modalContent}
+        </AUModalComponent>
+      </div>
+    );
+  },
 };
 
-export const Wide = Template.bind({});
-Wide.args = {
-  className: 'modal-view modal-view--wide',
-  show: true,
-  sender: fakeBtn,
+export const Wide: Story = {
+  args: {
+    className: 'modal-view modal-view--wide',
+    show: true,
+    sender: fakeBtn,
+  },
+  render: (args) => {
+    const [_, updateArgs] = useArgs();
+
+    return (
+      <div className="page__content__block">
+        <AUButtonComponent
+          label="Open modal"
+          ariaHasPopup
+          onClick={() => updateArgs({ ...args, show: true })}
+        />
+        <AUModalComponent {...args} onClose={() => updateArgs({ ...args, show: false })}>
+          {modalContent}
+        </AUModalComponent>
+      </div>
+    );
+  },
 };
 
-export const High = Template.bind({});
-High.args = {
-  className: 'modal-view modal-view--high',
-  show: true,
-  sender: fakeBtn,
+export const High: Story = {
+  args: {
+    className: 'modal-view modal-view--high',
+    show: true,
+    sender: fakeBtn,
+  },
+  render: (args) => {
+    const [_, updateArgs] = useArgs();
+
+    return (
+      <div className="page__content__block">
+        <AUButtonComponent
+          label="Open modal"
+          ariaHasPopup
+          onClick={() => updateArgs({ ...args, show: true })}
+        />
+        <AUModalComponent {...args} onClose={() => updateArgs({ ...args, show: false })}>
+          {modalContent}
+        </AUModalComponent>
+      </div>
+    );
+  },
 };
 
-export const Non_Closable = Template.bind({});
-Non_Closable.args = {
-  show: true,
-  sender: fakeBtn,
-  closeButtonDisabled: true,
+export const Non_Closable: Story = {
+  args: {
+    show: true,
+    sender: fakeBtn,
+    closeButtonDisabled: true,
+  },
+  render: (args) => {
+    const [_, updateArgs] = useArgs();
+
+    return (
+      <div className="page__content__block">
+        <AUButtonComponent
+          label="Open modal"
+          ariaHasPopup
+          onClick={() => updateArgs({ ...args, show: true })}
+        />
+        <AUModalComponent {...args} onClose={() => updateArgs({ ...args, show: false })}>
+          {modalContent}
+        </AUModalComponent>
+      </div>
+    );
+  },
 };

package/stories/AUNotificationComponent.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryObj, Meta } from '@storybook/react';
 import AUNotificationComponent from '../src/components/AUNotificationComponent';
 import AUButtonComponent from '../src/components/AUButtonComponent';
 import { ThemeWrapper } from './lib/helpers';
@@ -18,7 +18,27 @@ export default {
         'attention',
         'confirm',
       ],
-    }
+    },
+    header: {
+      table: {
+        disable: true,
+      }
+    },
+    content: {
+      table: {
+        disable: true,
+      }
+    },
+    actions: {
+      table: {
+        disable: true,
+      }
+    },
+    classNames: {
+      table: {
+        disable: true,
+      }
+    },
   },
   decorators: [
     (Story, context) => (
@@ -27,90 +47,106 @@ export default {
       </ThemeWrapper>
     )
   ],
-} as ComponentMeta<typeof AUNotificationComponent>;
+} as Meta<typeof AUNotificationComponent>;
 
-const Template: ComponentStory<typeof AUNotificationComponent> = (args) => <AUNotificationComponent {...args} />;
+type Story = StoryObj<typeof AUNotificationComponent>;
 
-export const Default = Template.bind({});
-Default.args = {
-  header: 'This is a notification',
-  content: [
-    <p>This might be of importance...</p>
-  ],
-};
-
-export const Warning = Template.bind({});
-Warning.args = {
-  header: 'Oops! An error has occurred',
-  type: 'warning',
-  content: [
-    <p>Shit's fucked, yo!</p>
-  ],
+export const Default: Story = {
+  args: {
+    header: 'This is a notification',
+    content: [
+      <p>This might be of importance...</p>
+    ],
+  },
+  render: (args) => <AUNotificationComponent {...args} />,
 };
 
-export const Attention = Template.bind({});
-Attention.args = {
-  header: 'Please read this',
-  type: 'attention',
-  content: [
-    <p>We really want you to read this.</p>
-  ],
+export const Warning: Story = {
+  args: {
+    header: 'Oops! An error has occurred',
+    type: 'warning',
+    content: [
+      <p>Shit's fucked, yo!</p>
+    ],
+  },
+  render: (args) => <AUNotificationComponent {...args} />,
 };
 
-export const Confirm = Template.bind({});
-Confirm.args = {
-  header: 'Great success',
-  type: 'confirm',
-  content: [
-    <p>You the man now, dawg!</p>
-  ],
+export const Attention: Story = {
+  args: {
+    header: 'Please read this',
+    type: 'attention',
+    content: [
+      <p>We really want you to read this.</p>
+    ],
+  },
+  render: (args) => <AUNotificationComponent {...args} />,
 };
 
-export const Single_Action = Template.bind({});
-Single_Action.args = {
-  header: 'Do you want to do this?',
-  type: 'attention',
-  content: [
-    <p>Please confirm.</p>
-  ],
-  actions: [
-    <AUButtonComponent
-      label="Ok"
-    />
-  ],
+export const Confirm: Story = {
+  args: {
+    header: 'Great success',
+    type: 'confirm',
+    content: [
+      <p>You the man now, dawg!</p>
+    ],
+  },
+  render: (args) => <AUNotificationComponent {...args} />,
 };
 
-export const Multiple_Actions = Template.bind({});
-Multiple_Actions.args = {
-  header: 'Do you want to do this?',
-  type: 'attention',
-  content: [
-    <p>Please confirm.</p>
-  ],
-  actions: [
-    <div className="button-container">
+export const Single_Action: Story = {
+  args: {
+    header: 'Do you want to do this?',
+    type: 'attention',
+    content: [
+      <p>Please confirm.</p>
+    ],
+    actions: [
       <AUButtonComponent
         label="Ok"
       />
-      <AUButtonComponent
-        label="Cancel"
-        type="text"
-      />
-    </div>,
-  ],
+    ],
+  },
+  render: (args) => <AUNotificationComponent {...args} />,
 };
 
-export const No_Header = Template.bind({});
-No_Header.args = {
-  content: [
-    <p>This might be of importance...</p>
-  ],
+export const Multiple_Actions: Story = {
+  args: {
+    header: 'Do you want to do this?',
+    type: 'attention',
+    content: [
+      <p>Please confirm.</p>
+    ],
+    actions: [
+      <div className="button-container">
+        <AUButtonComponent
+          label="Ok"
+        />
+        <AUButtonComponent
+          label="Cancel"
+          type="text"
+        />
+      </div>,
+    ],
+  },
+  render: (args) => <AUNotificationComponent {...args} />,
 };
 
-export const Constrained_Width = Template.bind({});
-Constrained_Width.args = {
-  content: [
-    <p>This might be of importance...</p>
-  ],
-  classNames: ['notification--constrain-width'],
+export const No_Header: Story = {
+  args: {
+    content: [
+      <p>This might be of importance...</p>
+    ],
+  },
+  render: (args) => <AUNotificationComponent {...args} />,
 };
+
+export const Constrained_Width: Story = {
+  args: {
+    header: 'This is a notification',
+    content: [
+      <p>This might be of importance...</p>
+    ],
+  },
+  render: (args) => <AUNotificationComponent {...args} />,
+};

package/stories/AUSpinnerComponent.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryObj, Meta } from '@storybook/react';
 import AUSpinnerComponent from '../src/components/AUSpinnerComponent';
 import { ThemeWrapper } from './lib/helpers';
 
@@ -17,6 +17,11 @@ export default {
         'table',
       ],
     },
+    className: {
+      table: {
+        disable: true,
+      }
+    },
   },
   decorators: [
     (Story, context) => (
@@ -25,17 +30,15 @@ export default {
       </ThemeWrapper>
     )
   ],
-} as ComponentMeta<typeof AUSpinnerComponent>;
+} as Meta<typeof AUSpinnerComponent>;
 
-const Template: ComponentStory<typeof AUSpinnerComponent> = (args) => (
-  <AUSpinnerComponent {...args}>
-    <p>Child content</p>
-  </AUSpinnerComponent>
-);
+type Story = StoryObj<typeof AUSpinnerComponent>;
 
-export const Spinner = Template.bind({});
-Spinner.args = {
-  loaded: false,
-  height: '20rem',
-  init: 'box',
+export const Spinner: Story = {
+  args: {
+    loaded: false,
+    height: '20rem',
+    init: 'box',
+  },
+  render: (args) => <AUSpinnerComponent {...args}><p>Child content</p></AUSpinnerComponent>,
 };