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

package/src/base/forms/radio-button/RadioButton.stories.tsx

@@ -14,8 +14,212 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { useState } from "react";
-import { storiesOf } from "@storybook/react";
+// import React, { useState } from "react";
+// import { storiesOf } from "@storybook/react";
+// import RadioButton from "./RadioButton";
+// import RadioGroup from "./RadioGroup";
+// import RadioGroupField from "./RadioGroupField";
+// import Form from "../Form";
+// import ControlledRadioGroupField from "./ControlledRadioGroupField";
+// import ControlledInputField from "../input/ControlledInputField";
+// import FormRow from "../FormRow";
+// import { ScmFormListContextProvider } from "../ScmFormListContext";
+// import ControlledList from "../list/ControlledList";
+// import ControlledTable from "../table/ControlledTable";
+// import ControlledColumn from "../table/ControlledColumn";
+// import AddListEntryForm from "../AddListEntryForm";
+//
+// storiesOf("Radio Group", module)
+//   .add("Uncontrolled State", () => {
+//     return (
+//       <RadioGroup name="starter_pokemon">
+//         <RadioButton value="CHARMANDER" label="Charmander" />
+//         <RadioButton value="SQUIRTLE" label="Squirtle" />
+//         <RadioButton value="BULBASAUR" label="Bulbasaur" helpText="Dont pick this one" />
+//       </RadioGroup>
+//     );
+//   })
+//   .add("Controlled State", () => {
+//     const [value, setValue] = useState<string | undefined>(undefined);
+//     return (
+//       <RadioGroup name="starter_pokemon" value={value} onValueChange={setValue}>
+//         <RadioButton value="CHARMANDER" label="Charmander" />
+//         <RadioButton value="SQUIRTLE" label="Squirtle" />
+//         <RadioButton value="BULBASAUR" label="Bulbasaur" helpText="Dont pick this one" />
+//       </RadioGroup>
+//     );
+//   })
+//   .add("Radio Group Field", () => {
+//     const [value, setValue] = useState<string | undefined>(undefined);
+//     return (
+//       <RadioGroupField
+//         label="Choose your starter"
+//         helpText="Choose wisely"
+//         name="starter_pokemon"
+//         value={value}
+//         onValueChange={setValue}
+//       >
+//         <RadioButton value="CHARMANDER" label="Charmander" />
+//         <RadioButton value="SQUIRTLE" label="Squirtle" />
+//         <RadioButton value="BULBASAUR" label="Bulbasaur" helpText="Dont pick this one" />
+//       </RadioGroupField>
+//     );
+//   })
+//   .add("Controlled Radio Group Field", () => (
+//     <Form
+//       // eslint-disable-next-line no-console
+//       onSubmit={console.log}
+//       translationPath={["sample", "form"]}
+//       defaultValues={{ name: "", starter_pokemon: null }}
+//     >
+//       <FormRow>
+//         <ControlledInputField name="name" />
+//       </FormRow>
+//       <FormRow>
+//         <ControlledRadioGroupField
+//           name="starter_pokemon"
+//           label="Starter Pokemon"
+//           helpText="Choose wisely"
+//           rules={{ required: true }}
+//         >
+//           <RadioButton value="CHARMANDER" label="Charmander" labelClassName="is-block" />
+//           <RadioButton value="SQUIRTLE" label="Squirtle" />
+//           <RadioButton value="BULBASAUR" label="Bulbasaur" helpText="Dont pick this one" />
+//         </ControlledRadioGroupField>
+//       </FormRow>
+//     </Form>
+//   ))
+//   .add("Readonly Controlled Radio Group Field", () => (
+//     <Form
+//       // eslint-disable-next-line no-console
+//       onSubmit={console.log}
+//       translationPath={["sample", "form"]}
+//       defaultValues={{ name: "Red", starter_pokemon: "SQUIRTLE" }}
+//     >
+//       <FormRow>
+//         <ControlledInputField name="name" />
+//       </FormRow>
+//       <FormRow>
+//         <ControlledRadioGroupField
+//           name="starter_pokemon"
+//           label="Starter Pokemon"
+//           helpText="Choose wisely"
+//           readOnly={true}
+//         >
+//           <RadioButton value="CHARMANDER" label="Charmander" labelClassName="is-block" />
+//           <RadioButton value="SQUIRTLE" label="Squirtle" />
+//           <RadioButton value="BULBASAUR" label="Bulbasaur" helpText="Dont pick this one" />
+//         </ControlledRadioGroupField>
+//       </FormRow>
+//     </Form>
+//   ))
+//   .add("With options", () => (
+//     <Form
+//       // eslint-disable-next-line no-console
+//       onSubmit={console.log}
+//       translationPath={["sample", "form"]}
+//       defaultValues={{ starter_pokemon: "CHARMANDER" }}
+//     >
+//       <FormRow>
+//         <ControlledRadioGroupField
+//           name="starter_pokemon"
+//           label="Starter Pokemon"
+//           helpText="Choose wisely"
+//           rules={{ required: true }}
+//           options={[
+//             { value: "CHARMANDER", label: "Charmander" },
+//             { value: "SQUIRTLE", label: "Squirtle" },
+//             { value: "BULBASAUR", label: "Bulbasaur", helpText: "Dont pick this one" },
+//           ]}
+//         />
+//       </FormRow>
+//     </Form>
+//   ))
+//   .add("Without label prop", () => (
+//     <Form
+//       // eslint-disable-next-line no-console
+//       onSubmit={console.log}
+//       translationPath={["sample", "form"]}
+//       defaultValues={{ starter_pokemon: "CHARMANDER" }}
+//     >
+//       <FormRow>
+//         <ControlledRadioGroupField
+//           name="starter_pokemon"
+//           label="Starter Pokemon"
+//           helpText="Choose wisely"
+//           rules={{ required: true }}
+//           options={[
+//             { value: "CHARMANDER" },
+//             { value: "SQUIRTLE" },
+//             { value: "BULBASAUR", helpText: "Dont pick this one" },
+//           ]}
+//         />
+//       </FormRow>
+//     </Form>
+//   ))
+//   .add("Nested", () => (
+//     <Form
+//       translationPath={["sample", "form"]}
+//       // eslint-disable-next-line no-console
+//       onSubmit={console.log}
+//       defaultValues={{
+//         trainers: [
+//           {
+//             name: "Red",
+//             team: [{ nickname: "Charlie", pokemon: "CHARMANDER" }],
+//           },
+//           {
+//             name: "Blue",
+//             team: [{ nickname: "Squirtle", pokemon: "SQUIRTLE" }],
+//           },
+//           {
+//             name: "Green",
+//             team: [{ nickname: "Plant", pokemon: "SQUIRTLE" }],
+//           },
+//         ],
+//       }}
+//     >
+//       <ScmFormListContextProvider name={"trainers"}>
+//         <ControlledList withDelete>
+//           {({ value: trainers }) => (
+//             <>
+//               <FormRow>
+//                 <ControlledInputField name={"name"} />
+//               </FormRow>
+//               <details className="has-background-dark-25 mb-2 p-2">
+//                 <summary className="is-clickable">Team</summary>
+//                 <div>
+//                   <ScmFormListContextProvider name={"team"}>
+//                     <ControlledTable withDelete>
+//                       <ControlledColumn name="nickname" />
+//                       <ControlledColumn name="pokemon" />
+//                     </ControlledTable>
+//                     <AddListEntryForm defaultValues={{ nickname: "", pokemon: null }}>
+//                       <FormRow>
+//                         <ControlledInputField name="nickname" />
+//                       </FormRow>
+//                       <FormRow>
+//                         <ControlledRadioGroupField
+//                           name="pokemon"
+//                           label="Starter Pokemon"
+//                           rules={{ required: true }}
+//                           options={[{ value: "CHARMANDER" }, { value: "SQUIRTLE" }, { value: "BULBASAUR" }]}
+//                         />
+//                       </FormRow>
+//                     </AddListEntryForm>
+//                   </ScmFormListContextProvider>
+//                 </div>
+//               </details>
+//             </>
+//           )}
+//         </ControlledList>
+//       </ScmFormListContextProvider>
+//     </Form>
+//   ));
+
+import React, { FC, useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
 import RadioButton from "./RadioButton";
 import RadioGroup from "./RadioGroup";
 import RadioGroupField from "./RadioGroupField";
@@ -29,45 +233,68 @@ import ControlledTable from "../table/ControlledTable";
 import ControlledColumn from "../table/ControlledColumn";
 import AddListEntryForm from "../AddListEntryForm";
 
-storiesOf("Radio Group", module)
-  .add("Uncontrolled State", () => {
-    return (
-      <RadioGroup name="starter_pokemon">
-        <RadioButton value="CHARMANDER" label="Charmander" />
-        <RadioButton value="SQUIRTLE" label="Squirtle" />
-        <RadioButton value="BULBASAUR" label="Bulbasaur" helpText="Dont pick this one" />
-      </RadioGroup>
-    );
-  })
-  .add("Controlled State", () => {
-    const [value, setValue] = useState<string | undefined>(undefined);
-    return (
-      <RadioGroup name="starter_pokemon" value={value} onValueChange={setValue}>
-        <RadioButton value="CHARMANDER" label="Charmander" />
-        <RadioButton value="SQUIRTLE" label="Squirtle" />
-        <RadioButton value="BULBASAUR" label="Bulbasaur" helpText="Dont pick this one" />
-      </RadioGroup>
-    );
-  })
-  .add("Radio Group Field", () => {
-    const [value, setValue] = useState<string | undefined>(undefined);
-    return (
-      <RadioGroupField
-        label="Choose your starter"
-        helpText="Choose wisely"
-        name="starter_pokemon"
-        value={value}
-        onValueChange={setValue}
-      >
-        <RadioButton value="CHARMANDER" label="Charmander" />
-        <RadioButton value="SQUIRTLE" label="Squirtle" />
-        <RadioButton value="BULBASAUR" label="Bulbasaur" helpText="Dont pick this one" />
-      </RadioGroupField>
-    );
-  })
-  .add("Controlled Radio Group Field", () => (
+const ControlledStateExample: FC = () => {
+  const [value, setValue] = useState<string | undefined>(undefined);
+  return (
+    <RadioGroup name="starter_pokemon" value={value} onValueChange={setValue}>
+      <RadioButton value="CHARMANDER" label="Charmander" />
+      <RadioButton value="SQUIRTLE" label="Squirtle" />
+      <RadioButton value="BULBASAUR" label="Bulbasaur" helpText="Dont pick this one" />
+    </RadioGroup>
+  );
+};
+
+const RadioGroupFieldExample: FC = () => {
+  const [value, setValue] = useState<string | undefined>(undefined);
+  return (
+    <RadioGroupField
+      label="Choose your starter"
+      helpText="Choose wisely"
+      name="starter_pokemon"
+      value={value}
+      onValueChange={setValue}
+    >
+      <RadioButton value="CHARMANDER" label="Charmander" />
+      <RadioButton value="SQUIRTLE" label="Squirtle" />
+      <RadioButton value="BULBASAUR" label="Bulbasaur" helpText="Dont pick this one" />
+    </RadioGroupField>
+  );
+};
+
+const meta: Meta<typeof RadioGroup> = {
+  title: "Forms/RadioGroup",
+  component: RadioGroup,
+  decorators: [(Story) => <div style={{ margin: "2rem", maxWidth: "40rem" }}>{Story()}</div>],
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const UncontrolledState: Story = {
+  render: () => (
+    <RadioGroup name="starter_pokemon">
+      <RadioButton value="CHARMANDER" label="Charmander" />
+      <RadioButton value="SQUIRTLE" label="Squirtle" />
+      <RadioButton value="BULBASAUR" label="Bulbasaur" helpText="Dont pick this one" />
+    </RadioGroup>
+  ),
+};
+
+export const ControlledState: Story = {
+  render: () => <ControlledStateExample />,
+};
+
+export const AsAField: Story = {
+  name: "As a Field",
+  render: () => <RadioGroupFieldExample />,
+};
+
+export const InAForm: Story = {
+  name: "In a Form (Controlled)",
+  render: () => (
     <Form
-      // eslint-disable-next-line no-console
       onSubmit={console.log}
       translationPath={["sample", "form"]}
       defaultValues={{ name: "", starter_pokemon: null }}
@@ -82,44 +309,40 @@ storiesOf("Radio Group", module)
           helpText="Choose wisely"
           rules={{ required: true }}
         >
-          <RadioButton value="CHARMANDER" label="Charmander" labelClassName="is-block" />
+          <RadioButton value="CHARMANDER" label="Charmander" />
           <RadioButton value="SQUIRTLE" label="Squirtle" />
           <RadioButton value="BULBASAUR" label="Bulbasaur" helpText="Dont pick this one" />
         </ControlledRadioGroupField>
       </FormRow>
     </Form>
-  ))
-  .add("Readonly Controlled Radio Group Field", () => (
+  ),
+};
+
+export const ReadOnly: Story = {
+  render: () => (
     <Form
-      // eslint-disable-next-line no-console
       onSubmit={console.log}
       translationPath={["sample", "form"]}
       defaultValues={{ name: "Red", starter_pokemon: "SQUIRTLE" }}
     >
       <FormRow>
-        <ControlledInputField name="name" />
+        <ControlledInputField name="name" readOnly />
       </FormRow>
       <FormRow>
-        <ControlledRadioGroupField
-          name="starter_pokemon"
-          label="Starter Pokemon"
-          helpText="Choose wisely"
-          readOnly={true}
-        >
-          <RadioButton value="CHARMANDER" label="Charmander" labelClassName="is-block" />
+        <ControlledRadioGroupField name="starter_pokemon" label="Starter Pokemon" helpText="Choose wisely" readOnly>
+          <RadioButton value="CHARMANDER" label="Charmander" />
           <RadioButton value="SQUIRTLE" label="Squirtle" />
-          <RadioButton value="BULBASAUR" label="Bulbasaur" helpText="Dont pick this one" />
+          <RadioButton value="BULBASAUR" label="Bulbasaur" />
         </ControlledRadioGroupField>
       </FormRow>
     </Form>
-  ))
-  .add("With options", () => (
-    <Form
-      // eslint-disable-next-line no-console
-      onSubmit={console.log}
-      translationPath={["sample", "form"]}
-      defaultValues={{ starter_pokemon: "CHARMANDER" }}
-    >
+  ),
+};
+
+export const WithOptionsProp: Story = {
+  name: "With Options Prop",
+  render: () => (
+    <Form onSubmit={console.log} translationPath={["sample", "form"]} defaultValues={{ starter_pokemon: "CHARMANDER" }}>
       <FormRow>
         <ControlledRadioGroupField
           name="starter_pokemon"
@@ -134,85 +357,55 @@ storiesOf("Radio Group", module)
         />
       </FormRow>
     </Form>
-  ))
-  .add("Without label prop", () => (
-    <Form
-      // eslint-disable-next-line no-console
-      onSubmit={console.log}
-      translationPath={["sample", "form"]}
-      defaultValues={{ starter_pokemon: "CHARMANDER" }}
-    >
-      <FormRow>
-        <ControlledRadioGroupField
-          name="starter_pokemon"
-          label="Starter Pokemon"
-          helpText="Choose wisely"
-          rules={{ required: true }}
-          options={[
-            { value: "CHARMANDER" },
-            { value: "SQUIRTLE" },
-            { value: "BULBASAUR", helpText: "Dont pick this one" },
-          ]}
-        />
-      </FormRow>
-    </Form>
-  ))
-  .add("Nested", () => (
+  ),
+};
+
+export const NestedInTable: Story = {
+  name: "Nested in a Table",
+  render: () => (
     <Form
       translationPath={["sample", "form"]}
-      // eslint-disable-next-line no-console
       onSubmit={console.log}
       defaultValues={{
         trainers: [
-          {
-            name: "Red",
-            team: [{ nickname: "Charlie", pokemon: "CHARMANDER" }],
-          },
-          {
-            name: "Blue",
-            team: [{ nickname: "Squirtle", pokemon: "SQUIRTLE" }],
-          },
-          {
-            name: "Green",
-            team: [{ nickname: "Plant", pokemon: "SQUIRTLE" }],
-          },
+          { name: "Red", team: [{ nickname: "Charlie", pokemon: "CHARMANDER" }] },
+          { name: "Blue", team: [{ nickname: "Squirtle", pokemon: "SQUIRTLE" }] },
         ],
       }}
     >
-      <ScmFormListContextProvider name={"trainers"}>
+      <ScmFormListContextProvider name="trainers">
         <ControlledList withDelete>
-          {({ value: trainers }) => (
+          {() => (
             <>
               <FormRow>
-                <ControlledInputField name={"name"} />
+                <ControlledInputField name="name" />
               </FormRow>
-              <details className="has-background-dark-25 mb-2 p-2">
+              <details className="has-background-dark-25 mb-2 p-2" open>
                 <summary className="is-clickable">Team</summary>
-                <div>
-                  <ScmFormListContextProvider name={"team"}>
-                    <ControlledTable withDelete>
-                      <ControlledColumn name="nickname" />
-                      <ControlledColumn name="pokemon" />
-                    </ControlledTable>
-                    <AddListEntryForm defaultValues={{ nickname: "", pokemon: null }}>
-                      <FormRow>
-                        <ControlledInputField name="nickname" />
-                      </FormRow>
-                      <FormRow>
-                        <ControlledRadioGroupField
-                          name="pokemon"
-                          label="Starter Pokemon"
-                          rules={{ required: true }}
-                          options={[{ value: "CHARMANDER" }, { value: "SQUIRTLE" }, { value: "BULBASAUR" }]}
-                        />
-                      </FormRow>
-                    </AddListEntryForm>
-                  </ScmFormListContextProvider>
-                </div>
+                <ScmFormListContextProvider name="team">
+                  <ControlledTable withDelete>
+                    <ControlledColumn name="nickname" />
+                    <ControlledColumn name="pokemon" />
+                  </ControlledTable>
+                  <AddListEntryForm defaultValues={{ nickname: "", pokemon: null }}>
+                    <FormRow>
+                      <ControlledInputField name="nickname" />
+                    </FormRow>
+                    <FormRow>
+                      <ControlledRadioGroupField
+                        name="pokemon"
+                        label="Pokemon"
+                        rules={{ required: true }}
+                        options={[{ value: "CHARMANDER" }, { value: "SQUIRTLE" }, { value: "BULBASAUR" }]}
+                      />
+                    </FormRow>
+                  </AddListEntryForm>
+                </ScmFormListContextProvider>
               </details>
             </>
           )}
         </ControlledList>
       </ScmFormListContextProvider>
     </Form>
-  ));
+  ),
+};

package/src/base/forms/radio-button/RadioButton.tsx

@@ -14,7 +14,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { ComponentProps } from "react";
+import React from "react";
 import classNames from "classnames";
 import Help from "../base/help/Help";
 import * as RadioGroup from "@radix-ui/react-radio-group";
@@ -65,6 +65,9 @@ const StyledIndicator = styled(RadioGroup.Indicator)`
   }
 `;
 
+type RadioGroupItemElement = React.ElementRef<typeof RadioGroup.Item>;
+type RadioGroupItemProps = React.ComponentPropsWithoutRef<typeof RadioGroup.Item>;
+
 type Props = {
   value: string;
   id?: string;
@@ -73,17 +76,18 @@ type Props = {
   label?: string;
   labelClassName?: string;
   helpText?: string;
-} & ComponentProps<typeof RadioGroup.Item>;
+} & RadioGroupItemProps;
 
 /**
  * @beta
  * @since 2.48.0
  */
-const RadioButton = React.forwardRef<HTMLButtonElement, Props>(
+const RadioButton = React.forwardRef<RadioGroupItemElement, Props>(
   ({ id, testId, indicatorClassName, label, labelClassName, className, helpText, value, ...props }, ref) => {
     const context = useRadioButtonContext();
     const inputId = useAriaId(id);
     const labelKey = `${context?.prefix}.radio.${value}`;
+    const displayLabel = label ?? context?.t(labelKey) ?? value ?? "";
 
     return (
       <div className={classNames("radio is-flex is-align-items-center", labelClassName)}>
@@ -98,7 +102,7 @@ const RadioButton = React.forwardRef<HTMLButtonElement, Props>(
         >
           <StyledIndicator className={indicatorClassName} />
         </StyledRadioButton>
-        <label htmlFor={inputId}>{label ?? context?.t(labelKey) ?? value}</label>
+        <label htmlFor={inputId}>{displayLabel}</label>
         {helpText ? <Help className="ml-3" text={helpText} /> : null}
       </div>
     );

package/src/base/forms/radio-button/RadioButtonContext.tsx

@@ -14,13 +14,14 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { createContext, FC, useContext } from "react";
+import React, { createContext, FC, ReactNode, useContext } from "react";
 import { TFunction } from "i18next";
 
 type ContextType = {
   t: TFunction;
   prefix: string;
   formId?: string;
+  children?: ReactNode;
 };
 
 const RadioButtonContext = createContext<ContextType | null>(null);

package/src/base/forms/table/ControlledColumn.tsx

@@ -22,7 +22,7 @@ import { useWatch } from "react-hook-form";
 type Props = {
   name: string;
   children?: (value: unknown) => React.ReactNode | React.ReactNode[];
-} & HTMLAttributes<HTMLTableCellElement>;
+} & Omit<HTMLAttributes<HTMLTableCellElement>, "children">;
 
 /**
  * @beta

package/src/base/forms/table/ControlledTable.tsx

@@ -54,23 +54,31 @@ function ControlledTable<T extends Record<string, unknown>, PATH extends Path<T>
   const deleteLabel = t(`${prefixedNameWithoutIndices}.delete`) || defaultTranslate("delete.label");
   const emptyTableLabel = t(`${prefixedNameWithoutIndices}.empty`) || defaultTranslate("empty.label");
   const actionHeaderLabel = t(`${prefixedNameWithoutIndices}.action.label`) || defaultTranslate("headers.action.label");
+  const renderedChildren = typeof children === "function" ? children({} as RenderProps<T, PATH>) : children;
 
   return (
     <table className={classNames("table content is-hoverable", className)}>
       <thead>
         <tr>
-          {React.Children.map(children, (child) => (
-            <th>{t(`${prefixedNameWithoutIndices}.${(child as ReactElement).props.name}.label`)}</th>
+          {React.Children.map(renderedChildren, (child) => (
+            // @ts-ignore
+            <th>{String(t(`${prefixedNameWithoutIndices}.${(child as ReactElement).props.name}.label`))}</th>
           ))}
           {withDelete && !readOnly ? <th className="has-text-right">{actionHeaderLabel}</th> : null}
         </tr>
       </thead>
       <tbody>
-      {fields.length === 0 ? <tr><td colSpan={1000}><Notification type="info">{emptyTableLabel}</Notification></td></tr> : null}
+        {fields.length === 0 ? (
+          <tr>
+            <td colSpan={1000}>
+              <Notification type="info">{emptyTableLabel}</Notification>
+            </td>
+          </tr>
+        ) : null}
         {fields.map((value, index) => (
           <ScmFormPathContextProvider key={value.id} path={`${nameWithPrefix}.${index}`}>
             <tr>
-              {children}
+              {renderedChildren}
               {withDelete && !readOnly ? (
                 <td className="has-text-right">
                   <Button className="px-4" onClick={() => remove(index)} aria-label={deleteLabel}>