docs: fix type checking in storybook (#2355)

packages/core/.storybook/main.ts

@@ -39,6 +39,12 @@ const config: StorybookConfig = {
   docs: {
     autodocs: false
   },
+  typescript: {
+    check: true,
+    checkOptions: {
+      async: false
+    }
+  },
   async webpackFinal(config, { configType }) {
     if (configType === "DEVELOPMENT") {
       if (config.resolve) {

packages/core/docs/vibe-3-changelog.md

@@ -276,10 +276,6 @@ codemod: `search-component-import-migration`
 
 - `dataTestId` -> `data-testid` [codemod]
 
-### useSwitch
-
-- `onChange` type changed to `(value: boolean, event?: ChangeEvent<HTMLInputElement>) => void`
-
 ## monday-ui-style
 
 - Remove `color-warning`, `color-warning-hover`, `color-warning-select`, `color-warning-select-hover` from colors.json

packages/core/src/components/Menu/MenuItem/MenuItem.tsx

@@ -11,7 +11,7 @@ import styles from "./MenuItem.module.scss";
 import BaseMenuItem from "./components/BaseMenuItem/BaseMenuItem";
 import MenuItemIcon from "./components/MenuItemIcon/MenuItemIcon";
 import { TooltipPositions } from "../../Tooltip/Tooltip.types";
-import { SubmenuPosition } from "./MenuItem.Types";
+import { SubmenuPosition } from "./MenuItem.types";
 
 export interface MenuItemProps extends VibeComponentProps {
   title?: string;

packages/core/src/components/Menu/MenuItem/components/MenuItemSubMenu/MenuItemSubMenu.types.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { CloseMenuOption, MenuChild } from "../../../Menu/MenuConstants";
-import { SubmenuPosition } from "../../MenuItem.Types";
+import { SubmenuPosition } from "../../MenuItem.types";
 
 export interface MenuItemSubMenuProps {
   /**

packages/core/src/components/MultiStepIndicator/MultiStep.types.ts

@@ -5,3 +5,9 @@ export type StepStatus = "pending" | "active" | "fulfilled";
 export type TextPlacement = "horizontal" | "vertical";
 
 export type MultiStepSize = "regular" | "compact";
+
+export type Step = {
+  titleText: string;
+  subtitleText: string;
+  status: StepStatus;
+};

packages/core/src/components/MultiStepIndicator/MultiStepIndicator.tsx

@@ -10,18 +10,12 @@ import {
   StepStatus as StepStatusEnum,
   TextPlacement as TextPlacementEnum
 } from "./MultiStepConstants";
-import { MultiStepType, MultiStepSize, StepStatus, TextPlacement } from "./MultiStep.types";
+import { MultiStepType, MultiStepSize, TextPlacement, Step } from "./MultiStep.types";
 import { getTestId } from "../../tests/test-ids-utils";
 import { ComponentDefaultTestId } from "../../tests/constants";
 import { SubIcon, VibeComponent, VibeComponentProps, withStaticProps } from "../../types";
 import styles from "./MultiStepIndicator.module.scss";
 
-export type Step = {
-  titleText: string;
-  subtitleText: string;
-  status: StepStatus;
-};
-
 export interface MultiStepIndicatorProps extends VibeComponentProps {
   steps?: Step[];
   type?: MultiStepType;

packages/core/src/components/MultiStepIndicator/__stories__/MultiStepIndicator.mdx

@@ -1,5 +1,5 @@
 import MultiStepIndicator from "../MultiStepIndicator";
-import { Canvas, Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/blocks";
 import { BREADCRUBMS, STEPS, TABS } from "../../../storybook/components/related-components/component-description-map";
 import { firstSteps, secondSteps, thirdSteps, TipNotWhatYouAreLookingFor } from "./MultiStepIndicator.stories.helpers";
 import * as MultiStepIndicatorStories from "./MultiStepIndicator.stories";

packages/core/src/components/MultiStepIndicator/__stories__/MultiStepIndicator.stories.helpers.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { StorybookLink, Tip } from "vibe-storybook-components";
-import { Step } from "../MultiStepIndicator";
+import { Step } from "../MultiStep.types";
 
 export const firstSteps: Step[] = [
   {

packages/core/src/components/MultiStepIndicator/__stories__/MultiStepIndicator.stories.tsx

@@ -6,6 +6,7 @@ import { createComponentTemplate, StoryDescription } from "vibe-storybook-compon
 import { Upgrade } from "../../Icon/Icons";
 import Flex from "../../Flex/Flex";
 import "./MultiStepIndicator.stories.scss";
+import { Step } from "../MultiStep.types";
 
 export default {
   title: "Navigation/MultiStepIndicator",
@@ -39,12 +40,19 @@ export const Overview = {
         subtitleText: "Subtitle"
       }
     ]
+  },
+  parameters: {
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
+    }
   }
 };
 
 export const Placements = {
   render: () => {
-    const steps = useMemo(
+    const steps: Step[] = useMemo(
       () => [
         {
           key: "FULFILLED",
@@ -91,7 +99,7 @@ export const Placements = {
 
 export const Types = {
   render: () => {
-    const steps = useMemo(
+    const steps: Step[] = useMemo(
       () => [
         {
           key: "FULFILLED",
@@ -142,7 +150,7 @@ export const Types = {
 
 export const Sizes = {
   render: () => {
-    const steps = useMemo(
+    const steps: Step[] = useMemo(
       () => [
         {
           key: "FULFILLED",
@@ -183,7 +191,7 @@ export const Sizes = {
 
 export const FulfilledIcons = {
   render: () => {
-    const steps = useMemo(
+    const steps: Step[] = useMemo(
       () => [
         {
           key: "FULFILLED",
@@ -230,7 +238,7 @@ export const FulfilledIcons = {
 
 export const TransitionAnimation = {
   render: () => {
-    const exampleSteps = useMemo(
+    const exampleSteps = useMemo<Record<string, Step>>(
       () => ({
         firstStep: {
           key: "PENDING",
@@ -256,7 +264,7 @@ export const TransitionAnimation = {
       []
     );
 
-    const [steps, setSteps] = useState([
+    const [steps, setSteps] = useState<Step[]>([
       {
         ...exampleSteps.firstStep
       },
@@ -355,7 +363,7 @@ export const TransitionAnimation = {
 
 export const MultiStepWizard = {
   render: () => {
-    const steps = useMemo(
+    const steps: Step[] = useMemo(
       () => [
         {
           key: "FULFILLED",

packages/core/src/components/MultiStepIndicator/__tests__/MultiStepIndicator.snapshot.test.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import renderer from "react-test-renderer";
 import { Upgrade } from "../../Icon/Icons";
-import MultiStepIndicator, { Step } from "../MultiStepIndicator";
+import MultiStepIndicator from "../MultiStepIndicator";
+import { Step } from "../MultiStep.types";
 
 const exampleSteps: Step[] = [
   {

packages/core/src/components/MultiStepIndicator/__tests__/MultiStepIndicator.test.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import { fireEvent, render } from "@testing-library/react";
 import { act } from "@testing-library/react-hooks";
-import MultiStepIndicator, { Step } from "../MultiStepIndicator";
+import MultiStepIndicator from "../MultiStepIndicator";
+import { Step } from "../MultiStep.types";
 
 describe("MultiStepIndicator tests", () => {
   it("onClick works and is called once", () => {

packages/core/src/components/Skeleton/__stories__/Skeleton.mdx

@@ -1,5 +1,5 @@
 import Skeleton from "../Skeleton";
-import { Canvas, Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/blocks";
 import {
   COUNTER,
   LINEAR_PROGRESS_BAR,
@@ -115,6 +115,10 @@ Presents a classic menu or equivalent picker
 
 ## Use cases and examples
 
+### Complex Example
+
+<Canvas of={SkeletonStories.ComplexExample} />
+
 ### Update in the system
 
 Use this menu to allow a user to either select one or more items from the list.

packages/core/src/components/Skeleton/__stories__/Skeleton.stories.tsx

@@ -5,48 +5,62 @@ import person from "./assets/person.png";
 import Button from "../../Button/Button";
 import { Replay, ThumbsUp } from "../../Icon/Icons";
 import "./Skeleton.stories.scss";
+import { Flex } from "../../Flex";
 
 export default {
   title: "Feedback/Skeleton",
   component: Skeleton
 };
 
 const skeletonTemplate = (args: SkeletonProps) => {
+  return (
+    <Flex direction="column" gap="small">
+      <Skeleton {...args} />
+      <Skeleton {...args} />
+      <Skeleton {...args} />
+    </Flex>
+  );
+};
+
+export const Overview = {
+  render: skeletonTemplate.bind({}),
+  args: {
+    size: "h1",
+    type: "text"
+  },
+  name: "Overview",
+  parameters: {
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
+    }
+  }
+};
+
+export const ComplexExample = () => {
   return (
     <div className="monday-storybook-skeleton_rules-column">
       <div className="monday-storybook-skeleton_rules-row">
-        <Skeleton type={args.typeCircle} />
-        <Skeleton type={args.typeText} width={110} size={args.smallSize} />
+        <Skeleton type="circle" />
+        <Skeleton type="text" width={110} size="small" />
       </div>
       <div className="monday-storybook-skeleton_article">
         <div>
           <Skeleton />
         </div>
         <div className="monday-storybook-skeleton_aside">
-          <Skeleton type={args.typeText} size={args.sizeH1} />
-          <Skeleton type={args.typeText} size={args.sizeH4} />
-          <Skeleton type={args.typeText} size={args.sizeH4} />
-          <Skeleton type={args.typeText} size={args.sizeH4} />
-          <Skeleton type={args.typeText} size={args.sizeH4} width={82} />
+          <Skeleton type="text" size="h1" />
+          <Skeleton type="text" size="h4" />
+          <Skeleton type="text" size="h4" />
+          <Skeleton type="text" size="h4" />
+          <Skeleton type="text" size="h4" width={82} />
         </div>
       </div>
     </div>
   );
 };
 
-export const Overview = {
-  render: skeletonTemplate.bind({}),
-  name: "Overview",
-
-  args: {
-    typeText: "text",
-    typeCircle: "circle",
-    smallSize: "small",
-    sizeH4: "h4",
-    sizeH1: "h1"
-  }
-};
-
 export const Shapes = {
   render: () => (
     <div className="monday-storybook-skeleton_row-box">

packages/core/src/components/Steps/Steps.tsx

@@ -25,9 +25,9 @@ export interface StepsProps extends VibeComponentProps {
   color?: StepsColor;
   isContentOnTop?: boolean;
   areButtonsIconsHidden?: boolean;
-  backButtonProps?: ButtonProps;
-  nextButtonProps?: ButtonProps;
-  finishButtonProps?: ButtonProps;
+  backButtonProps?: Partial<ButtonProps>;
+  nextButtonProps?: Partial<ButtonProps>;
+  finishButtonProps?: Partial<ButtonProps>;
   onFinish?: (e: React.MouseEvent | React.KeyboardEvent) => void;
 }
 
@@ -45,9 +45,9 @@ const Steps: VibeComponent<StepsProps> & { types?: typeof StepsTypeEnum; colors?
       color,
       areNavigationButtonsHidden = false,
       isContentOnTop = false,
-      backButtonProps = { children: "" },
-      nextButtonProps = { children: "" },
-      finishButtonProps = { children: "" },
+      backButtonProps = {},
+      nextButtonProps = {},
+      finishButtonProps = {},
       areButtonsIconsHidden = false
     }: StepsProps,
     ref

packages/core/src/components/Steps/StepsCommand.tsx

@@ -19,7 +19,7 @@ export interface StepsCommandProps extends VibeComponentProps {
   activeStepIndex: number;
   stepsCount: number;
   isIconHidden?: boolean;
-  buttonProps?: ButtonProps;
+  buttonProps?: Partial<ButtonProps>;
   color?: StepsColor;
 }
 
@@ -29,7 +29,7 @@ export const StepsCommand: FC<StepsCommandProps> = ({
   activeStepIndex,
   stepsCount,
   isIconHidden = false,
-  buttonProps = { children: "" },
+  buttonProps = {},
   color = "primary"
 }: StepsCommandProps) => {
   const { children: buttonChildren, ...otherButtonProps } = buttonProps;

packages/core/src/components/Steps/StepsHeader.tsx

@@ -15,9 +15,9 @@ export interface StepsHeaderProps extends VibeComponentProps {
   onChangeActiveStep: (e: React.MouseEvent, stepIndex: number) => void;
   stepsCount: number;
   areNavigationButtonsHidden: boolean;
-  backButtonProps: ButtonProps;
-  nextButtonProps: ButtonProps;
-  finishButtonProps: ButtonProps;
+  backButtonProps: Partial<ButtonProps>;
+  nextButtonProps: Partial<ButtonProps>;
+  finishButtonProps: Partial<ButtonProps>;
   areButtonsIconsHidden: boolean;
   color?: StepsColor;
   onFinish?: (e: React.MouseEvent) => void;