Add FormSwitch (#928)

Author: Oksamies

apps/cyberstorm-storybook/stories/components/Switch.stories.tsx

@@ -10,40 +10,40 @@ const meta = {
 const Template: StoryFn<typeof Switch> = (args) => <Switch {...args} />;
 
 const SameStateSwitchTemplate: StoryFn<typeof Switch> = () => {
-  const [state, setState] = useState(false);
+  const [value, setValue] = useState(false);
   return (
     <div>
       <div>
-        <Switch state={state} onChange={setState} />
+        <Switch value={value} onChange={setValue} />
       </div>
       <div>
-        <Switch state={state} onChange={setState} />
+        <Switch value={value} onChange={setValue} />
       </div>
     </div>
   );
 };
 const SwitchLabelIdTemplate: StoryFn<typeof Switch> = () => {
-  const [state, setState] = useState(false);
+  const [value, setValue] = useState(false);
   return (
     <>
       <label htmlFor="my-switch">My switch</label>
-      <Switch state={state} onChange={setState} id="my-switch" />
+      <Switch value={value} onChange={setValue} id="my-switch" />
     </>
   );
 };
 const SwitchNestedLabelTemplate: StoryFn<typeof Switch> = () => {
-  const [state, setState] = useState(false);
+  const [value, setValue] = useState(false);
   return (
     <label>
       My switch
-      <Switch state={state} onChange={setState} />
+      <Switch value={value} onChange={setValue} />
     </label>
   );
 };
 
 const RegularSwitch = Template.bind({});
 const DisabledSwitch = Template.bind({});
-DisabledSwitch.args = { state: false, disabled: true };
+DisabledSwitch.args = { value: false, disabled: true };
 const SameStateSwitch = SameStateSwitchTemplate.bind({});
 const SwitchNestedLabel = SwitchNestedLabelTemplate.bind({});
 const SwitchLabelId = SwitchLabelIdTemplate.bind({});

packages/cyberstorm-forms/src/components/FormSwitch.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { z, ZodObject } from "zod";
+import { ZodRawShape } from "zod/lib/types";
+import { Path, useController } from "react-hook-form";
+import styles from "./FormTextInput.module.css";
+import { Switch } from "@thunderstore/cyberstorm";
+
+export type FormSwitchProps<
+  Schema extends ZodObject<Z>,
+  Z extends ZodRawShape
+> = {
+  // The schema is required to allow TS to infer valid values for the name field
+  schema: Schema;
+  name: Path<z.infer<Schema>>;
+  placeholder?: string;
+};
+export function FormSwitch<Schema extends ZodObject<Z>, Z extends ZodRawShape>({
+  name,
+}: FormSwitchProps<Schema, Z>) {
+  const {
+    field,
+    fieldState: { error },
+    formState: { isSubmitting, disabled },
+  } = useController({ name });
+
+  return (
+    <>
+      <Switch {...field} disabled={isSubmitting || disabled} />
+      {error && <span className={styles.errorMessage}>{error.message}</span>}
+    </>
+  );
+}
+
+FormSwitch.displayName = "FormSwitch";

packages/cyberstorm-forms/src/index.ts

@@ -2,5 +2,6 @@ export { useFormToaster } from "./useFormToaster";
 export { FormSubmitButton } from "./components/FormSubmitButton";
 export { FormSelectSearch } from "./components/FormSelectSearch";
 export { FormMultiSelectSearch } from "./components/FormMultiSelectSearch";
+export { FormSwitch } from "./components/FormSwitch";
 export { FormTextInput } from "./components/FormTextInput";
 export { CreateTeamForm } from "./forms/CreateTeamForm";

packages/cyberstorm/src/components/Layout/Settings/Connections/Connections.tsx

@@ -98,7 +98,7 @@ function Connection(props: ConnectionProps) {
               </div>
             </div>
           ) : null}
-          <Switch state={connection !== undefined} />
+          <Switch value={connection !== undefined} />
         </div>
       </div>
     </div>

packages/cyberstorm/src/components/Switch/Switch.tsx

@@ -3,25 +3,29 @@
 import { Dispatch, SetStateAction } from "react";
 import styles from "./Switch.module.css";
 import * as RadixSwitch from "@radix-ui/react-switch";
+import React from "react";
 
 export interface SwitchProps {
-  state: boolean;
+  value: boolean;
   onChange?: Dispatch<SetStateAction<boolean>>;
   disabled?: boolean;
   id?: string;
 }
 
-export function Switch(props: SwitchProps) {
-  const { state, onChange, disabled = false, id } = props;
-  return (
-    <RadixSwitch.Root
-      className={styles.root}
-      disabled={disabled}
-      onCheckedChange={onChange}
-      checked={state}
-      id={id}
-    >
-      <RadixSwitch.Thumb className={styles.thumb} />
-    </RadixSwitch.Root>
-  );
-}
+export const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
+  function Switch(props, ref) {
+    const { value, onChange, disabled = false, id } = props;
+    return (
+      <RadixSwitch.Root
+        className={styles.root}
+        disabled={disabled}
+        onCheckedChange={onChange}
+        checked={value}
+        id={id}
+        ref={ref}
+      >
+        <RadixSwitch.Thumb className={styles.thumb} />
+      </RadixSwitch.Root>
+    );
+  }
+);