fix: disabled form components

src/components/DateInput.tsx

@@ -13,6 +13,7 @@ export type DateArray = [DateNull, DateNull];
 
 type DateInputProps = {
   isRequired?: boolean;
+  isDisabled?: boolean;
   label: string;
   labelPlacement?: LabelPlacement;
   labelClass?: string;
@@ -31,6 +32,7 @@ type DateInputProps = {
 
 const DateInput = ({
   isRequired = false,
+  isDisabled = false,
   label,
   labelPlacement = "outside",
   labelClass = "",
@@ -68,6 +70,7 @@ const DateInput = ({
         <div onClick={onClick}>
           <BaseInput
             isRequired={isRequired}
+            isDisabled={isDisabled}
             label={label}
             labelPlacement={labelPlacement}
             labelClass={labelClass}
@@ -184,6 +187,7 @@ const DateInput = ({
       popperPlacement={
         labelPlacement === "outside-left" ? "bottom-end" : "bottom-start"
       }
+      disabled={isDisabled}
     />
   );
 };

src/components/Dropdown.tsx

@@ -36,6 +36,7 @@ const Dropdown = ({
   return (
     <Autocomplete
       isRequired={isRequired}
+      isDisabled={isDisabled}
       label={
         label && (
           <Typography

src/components/Table.tsx

 import { Dispatch, ReactNode, SetStateAction } from "react";
 import { DataTable, type DataTableValueArray } from "primereact/datatable";
 import { Column } from "primereact/column";
+import { clsx } from "clsx";
 import { textColor } from "./utils/classes.ts";
 import Typography from "./Typography.tsx";
 
@@ -39,7 +40,9 @@ const Table = ({
       reorderableRows={isReorderable}
       onRowReorder={(e) => onReorder && onReorder(e.value)}
       className="rounded-[8px] bg-lightGrey/30 dark:bg-baseBlack/40 p-[20px] pb-[10px]"
-      rowClassName={() => "border-t border-grey/50 text-[13px] font-body"}
+      rowClassName={() =>
+        clsx("border-t border-grey/50 text-[13px] font-body", textColor("body"))
+      }
       cellClassName={() => "h-12 pl-[5px]"}
     >
       {isSelectable && (

src/stories/DateInput.stories.tsx

@@ -85,3 +85,13 @@ export const LabelOnTheLeft = () => {
     </div>
   );
 };
+
+export const Disabled = () => {
+  return (
+    <DateInput
+      label="Can't touch this"
+      onValueChange={() => {}}
+      isDisabled={true}
+    />
+  );
+};

src/stories/Dropdown.stories.tsx

@@ -35,3 +35,14 @@ export const SimpleDropdown = () => {
     </>
   );
 };
+
+export const Disabled = () => {
+  return (
+    <Dropdown
+      label="You can't choose your favourite ice cream."
+      valueOptions={[]}
+      onValueChange={() => {}}
+      isDisabled={true}
+    />
+  );
+};