@scm-manager/ui-core 4.0.0-REACT18-20250701-125025 → 4.0.0-REACT19

package/src/base/layout/templates/data-page/DataPage.stories.tsx

@@ -14,7 +14,187 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React from "react";
+// import React from "react";
+// import {
+//   DataPageHeader,
+//   DataPageHeaderCreateButton,
+//   DataPageHeaderSetting,
+//   DataPageHeaderSettingField,
+//   DataPageHeaderSettingLabel,
+//   DataPageHeaderSettings,
+// } from "./DataPageHeader";
+// import { Select } from "../../../forms";
+// import { ComponentMeta, ComponentStory } from "@storybook/react";
+// import { Loading, Subtitle, Title } from "../../../misc";
+// import { ErrorNotification, Notification } from "../../../notifications";
+// import { Button, Icon } from "../../../buttons";
+// import { CardListBox, CardListCard } from "../../card-list/CardList";
+// import CardRow, { SecondaryRow, TertiaryRow } from "../../card/CardRow";
+// import CardTitle from "../../card/CardTitle";
+// import { Link } from "react-router-dom";
+// import StoryRouter from "storybook-react-router";
+// import { CardDetail, CardDetailLabel, CardDetails, CardDetailTag } from "../../card/CardDetail";
+//
+// export default {
+//   title: "Data Page Template",
+//   component: DataPageHeader,
+//   decorators: [StoryRouter()],
+// } as ComponentMeta<typeof DataPageHeader>;
+//
+// // @ts-ignore Storybook is not cooperating
+// export const Example: ComponentStory<{ error: Error; isLoading: boolean; isEmpty: boolean }> = ({
+//   error,
+//   isLoading,
+//   isEmpty,
+// }: any) => {
+//   let content;
+//   if (error) {
+//     content = <ErrorNotification error={error} />;
+//   } else if (isLoading) {
+//     content = <Loading />;
+//   } else if (isEmpty) {
+//     content = <Notification type="info">There is no data, consider adjusting the filters</Notification>;
+//   } else {
+//     content = (
+//       <CardListBox>
+//         <CardListCard avatar={<Icon>trash</Icon>} action={<Icon>ellipsis-v</Icon>}>
+//           <CardRow>
+//             <CardTitle>
+//               <Link to="/item">
+//                 The title may contain a link but most importantly does not contain any information except the "display
+//                 name" of the entity. It is also text-only
+//               </Link>
+//             </CardTitle>
+//           </CardRow>
+//           <SecondaryRow>
+//             This contains more important details about the card, but not quite as important as the title.
+//           </SecondaryRow>
+//           <TertiaryRow>This contains less important information about the card</TertiaryRow>
+//           <CardRow>
+//             <CardDetails>
+//               <CardDetail>
+//                 <CardDetailLabel>Tags are great for numbers.</CardDetailLabel>
+//                 <CardDetailTag>7/3</CardDetailTag>
+//               </CardDetail>
+//               <CardDetail>
+//                 {({ labelId }) => (
+//                   <>
+//                     <CardDetailLabel id={labelId}>
+//                       Interactive details need 'is-relative' and 'aria-labelledby'
+//                     </CardDetailLabel>
+//                     <Button aria-labelledby={labelId} className="is-relative has-background-transparent is-borderless">
+//                       <Icon>edit</Icon>
+//                     </Button>
+//                   </>
+//                 )}
+//               </CardDetail>
+//             </CardDetails>
+//           </CardRow>
+//         </CardListCard>
+//         <CardListCard avatar={<Icon>users</Icon>} action={<Icon>ellipsis-v</Icon>}>
+//           <CardRow>
+//             <CardTitle>
+//               <Link to="/item">
+//                 We can also enter insane text without whitespace
+//                 ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
+//               </Link>
+//             </CardTitle>
+//           </CardRow>
+//           <SecondaryRow>
+//             SCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCM
+//           </SecondaryRow>
+//           <TertiaryRow>
+//             SCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCM
+//           </TertiaryRow>
+//           <CardRow>
+//             <CardDetails>
+//               <CardDetail>
+//                 <CardDetailLabel>SCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCM</CardDetailLabel>
+//                 <CardDetailTag>7/3</CardDetailTag>
+//               </CardDetail>
+//               <CardDetail>
+//                 {({ labelId }) => (
+//                   <>
+//                     <CardDetailLabel id={labelId}>SCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCM</CardDetailLabel>
+//                     <Button aria-labelledby={labelId} className="is-relative has-background-transparent is-borderless">
+//                       <Icon>trash</Icon>
+//                     </Button>
+//                   </>
+//                 )}
+//               </CardDetail>
+//             </CardDetails>
+//           </CardRow>
+//         </CardListCard>
+//       </CardListBox>
+//     );
+//   }
+//
+//   return (
+//     <>
+//       <Title>My Page</Title>
+//       <Subtitle subtitle="All the data" />
+//       <DataPageHeader>
+//         <DataPageHeaderSettings>
+//           <DataPageHeaderSetting>
+//             {({ formFieldId }) => (
+//               <>
+//                 <DataPageHeaderSettingLabel htmlFor={formFieldId}>Filter by</DataPageHeaderSettingLabel>
+//                 <DataPageHeaderSettingField>
+//                   <Select
+//                     id={formFieldId}
+//                     options={[
+//                       {
+//                         label: "Yes",
+//                         value: 1,
+//                       },
+//                       {
+//                         label: "No",
+//                         value: 0,
+//                       },
+//                     ]}
+//                   />
+//                 </DataPageHeaderSettingField>
+//               </>
+//             )}
+//           </DataPageHeaderSetting>
+//           <DataPageHeaderSetting>
+//             {({ formFieldId }) => (
+//               <>
+//                 <DataPageHeaderSettingLabel htmlFor={formFieldId}>Sort by</DataPageHeaderSettingLabel>
+//                 <DataPageHeaderSettingField>
+//                   <Select
+//                     id={formFieldId}
+//                     options={[
+//                       {
+//                         label: "Blue",
+//                         value: 1,
+//                       },
+//                       {
+//                         label: "Red",
+//                         value: 0,
+//                       },
+//                     ]}
+//                   />
+//                 </DataPageHeaderSettingField>
+//               </>
+//             )}
+//           </DataPageHeaderSetting>
+//         </DataPageHeaderSettings>
+//         <DataPageHeaderCreateButton to="/mydata/create">Create New Data</DataPageHeaderCreateButton>
+//       </DataPageHeader>
+//       {content}
+//     </>
+//   );
+// };
+// Example.args = {
+//   error: undefined,
+//   isLoading: false,
+//   isEmpty: false,
+// };
+
+import React, { FC, ReactNode } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
 import {
   DataPageHeader,
   DataPageHeaderCreateButton,
@@ -24,170 +204,123 @@ import {
   DataPageHeaderSettings,
 } from "./DataPageHeader";
 import { Select } from "../../../forms";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
 import { Loading, Subtitle, Title } from "../../../misc";
-import { ErrorNotification, Notification } from "../../../notifications"
+import { ErrorNotification, Notification } from "../../../notifications";
 import { Button, Icon } from "../../../buttons";
 import { CardListBox, CardListCard } from "../../card-list/CardList";
 import CardRow, { SecondaryRow, TertiaryRow } from "../../card/CardRow";
 import CardTitle from "../../card/CardTitle";
-import { Link } from "react-router-dom";
-import StoryRouter from "storybook-react-router";
 import { CardDetail, CardDetailLabel, CardDetails, CardDetailTag } from "../../card/CardDetail";
 
-export default {
-  title: "Data Page Template",
+const PageTemplate: FC<{ children: ReactNode }> = ({ children }) => (
+  <>
+    <Title>My Page</Title>
+    <Subtitle subtitle="All the data" />
+    <DataPageHeader>
+      <DataPageHeaderSettings>
+        <DataPageHeaderSetting>
+          {({ formFieldId }) => (
+            <>
+              <DataPageHeaderSettingLabel htmlFor={formFieldId}>Filter by</DataPageHeaderSettingLabel>
+              <DataPageHeaderSettingField>
+                <Select
+                  id={formFieldId}
+                  options={[
+                    { label: "Yes", value: 1 },
+                    { label: "No", value: 0 },
+                  ]}
+                />
+              </DataPageHeaderSettingField>
+            </>
+          )}
+        </DataPageHeaderSetting>
+        <DataPageHeaderSetting>
+          {({ formFieldId }) => (
+            <>
+              <DataPageHeaderSettingLabel htmlFor={formFieldId}>Sort by</DataPageHeaderSettingLabel>
+              <DataPageHeaderSettingField>
+                <Select
+                  id={formFieldId}
+                  options={[
+                    { label: "Blue", value: 1 },
+                    { label: "Red", value: 0 },
+                  ]}
+                />
+              </DataPageHeaderSettingField>
+            </>
+          )}
+        </DataPageHeaderSetting>
+      </DataPageHeaderSettings>
+      <Button variant="primary">Create New Data</Button>
+    </DataPageHeader>
+    <div style={{ marginTop: "1rem" }}>{children}</div>
+  </>
+);
+
+const dataContent = (
+  <CardListBox>
+    <CardListCard avatar={<Icon>trash</Icon>} action={<Icon>ellipsis-v</Icon>}>
+      <CardRow>
+        <CardTitle>
+          <a href="/item" onClick={(e) => e.preventDefault()}>
+            The title may contain a link but most importantly does not contain any information except the "display name"
+            of the entity.
+          </a>
+        </CardTitle>
+      </CardRow>
+      <SecondaryRow>This contains more important details about the card.</SecondaryRow>
+      <TertiaryRow>This contains less important information about the card</TertiaryRow>
+      <CardRow>
+        <CardDetails>
+          <CardDetail>
+            <CardDetailLabel>Tags are great for numbers.</CardDetailLabel>
+            <CardDetailTag>7/3</CardDetailTag>
+          </CardDetail>
+        </CardDetails>
+      </CardRow>
+    </CardListCard>
+  </CardListBox>
+);
+
+const meta: Meta<typeof DataPageHeader> = {
+  title: "Templates/Data Page",
   component: DataPageHeader,
-  decorators: [StoryRouter()],
-} as ComponentMeta<typeof DataPageHeader>;
+  decorators: [(Story) => <div style={{ margin: "2rem" }}>{Story()}</div>],
+  tags: ["autodocs"],
+};
+
+export default meta;
 
-// @ts-ignore Storybook is not cooperating
-export const Example: ComponentStory<{ error: Error; isLoading: boolean; isEmpty: boolean }> = ({
-  error,
-  isLoading,
-  isEmpty,
-}: any) => {
-  let content;
-  if (error) {
-    content = <ErrorNotification error={error} />;
-  } else if (isLoading) {
-    content = <Loading />;
-  } else if (isEmpty) {
-    content = <Notification type="info">There is no data, consider adjusting the filters</Notification>;
-  } else {
-    content = (
-      <CardListBox>
-        <CardListCard avatar={<Icon>trash</Icon>} action={<Icon>ellipsis-v</Icon>}>
-          <CardRow>
-            <CardTitle>
-              <Link to="/item">
-                The title may contain a link but most importantly does not contain any information except the "display
-                name" of the entity. It is also text-only
-              </Link>
-            </CardTitle>
-          </CardRow>
-          <SecondaryRow>
-            This contains more important details about the card, but not quite as important as the title.
-          </SecondaryRow>
-          <TertiaryRow>This contains less important information about the card</TertiaryRow>
-          <CardRow>
-            <CardDetails>
-              <CardDetail>
-                <CardDetailLabel>Tags are great for numbers.</CardDetailLabel>
-                <CardDetailTag>7/3</CardDetailTag>
-              </CardDetail>
-              <CardDetail>
-                {({ labelId }) => (
-                  <>
-                    <CardDetailLabel id={labelId}>
-                      Interactive details need 'is-relative' and 'aria-labelledby'
-                    </CardDetailLabel>
-                    <Button aria-labelledby={labelId} className="is-relative has-background-transparent is-borderless">
-                      <Icon>edit</Icon>
-                    </Button>
-                  </>
-                )}
-              </CardDetail>
-            </CardDetails>
-          </CardRow>
-        </CardListCard>
-        <CardListCard avatar={<Icon>users</Icon>} action={<Icon>ellipsis-v</Icon>}>
-          <CardRow>
-            <CardTitle>
-              <Link to="/item">
-                We can also enter insane text without whitespace
-                ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
-              </Link>
-            </CardTitle>
-          </CardRow>
-          <SecondaryRow>
-            SCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCM
-          </SecondaryRow>
-          <TertiaryRow>
-            SCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCM
-          </TertiaryRow>
-          <CardRow>
-            <CardDetails>
-              <CardDetail>
-                <CardDetailLabel>SCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCM</CardDetailLabel>
-                <CardDetailTag>7/3</CardDetailTag>
-              </CardDetail>
-              <CardDetail>
-                {({ labelId }) => (
-                  <>
-                    <CardDetailLabel id={labelId}>SCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCM</CardDetailLabel>
-                    <Button aria-labelledby={labelId} className="is-relative has-background-transparent is-borderless">
-                      <Icon>trash</Icon>
-                    </Button>
-                  </>
-                )}
-              </CardDetail>
-            </CardDetails>
-          </CardRow>
-        </CardListCard>
-      </CardListBox>
-    );
-  }
+type Story = StoryObj<typeof DataPageHeader>;
 
-  return (
-    <>
-      <Title>My Page</Title>
-      <Subtitle subtitle="All the data" />
-      <DataPageHeader>
-        <DataPageHeaderSettings>
-          <DataPageHeaderSetting>
-            {({ formFieldId }) => (
-              <>
-                <DataPageHeaderSettingLabel htmlFor={formFieldId}>Filter by</DataPageHeaderSettingLabel>
-                <DataPageHeaderSettingField>
-                  <Select
-                    id={formFieldId}
-                    options={[
-                      {
-                        label: "Yes",
-                        value: 1,
-                      },
-                      {
-                        label: "No",
-                        value: 0,
-                      },
-                    ]}
-                  />
-                </DataPageHeaderSettingField>
-              </>
-            )}
-          </DataPageHeaderSetting>
-          <DataPageHeaderSetting>
-            {({ formFieldId }) => (
-              <>
-                <DataPageHeaderSettingLabel htmlFor={formFieldId}>Sort by</DataPageHeaderSettingLabel>
-                <DataPageHeaderSettingField>
-                  <Select
-                    id={formFieldId}
-                    options={[
-                      {
-                        label: "Blue",
-                        value: 1,
-                      },
-                      {
-                        label: "Red",
-                        value: 0,
-                      },
-                    ]}
-                  />
-                </DataPageHeaderSettingField>
-              </>
-            )}
-          </DataPageHeaderSetting>
-        </DataPageHeaderSettings>
-        <DataPageHeaderCreateButton to="/mydata/create">Create New Data</DataPageHeaderCreateButton>
-      </DataPageHeader>
-      {content}
-    </>
-  );
+export const Default: Story = {
+  name: "With Data",
+  render: () => <PageTemplate>{dataContent}</PageTemplate>,
 };
-Example.args = {
-  error: undefined,
-  isLoading: false,
-  isEmpty: false,
+
+export const IsLoading: Story = {
+  name: "Is Loading",
+  render: () => (
+    <PageTemplate>
+      <Loading />
+    </PageTemplate>
+  ),
+};
+
+export const IsEmpty: Story = {
+  name: "Is Empty",
+  render: () => (
+    <PageTemplate>
+      <Notification type="info">There is no data, consider adjusting the filters</Notification>
+    </PageTemplate>
+  ),
+};
+
+export const WithError: Story = {
+  name: "With Error",
+  render: () => (
+    <PageTemplate>
+      <ErrorNotification error={new Error("Failed to fetch data from the server.")} />
+    </PageTemplate>
+  ),
 };

package/src/base/layout/templates/data-page/DataPageHeader.tsx

@@ -48,7 +48,7 @@ export const DataPageHeaderSettings = withClasses("div", [
   "is-flex-basis-0",
 ]);
 
-type DataPageHeaderSettingProps = HTMLAttributes<HTMLDivElement> & {
+type DataPageHeaderSettingProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
   children?: React.ReactNode | ((props: { formFieldId: string }) => React.ReactNode);
 };
 

package/src/base/overlays/dialog/Dialog.stories.tsx

@@ -14,43 +14,103 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import StoryRouter from "storybook-react-router";
-import { ComponentMeta, StoryFn } from "@storybook/react";
-import React, { ComponentProps } from "react";
+// import StoryRouter from "storybook-react-router";
+// import { ComponentMeta, StoryFn } from "@storybook/react";
+// import React, { ComponentProps } from "react";
+// import { Button } from "../../buttons";
+// import Dialog from "./Dialog";
+//
+// export default {
+//   title: "Dialog",
+//   component: Dialog,
+//   decorators: [
+//     StoryRouter(),
+//     (Story) => (
+//       <div style={{ height: "100vh" }}>
+//         <Story />
+//       </div>
+//     ),
+//   ],
+// } as ComponentMeta<typeof Dialog>;
+//
+// const Template: StoryFn<ComponentProps<typeof Dialog>> = (args) => <Dialog {...args} />;
+//
+// export const Default = Template.bind({});
+// // More on args: https://storybook.js.org/docs/react/writing-stories/args
+// Default.args = {
+//   title: "My Dialog",
+//   trigger: <Button>Open Dialog</Button>,
+//   description: "Do you really want to do this ?",
+//   children: (
+//     <table>
+//       <tr>
+//         <th>Yes</th>
+//         <th>No</th>
+//       </tr>
+//       <tr>
+//         <td>42</td>
+//         <td>12</td>
+//       </tr>
+//     </table>
+//   ),
+//   footer: [
+//     <Button>Do it</Button>,
+//     <Button variant="primary" autoFocus>
+//       Cancel
+//     </Button>,
+//   ],
+// } as ComponentProps<typeof Dialog>;
+
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Button } from "../../buttons";
 import Dialog from "./Dialog";
 
-export default {
-  title: "Dialog",
+const meta: Meta<typeof Dialog> = {
+  title: "Components/Dialog",
   component: Dialog,
-  decorators: [StoryRouter()],
-  render: (story) => <div style={{ height: "100vh" }}>{story}</div>,
-} as ComponentMeta<typeof Dialog>;
+  decorators: [
+    (Story) => (
+      <div style={{ height: "100vh", padding: "2rem" }}>
+        <Story />
+      </div>
+    ),
+  ],
+  tags: ["autodocs"],
+};
 
-const Template: StoryFn<ComponentProps<typeof Dialog>> = (args) => <Dialog {...args} />;
+export default meta;
 
-export const Default = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-Default.args = {
-  title: "My Dialog",
-  trigger: <Button>Open Dialog</Button>,
-  description: "Do you really want to do this ?",
-  children: (
-    <table>
-      <tr>
-        <th>Yes</th>
-        <th>No</th>
-      </tr>
-      <tr>
-        <td>42</td>
-        <td>12</td>
-      </tr>
-    </table>
-  ),
-  footer: [
-    <Button>Do it</Button>,
-    <Button variant="primary" autoFocus>
-      Cancel
-    </Button>,
-  ],
-} as ComponentProps<typeof Dialog>;
+type Story = StoryObj<typeof Dialog>;
+
+export const Default: Story = {
+  args: {
+    title: "My Dialog",
+    trigger: <Button>Open Dialog</Button>,
+    description: "Do you really want to do this?",
+    children: (
+      <table>
+        <thead>
+          <tr>
+            <th>Yes</th>
+            <th>No</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>42</td>
+            <td>12</td>
+          </tr>
+        </tbody>
+      </table>
+    ),
+    // footer: (
+    //   <>
+    //     <Button>Do it</Button>
+    //     <Button variant="primary" autoFocus>
+    //       Cancel
+    //     </Button>
+    //   </>
+    // ),
+  },
+};