Merge branch 'SDC-1158/form-components-usability' into 'main'

form components

Closes SDC-1158

See merge request !17

src/components/Button.tsx

@@ -2,13 +2,15 @@ import { Button as NextButton } from "@nextui-org/react";
 import Icon, { IconName } from "./Icon.tsx";
 import Typography from "./Typography.tsx";
 import { bgColor, Color } from "./utils/colors.ts";
+import { disabledCursor } from "./utils/classes.ts";
 
 export type ButtonProps = {
   label?: string | null;
   color?: Color;
-  disabled?: boolean;
   icon?: IconName | null;
   iconClass?: string;
+  isDisabled?: boolean;
+  type?: "button" | "submit";
   onClick?: () => void;
 };
 
@@ -18,14 +20,15 @@ export type ButtonProps = {
  * @param label: string
  * @param color: Color string
  * @param icon: null | IconName
- * @param enabled: boolean
+ * @param disabled: boolean
  */
 const Button = ({
   label = null,
   color = "primary",
   icon = null,
   iconClass,
-  disabled = false,
+  isDisabled = false,
+  type = "button",
   onClick = () => {},
 }: ButtonProps) => {
   if (!label && !icon) throw Error("Button cannot be empty");
@@ -35,15 +38,22 @@ const Button = ({
     else if (icon) return "px-[9px] ";
     else if (label) return "px-[10px] ";
   };
-  const bgClass = disabled
-    ? "bg-lightGrey cursor-not-allowed opacity-100"
-    : bgColor(color);
+  const bgClass = (isDisabled: boolean) => {
+    if (!isDisabled) return bgColor(color) + " ";
+    return "bg-lightGrey ";
+  };
 
   return (
     <NextButton
       startContent={icon && <Icon name={icon} customClass={iconClass} />}
-      className={`${px()} ${bgClass} pointer-events-auto h-[32px] min-w-fit py-[5px] text-baseWhite rounded-[4px] flex`}
-      isDisabled={disabled}
+      className={
+        px() +
+        bgClass(isDisabled) +
+        disabledCursor(isDisabled) +
+        " h-[32px] min-w-fit max-w-fit py-[5px] text-baseWhite rounded-[4px] flex focus:!outline-0"
+      }
+      isDisabled={isDisabled}
+      type={type}
       onClick={onClick}
     >
       {label && (

src/components/Checkbox.tsx

 import { Checkbox as NextCheckbox } from "@nextui-org/react";
 import { Dispatch, SetStateAction } from "react";
 import Icon from "./Icon.tsx";
+import { disabledBg, disabledCursor } from "./utils/classes.ts";
 
 type CheckboxProps = {
+  isDisabled?: boolean;
+  isRequired?: boolean;
   isSelected: boolean;
-  setIsSelected: Dispatch<SetStateAction<boolean>>;
+  setIsSelected?: Dispatch<SetStateAction<boolean>>;
   label?: string;
 };
 
-const Checkbox = ({ isSelected, setIsSelected, label }: CheckboxProps) => {
+const Checkbox = ({
+  isDisabled = false,
+  isRequired = false,
+  isSelected,
+  setIsSelected,
+  label,
+}: CheckboxProps) => {
   return (
     <NextCheckbox
+      isRequired={isRequired}
+      isDisabled={isDisabled}
       isSelected={isSelected}
       onValueChange={setIsSelected}
       icon={isSelected ? <Icon name="checkmark" color="body" /> : <></>}
@@ -19,8 +30,11 @@ const Checkbox = ({ isSelected, setIsSelected, label }: CheckboxProps) => {
       color="default"
       disableAnimation
       classNames={{
+        base: disabledCursor(isDisabled),
         wrapper:
-          "w-[24px] h-[24px] border-[1px] border-grey rounded-[4px] dark:bg-mediumGrey dark:border-mediumGrey",
+          "w-[24px] h-[24px] rounded-[4px] " +
+          "border-[1px] border-grey dark:border-none " +
+          disabledBg(isDisabled),
       }}
     >
       {label}

src/components/DateInput.tsx

@@ -8,22 +8,33 @@ import Typography from "./Typography.tsx";
 import { textColor } from "./utils/colors.ts";
 
 type DateInputProps = {
-  label?: string;
+  isRequired?: boolean;
+  label: string;
   value?: Date;
   onValueChange: Dispatch<SetStateAction<Date | undefined>>;
+  isInvalid?: boolean;
+  errorMessage?: string;
 };
 
-const DateInput = ({ label, value, onValueChange }: DateInputProps) => {
+const DateInput = ({
+  isRequired = false,
+  label,
+  value,
+  onValueChange,
+  isInvalid = false,
+  errorMessage = "",
+}: DateInputProps) => {
   const dateFormat = "dd/MM/yyyy";
 
   type inputProps = {
+    isRequired: boolean;
     value?: string;
     onClick?: () => void;
   };
 
   const CustomInput = forwardRef(
     (
-      { value, onClick }: inputProps,
+      { isRequired, value, onClick }: inputProps,
       // @ts-expect-error the "ref" prop is needed to avoid console errors.
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       ref
@@ -31,6 +42,7 @@ const DateInput = ({ label, value, onValueChange }: DateInputProps) => {
       return (
         <div onClick={onClick}>
           <BaseInput
+            isRequired={isRequired}
             label={label}
             endContent={
               <Icon
@@ -41,6 +53,8 @@ const DateInput = ({ label, value, onValueChange }: DateInputProps) => {
             placeholder="DD/MM/YYYY"
             value={value}
             onValueChange={() => {}}
+            isInvalid={isInvalid}
+            errorMessage={errorMessage}
           />
         </div>
       );
@@ -77,11 +91,11 @@ const DateInput = ({ label, value, onValueChange }: DateInputProps) => {
   return (
     <DatePicker
       dateFormat={dateFormat}
-      openToDate={new Date()}
+      openToDate={value || new Date()}
       selected={value}
       onSelect={(date) => onValueChange(date)}
       onChange={(date) => !!date && onValueChange(date)}
-      customInput={<CustomInput />}
+      customInput={<CustomInput isRequired={isRequired} />}
       showPopperArrow={false}
       calendarStartDay={1}
       formatWeekDay={(day) => <div>{day.charAt(0)}</div>}

src/components/Dropdown.tsx

@@ -4,6 +4,7 @@ import { baseInputClassNames } from "./utils/baseComponents.tsx";
 import Icon from "./Icon.tsx";
 
 type DropdownProps = {
+  isRequired?: boolean;
   label?: string;
   valueOptions: { value: string; label: string }[];
   value?: string;
@@ -11,6 +12,7 @@ type DropdownProps = {
 };
 
 const Dropdown = ({
+  isRequired = false,
   label,
   valueOptions,
   value,
@@ -18,6 +20,7 @@ const Dropdown = ({
 }: DropdownProps) => {
   return (
     <Autocomplete
+      isRequired={isRequired}
       label={label}
       selectedKey={value}
       onSelectionChange={(key) => onValueChange(key as string)}
@@ -25,8 +28,11 @@ const Dropdown = ({
       placeholder=" " // so the label stays outside
       disableAnimation
       disableSelectorIconRotation
-      variant="bordered"
-      inputProps={{ classNames: baseInputClassNames }} // use the same props as BaseInput
+      inputProps={{
+        classNames: baseInputClassNames(false),
+        variant: "bordered",
+        isRequired: isRequired,
+      }} // use the same props as BaseInput
       selectorIcon={<Icon name="dropdown" />}
       isClearable={false} // so the "cross" button does not show
       classNames={{

src/components/Radio.tsx

 import { RadioGroup, Radio as NextRadio } from "@nextui-org/react";
 import { Dispatch, SetStateAction } from "react";
+import { disabledBg, disabledCursor } from "./utils/classes.ts";
 
 type RadioProps = {
-  size?: "small" | "big";
+  isRequired?: boolean;
   label?: string;
-  valueOptions: { value: string; label: string }[];
+  valueOptions: { value: string; label: string; isDisabled?: boolean }[];
   value?: string;
-  onValueChange: Dispatch<SetStateAction<string | undefined>>;
+  onValueChange?: Dispatch<SetStateAction<string | undefined>>;
 };
 
 const Radio = ({
-  size = "small",
+  isRequired = false,
   label,
   valueOptions,
   value,
   onValueChange,
 }: RadioProps) => {
-  const sizeClass = {
-    small: { wrapper: "w-[16px] h-[16px]", control: "w-[10px] h-[10px]" },
-    big: { wrapper: "w-[24px] h-[24px]", control: "w-[14px] h-[14px]" },
-  };
-
   return (
-    <RadioGroup label={label} value={value} onValueChange={onValueChange}>
+    <RadioGroup
+      isRequired={isRequired}
+      label={label}
+      value={value}
+      onValueChange={onValueChange}
+    >
       {valueOptions.map((option) => (
         <NextRadio
+          isDisabled={option.isDisabled || false}
           key={option.value}
           value={option.value}
           disableAnimation
           classNames={{
-            wrapper: `${sizeClass[size].wrapper} bg-lightGrey group-data-[selected=true]:border-none`,
-            control: sizeClass[size].control,
+            base: disabledCursor(option.isDisabled || false),
+            wrapper:
+              "w-[16px] h-[16px] border-[1px] !border-grey dark:border-none " +
+              disabledBg(option.isDisabled || false),
+            control: "w-[10px] h-[10px]",
           }}
         >
           {option.label}

src/components/TextInput.tsx

@@ -2,16 +2,19 @@ import { Dispatch, ReactNode, SetStateAction } from "react";
 import { BaseInput } from "./utils/baseComponents.tsx";
 
 type TextInputProps = {
+  isRequired?: boolean;
   label?: string;
   endContent?: ReactNode; // such as units (as text element e.g. <span>)
   isClearable?: boolean;
   value: string;
-  onValueChange: Dispatch<SetStateAction<string>>;
+  onValueChange?: Dispatch<SetStateAction<string>>;
   isInvalid?: boolean;
   errorMessage?: string;
+  isDisabled?: boolean;
 };
 
 const TextInput = ({
+  isRequired = false,
   label = "",
   endContent,
   isClearable = false,
@@ -19,9 +22,11 @@ const TextInput = ({
   onValueChange,
   isInvalid = false,
   errorMessage = "",
+  isDisabled = false,
 }: TextInputProps) => {
   return (
     <BaseInput
+      isRequired={isRequired}
       label={label}
       endContent={endContent}
       placeholder=" "
@@ -30,6 +35,7 @@ const TextInput = ({
       onValueChange={onValueChange}
       isInvalid={isInvalid}
       errorMessage={errorMessage}
+      isDisabled={isDisabled}
     />
   );
 };

src/components/Toggle.tsx

 import { Dispatch, SetStateAction } from "react";
 import { Switch } from "@nextui-org/react";
+import { disabledCursor } from "./utils/classes.ts";
 
 type ToggleProps = {
+  isDisabled?: boolean;
   isSelected: boolean;
-  setIsSelected: Dispatch<SetStateAction<boolean>>;
+  setIsSelected?: Dispatch<SetStateAction<boolean>>;
   label?: string;
 };
 
-const Toggle = ({ isSelected, setIsSelected, label }: ToggleProps) => {
+const Toggle = ({
+  isDisabled = false,
+  isSelected,
+  setIsSelected,
+  label,
+}: ToggleProps) => {
   const selectedClass = isSelected
     ? "group-data-[selected=true]:ml-[11px] bg-primary"
     : "bg-grey";
   return (
     <Switch
+      isDisabled={isDisabled}
+      // Does not support "isRequired": https://github.com/nextui-org/nextui/issues/1610
       isSelected={isSelected}
       onValueChange={setIsSelected}
       color="secondary"
       classNames={{
+        base: disabledCursor(isDisabled),
         thumb: `h-[14px] w-[14px] ${selectedClass}`,
         wrapper:
           "h-[8px] w-[25px] p-0 overflow-visible bg-lightGrey dark:bg-mediumGrey",

src/components/utils/baseComponents.tsx

 import { Input } from "@nextui-org/react";
 import { Dispatch, ReactNode, SetStateAction } from "react";
+import { InputSlots } from "@nextui-org/theme";
+import { disabledBg, disabledCursor } from "./classes.ts";
 
 type BaseInputProps = {
   // basic info
@@ -7,26 +9,46 @@ type BaseInputProps = {
   endContent: ReactNode; // such as units or icon
   // value and validation
   placeholder: string;
-  isClearable: boolean;
-  value: string;
-  onValueChange: Dispatch<SetStateAction<string>>;
+  isClearable?: boolean;
+  value?: string;
+  onValueChange?: Dispatch<SetStateAction<string>>;
   isInvalid: boolean;
   errorMessage: string;
+  // interaction
+  isRequired?: boolean;
+  isDisabled?: boolean;
 };
 
+type baseInputClassNamesObj = { [key in InputSlots]: string };
+
+export const baseInputClassNames = (isDisabled: boolean) => {
   // No we cannot do "[&>svg]:" + className because Tailwind does not support dynamic class names
   const clearButtonSvgClass =
     "[&>svg]:w-[42px] [&>svg]:h-[42px] [&>svg]:mt-[-6px] [&>svg]:ml-[-5px]";
 
-export const baseInputClassNames = {
+  const baseClass = {
+    base: disabledCursor(isDisabled),
     label: "!text-foreground-body",
-  mainWrapper: "text-grey dark:text-mediumGrey",
-  inputWrapper: "bg-baseWhite dark:bg-mediumGrey rounded-[4px] px-2",
     input: "!text-foreground-body bg-default",
+    inputWrapper: "px-2 rounded-[4px] " + disabledBg(isDisabled),
+  };
+
+  const defaultClass = {
+    ...baseClass,
+    mainWrapper:
+      "text-grey dark:text-mediumGrey hover:text-baseBlack focus-within:!text-primary", // this is the border color (use text-*)
     clearButton:
       clearButtonSvgClass +
       " " +
       "bg-mediumGrey text-baseWhite dark:bg-baseWhite dark:text-mediumGrey w-[30px] h-[30px] p-0 !opacity-100",
+  } as baseInputClassNamesObj;
+
+  const disabledClass = {
+    ...baseClass,
+    mainWrapper: "text-mediumGrey dark:text-darkModeBlue",
+  } as baseInputClassNamesObj;
+
+  return isDisabled ? disabledClass : defaultClass;
 };
 
 export const BaseInput = ({
@@ -38,6 +60,8 @@ export const BaseInput = ({
   onValueChange,
   isInvalid,
   errorMessage,
+  isRequired = false,
+  isDisabled = false,
 }: BaseInputProps) => {
   return (
     <Input
@@ -50,10 +74,12 @@ export const BaseInput = ({
       onValueChange={onValueChange}
       isInvalid={isInvalid}
       errorMessage={errorMessage}
+      isRequired={isRequired}
+      isDisabled={isDisabled}
       // appearance
       labelPlacement="outside"
       variant="bordered"
-      classNames={baseInputClassNames}
+      classNames={baseInputClassNames(isDisabled)}
     />
   );
 };

src/components/utils/classes.ts

+export const disabledCursor = (isDisabled: boolean) => {
+  if (!isDisabled) return "";
+  return "pointer-events-auto cursor-not-allowed opacity-50";
+};
+
+export const disabledBg = (isDisabled: boolean) => {
+  if (!isDisabled) return "bg-baseWhite dark:bg-mediumGrey";
+  return "bg-lightGrey dark:bg-darkModeBlue";
+};

src/stories/Button.stories.ts → src/stories/Button.stories.tsx

 import { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
 import Button from "src/components/Button.tsx";
 import { iconNameOptions } from "src/components/Icon.tsx";
 import { colorOptions } from "src/components/utils/colors.ts";
+import Typography from "src/components/Typography.tsx";
+import TextInput from "src/components/TextInput.tsx";
 
 /** Use buttons as triggers for actions that are used in forms, toolbars, dialog footers and as stand-alone action triggers. Try to avoid the usage of buttons for navigation. The main difference between actions and navigation is that Actions are operations performed on objects, while Navigation refers to elements on the screen or view that take you to another context in the application. */
 const meta = {
@@ -36,6 +39,32 @@ export const IconButton: StoryObj = {
 export const DisabledButton: StoryObj = {
   args: {
     label: "You can't click me!",
-    disabled: true,
+    isDisabled: true,
   },
 };
+
+/** In order for the Button to listen for Enter keypress, mostly used for submitting forms. Provide `type="submit"` to the Button component, and wrap it in a `<form>` element. For the native form element, you might also want to use an `onSubmit` with `preventDefault` and `stopPropagation` so the page does not reload. But there are also form libraries that take care of that. */
+export const SubmitButton = () => {
+  const [value, setValue] = useState("");
+  const [count, setCount] = useState(0);
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      }}
+      className="max-w-md flex flex-col gap-2"
+    >
+      <TextInput value={value} onValueChange={setValue} />
+      <Button
+        label="Submit"
+        type="submit"
+        onClick={() => setCount(count + 1)}
+      />
+      <Typography
+        text={`You have submitted ${count} times!`}
+        variant="paragraph"
+      />
+    </form>
+  );
+};

src/stories/Checkbox.stories.tsx

@@ -19,3 +19,20 @@ export const SimpleCheckbox = () => {
     />
   );
 };
+
+export const DisabledCheckbox = () => {
+  return (
+    <div className="flex flex-col gap-4">
+      <Checkbox
+        isDisabled={true}
+        isSelected={true}
+        label="I am always right!"
+      />
+      <Checkbox
+        isDisabled={true}
+        isSelected={false}
+        label="I am always wrong :("
+      />
+    </div>
+  );
+};

src/stories/Radio.stories.tsx

@@ -10,21 +10,19 @@ const meta = {
 
 export default meta;
 
+export const SimpleRadio = () => {
+  const [value, setValue] = useState<string>();
+
   const valueOptions = [
     { value: "vanilla", label: "Vanilla" },
     { value: "mocha", label: "Mocha" },
     { value: "mint", label: "Mint" },
     { value: "raspberry", label: "Raspberry" },
-  { value: "apple", label: "Apple" },
   ];
 
-export const SmallRadio = () => {
-  const [value, setValue] = useState<string>();
-
   return (
     <>
       <Radio
-        size="small"
         label="What's your favourite ice cream?"
         valueOptions={valueOptions}
         onValueChange={setValue}
@@ -37,20 +35,18 @@ export const SmallRadio = () => {
   );
 };
 
-export const BigRadio = () => {
-  const [value, setValue] = useState<string>();
+export const DisabledRadio = () => {
+  const valueOptions = [
+    { value: "mint", label: "Mint", isDisabled: true },
+    { value: "raspberry", label: "Raspberry", isDisabled: true },
+  ];
 
   return (
     <>
       <Radio
-        size="big"
-        label="What's your favourite ice cream?"
+        label="Your favourite ice cream must be raspberry"
         valueOptions={valueOptions}
-        onValueChange={setValue}
-      />
-      <Typography
-        text={`You selected: ${value || "nothing"}`}
-        variant="paragraph"
+        value="raspberry"
       />
     </>
   );

src/stories/TextInput.stories.tsx

@@ -43,3 +43,13 @@ export const IsClearable = () => {
     />
   );
 };
+
+export const Disabled = () => {
+  return (
+    <TextInput
+      label="You can't change this!"
+      isDisabled={true}
+      value="*Evil laughter*"
+    />
+  );
+};

src/stories/Toggle.stories.tsx

@@ -19,3 +19,12 @@ export const SimpleToggle = () => {
     />
   );
 };
+
+export const DisabledToggle = () => {
+  return (
+    <div className="flex flex-col gap-4">
+      <Toggle isDisabled={true} isSelected={true} label="I'm always right!" />
+      <Toggle isDisabled={true} isSelected={false} label="I'm always left!" />
+    </div>
+  );
+};

tailwind.config.js

@@ -61,7 +61,7 @@ export default {
         },
         dark: {
           colors: {
-            background: palette.darkModeBlue,
+            background: palette.darkBlue,
             foreground: {
               heading: palette.baseWhite,
               heading2: palette.lightBlue,