docs(Playground): enhance intro code + allow using React's hooks directly

packages/core/.storybook/preview.tsx

@@ -3,6 +3,7 @@ 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";
@@ -117,7 +118,18 @@ const preview: Preview = {
     },
     playground: {
       storyId: "playground",
-      components: { ...VibeComponents, VibeIcons, VibeNext: VibeComponentsNext, ...VibeHooks },
+      components: {
+        vibeLogo,
+        ...VibeComponents,
+        VibeIcons,
+        VibeNext: VibeComponentsNext,
+        ...VibeHooks,
+        useState: React.useState,
+        useEffect: React.useEffect,
+        useCallback: React.useCallback,
+        useMemo: React.useMemo,
+        useRef: React.useRef
+      },
       introCode,
       autocompletions: generateAutocompletion(reactDocgenOutput)
     }

packages/core/.storybook/tsconfig.json

@@ -1,7 +1,8 @@
 {
   "extends": "../tsconfig.base.json",
   "compilerOptions": {
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "types": ["./types.ts"]
   },
   "include": ["**/*.ts", "**/*.tsx", "**/*.json"]
 }

packages/core/.storybook/types.ts

@@ -0,0 +1,4 @@
+declare module "*.svg" {
+  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+  export default content;
+}

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

@@ -1,47 +1,48 @@
 export const jsx = `() => {
-  const [timesClicked, setTimesClicked] = React.useState<number>(0);
+  const [timesClicked, setTimesClicked] = useState<number>(0);
 
   function onButtonClick(): void {
-    if (timesClicked === 0) {
-      alert("isn't that nice?");
-    }
     setTimesClicked(prev => prev + 1);
   }
 
   return (
-    <Flex direction="column" align="start" gap="medium">
-      <div>
-        <Heading>Online Playground</Heading>
-        <Heading type="h3" color='secondary'>
-          Prototype with actual components
+    <Flex direction="column" gap={40} className="playground">
+      <img src={vibeLogo} alt="Vibe Logo" className="vibe-logo" />
+      <section>
+        <Heading type="h3" align="center" color="secondary">
+          Playground
         </Heading>
-      </div>
-      <div>
-        <Text>Can't see the code editor?</Text>
-        <Text element="span">
-          Click on the <VibeIcons.Settings /> button on the left panel and
-          select the{" "}
+        <Text type="text2" color="secondary" ellipsis={false}>
+          Craft, Experiment, and Innovate with Vibe.
         </Text>
-        <Text element="span" weight="bold">
-          "Change Addons Orientation"
+      </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>
-      </div>
-      <Button onClick={onButtonClick}>
-        Click me
-      </Button>
-      <Text>Button has been clicked {timesClicked} times</Text>
+      </Flex>
     </Flex>
   );
 }`;
 
-export const css = `.container {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-medium);
+export const css = `.playground {
+  padding-block-start: 40px;
+  margin: 0;
+  width: 100vw;
 }
 
-.action-button {
-  align-self: flex-start;
-}`;
+.vibe-logo {
+  width: 150px;
+  transition: transform 0.3s ease, filter 0.3s ease;
+}
+
+.vibe-logo:hover {
+  transform: scale(1.02);
+  filter: drop-shadow(0 0 32px rgba(80, 52, 255, 0.3));
+}
+`;
 
 export default { jsx, css };