@cerebruminc/cerebellum 20.0.2 → 20.0.3

package/src/components/Form/fields/DatePickerField/DatePickerField.stories.tsx

@@ -1,7 +1,8 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { FocusEvent } from "react";
 import { FormWrapper } from "../../FormStyles";
 import { FormikContainer } from "../../FormikContainer";
-import { FormFieldTypeEnum } from "../../types";
+import { FormFieldTypeEnum, FormStorybookType } from "../../types";
 
 /**
  * `DatePicker` is an input for entering dates. You can type in it, or click to use a picker.
@@ -13,7 +14,7 @@ export default meta;
 
 type Story = StoryObj<typeof FormikContainer>;
 
-const Template = (args) => (
+const Template = (args: FormStorybookType) => (
   <FormWrapper $maxWidth={args.maxWidth}>
     <FormikContainer {...args} />
   </FormWrapper>
@@ -31,8 +32,8 @@ export const DatePicker: Story = {
         // today
         initialValue: Math.floor(new Date().valueOf() / 1000),
         options: {
-          onChange: (returnedDate) => {
-            const dateable = new Date(returnedDate * 1000);
+          onChange: (returnedDate: number | null) => {
+            const dateable = new Date((returnedDate ?? 0) * 1000);
             console.log("onChange", dateable);
           },
           dateFormat: "MM / dd / yyyy",
@@ -63,9 +64,9 @@ export const DatePickerOptions: Story = {
           maxDateUnix: 1843495645,
           minDateUnix: 1654092448,
           onEnter: () => console.log("onEnter - date picker"),
-          onInputBlur: (event) => console.log("onInputBlur - date picker", event),
+          onInputBlur: (event: FocusEvent<HTMLInputElement>) => console.log("onInputBlur - date picker", event),
           onInputFocus: () => console.log("onInputFocus - date picker"),
-          onChange: (event) => console.log("onChange - date picker", event),
+          onChange: (event: number | null) => console.log("onChange - date picker", event),
           placeholder: "Type something",
           showIcon: true,
           yearOptionBegin: 2022,

package/src/components/Form/fields/DescriptiveDropdownInputField/DescriptiveDropdownInputField.stories.tsx

@@ -4,7 +4,7 @@ import { descriptiveOptions } from "../../../DescriptiveSwitchMenu/mocks/options
 import { User } from "../../../Icons";
 import { FormWrapper } from "../../FormStyles";
 import { FormikContainer } from "../../FormikContainer";
-import { FormFieldTypeEnum } from "../../types";
+import { FormFieldTypeEnum, FormStorybookType } from "../../types";
 
 /**
  * `DescriptiveDropdownInput` is a select component that looks like a traditional input. It features a dropdown menu that has room for descriptive text along with the selection.
@@ -16,7 +16,7 @@ export default meta;
 
 type Story = StoryObj<typeof FormikContainer>;
 
-const Template = (args) => (
+const Template = (args: FormStorybookType) => (
   <FormWrapper $maxWidth={args.maxWidth}>
     <FormikContainer {...args} />
   </FormWrapper>

package/src/components/Form/fields/EmailField/EmailField.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { FormWrapper } from "../../FormStyles";
 import { FormikContainer } from "../../FormikContainer";
-import { FormFieldTypeEnum } from "../../types";
+import { FormFieldTypeEnum, FormStorybookType } from "../../types";
 
 /** `Email` is a text input configured for emails. */
 const meta: Meta<typeof FormikContainer> = { component: FormikContainer, title: "organisms/Form/Fields/Email" };
@@ -9,7 +9,7 @@ export default meta;
 
 type Story = StoryObj<typeof FormikContainer>;
 
-const Template = (args) => (
+const Template = (args: FormStorybookType) => (
   <FormWrapper $maxWidth={args.maxWidth}>
     <FormikContainer {...args} />
   </FormWrapper>

package/src/components/Form/fields/HiddenField/HiddenField.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { FormWrapper } from "../../FormStyles";
 import { FormikContainer } from "../../FormikContainer";
-import { FormFieldTypeEnum } from "../../types";
+import { FormFieldTypeEnum, FormStorybookType } from "../../types";
 
 /** `Hidden` is a hidden text input. */
 const meta: Meta<typeof FormikContainer> = { component: FormikContainer, title: "organisms/Form/Fields/Hidden" };
@@ -9,7 +9,7 @@ export default meta;
 
 type Story = StoryObj<typeof FormikContainer>;
 
-const Template = (args) => (
+const Template = (args: FormStorybookType) => (
   <FormWrapper $maxWidth={args.maxWidth}>
     <FormikContainer {...args} />
   </FormWrapper>

package/src/components/Form/fields/ImagePickerField/ImagePickerField.stories.tsx

@@ -1,10 +1,11 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ChangeEvent } from "react";
 import { ButtonColorFamilyEnum } from "../../../../sharedTypes/enums";
 import { ButtonVariantEnum } from "../../../Button";
 import { AltIdFront, User } from "../../../Icons";
 import { FormWrapper } from "../../FormStyles";
 import { FormikContainer } from "../../FormikContainer";
-import { FormFieldTypeEnum } from "../../types";
+import { FormFieldTypeEnum, FormStorybookType } from "../../types";
 
 /**
  * `ImagePicker` is an image uploader component. It will display the selected image after the user chooses one.
@@ -14,7 +15,7 @@ export default meta;
 
 type Story = StoryObj<typeof FormikContainer>;
 
-const Template = (args) => (
+const Template = (args: FormStorybookType) => (
   <FormWrapper $maxWidth={args.maxWidth}>
     <FormikContainer {...args} />
   </FormWrapper>
@@ -59,7 +60,7 @@ export const ImagePickerOptions: Story = {
           editButtonColorFamily: ButtonColorFamilyEnum.Red,
           helperText: "You can configure the options, like 'helperText', in field[n].options",
           maxFileSize: 20000,
-          onChange: (event) => console.log("onChange - text", event),
+          onChange: (event: ChangeEvent<HTMLInputElement>) => console.log("onChange - text", event),
           placeholderInitials: "Type something",
           deleteButton: true,
         },
@@ -83,7 +84,7 @@ export const MoreImagePickerOptions: Story = {
           height: 280,
           pickerWidth: 320,
           helperText: "A big one",
-          onChange: (event) => console.log("onChange - text", event),
+          onChange: (event: ChangeEvent<HTMLInputElement>) => console.log("onChange - text", event),
           actionText: "We can do things here",
           PlaceholderIcon: User,
           actionButtonVariant: ButtonVariantEnum.Secondary,
@@ -113,7 +114,7 @@ export const TwoButtons: Story = {
           disableClearOnImageClick: true,
           height: 263,
           helperText: "There's room for the helper text now!",
-          onChange: (event) => console.log("onChange - text", event),
+          onChange: (event: ChangeEvent<HTMLInputElement>) => console.log("onChange - text", event),
           onPickerClick: () => console.log("Custom onClick"),
           pickerWidth: 320,
           PlaceholderIcon: () => <AltIdFront fill={"#E5EAF2"} />,

package/src/components/Form/fields/MultiSelectField/MultiSelectField.stories.tsx

@@ -3,7 +3,7 @@ import { Calendar } from "../../../Icons";
 import { FormWrapper } from "../../FormStyles";
 import { FormikContainer } from "../../FormikContainer";
 import { options } from "../../mocks/options";
-import { FormFieldTypeEnum } from "../../types";
+import { FormFieldTypeEnum, FormStorybookType, SelectOptionType } from "../../types";
 
 /** 
  * `MultiSelect` is a select component that looks like a traditional input. It can have multiple selections at once, that appear as tags in the input.
@@ -15,7 +15,7 @@ export default meta;
 
 type Story = StoryObj<typeof FormikContainer>;
 
-const Template = (args) => (
+const Template = (args: FormStorybookType) => (
   <FormWrapper $maxWidth={args.maxWidth}>
     <FormikContainer {...args} />
   </FormWrapper>
@@ -59,7 +59,7 @@ export const MultiSelectOptions: Story = {
           selectOptions: options,
           clearAll: true,
           LeadingIcon: Calendar,
-          onSelect: (event) => console.log("onSelect", event),
+          onSelect: (event: SelectOptionType | undefined) => console.log("onSelect", event),
           helperText: "This is the 'helperText', It's okay if this is a bit longer",
           horizontal: true,
           placeholder: "Select an option",

package/src/components/Form/fields/NationalitySelectField/NationalitySelectField.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { FormWrapper } from "../../FormStyles";
 import { FormikContainer } from "../../FormikContainer";
-import { FormFieldTypeEnum } from "../../types";
+import { FormFieldTypeEnum, FormStorybookType, SelectOptionType } from "../../types";
 
 /**
  * `NationalitySelect` is a select component preconfigured to support all countries.
@@ -18,7 +18,7 @@ export default meta;
 
 type Story = StoryObj<typeof FormikContainer>;
 
-const Template = (args) => (
+const Template = (args: FormStorybookType) => (
   <FormWrapper $maxWidth={args.maxWidth}>
     <FormikContainer {...args} />
   </FormWrapper>
@@ -56,7 +56,7 @@ export const NationalitySelectOptions: Story = {
         width: 400,
         initialValue: "us",
         options: {
-          onSelect: (event) => console.log("onSelect", event),
+          onSelect: (event: SelectOptionType | undefined) => console.log("onSelect", event),
           helperText: "This is the 'helperText', It's okay if this is a bit longer",
           innerSearch: true,
           label: "NationalitySelect with options",

package/src/components/Form/fields/NumberField/NumberField.stories.tsx

@@ -1,8 +1,9 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { FocusEvent } from "react";
 import { Calendar } from "../../../Icons";
 import { FormWrapper } from "../../FormStyles";
 import { FormikContainer } from "../../FormikContainer";
-import { FormFieldTypeEnum } from "../../types";
+import { FormFieldTypeEnum, FormStorybookType } from "../../types";
 
 /**
  * `Number` is an input configured for numbers. Please note that it uses `inputMode="numeric"` and `pattern="[0-9]*"` to do this, so it will return a string.
@@ -12,7 +13,7 @@ export default meta;
 
 type Story = StoryObj<typeof FormikContainer>;
 
-const Template = (args) => (
+const Template = (args: FormStorybookType) => (
   <FormWrapper $maxWidth={args.maxWidth}>
     <FormikContainer {...args} />
   </FormWrapper>
@@ -49,9 +50,9 @@ export const NumberOptions: Story = {
           helperText: "You can configure the options, like 'helperText', in field[n].options",
           LeadingIcon: Calendar,
           onEnter: () => console.log("onEnter - phone"),
-          onInputBlur: (event) => console.log("onInputBlur - phone", event),
+          onInputBlur: (event: FocusEvent<HTMLInputElement>) => console.log("onInputBlur - phone", event),
           onInputFocus: () => console.log("onInputFocus - phone"),
-          onChange: (event) => console.log("onChange - phone", event),
+          onChange: (event: { target: { value: string; name?: string } }) => console.log("onChange - phone", event),
           placeholder: "How many pets do you have?",
         },
       },

package/src/components/Form/fields/PasswordField/PasswordField.stories.tsx

@@ -1,7 +1,8 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { FocusEvent } from "react";
 import { FormWrapper } from "../../FormStyles";
 import { FormikContainer } from "../../FormikContainer";
-import { FormFieldTypeEnum } from "../../types";
+import { FormFieldTypeEnum, FormStorybookType } from "../../types";
 
 /**
  * `Password` is an input configured for passwords. It toggles back and forth between `"password"` and `"text"` inputs, based on user interaction.
@@ -13,7 +14,7 @@ export default meta;
 
 type Story = StoryObj<typeof FormikContainer>;
 
-const Template = (args) => (
+const Template = (args: FormStorybookType) => (
   <FormWrapper $maxWidth={args.maxWidth}>
     <FormikContainer {...args} />
   </FormWrapper>
@@ -52,9 +53,9 @@ export const PasswordOptions: Story = {
           clearButton: true,
           helperText: "You can configure the options, like 'helperText', in field[n].options",
           onEnter: () => console.log("onEnter - phone"),
-          onInputBlur: (event) => console.log("onInputBlur - phone", event),
+          onInputBlur: (event: FocusEvent<HTMLInputElement>) => console.log("onInputBlur - phone", event),
           onInputFocus: () => console.log("onInputFocus - phone"),
-          onChange: (event) => console.log("onChange - phone", event),
+          onChange: (event: { target: { value: string; name?: string } }) => console.log("onChange - phone", event),
           placeholder: "Can I haz your password?",
           showIcon: true,
         },

package/src/components/Form/fields/PhoneField/PhoneField.stories.tsx

@@ -1,8 +1,9 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { FocusEvent } from "react";
 import { CountryMaskEnum } from "../../../../sharedTypes/enums";
 import { FormWrapper } from "../../FormStyles";
 import { FormikContainer } from "../../FormikContainer";
-import { FormFieldTypeEnum } from "../../types";
+import { FormFieldTypeEnum, FormStorybookType } from "../../types";
 
 /**
  * `Phone` will validate for, and format the display of phone numbers. It is configured to accept a US based phone number by default, but you can adjust this by passing a different function to `options.mask`.
@@ -12,7 +13,7 @@ export default meta;
 
 type Story = StoryObj<typeof FormikContainer>;
 
-const Template = (args) => (
+const Template = (args: FormStorybookType) => (
   <FormWrapper $maxWidth={args.maxWidth}>
     <FormikContainer {...args} />
   </FormWrapper>
@@ -51,9 +52,9 @@ export const PhoneOptions: Story = {
           clearButton: true,
           helperText: "You can configure the options, like 'helperText', in field[n].options",
           onEnter: () => console.log("onEnter - phone"),
-          onInputBlur: (event) => console.log("onInputBlur - phone", event),
+          onInputBlur: (event: FocusEvent<HTMLInputElement>) => console.log("onInputBlur - phone", event),
           onInputFocus: () => console.log("onInputFocus - phone"),
-          onChange: (event) => console.log("onChange - phone", event),
+          onChange: (event: { target: { value: string; name?: string } }) => console.log("onChange - phone", event),
           placeholder: "Can I haz your digits?",
           region: CountryMaskEnum.United_States,
           showIcon: true,

package/src/components/Form/fields/RadioGroupField/RadioGroupField.stories.tsx

@@ -1,8 +1,9 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ChangeEvent } from "react";
 import { FormWrapper } from "../../FormStyles";
 import { FormikContainer } from "../../FormikContainer";
 import { switches } from "../../mocks/switches";
-import { FormFieldTypeEnum } from "../../types";
+import { FormFieldTypeEnum, FormStorybookType } from "../../types";
 
 /**
  * `RadioGroup` is a group of radio toggles with labels.
@@ -14,7 +15,7 @@ export default meta;
 
 type Story = StoryObj<typeof FormikContainer>;
 
-const Template = (args) => (
+const Template = (args: FormStorybookType) => (
   <FormWrapper $maxWidth={args.maxWidth}>
     <FormikContainer {...args} />
   </FormWrapper>
@@ -53,7 +54,7 @@ export const RadioGroupOptions: Story = {
         width: 400,
         options: {
           radios: switches,
-          onRadioClick: (event) => console.log("onRadioClick", event),
+          onRadioClick: (event: ChangeEvent<HTMLInputElement>) => console.log("onRadioClick", event),
           helperText: "This is the 'helperText', It's okay if this is a bit longer",
           horizontal: true,
           label: "RadioGroup with options",

package/src/components/Form/fields/RemovableField/RemovableField.stories.tsx

@@ -5,7 +5,7 @@ import { descriptiveOptions } from "../../../DescriptiveSwitchMenu/mocks/options
 import { FormWrapper } from "../../FormStyles";
 import { FormikContainer } from "../../FormikContainer";
 import { options } from "../../mocks/options";
-import { FormFieldTypeEnum, RemovableFieldTypeEnum } from "../../types";
+import { FormFieldTypeEnum, FormStorybookType, RemovableFieldTypeEnum } from "../../types";
 
 /** `Removable` initially displays an add button, then a single input if that button is clicked. This input can be removed once it's added. The button is removed once the input is present - it can only add one input.
  */
@@ -14,7 +14,7 @@ export default meta;
 
 type Story = StoryObj<typeof FormikContainer>;
 
-const Template = (args) => (
+const Template = (args: FormStorybookType) => (
   <FormWrapper $maxWidth={args.maxWidth}>
     <FormikContainer {...args} />
   </FormWrapper>

package/src/components/Form/fields/SectionHeader/SectionHeader.stories.tsx

@@ -2,7 +2,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import { FormWrapper } from "../../FormStyles";
 import { FormikContainer } from "../../FormikContainer";
 import { multiTwo, settingsForm } from "../../mocks/fields";
-import { FormFieldTypeEnum } from "../../types";
+import { FormFieldTypeEnum, FormStorybookType } from "../../types";
 
 /**
  * `SectionHeader` can be used to visually break your form up into different sections. It includes multiple text options and a divider.
@@ -12,7 +12,7 @@ export default meta;
 
 type Story = StoryObj<typeof FormikContainer>;
 
-const Template = (args) => (
+const Template = (args: FormStorybookType) => (
   <FormWrapper $maxWidth={args.maxWidth}>
     <FormikContainer {...args} />
   </FormWrapper>

package/src/components/Form/fields/SelectField/SelectField.stories.tsx

@@ -2,7 +2,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import { FormWrapper } from "../../FormStyles";
 import { FormikContainer } from "../../FormikContainer";
 import { options } from "../../mocks/options";
-import { FormFieldTypeEnum } from "../../types";
+import { FormFieldTypeEnum, FormStorybookType, SelectOptionType } from "../../types";
 
 /**
  * `Select` is a select component that looks like a traditional input.
@@ -14,7 +14,7 @@ export default meta;
 
 type Story = StoryObj<typeof FormikContainer>;
 
-const Template = (args) => (
+const Template = (args: FormStorybookType) => (
   <FormWrapper $maxWidth={args.maxWidth}>
     <FormikContainer {...args} />
   </FormWrapper>
@@ -57,7 +57,7 @@ export const SelectOptions: Story = {
         width: 400,
         options: {
           selectOptions: options,
-          onSelect: (event) => console.log("onSelect", event),
+          onSelect: (event: SelectOptionType | undefined) => console.log("onSelect", event),
           helperText: "This is the 'helperText', It's okay if this is a bit longer",
           horizontal: true,
           placeholder: "Select an option",

package/src/components/Form/fields/SocialSecurityField/SocialSecurityField.stories.tsx

@@ -1,7 +1,8 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { FocusEvent } from "react";
 import { FormWrapper } from "../../FormStyles";
 import { FormikContainer } from "../../FormikContainer";
-import { FormFieldTypeEnum } from "../../types";
+import { FormFieldTypeEnum, FormStorybookType } from "../../types";
 
 /** `SocialSecurity` is formatted specifically for United States Social Security Numbers. */
 const meta: Meta<typeof FormikContainer> = { component: FormikContainer, title: "organisms/Form/Fields/SocialSecurity" };
@@ -9,7 +10,7 @@ export default meta;
 
 type Story = StoryObj<typeof FormikContainer>;
 
-const Template = (args) => (
+const Template = (args: FormStorybookType) => (
   <FormWrapper $maxWidth={args.maxWidth}>
     <FormikContainer {...args} />
   </FormWrapper>
@@ -48,9 +49,9 @@ export const SocialSecurityOptions: Story = {
           clearButton: true,
           helperText: "You can configure the options, like 'helperText', in field[n].options",
           onEnter: () => console.log("onEnter - text"),
-          onInputBlur: (event) => console.log("onInputBlur - text", event),
+          onInputBlur: (event: FocusEvent<HTMLInputElement>) => console.log("onInputBlur - text", event),
           onInputFocus: () => console.log("onInputFocus - text"),
-          onChange: (event) => console.log("onChange - text", event),
+          onChange: (event: { target: { value: string; name?: string } }) => console.log("onChange - text", event),
           placeholder: "SSN...",
           showIcon: true,
         },

package/src/components/Form/fields/SplitLineField/SplitLineField.stories.tsx

@@ -16,7 +16,7 @@ export default meta;
 type Story = StoryObj<FormStorybookType>;
 
 // This has a slider to set the width of the container, since Storybook allows the contents to set the width.
-const Template = (args) => {
+const Template = (args: FormStorybookType) => {
   const [width, setWidth] = React.useState(args.width || 800);
 
   return (

package/src/components/Form/fields/StateSelectField/StateSelectField.stories.tsx

@@ -2,7 +2,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import { FormWrapper } from "../../FormStyles";
 import { FormikContainer } from "../../FormikContainer";
 import { options } from "../../mocks/options";
-import { FormFieldTypeEnum } from "../../types";
+import { FormFieldTypeEnum, FormStorybookType, SelectOptionType } from "../../types";
 
 /** `StateSelect` is a select component preconfigured to support US States. */
 const meta: Meta<typeof FormikContainer> = { component: FormikContainer, title: "organisms/Form/Fields/StateSelect" };
@@ -10,7 +10,7 @@ export default meta;
 
 type Story = StoryObj<typeof FormikContainer>;
 
-const Template = (args) => (
+const Template = (args: FormStorybookType) => (
   <FormWrapper $maxWidth={args.maxWidth}>
     <FormikContainer {...args} />
   </FormWrapper>
@@ -48,7 +48,7 @@ export const StateSelectOptions: Story = {
         options: {
           abbreviatedStateNames: true,
           selectOptions: options,
-          onSelect: (event) => console.log("onSelect", event),
+          onSelect: (event: SelectOptionType | undefined) => console.log("onSelect", event),
           helperText: "This is the 'helperText', It's okay if this is a bit longer",
           innerSearch: true,
           placeholder: "Select an option",

package/src/components/Form/fields/TextField/TextField.stories.tsx

@@ -1,8 +1,9 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { FocusEvent } from "react";
 import { Attachment } from "../../../Icons";
 import { FormWrapper } from "../../FormStyles";
 import { FormikContainer } from "../../FormikContainer";
-import { FormFieldTypeEnum } from "../../types";
+import { FormFieldTypeEnum, FormStorybookType } from "../../types";
 
 /**
  * `Text` is the standard text input. It's the default input type, and is the most configurable.
@@ -14,7 +15,7 @@ export default meta;
 
 type Story = StoryObj<typeof FormikContainer>;
 
-const Template = (args) => (
+const Template = (args: FormStorybookType) => (
   <FormWrapper $maxWidth={args.maxWidth}>
     <FormikContainer {...args} />
   </FormWrapper>
@@ -50,9 +51,9 @@ export const TextOptions: Story = {
           helperText: "You can configure the options, like 'helperText', in field[n].options",
           LeadingIcon: Attachment,
           onEnter: () => console.log("onEnter - text"),
-          onInputBlur: (event) => console.log("onInputBlur - text", event),
+          onInputBlur: (event: FocusEvent<HTMLInputElement>) => console.log("onInputBlur - text", event),
           onInputFocus: () => console.log("onInputFocus - text"),
-          onChange: (event) => console.log("onChange - text", event),
+          onChange: (event: { target: { value: string; name?: string } }) => console.log("onChange - text", event),
           onTrailingIconClick: () => console.log("onTrailingIconClick - text"),
           placeholder: "Type something",
           type: "text",

package/src/components/Form/fields/TextareaField/TextareaField.stories.tsx

@@ -1,8 +1,9 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { FocusEvent } from "react";
 import { ResizeEnum } from "../../../Textarea";
 import { FormWrapper } from "../../FormStyles";
 import { FormikContainer } from "../../FormikContainer";
-import { FormFieldTypeEnum } from "../../types";
+import { FormFieldTypeEnum, FormStorybookType } from "../../types";
 
 /** `Textarea` is a textarea field. It includes most of the same options as a text field. */
 const meta: Meta<typeof FormikContainer> = { component: FormikContainer, title: "organisms/Form/Fields/Textarea" };
@@ -10,7 +11,7 @@ export default meta;
 
 type Story = StoryObj<typeof FormikContainer>;
 
-const Template = (args) => (
+const Template = (args: FormStorybookType) => (
   <FormWrapper $maxWidth={args.maxWidth}>
     <FormikContainer {...args} />
   </FormWrapper>
@@ -47,9 +48,9 @@ export const TextareaOptions: Story = {
           characterLimit: 200,
           helperText: "You can configure the options, like 'helperText', in field[n].options",
           inputHeight: 200,
-          onInputBlur: (event) => console.log("onInputBlur - phone", event),
+          onInputBlur: (event: FocusEvent<HTMLTextAreaElement>) => console.log("onInputBlur - phone", event),
           onInputFocus: () => console.log("onInputFocus - phone"),
-          onChange: (event) => console.log("onChange - phone", event),
+          onChange: (event: { target: { value: string; name?: string } }) => console.log("onChange - phone", event),
           placeholder: "Write something great, but only 200 characters...",
           resize: ResizeEnum.Horizontal,
         },

package/src/components/Form/fields/ToggleField/ToggleField.stories.tsx

@@ -1,7 +1,8 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ChangeEvent } from "react";
 import { FormWrapper } from "../../FormStyles";
 import { FormikContainer } from "../../FormikContainer";
-import { FormFieldTypeEnum } from "../../types";
+import { FormFieldTypeEnum, FormStorybookType } from "../../types";
 
 /** `Toggle` is a single toggle switch and label. For multiple toggles, use `ToggleGroup`. */
 const meta: Meta<typeof FormikContainer> = { component: FormikContainer, title: "organisms/Form/Fields/Toggle" };
@@ -9,7 +10,7 @@ export default meta;
 
 type Story = StoryObj<typeof FormikContainer>;
 
-const Template = (args) => (
+const Template = (args: FormStorybookType) => (
   <FormWrapper $maxWidth={args.maxWidth}>
     <FormikContainer {...args} />
   </FormWrapper>
@@ -42,7 +43,7 @@ export const ToggleOptions: Story = {
         type: FormFieldTypeEnum.Toggle,
         options: {
           center: true,
-          onToggleClick: (event) => console.log("onToggleClick", event),
+          onToggleClick: (event: ChangeEvent<HTMLInputElement>) => console.log("onToggleClick", event),
           text: "this is the 'text'",
         },
       },

package/src/components/Form/fields/ToggleGroupField/ToggleGroupField.stories.tsx

@@ -1,8 +1,9 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ChangeEvent } from "react";
 import { FormWrapper } from "../../FormStyles";
 import { FormikContainer } from "../../FormikContainer";
 import { switches } from "../../mocks/switches";
-import { FormFieldTypeEnum } from "../../types";
+import { FormFieldTypeEnum, FormStorybookType } from "../../types";
 
 /**
  * `ToggleGroup` is a group of toggles with labels. For a single toggle, use `Toggle`.
@@ -14,7 +15,7 @@ export default meta;
 
 type Story = StoryObj<typeof FormikContainer>;
 
-const Template = (args) => (
+const Template = (args: FormStorybookType) => (
   <FormWrapper $maxWidth={args.maxWidth}>
     <FormikContainer {...args} />
   </FormWrapper>
@@ -51,7 +52,7 @@ export const ToggleGroupOptions: Story = {
         required: true,
         options: {
           toggles: switches,
-          onToggleClick: (event) => console.log("onToggleClick", event),
+          onToggleClick: (event: ChangeEvent<HTMLInputElement>) => console.log("onToggleClick", event),
           helperText: "This is the 'helperText', It's okay if this is a bit longer",
           label: "ToggleGroup with options",
           name: "foobar",

package/src/components/Form/fields/ZipCodeField/ZipCodeField.stories.tsx

@@ -1,7 +1,8 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { FocusEvent } from "react";
 import { FormWrapper } from "../../FormStyles";
 import { FormikContainer } from "../../FormikContainer";
-import { FormFieldTypeEnum } from "../../types";
+import { FormFieldTypeEnum, FormStorybookType } from "../../types";
 
 /**
  * `ZipCode` is formatted specifically for United States postal codes. These can be either five or nine digits.
@@ -11,7 +12,7 @@ export default meta;
 
 type Story = StoryObj<typeof FormikContainer>;
 
-const Template = (args) => (
+const Template = (args: FormStorybookType) => (
   <FormWrapper $maxWidth={args.maxWidth}>
     <FormikContainer {...args} />
   </FormWrapper>
@@ -50,9 +51,9 @@ export const ZipCodeOptions: Story = {
           clearButton: true,
           helperText: "You can configure the options, like 'helperText', in field[n].options",
           onEnter: () => console.log("onEnter - text"),
-          onInputBlur: (event) => console.log("onInputBlur - text", event),
+          onInputBlur: (event: FocusEvent<HTMLInputElement>) => console.log("onInputBlur - text", event),
           onInputFocus: () => console.log("onInputFocus - text"),
-          onChange: (event) => console.log("onChange - text", event),
+          onChange: (event: { target: { value: string; name?: string } }) => console.log("onChange - text", event),
           placeholder: "xxxxx-xxxx",
         },
       },

package/src/components/Form/stories/ClearingForms.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 { ButtonColorFamilyEnum } from "../../../sharedTypes/enums";
@@ -19,7 +20,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} />