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

package/src/forms/Checkbox.stories.tsx

@@ -14,23 +14,135 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
+// import React, { FC, useRef, useState } from "react";
+// import { storiesOf } from "@storybook/react";
+// import Checkbox from "./Checkbox";
+// import styled from "styled-components";
+// import Button from "../buttons/Button";
+// import { useForm } from "react-hook-form";
+// import { SubmitButton } from "../buttons";
+// import { MemoryRouter } from "react-router-dom";
+//
+// const Spacing = styled.div`
+//   padding: 2em;
+// `;
+//
+// const Ref: FC = () => {
+//   const ref = useRef<HTMLInputElement>(null);
+//   return (
+//     <>
+//       <Checkbox label={"Ref Checkbox"} checked={false} ref={ref} />
+//       <Button
+//         action={() => {
+//           if (ref.current) {
+//             ref.current.checked = !ref.current.checked;
+//           }
+//         }}
+//         color="primary"
+//       >
+//         Toggle Checkbox
+//       </Button>
+//     </>
+//   );
+// };
+//
+// type Settings = {
+//   rememberMe: string;
+//   scramblePassword: string;
+//   readonly: boolean;
+//   disabled: boolean;
+// };
+//
+// const ReactHookForm: FC = () => {
+//   const { register, handleSubmit } = useForm<Settings>({
+//     defaultValues: {
+//       disabled: true,
+//       readonly: true,
+//     },
+//   });
+//   const [stored, setStored] = useState<Settings>();
+//
+//   const onSubmit = (settings: Settings) => {
+//     setStored(settings);
+//   };
+//
+//   return (
+//     <>
+//       <form onSubmit={handleSubmit(onSubmit)}>
+//         <Checkbox label="Remember Me" {...register("rememberMe")} />
+//         <Checkbox label="Scramble Password" {...register("scramblePassword")} />
+//         <Checkbox label="Disabled wont be submitted" disabled={true} {...register("disabled")} />
+//         <Checkbox label="Readonly will be submitted" readOnly={true} {...register("readonly")} />
+//         <div className="pt-2">
+//           <SubmitButton>Submit</SubmitButton>
+//         </div>
+//       </form>
+//       {stored ? (
+//         <div className="mt-5">
+//           <pre>
+//             <code>{JSON.stringify(stored, null, 2)}</code>
+//           </pre>
+//         </div>
+//       ) : null}
+//     </>
+//   );
+// };
+//
+// const LegacyEvents: FC = () => {
+//   const [value, setValue] = useState<boolean>(false);
+//   return (
+//     <>
+//       <Checkbox checked={value} onChange={setValue} />
+//       <div className="mt-3">{JSON.stringify(value)}</div>
+//     </>
+//   );
+// };
+//
+// storiesOf("Forms/Checkbox", module)
+//   .addDecorator((storyFn) => <MemoryRouter>{storyFn()}</MemoryRouter>)
+//   .add("Default", () => (
+//     <Spacing>
+//       <Checkbox label="Not checked" checked={false} />
+//       <Checkbox label="Checked" checked={true} />
+//       <Checkbox label="Indeterminate" checked={true} indeterminate={true} />
+//     </Spacing>
+//   ))
+//   .add("Disabled", () => (
+//     <Spacing>
+//       <Checkbox label="Checked but disabled" checked={true} disabled={true} />
+//     </Spacing>
+//   ))
+//   .add("With HelpText", () => (
+//     <Spacing>
+//       <Checkbox label="Classic helpText" checked={false} helpText="This is a classic help text." />
+//       <Checkbox
+//         label="Long helpText"
+//         checked={true}
+//         helpText="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
+//       />
+//     </Spacing>
+//   ))
+//   .add("Ref", () => <Ref />)
+//   .add("Legacy Events", () => <LegacyEvents />)
+//   .add("ReactHookForm", () => <ReactHookForm />);
+
 import React, { FC, useRef, useState } from "react";
-import { storiesOf } from "@storybook/react";
-import Checkbox from "./Checkbox";
 import styled from "styled-components";
-import Button from "../buttons/Button";
 import { useForm } from "react-hook-form";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Checkbox from "./Checkbox";
+import Button from "../buttons/Button";
 import { SubmitButton } from "../buttons";
-import { MemoryRouter } from "react-router-dom";
 
 const Spacing = styled.div`
   padding: 2em;
 `;
 
-const Ref: FC = () => {
+const RefExample: FC = () => {
   const ref = useRef<HTMLInputElement>(null);
   return (
-    <>
+    <Spacing>
       <Checkbox label={"Ref Checkbox"} checked={false} ref={ref} />
       <Button
         action={() => {
@@ -42,7 +154,7 @@ const Ref: FC = () => {
       >
         Toggle Checkbox
       </Button>
-    </>
+    </Spacing>
   );
 };
 
@@ -53,7 +165,7 @@ type Settings = {
   disabled: boolean;
 };
 
-const ReactHookForm: FC = () => {
+const ReactHookFormExample: FC = () => {
   const { register, handleSubmit } = useForm<Settings>({
     defaultValues: {
       disabled: true,
@@ -67,7 +179,7 @@ const ReactHookForm: FC = () => {
   };
 
   return (
-    <>
+    <Spacing>
       <form onSubmit={handleSubmit(onSubmit)}>
         <Checkbox label="Remember Me" {...register("rememberMe")} />
         <Checkbox label="Scramble Password" {...register("scramblePassword")} />
@@ -77,42 +189,58 @@ const ReactHookForm: FC = () => {
           <SubmitButton>Submit</SubmitButton>
         </div>
       </form>
-      {stored ? (
+      {stored && (
         <div className="mt-5">
           <pre>
             <code>{JSON.stringify(stored, null, 2)}</code>
           </pre>
         </div>
-      ) : null}
-    </>
+      )}
+    </Spacing>
   );
 };
 
-const LegacyEvents: FC = () => {
-  const [value, setValue] = useState<boolean>(false);
+const OnChangeExample: FC = () => {
+  const [value, setValue] = useState(false);
   return (
-    <>
+    <Spacing>
       <Checkbox checked={value} onChange={setValue} />
       <div className="mt-3">{JSON.stringify(value)}</div>
-    </>
+    </Spacing>
   );
 };
 
-storiesOf("Forms/Checkbox", module)
-  .addDecorator((storyFn) => <MemoryRouter>{storyFn()}</MemoryRouter>)
-  .add("Default", () => (
+const meta: Meta<typeof Checkbox> = {
+  title: "Forms/Checkbox",
+  component: Checkbox,
+  decorators: [(Story) => Story()],
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
     <Spacing>
       <Checkbox label="Not checked" checked={false} />
       <Checkbox label="Checked" checked={true} />
       <Checkbox label="Indeterminate" checked={true} indeterminate={true} />
     </Spacing>
-  ))
-  .add("Disabled", () => (
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
     <Spacing>
       <Checkbox label="Checked but disabled" checked={true} disabled={true} />
     </Spacing>
-  ))
-  .add("With HelpText", () => (
+  ),
+};
+
+export const WithHelpText: Story = {
+  render: () => (
     <Spacing>
       <Checkbox label="Classic helpText" checked={false} helpText="This is a classic help text." />
       <Checkbox
@@ -121,7 +249,17 @@ storiesOf("Forms/Checkbox", module)
         helpText="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
       />
     </Spacing>
-  ))
-  .add("Ref", () => <Ref />)
-  .add("Legacy Events", () => <LegacyEvents />)
-  .add("ReactHookForm", () => <ReactHookForm />);
+  ),
+};
+
+export const UsingRefs: Story = {
+  render: () => <RefExample />,
+};
+
+export const HandlingOnChange: Story = {
+  render: () => <OnChangeExample />,
+};
+
+export const WithReactHookForm: Story = {
+  render: () => <ReactHookFormExample />,
+};

package/src/forms/Checkbox.tsx

@@ -139,6 +139,7 @@ const InnerCheckbox: FC<FieldProps<BaseProps, HTMLInputElement, boolean>> = ({
 /**
  * @deprecated
  */
+// @ts-ignore
 const Checkbox: FieldType<BaseProps, HTMLInputElement, boolean> = createFormFieldWrapper(InnerCheckbox);
 
 export default Checkbox;

package/src/forms/DropDown.stories.tsx

@@ -14,41 +14,87 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
+// import React from "react";
+// import { storiesOf } from "@storybook/react";
+// import DropDown from "./DropDown";
+//
+// storiesOf("Forms/DropDown", module)
+//   .add("Default", () => (
+//     <DropDown
+//       options={["en", "de", "es"]}
+//       preselectedOption={"de"}
+//       optionSelected={() => {
+//         // nothing to do
+//       }}
+//     />
+//   ))
+//   .add("With Translation", () => (
+//     <DropDown
+//       optionValues={["hg2g", "dirk", "liff"]}
+//       options={[
+//         "The Hitchhiker's Guide to the Galaxy",
+//         "Dirk Gently’s Holistic Detective Agency",
+//         "The Meaning Of Liff",
+//       ]}
+//       preselectedOption={"dirk"}
+//       optionSelected={(selection) => {
+//         // nothing to do
+//       }}
+//     />
+//   ))
+//   .add("Add preselect if missing in options", () => (
+//     <DropDown
+//       optionValues={["alpha", "beta", "gamma"]}
+//       options={["A", "B", "C"]}
+//       preselectedOption={"D"}
+//       optionSelected={(selection) => {
+//         // nothing to do
+//       }}
+//     />
+//   ));
+
 import React from "react";
-import { storiesOf } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
+
 import DropDown from "./DropDown";
 
-storiesOf("Forms/DropDown", module)
-  .add("Default", () => (
-    <DropDown
-      options={["en", "de", "es"]}
-      preselectedOption={"de"}
-      optionSelected={() => {
-        // nothing to do
-      }}
-    />
-  ))
-  .add("With Translation", () => (
-    <DropDown
-      optionValues={["hg2g", "dirk", "liff"]}
-      options={[
-        "The Hitchhiker's Guide to the Galaxy",
-        "Dirk Gently’s Holistic Detective Agency",
-        "The Meaning Of Liff",
-      ]}
-      preselectedOption={"dirk"}
-      optionSelected={(selection) => {
-        // nothing to do
-      }}
-    />
-  ))
-  .add("Add preselect if missing in options", () => (
-    <DropDown
-      optionValues={["alpha", "beta", "gamma"]}
-      options={["A", "B", "C"]}
-      preselectedOption={"D"}
-      optionSelected={(selection) => {
-        // nothing to do
-      }}
-    />
-  ));
+const meta: Meta<typeof DropDown> = {
+  title: "Forms/DropDown",
+  component: DropDown,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    optionSelected: { action: "optionSelected" },
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    options: ["en", "de", "es"],
+    preselectedOption: "de",
+  },
+};
+
+export const WithDisplayValues: Story = {
+  name: "With Custom Display Values",
+  args: {
+    optionValues: ["hg2g", "dirk", "liff"],
+    options: ["The Hitchhiker's Guide to the Galaxy", "Dirk Gently’s Holistic Detective Agency", "The Meaning Of Liff"],
+    preselectedOption: "dirk",
+  },
+};
+
+export const PreselectedOptionNotInList: Story = {
+  name: "Preselected Value Not In Options",
+  args: {
+    optionValues: ["alpha", "beta", "gamma"],
+    options: ["A", "B", "C"],
+    preselectedOption: "D",
+  },
+};

package/src/forms/FileInput.stories.tsx

@@ -14,13 +14,61 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
+// import React, { FC, useState } from "react";
+// import { MemoryRouter } from "react-router-dom";
+// import { useForm } from "react-hook-form";
+// import { storiesOf } from "@storybook/react";
+// import { Level, SubmitButton } from "../index";
+// import FileInput from "./FileInput";
+// import styled from "styled-components";
+//
+// const Decorator = styled.div`
+//   padding: 2rem;
+//   max-width: 40rem;
+// `;
+//
+// type Settings = {
+//   uploadFile: string;
+// };
+//
+// const ReactHookForm: FC = () => {
+//   const { register, handleSubmit } = useForm<Settings>();
+//   const [stored, setStored] = useState<Settings>();
+//
+//   const onSubmit = (settings: Settings) => {
+//     setStored(settings);
+//   };
+//
+//   return (
+//     <>
+//       <form onSubmit={handleSubmit(onSubmit)}>
+//         <FileInput label="Upload File" helpText="Select your most loved file" {...register("uploadFile")} />
+//         <Level right={<SubmitButton>Submit</SubmitButton>} />
+//       </form>
+//       {stored ? (
+//         <div className="mt-5">
+//           <pre>
+//             <code>{JSON.stringify(stored, null, 2)}</code>
+//           </pre>
+//         </div>
+//       ) : null}
+//     </>
+//   );
+// };
+//
+// storiesOf("Forms/FileInput", module)
+//   .addDecorator((storyFn) => <Decorator>{storyFn()}</Decorator>)
+//   .addDecorator((storyFn) => <MemoryRouter>{storyFn()}</MemoryRouter>)
+//   .add("Default", () => <ReactHookForm />);
+
 import React, { FC, useState } from "react";
 import { MemoryRouter } from "react-router-dom";
 import { useForm } from "react-hook-form";
-import { storiesOf } from "@storybook/react";
-import { Level, SubmitButton } from "../index";
-import FileInput from "./FileInput";
 import styled from "styled-components";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import FileInput from "./FileInput";
+import { Level, SubmitButton } from "../index";
 
 const Decorator = styled.div`
   padding: 2rem;
@@ -31,7 +79,7 @@ type Settings = {
   uploadFile: string;
 };
 
-const ReactHookForm: FC = () => {
+const ReactHookFormExample: FC = () => {
   const { register, handleSubmit } = useForm<Settings>();
   const [stored, setStored] = useState<Settings>();
 
@@ -45,18 +93,45 @@ const ReactHookForm: FC = () => {
         <FileInput label="Upload File" helpText="Select your most loved file" {...register("uploadFile")} />
         <Level right={<SubmitButton>Submit</SubmitButton>} />
       </form>
-      {stored ? (
+      {stored && (
         <div className="mt-5">
           <pre>
             <code>{JSON.stringify(stored, null, 2)}</code>
           </pre>
         </div>
-      ) : null}
+      )}
     </>
   );
 };
 
-storiesOf("Forms/FileInput", module)
-  .addDecorator((storyFn) => <Decorator>{storyFn()}</Decorator>)
-  .addDecorator((storyFn) => <MemoryRouter>{storyFn()}</MemoryRouter>)
-  .add("Default", () => <ReactHookForm />);
+// --- Storybook Metadata ---
+
+const meta: Meta<typeof FileInput> = {
+  title: "Forms/FileInput",
+  component: FileInput,
+  decorators: [(Story) => <Decorator>{Story()}</Decorator>, (Story) => <MemoryRouter>{Story()}</MemoryRouter>],
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: "Default File Input",
+    helpText: "Please select a file.",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    ...Default.args,
+    label: "Disabled File Input",
+    disabled: true,
+  },
+};
+
+export const WithReactHookForm: Story = {
+  render: () => <ReactHookFormExample />,
+};