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

package/src/forms/InputField.stories.tsx

@@ -14,21 +14,140 @@
  * 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 styled from "styled-components";
+// import InputField from "./InputField";
+// import Button from "../buttons/Button";
+// import { MemoryRouter } from "react-router-dom";
+// import { useForm } from "react-hook-form";
+// import { SubmitButton } from "../buttons";
+//
+// const Decorator = styled.div`
+//   padding: 2rem;
+//   max-width: 30rem;
+// `;
+//
+// const Ref: FC = () => {
+//   const ref = useRef<HTMLInputElement>(null);
+//   return (
+//     <>
+//       <InputField ref={ref} placeholder="Click the button to focus me" />
+//       <Button action={() => ref.current?.focus()} color="primary">
+//         Focus InputField
+//       </Button>
+//     </>
+//   );
+// };
+//
+// const AutoFocusAndRef: FC = () => {
+//   const ref = useRef<HTMLInputElement>(null);
+//   return (
+//     <>
+//       <InputField ref={ref} autofocus={true} placeholder="Click the button to focus me" />
+//       <InputField placeholder="Click me to switch focus" />
+//       <Button action={() => ref.current?.focus()} color="primary">
+//         Focus First InputField
+//       </Button>
+//     </>
+//   );
+// };
+//
+// type Name = {
+//   readonly: string;
+//   disabled: string;
+//   firstName: string;
+//   lastName: string;
+// };
+//
+// const ReactHookForm: FC = () => {
+//   const {
+//     register,
+//     handleSubmit,
+//     formState: { errors },
+//   } = useForm<Name>();
+//   const [stored, setStored] = useState<Name>();
+//
+//   const onSubmit = (person: Name) => {
+//     setStored(person);
+//   };
+//
+//   return (
+//     <>
+//       <form onSubmit={handleSubmit(onSubmit)}>
+//         <InputField
+//           label="Readonly"
+//           defaultValue="I am readonly but still show up on submit!"
+//           readOnly={true}
+//           {...register("readonly")}
+//         />
+//         <InputField
+//           label="Disabled"
+//           defaultValue="I am disabled and dont show up on submit!"
+//           disabled={true}
+//           {...register("disabled")}
+//         />
+//         <InputField label="First Name" autofocus={true} {...register("firstName")} />
+//         <InputField
+//           label="Last Name"
+//           {...register("lastName", { required: true })}
+//           validationError={!!errors.lastName}
+//           errorMessage={"Last name is required"}
+//         />
+//         <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<string>("");
+//   return (
+//     <>
+//       <InputField placeholder="Legacy onChange handler" value={value} onChange={(e) => setValue(e)} />
+//       <div className="mt-3">{value}</div>
+//     </>
+//   );
+// };
+//
+// storiesOf("Forms/InputField", module)
+//   .addDecorator((storyFn) => <Decorator>{storyFn()}</Decorator>)
+//   .addDecorator((storyFn) => <MemoryRouter>{storyFn()}</MemoryRouter>)
+//   .add("AutoFocus", () => <InputField label="Field with AutoFocus" autofocus={true} />)
+//   .add("Default Value", () => <InputField label="Field with Default Value" defaultValue={"I am a default value"} />)
+//   .add("Ref", () => <Ref />)
+//   .add("Legacy Events", () => <LegacyEvents />)
+//   .add("AutoFocusAndRef", () => <AutoFocusAndRef />)
+//   .add("React Hook Form", () => <ReactHookForm />);
+
 import React, { FC, useRef, useState } from "react";
-import { storiesOf } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import styled from "styled-components";
+import { useForm } from "react-hook-form";
+import { MemoryRouter } from "react-router-dom";
+
 import InputField from "./InputField";
 import Button from "../buttons/Button";
-import { MemoryRouter } from "react-router-dom";
-import { useForm } from "react-hook-form";
 import { SubmitButton } from "../buttons";
 
 const Decorator = styled.div`
   padding: 2rem;
   max-width: 30rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 `;
 
-const Ref: FC = () => {
+const RefExample: FC = () => {
   const ref = useRef<HTMLInputElement>(null);
   return (
     <>
@@ -40,41 +159,46 @@ const Ref: FC = () => {
   );
 };
 
-const AutoFocusAndRef: FC = () => {
-  const ref = useRef<HTMLInputElement>(null);
+const OnChangeExample: FC = () => {
+  const [value, setValue] = useState("");
   return (
     <>
-      <InputField ref={ref} autofocus={true} placeholder="Click the button to focus me" />
-      <InputField placeholder="Click me to switch focus" />
-      <Button action={() => ref.current?.focus()} color="primary">
-        Focus First InputField
-      </Button>
+      {/* @ts-ignore*/}
+      <InputField
+        placeholder="Legacy onChange handler"
+        value={value}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value)}
+      />
+      <div className="mt-3">
+        <strong>Value:</strong> {value}
+      </div>
     </>
   );
 };
 
-type Name = {
+// Helper-Komponente für die "ReactHookForm"-Story
+type FormValues = {
   readonly: string;
   disabled: string;
   firstName: string;
   lastName: string;
 };
 
-const ReactHookForm: FC = () => {
+const ReactHookFormExample: FC = () => {
   const {
     register,
     handleSubmit,
     formState: { errors },
-  } = useForm<Name>();
-  const [stored, setStored] = useState<Name>();
+  } = useForm<FormValues>();
+  const [stored, setStored] = useState<FormValues>();
 
-  const onSubmit = (person: Name) => {
-    setStored(person);
+  const onSubmit = (data: FormValues) => {
+    setStored(data);
   };
 
   return (
     <>
-      <form onSubmit={handleSubmit(onSubmit)}>
+      <form onSubmit={handleSubmit(onSubmit)} style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
         <InputField
           label="Readonly"
           defaultValue="I am readonly but still show up on submit!"
@@ -98,33 +222,82 @@ 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}
+      )}
     </>
   );
 };
 
-const LegacyEvents: FC = () => {
-  const [value, setValue] = useState<string>("");
-  return (
-    <>
-      <InputField placeholder="Legacy onChange handler" value={value} onChange={(e) => setValue(e)} />
-      <div className="mt-3">{value}</div>
-    </>
-  );
+// --- Storybook Metadata ---
+
+const meta: Meta<typeof InputField> = {
+  title: "Forms/InputField",
+  component: InputField,
+  decorators: [
+    (Story) => (
+      <Decorator>
+        <Story />
+      </Decorator>
+    ),
+    (Story) => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
+  argTypes: {
+    onChange: { action: "changed" },
+  },
+  tags: ["autodocs"],
 };
 
-storiesOf("Forms/InputField", module)
-  .addDecorator((storyFn) => <Decorator>{storyFn()}</Decorator>)
-  .addDecorator((storyFn) => <MemoryRouter>{storyFn()}</MemoryRouter>)
-  .add("AutoFocus", () => <InputField label="Field with AutoFocus" autofocus={true} />)
-  .add("Default Value", () => <InputField label="Field with Default Value" defaultValue={"I am a default value"} />)
-  .add("Ref", () => <Ref />)
-  .add("Legacy Events", () => <LegacyEvents />)
-  .add("AutoFocusAndRef", () => <AutoFocusAndRef />)
-  .add("React Hook Form", () => <ReactHookForm />);
+export default meta;
+
+// --- Story Definitions ---
+
+type Story = StoryObj<typeof meta>;
+
+// Einfache Stories, die direkt `args` verwenden
+export const Default: Story = {
+  args: {
+    label: "Default Input",
+    placeholder: "Type something here...",
+  },
+};
+
+export const WithHelpText: Story = {
+  args: {
+    ...Default.args,
+    label: "With Help Text",
+    helpText: "This is some helpful information.",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    ...Default.args,
+    label: "Disabled Input",
+    disabled: true,
+  },
+};
+
+// Komplexe Stories, die eine `render`-Funktion benötigen
+export const WithRef: Story = {
+  name: "Using Refs",
+  render: () => <RefExample />,
+};
+
+export const WithOnChange: Story = {
+  name: "Handling onChange",
+  render: () => <OnChangeExample />,
+};
+
+export const WithReactHookForm: Story = {
+  name: "With React Hook Form",
+  render: () => <ReactHookFormExample />,
+};

package/src/forms/InputField.tsx

@@ -132,6 +132,7 @@ export const InnerInputField: FC<FieldProps<BaseProps, HTMLInputElement, string>
   );
 };
 
+// @ts-ignore
 const InputField: FieldType<BaseProps, HTMLInputElement, string> = createFormFieldWrapper(InnerInputField);
 
 export default InputField;

package/src/forms/Radio.stories.tsx

@@ -14,14 +14,133 @@
  * 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 Radio from "./Radio";
+// 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 RadioList = styled.div`
+//   display: flex;
+//   flex-direction: column;
+//   > label:not(:last-child) {
+//     margin-bottom: 0.75rem;
+//   }
+//   padding: 2em;
+// `;
+//
+// const Ref: FC = () => {
+//   const ref = useRef<HTMLInputElement>(null);
+//   return (
+//     <>
+//       <Radio label={"Ref Radio Button"} checked={false} ref={ref} />
+//       <Button
+//         action={() => {
+//           if (ref.current) {
+//             ref.current.checked = true;
+//           }
+//         }}
+//         color="primary"
+//       >
+//         Check InputField
+//       </Button>
+//     </>
+//   );
+// };
+//
+// type Settings = {
+//   rememberMe: string;
+//   scramblePassword: string;
+//   readonly: string;
+//   disabled: 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)}>
+//         <RadioList>
+//           <Radio defaultChecked={true} value={"true"} label="Remember Me" {...register("rememberMe")} />
+//           <Radio value={"false"} label="Dont Remember Me" {...register("rememberMe")} />
+//         </RadioList>
+//         <Radio className="ml-2" value={"false"} label="Scramble Password" {...register("scramblePassword")} />
+//         <Radio value={"false"} label="Disabled wont be submitted" disabled={true} {...register("disabled")} />
+//         <Radio value={"false"} label="Readonly will be submitted" {...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 (
+//     <>
+//       <Radio checked={value} onChange={setValue} />
+//       <div className="mt-3">{JSON.stringify(value)}</div>
+//     </>
+//   );
+// };
+//
+// storiesOf("Forms/Radio", module)
+//   .addDecorator((storyFn) => <MemoryRouter>{storyFn()}</MemoryRouter>)
+//   .add("Default", () => (
+//     <Spacing>
+//       <Radio label="Not checked" checked={false} />
+//       <Radio label="Checked" checked={true} />
+//     </Spacing>
+//   ))
+//   .add("Disabled", () => (
+//     <Spacing>
+//       <Radio label="Checked but disabled" checked={true} disabled={true} />
+//     </Spacing>
+//   ))
+//   .add("With HelpText", () => (
+//     <RadioList>
+//       <Radio label="Classic helpText" checked={false} helpText="This is a classic help text." />
+//       <Radio
+//         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."
+//       />
+//     </RadioList>
+//   ))
+//   .add("Ref", () => <Ref />)
+//   .add("Legacy Events", () => <LegacyEvents />)
+//   .add("ReactHookForm", () => <ReactHookForm />);
+
 import React, { FC, useRef, useState } from "react";
-import { storiesOf } from "@storybook/react";
-import Radio from "./Radio";
+import { MemoryRouter } from "react-router-dom";
+import { useForm } from "react-hook-form";
 import styled from "styled-components";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Radio from "./Radio";
 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;
@@ -36,11 +155,11 @@ const RadioList = styled.div`
   padding: 2em;
 `;
 
-const Ref: FC = () => {
+const RefExample: FC = () => {
   const ref = useRef<HTMLInputElement>(null);
   return (
-    <>
-      <Radio label={"Ref Radio Button"} checked={false} ref={ref} />
+    <Spacing>
+      <Radio label={"Ref Radio Button"} name="ref-example" ref={ref} />
       <Button
         action={() => {
           if (ref.current) {
@@ -48,10 +167,11 @@ const Ref: FC = () => {
           }
         }}
         color="primary"
+        className="ml-2"
       >
-        Check InputField
+        Check Radio Button
       </Button>
-    </>
+    </Spacing>
   );
 };
 
@@ -62,7 +182,7 @@ type Settings = {
   disabled: string;
 };
 
-const ReactHookForm: FC = () => {
+const ReactHookFormExample: FC = () => {
   const { register, handleSubmit } = useForm<Settings>();
   const [stored, setStored] = useState<Settings>();
 
@@ -71,7 +191,7 @@ const ReactHookForm: FC = () => {
   };
 
   return (
-    <>
+    <Spacing>
       <form onSubmit={handleSubmit(onSubmit)}>
         <RadioList>
           <Radio defaultChecked={true} value={"true"} label="Remember Me" {...register("rememberMe")} />
@@ -84,50 +204,77 @@ 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 (
-    <>
-      <Radio checked={value} onChange={setValue} />
+    <Spacing>
+      <Radio checked={value} onChange={setValue} name="onchange-example" />
       <div className="mt-3">{JSON.stringify(value)}</div>
-    </>
+    </Spacing>
   );
 };
 
-storiesOf("Forms/Radio", module)
-  .addDecorator((storyFn) => <MemoryRouter>{storyFn()}</MemoryRouter>)
-  .add("Default", () => (
+const meta: Meta<typeof Radio> = {
+  title: "Forms/Radio",
+  component: Radio,
+  decorators: [(Story) => <MemoryRouter>{Story()}</MemoryRouter>],
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
     <Spacing>
-      <Radio label="Not checked" checked={false} />
-      <Radio label="Checked" checked={true} />
+      <Radio label="Not checked" name="default-group" />
+      <Radio label="Checked" name="default-group" checked={true} />
     </Spacing>
-  ))
-  .add("Disabled", () => (
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
     <Spacing>
-      <Radio label="Checked but disabled" checked={true} disabled={true} />
+      <Radio label="Checked but disabled" checked={true} disabled={true} name="disabled-group" />
     </Spacing>
-  ))
-  .add("With HelpText", () => (
+  ),
+};
+
+export const WithHelpText: Story = {
+  render: () => (
     <RadioList>
-      <Radio label="Classic helpText" checked={false} helpText="This is a classic help text." />
+      <Radio label="Classic helpText" checked={false} helpText="This is a classic help text." name="help-group" />
       <Radio
         label="Long helpText"
         checked={true}
+        name="help-group"
         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."
       />
     </RadioList>
-  ))
-  .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/Radio.tsx

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