From fed340a708bba252fafb7dda505d9fcda4d6ad54 Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Sun, 21 Apr 2024 13:30:09 +0300
Subject: [PATCH 01/32] feat(withLiveEdit): apply decorators from within self
 CSF module of a story

this should apply decorators which are declared in the same object of the story, not only global decorators, so we can make our stories cleaner
---
 .../LiveContent.module.scss}                  |  0
 .../withLiveEdit/LiveContent/LiveContent.tsx  | 21 +++++++++++++++++
 .../LiveContent/LiveContent.types.ts          |  8 +++++++
 .../withLiveEdit/hooks/useApplyDecorators.ts  | 18 +++++++++++++++
 .../decorators/withLiveEdit/withLiveEdit.tsx  | 23 ++++---------------
 5 files changed, 52 insertions(+), 18 deletions(-)
 rename packages/core/src/storybook/decorators/withLiveEdit/{withLiveEdit.module.scss => LiveContent/LiveContent.module.scss} (100%)
 create mode 100644 packages/core/src/storybook/decorators/withLiveEdit/LiveContent/LiveContent.tsx
 create mode 100644 packages/core/src/storybook/decorators/withLiveEdit/LiveContent/LiveContent.types.ts
 create mode 100644 packages/core/src/storybook/decorators/withLiveEdit/hooks/useApplyDecorators.ts

diff --git a/packages/core/src/storybook/decorators/withLiveEdit/withLiveEdit.module.scss b/packages/core/src/storybook/decorators/withLiveEdit/LiveContent/LiveContent.module.scss
similarity index 100%
rename from packages/core/src/storybook/decorators/withLiveEdit/withLiveEdit.module.scss
rename to packages/core/src/storybook/decorators/withLiveEdit/LiveContent/LiveContent.module.scss
diff --git a/packages/core/src/storybook/decorators/withLiveEdit/LiveContent/LiveContent.tsx b/packages/core/src/storybook/decorators/withLiveEdit/LiveContent/LiveContent.tsx
new file mode 100644
index 0000000000..d8ba70621d
--- /dev/null
+++ b/packages/core/src/storybook/decorators/withLiveEdit/LiveContent/LiveContent.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import { LiveProvider } from "react-live";
+import LivePreview from "../../../components/live-preview/LivePreview";
+import useApplyDecorators from "../hooks/useApplyDecorators";
+import { LiveContentProps } from "./LiveContent.types";
+import styles from "./LiveContent.module.scss";
+
+const LiveContent = ({ code, scope, decorators, context }: LiveContentProps) => {
+  const content: React.JSX.Element = (
+    <>
+      <div className={styles.modifiedVersionIndicator}>Modified Version</div>
+      <LiveProvider code={code} scope={scope} enableTypeScript>
+        <LivePreview />
+      </LiveProvider>
+    </>
+  );
+
+  return <>{useApplyDecorators(decorators || [], content, context)}</>;
+};
+
+export default LiveContent;
diff --git a/packages/core/src/storybook/decorators/withLiveEdit/LiveContent/LiveContent.types.ts b/packages/core/src/storybook/decorators/withLiveEdit/LiveContent/LiveContent.types.ts
new file mode 100644
index 0000000000..e8752aebfe
--- /dev/null
+++ b/packages/core/src/storybook/decorators/withLiveEdit/LiveContent/LiveContent.types.ts
@@ -0,0 +1,8 @@
+import { Decorator, StoryContext } from "@storybook/react";
+
+export interface LiveContentProps {
+  code: string;
+  scope: Record<string, unknown>;
+  decorators: Decorator[];
+  context: StoryContext;
+}
diff --git a/packages/core/src/storybook/decorators/withLiveEdit/hooks/useApplyDecorators.ts b/packages/core/src/storybook/decorators/withLiveEdit/hooks/useApplyDecorators.ts
new file mode 100644
index 0000000000..9bbe868091
--- /dev/null
+++ b/packages/core/src/storybook/decorators/withLiveEdit/hooks/useApplyDecorators.ts
@@ -0,0 +1,18 @@
+import React, { useMemo } from "react";
+import { StoryContext, Decorator } from "@storybook/react";
+
+const useApplyDecorators = (decorators: Decorator[], component: React.ReactElement, context: StoryContext) => {
+  return useMemo(() => {
+    let decoratedComponent = () => component;
+
+    // recursively apply decorators to the component
+    decorators.forEach(decorator => {
+      const currentComponent = decoratedComponent;
+      decoratedComponent = () => decorator(currentComponent, context);
+    });
+
+    return decoratedComponent();
+  }, [decorators, component, context]);
+};
+
+export default useApplyDecorators;
diff --git a/packages/core/src/storybook/decorators/withLiveEdit/withLiveEdit.tsx b/packages/core/src/storybook/decorators/withLiveEdit/withLiveEdit.tsx
index c784c33273..bb8bb24330 100644
--- a/packages/core/src/storybook/decorators/withLiveEdit/withLiveEdit.tsx
+++ b/packages/core/src/storybook/decorators/withLiveEdit/withLiveEdit.tsx
@@ -1,4 +1,4 @@
-import { Decorator, Parameters as StorybookParameters } from "@storybook/react";
+import { Decorator, StoryContext } from "@storybook/react";
 import { useMemo, useRef, useState } from "react";
 import { vscodeDark } from "@uiw/codemirror-theme-vscode";
 import { langs } from "@uiw/codemirror-extensions-langs";
@@ -6,21 +6,12 @@ import * as VibeComponents from "../../../components";
 import * as VibeComponentsNext from "../../../next";
 import * as VibeIcons from "../../../components/Icon/Icons";
 import { createPortal } from "react-dom";
-import { LiveProvider } from "react-live";
-import LivePreview from "../../components/live-preview/LivePreview";
-import styles from "./withLiveEdit.module.scss";
 import LiveEditor from "../../components/live-editor/LiveEditor";
 import { formatCode } from "./prettier-utils";
+import LiveContent from "./LiveContent/LiveContent";
 
 const globalScope = { ...VibeComponents, VibeIcons, VibeNext: VibeComponentsNext };
 
-type Parameters = StorybookParameters & {
-  liveEdit?: {
-    scope?: Record<string, unknown>;
-    isEnabled?: boolean;
-  };
-};
-
 function getInitialCodeValue(code: string, shouldPrintError: boolean): string {
   try {
     return formatCode(code);
@@ -32,7 +23,8 @@ function getInitialCodeValue(code: string, shouldPrintError: boolean): string {
   }
 }
 
-const withLiveEdit: Decorator = (Story, { id, parameters, viewMode }: Parameters) => {
+const withLiveEdit: Decorator = (Story, context: StoryContext) => {
+  const { id, parameters, viewMode, moduleExport } = context;
   const scope = { ...globalScope, ...parameters.docs?.liveEdit?.scope };
   const canvasEditorContainer = useMemo(() => document.getElementById(id), [id]);
   const shouldAllowLiveEdit = viewMode === "docs" && parameters.docs?.liveEdit?.isEnabled && !!canvasEditorContainer;
@@ -53,12 +45,7 @@ const withLiveEdit: Decorator = (Story, { id, parameters, viewMode }: Parameters
   return (
     <>
       {dirty ? (
-        <>
-          <div className={styles.modifiedVersionIndicator}>Modified Version</div>
-          <LiveProvider code={code} scope={scope} enableTypeScript>
-            <LivePreview />
-          </LiveProvider>
-        </>
+        <LiveContent code={code} scope={scope} decorators={moduleExport.decorators || []} context={context} />
       ) : (
         <Story />
       )}

From 41eb4b948dd97916b289a55885a1157d255d1c28 Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Sun, 21 Apr 2024 13:55:20 +0300
Subject: [PATCH 02/32] feat(withLiveEdit): parse render attribute with ast
 instead of with regex for variety of cases

---
 packages/core/package.json                    |  4 +
 .../withLiveEdit/utils/parse-csf-utils.ts     | 90 +++++++++++++++++++
 .../{ => utils}/prettier-utils.ts             |  0
 .../decorators/withLiveEdit/withLiveEdit.tsx  | 29 +++---
 yarn.lock                                     | 19 +++-
 5 files changed, 122 insertions(+), 20 deletions(-)
 create mode 100644 packages/core/src/storybook/decorators/withLiveEdit/utils/parse-csf-utils.ts
 rename packages/core/src/storybook/decorators/withLiveEdit/{ => utils}/prettier-utils.ts (100%)

diff --git a/packages/core/package.json b/packages/core/package.json
index dd9be09d59..b45c445c71 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -126,6 +126,7 @@
   "devDependencies": {
     "@babel/core": "^7.23.2",
     "@babel/eslint-parser": "^7.16.5",
+    "@babel/parser": "^7.24.4",
     "@babel/plugin-proposal-class-properties": "^7.16.5",
     "@babel/plugin-proposal-private-methods": "^7.18.6",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
@@ -135,6 +136,8 @@
     "@babel/preset-env": "^7.16.5",
     "@babel/preset-react": "^7.16.5",
     "@babel/preset-typescript": "^7.23.3",
+    "@babel/standalone": "^7.24.4",
+    "@babel/types": "^7.24.0",
     "@hot-loader/react-dom": "^16.13.0",
     "@jest/transform": "^26.6.2",
     "@mdx-js/loader": "^2.0.0-rc.2",
@@ -170,6 +173,7 @@
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.5.0",
     "@types/autosize": "^4.0.1",
+    "@types/babel__standalone": "^7.1.7",
     "@types/body-scroll-lock": "^3.1.0",
     "@types/lodash": "^4.14.184",
     "@types/lodash-es": "^4.17.6",
diff --git a/packages/core/src/storybook/decorators/withLiveEdit/utils/parse-csf-utils.ts b/packages/core/src/storybook/decorators/withLiveEdit/utils/parse-csf-utils.ts
new file mode 100644
index 0000000000..09bd435b12
--- /dev/null
+++ b/packages/core/src/storybook/decorators/withLiveEdit/utils/parse-csf-utils.ts
@@ -0,0 +1,90 @@
+import { transformFromAst } from "@babel/standalone";
+import { parse } from "@babel/parser";
+import {
+  File,
+  Program,
+  Expression,
+  Statement,
+  ObjectProperty,
+  FunctionExpression,
+  ArrowFunctionExpression,
+  isObjectExpression,
+  isBlockStatement,
+  isExpressionStatement,
+  isObjectProperty,
+  isIdentifier,
+  isArrowFunctionExpression,
+  isFunctionExpression
+} from "@babel/types";
+
+const parseCsfToAst = (csfString: string) => {
+  return parse(csfString, {
+    plugins: ["typescript", "jsx"],
+    sourceType: "module"
+  });
+};
+
+function findRenderProperty(body: Statement[]): ObjectProperty {
+  return body
+    .flatMap(node =>
+      isExpressionStatement(node) && isObjectExpression(node.expression) ? node.expression.properties : []
+    )
+    .find(prop => isObjectProperty(prop) && isIdentifier(prop.key) && prop.key.name === "render") as ObjectProperty;
+}
+
+function prepareTransformTarget(renderProperty: ObjectProperty): Program {
+  const { value } = renderProperty;
+  const isFunction = isFunctionExpression(value) || isArrowFunctionExpression(value);
+  if (!isFunction) {
+    // e.g. render: something
+    const expression = value as Expression;
+    return {
+      type: "Program",
+      body: [{ type: "ExpressionStatement", expression }],
+      directives: [],
+      sourceType: "module"
+    };
+  }
+
+  // e.g. render: () => {...}, render: () => (...), render()
+  const { body } = value as FunctionExpression | ArrowFunctionExpression;
+
+  return {
+    type: "Program",
+    body: [
+      {
+        type: "ExpressionStatement",
+        expression: isBlockStatement(body) ? value : body
+      }
+    ],
+    directives: [],
+    sourceType: "module"
+  };
+}
+
+function transformAstToCode(ast: File): string {
+  // docs says transformFromAst is void, but it is not because of a breaking change
+  const { code } = transformFromAst(ast, null, { presets: [] }) as unknown as { code: string };
+  return code;
+}
+
+export function extractRenderAttributeFromCsf(csfString: string) {
+  const originalAst = parseCsfToAst(csfString);
+
+  const renderProperty = findRenderProperty(originalAst.program.body);
+  if (!renderProperty) {
+    return null;
+  }
+
+  const transformTarget = prepareTransformTarget(renderProperty);
+  if (!transformTarget) {
+    return null;
+  }
+
+  const transformedAst: File = {
+    type: "File",
+    program: transformTarget
+  };
+
+  return transformAstToCode(transformedAst);
+}
diff --git a/packages/core/src/storybook/decorators/withLiveEdit/prettier-utils.ts b/packages/core/src/storybook/decorators/withLiveEdit/utils/prettier-utils.ts
similarity index 100%
rename from packages/core/src/storybook/decorators/withLiveEdit/prettier-utils.ts
rename to packages/core/src/storybook/decorators/withLiveEdit/utils/prettier-utils.ts
diff --git a/packages/core/src/storybook/decorators/withLiveEdit/withLiveEdit.tsx b/packages/core/src/storybook/decorators/withLiveEdit/withLiveEdit.tsx
index bb8bb24330..73ddf3e7af 100644
--- a/packages/core/src/storybook/decorators/withLiveEdit/withLiveEdit.tsx
+++ b/packages/core/src/storybook/decorators/withLiveEdit/withLiveEdit.tsx
@@ -7,19 +7,22 @@ import * as VibeComponentsNext from "../../../next";
 import * as VibeIcons from "../../../components/Icon/Icons";
 import { createPortal } from "react-dom";
 import LiveEditor from "../../components/live-editor/LiveEditor";
-import { formatCode } from "./prettier-utils";
+import { formatCode } from "./utils/prettier-utils";
 import LiveContent from "./LiveContent/LiveContent";
+import { extractRenderAttributeFromCsf } from "./utils/parse-csf-utils";
 
 const globalScope = { ...VibeComponents, VibeIcons, VibeNext: VibeComponentsNext };
 
-function getInitialCodeValue(code: string, shouldPrintError: boolean): string {
+function getInitialCodeValue(source: string, shouldPrintError: boolean): string {
   try {
+    // need to wrap with parentheses to avoid syntax errors
+    const code = extractRenderAttributeFromCsf(`(${source})`);
     return formatCode(code);
   } catch (e) {
     if (shouldPrintError) {
       console.error(e);
     }
-    return code;
+    return source;
   }
 }
 
@@ -29,8 +32,10 @@ const withLiveEdit: Decorator = (Story, context: StoryContext) => {
   const canvasEditorContainer = useMemo(() => document.getElementById(id), [id]);
   const shouldAllowLiveEdit = viewMode === "docs" && parameters.docs?.liveEdit?.isEnabled && !!canvasEditorContainer;
 
-  const originalCode = useRef<string>(extractCodeFromSource(parameters.docs.source?.originalSource) || "");
-  const [code, setCode] = useState<string>(getInitialCodeValue(originalCode.current, shouldAllowLiveEdit));
+  const originalCode = useRef<string>(
+    getInitialCodeValue(parameters.docs.source?.originalSource || "", shouldAllowLiveEdit)
+  );
+  const [code, setCode] = useState<string>(originalCode.current);
   const [dirty, setDirty] = useState<boolean>(false);
 
   const handleChange = (newVal: string) => {
@@ -70,18 +75,4 @@ const withLiveEdit: Decorator = (Story, context: StoryContext) => {
   );
 };
 
-function extractCodeFromSource(csfSource: string): string {
-  // capture "render:" from the string
-  if (!csfSource) {
-    return "";
-  }
-  const match = csfSource.match(/render:\s*(?:\(\)\s*=>\s*)?([\s\S]*?)(?=\s*,\s*[\w]+:\s*|}$)/);
-
-  if (!match?.[1]) {
-    return "";
-  }
-
-  return match[1].trim();
-}
-
 export default withLiveEdit;
diff --git a/yarn.lock b/yarn.lock
index 43912b3550..b45d2fac21 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -284,6 +284,11 @@
   resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.24.1.tgz#1e416d3627393fab1cb5b0f2f1796a100ae9133a"
   integrity sha512-Zo9c7N3xdOIQrNip7Lc9wvRPzlRtovHVE4lkz8WEDr7uYh/GMQhSiIgFxGIArRHYdJE5kxtZjAf8rT0xhdLCzg==
 
+"@babel/parser@^7.24.4":
+  version "7.24.4"
+  resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.24.4.tgz#234487a110d89ad5a3ed4a8a566c36b9453e8c88"
+  integrity sha512-zTvEBcghmeBma9QIGunWevvBAp4/Qu9Bdq+2k0Ot4fVMD6v3dsC9WOcRSKk7tRRyBM/53yKMJko9xOatGQAwSg==
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.24.1":
   version "7.24.1"
   resolved "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.24.1.tgz#b645d9ba8c2bc5b7af50f0fe949f9edbeb07c8cf"
@@ -1102,6 +1107,11 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/standalone@^7.24.4":
+  version "7.24.4"
+  resolved "https://registry.npmjs.org/@babel/standalone/-/standalone-7.24.4.tgz#9461220fd641a92fff4be19b34fdb9d18e80d37d"
+  integrity sha512-V4uqWeedadiuiCx5P5OHYJZ1PehdMpcBccNCEptKFGPiZIY3FI5f2ClxUl4r5wZ5U+ohcQ+4KW6jX2K6xXzq4Q==
+
 "@babel/template@^7.22.15", "@babel/template@^7.24.0", "@babel/template@^7.3.3":
   version "7.24.0"
   resolved "https://registry.npmjs.org/@babel/template/-/template-7.24.0.tgz#c6a524aa93a4a05d66aaf31654258fae69d87d50"
@@ -4501,7 +4511,7 @@
   resolved "https://registry.npmjs.org/@types/autosize/-/autosize-4.0.3.tgz#77548c35bca4cc6281593228cde9a50112e1f94c"
   integrity sha512-o0ZyU3ePp3+KRbhHsY4ogjc+ZQWgVN5h6j8BHW5RII4cFKi6PEKK9QPAcphJVkD0dGpyFnD3VRR0WMvHVjCv9w==
 
-"@types/babel__core@^7.0.0", "@types/babel__core@^7.1.14", "@types/babel__core@^7.1.7", "@types/babel__core@^7.18.0":
+"@types/babel__core@^7.0.0", "@types/babel__core@^7.1.0", "@types/babel__core@^7.1.14", "@types/babel__core@^7.1.7", "@types/babel__core@^7.18.0":
   version "7.20.5"
   resolved "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz#3df15f27ba85319caa07ba08d0721889bb39c017"
   integrity sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==
@@ -4519,6 +4529,13 @@
   dependencies:
     "@babel/types" "^7.0.0"
 
+"@types/babel__standalone@^7.1.7":
+  version "7.1.7"
+  resolved "https://registry.npmjs.org/@types/babel__standalone/-/babel__standalone-7.1.7.tgz#8ab09548a24f54015e7d84a55486148180bc4ace"
+  integrity sha512-4RUJX9nWrP/emaZDzxo/+RYW8zzLJTXWJyp2k78HufG459HCz754hhmSymt3VFOU6/Wy+IZqfPvToHfLuGOr7w==
+  dependencies:
+    "@types/babel__core" "^7.1.0"
+
 "@types/babel__template@*":
   version "7.4.4"
   resolved "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz#5672513701c1b2199bc6dad636a9d7491586766f"

From a43f69f5f1219f6d669237033cde41e5299f8808 Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Sun, 21 Apr 2024 16:29:53 +0300
Subject: [PATCH 03/32] feat(CanvasWrapper): allow hiding source from Canvas
 (also for stories who don't need LiveEdit)

---
 .../storybook/components/canvas-wrapper/CanvasWrapper.tsx    | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/storybook/components/canvas-wrapper/CanvasWrapper.tsx b/packages/core/src/storybook/components/canvas-wrapper/CanvasWrapper.tsx
index eb356ace7d..3463c4d8c5 100644
--- a/packages/core/src/storybook/components/canvas-wrapper/CanvasWrapper.tsx
+++ b/packages/core/src/storybook/components/canvas-wrapper/CanvasWrapper.tsx
@@ -18,13 +18,14 @@ const CanvasWrapper: FC<CanvasWrapper> = ({ of }) => {
     []
   );
 
-  const liveEditEnabledForStory = story.parameters.docs?.liveEdit?.isEnabled;
+  const sourceState = story.parameters.docs?.sourceState;
+  const liveEditEnabledForStory = sourceState !== "none" && story.parameters.docs?.liveEdit?.isEnabled;
 
   return (
     <>
       <Canvas
         of={of}
-        sourceState={liveEditEnabledForStory ? "none" : "hidden"}
+        sourceState={sourceState || (liveEditEnabledForStory ? "none" : "hidden")}
         additionalActions={liveEditEnabledForStory ? [toggleCodeAction] : []}
         className={styles.canvas}
       />

From 7fa3109e1b5766a1d7d3befff0ecdc9b01a11145 Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Sun, 21 Apr 2024 16:30:31 +0300
Subject: [PATCH 04/32] docs(Catalog): align story's TS, hide source code from
 Canvas

---
 .../catalog/catalog.stories.tsx                       | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/storybook/stand-alone-documentaion/catalog/catalog.stories.tsx b/packages/core/src/storybook/stand-alone-documentaion/catalog/catalog.stories.tsx
index c0e93821f8..9e05daaf71 100644
--- a/packages/core/src/storybook/stand-alone-documentaion/catalog/catalog.stories.tsx
+++ b/packages/core/src/storybook/stand-alone-documentaion/catalog/catalog.stories.tsx
@@ -1,14 +1,19 @@
 import { CatalogTemplate } from "./Catalog/Catalog.stories.templates";
+import { Meta, StoryObj } from "@storybook/react";
+
+type Story = StoryObj<typeof CatalogTemplate>;
 
 export default {
   title: "Catalog",
   tags: ["internal"]
-};
+} satisfies Meta<typeof CatalogTemplate>;
 
-export const Catalog = {
+export const Catalog: Story = {
   render: () => <CatalogTemplate />,
-  name: "Catalog",
   parameters: {
+    docs: {
+      sourceState: "none"
+    },
     chromatic: {
       pauseAnimationAtEnd: true
     }

From 0986d682b5ebd96d009a601a76a9305aea8fa41a Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Sun, 21 Apr 2024 16:30:50 +0300
Subject: [PATCH 05/32] docs(Catalog): allow LiveEdit

---
 .../storybook/stand-alone-documentaion/catalog/catalog.mdx    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/storybook/stand-alone-documentaion/catalog/catalog.mdx b/packages/core/src/storybook/stand-alone-documentaion/catalog/catalog.mdx
index 5062a941ac..774e769eba 100644
--- a/packages/core/src/storybook/stand-alone-documentaion/catalog/catalog.mdx
+++ b/packages/core/src/storybook/stand-alone-documentaion/catalog/catalog.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta } from "@storybook/blocks";
-import * as CatalogStories from './catalog.stories';
+import { Meta } from "@storybook/blocks";
+import * as CatalogStories from "./catalog.stories";
 
 <Meta of={CatalogStories} />
 

From 17a746b7676177c97025fea0b7e0bfd32aa53aed Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Sun, 21 Apr 2024 16:57:55 +0300
Subject: [PATCH 06/32] docs(Button): align story's TS

---
 .../Button/__stories__/button.stories.tsx     | 64 +++++++------------
 1 file changed, 24 insertions(+), 40 deletions(-)

diff --git a/packages/core/src/components/Button/__stories__/button.stories.tsx b/packages/core/src/components/Button/__stories__/button.stories.tsx
index 5bb92461d5..bd5b49b85e 100644
--- a/packages/core/src/components/Button/__stories__/button.stories.tsx
+++ b/packages/core/src/components/Button/__stories__/button.stories.tsx
@@ -4,6 +4,9 @@ import { Add, Calendar, Check, Remove } from "../../Icon/Icons";
 import { createStoryMetaSettingsDecorator } from "../../../storybook/functions/createStoryMetaSettingsDecorator";
 import Button from "../Button";
 import "./button.stories.scss";
+import { Meta, StoryObj } from "@storybook/react";
+
+type Story = StoryObj<typeof Button>;
 
 const metaSettings = createStoryMetaSettingsDecorator({
   component: Button,
@@ -17,31 +20,28 @@ export default {
   component: Button,
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators
-};
+} satisfies Meta<typeof Button>;
 
 const buttonTemplate = createComponentTemplate(Button);
 
-export const Overview = {
+export const Overview: Story = {
   render: buttonTemplate.bind({}),
-  name: "Overview",
   args: {
     children: "Button"
   }
 };
 
-export const ButtonKinds = {
+export const ButtonKinds: Story = {
   render: () => (
     <>
       <Button>Primary</Button>
       <Button kind={Button.kinds.SECONDARY}>Secondary</Button>
       <Button kind={Button.kinds.TERTIARY}>Tertiary</Button>
     </>
-  ),
-
-  name: "Button kinds"
+  )
 };
 
-export const Sizes = {
+export const Sizes: Story = {
   render: () => (
     <>
       <Button size={Button.sizes.LARGE}>Large</Button>
@@ -53,7 +53,7 @@ export const Sizes = {
   name: "Sizes"
 };
 
-export const Disabled = {
+export const Disabled: Story = {
   render: () => (
     <>
       <Button disabled>Primary</Button>
@@ -64,45 +64,37 @@ export const Disabled = {
         Tertiary
       </Button>
     </>
-  ),
-
-  name: "Disabled"
+  )
 };
 
-export const States = {
+export const States: Story = {
   render: () => (
     <>
       <Button>Regular</Button>
       <Button active>Active</Button>
     </>
-  ),
-
-  name: "States"
+  )
 };
 
-export const PositiveAndNegative = {
+export const PositiveAndNegative: Story = {
   render: () => (
     <>
       <Button color={Button.colors.POSITIVE}>Positive</Button>
       <Button color={Button.colors.NEGATIVE}>Negative</Button>
     </>
-  ),
-
-  name: "Positive and Negative"
+  )
 };
 
-export const Icons = {
+export const Icons: Story = {
   render: () => (
     <>
       <Button rightIcon={Calendar}>Right icon</Button>
       <Button leftIcon={Calendar}>Left icon</Button>
     </>
-  ),
-
-  name: "Icons"
+  )
 };
 
-export const LoadingState = {
+export const LoadingState: Story = {
   render: () => {
     const [loading, setLoading] = useState(false);
     const onClick = useCallback(() => {
@@ -113,12 +105,10 @@ export const LoadingState = {
         Click here for loading
       </Button>
     );
-  },
-
-  name: "Loading state"
+  }
 };
 
-export const SuccessState = {
+export const SuccessState: Story = {
   render: () => {
     const [success, setSuccess] = useState(false);
     const onClick = useCallback(() => {
@@ -129,12 +119,10 @@ export const SuccessState = {
         Click here for success
       </Button>
     );
-  },
-
-  name: "Success state"
+  }
 };
 
-export const OnColorStates = {
+export const OnColorStates: Story = {
   render: () => (
     <>
       <div style={{ display: "flex", flexDirection: "column" }}>
@@ -165,12 +153,10 @@ export const OnColorStates = {
         </div>
       </div>
     </>
-  ),
-
-  name: "On color states"
+  )
 };
 
-export const AdjacentButtons = {
+export const AdjacentButtons: Story = {
   render: () => (
     <div>
       <Button kind={Button.kinds.SECONDARY} size={Button.sizes.SMALL} ariaLabel="decrease zoom level" rightFlat>
@@ -180,7 +166,5 @@ export const AdjacentButtons = {
         <Add />
       </Button>
     </div>
-  ),
-
-  name: "Adjacent buttons"
+  )
 };

From dc6536fed548542440aaf73aed317fdb3c550912 Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Sun, 21 Apr 2024 17:23:53 +0300
Subject: [PATCH 07/32] docs(Button): allow LiveEdit

---
 .../components/Button/__stories__/button.mdx  |  2 +-
 .../Button/__stories__/button.stories.tsx     | 32 +++++++++++++++++--
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/components/Button/__stories__/button.mdx b/packages/core/src/components/Button/__stories__/button.mdx
index 674e4338f2..e0c3a1a18e 100644
--- a/packages/core/src/components/Button/__stories__/button.mdx
+++ b/packages/core/src/components/Button/__stories__/button.mdx
@@ -1,5 +1,5 @@
 import Button from "../Button";
-import { Canvas, Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/blocks";
 import {
   BUTTON_GROUP,
   BADGE,
diff --git a/packages/core/src/components/Button/__stories__/button.stories.tsx b/packages/core/src/components/Button/__stories__/button.stories.tsx
index bd5b49b85e..12f6decb71 100644
--- a/packages/core/src/components/Button/__stories__/button.stories.tsx
+++ b/packages/core/src/components/Button/__stories__/button.stories.tsx
@@ -28,6 +28,13 @@ export const Overview: Story = {
   render: buttonTemplate.bind({}),
   args: {
     children: "Button"
+  },
+  parameters: {
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
+    }
   }
 };
 
@@ -91,7 +98,14 @@ export const Icons: Story = {
       <Button rightIcon={Calendar}>Right icon</Button>
       <Button leftIcon={Calendar}>Left icon</Button>
     </>
-  )
+  ),
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { Calendar }
+      }
+    }
+  }
 };
 
 export const LoadingState: Story = {
@@ -119,6 +133,13 @@ export const SuccessState: Story = {
         Click here for success
       </Button>
     );
+  },
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { Check }
+      }
+    }
   }
 };
 
@@ -166,5 +187,12 @@ export const AdjacentButtons: Story = {
         <Add />
       </Button>
     </div>
-  )
+  ),
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { Remove, Add }
+      }
+    }
+  }
 };

From 8fb177747d523da625ed27db68cefe2801d23110 Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Sun, 21 Apr 2024 17:24:23 +0300
Subject: [PATCH 08/32] feat(withLiveEdit): allow common React hooks to
 automatically be inside the scope

---
 .../withLiveEdit/LiveContent/LiveContent.tsx       | 14 +++++++++++++-
 .../decorators/withLiveEdit/withLiveEdit.tsx       | 10 ++++++----
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/packages/core/src/storybook/decorators/withLiveEdit/LiveContent/LiveContent.tsx b/packages/core/src/storybook/decorators/withLiveEdit/LiveContent/LiveContent.tsx
index d8ba70621d..24dc8610ad 100644
--- a/packages/core/src/storybook/decorators/withLiveEdit/LiveContent/LiveContent.tsx
+++ b/packages/core/src/storybook/decorators/withLiveEdit/LiveContent/LiveContent.tsx
@@ -4,12 +4,24 @@ import LivePreview from "../../../components/live-preview/LivePreview";
 import useApplyDecorators from "../hooks/useApplyDecorators";
 import { LiveContentProps } from "./LiveContent.types";
 import styles from "./LiveContent.module.scss";
+import * as VibeComponents from "../../../../components";
+import * as VibeIcons from "../../../../components/Icon/Icons";
+import * as VibeComponentsNext from "../../../../next";
+
+const vibeScope = { ...VibeComponents, VibeIcons, VibeNext: VibeComponentsNext };
+const reactCommonHooksScope = {
+  useState: React.useState,
+  useEffect: React.useEffect,
+  useCallback: React.useCallback,
+  useMemo: React.useMemo,
+  useRef: React.useRef
+};
 
 const LiveContent = ({ code, scope, decorators, context }: LiveContentProps) => {
   const content: React.JSX.Element = (
     <>
       <div className={styles.modifiedVersionIndicator}>Modified Version</div>
-      <LiveProvider code={code} scope={scope} enableTypeScript>
+      <LiveProvider code={code} scope={{ ...scope, ...vibeScope, ...reactCommonHooksScope }} enableTypeScript>
         <LivePreview />
       </LiveProvider>
     </>
diff --git a/packages/core/src/storybook/decorators/withLiveEdit/withLiveEdit.tsx b/packages/core/src/storybook/decorators/withLiveEdit/withLiveEdit.tsx
index 73ddf3e7af..22520fb81d 100644
--- a/packages/core/src/storybook/decorators/withLiveEdit/withLiveEdit.tsx
+++ b/packages/core/src/storybook/decorators/withLiveEdit/withLiveEdit.tsx
@@ -11,8 +11,6 @@ import { formatCode } from "./utils/prettier-utils";
 import LiveContent from "./LiveContent/LiveContent";
 import { extractRenderAttributeFromCsf } from "./utils/parse-csf-utils";
 
-const globalScope = { ...VibeComponents, VibeIcons, VibeNext: VibeComponentsNext };
-
 function getInitialCodeValue(source: string, shouldPrintError: boolean): string {
   try {
     // need to wrap with parentheses to avoid syntax errors
@@ -28,7 +26,6 @@ function getInitialCodeValue(source: string, shouldPrintError: boolean): string
 
 const withLiveEdit: Decorator = (Story, context: StoryContext) => {
   const { id, parameters, viewMode, moduleExport } = context;
-  const scope = { ...globalScope, ...parameters.docs?.liveEdit?.scope };
   const canvasEditorContainer = useMemo(() => document.getElementById(id), [id]);
   const shouldAllowLiveEdit = viewMode === "docs" && parameters.docs?.liveEdit?.isEnabled && !!canvasEditorContainer;
 
@@ -50,7 +47,12 @@ const withLiveEdit: Decorator = (Story, context: StoryContext) => {
   return (
     <>
       {dirty ? (
-        <LiveContent code={code} scope={scope} decorators={moduleExport.decorators || []} context={context} />
+        <LiveContent
+          code={code}
+          scope={parameters.docs?.liveEdit?.scope}
+          decorators={moduleExport.decorators || []}
+          context={context}
+        />
       ) : (
         <Story />
       )}

From 19b378378602240c4f6f8b2e5175e37bce8e28f2 Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Sun, 21 Apr 2024 17:31:02 +0300
Subject: [PATCH 09/32] docs(ButtonGroup): align story's TS

---
 .../__stories__/buttonGroup.stories.tsx       | 50 +++++++------------
 1 file changed, 19 insertions(+), 31 deletions(-)

diff --git a/packages/core/src/components/ButtonGroup/__stories__/buttonGroup.stories.tsx b/packages/core/src/components/ButtonGroup/__stories__/buttonGroup.stories.tsx
index 50b43a6596..a70b851d97 100644
--- a/packages/core/src/components/ButtonGroup/__stories__/buttonGroup.stories.tsx
+++ b/packages/core/src/components/ButtonGroup/__stories__/buttonGroup.stories.tsx
@@ -2,6 +2,9 @@ import ButtonGroup from "../ButtonGroup";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";
 import { createComponentTemplate } from "vibe-storybook-components";
 import "./buttonGroup.stories.scss";
+import { Meta, StoryObj } from "@storybook/react";
+
+type Story = StoryObj<typeof ButtonGroup>;
 
 const metaSettings = createStoryMetaSettingsDecorator({
   component: ButtonGroup,
@@ -16,11 +19,10 @@ export default {
   component: ButtonGroup,
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators
-};
+} satisfies Meta<typeof ButtonGroup>;
 
-export const Overview = {
+export const Overview: Story = {
   render: buttonGroupTemplate.bind({}),
-  name: "Overview",
 
   args: {
     options: [
@@ -46,7 +48,7 @@ export const Overview = {
   }
 };
 
-export const Default = {
+export const Default: Story = {
   render: () => (
     <ButtonGroup
       groupAriaLabel="button group aria label"
@@ -70,12 +72,10 @@ export const Default = {
         }
       ]}
     />
-  ),
-
-  name: "Default"
+  )
 };
 
-export const Tertiary = {
+export const Tertiary: Story = {
   render: () => (
     <ButtonGroup
       groupAriaLabel="button group aria label"
@@ -100,12 +100,10 @@ export const Tertiary = {
         }
       ]}
     />
-  ),
-
-  name: "Tertiary"
+  )
 };
 
-export const Disabled = {
+export const Disabled: Story = {
   render: () => (
     <ButtonGroup
       disabled
@@ -129,12 +127,10 @@ export const Disabled = {
         }
       ]}
     />
-  ),
-
-  name: "Disabled"
+  )
 };
 
-export const DisabledSingeButton = {
+export const DisabledSingeButton: Story = {
   render: () => (
     <ButtonGroup
       groupAriaLabel="button group aria label"
@@ -159,12 +155,10 @@ export const DisabledSingeButton = {
         }
       ]}
     />
-  ),
-
-  name: "Disabled - Singe Button"
+  )
 };
 
-export const Size = {
+export const Size: Story = {
   render: () => (
     <>
       <div className="monday-storybook-button-group_column">
@@ -196,12 +190,10 @@ export const Size = {
         />
       </div>
     </>
-  ),
-
-  name: "Size"
+  )
 };
 
-export const ButtonGroupInSettings = {
+export const ButtonGroupInSettings: Story = {
   render: () => (
     <div className="monday-storybook-button-group_column">
       Function
@@ -229,12 +221,10 @@ export const ButtonGroupInSettings = {
         ]}
       />
     </div>
-  ),
-
-  name: "Button group in settings"
+  )
 };
 
-export const ButtonGroupAsToggle = {
+export const ButtonGroupAsToggle: Story = {
   render: () => (
     <ButtonGroup
       groupAriaLabel="button group aria label"
@@ -250,7 +240,5 @@ export const ButtonGroupAsToggle = {
         }
       ]}
     />
-  ),
-
-  name: "Button group as toggle"
+  )
 };

From 6512c368b97a6783c4718ba04d58a0ace8951b90 Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Sun, 21 Apr 2024 17:31:21 +0300
Subject: [PATCH 10/32] docs(ButtonGroup): allow LiveEdit

---
 .../src/components/ButtonGroup/__stories__/buttonGroup.mdx | 3 +--
 .../ButtonGroup/__stories__/buttonGroup.stories.tsx        | 7 +++++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/components/ButtonGroup/__stories__/buttonGroup.mdx b/packages/core/src/components/ButtonGroup/__stories__/buttonGroup.mdx
index b02491bcf3..7c620ab342 100644
--- a/packages/core/src/components/ButtonGroup/__stories__/buttonGroup.mdx
+++ b/packages/core/src/components/ButtonGroup/__stories__/buttonGroup.mdx
@@ -1,5 +1,4 @@
-import { Canvas, Meta } from "@storybook/blocks";
-import { Link } from "vibe-storybook-components";
+import { Meta } from "@storybook/blocks";
 import ButtonGroup from "../ButtonGroup";
 import { Mobile } from "../../Icon/Icons";
 import { BREADCRUBMS, BUTTON, TABS } from "../../../storybook/components/related-components/component-description-map";
diff --git a/packages/core/src/components/ButtonGroup/__stories__/buttonGroup.stories.tsx b/packages/core/src/components/ButtonGroup/__stories__/buttonGroup.stories.tsx
index a70b851d97..906e8a08d0 100644
--- a/packages/core/src/components/ButtonGroup/__stories__/buttonGroup.stories.tsx
+++ b/packages/core/src/components/ButtonGroup/__stories__/buttonGroup.stories.tsx
@@ -45,6 +45,13 @@ export const Overview: Story = {
     ],
 
     value: 1
+  },
+  parameters: {
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
+    }
   }
 };
 

From 867ba3102cc7a7b6418f672f0c96f62b4b24416e Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Sun, 21 Apr 2024 17:34:15 +0300
Subject: [PATCH 11/32] docs(IconButton): align story's TS

---
 .../__stories__/IconButton.stories.tsx        | 44 +++++++------------
 1 file changed, 17 insertions(+), 27 deletions(-)

diff --git a/packages/core/src/components/IconButton/__stories__/IconButton.stories.tsx b/packages/core/src/components/IconButton/__stories__/IconButton.stories.tsx
index faac3705e7..9718fb47e3 100644
--- a/packages/core/src/components/IconButton/__stories__/IconButton.stories.tsx
+++ b/packages/core/src/components/IconButton/__stories__/IconButton.stories.tsx
@@ -10,6 +10,9 @@ import Icon from "../../Icon/Icon";
 import Heading from "../../LegacyHeading/LegacyHeading";
 import Avatar from "../../Avatar/Avatar";
 import styles from "./iconButton.stories.module.scss";
+import { Meta, StoryObj } from "@storybook/react";
+
+type Story = StoryObj<typeof IconButton>;
 
 const metaSettings = createStoryMetaSettingsDecorator({
   component: IconButton,
@@ -25,11 +28,10 @@ export default {
   component: IconButton,
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators
-};
+} satisfies Meta<typeof IconButton>;
 
-export const Overview = {
+export const Overview: Story = {
   render: iconButtonTemplate.bind({}),
-  name: "Overview",
 
   args: {
     ariaLabel: "Add",
@@ -37,7 +39,7 @@ export const Overview = {
   }
 };
 
-export const Kinds = {
+export const Kinds: Story = {
   render: () => (
     <div
       style={{
@@ -51,12 +53,10 @@ export const Kinds = {
       <IconButton icon={Bolt} kind={IconButton.kinds.SECONDARY} ariaLabel="My secondary IconButton" />
       <IconButton icon={Bolt} kind={IconButton.kinds.TERTIARY} ariaLabel="My tertiary IconButton" />
     </div>
-  ),
-
-  name: "Kinds"
+  )
 };
 
-export const Sizes = {
+export const Sizes: Story = {
   render: () => (
     <div
       style={{
@@ -102,12 +102,10 @@ export const Sizes = {
         ariaLabel="My large IconButton"
       />
     </div>
-  ),
-
-  name: "Sizes"
+  )
 };
 
-export const Active = {
+export const Active: Story = {
   render: () => (
     <div
       style={{
@@ -121,12 +119,10 @@ export const Active = {
       <IconButton icon={Doc} kind={IconButton.kinds.SECONDARY} ariaLabel="My active medium IconButton" active />
       <IconButton icon={Doc} kind={IconButton.kinds.TERTIARY} ariaLabel="My active large IconButton" active />
     </div>
-  ),
-
-  name: "Active"
+  )
 };
 
-export const Disabled = {
+export const Disabled: Story = {
   render: () => (
     <div
       style={{
@@ -158,12 +154,10 @@ export const Disabled = {
         disabledReason="This function is not available"
       />
     </div>
-  ),
-
-  name: "Disabled"
+  )
 };
 
-export const IconButtonAsToolbarButton = {
+export const IconButtonAsToolbarButton: Story = {
   render: () => (
     <Flex
       className={styles.dashboard}
@@ -180,12 +174,10 @@ export const IconButtonAsToolbarButton = {
       </Flex>
       <div className={styles.dashboardContent} />
     </Flex>
-  ),
-
-  name: "Icon button as toolbar button"
+  )
 };
 
-export const IconButtonAsCloseButton = {
+export const IconButtonAsCloseButton: Story = {
   render: () => (
     <>
       <Flex
@@ -245,7 +237,5 @@ export const IconButtonAsCloseButton = {
       </Flex>
       <IconButton icon={CloseSmall} size={IconButton.sizes.SMALL} ariaLabel="Remove from Recycle bin" />
     </>
-  ),
-
-  name: "Icon button as close button"
+  )
 };

From aab9278856b301477a1400a8539ac89b958e625d Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Sun, 21 Apr 2024 17:40:15 +0300
Subject: [PATCH 12/32] docs(IconButton): allow LiveEdit

---
 .../IconButton/__stories__/IconButton.mdx     |  3 +-
 .../__stories__/IconButton.stories.tsx        | 62 ++++++++++++++++---
 2 files changed, 56 insertions(+), 9 deletions(-)

diff --git a/packages/core/src/components/IconButton/__stories__/IconButton.mdx b/packages/core/src/components/IconButton/__stories__/IconButton.mdx
index e9a95d6bc1..d8eca001d7 100644
--- a/packages/core/src/components/IconButton/__stories__/IconButton.mdx
+++ b/packages/core/src/components/IconButton/__stories__/IconButton.mdx
@@ -1,5 +1,4 @@
-import { Canvas, Meta } from "@storybook/blocks";
-import { Link } from "vibe-storybook-components";
+import { Meta } from "@storybook/blocks";
 import IconButton from "../IconButton";
 import DialogContentContainer from "../../DialogContentContainer/DialogContentContainer";
 import { Add, Bolt, Broom, HighlightColorBucket, Pin, Show } from "../../Icon/Icons";
diff --git a/packages/core/src/components/IconButton/__stories__/IconButton.stories.tsx b/packages/core/src/components/IconButton/__stories__/IconButton.stories.tsx
index 9718fb47e3..15b4a6139c 100644
--- a/packages/core/src/components/IconButton/__stories__/IconButton.stories.tsx
+++ b/packages/core/src/components/IconButton/__stories__/IconButton.stories.tsx
@@ -32,10 +32,16 @@ export default {
 
 export const Overview: Story = {
   render: iconButtonTemplate.bind({}),
-
   args: {
     ariaLabel: "Add",
     icon: Add
+  },
+  parameters: {
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
+    }
   }
 };
 
@@ -53,7 +59,14 @@ export const Kinds: Story = {
       <IconButton icon={Bolt} kind={IconButton.kinds.SECONDARY} ariaLabel="My secondary IconButton" />
       <IconButton icon={Bolt} kind={IconButton.kinds.TERTIARY} ariaLabel="My tertiary IconButton" />
     </div>
-  )
+  ),
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { Bolt }
+      }
+    }
+  }
 };
 
 export const Sizes: Story = {
@@ -102,7 +115,14 @@ export const Sizes: Story = {
         ariaLabel="My large IconButton"
       />
     </div>
-  )
+  ),
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { Robot }
+      }
+    }
+  }
 };
 
 export const Active: Story = {
@@ -119,7 +139,14 @@ export const Active: Story = {
       <IconButton icon={Doc} kind={IconButton.kinds.SECONDARY} ariaLabel="My active medium IconButton" active />
       <IconButton icon={Doc} kind={IconButton.kinds.TERTIARY} ariaLabel="My active large IconButton" active />
     </div>
-  )
+  ),
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { Doc }
+      }
+    }
+  }
 };
 
 export const Disabled: Story = {
@@ -154,7 +181,14 @@ export const Disabled: Story = {
         disabledReason="This function is not available"
       />
     </div>
-  )
+  ),
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { Doc }
+      }
+    }
+  }
 };
 
 export const IconButtonAsToolbarButton: Story = {
@@ -174,7 +208,14 @@ export const IconButtonAsToolbarButton: Story = {
       </Flex>
       <div className={styles.dashboardContent} />
     </Flex>
-  )
+  ),
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { styles, Drag, Filter }
+      }
+    }
+  }
 };
 
 export const IconButtonAsCloseButton: Story = {
@@ -237,5 +278,12 @@ export const IconButtonAsCloseButton: Story = {
       </Flex>
       <IconButton icon={CloseSmall} size={IconButton.sizes.SMALL} ariaLabel="Remove from Recycle bin" />
     </>
-  )
+  ),
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { styles, person1, Item, Time, CloseSmall }
+      }
+    }
+  }
 };

From 6c6b98bc77000f8e5b78f25f8e873c7cb0b03fe0 Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Mon, 22 Apr 2024 01:46:08 +0300
Subject: [PATCH 13/32] docs(MenuButton): align story's TS

---
 .../__stories__/MenuButton.stories.tsx        | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/core/src/components/MenuButton/__stories__/MenuButton.stories.tsx b/packages/core/src/components/MenuButton/__stories__/MenuButton.stories.tsx
index 39be8babc0..d71f3318c9 100644
--- a/packages/core/src/components/MenuButton/__stories__/MenuButton.stories.tsx
+++ b/packages/core/src/components/MenuButton/__stories__/MenuButton.stories.tsx
@@ -6,6 +6,9 @@ import { Button, Menu, MenuItem } from "../../index";
 import { DropdownChevronDown, Favorite, Moon, Sun } from "../../Icon/Icons";
 import MoveArrowDown from "../../Icon/Icons/components/MoveArrowDown";
 import React, { useRef } from "react";
+import { Meta, StoryObj } from "@storybook/react";
+
+type Story = StoryObj<typeof MenuButton>;
 
 const metaSettings = createStoryMetaSettingsDecorator({
   component: MenuButton,
@@ -19,11 +22,11 @@ export default {
   component: MenuButton,
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators
-};
+} satisfies Meta<typeof MenuButton>;
 
 const menuButtonTemplate = createComponentTemplate(MenuButton);
 
-export const Overview = {
+export const Overview: Story = {
   render: menuButtonTemplate.bind({}),
   name: "Overview",
 
@@ -38,7 +41,7 @@ export const Overview = {
   }
 };
 
-export const Sizes = {
+export const Sizes: Story = {
   render: () => (
     <>
       <MenuButton size={MenuButton.sizes.XXS}>
@@ -82,7 +85,7 @@ export const Sizes = {
   name: "Sizes"
 };
 
-export const DifferentIcon = {
+export const DifferentIcon: Story = {
   render: () => (
     <MenuButton component={MoveArrowDown}>
       <Menu id="menu" size={Menu.sizes.MEDIUM}>
@@ -96,7 +99,7 @@ export const DifferentIcon = {
   name: "Different Icon"
 };
 
-export const WithText = {
+export const WithText: Story = {
   render: () => (
     <div
       style={{
@@ -116,7 +119,7 @@ export const WithText = {
   name: "With Text"
 };
 
-export const WithTextAndIconAtTheEnd = {
+export const WithTextAndIconAtTheEnd: Story = {
   render: () => (
     <div
       style={{
@@ -136,7 +139,7 @@ export const WithTextAndIconAtTheEnd = {
   name: "With Text and Icon at the end"
 };
 
-export const Disabled = {
+export const Disabled: Story = {
   render: () => (
     <MenuButton disabled tooltipContent="This action is not available now">
       <Menu id="menu" size={Menu.sizes.MEDIUM}>
@@ -150,7 +153,7 @@ export const Disabled = {
   name: "Disabled"
 };
 
-export const CustomTriggerElement = {
+export const CustomTriggerElement: Story = {
   render: () => {
     const ref = useRef(null);
 

From 695633086ddfc92ea1686e8ba50ad40fea2d9ae8 Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Mon, 22 Apr 2024 01:46:25 +0300
Subject: [PATCH 14/32] docs(MenuButton): allow LiveEdit

---
 .../MenuButton/__stories__/MenuButton.mdx     |  2 +-
 .../__stories__/MenuButton.stories.tsx        | 63 ++++++++++++++-----
 2 files changed, 50 insertions(+), 15 deletions(-)

diff --git a/packages/core/src/components/MenuButton/__stories__/MenuButton.mdx b/packages/core/src/components/MenuButton/__stories__/MenuButton.mdx
index 458f368f33..649ab8e44e 100644
--- a/packages/core/src/components/MenuButton/__stories__/MenuButton.mdx
+++ b/packages/core/src/components/MenuButton/__stories__/MenuButton.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/blocks";
 import {
   BUTTON,
   ICON_BUTTON,
diff --git a/packages/core/src/components/MenuButton/__stories__/MenuButton.stories.tsx b/packages/core/src/components/MenuButton/__stories__/MenuButton.stories.tsx
index d71f3318c9..0c47aae425 100644
--- a/packages/core/src/components/MenuButton/__stories__/MenuButton.stories.tsx
+++ b/packages/core/src/components/MenuButton/__stories__/MenuButton.stories.tsx
@@ -28,8 +28,6 @@ const menuButtonTemplate = createComponentTemplate(MenuButton);
 
 export const Overview: Story = {
   render: menuButtonTemplate.bind({}),
-  name: "Overview",
-
   args: {
     children: (
       <Menu id="menu" size={Menu.sizes.MEDIUM}>
@@ -38,6 +36,13 @@ export const Overview: Story = {
         <MenuItem icon={Favorite} onClick={NOOP} iconType={MenuItem.iconType.SVG} title="And the stars" />
       </Menu>
     )
+  },
+  parameters: {
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
+    }
   }
 };
 
@@ -81,8 +86,13 @@ export const Sizes: Story = {
       </MenuButton>
     </>
   ),
-
-  name: "Sizes"
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { NOOP, Sun, Moon, Favorite }
+      }
+    }
+  }
 };
 
 export const DifferentIcon: Story = {
@@ -95,8 +105,13 @@ export const DifferentIcon: Story = {
       </Menu>
     </MenuButton>
   ),
-
-  name: "Different Icon"
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { NOOP, MoveArrowDown, Sun, Moon, Favorite }
+      }
+    }
+  }
 };
 
 export const WithText: Story = {
@@ -115,8 +130,13 @@ export const WithText: Story = {
       </MenuButton>
     </div>
   ),
-
-  name: "With Text"
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { NOOP, Sun, Moon, Favorite }
+      }
+    }
+  }
 };
 
 export const WithTextAndIconAtTheEnd: Story = {
@@ -135,8 +155,13 @@ export const WithTextAndIconAtTheEnd: Story = {
       </MenuButton>
     </div>
   ),
-
-  name: "With Text and Icon at the end"
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { NOOP, DropdownChevronDown, Sun, Moon, Favorite }
+      }
+    }
+  }
 };
 
 export const Disabled: Story = {
@@ -149,8 +174,13 @@ export const Disabled: Story = {
       </Menu>
     </MenuButton>
   ),
-
-  name: "Disabled"
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { NOOP, Sun, Moon, Favorite }
+      }
+    }
+  }
 };
 
 export const CustomTriggerElement: Story = {
@@ -173,6 +203,11 @@ export const CustomTriggerElement: Story = {
       </MenuButton>
     );
   },
-
-  name: "Custom Trigger Element"
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { NOOP, Sun, Moon, Favorite }
+      }
+    }
+  }
 };

From f82c99e68ac5fdd757f338f58cd72af1876a66ab Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Mon, 22 Apr 2024 01:54:45 +0300
Subject: [PATCH 15/32] docs(Checkbox): align story's TS

---
 .../Checkbox/__stories__/checkbox.stories.tsx | 27 +++++++++++--------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/packages/core/src/components/Checkbox/__stories__/checkbox.stories.tsx b/packages/core/src/components/Checkbox/__stories__/checkbox.stories.tsx
index faef84e7a1..7e1e36dd16 100644
--- a/packages/core/src/components/Checkbox/__stories__/checkbox.stories.tsx
+++ b/packages/core/src/components/Checkbox/__stories__/checkbox.stories.tsx
@@ -2,6 +2,9 @@ import { createComponentTemplate, Link } from "vibe-storybook-components";
 import Checkbox from "../Checkbox";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";
 import "./checkbox.stories.scss";
+import { Meta, StoryObj } from "@storybook/react";
+
+type Story = StoryObj<typeof Checkbox>;
 
 const metaSettings = createStoryMetaSettingsDecorator({ component: Checkbox });
 const checkboxTemplate = createComponentTemplate(Checkbox);
@@ -10,19 +13,24 @@ export default {
   title: "Inputs/Checkbox",
   component: Checkbox,
   decorators: metaSettings.decorators
-};
+} satisfies Meta<typeof Checkbox>;
 
-export const Overview = {
+export const Overview: Story = {
   render: checkboxTemplate.bind({}),
-  name: "Overview",
-
   args: {
     label: "Option",
     defaultChecked: true
+  },
+  parameters: {
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
+    }
   }
 };
 
-export const States = {
+export const States: Story = {
   render: () => (
     <>
       <Checkbox label="Regular" />
@@ -32,11 +40,10 @@ export const States = {
       <Checkbox label="Disabled checked" disabled checked />
       <Checkbox label="Disabled indeterminate" disabled indeterminate />
     </>
-  ),
-  name: "States"
+  )
 };
 
-export const SingleCheckbox = {
+export const SingleCheckbox: Story = {
   render: () => (
     <Checkbox
       checked
@@ -54,7 +61,5 @@ export const SingleCheckbox = {
         </>
       }
     />
-  ),
-
-  name: "Single checkbox"
+  )
 };

From 52c2777567d8f31182c3354edbd89eecb16a757f Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Mon, 22 Apr 2024 02:05:44 +0300
Subject: [PATCH 16/32] docs(MenuButton): allow LiveEdit (excluding one story
 `SingleCheckbox`)

---
 .../src/components/Checkbox/__stories__/checkbox.mdx     | 2 +-
 .../components/Checkbox/__stories__/checkbox.stories.tsx | 9 ++++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/components/Checkbox/__stories__/checkbox.mdx b/packages/core/src/components/Checkbox/__stories__/checkbox.mdx
index 61ffefdc42..6a0efde4ab 100644
--- a/packages/core/src/components/Checkbox/__stories__/checkbox.mdx
+++ b/packages/core/src/components/Checkbox/__stories__/checkbox.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/blocks";
 import Checkbox from "../Checkbox";
 import { createComponentTemplate, Link } from "vibe-storybook-components";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";
diff --git a/packages/core/src/components/Checkbox/__stories__/checkbox.stories.tsx b/packages/core/src/components/Checkbox/__stories__/checkbox.stories.tsx
index 7e1e36dd16..f4ed119da7 100644
--- a/packages/core/src/components/Checkbox/__stories__/checkbox.stories.tsx
+++ b/packages/core/src/components/Checkbox/__stories__/checkbox.stories.tsx
@@ -61,5 +61,12 @@ export const SingleCheckbox: Story = {
         </>
       }
     />
-  )
+  ),
+  parameters: {
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
+    }
+  }
 };

From 15b96a6769664675f866961c9857d4e2ea07a4a7 Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Mon, 22 Apr 2024 02:22:51 +0300
Subject: [PATCH 17/32] docs(Combobox): allow LiveEdit

---
 .../Combobox/__stories__/combobox.mdx         |  3 +-
 .../Combobox/__stories__/combobox.stories.js  | 80 ++++++++++++-------
 2 files changed, 54 insertions(+), 29 deletions(-)

diff --git a/packages/core/src/components/Combobox/__stories__/combobox.mdx b/packages/core/src/components/Combobox/__stories__/combobox.mdx
index 36e82aa152..b8fa98f51e 100644
--- a/packages/core/src/components/Combobox/__stories__/combobox.mdx
+++ b/packages/core/src/components/Combobox/__stories__/combobox.mdx
@@ -1,5 +1,4 @@
-import { Canvas, Meta } from "@storybook/blocks";
-import { Link } from "vibe-storybook-components";
+import { Meta } from "@storybook/blocks";
 import Combobox from "../Combobox";
 import DialogContentContainer from "../../DialogContentContainer/DialogContentContainer";
 import { DROPDOWN, MENU, SEARCH } from "../../../storybook/components/related-components/component-description-map";
diff --git a/packages/core/src/components/Combobox/__stories__/combobox.stories.js b/packages/core/src/components/Combobox/__stories__/combobox.stories.js
index a08efc3374..0c8209b3ba 100644
--- a/packages/core/src/components/Combobox/__stories__/combobox.stories.js
+++ b/packages/core/src/components/Combobox/__stories__/combobox.stories.js
@@ -40,8 +40,6 @@ const comboboxTemplate = args => {
 
 export const Overview = {
   render: comboboxTemplate.bind({}),
-  name: "Overview",
-
   args: {
     options: [
       {
@@ -61,6 +59,13 @@ export const Overview = {
     onClick: () => alert("clicked"),
     placeholder: "Placeholder text here",
     clearFilterOnSelection: true
+  },
+  parameters: {
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
+    }
   }
 };
 
@@ -86,8 +91,6 @@ export const Default = {
 
     return <Combobox placeholder="Placeholder text here" options={options} />;
   },
-
-  name: "Default",
   play: defaultPlaySuite
 };
 
@@ -124,9 +127,7 @@ export const ComboboxInsideADialog = {
         <Combobox options={options} placeholder="Placeholder text here" />
       </DialogContentContainer>
     );
-  },
-
-  name: "Combobox inside a dialog"
+  }
 };
 
 export const Sizes = {
@@ -170,9 +171,7 @@ export const Sizes = {
         </DialogContentContainer>
       </div>
     );
-  },
-
-  name: "Sizes"
+  }
 };
 
 export const WithCategories = {
@@ -273,8 +272,13 @@ export const WithCategories = {
       </Flex>
     );
   },
-
-  name: "With categories"
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { StoryDescription }
+      }
+    }
+  }
 };
 
 export const WithIcons = {
@@ -316,8 +320,13 @@ export const WithIcons = {
       </DialogContentContainer>
     );
   },
-
-  name: "With icons"
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { Wand, ThumbsUp, Time, Update, Upgrade }
+      }
+    }
+  }
 };
 
 export const WithOptionRenderer = {
@@ -352,8 +361,13 @@ export const WithOptionRenderer = {
       </DialogContentContainer>
     );
   },
-
-  name: "With optionRenderer"
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { Person }
+      }
+    }
+  }
 };
 
 export const WithButton = {
@@ -398,8 +412,13 @@ export const WithButton = {
       </DialogContentContainer>
     );
   },
-
-  name: "With Button"
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { Wand, ThumbsUp, Time, Update, Upgrade, Edit }
+      }
+    }
+  }
 };
 
 export const WithCreation = {
@@ -424,9 +443,7 @@ export const WithCreation = {
         />
       </DialogContentContainer>
     );
-  },
-
-  name: "With Creation"
+  }
 };
 
 export const WithVirtualizationOptimization = {
@@ -642,8 +659,13 @@ export const WithVirtualizationOptimization = {
       </Flex>
     );
   },
-
-  name: "With virtualization optimization"
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { StoryDescription }
+      }
+    }
+  }
 };
 
 export const LoadingState = {
@@ -655,9 +677,7 @@ export const LoadingState = {
         <Combobox loading options={options} placeholder="Board name" />
       </DialogContentContainer>
     );
-  },
-
-  name: "Loading state"
+  }
 };
 
 export const ComboboxAsPersonPicker = {
@@ -735,5 +755,11 @@ export const ComboboxAsPersonPicker = {
     );
   },
 
-  name: "Combobox as person picker"
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { person1, person2, person3, optionRenderer }
+      }
+    }
+  }
 };

From b2ec9286538bf144a15e76904cb09b270c3e8ca9 Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Mon, 22 Apr 2024 02:36:03 +0300
Subject: [PATCH 18/32] docs(Dropdown): allow LiveEdit

---
 .../Dropdown/__stories__/dropdown.mdx         |   2 +-
 .../Dropdown/__stories__/dropdown.stories.js  | 119 ++++++++++--------
 2 files changed, 68 insertions(+), 53 deletions(-)

diff --git a/packages/core/src/components/Dropdown/__stories__/dropdown.mdx b/packages/core/src/components/Dropdown/__stories__/dropdown.mdx
index eb873be5cb..cbcbcb7c5c 100644
--- a/packages/core/src/components/Dropdown/__stories__/dropdown.mdx
+++ b/packages/core/src/components/Dropdown/__stories__/dropdown.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/blocks";
 import { Link } from "vibe-storybook-components";
 import {
   COMBOBOX,
diff --git a/packages/core/src/components/Dropdown/__stories__/dropdown.stories.js b/packages/core/src/components/Dropdown/__stories__/dropdown.stories.js
index 99ece63eb5..2710dce753 100644
--- a/packages/core/src/components/Dropdown/__stories__/dropdown.stories.js
+++ b/packages/core/src/components/Dropdown/__stories__/dropdown.stories.js
@@ -55,7 +55,6 @@ const dropdownTemplate = props => {
 
 export const Overview = {
   render: dropdownTemplate.bind({}),
-  name: "Overview",
   args: {
     placeholder: "Placeholder text here",
     className: "dropdown-stories-styles_spacing"
@@ -64,6 +63,11 @@ export const Overview = {
     controls: {
       // TODO: remove exclusion when prop is removed in next major
       exclude: ["withReadOnlyStyle"]
+    },
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
     }
   },
   play: overviewPlaySuite
@@ -76,9 +80,7 @@ export const Sizes = {
       <Dropdown placeholder="Medium" size={Dropdown.sizes.MEDIUM} className="dropdown-stories-styles_spacing" />
       <Dropdown placeholder="Large" size={Dropdown.sizes.LARGE} className="dropdown-stories-styles_spacing" />
     </>
-  ),
-
-  name: "Sizes"
+  )
 };
 
 export const Disabled = {
@@ -113,9 +115,7 @@ export const Disabled = {
         />
       </Flex>
     );
-  },
-
-  name: "Disabled"
+  }
 };
 
 export const Readonly = {
@@ -150,9 +150,7 @@ export const Readonly = {
         />
       </Flex>
     );
-  },
-
-  name: "Readonly"
+  }
 };
 
 export const Rtl = {
@@ -161,9 +159,7 @@ export const Rtl = {
       <Dropdown placeholder="Left to right (default)" className="dropdown-stories-styles_spacing" />
       <Dropdown placeholder="מימין לשמאל" className="dropdown-stories-styles_spacing" rtl />
     </>
-  ),
-
-  name: "RTL"
+  )
 };
 
 export const MultiChoiceWithDifferentStates = {
@@ -268,9 +264,14 @@ export const MultiChoiceWithDifferentStates = {
       </Flex>
     );
   },
-
-  name: "Multi-choice with different states",
-  play: multiInteractionTests
+  play: multiInteractionTests,
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { StoryDescription }
+      }
+    }
+  }
 };
 
 export const AsyncOptions = {
@@ -299,9 +300,7 @@ export const AsyncOptions = {
         <Dropdown asyncOptions={fetchUserOptions} placeholder="Async options" cacheOptions defaultOptions />
       </div>
     );
-  },
-
-  name: "Async Dropdown"
+  }
 };
 
 export const DropdownWithAvatar = {
@@ -352,8 +351,13 @@ export const DropdownWithAvatar = {
       </Flex>
     );
   },
-
-  name: "Dropdown with avatar"
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { person1, person2, person3, StoryDescription }
+      }
+    }
+  }
 };
 
 export const DropdownWithIcon = {
@@ -399,8 +403,13 @@ export const DropdownWithIcon = {
       </Flex>
     );
   },
-
-  name: "Dropdown with icon"
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { Email, Attach, StoryDescription }
+      }
+    }
+  }
 };
 
 export const DropdownWithChipColors = {
@@ -440,8 +449,13 @@ export const DropdownWithChipColors = {
       </StoryDescription>
     );
   },
-
-  name: "Dropdown with chip colors"
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { StoryDescription }
+      }
+    }
+  }
 };
 
 export const DropdownWithTooltipsOnItems = {
@@ -480,8 +494,13 @@ export const DropdownWithTooltipsOnItems = {
       </StoryDescription>
     );
   },
-
-  name: "Dropdown with tooltips on items"
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { StoryDescription }
+      }
+    }
+  }
 };
 
 export const DropdownWithChips = {
@@ -530,8 +549,13 @@ export const DropdownWithChips = {
       />
     );
   },
-
-  name: "Dropdown with chips"
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { person1, person2, person3, OptionRenderer }
+      }
+    }
+  }
 };
 
 export const SearchableDropdown = {
@@ -589,9 +613,7 @@ export const SearchableDropdown = {
         onInputChange={onInputChange}
       />
     );
-  },
-
-  name: "Searchable dropdown"
+  }
 };
 
 export const DropdownWithLabels = {
@@ -630,9 +652,7 @@ export const DropdownWithLabels = {
         valueRenderer={labelRenderer}
       />
     );
-  },
-
-  name: "Dropdown with labels"
+  }
 };
 
 export const DropdownInsideAForm = {
@@ -666,9 +686,7 @@ export const DropdownInsideAForm = {
         />
       </div>
     );
-  },
-
-  name: "Dropdown inside a form"
+  }
 };
 
 export const DropdownWithGroups = {
@@ -710,9 +728,7 @@ export const DropdownWithGroups = {
     return (
       <Dropdown placeholder="Placeholder text here" options={options} className="dropdown-stories-styles_big-spacing" />
     );
-  },
-
-  name: "Dropdown with groups"
+  }
 };
 
 export const DropdownInsidePopover = {
@@ -818,8 +834,13 @@ export const DropdownInsidePopover = {
       </Flex>
     );
   },
-
-  name: "Dropdown inside popover"
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { ModalExampleContent }
+      }
+    }
+  }
 };
 
 export const DropdownWithLoading = {
@@ -862,9 +883,7 @@ export const DropdownWithLoading = {
         onInputChange={loadingOnInputChange}
       />
     );
-  },
-
-  name: "Dropdown with loading"
+  }
 };
 
 export const DropdownWithRef = {
@@ -907,9 +926,7 @@ export const DropdownWithRef = {
         </Button>
       </Flex>
     );
-  },
-
-  name: "Dropdown with ref"
+  }
 };
 
 export const DropdownValueSelection = {
@@ -943,7 +960,5 @@ export const DropdownValueSelection = {
         />
       </Flex>
     );
-  },
-
-  name: "Dropdown value selection"
+  }
 };

From c60e54cf4f99ef64c640593dcea1fa5160db46d7 Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Mon, 22 Apr 2024 02:38:54 +0300
Subject: [PATCH 19/32] docs(EditableHeading): allow LiveEdit

---
 .../__stories__/EditableHeading.mdx             |  2 +-
 .../__stories__/EditableHeading.stories.js      | 17 +++++++++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/components/EditableHeading/__stories__/EditableHeading.mdx b/packages/core/src/components/EditableHeading/__stories__/EditableHeading.mdx
index 0e59f0d19b..4b317b3c09 100644
--- a/packages/core/src/components/EditableHeading/__stories__/EditableHeading.mdx
+++ b/packages/core/src/components/EditableHeading/__stories__/EditableHeading.mdx
@@ -1,5 +1,5 @@
 import EditableHeading from "../EditableHeading";
-import { Canvas, Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/blocks";
 import { createComponentTemplate } from "vibe-storybook-components";
 import {
   EDITABLE_TEXT,
diff --git a/packages/core/src/components/EditableHeading/__stories__/EditableHeading.stories.js b/packages/core/src/components/EditableHeading/__stories__/EditableHeading.stories.js
index 7c893f5f38..8c70c478e6 100644
--- a/packages/core/src/components/EditableHeading/__stories__/EditableHeading.stories.js
+++ b/packages/core/src/components/EditableHeading/__stories__/EditableHeading.stories.js
@@ -26,7 +26,14 @@ export const Overview = {
     value: "This heading is an editable heading",
     type: EditableHeading.types.H1
   },
-  play: overviewPlaySuite
+  play: overviewPlaySuite,
+  parameters: {
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
+    }
+  }
 };
 
 export const Types = {
@@ -94,5 +101,11 @@ export const Types = {
       </div>
     </div>
   ),
-  name: "Types"
+  parameters: {
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
+    }
+  }
 };

From a6efb5e6f8cf34e368b5095000fc6e839aa795dd Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Mon, 22 Apr 2024 02:42:06 +0300
Subject: [PATCH 20/32] docs(EditableText): allow LiveEdit

---
 .../EditableText/__stories__/EditableText.mdx   |  2 +-
 .../__stories__/EditableText.stories.js         | 17 +++++++++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/components/EditableText/__stories__/EditableText.mdx b/packages/core/src/components/EditableText/__stories__/EditableText.mdx
index dd36c0b063..d38cc73ec3 100644
--- a/packages/core/src/components/EditableText/__stories__/EditableText.mdx
+++ b/packages/core/src/components/EditableText/__stories__/EditableText.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/blocks";
 import {
   EDITABLE_HEADING,
   HEADING,
diff --git a/packages/core/src/components/EditableText/__stories__/EditableText.stories.js b/packages/core/src/components/EditableText/__stories__/EditableText.stories.js
index e6f5b874e5..7d2b21a318 100644
--- a/packages/core/src/components/EditableText/__stories__/EditableText.stories.js
+++ b/packages/core/src/components/EditableText/__stories__/EditableText.stories.js
@@ -26,7 +26,14 @@ export const Overview = {
     value: "This text is an editable text",
     type: EditableText.types.TEXT2
   },
-  play: overviewPlaySuite
+  play: overviewPlaySuite,
+  parameters: {
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
+    }
+  }
 };
 
 export const Types = {
@@ -88,5 +95,11 @@ export const Types = {
       </div>
     </div>
   ),
-  name: "Types"
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { styles }
+      }
+    }
+  }
 };

From 4ec8f804d9c9997c3674e4cec1a2ba68084eda00 Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Mon, 22 Apr 2024 02:44:21 +0300
Subject: [PATCH 21/32] docs: remove name overview

---
 .../EditableHeading/__stories__/EditableHeading.stories.js       | 1 -
 .../components/EditableText/__stories__/EditableText.stories.js  | 1 -
 2 files changed, 2 deletions(-)

diff --git a/packages/core/src/components/EditableHeading/__stories__/EditableHeading.stories.js b/packages/core/src/components/EditableHeading/__stories__/EditableHeading.stories.js
index 8c70c478e6..66023b3793 100644
--- a/packages/core/src/components/EditableHeading/__stories__/EditableHeading.stories.js
+++ b/packages/core/src/components/EditableHeading/__stories__/EditableHeading.stories.js
@@ -21,7 +21,6 @@ const editableHeadingTemplate = createComponentTemplate(EditableHeading);
 
 export const Overview = {
   render: editableHeadingTemplate.bind({}),
-  name: "Overview",
   args: {
     value: "This heading is an editable heading",
     type: EditableHeading.types.H1
diff --git a/packages/core/src/components/EditableText/__stories__/EditableText.stories.js b/packages/core/src/components/EditableText/__stories__/EditableText.stories.js
index 7d2b21a318..4ad6253b6c 100644
--- a/packages/core/src/components/EditableText/__stories__/EditableText.stories.js
+++ b/packages/core/src/components/EditableText/__stories__/EditableText.stories.js
@@ -21,7 +21,6 @@ const EditableTextTemplate = createComponentTemplate(EditableText);
 
 export const Overview = {
   render: EditableTextTemplate.bind({}),
-  name: "Overview",
   args: {
     value: "This text is an editable text",
     type: EditableText.types.TEXT2

From ab67b9e9463feecf30e88e37066eb4bf3d6397fc Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Mon, 22 Apr 2024 02:46:12 +0300
Subject: [PATCH 22/32] docs(RadioButton): allow LiveEdit

---
 .../RadioButton/__stories__/radioButton.mdx       |  3 +--
 .../__stories__/radioButton.stories.js            | 15 ++++++++-------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/core/src/components/RadioButton/__stories__/radioButton.mdx b/packages/core/src/components/RadioButton/__stories__/radioButton.mdx
index 4e52fe4ad3..16271bab77 100644
--- a/packages/core/src/components/RadioButton/__stories__/radioButton.mdx
+++ b/packages/core/src/components/RadioButton/__stories__/radioButton.mdx
@@ -1,5 +1,4 @@
-import { Canvas, Meta } from "@storybook/blocks";
-import { Link } from "vibe-storybook-components";
+import { Meta } from "@storybook/blocks";
 import RadioButton from "../RadioButton";
 import { CHECKBOX, DROPDOWN, TOGGLE } from "../../../storybook/components/related-components/component-description-map";
 import DialogContentContainer from "../../DialogContentContainer/DialogContentContainer";
diff --git a/packages/core/src/components/RadioButton/__stories__/radioButton.stories.js b/packages/core/src/components/RadioButton/__stories__/radioButton.stories.js
index e5b5b42671..57f5c1453a 100644
--- a/packages/core/src/components/RadioButton/__stories__/radioButton.stories.js
+++ b/packages/core/src/components/RadioButton/__stories__/radioButton.stories.js
@@ -15,10 +15,15 @@ export default {
 
 export const Overview = {
   render: radioButtonTemplate.bind({}),
-  name: "Overview",
-
   args: {
     text: "Selection"
+  },
+  parameters: {
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
+    }
   }
 };
 
@@ -30,8 +35,7 @@ export const States = {
       <RadioButton text="Disabled" disabled disabledReason="Disabled reason" />
       <RadioButton text="Disabled" checked disabled />
     </>
-  ),
-  name: "States"
+  )
 };
 
 export const RadioButtonInItemsList = {
@@ -43,8 +47,6 @@ export const RadioButtonInItemsList = {
       <RadioButton text="All updates" name="radio-buttons-group-4" />
     </div>
   ),
-
-  name: "Radio button in items list",
   play: clickRadioButtonPlaySuite
 };
 
@@ -68,6 +70,5 @@ export const ControlledRadioButtons = {
       </div>
     );
   },
-  name: "Controlled Radio buttons",
   play: controlRadioButtonPlaySuite
 };

From b0c70f8d09f52e6a3d39106f00ae1101815100f7 Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Mon, 22 Apr 2024 02:50:53 +0300
Subject: [PATCH 23/32] fix(withLiveEdit): user scope should have highest
 hierarchy

---
 .../decorators/withLiveEdit/LiveContent/LiveContent.tsx        | 2 +-
 .../src/storybook/decorators/withLiveEdit/withLiveEdit.tsx     | 3 ---
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/core/src/storybook/decorators/withLiveEdit/LiveContent/LiveContent.tsx b/packages/core/src/storybook/decorators/withLiveEdit/LiveContent/LiveContent.tsx
index 24dc8610ad..0476a1c660 100644
--- a/packages/core/src/storybook/decorators/withLiveEdit/LiveContent/LiveContent.tsx
+++ b/packages/core/src/storybook/decorators/withLiveEdit/LiveContent/LiveContent.tsx
@@ -21,7 +21,7 @@ const LiveContent = ({ code, scope, decorators, context }: LiveContentProps) =>
   const content: React.JSX.Element = (
     <>
       <div className={styles.modifiedVersionIndicator}>Modified Version</div>
-      <LiveProvider code={code} scope={{ ...scope, ...vibeScope, ...reactCommonHooksScope }} enableTypeScript>
+      <LiveProvider code={code} scope={{ ...vibeScope, ...reactCommonHooksScope, ...scope }} enableTypeScript>
         <LivePreview />
       </LiveProvider>
     </>
diff --git a/packages/core/src/storybook/decorators/withLiveEdit/withLiveEdit.tsx b/packages/core/src/storybook/decorators/withLiveEdit/withLiveEdit.tsx
index 22520fb81d..6b3e7d2481 100644
--- a/packages/core/src/storybook/decorators/withLiveEdit/withLiveEdit.tsx
+++ b/packages/core/src/storybook/decorators/withLiveEdit/withLiveEdit.tsx
@@ -2,9 +2,6 @@ import { Decorator, StoryContext } from "@storybook/react";
 import { useMemo, useRef, useState } from "react";
 import { vscodeDark } from "@uiw/codemirror-theme-vscode";
 import { langs } from "@uiw/codemirror-extensions-langs";
-import * as VibeComponents from "../../../components";
-import * as VibeComponentsNext from "../../../next";
-import * as VibeIcons from "../../../components/Icon/Icons";
 import { createPortal } from "react-dom";
 import LiveEditor from "../../components/live-editor/LiveEditor";
 import { formatCode } from "./utils/prettier-utils";

From f8409c70b769b4c461dbc870726a30965ffed928 Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Mon, 22 Apr 2024 02:53:20 +0300
Subject: [PATCH 24/32] docs(Search): allow LiveEdit

---
 .../__stories__/EditableHeading.stories.js    |  2 +-
 .../components/Search/__stories__/Search.mdx  |  2 +-
 .../Search/__stories__/Search.stories.tsx     | 44 ++++++++++++++-----
 3 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/packages/core/src/components/EditableHeading/__stories__/EditableHeading.stories.js b/packages/core/src/components/EditableHeading/__stories__/EditableHeading.stories.js
index 66023b3793..2654ce1858 100644
--- a/packages/core/src/components/EditableHeading/__stories__/EditableHeading.stories.js
+++ b/packages/core/src/components/EditableHeading/__stories__/EditableHeading.stories.js
@@ -103,7 +103,7 @@ export const Types = {
   parameters: {
     docs: {
       liveEdit: {
-        isEnabled: false
+        scope: { EditableHeading }
       }
     }
   }
diff --git a/packages/core/src/components/Search/__stories__/Search.mdx b/packages/core/src/components/Search/__stories__/Search.mdx
index fa3c794d2a..c686e03aae 100644
--- a/packages/core/src/components/Search/__stories__/Search.mdx
+++ b/packages/core/src/components/Search/__stories__/Search.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/blocks";
 import { StorybookLink, Tip, UsageGuidelines } from "vibe-storybook-components";
 import {
   COMBOBOX,
diff --git a/packages/core/src/components/Search/__stories__/Search.stories.tsx b/packages/core/src/components/Search/__stories__/Search.stories.tsx
index b40c793a01..ac099a0ff9 100644
--- a/packages/core/src/components/Search/__stories__/Search.stories.tsx
+++ b/packages/core/src/components/Search/__stories__/Search.stories.tsx
@@ -4,7 +4,7 @@ import { createStoryMetaSettingsDecorator } from "../../../storybook";
 import DialogContentContainer from "../../DialogContentContainer/DialogContentContainer";
 import Combobox from "../../Combobox/Combobox";
 import Flex from "../../Flex/Flex";
-import { Decorator, StoryObj } from "@storybook/react";
+import { Decorator, Meta, StoryObj } from "@storybook/react";
 import IconButton from "../../IconButton/IconButton";
 import FilterIcon from "../../Icon/Icons/components/Filter";
 
@@ -20,7 +20,7 @@ export default {
   component: Search,
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators
-};
+} satisfies Meta<typeof Search>;
 
 type Story = StoryObj<typeof Search>;
 
@@ -32,10 +32,15 @@ const withFixedWidth: Decorator = Story => (
 
 export const Overview: Story = {
   render: searchTemplate.bind({}),
-  name: "Overview",
-
   args: { placeholder: "Placeholder text here" },
-  decorators: [withFixedWidth]
+  decorators: [withFixedWidth],
+  parameters: {
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
+    }
+  }
 };
 
 export const Sizes: Story = {
@@ -46,7 +51,6 @@ export const Sizes: Story = {
       <Search placeholder="Large" size="large" />
     </>
   ),
-
   decorators: [
     Story => (
       <Flex direction={Flex.directions.COLUMN} justify={Flex.justify.START} gap={Flex.gaps.MEDIUM}>
@@ -54,7 +58,14 @@ export const Sizes: Story = {
       </Flex>
     ),
     withFixedWidth
-  ]
+  ],
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { Search }
+      }
+    }
+  }
 };
 
 export const WithAdditionalAction: Story = {
@@ -64,8 +75,14 @@ export const WithAdditionalAction: Story = {
       renderAction={<IconButton icon={FilterIcon} ariaLabel="Filter results" size={IconButton.sizes.SMALL} />}
     />
   ),
-
-  decorators: [withFixedWidth]
+  decorators: [withFixedWidth],
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { Search, FilterIcon }
+      }
+    }
+  }
 };
 
 const options = [
@@ -102,5 +119,12 @@ export const FilterInCombobox: Story = {
       </DialogContentContainer>
     ),
     withFixedWidth
-  ]
+  ],
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { options }
+      }
+    }
+  }
 };

From e71393a566bf7d12bc1f82fc3e6a5c0e3548aa44 Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Mon, 22 Apr 2024 02:57:35 +0300
Subject: [PATCH 25/32] docs(Slider): allow LiveEdit

---
 .../components/Slider/__stories__/Slider.mdx  |  2 +-
 .../Slider/__stories__/Slider.stories.js      | 39 ++++++++++---------
 2 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/packages/core/src/components/Slider/__stories__/Slider.mdx b/packages/core/src/components/Slider/__stories__/Slider.mdx
index 1f73de7723..18bd8d98ca 100644
--- a/packages/core/src/components/Slider/__stories__/Slider.mdx
+++ b/packages/core/src/components/Slider/__stories__/Slider.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/blocks";
 import { UsageGuidelines } from "vibe-storybook-components";
 import {
   LINEAR_PROGRESS_BAR,
diff --git a/packages/core/src/components/Slider/__stories__/Slider.stories.js b/packages/core/src/components/Slider/__stories__/Slider.stories.js
index 5f179f0e36..e8a88ea477 100644
--- a/packages/core/src/components/Slider/__stories__/Slider.stories.js
+++ b/packages/core/src/components/Slider/__stories__/Slider.stories.js
@@ -4,6 +4,7 @@ import Slider from "../Slider";
 import Chips from "../../Chips/Chips";
 import { Sound, Video } from "../../Icon/Icons";
 import "./Slider.stories.scss";
+import Search from "../../Search/Search";
 
 const argTypes = createStoryMetaSettingsDecorator({
   component: Slider,
@@ -20,8 +21,13 @@ const sliderTemplate = createComponentTemplate(Slider);
 
 export const Overview = {
   render: sliderTemplate.bind({}),
-  name: "Overview",
-  args: {}
+  parameters: {
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
+    }
+  }
 };
 
 export const Sizes = {
@@ -31,8 +37,7 @@ export const Sizes = {
       <Slider size={Slider.sizes.MEDIUM} defaultValue={24} />
       <Slider size={Slider.sizes.LARGE} defaultValue={35} />
     </>
-  ),
-  name: "Sizes"
+  )
 };
 
 export const Ranged = {
@@ -42,9 +47,8 @@ export const Ranged = {
       <Slider data-testid={"monday-ranged-slider-m"} size={Slider.sizes.MEDIUM} ranged={true} defaultValue={[12, 55]} />
       <Slider size={Slider.sizes.LARGE} ranged={true} defaultValue={[25, 32]} />
     </>
-  ),
+  )
 
-  name: "Ranged"
   // TODO storybook 7 migration: interactive test isn't working correctly
   // play: rangedSliderMouseEventsPlaySuite
 };
@@ -56,9 +60,7 @@ export const Colors = {
       <Slider color={Slider.colors.NEGATIVE} ranged={true} defaultValue={[12, 55]} size={Slider.sizes.MEDIUM} />
       <Slider color={Slider.colors.PRIMARY} defaultValue={12} size={Slider.sizes.MEDIUM} />
     </>
-  ),
-
-  name: "Colors"
+  )
 };
 
 export const Disabled = {
@@ -74,9 +76,7 @@ export const Disabled = {
         size={Slider.sizes.MEDIUM}
       />
     </>
-  ),
-
-  name: "Disabled"
+  )
 };
 
 export const WithLabels = {
@@ -89,8 +89,14 @@ export const WithLabels = {
       <Slider prefix="Vol" indicateSelection={true} defaultValue={0} size={Slider.sizes.LARGE} />
     </>
   ),
-  name: "WithLabels",
-  decorators: [VerticalStories]
+  decorators: [VerticalStories],
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { Sound, Video }
+      }
+    }
+  }
 };
 
 export const ShowValue = {
@@ -105,9 +111,8 @@ export const ShowValue = {
       />
       <Slider data-testid={"monday-slider-show-value-l"} showValue={true} defaultValue={89} size={Slider.sizes.LARGE} />
     </>
-  ),
+  )
 
-  name: "ShowValue"
   // TODO storybook 7 migration: interactive test isn't working correctly
   // play: nonRangedSliderMouseEventsPlaySuite
 };
@@ -188,7 +193,5 @@ export const Customisation = {
       />
     </>
   ),
-
-  name: "Customisation",
   decorators: [VerticalStories]
 };

From 3bf53b9fd473406aca997e2bdde1587c6a03cd8e Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Mon, 22 Apr 2024 03:03:14 +0300
Subject: [PATCH 26/32] docs(TextField): align story's TS

---
 .../__stories__/TextField.stories.tsx         | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/core/src/components/TextField/__stories__/TextField.stories.tsx b/packages/core/src/components/TextField/__stories__/TextField.stories.tsx
index 3d4f16cc56..c26abb75c8 100644
--- a/packages/core/src/components/TextField/__stories__/TextField.stories.tsx
+++ b/packages/core/src/components/TextField/__stories__/TextField.stories.tsx
@@ -4,6 +4,9 @@ import { createStoryMetaSettingsDecorator } from "../../../storybook";
 import { createComponentTemplate } from "vibe-storybook-components";
 import { Check, CloseSmall, Email, Show } from "../../Icon/Icons";
 import "./TextField.stories.scss";
+import { Meta, StoryObj } from "@storybook/react";
+
+type Story = StoryObj<typeof TextField>;
 
 const metaSettings = createStoryMetaSettingsDecorator({
   component: TextField,
@@ -16,11 +19,11 @@ export default {
   component: TextField,
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators
-};
+} satisfies Meta<typeof TextField>;
 
 const textFieldTemplate = createComponentTemplate(TextField);
 
-export const Overview = {
+export const Overview: Story = {
   render: textFieldTemplate.bind({}),
   name: "Overview",
 
@@ -44,7 +47,7 @@ export const Overview = {
   }
 };
 
-export const Sizes = {
+export const Sizes: Story = {
   render: () => (
     <div className="monday-storybook-text-field_column-wrapper">
       <TextField placeholder="Small" />
@@ -56,7 +59,7 @@ export const Sizes = {
   name: "Sizes"
 };
 
-export const States = {
+export const States: Story = {
   render: () => (
     <div className="monday-storybook-text-field_wrapper">
       <div className="monday-storybook-text-field_column-wrapper monday-storybook-text-field_spacing">
@@ -94,7 +97,7 @@ export const States = {
   name: "States"
 };
 
-export const Validation = {
+export const Validation: Story = {
   render: () => (
     <div className="monday-storybook-text-field_column-wrapper">
       <TextField
@@ -112,7 +115,7 @@ export const Validation = {
   name: "Validation"
 };
 
-export const TextFieldInAForm = {
+export const TextFieldInAForm: Story = {
   render: () => (
     <div className="monday-storybook-text-field_box">
       <h1>Dark Mode Feedback From</h1>
@@ -126,7 +129,7 @@ export const TextFieldInAForm = {
   name: "Text field in a form"
 };
 
-export const InputFieldWithPlaceholderText = {
+export const InputFieldWithPlaceholderText: Story = {
   render: () => (
     <div className="monday-storybook-text-field_size">
       <TextField
@@ -141,7 +144,7 @@ export const InputFieldWithPlaceholderText = {
   name: "Input field with placeholder text"
 };
 
-export const RequiredInputField = {
+export const RequiredInputField: Story = {
   render: () => (
     <div className="monday-storybook-text-field_column-wrapper">
       <TextField placeholder="Your email" title="Email Address" size={TextField.sizes.MEDIUM} requiredAsterisk={true} />
@@ -151,7 +154,7 @@ export const RequiredInputField = {
   name: "Required input field"
 };
 
-export const InputFieldWithDate = {
+export const InputFieldWithDate: Story = {
   render: () => (
     <div className="monday-storybook-text-field_size">
       <TextField size={TextField.sizes.MEDIUM} type={TextFieldTextType.DATE} />
@@ -161,7 +164,7 @@ export const InputFieldWithDate = {
   name: "Input field with date"
 };
 
-export const InputFieldWithDateAndTime = {
+export const InputFieldWithDateAndTime: Story = {
   render: () => (
     <div className="monday-storybook-text-field_size">
       <TextField size={TextField.sizes.MEDIUM} type={TextFieldTextType.DATE_TIME} />

From e4b7eb2cfa0f86c869906205caa25d1879838d41 Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Mon, 22 Apr 2024 03:03:31 +0300
Subject: [PATCH 27/32] docs(TextField): allow LiveEdit

---
 .../TextField/__stories__/TextField.mdx       |  2 +-
 .../__stories__/TextField.stories.tsx         | 53 ++++++++++---------
 2 files changed, 28 insertions(+), 27 deletions(-)

diff --git a/packages/core/src/components/TextField/__stories__/TextField.mdx b/packages/core/src/components/TextField/__stories__/TextField.mdx
index 966249bd4d..7776e9ccaf 100644
--- a/packages/core/src/components/TextField/__stories__/TextField.mdx
+++ b/packages/core/src/components/TextField/__stories__/TextField.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/blocks";
 import TextField from "../TextField";
 import { ComponentRules, UsageGuidelines } from "vibe-storybook-components";
 import { COMBOBOX, DROPDOWN, SEARCH } from "../../../storybook/components/related-components/component-description-map";
diff --git a/packages/core/src/components/TextField/__stories__/TextField.stories.tsx b/packages/core/src/components/TextField/__stories__/TextField.stories.tsx
index c26abb75c8..ac8750ad4f 100644
--- a/packages/core/src/components/TextField/__stories__/TextField.stories.tsx
+++ b/packages/core/src/components/TextField/__stories__/TextField.stories.tsx
@@ -25,8 +25,6 @@ const textFieldTemplate = createComponentTemplate(TextField);
 
 export const Overview: Story = {
   render: textFieldTemplate.bind({}),
-  name: "Overview",
-
   args: {
     title: "Name",
     iconName: Show,
@@ -43,6 +41,11 @@ export const Overview: Story = {
     controls: {
       // TODO: remove exclusion when prop is removed in next major
       exclude: ["withReadOnlyStyle"]
+    },
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
     }
   }
 };
@@ -54,9 +57,7 @@ export const Sizes: Story = {
       <TextField placeholder="Medium" size={TextField.sizes.MEDIUM} />
       <TextField placeholder="Large" size={TextField.sizes.LARGE} />
     </div>
-  ),
-
-  name: "Sizes"
+  )
 };
 
 export const States: Story = {
@@ -93,8 +94,13 @@ export const States: Story = {
       </div>
     </div>
   ),
-
-  name: "States"
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { Email, Check, CloseSmall }
+      }
+    }
+  }
 };
 
 export const Validation: Story = {
@@ -110,9 +116,7 @@ export const Validation: Story = {
         }}
       />
     </div>
-  ),
-
-  name: "Validation"
+  )
 };
 
 export const TextFieldInAForm: Story = {
@@ -124,9 +128,7 @@ export const TextFieldInAForm: Story = {
         <TextField title="Email" size={TextField.sizes.MEDIUM} placeholder="email@monday.com" />
       </div>
     </div>
-  ),
-
-  name: "Text field in a form"
+  )
 };
 
 export const InputFieldWithPlaceholderText: Story = {
@@ -140,8 +142,13 @@ export const InputFieldWithPlaceholderText: Story = {
       />
     </div>
   ),
-
-  name: "Input field with placeholder text"
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { Email }
+      }
+    }
+  }
 };
 
 export const RequiredInputField: Story = {
@@ -149,27 +156,21 @@ export const RequiredInputField: Story = {
     <div className="monday-storybook-text-field_column-wrapper">
       <TextField placeholder="Your email" title="Email Address" size={TextField.sizes.MEDIUM} requiredAsterisk={true} />
     </div>
-  ),
-
-  name: "Required input field"
+  )
 };
 
 export const InputFieldWithDate: Story = {
   render: () => (
     <div className="monday-storybook-text-field_size">
-      <TextField size={TextField.sizes.MEDIUM} type={TextFieldTextType.DATE} />
+      <TextField size={TextField.sizes.MEDIUM} type={TextField.types.DATE} />
     </div>
-  ),
-
-  name: "Input field with date"
+  )
 };
 
 export const InputFieldWithDateAndTime: Story = {
   render: () => (
     <div className="monday-storybook-text-field_size">
-      <TextField size={TextField.sizes.MEDIUM} type={TextFieldTextType.DATE_TIME} />
+      <TextField size={TextField.sizes.MEDIUM} type={TextField.types.DATE_TIME} />
     </div>
-  ),
-
-  name: "Input field with date and time"
+  )
 };

From 373ef2d9ed62ea5a0a016248f92490dbb92b5327 Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Mon, 22 Apr 2024 03:05:08 +0300
Subject: [PATCH 28/32] docs(Toggle): align story's TS

---
 .../Toggle/__stories__/toggle.stories.tsx     | 27 +++++++++----------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/packages/core/src/components/Toggle/__stories__/toggle.stories.tsx b/packages/core/src/components/Toggle/__stories__/toggle.stories.tsx
index 099417a7c3..e1e57a3186 100644
--- a/packages/core/src/components/Toggle/__stories__/toggle.stories.tsx
+++ b/packages/core/src/components/Toggle/__stories__/toggle.stories.tsx
@@ -2,6 +2,9 @@ import { createComponentTemplate, MultipleStoryElementsWrapper } from "vibe-stor
 import Toggle from "../Toggle";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";
 import "./toggle.stories.scss";
+import { Meta, StoryObj } from "@storybook/react";
+
+type Story = StoryObj<typeof Toggle>;
 
 const metaSettings = createStoryMetaSettingsDecorator({
   component: Toggle,
@@ -15,43 +18,37 @@ export default {
   component: Toggle,
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators
-};
+} satisfies Meta<typeof Toggle>;
 
 const toggleTemplate = createComponentTemplate(Toggle);
 
-export const Overview = {
-  render: toggleTemplate.bind({}),
-  name: "Overview"
+export const Overview: Story = {
+  render: toggleTemplate.bind({})
 };
 
-export const States = {
+export const States: Story = {
   render: () => (
     <MultipleStoryElementsWrapper className="monday-storybook-toggle_column">
       <Toggle isDefaultSelected={false} />
       <Toggle />
     </MultipleStoryElementsWrapper>
-  ),
-
-  name: "States"
+  )
 };
 
-export const Disabled = {
+export const Disabled: Story = {
   render: () => (
     <MultipleStoryElementsWrapper className="monday-storybook-toggle_column">
       <Toggle isDefaultSelected={false} disabled />
       <Toggle disabled />
     </MultipleStoryElementsWrapper>
-  ),
-
-  name: "Disabled"
+  )
 };
 
-export const TurnOnOffAnAutomation = {
+export const TurnOnOffAnAutomation: Story = {
   render: () => (
     <>
       <h5>Board automations</h5>
       <Toggle />
     </>
-  ),
-  name: "Turn on/ off an automation"
+  )
 };

From 0cb609e189bd0df53fde99a1195c0a5d899672d7 Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Mon, 22 Apr 2024 03:07:14 +0300
Subject: [PATCH 29/32] docs(Toggle): allow LiveEdit

---
 .../components/Toggle/__stories__/toggle.mdx  |  2 +-
 .../Toggle/__stories__/toggle.stories.tsx     | 28 +++++++++++++++++--
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/components/Toggle/__stories__/toggle.mdx b/packages/core/src/components/Toggle/__stories__/toggle.mdx
index f6c7bd2593..6a7e0aa0b3 100644
--- a/packages/core/src/components/Toggle/__stories__/toggle.mdx
+++ b/packages/core/src/components/Toggle/__stories__/toggle.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/blocks";
 import Toggle from "../Toggle";
 import {
   BUTTON_GROUP,
diff --git a/packages/core/src/components/Toggle/__stories__/toggle.stories.tsx b/packages/core/src/components/Toggle/__stories__/toggle.stories.tsx
index e1e57a3186..741d93a8be 100644
--- a/packages/core/src/components/Toggle/__stories__/toggle.stories.tsx
+++ b/packages/core/src/components/Toggle/__stories__/toggle.stories.tsx
@@ -3,6 +3,7 @@ import Toggle from "../Toggle";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";
 import "./toggle.stories.scss";
 import { Meta, StoryObj } from "@storybook/react";
+import { Check, CloseSmall, Email } from "../../Icon/Icons";
 
 type Story = StoryObj<typeof Toggle>;
 
@@ -23,7 +24,14 @@ export default {
 const toggleTemplate = createComponentTemplate(Toggle);
 
 export const Overview: Story = {
-  render: toggleTemplate.bind({})
+  render: toggleTemplate.bind({}),
+  parameters: {
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
+    }
+  }
 };
 
 export const States: Story = {
@@ -32,7 +40,14 @@ export const States: Story = {
       <Toggle isDefaultSelected={false} />
       <Toggle />
     </MultipleStoryElementsWrapper>
-  )
+  ),
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { MultipleStoryElementsWrapper }
+      }
+    }
+  }
 };
 
 export const Disabled: Story = {
@@ -41,7 +56,14 @@ export const Disabled: Story = {
       <Toggle isDefaultSelected={false} disabled />
       <Toggle disabled />
     </MultipleStoryElementsWrapper>
-  )
+  ),
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { MultipleStoryElementsWrapper }
+      }
+    }
+  }
 };
 
 export const TurnOnOffAnAutomation: Story = {

From d753be0fbbce337eeac4988ffa1e061b6da9002c Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Tue, 30 Apr 2024 09:10:22 +0300
Subject: [PATCH 30/32] docs(BaseInput): align story's TS

---
 .../components/BaseInput/__stories__/BaseInput.stories.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/components/BaseInput/__stories__/BaseInput.stories.tsx b/packages/core/src/components/BaseInput/__stories__/BaseInput.stories.tsx
index b1aa37adcc..28f623b34c 100644
--- a/packages/core/src/components/BaseInput/__stories__/BaseInput.stories.tsx
+++ b/packages/core/src/components/BaseInput/__stories__/BaseInput.stories.tsx
@@ -1,6 +1,9 @@
 import { createStoryMetaSettingsDecorator } from "../../../storybook";
 import { createComponentTemplate } from "vibe-storybook-components";
 import BaseInput from "../BaseInput";
+import { Meta, StoryObj } from "@storybook/react";
+
+type Story = StoryObj<typeof BaseInput>;
 
 const metaSettings = createStoryMetaSettingsDecorator({
   component: BaseInput
@@ -12,10 +15,10 @@ export default {
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators,
   tags: ["internal"]
-};
+} satisfies Meta<typeof BaseInput>;
 
 const baseInputTemplate = createComponentTemplate(BaseInput);
 
-export const Overview = {
+export const Overview: Story = {
   render: baseInputTemplate.bind({})
 };

From 227facfb42e2b8e433249d21c652bd09826935d5 Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Tue, 30 Apr 2024 09:25:26 +0300
Subject: [PATCH 31/32] docs: retain original name if name is different than
 Storybook's startCase convention

---
 .../Button/__stories__/button.stories.tsx     | 22 +++++----
 .../__stories__/buttonGroup.stories.tsx       |  9 ++--
 .../Checkbox/__stories__/checkbox.stories.tsx |  3 +-
 .../Combobox/__stories__/combobox.stories.js  | 22 +++++----
 .../Dropdown/__stories__/dropdown.mdx         |  2 +-
 .../Dropdown/__stories__/dropdown.stories.js  | 47 ++++++++++++-------
 .../__stories__/IconButton.stories.tsx        |  6 ++-
 .../__stories__/MenuButton.stories.tsx        |  3 +-
 .../__stories__/radioButton.stories.js        |  6 ++-
 .../__stories__/TextField.stories.tsx         | 15 ++++--
 .../Toggle/__stories__/toggle.stories.tsx     |  3 +-
 11 files changed, 89 insertions(+), 49 deletions(-)

diff --git a/packages/core/src/components/Button/__stories__/button.stories.tsx b/packages/core/src/components/Button/__stories__/button.stories.tsx
index 12f6decb71..98d8d2f786 100644
--- a/packages/core/src/components/Button/__stories__/button.stories.tsx
+++ b/packages/core/src/components/Button/__stories__/button.stories.tsx
@@ -45,7 +45,8 @@ export const ButtonKinds: Story = {
       <Button kind={Button.kinds.SECONDARY}>Secondary</Button>
       <Button kind={Button.kinds.TERTIARY}>Tertiary</Button>
     </>
-  )
+  ),
+  name: "Button kinds"
 };
 
 export const Sizes: Story = {
@@ -55,9 +56,7 @@ export const Sizes: Story = {
       <Button size={Button.sizes.MEDIUM}>Medium</Button>
       <Button size={Button.sizes.SMALL}>Small</Button>
     </>
-  ),
-
-  name: "Sizes"
+  )
 };
 
 export const Disabled: Story = {
@@ -89,7 +88,8 @@ export const PositiveAndNegative: Story = {
       <Button color={Button.colors.POSITIVE}>Positive</Button>
       <Button color={Button.colors.NEGATIVE}>Negative</Button>
     </>
-  )
+  ),
+  name: "Positive and Negative"
 };
 
 export const Icons: Story = {
@@ -119,7 +119,8 @@ export const LoadingState: Story = {
         Click here for loading
       </Button>
     );
-  }
+  },
+  name: "Loading state"
 };
 
 export const SuccessState: Story = {
@@ -140,7 +141,8 @@ export const SuccessState: Story = {
         scope: { Check }
       }
     }
-  }
+  },
+  name: "Success state"
 };
 
 export const OnColorStates: Story = {
@@ -174,7 +176,8 @@ export const OnColorStates: Story = {
         </div>
       </div>
     </>
-  )
+  ),
+  name: "On color states"
 };
 
 export const AdjacentButtons: Story = {
@@ -194,5 +197,6 @@ export const AdjacentButtons: Story = {
         scope: { Remove, Add }
       }
     }
-  }
+  },
+  name: "Adjacent buttons"
 };
diff --git a/packages/core/src/components/ButtonGroup/__stories__/buttonGroup.stories.tsx b/packages/core/src/components/ButtonGroup/__stories__/buttonGroup.stories.tsx
index 906e8a08d0..07fcc7b877 100644
--- a/packages/core/src/components/ButtonGroup/__stories__/buttonGroup.stories.tsx
+++ b/packages/core/src/components/ButtonGroup/__stories__/buttonGroup.stories.tsx
@@ -162,7 +162,8 @@ export const DisabledSingeButton: Story = {
         }
       ]}
     />
-  )
+  ),
+  name: "Disabled - Singe Button"
 };
 
 export const Size: Story = {
@@ -228,7 +229,8 @@ export const ButtonGroupInSettings: Story = {
         ]}
       />
     </div>
-  )
+  ),
+  name: "Button group in settings"
 };
 
 export const ButtonGroupAsToggle: Story = {
@@ -247,5 +249,6 @@ export const ButtonGroupAsToggle: Story = {
         }
       ]}
     />
-  )
+  ),
+  name: "Button group as toggle"
 };
diff --git a/packages/core/src/components/Checkbox/__stories__/checkbox.stories.tsx b/packages/core/src/components/Checkbox/__stories__/checkbox.stories.tsx
index f4ed119da7..614366ee21 100644
--- a/packages/core/src/components/Checkbox/__stories__/checkbox.stories.tsx
+++ b/packages/core/src/components/Checkbox/__stories__/checkbox.stories.tsx
@@ -68,5 +68,6 @@ export const SingleCheckbox: Story = {
         isEnabled: false
       }
     }
-  }
+  },
+  name: "Single checkbox"
 };
diff --git a/packages/core/src/components/Combobox/__stories__/combobox.stories.js b/packages/core/src/components/Combobox/__stories__/combobox.stories.js
index 0c8209b3ba..cff4237a3a 100644
--- a/packages/core/src/components/Combobox/__stories__/combobox.stories.js
+++ b/packages/core/src/components/Combobox/__stories__/combobox.stories.js
@@ -127,7 +127,8 @@ export const ComboboxInsideADialog = {
         <Combobox options={options} placeholder="Placeholder text here" />
       </DialogContentContainer>
     );
-  }
+  },
+  name: "Combobox inside a dialog"
 };
 
 export const Sizes = {
@@ -278,7 +279,8 @@ export const WithCategories = {
         scope: { StoryDescription }
       }
     }
-  }
+  },
+  name: "With categories"
 };
 
 export const WithIcons = {
@@ -326,7 +328,8 @@ export const WithIcons = {
         scope: { Wand, ThumbsUp, Time, Update, Upgrade }
       }
     }
-  }
+  },
+  name: "With icons"
 };
 
 export const WithOptionRenderer = {
@@ -367,7 +370,8 @@ export const WithOptionRenderer = {
         scope: { Person }
       }
     }
-  }
+  },
+  name: "With optionRenderer"
 };
 
 export const WithButton = {
@@ -665,7 +669,8 @@ export const WithVirtualizationOptimization = {
         scope: { StoryDescription }
       }
     }
-  }
+  },
+  name: "With virtualization optimization"
 };
 
 export const LoadingState = {
@@ -677,7 +682,8 @@ export const LoadingState = {
         <Combobox loading options={options} placeholder="Board name" />
       </DialogContentContainer>
     );
-  }
+  },
+  name: "Loading state"
 };
 
 export const ComboboxAsPersonPicker = {
@@ -754,12 +760,12 @@ export const ComboboxAsPersonPicker = {
       </Flex>
     );
   },
-
   parameters: {
     docs: {
       liveEdit: {
         scope: { person1, person2, person3, optionRenderer }
       }
     }
-  }
+  },
+  name: "Combobox as person picker"
 };
diff --git a/packages/core/src/components/Dropdown/__stories__/dropdown.mdx b/packages/core/src/components/Dropdown/__stories__/dropdown.mdx
index cbcbcb7c5c..e83eb83eb1 100644
--- a/packages/core/src/components/Dropdown/__stories__/dropdown.mdx
+++ b/packages/core/src/components/Dropdown/__stories__/dropdown.mdx
@@ -74,7 +74,7 @@ The Dropdown component supports multiple options selection in two different stat
 
 The Dropdown component supports async loading of options.
 
-<Canvas of={DropdownStories.AsyncOptions} />
+<Canvas of={DropdownStories.AsyncDropdown} />
 
 ### Dropdown with avatar
 
diff --git a/packages/core/src/components/Dropdown/__stories__/dropdown.stories.js b/packages/core/src/components/Dropdown/__stories__/dropdown.stories.js
index 2710dce753..03de472fb5 100644
--- a/packages/core/src/components/Dropdown/__stories__/dropdown.stories.js
+++ b/packages/core/src/components/Dropdown/__stories__/dropdown.stories.js
@@ -159,7 +159,8 @@ export const Rtl = {
       <Dropdown placeholder="Left to right (default)" className="dropdown-stories-styles_spacing" />
       <Dropdown placeholder="מימין לשמאל" className="dropdown-stories-styles_spacing" rtl />
     </>
-  )
+  ),
+  name: "RTL"
 };
 
 export const MultiChoiceWithDifferentStates = {
@@ -271,10 +272,11 @@ export const MultiChoiceWithDifferentStates = {
         scope: { StoryDescription }
       }
     }
-  }
+  },
+  name: "Multi-choice with different states"
 };
 
-export const AsyncOptions = {
+export const AsyncDropdown = {
   render: () => {
     const fetchUserOptions = async () => {
       try {
@@ -357,7 +359,8 @@ export const DropdownWithAvatar = {
         scope: { person1, person2, person3, StoryDescription }
       }
     }
-  }
+  },
+  name: "Dropdown with avatar"
 };
 
 export const DropdownWithIcon = {
@@ -409,7 +412,8 @@ export const DropdownWithIcon = {
         scope: { Email, Attach, StoryDescription }
       }
     }
-  }
+  },
+  name: "Dropdown with icon"
 };
 
 export const DropdownWithChipColors = {
@@ -455,7 +459,8 @@ export const DropdownWithChipColors = {
         scope: { StoryDescription }
       }
     }
-  }
+  },
+  name: "Dropdown with chip colors"
 };
 
 export const DropdownWithTooltipsOnItems = {
@@ -500,7 +505,8 @@ export const DropdownWithTooltipsOnItems = {
         scope: { StoryDescription }
       }
     }
-  }
+  },
+  name: "Dropdown with tooltips on items"
 };
 
 export const DropdownWithChips = {
@@ -555,7 +561,8 @@ export const DropdownWithChips = {
         scope: { person1, person2, person3, OptionRenderer }
       }
     }
-  }
+  },
+  name: "Dropdown with chips"
 };
 
 export const SearchableDropdown = {
@@ -613,7 +620,8 @@ export const SearchableDropdown = {
         onInputChange={onInputChange}
       />
     );
-  }
+  },
+  name: "Searchable dropdown"
 };
 
 export const DropdownWithLabels = {
@@ -652,7 +660,8 @@ export const DropdownWithLabels = {
         valueRenderer={labelRenderer}
       />
     );
-  }
+  },
+  name: "Dropdown with labels"
 };
 
 export const DropdownInsideAForm = {
@@ -686,7 +695,8 @@ export const DropdownInsideAForm = {
         />
       </div>
     );
-  }
+  },
+  name: "Dropdown inside a form"
 };
 
 export const DropdownWithGroups = {
@@ -728,7 +738,8 @@ export const DropdownWithGroups = {
     return (
       <Dropdown placeholder="Placeholder text here" options={options} className="dropdown-stories-styles_big-spacing" />
     );
-  }
+  },
+  name: "Dropdown with groups"
 };
 
 export const DropdownInsidePopover = {
@@ -840,7 +851,8 @@ export const DropdownInsidePopover = {
         scope: { ModalExampleContent }
       }
     }
-  }
+  },
+  name: "Dropdown inside popover"
 };
 
 export const DropdownWithLoading = {
@@ -883,7 +895,8 @@ export const DropdownWithLoading = {
         onInputChange={loadingOnInputChange}
       />
     );
-  }
+  },
+  name: "Dropdown with loading"
 };
 
 export const DropdownWithRef = {
@@ -926,7 +939,8 @@ export const DropdownWithRef = {
         </Button>
       </Flex>
     );
-  }
+  },
+  name: "Dropdown with ref"
 };
 
 export const DropdownValueSelection = {
@@ -960,5 +974,6 @@ export const DropdownValueSelection = {
         />
       </Flex>
     );
-  }
+  },
+  name: "Dropdown value selection"
 };
diff --git a/packages/core/src/components/IconButton/__stories__/IconButton.stories.tsx b/packages/core/src/components/IconButton/__stories__/IconButton.stories.tsx
index 15b4a6139c..960a1f87e1 100644
--- a/packages/core/src/components/IconButton/__stories__/IconButton.stories.tsx
+++ b/packages/core/src/components/IconButton/__stories__/IconButton.stories.tsx
@@ -215,7 +215,8 @@ export const IconButtonAsToolbarButton: Story = {
         scope: { styles, Drag, Filter }
       }
     }
-  }
+  },
+  name: "Icon button as toolbar button"
 };
 
 export const IconButtonAsCloseButton: Story = {
@@ -285,5 +286,6 @@ export const IconButtonAsCloseButton: Story = {
         scope: { styles, person1, Item, Time, CloseSmall }
       }
     }
-  }
+  },
+  name: "Icon button as close button"
 };
diff --git a/packages/core/src/components/MenuButton/__stories__/MenuButton.stories.tsx b/packages/core/src/components/MenuButton/__stories__/MenuButton.stories.tsx
index 0c47aae425..d83cc5add0 100644
--- a/packages/core/src/components/MenuButton/__stories__/MenuButton.stories.tsx
+++ b/packages/core/src/components/MenuButton/__stories__/MenuButton.stories.tsx
@@ -161,7 +161,8 @@ export const WithTextAndIconAtTheEnd: Story = {
         scope: { NOOP, DropdownChevronDown, Sun, Moon, Favorite }
       }
     }
-  }
+  },
+  name: "With Text and Icon at the end"
 };
 
 export const Disabled: Story = {
diff --git a/packages/core/src/components/RadioButton/__stories__/radioButton.stories.js b/packages/core/src/components/RadioButton/__stories__/radioButton.stories.js
index 57f5c1453a..7a01f126a7 100644
--- a/packages/core/src/components/RadioButton/__stories__/radioButton.stories.js
+++ b/packages/core/src/components/RadioButton/__stories__/radioButton.stories.js
@@ -47,7 +47,8 @@ export const RadioButtonInItemsList = {
       <RadioButton text="All updates" name="radio-buttons-group-4" />
     </div>
   ),
-  play: clickRadioButtonPlaySuite
+  play: clickRadioButtonPlaySuite,
+  name: "Radio button in items list"
 };
 
 export const ControlledRadioButtons = {
@@ -70,5 +71,6 @@ export const ControlledRadioButtons = {
       </div>
     );
   },
-  play: controlRadioButtonPlaySuite
+  play: controlRadioButtonPlaySuite,
+  name: "Controlled Radio buttons"
 };
diff --git a/packages/core/src/components/TextField/__stories__/TextField.stories.tsx b/packages/core/src/components/TextField/__stories__/TextField.stories.tsx
index ac8750ad4f..d77738e115 100644
--- a/packages/core/src/components/TextField/__stories__/TextField.stories.tsx
+++ b/packages/core/src/components/TextField/__stories__/TextField.stories.tsx
@@ -128,7 +128,8 @@ export const TextFieldInAForm: Story = {
         <TextField title="Email" size={TextField.sizes.MEDIUM} placeholder="email@monday.com" />
       </div>
     </div>
-  )
+  ),
+  name: "Text field in a form"
 };
 
 export const InputFieldWithPlaceholderText: Story = {
@@ -148,7 +149,8 @@ export const InputFieldWithPlaceholderText: Story = {
         scope: { Email }
       }
     }
-  }
+  },
+  name: "Input field with placeholder text"
 };
 
 export const RequiredInputField: Story = {
@@ -156,7 +158,8 @@ export const RequiredInputField: Story = {
     <div className="monday-storybook-text-field_column-wrapper">
       <TextField placeholder="Your email" title="Email Address" size={TextField.sizes.MEDIUM} requiredAsterisk={true} />
     </div>
-  )
+  ),
+  name: "Required input field"
 };
 
 export const InputFieldWithDate: Story = {
@@ -164,7 +167,8 @@ export const InputFieldWithDate: Story = {
     <div className="monday-storybook-text-field_size">
       <TextField size={TextField.sizes.MEDIUM} type={TextField.types.DATE} />
     </div>
-  )
+  ),
+  name: "Input field with date"
 };
 
 export const InputFieldWithDateAndTime: Story = {
@@ -172,5 +176,6 @@ export const InputFieldWithDateAndTime: Story = {
     <div className="monday-storybook-text-field_size">
       <TextField size={TextField.sizes.MEDIUM} type={TextField.types.DATE_TIME} />
     </div>
-  )
+  ),
+  name: "Input field with date and time"
 };
diff --git a/packages/core/src/components/Toggle/__stories__/toggle.stories.tsx b/packages/core/src/components/Toggle/__stories__/toggle.stories.tsx
index 741d93a8be..04c0037981 100644
--- a/packages/core/src/components/Toggle/__stories__/toggle.stories.tsx
+++ b/packages/core/src/components/Toggle/__stories__/toggle.stories.tsx
@@ -72,5 +72,6 @@ export const TurnOnOffAnAutomation: Story = {
       <h5>Board automations</h5>
       <Toggle />
     </>
-  )
+  ),
+  name: "Turn on/ off an automation"
 };

From ee689fc7cdb8cd7f61ebb0b1e8c0b53623b80ad5 Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Tue, 30 Apr 2024 13:56:42 +0300
Subject: [PATCH 32/32] build: lint

---
 .../core/src/components/Slider/__stories__/Slider.stories.js     | 1 -
 .../src/components/TextField/__stories__/TextField.stories.tsx   | 1 -
 .../core/src/components/Toggle/__stories__/toggle.stories.tsx    | 1 -
 3 files changed, 3 deletions(-)

diff --git a/packages/core/src/components/Slider/__stories__/Slider.stories.js b/packages/core/src/components/Slider/__stories__/Slider.stories.js
index e8a88ea477..1a8fea975d 100644
--- a/packages/core/src/components/Slider/__stories__/Slider.stories.js
+++ b/packages/core/src/components/Slider/__stories__/Slider.stories.js
@@ -4,7 +4,6 @@ import Slider from "../Slider";
 import Chips from "../../Chips/Chips";
 import { Sound, Video } from "../../Icon/Icons";
 import "./Slider.stories.scss";
-import Search from "../../Search/Search";
 
 const argTypes = createStoryMetaSettingsDecorator({
   component: Slider,
diff --git a/packages/core/src/components/TextField/__stories__/TextField.stories.tsx b/packages/core/src/components/TextField/__stories__/TextField.stories.tsx
index d77738e115..a533ca98cc 100644
--- a/packages/core/src/components/TextField/__stories__/TextField.stories.tsx
+++ b/packages/core/src/components/TextField/__stories__/TextField.stories.tsx
@@ -1,5 +1,4 @@
 import TextField from "../TextField";
-import { TextFieldTextType } from "../TextFieldConstants";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";
 import { createComponentTemplate } from "vibe-storybook-components";
 import { Check, CloseSmall, Email, Show } from "../../Icon/Icons";
diff --git a/packages/core/src/components/Toggle/__stories__/toggle.stories.tsx b/packages/core/src/components/Toggle/__stories__/toggle.stories.tsx
index 04c0037981..c6bca6ddf5 100644
--- a/packages/core/src/components/Toggle/__stories__/toggle.stories.tsx
+++ b/packages/core/src/components/Toggle/__stories__/toggle.stories.tsx
@@ -3,7 +3,6 @@ import Toggle from "../Toggle";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";
 import "./toggle.stories.scss";
 import { Meta, StoryObj } from "@storybook/react";
-import { Check, CloseSmall, Email } from "../../Icon/Icons";
 
 type Story = StoryObj<typeof Toggle>;