docs: add edit mode for stories in docs page

packages/core/.eslintrc.js

@@ -100,7 +100,11 @@ module.exports = {
       }
     },
     {
-      files: ["*.stories.@(js|jsx|ts|tsx)", "*.stories.helpers.@(js|jsx|ts|tsx)"],
+      files: [
+        "*.stories.@(js|jsx|ts|tsx)",
+        "*.stories.helpers.@(js|jsx|ts|tsx)",
+        "src/storybook/decorators/**/with*.{js,jsx,ts,tsx}"
+      ],
       rules: {
         ...commonRules,
         "react-hooks/rules-of-hooks": "off",

packages/core/.storybook/preview.tsx

@@ -28,10 +28,13 @@ import {
   MultipleStoryElementsWrapper,
   StorybookLink
 } from "vibe-storybook-components";
+import CanvasWrapper from "../src/storybook/components/canvas-wrapper/CanvasWrapper";
+import withGlobalStyle from "../src/storybook/decorators/withGlobalStyle/withGlobalStyle";
 import { ComponentNameDecorator, PropsTable, RelatedComponentsDecorator } from "../src/storybook";
 import "monday-ui-style/dist/index.min.css";
 import "vibe-storybook-components/dist/index.css";
 import introCode from "../src/storybook/stand-alone-documentaion/playground/playground-helpers";
+import withLiveEdit from "../src/storybook/decorators/withLiveEdit/withLiveEdit";
 
 const fontLoader = async () => ({
   fonts: await document.fonts.ready // Fixing Chromatic tests flakiness - taking snapshots after fonts are loaded
@@ -43,6 +46,12 @@ const preview: Preview = {
       sort: "alpha"
     },
     docs: {
+      liveEdit: {
+        isEnabled: true
+      },
+      canvas: {
+        layout: "fullscreen"
+      },
       container: ({ children, context }: { children: any; context: any }) => (
         <DocsContainer context={context}>
           <Unstyled>
@@ -53,6 +62,7 @@ const preview: Preview = {
       ),
       page: DocsPage,
       components: {
+        Canvas: CanvasWrapper,
         Controls: PropsTable,
         PropsTable,
         h1: ComponentNameDecorator,
@@ -105,13 +115,8 @@ const preview: Preview = {
     }
   },
   decorators: [
-    (Story, { className }: { className: string }) => {
-      return (
-        <MultipleStoryElementsWrapper className={className}>
-          <Story />
-        </MultipleStoryElementsWrapper>
-      );
-    },
+    withLiveEdit,
+    withGlobalStyle,
     withMemoryStats,
     // Should always be the last decorator (stories hooks issues otherwise) - bug in the addon
     withThemeByClassName({

packages/core/package.json

@@ -183,6 +183,9 @@
     "@types/react-window": "^1.8.5",
     "@typescript-eslint/eslint-plugin": "^5.36.1",
     "@typescript-eslint/parser": "^5.36.1",
+    "@uiw/codemirror-extensions-langs": "^4.21.25",
+    "@uiw/codemirror-theme-vscode": "^4.21.25",
+    "@uiw/react-codemirror": "^4.21.25",
     "acorn": "^8.7.1",
     "autoprefixer": "^10.4.0",
     "babel-core": "^6.26.3",
@@ -229,6 +232,7 @@
     "prettier": "^2.5.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
+    "react-live": "^4.1.5",
     "react-markdown": "^7.1.0",
     "react-resizable": "^3.0.4",
     "react-test-renderer": "^16.14.0",

packages/core/src/components/SplitButton/__stories__/splitButton.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/blocks";
 import { Link, UsageGuidelines } from "vibe-storybook-components";
 import SplitButton from "../SplitButton";
 import Button from "../../Button/Button";

packages/core/src/components/SplitButton/__stories__/splitButton.stories.js

@@ -51,6 +51,11 @@ export const Overview = {
         <MenuItem icon={Announcement} title="There" />
       </SplitButtonMenu>
     )
+  },
+  parameters: {
+    docs: {
+      liveEdit: { isEnabled: false }
+    }
   }
 };
 
@@ -89,7 +94,13 @@ export const Types = {
     </>
   ),
 
-  name: "Types"
+  name: "Types",
+
+  parameters: {
+    docs: {
+      liveEdit: { scope: { Check, Announcement } }
+    }
+  }
 };
 
 export const Sizes = {
@@ -128,7 +139,12 @@ export const Sizes = {
     </>
   ),
 
-  name: "Sizes"
+  name: "Sizes",
+  parameters: {
+    docs: {
+      liveEdit: { scope: { Check, Announcement } }
+    }
+  }
 };
 
 export const SplitButtonWithIcons = {
@@ -159,7 +175,12 @@ export const SplitButtonWithIcons = {
     </>
   ),
 
-  name: "Split button with icons"
+  name: "Split button with icons",
+  parameters: {
+    docs: {
+      liveEdit: { scope: { Add, Check, Announcement } }
+    }
+  }
 };
 
 export const SplitButtonAsThePrimaryAction = {
@@ -176,7 +197,12 @@ export const SplitButtonAsThePrimaryAction = {
     />
   ),
 
-  name: "Split button as the primary action"
+  name: "Split button as the primary action",
+  parameters: {
+    docs: {
+      liveEdit: { scope: { Download, Upload } }
+    }
+  }
 };
 
 export const SecondarySplitButton = {
@@ -217,5 +243,10 @@ export const CustomMenu = {
     </SplitButton>
   ),
 
-  name: "Custom menu"
+  name: "Custom menu",
+  parameters: {
+    docs: {
+      liveEdit: { scope: { Sun, Moon, Favorite } }
+    }
+  }
 };

packages/core/src/storybook/components/canvas-wrapper/CanvasWrapper.module.scss

@@ -0,0 +1,28 @@
+.editorContainer {
+  position: relative;
+  top: -40px;
+  width: 100%;
+  background: transparent;
+  max-height: 0;
+  opacity: 0;
+  transition: max-height 0.1s ease-out, opacity 0.1s ease-out;
+  overflow: auto;
+  border-radius: 0 0 4px 4px;
+  box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0;
+  border: 1px solid hsla(203, 50%, 30%, 0.15);
+  border-top: none;
+
+  &[data-editor-open="true"] {
+    max-height: 500px;
+    opacity: 1;
+  }
+
+  & :global(.cm-editor) {
+    padding: var(--sb-spacing-medium);
+  }
+}
+
+.canvas:has(+ [data-editor-open="true"]) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}

packages/core/src/storybook/components/canvas-wrapper/CanvasWrapper.tsx

@@ -0,0 +1,36 @@
+import { Canvas, useOf } from "@storybook/blocks";
+import { ComponentProps, FC, useMemo, useState } from "react";
+import styles from "./CanvasWrapper.module.scss";
+
+type CanvasWrapper = ComponentProps<typeof Canvas>;
+
+const CanvasWrapper: FC<CanvasWrapper> = ({ of }) => {
+  const [open, setOpen] = useState<boolean>(false);
+
+  // resolve Storybook story module to get the story id and parameters of current rendered story
+  const { story } = useOf(of, ["story"]);
+
+  const toggleCodeAction = useMemo(
+    () => ({
+      title: "Toggle code editor",
+      onClick: () => setOpen(prev => !prev)
+    }),
+    []
+  );
+
+  const liveEditEnabledForStory = story.parameters.docs?.liveEdit?.isEnabled;
+
+  return (
+    <>
+      <Canvas
+        of={of}
+        sourceState={liveEditEnabledForStory ? "none" : "hidden"}
+        additionalActions={liveEditEnabledForStory ? [toggleCodeAction] : []}
+        className={styles.canvas}
+      />
+      {liveEditEnabledForStory && <div id={story.id} className={styles.editorContainer} data-editor-open={open} />}
+    </>
+  );
+};
+
+export default CanvasWrapper;

packages/core/src/storybook/components/live-editor/LiveEditor.tsx

@@ -0,0 +1,34 @@
+import React, { forwardRef } from "react";
+import CodeMirror, { Extension, ReactCodeMirrorRef, BasicSetupOptions } from "@uiw/react-codemirror";
+
+interface EditorProps {
+  code: string;
+  onChange: (newVal: string) => void;
+  placeholder?: string;
+  loading?: boolean;
+  theme?: "light" | "dark" | Extension;
+  style?: React.CSSProperties;
+  extensions?: Extension[];
+  setup?: BasicSetupOptions;
+}
+
+type EditorComponent = React.ForwardRefExoticComponent<EditorProps & React.RefAttributes<ReactCodeMirrorRef>>;
+
+const LiveEditor: EditorComponent = forwardRef(
+  ({ code, onChange, placeholder, theme = "light", style, extensions, setup }, ref) => {
+    return (
+      <CodeMirror
+        style={style}
+        ref={ref}
+        theme={theme}
+        value={code}
+        extensions={extensions}
+        onChange={onChange}
+        placeholder={placeholder}
+        basicSetup={setup}
+      />
+    );
+  }
+);
+
+export default LiveEditor;

packages/core/src/storybook/components/live-preview/LivePreview.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { withLive } from "react-live";
+
+interface LivePreview {
+  live?: {
+    // live injects more, currently unneeded, props
+    error?: string;
+    element?: React.ComponentType;
+  };
+}
+
+const LivePreview: React.FC<LivePreview> = ({ live = {} }) => {
+  const { error, element: Element } = live;
+  return <>{error ?? (Element && <Element />)}</>;
+};
+export default withLive(LivePreview);

packages/core/src/storybook/decorators/withGlobalStyle/withGlobalStyle.module.scss

@@ -0,0 +1,3 @@
+.storyWrapper {
+  padding: var(--spacing-xl) var(--spacing-large);
+}

packages/core/src/storybook/decorators/withGlobalStyle/withGlobalStyle.tsx

@@ -0,0 +1,14 @@
+import { MultipleStoryElementsWrapper } from "vibe-storybook-components";
+import cx from "classnames";
+import styles from "./withGlobalStyle.module.scss";
+import { Decorator } from "@storybook/react";
+
+const WithGlobalStyle: Decorator = (Story, { className, viewMode }) => {
+  return (
+    <MultipleStoryElementsWrapper className={cx({ [styles.storyWrapper]: viewMode === "docs" }, className)}>
+      <Story />
+    </MultipleStoryElementsWrapper>
+  );
+};
+
+export default WithGlobalStyle;

packages/core/src/storybook/decorators/withLiveEdit/prettier-utils.ts

@@ -0,0 +1,17 @@
+import { format, Options } from "prettier";
+import parserHtml from "prettier/parser-html";
+import parserTypeScript from "prettier/parser-typescript";
+
+export function formatCode(code: string): string {
+  const options: Options = {
+    parser: "typescript",
+    arrowParens: "avoid",
+    trailingComma: "es5",
+    plugins: [parserHtml, parserTypeScript]
+  };
+  try {
+    return format(code, options).replace(/;\s*$/, "");
+  } catch (e) {
+    throw new Error(`[LiveEdit Error]: Error formatting code: ${e}`);
+  }
+}

packages/core/src/storybook/decorators/withLiveEdit/withLiveEdit.module.scss

@@ -0,0 +1,13 @@
+.modifiedVersionIndicator {
+  position: absolute;
+  top: 0;
+  left: calc(50% - var(--sb-spacing-large));
+  margin: 0;
+  border-radius: 0 0 4px 4px;
+  background: var(--sb-primary-color);
+  color: var(--sb-text-color-on-primary);
+  padding: var(--sb-spacing-xs);
+  font-size: 10px;
+  pointer-events: none;
+  user-select: none;
+}