From d5baed813db1f7941c6309817816e88c75fcc387 Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Tue, 17 Dec 2024 15:54:44 +0200
Subject: [PATCH] docs: fix playground story intro code (#2658)

---
 packages/core/.storybook/preview.tsx          |  2 -
 .../core/.storybook/{ => static}/logo.svg     |  0
 packages/core/.storybook/theme.js             |  3 +-
 packages/core/.storybook/tsconfig.json        |  3 +-
 packages/core/.storybook/types.ts             |  4 --
 .../playground/playground-helpers.ts          | 38 ++++++++++++-------
 6 files changed, 27 insertions(+), 23 deletions(-)
 rename packages/core/.storybook/{ => static}/logo.svg (100%)
 delete mode 100644 packages/core/.storybook/types.ts

diff --git a/packages/core/.storybook/preview.tsx b/packages/core/.storybook/preview.tsx
index ce0c0462e5..12c5e546c5 100644
--- a/packages/core/.storybook/preview.tsx
+++ b/packages/core/.storybook/preview.tsx
@@ -3,7 +3,6 @@ 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 vibeLogo from "./logo.svg";
 import { Preview } from "@storybook/react";
 import isChromatic from "chromatic/isChromatic";
 import { DocsContainer, DocsPage, Unstyled } from "@storybook/blocks";
@@ -119,7 +118,6 @@ const preview: Preview = {
     playground: {
       storyId: "playground",
       components: {
-        vibeLogo,
         ...VibeComponents,
         VibeIcons,
         VibeNext: VibeComponentsNext,
diff --git a/packages/core/.storybook/logo.svg b/packages/core/.storybook/static/logo.svg
similarity index 100%
rename from packages/core/.storybook/logo.svg
rename to packages/core/.storybook/static/logo.svg
diff --git a/packages/core/.storybook/theme.js b/packages/core/.storybook/theme.js
index df95ba98db..bf293c3d07 100644
--- a/packages/core/.storybook/theme.js
+++ b/packages/core/.storybook/theme.js
@@ -1,9 +1,8 @@
 import { create } from "@storybook/theming/create";
-import logo from "./logo.svg";
 
 export default create({
   base: "light",
-  brandImage: logo,
+  brandImage: "/logo.svg",
   brandUrl: "https://vibe.monday.com",
   barSelectedColor: "#5034ff",
   brandTitle: "Vibe Design System",
diff --git a/packages/core/.storybook/tsconfig.json b/packages/core/.storybook/tsconfig.json
index 51921f065d..6b21f65983 100644
--- a/packages/core/.storybook/tsconfig.json
+++ b/packages/core/.storybook/tsconfig.json
@@ -1,8 +1,7 @@
 {
   "extends": "../tsconfig.base.json",
   "compilerOptions": {
-    "resolveJsonModule": true,
-    "types": ["./types.ts"]
+    "resolveJsonModule": true
   },
   "include": ["**/*.ts", "**/*.tsx", "**/*.json"]
 }
diff --git a/packages/core/.storybook/types.ts b/packages/core/.storybook/types.ts
deleted file mode 100644
index 2ff147833c..0000000000
--- a/packages/core/.storybook/types.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-declare module "*.svg" {
-  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
-  export default content;
-}
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 b5785866e8..7d55cebb1c 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
@@ -6,24 +6,31 @@ export const jsx = `() => {
   }
 
   return (
-    <Flex direction="column" gap={40} className="playground">
-      <img src={vibeLogo} alt="Vibe Logo" className="vibe-logo" />
-      <section>
-        <Heading type="h3" align="center" color="secondary">
+    <Flex direction="column" className="playground">
+      <img
+        src="https://vibe.monday.com/logo.svg"
+        alt="Vibe Logo"
+        className="vibe-logo"
+      />
+      <Flex direction="column" align="center" justify="center" gap="xs">
+        <Heading type="h3" align="center">
           Playground
         </Heading>
-        <Text type="text2" color="secondary" ellipsis={false}>
+        <Text type="text2" ellipsis={false}>
           Craft, Experiment, and Innovate with Vibe.
         </Text>
-      </section>
-      <Flex direction="column" align="center" justify="center" gap="small">
-        <Button kind="secondary" size="small" onClick={onButtonClick}>
-          Clicked {timesClicked} time{timesClicked === 1 ? "" : "s"}
-        </Button>
-        <Text type="text3" color="secondary" ellipsis={false}>
-          Tip: Can't see the editor? Click 'D' on your keyboard
-        </Text>
       </Flex>
+      <Button
+        kind="secondary"
+        size="small"
+        onClick={onButtonClick}
+        className="count-button"
+      >
+        Clicked {timesClicked} time{timesClicked === 1 ? "" : "s"}
+      </Button>
+      <Text type="text3" ellipsis={false} color="secondary">
+        Can't see the editor? Click 'D' on your keyboard
+      </Text>
     </Flex>
   );
 }`;
@@ -36,6 +43,7 @@ export const css = `.playground {
 
 .vibe-logo {
   width: 150px;
+  margin-block-end: var(--spacing-large);
   transition: transform 0.3s ease, filter 0.3s ease;
 }
 
@@ -43,6 +51,10 @@ export const css = `.playground {
   transform: scale(1.02);
   filter: drop-shadow(0 0 32px rgba(80, 52, 255, 0.3));
 }
+
+.count-button {
+  margin-block: var(--spacing-medium);
+}
 `;
 
 export default { jsx, css };