@scm-manager/ui-components 3.10.4-20250824-132529 → 4.0.0-REACT18-20250824-143504

package/src/forms/Select.stories.tsx

@@ -14,15 +14,212 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
+// import React, { FC, useRef, useState } from "react";
+// import Button from "../buttons/Button";
+// import { useForm } from "react-hook-form";
+// import { SubmitButton } from "../buttons";
+// import { storiesOf } from "@storybook/react";
+// import { MemoryRouter } from "react-router-dom";
+// import Select from "./Select";
+//
+// const Ref: FC = () => {
+//   const ref = useRef<HTMLSelectElement>(null);
+//   const [selected, setSelected] = useState("false");
+//   return (
+//     <>
+//       <Select
+//         options={[
+//           { label: "foo", value: "true" },
+//           { label: "bar", value: "false" },
+//         ]}
+//         value={selected}
+//         label={"Ref Radio Button"}
+//         onChange={(e) => setSelected(e.target.value)}
+//         ref={ref}
+//       />
+//       <Button
+//         action={() => {
+//           if (ref.current) {
+//             ref.current.focus();
+//           }
+//         }}
+//         color="primary"
+//       >
+//         Focus Select Field
+//       </Button>
+//       {selected}
+//     </>
+//   );
+// };
+//
+// type Settings = {
+//   rememberMe: string;
+//   scramblePassword: string;
+//   disabled: string;
+//   readonly: 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)}>
+//         <Select
+//           options={[
+//             { label: "Yes", value: "true" },
+//             { label: "No", value: "false" },
+//           ]}
+//           label="Remember Me"
+//           {...register("rememberMe")}
+//         />
+//         <Select
+//           options={[
+//             { label: "Yes", value: "true" },
+//             { label: "No", value: "false" },
+//           ]}
+//           label="Scramble Password"
+//           {...register("scramblePassword")}
+//         />
+//         <Select
+//           options={[
+//             { label: "Yes", value: "true" },
+//             { label: "No", value: "false" },
+//           ]}
+//           label="Disabled wont be submitted"
+//           defaultValue="false"
+//           disabled={true}
+//           {...register("disabled")}
+//         />
+//         <Select
+//           options={[
+//             { label: "Yes", value: "true" },
+//             { label: "No", value: "false" },
+//           ]}
+//           label="Readonly will be submitted"
+//           readOnly={true}
+//           defaultValue="false"
+//           {...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<string>();
+//   return (
+//     <>
+//       <Select
+//         options={[
+//           { label: "Yes", value: "true" },
+//           { label: "No", value: "false" },
+//         ]}
+//         onChange={setValue}
+//       />
+//       <div className="mt-3">{JSON.stringify(value)}</div>
+//     </>
+//   );
+// };
+//
+// const AddNoExistingValue: FC = () => {
+//   const [value, setValue] = useState<string>("uscss-prometheus");
+//
+//   return (
+//     <>
+//       <Select
+//         options={[
+//           {
+//             label: "Millennium Falcon",
+//             value: "millennium-falcon",
+//           },
+//           {
+//             label: "Razor Crest",
+//             value: "razor-crest",
+//           },
+//         ]}
+//         onChange={setValue}
+//         addValueToOptions={true}
+//         value={value}
+//       />
+//       <div className="mt-3">{value}</div>
+//     </>
+//   );
+// };
+//
+// const PreselectOption: FC = () => {
+//   const [value, setValue] = useState<string>("razor-crest");
+//
+//   return (
+//     <>
+//       <Select
+//         options={[
+//           {
+//             label: "Millennium Falcon",
+//             value: "millennium-falcon",
+//           },
+//           {
+//             label: "Razor Crest",
+//             value: "razor-crest",
+//           },
+//           {
+//             label: "USCSS Prometheus",
+//             value: "uscss-prometheus",
+//           },
+//         ]}
+//         onChange={setValue}
+//         value={value}
+//       />
+//       <div className="mt-3">{value}</div>
+//     </>
+//   );
+// };
+//
+// storiesOf("Forms/Select", module)
+//   .addDecorator((storyFn) => <MemoryRouter>{storyFn()}</MemoryRouter>)
+//   .add("Add no existing value", () => <AddNoExistingValue />)
+//   .add("Ref", () => <Ref />)
+//   .add("Legacy Events", () => <LegacyEvents />)
+//   .add("ReactHookForm", () => <ReactHookForm />)
+//   .add("Preselect option", () => <PreselectOption />);
+
 import React, { FC, useRef, useState } from "react";
-import Button from "../buttons/Button";
-import { useForm } from "react-hook-form";
-import { SubmitButton } from "../buttons";
-import { storiesOf } from "@storybook/react";
 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 Select from "./Select";
+import Button from "../buttons/Button";
+import { SubmitButton } from "../buttons";
 
-const Ref: FC = () => {
+// --- Helper Components & Styles (preserved from your original story) ---
+
+const Decorator = styled.div`
+  padding: 2rem;
+  max-width: 30rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`;
+
+const RefExample: FC = () => {
   const ref = useRef<HTMLSelectElement>(null);
   const [selected, setSelected] = useState("false");
   return (
@@ -33,7 +230,7 @@ const Ref: FC = () => {
           { label: "bar", value: "false" },
         ]}
         value={selected}
-        label={"Ref Radio Button"}
+        label={"Ref Select Field"}
         onChange={(e) => setSelected(e.target.value)}
         ref={ref}
       />
@@ -47,7 +244,7 @@ const Ref: FC = () => {
       >
         Focus Select Field
       </Button>
-      {selected}
+      Selected value: {selected}
     </>
   );
 };
@@ -59,7 +256,7 @@ type Settings = {
   readonly: string;
 };
 
-const ReactHookForm: FC = () => {
+const ReactHookFormExample: FC = () => {
   const { register, handleSubmit } = useForm<Settings>();
   const [stored, setStored] = useState<Settings>();
 
@@ -106,23 +303,22 @@ const ReactHookForm: FC = () => {
           defaultValue="false"
           {...register("readonly")}
         />
-
         <div className="pt-2">
           <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 OnChangeExample: FC = () => {
   const [value, setValue] = useState<string>();
   return (
     <>
@@ -133,68 +329,92 @@ const LegacyEvents: FC = () => {
         ]}
         onChange={setValue}
       />
-      <div className="mt-3">{JSON.stringify(value)}</div>
+      <div className="mt-3">Selected value: {JSON.stringify(value)}</div>
     </>
   );
 };
 
-const AddNoExistingValue: FC = () => {
+const AddNoExistingValueExample: FC = () => {
   const [value, setValue] = useState<string>("uscss-prometheus");
-
   return (
     <>
       <Select
         options={[
-          {
-            label: "Millennium Falcon",
-            value: "millennium-falcon",
-          },
-          {
-            label: "Razor Crest",
-            value: "razor-crest",
-          },
+          { label: "Millennium Falcon", value: "millennium-falcon" },
+          { label: "Razor Crest", value: "razor-crest" },
         ]}
         onChange={setValue}
         addValueToOptions={true}
         value={value}
       />
-      <div className="mt-3">{value}</div>
+      <div className="mt-3">Selected value: {value}</div>
     </>
   );
 };
 
-const PreselectOption: FC = () => {
+const PreselectOptionExample: FC = () => {
   const [value, setValue] = useState<string>("razor-crest");
-
   return (
     <>
       <Select
         options={[
-          {
-            label: "Millennium Falcon",
-            value: "millennium-falcon",
-          },
-          {
-            label: "Razor Crest",
-            value: "razor-crest",
-          },
-          {
-            label: "USCSS Prometheus",
-            value: "uscss-prometheus",
-          },
+          { label: "Millennium Falcon", value: "millennium-falcon" },
+          { label: "Razor Crest", value: "razor-crest" },
+          { label: "USCSS Prometheus", value: "uscss-prometheus" },
         ]}
         onChange={setValue}
         value={value}
       />
-      <div className="mt-3">{value}</div>
+      <div className="mt-3">Selected value: {value}</div>
     </>
   );
 };
 
-storiesOf("Forms/Select", module)
-  .addDecorator((storyFn) => <MemoryRouter>{storyFn()}</MemoryRouter>)
-  .add("Add no existing value", () => <AddNoExistingValue />)
-  .add("Ref", () => <Ref />)
-  .add("Legacy Events", () => <LegacyEvents />)
-  .add("ReactHookForm", () => <ReactHookForm />)
-  .add("Preselect option", () => <PreselectOption />);
+// --- Storybook Metadata ---
+
+const meta: Meta<typeof Select> = {
+  title: "Forms/Select",
+  component: Select,
+  decorators: [(Story) => <Decorator>{Story()}</Decorator>, (Story) => <MemoryRouter>{Story()}</MemoryRouter>],
+  argTypes: {
+    onChange: { action: "changed" },
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+// --- Story Definitions ---
+
+type Story = StoryObj<typeof meta>;
+
+// A new, simple story to show the basic component and enable Controls
+export const Default: Story = {
+  args: {
+    label: "Starship",
+    options: [
+      { label: "Millennium Falcon", value: "millennium-falcon" },
+      { label: "Razor Crest", value: "razor-crest" },
+    ],
+  },
+};
+
+export const AddNoExistingValue: Story = {
+  render: () => <AddNoExistingValueExample />,
+};
+
+export const UsingRefs: Story = {
+  render: () => <RefExample />,
+};
+
+export const HandlingOnChange: Story = {
+  render: () => <OnChangeExample />,
+};
+
+export const WithReactHookForm: Story = {
+  render: () => <ReactHookFormExample />,
+};
+
+export const PreselectingAnOption: Story = {
+  render: () => <PreselectOptionExample />,
+};

package/src/forms/Select.tsx

@@ -140,6 +140,7 @@ const InnerSelect: FC<FieldProps<BaseProps, HTMLSelectElement, string>> = ({
 /**
  * @deprecated
  */
+// @ts-ignore
 const Select: FieldType<BaseProps, HTMLSelectElement, string> = createFormFieldWrapper(InnerSelect);
 
 export default Select;

package/src/forms/Textarea.stories.tsx

@@ -15,32 +15,38 @@
  */
 
 import React, { FC, useRef, useState } from "react";
-import { storiesOf } from "@storybook/react";
 import styled from "styled-components";
+import { useForm } from "react-hook-form";
+import { MemoryRouter } from "react-router-dom";
+import type { Meta, StoryObj } from "@storybook/react";
+
 import Textarea from "./Textarea";
 import Button from "../buttons/Button";
-import { useForm } from "react-hook-form";
 import { SubmitButton } from "../buttons";
-import { MemoryRouter } from "react-router-dom";
-import InputField from "./InputField";
+
+// --- Helper Components & Styles (preserved from your original story) ---
 
 const Spacing = styled.div`
   padding: 2em;
+  max-width: 40rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 `;
 
-const OnChangeTextarea = () => {
+const OnChangeExample: FC = () => {
   const [value, setValue] = useState("Start typing");
   return (
-    <Spacing>
-      <Textarea value={value} onChange={(v) => setValue(v)} />
+    <>
+      <Textarea value={value} onChange={setValue} />
       <hr />
       <p>{value}</p>
-    </Spacing>
+    </>
   );
 };
 
-const OnSubmitTextare = () => {
-  const [value, setValue] = useState("Use the ctrl/command + Enter to submit the textarea");
+const OnSubmitExample: FC = () => {
+  const [value, setValue] = useState("Use ctrl/command + Enter to submit the textarea");
   const [submitted, setSubmitted] = useState("");
 
   const submit = () => {
@@ -49,48 +55,46 @@ const OnSubmitTextare = () => {
   };
 
   return (
-    <Spacing>
-      <Textarea value={value} onChange={(v) => setValue(v)} onSubmit={submit} />
+    <>
+      <Textarea value={value} onChange={setValue} onSubmit={submit} />
       <hr />
-      <p>{submitted}</p>
-    </Spacing>
+      <p>
+        <strong>Submitted:</strong> {submitted}
+      </p>
+    </>
   );
 };
 
-const OnCancelTextarea = () => {
+const OnCancelExample: FC = () => {
   const [value, setValue] = useState("Use the escape key to clear the textarea");
 
   const cancel = () => {
     setValue("");
   };
 
-  return (
-    <Spacing>
-      <Textarea value={value} onChange={(v) => setValue(v)} onCancel={cancel} />
-    </Spacing>
-  );
+  return <Textarea value={value} onChange={setValue} onCancel={cancel} />;
 };
 
-const Ref: FC = () => {
+const RefExample: FC = () => {
   const ref = useRef<HTMLTextAreaElement>(null);
   return (
     <>
-      <Textarea ref={ref} />
+      <Textarea ref={ref} placeholder="I will be focused" />
       <Button action={() => ref.current?.focus()} color="primary">
-        Focus InputField
+        Focus Textarea
       </Button>
     </>
   );
 };
 
-const AutoFocusAndRef: FC = () => {
+const AutoFocusAndRefExample: FC = () => {
   const ref = useRef<HTMLTextAreaElement>(null);
   return (
     <>
-      <Textarea ref={ref} autofocus={true} placeholder="Click the button to focus me" />
+      <Textarea ref={ref} autofocus={true} placeholder="I am focused initially" />
       <Textarea placeholder="Click me to switch focus" />
       <Button action={() => ref.current?.focus()} color="primary">
-        Focus First InputField
+        Focus First Textarea
       </Button>
     </>
   );
@@ -103,7 +107,7 @@ type Commit = {
   disabled: string;
 };
 
-const ReactHookForm: FC = () => {
+const ReactHookFormExample: FC = () => {
   const {
     register,
     handleSubmit,
@@ -142,40 +146,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 (
-    <>
-      <Textarea placeholder="Legacy onChange handler" value={value} onChange={(e) => setValue(e)} />
-      <div className="mt-3">{value}</div>
-    </>
-  );
+// --- Storybook Metadata ---
+
+const meta: Meta<typeof Textarea> = {
+  title: "Forms/Textarea",
+  component: Textarea,
+  decorators: [(Story) => <Spacing>{Story()}</Spacing>, (Story) => <MemoryRouter>{Story()}</MemoryRouter>],
+  argTypes: {
+    onChange: { action: "changed" },
+    onSubmit: { action: "submitted" },
+    onCancel: { action: "cancelled" },
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+// --- Story Definitions ---
+
+type Story = StoryObj<typeof meta>;
+
+// Simple stories using `args`
+export const Default: Story = {
+  args: {
+    label: "Default Textarea",
+    placeholder: "Type something...",
+  },
+};
+
+export const AutoFocus: Story = {
+  args: {
+    label: "Field with AutoFocus",
+    autofocus: true,
+  },
+};
+
+export const DefaultValue: Story = {
+  args: {
+    label: "Field with Default Value",
+    defaultValue: "I am a text area with so much default value its crazy!",
+  },
+};
+
+// Complex stories using `render` and helper components
+export const HandlingOnChange: Story = {
+  render: () => <OnChangeExample />,
 };
 
-storiesOf("Forms/Textarea", module)
-  .addDecorator((storyFn) => <MemoryRouter>{storyFn()}</MemoryRouter>)
-  .add("OnChange", () => <OnChangeTextarea />)
-  .add("OnSubmit", () => <OnSubmitTextare />)
-  .add("OnCancel", () => <OnCancelTextarea />)
-  .add("AutoFocus", () => <Textarea label="Field with AutoFocus" autofocus={true} />)
-  .add("Default Value", () => (
-    <Textarea
-      label="Field with Default Value"
-      defaultValue={"I am a text area with so much default value its crazy!"}
-    />
-  ))
-  .add("Ref", () => <Ref />)
-  .add("Legacy Events", () => <LegacyEvents />)
-  .add("AutoFocusAndRef", () => <AutoFocusAndRef />)
-  .add("ReactHookForm", () => <ReactHookForm />);
+export const HandlingOnSubmit: Story = {
+  render: () => <OnSubmitExample />,
+};
+
+export const HandlingOnCancel: Story = {
+  render: () => <OnCancelExample />,
+};
+
+export const UsingRefs: Story = {
+  render: () => <RefExample />,
+};
+
+export const WithAutoFocusAndRef: Story = {
+  name: "With AutoFocus and Ref",
+  render: () => <AutoFocusAndRefExample />,
+};
+
+export const WithReactHookForm: Story = {
+  name: "With React Hook Form",
+  render: () => <ReactHookFormExample />,
+};

package/src/forms/Textarea.tsx

@@ -129,6 +129,7 @@ const InnerTextarea: FC<FieldProps<BaseProps, HTMLTextAreaElement, string>> = ({
 /**
  * @deprecated
  */
+// @ts-ignore
 const Textarea: FieldType<BaseProps, HTMLTextAreaElement, string> = createFormFieldWrapper(InnerTextarea);
 
 export default Textarea;

package/src/forms/index.ts

@@ -25,10 +25,12 @@ export { default as Checkbox } from "./Checkbox";
 export { default as Radio } from "./Radio";
 export { default as FilterInput } from "./FilterInput";
 export { default as InputField } from "./InputField";
-export { default as Select, SelectItem } from "./Select";
+export { default as Select } from "./Select";
 export { default as Textarea } from "./Textarea";
 export { default as PasswordConfirmation } from "./PasswordConfirmation";
 export { default as LabelWithHelpIcon } from "./LabelWithHelpIcon";
 export { default as DropDown } from "./DropDown";
 export { default as FileUpload } from "./FileUpload";
 export { default as FileInput } from "./FileInput";
+
+export type { SelectItem } from "./Select";