@cerebruminc/cerebellum 20.0.2 → 20.0.3

package/src/components/Form/stories/DynamicFields.stories.tsx

@@ -65,7 +65,7 @@ export const DynamicFields: Story = {
           .string()
           .email("Invalid Email")
           .when("Select a chunk of the form to show", {
-            is: (val) => val.includes("groupTwo"),
+            is: (val: string[]) => val.includes("groupTwo"),
             then: yup.string().email("Invalid Email").required("Please enter your email"),
           }),
       },
@@ -79,7 +79,7 @@ export const DynamicFields: Story = {
         required: true,
         showIf: ({ values }) => values["Select a chunk of the form to show"].includes("groupTwo"),
         validationFunction: yup.number().when("Select a chunk of the form to show", {
-          is: (val) => val.includes("groupTwo"),
+          is: (val: string[]) => val.includes("groupTwo"),
           then: yup.number().required("Please enter your anual salary"),
         }),
       },
@@ -94,7 +94,7 @@ export const DynamicFields: Story = {
         required: true,
         showIf: ({ values }) => values["Select a chunk of the form to show"].includes("groupTwo"),
         validationFunction: yup.string().when("Select a chunk of the form to show", {
-          is: (val) => val.includes("groupTwo"),
+          is: (val: string[]) => val.includes("groupTwo"),
           then: yup.string().required("Please enter a valid credit card number"),
         }),
       },

package/src/components/Form/stories/LeftLabels.stories.tsx

@@ -1,11 +1,12 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { RelativeContainer } from "../../../SharedStorybook/Layout";
 import { colors } from "../../../const/colors";
 import { FormWrapper } from "../FormStyles";
 import { FormikContainer } from "../FormikContainer";
 import { allFieldTypes } from "../mocks/fields";
 
-/** 
+/**
  * `leftLabels` will change the layout of the `Form` to put the labels on the left side. This is useful to conserve space with longer forms, but is not appropriate on narrow screens.
 
 Please note that this format is not an excuse to use longer `fieldLabels`. They should remain as short as possible for easy of legibility. In addition, long, wrapping labels will break the layout, especially if `helperText` is used.
@@ -18,7 +19,7 @@ export default meta;
 
 type Story = StoryObj<typeof FormikContainer>;
 
-const Template = (args) => (
+const Template = (args: ComponentProps<typeof FormikContainer>) => (
   <RelativeContainer $bgColor={colors.COOL_GREY_4} $paddingString={"20px 0"}>
     <FormWrapper>
       <FormikContainer {...args} />

package/src/components/Form/stories/Loading.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { RelativeContainer } from "../../../SharedStorybook/Layout";
 import { colors } from "../../../const/colors";
 import { FormWrapper } from "../FormStyles";
@@ -11,7 +12,7 @@ export default meta;
 
 type Story = StoryObj<typeof FormikContainer>;
 
-const Template = (args) => (
+const Template = (args: ComponentProps<typeof FormikContainer>) => (
   <RelativeContainer $bgColor={colors.COOL_GREY_4} $paddingString={"20px 0"}>
     <FormWrapper>
       <FormikContainer {...args} />

package/src/components/Form/stories/StickyFooter.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { useArgs } from "storybook/preview-api";
 import { CenterIt, GridContainer } from "../../../SharedStorybook/GridStyles";
 import { ButtonColorFamilyEnum } from "../../../sharedTypes/enums";
@@ -17,7 +18,7 @@ export default meta;
 
 type Story = StoryObj<typeof FormikContainer>;
 
-const ModalTemplate = (args) => {
+const ModalTemplate = (args: ComponentProps<typeof FormikContainer> & { show?: boolean; closeFunction?: () => void }) => {
   const [{ show }, updateArgs] = useArgs();
   let windowHeight = 0;
   if (typeof window !== "undefined" || process.env.STORYBOOK) {

package/src/components/HorizontalTabMenu/HorizontalTabMenu.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { useArgs } from "storybook/preview-api";
 import { ElementSpacing, Spacer } from "../../SharedStorybook/Layout";
 import { colors } from "../../const/colors";
@@ -20,7 +21,7 @@ export default meta;
 
 type Story = StoryObj<typeof HorizontalTabMenu>;
 
-const ScrollTemplate = (args) => {
+const ScrollTemplate = (args: ComponentProps<typeof HorizontalTabMenu>) => {
   return (
     <Spacer $width={350}>
       <HorizontalTabMenu {...args} />
@@ -28,7 +29,7 @@ const ScrollTemplate = (args) => {
   );
 };
 
-const AlertTemplate = (args) => {
+const AlertTemplate = (args: ComponentProps<typeof HorizontalTabMenu>) => {
   const [{ options }, updateArgs] = useArgs();
   return (
     <>

package/src/components/IconTile/IconTile.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { useArgs } from "storybook/preview-api";
 import { menuOptions } from "../../sharedMocks/options";
 import { ButtonColorFamilyEnum } from "../../sharedTypes/enums";
@@ -13,7 +14,7 @@ export default meta;
 
 type Story = StoryObj<typeof IconTile>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof IconTile>) => {
   const [{ active }, updateArgs] = useArgs();
   return <IconTile {...args} onButtonClick={() => updateArgs({ active: !active })} />;
 };

package/src/components/InlineCreditCardInput/InlineCreditCardInput.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { useArgs } from "storybook/preview-api";
 import { InlineCreditCardInput } from "./InlineCreditCardInput";
 
@@ -16,7 +17,7 @@ export default meta;
 
 type Story = StoryObj<typeof InlineCreditCardInput>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof InlineCreditCardInput>) => {
   const [{}, updateArgs] = useArgs();
   return <InlineCreditCardInput {...args} onValueChange={(newValue) => updateArgs({ value: newValue })} />;
 };

package/src/components/InlineCurrencyInput/InlineCurrencyInput.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { useArgs } from "storybook/preview-api";
 import { InlineCurrencyInput } from "./InlineCurrencyInput";
 
@@ -50,7 +51,7 @@ export default meta;
 
 type Story = StoryObj<typeof InlineCurrencyInput>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof InlineCurrencyInput>) => {
   const [{}, updateArgs] = useArgs();
   return (
     <InlineCurrencyInput

package/src/components/InlineEmailInput/InlineEmailInput.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { useArgs } from "storybook/preview-api";
 import { InlineEmailInput } from "./InlineEmailInput";
 
@@ -10,7 +11,7 @@ export default meta;
 
 type Story = StoryObj<typeof InlineEmailInput>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof InlineEmailInput>) => {
   const [{}, updateArgs] = useArgs();
   return <InlineEmailInput {...args} onValueChange={(newValue) => updateArgs({ value: newValue })} />;
 };

package/src/components/InlinePhoneInput/InlinePhoneInput.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { useArgs } from "storybook/preview-api";
 import { CountryMaskEnum } from "../../sharedTypes/enums";
 import { InlinePhoneInput } from "./InlinePhoneInput";
@@ -18,7 +19,7 @@ export default meta;
 
 type Story = StoryObj<typeof InlinePhoneInput>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof InlinePhoneInput>) => {
   const [{}, updateArgs] = useArgs();
   return <InlinePhoneInput {...args} onValueChange={(newValue) => updateArgs({ value: newValue })} />;
 };

package/src/components/InputButton/InputButton.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { Employee, Eye } from "../Icons";
 import { InlineInputButton } from "./InlineInputButton";
 import { InputButton } from "./InputButton";
@@ -9,8 +10,8 @@ export default meta;
 
 type Story = StoryObj<typeof InputButton>;
 
-const Template = (args) => <InputButton {...args} />;
-const InlineTemplate = (args) => <InlineInputButton {...args} />;
+const Template = (args: ComponentProps<typeof InputButton>) => <InputButton {...args} />;
+const InlineTemplate = (args: ComponentProps<typeof InlineInputButton>) => <InlineInputButton {...args} />;
 
 export const Default: Story = {
   render: Template.bind({}),

package/src/components/LogoSidebar/LogoSidebar.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { useArgs } from "storybook/preview-api";
 import { Configure, Email, No, Send } from "../Icons";
 import { LogoSidebar } from "./LogoSidebar";
@@ -20,7 +21,7 @@ export default meta;
 
 type Story = StoryObj<typeof LogoSidebar>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof LogoSidebar>) => {
   const [, updateArgs] = useArgs();
   const links = [
     {
@@ -59,7 +60,7 @@ const Template = (args) => {
   );
 };
 
-const StandardTemplate = (args) => {
+const StandardTemplate = (args: ComponentProps<typeof LogoSidebar>) => {
   return (
     <SidebarParent>
       <LogoSidebar {...args} />

package/src/components/Modal/Modal.stories.tsx

@@ -37,7 +37,7 @@ export default meta;
 
 type Story = StoryObj<FC<ModalStorybookType>>;
 
-const Template = (args) => {
+const Template = (args: ModalStorybookType) => {
   const [{ show }, updateArgs] = useArgs();
   return (
     <GridContainer>
@@ -66,7 +66,7 @@ const Template = (args) => {
   );
 };
 
-const FocusTemplate = (args) => {
+const FocusTemplate = (args: ModalStorybookType) => {
   const [{ show }, updateArgs] = useArgs();
   const focusRef = useRef(null);
   return (

package/src/components/PasswordInput/PasswordInput.test.tsx

@@ -7,7 +7,7 @@ const ThemedPasswordInput = withTheme(PasswordInput);
 const ThemedInlinePasswordInput = withTheme(InlinePasswordInput);
 
 // Since we have so many tests for the password messages, this will prevent a small amount of duplication
-const testPasswordValidation = async (password, expectedMessage) => {
+const testPasswordValidation = async (password: string, expectedMessage: string) => {
   render(<ThemedPasswordInput value={password} />);
   await waitFor(() => expect(screen.getByText(expectedMessage)).toBeInTheDocument());
 };

package/src/components/PhoneInput/PhoneInput.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { useArgs } from "storybook/preview-api";
 import { ComponentLabel } from "../../SharedStorybook/ComponentLabel";
 import { PhoneInput } from "./PhoneInput";
@@ -11,7 +12,7 @@ export default meta;
 
 type Story = StoryObj<typeof PhoneInput>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof PhoneInput>) => {
   const [{}, updateArgs] = useArgs();
   return (
     <PhoneInput

package/src/components/RadioGroup/RadioGroup.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { useArgs } from "storybook/preview-api";
 import { radioExamples, radioStateExamples } from "../../sharedMocks/options";
 import { RadioGroup } from "./RadioGroup";
@@ -13,7 +14,7 @@ export default meta;
 
 type Story = StoryObj<typeof RadioGroup>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof RadioGroup>) => {
   const [, updateArgs] = useArgs();
   return (
     <RadioGroup

package/src/components/RadioItem/RadioItem.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { useArgs } from "storybook/preview-api";
 import { FlexContainer, IconContainer } from "../../SharedStorybook/Layout";
 import { Note } from "../../SharedStorybook/Notes";
@@ -15,13 +16,13 @@ export default meta;
 
 type Story = StoryObj<typeof RadioItem>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof RadioItem>) => {
   const [{ active }, updateArgs] = useArgs();
   return (
     <RadioItem
       {...args}
       onRadioClick={(item) => {
-        args.onRadioClick(item);
+        args.onRadioClick?.(item);
         updateArgs({ active: !active });
       }}
       active={active}
@@ -29,14 +30,14 @@ const Template = (args) => {
   );
 };
 
-const LongLabelTemplate = (args) => {
+const LongLabelTemplate = (args: ComponentProps<typeof RadioItem>) => {
   const [{ active }, updateArgs] = useArgs();
   return (
     <FlexContainer $flexFlow="column nowrap" $gap={100}>
       <RadioItem
         {...args}
         onRadioClick={(item) => {
-          args.onRadioClick(item);
+          args.onRadioClick?.(item);
           updateArgs({ active: !active });
         }}
         active={active}

package/src/components/Select/Select.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { useArgs } from "storybook/preview-api";
 import { ComponentLabel, SmallComponentLabel } from "../../SharedStorybook/ComponentLabel";
 import { Spacer } from "../../SharedStorybook/Layout";
@@ -20,7 +21,7 @@ export default meta;
 
 type Story = StoryObj<typeof Select>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof Select>) => {
   return (
     <Background $bgColor={colors.WHITE}>
       <CenterContainer $width={250}>
@@ -30,7 +31,7 @@ const Template = (args) => {
   );
 };
 
-const UndefinedTemplate = (args) => {
+const UndefinedTemplate = (args: ComponentProps<typeof Select>) => {
   const [{ toggleOptionsValue }, updateArgs] = useArgs();
   const mockOptions = [
     { id: "2023", label: "2023" },

package/src/components/SelectSearch/SelectSearch.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { useArgs } from "storybook/preview-api";
 import { Align, Spacer } from "../../SharedStorybook/Layout";
 import { SelectSearch } from "./SelectSearch";
@@ -13,7 +14,7 @@ export default meta;
 
 type Story = StoryObj<typeof SelectSearch>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof SelectSearch>) => {
   const [{ value }, updateArgs] = useArgs();
   return (
     <Spacer $topMargin={50} $width={400}>

package/src/components/SelectSearch/SelectSearch.test.tsx

@@ -94,7 +94,7 @@ describe("SelectSearch", () => {
   });
 
   test("onEnter is called on enter and returns the value and option", async () => {
-    let response;
+    let response: SelectSearchResponseType | undefined;
     const onEnter = (responseObj: SelectSearchResponseType) => {
       response = responseObj;
     };
@@ -106,13 +106,13 @@ describe("SelectSearch", () => {
     const input = screen.getByRole("textbox");
     await userEvent.type(input, "{enter}");
 
-    expect(response.value).toEqual(value);
-    expect(response.option.id).toEqual(defaultOption.id);
-    expect(response.option.label).toEqual(defaultOption.label);
+    expect(response!.value).toEqual(value);
+    expect(response!.option.id).toEqual(defaultOption.id);
+    expect(response!.option.label).toEqual(defaultOption.label);
   });
 
   test("onOptionSelect is called on option select and returns the option", async () => {
-    let response;
+    let response: ChildlessOptionType | undefined;
     const onOptionSelect = (responseObj: ChildlessOptionType) => {
       response = responseObj;
     };
@@ -128,12 +128,12 @@ describe("SelectSearch", () => {
     const option2 = screen.getByText(targetOption.label);
     await userEvent.click(option2);
 
-    expect(response.id).toEqual(targetOption.id);
-    expect(response.label).toEqual(targetOption.label);
+    expect(response!.id).toEqual(targetOption.id);
+    expect(response!.label).toEqual(targetOption.label);
   });
 
   test("onInputBlur is called on blur and returns the value and option", async () => {
-    let response;
+    let response: SelectSearchResponseType | undefined;
     const onInputBlur = (responseObj: SelectSearchResponseType) => {
       response = responseObj;
     };
@@ -151,9 +151,9 @@ describe("SelectSearch", () => {
     const distractingText = screen.getByText(clickoutText);
     await userEvent.click(distractingText);
 
-    expect(response.value).toEqual(value);
-    expect(response.option.label).toEqual(defaultOption.label);
-    expect(response.option.id).toEqual(defaultOption.id);
+    expect(response!.value).toEqual(value);
+    expect(response!.option.label).toEqual(defaultOption.label);
+    expect(response!.option.id).toEqual(defaultOption.id);
   });
 
   test("onInputFocus is called on focus", async () => {

package/src/components/SnackContainer/DialogHandler.stories.tsx

@@ -15,11 +15,11 @@ export default meta;
 
 type Story = StoryObj<typeof SnackContainer>;
 
-const SnackBarTemplate = (args) => <SnackbarExample {...args} />;
-const SnackDialogTemplate = (args) => <SnackDialogExample {...args} />;
-const ToastTemplate = (args) => <ToastExample {...args} />;
-const MultipleToastsTemplate = (args) => <MultipleToastsExample {...args} />;
-const DuplicateIdTemplate = (args) => <DuplicateIdExample {...args} />;
+const SnackBarTemplate = () => <SnackbarExample />;
+const SnackDialogTemplate = () => <SnackDialogExample />;
+const ToastTemplate = () => <ToastExample />;
+const MultipleToastsTemplate = () => <MultipleToastsExample />;
+const DuplicateIdTemplate = () => <DuplicateIdExample />;
 
 /** 
  * `Snackbar` are used to confirm an action of Low-Medium Risk . They linger on screen longer than a Toast notification and are optionally interactive.

package/src/components/SsnInput/SsnInput.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { useArgs } from "storybook/preview-api";
 import { ComponentLabelFC } from "../../SharedStorybook/ComponentLabel";
 import { InlineSsnInput } from "./InlineSsnInput";
@@ -12,7 +13,7 @@ export default meta;
 
 type Story = StoryObj<typeof SsnInput>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof SsnInput>) => {
   const [{}, updateArgs] = useArgs();
   return (
     <SsnInput
@@ -24,7 +25,7 @@ const Template = (args) => {
   );
 };
 
-const InlineTemplate = (args) => {
+const InlineTemplate = (args: ComponentProps<typeof InlineSsnInput>) => {
   const [{}, updateArgs] = useArgs();
   return (
     <InlineSsnInput

package/src/components/Stepper/Stepper.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { useArgs } from "storybook/preview-api";
 import { ElementSpacing, Spacer } from "../../SharedStorybook/Layout";
 import ClipboardImage from "../../assets/clipboard_pattern.png";
@@ -20,12 +21,12 @@ export default meta;
 
 type Story = StoryObj<typeof Stepper>;
 
-const ClickableTemplate = (args) => {
+const ClickableTemplate = (args: ComponentProps<typeof Stepper>) => {
   const [{ activeId }, updateArgs] = useArgs();
   return <Stepper {...args} activeId={activeId} stepClick={(id) => updateArgs({ activeId: id })} />;
 };
 
-const ControlledTemplate = (args) => {
+const ControlledTemplate = (args: ComponentProps<typeof Stepper>) => {
   const [{ activeId, completedSteps }, updateArgs] = useArgs();
   return (
     <div>

package/src/components/TabModal/TabModal.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { useArgs } from "storybook/preview-api";
 import { ContainsFixed } from "../../SharedStorybook/DocStyles";
 import { SecondaryButton } from "../Button";
@@ -21,12 +22,12 @@ export default meta;
 
 type Story = StoryObj<typeof TabModal>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof TabModal>) => {
   const [, updateArgs] = useArgs();
   return <TabModal {...args} closeFunction={() => updateArgs({ show: false })} />;
 };
 
-const StepperTemplate = (args) => {
+const StepperTemplate = (args: ComponentProps<typeof TabModal>) => {
   const [{ show }, updateArgs] = useArgs();
   return (
     <>
@@ -36,7 +37,7 @@ const StepperTemplate = (args) => {
   );
 };
 
-const ButtonTemplate = (args) => {
+const ButtonTemplate = (args: ComponentProps<typeof TabModal>) => {
   const [{ show }, updateArgs] = useArgs();
   return (
     <>
@@ -46,7 +47,7 @@ const ButtonTemplate = (args) => {
   );
 };
 
-const DelayedLoadingTemplate = (args) => {
+const DelayedLoadingTemplate = (args: ComponentProps<typeof TabModal>) => {
   const [{ show }, updateArgs] = useArgs();
   return (
     <>

package/src/components/Table/stories/Empty.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { useState } from "react";
+import { ComponentProps, useState } from "react";
 import { Spacer } from "../../../SharedStorybook/Layout";
 import { colors } from "../../../const/colors";
 import { BodyMEmphasis, HeadingH3 } from "../../../const/text";
@@ -26,7 +26,7 @@ export default meta;
 
 type Story = StoryObj<typeof Table>;
 
-const LoadDataTemplate = (args) => {
+const LoadDataTemplate = (args: ComponentProps<typeof Table> & { rowToggle?: boolean }) => {
   const [originalRows, setOriginalRows] = useState(true);
   const [originalColumns, setOriginalColumns] = useState(true);
   return (

package/src/components/Table/stories/Filters.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { useArgs } from "storybook/preview-api";
 import { Table } from "../Table";
 import { filterColumns } from "../mocks/mockColumns";
@@ -21,7 +22,7 @@ export default meta;
 
 type Story = StoryObj<typeof Table>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof Table>) => {
   const [{ activeFilters }, updateArgs] = useArgs();
   // const [activeFilters, setActiveFilters] = useState({});
   return (

package/src/components/Table/stories/Sorting.stories.tsx

@@ -4,6 +4,7 @@ import { Table } from "../Table";
 import { sortRows } from "../helpers";
 import { sortingColumns } from "../mocks/mockColumns";
 import { sortingRows } from "../mocks/mockRows";
+import { ColumnType } from "../types";
 import { TableArgTypes } from "./types";
 
 /**
@@ -57,7 +58,7 @@ It is important that you manage `fetching` if the parent sorting requires any so
 export const ParentControlledSort: Story = {
   render: (args) => {
     const [{ parentSortAscending, externalSortColumnId }, updateArgs] = useArgs();
-    const clickHeader = (column) => {
+    const clickHeader = (column: ColumnType) => {
       const { cellId, reverseSort } = column;
       const ascending = externalSortColumnId === cellId && !parentSortAscending;
       const updatedRows = sortRows({ rows: sortingRows, ascending, cellId, reverseSort });

package/src/components/Textarea/Textarea.stories.tsx

@@ -1,6 +1,7 @@
 import { InputTheme } from "../../sharedTypes/enums";
 
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { useArgs } from "storybook/preview-api";
 import { ComponentLabel } from "../../SharedStorybook/ComponentLabel";
 import { InlineTextarea } from "./InlineTextarea";
@@ -18,26 +19,26 @@ export default meta;
 
 type Story = StoryObj<typeof Textarea>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof Textarea>) => {
   const [{}, updateArgs] = useArgs();
   return (
     <Textarea
       {...args}
       onValueChange={(changingValue) => {
-        args.onValueChange(changingValue);
+        args.onValueChange?.(changingValue);
         updateArgs({ value: changingValue });
       }}
     />
   );
 };
 
-const InlineTemplate = (args) => {
+const InlineTemplate = (args: ComponentProps<typeof InlineTextarea>) => {
   const [{ value }, updateArgs] = useArgs();
   return (
     <InlineTextarea
       {...args}
       onValueChange={(changingValue) => {
-        args.onValueChange(changingValue);
+        args.onValueChange?.(changingValue);
         updateArgs({ value: changingValue });
       }}
       value={value}

package/src/components/ToggleButtons/ToggleButtons.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { useArgs } from "storybook/preview-api";
 import { colors } from "../../const/colors";
 import { ButtonColorFamilyEnum } from "../../sharedTypes/enums";
@@ -15,7 +16,7 @@ export default meta;
 
 type Story = StoryObj<typeof ToggleButtons>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof ToggleButtons>) => {
   const [{}, updateArgs] = useArgs();
   return <ToggleButtons {...args} onToggle={({ id }) => updateArgs({ activeId: id })} />;
 };

package/src/components/ToggleGroup/ToggleGroup.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { useArgs } from "storybook/preview-api";
 import { addOrRemoveString } from "../../helpers/arrays";
 import {
@@ -19,7 +20,7 @@ export default meta;
 
 type Story = StoryObj<typeof ToggleGroup>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof ToggleGroup>) => {
   const [{ activeValues }, updateArgs] = useArgs();
   return (
     <ToggleGroup