@cerebruminc/cerebellum 20.0.2 → 20.0.3

package/src/components/ToggleItem/ToggleItem.stories.tsx

@@ -2,6 +2,7 @@ import { colors } from "../../const/colors";
 import { Calendar } from "../Icons";
 
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { useArgs } from "storybook/preview-api";
 import { ToggleItem } from "./ToggleItem";
 import { IconBox, ComponentLabel as InlineLabel, StorybookLabel } from "./ToggleItemStyles";
@@ -15,13 +16,13 @@ export default meta;
 
 type Story = StoryObj<typeof ToggleItem>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof ToggleItem>) => {
   const [{ active }, updateArgs] = useArgs();
   return (
     <ToggleItem
       {...args}
       onToggle={(item) => {
-        args.onToggle(item);
+        args.onToggle?.(item);
         updateArgs({ active: !active });
       }}
     />

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { Fragment, useState } from "react";
+import { ComponentProps, Fragment, useState } from "react";
 import { ContainsFixed } from "../../SharedStorybook/DocStyles";
 import { colors } from "../../const/colors";
 import useMeasure from "../../hooks/useMeasure";
@@ -26,7 +26,7 @@ export default meta;
 
 type Story = StoryObj<typeof Tooltip>;
 
-const Example = (args) => {
+const Example = (args: ComponentProps<typeof Tooltip>) => {
   const [open, setOpen] = useState(false);
   const [buttonRef, position] = useMeasure(open);
   const hackedPosition = position;
@@ -45,9 +45,9 @@ const Example = (args) => {
     </>
   );
 };
-const ExampleTemplate = (args) => <Example {...args} />;
+const ExampleTemplate = (args: ComponentProps<typeof Tooltip>) => <Example {...args} />;
 
-const InteractiveTemplate = ({ ...args }) => <StoryTooltipExample {...args} />;
+const InteractiveTemplate = () => <StoryTooltipExample />;
 
 export const BasicExample: Story = {
   render: ExampleTemplate.bind({}),

package/src/components/TooltipLabel/TooltipLabel.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { TooltipFCText } from "../../SharedStorybook/ComponentLabel";
 import { Spacer } from "../../SharedStorybook/Layout";
 import { Ellipsis, User } from "../Icons";
@@ -17,7 +18,7 @@ export default meta;
 
 type Story = StoryObj<typeof TooltipLabel>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof TooltipLabel>) => {
   return (
     <>
       <TooltipLabel {...args} />

package/src/components/TooltipOptions/TooltipOptions.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { useState } from "react";
+import { ComponentProps, MouseEvent, useState } from "react";
 import { action } from "storybook/actions";
 import { ContainsFixed } from "../../SharedStorybook/DocStyles";
 import useMeasure from "../../hooks/useMeasure";
@@ -23,7 +23,7 @@ export default meta;
 
 type Story = StoryObj<typeof TooltipOptions>;
 
-const Example = (args) => {
+const Example = (args: ComponentProps<typeof TooltipOptions>) => {
   const [open, setOpen] = useState(false);
   const [buttonRef, position] = useMeasure(open);
   const hackedPosition = position;
@@ -40,9 +40,9 @@ const Example = (args) => {
     </>
   );
 };
-const Template = (args) => <Example {...args} />;
+const Template = (args: ComponentProps<typeof TooltipOptions>) => <Example {...args} />;
 
-const StoryTooltipOptionsTemplate = (args) => <StoryTooltipOptionsExample {...args} />;
+const StoryTooltipOptionsTemplate = (args: ComponentProps<typeof StoryTooltipOptionsExample>) => <StoryTooltipOptionsExample {...args} />;
 
 export const BasicExample: Story = {
   render: Template.bind({}),
@@ -77,7 +77,7 @@ export const HeaderExample = {
     header: "Select an Option:",
     data: iconOptions,
     // menuPaddingString: "50px 0",
-    onMouseout: (event) => console.log("onMouseout", event),
+    onMouseout: (event: MouseEvent<HTMLDivElement> | MouseEventInit) => console.log("onMouseout", event),
     // optionPaddingString: "0",
     closeOnClick: false, // for storybook example only
     width: 195,
@@ -92,7 +92,7 @@ export const AltOptions = {
   args: {
     data: iconOptions,
     altOptions: altTooltipOptions,
-    onMouseout: (event) => console.log("onMouseout", event),
+    onMouseout: (event: MouseEvent<HTMLDivElement> | MouseEventInit) => console.log("onMouseout", event),
     closeOnClick: false, // for storybook example only
     width: 195,
   },

package/src/components/Truncate/Truncate.stories.tsx

@@ -9,7 +9,7 @@ import { Tooltip } from "../Tooltip";
 import { Typography } from "../Typography";
 import { TextVariantEnum } from "../Typography/types";
 import { Truncate } from "./";
-import { TruncateStoryType } from "./types";
+import { TruncateStoryType, TruncateTooltipTextType } from "./types";
 
 /** Truncate crops text passed to it if the text overflows the parent element. It should only be used on text that needs to remain on a single line.
 
@@ -51,9 +51,9 @@ export default meta;
 
 type Story = StoryObj<FC<TruncateStoryType>>;
 
-const Template = (args) => {
+const Template = (args: TruncateStoryType) => {
   const [{ tooltipOpen = false, tooltipPosition = { top: 0, bottom: 0, left: 0 }, tooltipText = "" }, updateArgs] = useArgs();
-  const onHover = (data) => {
+  const onHover = (data: TruncateTooltipTextType) => {
     const { text, position } = data;
     updateArgs({ tooltipOpen: true, tooltipText: text, tooltipPosition: position });
   };
@@ -85,7 +85,7 @@ const Template = (args) => {
       <Tooltip open={tooltipOpen} position={tooltipPosition} width={400}>
         {tooltipText}
       </Tooltip>
-      <Typography variant={args.arrayTextVariantEnum}>
+      <Typography variant={args.arrayTextVariantEnum ?? TextVariantEnum.BodyMPrimary}>
         <Truncate
           fontSize={args.fontSize}
           onHover={(response) => onHover(response)}

package/src/components/Typography/Typography.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { ElementSpacing } from "../../SharedStorybook/Layout";
 import {
   BodyLEmphasis,
@@ -42,7 +43,7 @@ export default meta;
 type Story = StoryObj<typeof Typography>;
 type LegacyStory = StoryObj<TextProps>;
 
-const VariantTemplate = (args) => (
+const VariantTemplate = (args: ComponentProps<typeof Typography>) => (
   <ElementSpacing>
     <Typography {...args} variant={args.variant}>
       You can change the variant in the story controls to see this change. You can also see all the different typography types at once in
@@ -51,7 +52,7 @@ const VariantTemplate = (args) => (
   </ElementSpacing>
 );
 
-const LegacyTemplate = (args) => (
+const LegacyTemplate = (args: TextProps) => (
   <ElementSpacing>
     <BodyLEmphasis {...args}>BodyLEmphasis</BodyLEmphasis>
     <BodyLPrimary {...args}>BodyLPrimary </BodyLPrimary>

package/src/components/UploadDropzone/UploadDropzone.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { useArgs } from "storybook/preview-api";
 import { FileTypeEnum } from "../../sharedTypes/enums";
 import { UploadDropzone } from "./UploadDropzone";
@@ -17,7 +18,7 @@ export default meta;
 
 type Story = StoryObj<typeof UploadDropzone>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof UploadDropzone>) => {
   const [{ fileList = [] }, updateArgs] = useArgs();
   return <UploadDropzone {...args} fileList={fileList} setFileList={(fileArray) => updateArgs({ fileList: fileArray })} />;
 };

package/src/components/UserCard/UserCard.stories.tsx

@@ -1,6 +1,6 @@
 import { Avatar, Button, Text, useMantineTheme } from "@mantine/core";
 import { Meta, StoryObj } from "@storybook/react";
-import React from "react";
+import React, { ComponentProps } from "react";
 import { useArgs } from "storybook/preview-api";
 import { styled } from "styled-components";
 
@@ -78,7 +78,7 @@ const Logo = { src: fakeFile, alt: "Another Fake Logo" };
 const EmailLogo = { src: emailFile, alt: "png file" };
 
 
-const ModalTemplate = (args) => {
+const ModalTemplate = (args: ComponentProps<typeof UserCard>) => {
   const [{ showUserCard = false }, updateArgs] = useArgs();
 	const theme = useMantineTheme();
   return (
@@ -148,7 +148,7 @@ const ModalTemplate = (args) => {
   );
 };
 
-const TopOffsetTemplate = (args) => {
+const TopOffsetTemplate = (args: ComponentProps<typeof UserCard>) => {
   return (
     <Background $paddingString="150px 0 0 0">
       <UserCard {...args} />

package/src/components/UserCard/UserCard.test.tsx

@@ -5,6 +5,7 @@ import { ComponentType, FC } from "react";
 import { Lock, User } from "../Icons";
 import { UserCard as RawUserCard } from "./UserCard";
 import { ORGS_DIVIDER_ID, SIGN_OUT_DIVIDER_ID, SIGN_OUT_TEXT } from "./const";
+import type { UserCardOptionsType } from "./types";
 
 function withProviders<P extends {}>(Component: ComponentType<P>): FC<P> {
   return (props: P) => (
@@ -36,21 +37,21 @@ const orgOptions = [
   {
     Icon: User,
     text: "Acme Limited",
-    onClick: ({ option }) => console.log("Set Acme Limited", option),
+    onClick: ({ option }: { option: UserCardOptionsType }) => console.log("Set Acme Limited", option),
     id: "1",
   },
   {
     Icon: User,
     iconSize: 30,
     text: "Universal Widgets",
-    onClick: ({ option }) => console.log("Set Universal Widgets", option),
+    onClick: ({ option }: { option: UserCardOptionsType }) => console.log("Set Universal Widgets", option),
     id: "2",
   },
   {
     Icon: User,
     iconSize: 26,
     text: "Foo International",
-    onClick: ({ option }) => console.log("Foo International", option),
+    onClick: ({ option }: { option: UserCardOptionsType }) => console.log("Foo International", option),
     id: "3",
   },
 ];

package/src/components/ZipCodeInput/ZipCodeInput.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 { InlineZipCodeInput } from "./InlineZipCodeInput";
@@ -14,7 +15,7 @@ export default meta;
 
 type Story = StoryObj<typeof ZipCodeInput>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof ZipCodeInput>) => {
   const [{}, updateArgs] = useArgs();
   return (
     <ZipCodeInput
@@ -26,7 +27,7 @@ const Template = (args) => {
   );
 };
 
-const InlineTemplate = (args) => {
+const InlineTemplate = (args: ComponentProps<typeof InlineZipCodeInput>) => {
   const [{}, updateArgs] = useArgs();
   return (
     <InlineZipCodeInput

package/src/configuredComponents/AddMenu/AddMenu.stories.tsx

@@ -23,7 +23,7 @@ export default meta;
 
 type Story = StoryObj<AddMenuStorybookProps>;
 
-const Template = (args) => (
+const Template = (args: AddMenuStorybookProps) => (
   <Spacer $topMargin={args.topMargin}>
     <AddMenu {...args} />
   </Spacer>

package/src/configuredComponents/ColorDotDropdown/ColorDotDropdown.stories.tsx

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

package/src/configuredComponents/ColorPicker/ColorPicker.stories.tsx

@@ -32,7 +32,7 @@ export default meta;
 
 type Story = StoryObj<AddMenuStorybookProps>;
 
-const Template = (args) => {
+const Template = (args: AddMenuStorybookProps) => {
   const [{}, updateArgs] = useArgs();
   return (
     <Spacer $topMargin={args.topMargin}>

package/src/configuredComponents/CountryDropdown/CountryDropdown.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { useArgs } from "storybook/preview-api";
 import { Spacer } from "./../../SharedStorybook/Layout";
 import { CountryDropdown } from "./CountryDropdown";
@@ -17,7 +18,7 @@ export default meta;
 
 type Story = StoryObj<typeof CountryDropdown>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof CountryDropdown>) => {
   const [{}, updateArgs] = useArgs();
   return (
     <Spacer $bottomMargin={350}>

package/src/configuredComponents/CountyDropdown/CountyDropdown.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 { USStatesEnum } from "../../sharedTypes/enums";
@@ -19,7 +20,7 @@ export default meta;
 
 type Story = StoryObj<typeof CountyDropdown>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof CountyDropdown>) => {
   const [{}, updateArgs] = useArgs();
   return <CountyDropdown {...args} onSelect={(option) => updateArgs({ value: option?.label })} />;
 };

package/src/configuredComponents/DescriptiveDropdownInput/DescriptiveDropdownInput.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 { Spacer } from "../../SharedStorybook/Layout";
@@ -51,7 +52,7 @@ export default meta;
 
 type Story = StoryObj<typeof DescriptiveDropdownInput>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof DescriptiveDropdownInput>) => {
   const [, updateArgs] = useArgs();
   return (
     <Spacer $bottomMargin={300} $topMargin={150} $width={400}>
@@ -60,7 +61,7 @@ const Template = (args) => {
   );
 };
 
-const CheckboxTemplate = (args) => {
+const CheckboxTemplate = (args: ComponentProps<typeof DescriptiveDropdownInput>) => {
   const [{ options }, updateArgs] = useArgs();
   return (
     <Spacer $bottomMargin={300} $topMargin={150} $width={400}>

package/src/configuredComponents/DropdownButton/DropdownButton.stories.tsx

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

package/src/configuredComponents/DropdownInput/DropdownInput.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { useArgs } from "storybook/preview-api";
 import { Spacer } from "../../SharedStorybook/Layout";
 import { PlusCircle } from "../../components/Icons";
@@ -17,7 +18,7 @@ export default meta;
 
 type Story = StoryObj<typeof DropdownInput>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof DropdownInput>) => {
   const [{}, updateArgs] = useArgs();
   return (
     <Spacer $bottomMargin={300} $topMargin={150} $width={400}>

package/src/configuredComponents/IconSwitcher/IconSwitcher.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { useArgs } from "storybook/preview-api";
 import { IconSwitcher } from "./IconSwitcher";
 import { disabledOptions, fourOptions, tinyOptions, twoOptions } from "./mocks";
@@ -17,7 +18,7 @@ export default meta;
 
 type Story = StoryObj<typeof IconSwitcher>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof IconSwitcher>) => {
   const [{}, updateArgs] = useArgs();
   return (
     <IconSwitcher
@@ -29,7 +30,7 @@ const Template = (args) => {
     />
   );
 };
-const EmptyTemplate = (args) => <IconSwitcher {...args} />;
+const EmptyTemplate = (args: ComponentProps<typeof IconSwitcher>) => <IconSwitcher {...args} />;
 
 export const Basic: Story = {
   render: Template.bind({}),

package/src/configuredComponents/InlineDescriptiveDropdown/InlineDescriptiveDropdown.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { useArgs } from "storybook/preview-api";
 import { Spacer } from "../../SharedStorybook/Layout";
 import { SwitchTypeEnum } from "../../components/DescriptiveSwitchMenu";
@@ -26,7 +27,7 @@ export default meta;
 
 type Story = StoryObj<typeof InlineDescriptiveDropdown>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof InlineDescriptiveDropdown>) => {
   const [, updateArgs] = useArgs();
   return (
     <Spacer $bottomMargin={300} $topMargin={150} $width={400}>
@@ -35,7 +36,7 @@ const Template = (args) => {
   );
 };
 
-const CheckboxTemplate = (args) => {
+const CheckboxTemplate = (args: ComponentProps<typeof InlineDescriptiveDropdown>) => {
   const [{ options }, updateArgs] = useArgs();
   return (
     <Spacer $bottomMargin={300} $topMargin={150} $width={400}>

package/src/configuredComponents/InlineDropdown/InlineDropdown.stories.tsx

@@ -5,6 +5,7 @@ import { Spacer } from "../../SharedStorybook/Layout";
 import { addOrRemoveString } from "../../helpers/arrays";
 import { dates, longOptions, nestedTeamMembers, teamMembers } from "../../sharedMocks/options";
 import { TextStyleEnum } from "../../sharedTypes/enums";
+import { OptionType } from "../../sharedTypes/types";
 import { InlineDropdown } from "./InlineDropdown";
 import { InlineDropdownStoryType } from "./types";
 
@@ -38,7 +39,7 @@ export default meta;
 type Story = StoryObj<FC<InlineDropdownStoryType>>;
 
 export const BasicExample: Story = {
-  render: (args) => {
+  render: (args: InlineDropdownStoryType) => {
     const [, updateArgs] = useArgs();
     return (
       <Spacer $topMargin={args.topMargin}>
@@ -56,7 +57,7 @@ export const BasicExample: Story = {
 };
 
 export const TextStyles: Story = {
-  render: (args) => {
+  render: (args: InlineDropdownStoryType) => {
     return (
       <Spacer $topMargin={10}>
         <Spacer $topMargin={30}>
@@ -120,7 +121,7 @@ This will also set `stayOpen` to true by default.
 **Note:** MultiSelect makes it possible to deselect the last active option. Since there is no placeholder for `InlineDropdown`, you will need to manage the potential state with nothing selected.
  */
 export const MultiSelect: Story = {
-  render: (args) => {
+  render: (args: InlineDropdownStoryType) => {
     const [{ activeIds, idField, options, storybookPlaceholder, text }, updateArgs] = useArgs();
     return (
       <Spacer $topMargin={args.topMargin}>
@@ -131,7 +132,7 @@ export const MultiSelect: Story = {
             const activeLabels: string[] = [];
             for (let i = 0; i < updatedIds.length; i++) {
               const id = updatedIds[i];
-              const activeOption = options.find((localOption) => {
+              const activeOption = options.find((localOption: OptionType) => {
                 return localOption[idField] === id || localOption.label === id;
               });
               if (activeOption) {

package/src/configuredComponents/MoreMenuButton/MoreMenuButton.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { MoreMenuButton } from "./MoreMenuButton";
 import RowExample from "./RowExample";
 
@@ -10,7 +11,7 @@ export default meta;
 
 type Story = StoryObj<typeof MoreMenuButton>;
 
-const Template = (args) => <MoreMenuButton {...args} />;
+const Template = (args: ComponentProps<typeof MoreMenuButton>) => <MoreMenuButton {...args} />;
 
 const RowTemplate = () => {
   return <RowExample />;

package/src/configuredComponents/MultiSelect/MultiSelect.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 { Spacer } from "../../SharedStorybook/Layout";
@@ -22,7 +23,7 @@ export default meta;
 
 type Story = StoryObj<typeof MultiSelect>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof MultiSelect>) => {
   const [{ activeIds }, updateArgs] = useArgs();
   return (
     <Spacer $bottomMargin={300} $topMargin={150} $width={400}>

package/src/configuredComponents/NationalityDropdown/NationalityDropdown.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { useArgs } from "storybook/preview-api";
 import { Spacer } from "./../../SharedStorybook/Layout";
 import { NationalityDropdown } from "./NationalityDropdown";
@@ -17,7 +18,7 @@ export default meta;
 
 type Story = StoryObj<typeof NationalityDropdown>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof NationalityDropdown>) => {
   const [{}, updateArgs] = useArgs();
   return (
     <Spacer $bottomMargin={350}>

package/src/configuredComponents/StateDropdown/StateDropdown.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 { StateDropdown } from "./StateDropdown";
@@ -27,7 +28,7 @@ export default meta;
 
 type Story = StoryObj<typeof StateDropdown>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof StateDropdown>) => {
   const [{}, updateArgs] = useArgs();
   return (
     <StateDropdown

package/src/configuredComponents/StatusDropdown/StatusDropdown.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 { StatusDropdown } from "./StatusDropdown";
@@ -14,7 +15,7 @@ export default meta;
 
 type Story = StoryObj<typeof StatusDropdown>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof StatusDropdown>) => {
   const [{}, updateArgs] = useArgs();
   return (
     <StatusDropdown

package/src/configuredComponents/TableFiltersPanel/TableFiltersPanel.stories.tsx

@@ -35,7 +35,7 @@ export default meta;
 
 type Story = StoryObj<TableFiltersPanelStoryType>;
 
-const Example = (args) => {
+const Example = (args: TableFiltersPanelStoryType) => {
   const [activeFilters, setActiveFilters] = useState({});
   const [open, setOpen] = useState(false);
   const [buttonRef, position] = useMeasure(open);
@@ -57,8 +57,8 @@ const Example = (args) => {
     </>
   );
 };
-const Template = (args) => <Example {...args} />;
-const RadioTemplate = (args) => <Example {...args} />;
+const Template = (args: TableFiltersPanelStoryType) => <Example {...args} />;
+const RadioTemplate = (args: TableFiltersPanelStoryType) => <Example {...args} />;
 
 export const Basic: Story = {
   render: Template.bind({}),

package/src/layout/LayoutSidebar/LayoutSidebar.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import logoFile from "../../assets/cerebellumLogo.png";
 import { LogoSidebar } from "../../components/LogoSidebar";
 import { mockLinks } from "../../components/LogoSidebar/mockLinks";
@@ -22,7 +23,7 @@ export default meta;
 
 type Story = StoryObj<typeof LayoutSidebar>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof LayoutSidebar>) => {
   return (
     <LayoutSidebar {...args}>
       <Table columns={simpleColumns} rows={mediumTableRows} rowsPerPage={10} />
@@ -30,7 +31,7 @@ const Template = (args) => {
   );
 };
 
-const ScrollingTemplate = (args) => {
+const ScrollingTemplate = (args: ComponentProps<typeof LayoutSidebar>) => {
   return (
     <LayoutSidebar {...args}>
       <Table columns={simpleColumns} rows={mediumTableRows} rowsPerPage={20} />

package/src/layout/NavLayout/NavLayout.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { Background } from "../../SharedStorybook/Layout";
 import logoFile from "../../assets/cerebellumLogo.png";
 import { colors } from "../../const/colors";
@@ -28,7 +29,7 @@ export default meta;
 
 type Story = StoryObj<typeof NavLayout>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof NavLayout>) => {
   return (
     <Background $bgColor={colors.COOL_GREY_4}>
       <NavLayout {...args}>

package/src/mantine/mantineTheme.ts

@@ -85,8 +85,10 @@ const getInputVars = (size?: MantineSize | (string & {})) => {
   wrapper["--input-height-lg"] = "calc(3.4375rem * var(--mantine-scale))"; // 55px
   wrapper["--input-height-xl"] = "calc(3.75rem * var(--mantine-scale))"; // 60px
 
-  wrapper["--input-fz"] = wrapper[`--input-fz-${resolvedSize}` as const];
-  wrapper["--input-height"] = wrapper[`--input-height-${resolvedSize}` as const];
+  wrapper["--input-fz"] =
+    wrapper[`--input-fz-${resolvedSize}` as keyof typeof wrapper];
+  wrapper["--input-height"] =
+    wrapper[`--input-height-${resolvedSize}` as keyof typeof wrapper];
 
   return { wrapper };
 };

package/src/pages/NotFound/NotFound.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { NotFound } from "./NotFound";
 
 /** NotFound is a 404 page which can be used accross all products. */
@@ -13,7 +14,7 @@ export default meta;
 
 type Story = StoryObj<typeof NotFound>;
 
-const Template = (args) => (
+const Template = (args: ComponentProps<typeof NotFound>) => (
   <div style={{ height: "100vh", width: "100vw" }}>
     <NotFound {...args} />
   </div>