From d1c0a75960d8ee1142f8bc1dffa97f2790fc9438 Mon Sep 17 00:00:00 2001 From: Yossi Saadi Date: Tue, 17 Dec 2024 16:31:01 +0200 Subject: [PATCH 1/6] docs: sort stories alphabetical (currently its based on the order in index file) --- packages/core/.storybook/preview.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/core/.storybook/preview.tsx b/packages/core/.storybook/preview.tsx index 12c5e546c5..952a75ddb7 100644 --- a/packages/core/.storybook/preview.tsx +++ b/packages/core/.storybook/preview.tsx @@ -96,6 +96,7 @@ const preview: Preview = { }, options: { storySort: { + method: "alphabetical", order: [ "Welcome", "Getting Started", From 67116728b69e8a5e2915f0e96fc98b01a86bc877 Mon Sep 17 00:00:00 2001 From: Yossi Saadi Date: Tue, 17 Dec 2024 16:31:33 +0200 Subject: [PATCH 2/6] fix(StatusTag): remove accidentally added console log --- .../storybook-blocks/src/components/status-tag/status-tag.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/storybook-blocks/src/components/status-tag/status-tag.tsx b/packages/storybook-blocks/src/components/status-tag/status-tag.tsx index 8031706ddc..99cd223538 100644 --- a/packages/storybook-blocks/src/components/status-tag/status-tag.tsx +++ b/packages/storybook-blocks/src/components/status-tag/status-tag.tsx @@ -9,7 +9,6 @@ interface StatusTagProps { } const StatusTag: FC = ({ type }) => { - console.log('type', type); return ; }; From 7673903cbaf0acd69271bcba2ebe3c489e6370d4 Mon Sep 17 00:00:00 2001 From: Yossi Saadi Date: Tue, 17 Dec 2024 16:31:56 +0200 Subject: [PATCH 3/6] docs(Dropdown): remove console log --- .../core/src/components/Dropdown/__stories__/Dropdown.stories.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/core/src/components/Dropdown/__stories__/Dropdown.stories.js b/packages/core/src/components/Dropdown/__stories__/Dropdown.stories.js index 10b332ed39..3002895fde 100644 --- a/packages/core/src/components/Dropdown/__stories__/Dropdown.stories.js +++ b/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(); }, []); From e65944940af8600de242497dd9a7fc85c557eace Mon Sep 17 00:00:00 2001 From: Yossi Saadi Date: Tue, 17 Dec 2024 17:09:43 +0200 Subject: [PATCH 4/6] docs(Modal): fix links --- .../core/src/components/Modal/Modal/__stories__/Modal.mdx | 6 +++--- .../ModalBasicLayout/__stories__/ModalBasicLayout.mdx | 2 +- .../ModalMediaLayout/__stories__/ModalMediaLayout.mdx | 2 +- .../__stories__/ModalSideBySideLayout.mdx | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/core/src/components/Modal/Modal/__stories__/Modal.mdx b/packages/core/src/components/Modal/Modal/__stories__/Modal.mdx index 80887d1c93..f69e509643 100644 --- a/packages/core/src/components/Modal/Modal/__stories__/Modal.mdx +++ b/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 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. ### 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 Side-by-Side Modal 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. ### 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 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. diff --git a/packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.mdx b/packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.mdx index fa7654dc84..8529686dd1 100644 --- a/packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.mdx +++ b/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 ModalFooter page. +When multi steps modal, use the ModalFooterWizard. diff --git a/packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.mdx b/packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.mdx index d17590f2fa..8428cb011b 100644 --- a/packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.mdx +++ b/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 ModalFooter page. +When multi steps modal, use the ModalFooterWizard. diff --git a/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.mdx b/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.mdx index ad23b65fb8..0ef5b754bb 100644 --- a/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.mdx +++ b/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 ModalFooter page. +When multi steps modal, use the ModalFooterWizard. From 8fe008ea3c79a35ac4f105baf58306ba723bc08d Mon Sep 17 00:00:00 2001 From: Yossi Saadi Date: Tue, 17 Dec 2024 17:11:50 +0200 Subject: [PATCH 5/6] docs: make VibeNext components override legacy components, which will be under VibeLegacy namespace --- packages/core/.storybook/preview.tsx | 21 ++++++---------- .../components/LiveContent/LiveContent.tsx | 23 +++++++----------- .../playground/playground-helpers.ts | 24 ++++++++++++++++--- 3 files changed, 37 insertions(+), 31 deletions(-) diff --git a/packages/core/.storybook/preview.tsx b/packages/core/.storybook/preview.tsx index 952a75ddb7..b67ba0d633 100644 --- a/packages/core/.storybook/preview.tsx +++ b/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"; @@ -119,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) diff --git a/packages/core/src/storybook/decorators/withLiveEdit/components/LiveContent/LiveContent.tsx b/packages/core/src/storybook/decorators/withLiveEdit/components/LiveContent/LiveContent.tsx index 3caacdbdc4..7c6c28442f 100644 --- a/packages/core/src/storybook/decorators/withLiveEdit/components/LiveContent/LiveContent.tsx +++ b/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 = ( <>
Modified Version
- + diff --git a/packages/core/src/storybook/stand-alone-documentaion/playground/playground-helpers.ts b/packages/core/src/storybook/stand-alone-documentaion/playground/playground-helpers.ts index 7d55cebb1c..3fb87acb5d 100644 --- a/packages/core/src/storybook/stand-alone-documentaion/playground/playground-helpers.ts +++ b/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(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 }; From 573bcdf3b8a465662ee9ce7374be298713747150 Mon Sep 17 00:00:00 2001 From: Yossi Saadi Date: Tue, 17 Dec 2024 17:27:19 +0200 Subject: [PATCH 6/6] docs: fix live edit for Modal stories --- .../__stories__/ModalBasicLayout.stories.tsx | 7 ++++++- .../__stories__/ModalMediaLayout.stories.tsx | 7 ++++++- .../__stories__/ModalSideBySideLayout.stories.tsx | 7 ++++++- 3 files changed, 18 insertions(+), 3 deletions(-) diff --git a/packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.stories.tsx b/packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.stories.tsx index 34b72ef104..c5696c7317 100644 --- a/packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.stories.tsx +++ b/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; diff --git a/packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories.tsx b/packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories.tsx index a537e6caa8..370e90dcea 100644 --- a/packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories.tsx +++ b/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; diff --git a/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.stories.tsx b/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.stories.tsx index fa49a4346a..7f84df176d 100644 --- a/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.stories.tsx +++ b/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;