fix: StatusTag remove log, sort stories alphabetically, modal docs fixes

packages/core/.storybook/preview.tsx

@@ -1,8 +1,4 @@
 import React from "react";
-import * as VibeComponents from "../src/components";
-import * as VibeComponentsNext from "../src/components/next";
-import * as VibeHooks from "../src/hooks";
-import * as VibeIcons from "@vibe/icons";
 import { Preview } from "@storybook/react";
 import isChromatic from "chromatic/isChromatic";
 import { DocsContainer, DocsPage, Unstyled } from "@storybook/blocks";
@@ -34,7 +30,11 @@ import { ComponentNameDecorator, PropsTable, RelatedComponentsDecorator } from "
 import "monday-ui-style/dist/index.min.css";
 import "vibe-storybook-components/dist/index.css";
 import { generateAutocompletion } from "storybook-addon-playground";
-import introCode from "../src/storybook/stand-alone-documentaion/playground/playground-helpers";
+import {
+  playgroundVibeComponents,
+  playgroundReactCommonHooks,
+  introCode
+} from "../src/storybook/stand-alone-documentaion/playground/playground-helpers";
 import reactDocgenOutput from "../src/storybook/stand-alone-documentaion/playground/react-docgen-output.json";
 import withLiveEdit from "../src/storybook/decorators/withLiveEdit/withLiveEdit";
 import modes from "./modes";
@@ -96,6 +96,7 @@ const preview: Preview = {
     },
     options: {
       storySort: {
+        method: "alphabetical",
         order: [
           "Welcome",
           "Getting Started",
@@ -118,15 +119,8 @@ const preview: Preview = {
     playground: {
       storyId: "playground",
       components: {
-        ...VibeComponents,
-        VibeIcons,
-        VibeNext: VibeComponentsNext,
-        ...VibeHooks,
-        useState: React.useState,
-        useEffect: React.useEffect,
-        useCallback: React.useCallback,
-        useMemo: React.useMemo,
-        useRef: React.useRef
+        ...playgroundVibeComponents,
+        ...playgroundReactCommonHooks
       },
       introCode,
       autocompletions: generateAutocompletion(reactDocgenOutput)

packages/core/src/components/Dropdown/__stories__/Dropdown.stories.js

@@ -976,7 +976,6 @@ export const DropdownWithRef = {
     );
 
     const focusDropdownInput = useCallback(() => {
-      console.log("Dropdown ref.current = ", ref.current);
       ref.current.select.focus();
     }, []);
 

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

@@ -36,20 +36,20 @@ We have 3 different modal component, each one provide a different layout for a d
 
 ### Basic modal
 
-The Basic Modal is intended for straightforward tasks, like selecting items or gathering basic information. Basic Modals help users focus on a single task without distractions. These modals do not support images or videos.
+The <StorybookLink page="Components/Modal [New]/Basic modal">Basic Modal</StorybookLink> is intended for straightforward tasks, like selecting items or gathering basic information. Basic Modals help users focus on a single task without distractions. These modals do not support images or videos.
 
 <Canvas of={BasicModalPreview} sourceState="none" />
 
 ### Side by side modal
 
-The Side-by-Side Modal offers two distinct sections: the left for text or inputs, and the right for supporting visuals.
+The <StorybookLink page="Components/Modal [New]/Side by side modal">Side-by-Side Modal</StorybookLink> offers two distinct sections: the left for text or inputs, and the right for supporting visuals.
 It's ideal when users need to reference media alongside information.
 
 <Canvas of={SideBySideModalPreview} sourceState="none" />
 
 ### Media modal
 
-The Media Modal includes a highlighted media section followed by text, perfect for grabbing attention with visuals before users interact with the content. Ideal for introducing new features or onboarding.
+The <StorybookLink page="Components/Modal [New]/Media modal">Media Modal</StorybookLink> includes a highlighted media section followed by text, perfect for grabbing attention with visuals before users interact with the content. Ideal for introducing new features or onboarding.
 
 <Canvas of={MediaModalPreview} sourceState="none" />
 

packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.mdx

@@ -71,7 +71,7 @@ When the content of the modal is too large to fit within the viewport, the modal
 
 ### Wizard footer
 
-When multi steps modal, use the "wizard footer". For more guidelines about the footer we recommend to check our <StorybookLink page="Components/Modal [New]/Footer">ModalFooter</StorybookLink> page.
+When multi steps modal, use the ModalFooterWizard.
 
 <Canvas of={ModalBasicLayoutStories.Wizard} />
 

packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.stories.tsx

@@ -31,7 +31,12 @@ export default {
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators,
   parameters: {
-    layout: "fullscreen"
+    layout: "fullscreen",
+    docs: {
+      liveEdit: {
+        scope: { TransitionView }
+      }
+    }
   }
 } satisfies Meta<typeof Modal>;
 

packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.mdx

@@ -48,7 +48,7 @@ The Media Modal includes a highlighted media section, followed by a textual cont
 
 ### Wizard footer
 
-When multi steps modal, use the "wizard footer". For more guidelines about the footer we recommend to check our <StorybookLink page="Components/Modal [New]/Footer">ModalFooter</StorybookLink> page.
+When multi steps modal, use the ModalFooterWizard.
 
 <Canvas of={MediaModalStories.Wizard} />
 

packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories.tsx

@@ -40,7 +40,12 @@ export default {
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators,
   parameters: {
-    layout: "fullscreen"
+    layout: "fullscreen",
+    docs: {
+      liveEdit: {
+        scope: { TransitionView, mediaImage }
+      }
+    }
   }
 } satisfies Meta<typeof Modal>;
 

packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.mdx

@@ -52,7 +52,7 @@ The Side-by-side Modal offers a layout with two distinct sections. The left side
 
 ### Wizard footer
 
-When multi steps modal, use the "wizard footer". For more guidelines about the footer we recommend to check our <StorybookLink page="Components/Modal [New]/Footer">ModalFooter</StorybookLink> page.
+When multi steps modal, use the ModalFooterWizard.
 
 <Canvas of={SideBySideModalStories.Wizard} />
 

packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.stories.tsx

@@ -43,7 +43,12 @@ export default {
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators,
   parameters: {
-    layout: "fullscreen"
+    layout: "fullscreen",
+    docs: {
+      liveEdit: {
+        scope: { TransitionView, FieldLabel, mediaImage }
+      }
+    }
   }
 } satisfies Meta<typeof Modal>;
 

packages/core/src/storybook/decorators/withLiveEdit/components/LiveContent/LiveContent.tsx

@@ -1,28 +1,23 @@
 import React from "react";
 import { LiveProvider } from "react-live";
+import {
+  playgroundVibeComponents,
+  playgroundReactCommonHooks
+} from "../../../../stand-alone-documentaion/playground/playground-helpers";
 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 VibeHooks from "../../../../../hooks";
-import * as VibeIcons from "@vibe/icons";
-import * as VibeComponentsNext from "../../../../../components/next";
-
-const vibeScope = { ...VibeComponents, VibeIcons, VibeNext: VibeComponentsNext, ...VibeHooks };
-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={{ ...vibeScope, ...reactCommonHooksScope, ...scope }} enableTypeScript>
+      <LiveProvider
+        code={code}
+        scope={{ ...playgroundVibeComponents, ...playgroundReactCommonHooks, ...scope }}
+        enableTypeScript
+      >
         <LivePreview />
       </LiveProvider>
     </>

packages/core/src/storybook/stand-alone-documentaion/playground/playground-helpers.ts

@@ -1,4 +1,22 @@
-export const jsx = `() => {
+import * as VibeComponents from "../../../components";
+import * as VibeIcons from "@vibe/icons";
+import * as VibeComponentsNext from "../../../components/next";
+import * as VibeHooks from "../../../hooks";
+import React from "react";
+
+const VibeLegacy = Object.fromEntries(Object.entries(VibeComponents).filter(([key]) => key in VibeComponentsNext));
+const combinedComponents = { ...VibeComponents, ...VibeComponentsNext };
+
+export const playgroundVibeComponents = { ...combinedComponents, VibeLegacy, VibeIcons, ...VibeHooks };
+export const playgroundReactCommonHooks = {
+  useState: React.useState,
+  useEffect: React.useEffect,
+  useCallback: React.useCallback,
+  useMemo: React.useMemo,
+  useRef: React.useRef
+};
+
+const jsx = `() => {
   const [timesClicked, setTimesClicked] = useState<number>(0);
 
   function onButtonClick(): void {
@@ -35,7 +53,7 @@ export const jsx = `() => {
   );
 }`;
 
-export const css = `.playground {
+const css = `.playground {
   padding-block-start: 40px;
   margin: 0;
   width: 100vw;
@@ -57,4 +75,4 @@ export const css = `.playground {
 }
 `;
 
-export default { jsx, css };
+export const introCode = { jsx, css };

packages/storybook-blocks/src/components/status-tag/status-tag.tsx

@@ -9,7 +9,6 @@ interface StatusTagProps {
 }
 
 const StatusTag: FC<StatusTagProps> = ({ type }) => {
-  console.log('type', type);
   return <label className={cx(styles.statusTag, styles[type])}>{type}</label>;
 };