Move to Nextjs 14

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

.eslintignore

@@ -7,7 +7,7 @@
 **/.git/**
 **/public/**
 **/microsite/**
-**/canon-website/**
+**/canon-docs/**
 **/templates/**
 **/sample-templates/**
 playwright.config.ts

.prettierignore

@@ -1,7 +1,7 @@
 .yarn
 dist
 microsite
-canon-website
+canon-docs
 coverage
 *.hbs
 templates

canon-docs/.eslintrc.json

@@ -0,0 +1,8 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"],
+  "rules": {
+    "notice/notice": "off",
+    "react/forbid-elements": "off",
+    "jsx-a11y/alt-text": "off"
+  }
+}

canon-docs/.gitignore

@@ -3,12 +3,8 @@
 # dependencies
 /node_modules
 /.pnp
-.pnp.*
-.yarn/*
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/versions
+.pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage
@@ -28,10 +24,9 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-.pnpm-debug.log*
 
-# env files (can opt-in for committing if needed)
-.env*
+# local env files
+.env*.local
 
 # vercel
 .vercel

canon-docs/next.config.mjs

@@ -1,8 +1,11 @@
-import type { NextConfig } from 'next';
 import createMDX from '@next/mdx';
 
-const nextConfig: NextConfig = {
+const nextConfig = {
   pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
+  // output: 'export',
+  // images: {
+  //   unoptimized: true,
+  // },
 };
 
 const withMDX = createMDX({});

canon-docs/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "canon-docs",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "build": "next build",
+    "dev": "next dev",
+    "dev-all": "concurrently \"next dev\" \"yarn watch-css\"",
+    "lint": "next lint",
+    "start": "next start",
+    "watch-css": "node scripts/watch-css.js"
+  },
+  "dependencies": {
+    "@mdx-js/loader": "^3.1.0",
+    "@mdx-js/react": "^3.1.0",
+    "@next/mdx": "^15.1.4",
+    "@types/mdx": "^2.0.13",
+    "next": "14.2.23",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-frame-component": "^5.2.7",
+    "shiki": "^1.26.1"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "concurrently": "^9.1.2",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.23",
+    "lightningcss": "^1.28.2",
+    "typescript": "^5"
+  }
+}

canon-docs/src/app/(docs)/components/box/page.mdx

@@ -1,9 +1,9 @@
-import { CodeBlock } from '../components/CodeBlock';
-import { PropsTable } from '../components/PropsTable';
-import { spacePropsList } from '../utils/spaceProps';
-import { Tabs } from '../components/Tabs';
-import { Snippet } from '../components/Snippet';
-import { BoxPreview } from '../snippets/box';
+import { CodeBlock } from '@/components/CodeBlock';
+import { PropsTable } from '@/components/PropsTable';
+import { spacePropsList } from '@/utils/spaceProps';
+import { Tabs } from '@/components/Tabs';
+import { Snippet } from '@/components/Snippet';
+import { BoxPreview } from '@/snippets/box';
 
 # Box
 

canon-docs/src/app/(docs)/components/button/page.mdx

@@ -1,7 +1,7 @@
-import { PropsTable } from '../components/PropsTable';
-import { Snippet } from '../components/Snippet';
-import { Tabs } from '../components/Tabs';
-import { CodeBlock } from '../components/CodeBlock';
+import { PropsTable } from '@/components/PropsTable';
+import { Snippet } from '@/components/Snippet';
+import { Tabs } from '@/components/Tabs';
+import { CodeBlock } from '@/components/CodeBlock';
 import {
   ButtonPreview,
   ButtonSizes,
@@ -9,8 +9,8 @@ import {
   ButtonFullWidth,
   ButtonDisabled,
   ButtonResponsive,
-} from '../snippets/button';
-import { buttonVariants } from './_snippets';
+} from '@/snippets/button';
+import { buttonVariants } from '@/snippets/_snippets';
 
 # Button
 

canon-docs/src/app/(docs)/components/checkbox/page.mdx

@@ -1,9 +1,9 @@
-import { PropsTable } from '../components/PropsTable';
-import { CheckboxPreview, CheckboxAllVariants } from '../snippets/checkbox';
-import { Snippet } from '../components/Snippet';
-import { Tabs } from '../components/Tabs';
-import { CodeBlock } from '../components/CodeBlock';
-import { BaseUI } from '../components/HeadlessBanners/BaseUI';
+import { PropsTable } from '@/components/PropsTable';
+import { CheckboxPreview, CheckboxAllVariants } from '@/snippets/checkbox';
+import { Snippet } from '@/components/Snippet';
+import { Tabs } from '@/components/Tabs';
+import { CodeBlock } from '@/components/CodeBlock';
+import { BaseUI } from '@/components/HeadlessBanners/BaseUI';
 
 # Checkbox
 

canon-docs/src/app/(docs)/components/container/page.mdx

@@ -1,9 +1,9 @@
-import { CodeBlock } from '../components/CodeBlock';
-import { PropsTable } from '../components/PropsTable';
-import { spacePropsList } from '../utils/spaceProps';
-import { Tabs } from '../components/Tabs';
-import { Snippet } from '../components/Snippet';
-import { ContainerPreview } from '../snippets/container';
+import { CodeBlock } from '@/components/CodeBlock';
+import { PropsTable } from '@/components/PropsTable';
+import { spacePropsList } from '@/utils/spaceProps';
+import { Tabs } from '@/components/Tabs';
+import { Snippet } from '@/components/Snippet';
+import { ContainerPreview } from '@/snippets/container';
 
 # Container
 

canon-docs/src/app/(docs)/components/grid/page.mdx

@@ -1,10 +1,10 @@
-import { CodeBlock } from '../components/CodeBlock';
-import { PropsTable } from '../components/PropsTable';
-import { spacePropsList } from '../utils/spaceProps';
-import { Tabs } from '../components/Tabs';
-import { grid } from './_snippets';
-import { Snippet } from '../components/Snippet';
-import { GridPreview } from '../snippets/grid';
+import { CodeBlock } from '@/components/CodeBlock';
+import { PropsTable } from '@/components/PropsTable';
+import { spacePropsList } from '@/utils/spaceProps';
+import { Tabs } from '@/components/Tabs';
+import { grid } from '@/snippets/_snippets';
+import { Snippet } from '@/components/Snippet';
+import { GridPreview } from '@/snippets/grid';
 
 # Grid
 

canon-docs/src/app/(docs)/components/heading/page.mdx

@@ -1,12 +1,12 @@
-import { PropsTable } from '../components/PropsTable';
+import { PropsTable } from '@/components/PropsTable';
 import {
   HeadingPreview,
   HeadingAllVariants,
   HeadingResponsive,
-} from '../snippets/heading';
-import { Snippet } from '../components/Snippet';
-import { Tabs } from '../components/Tabs';
-import { CodeBlock } from '../components/CodeBlock';
+} from '@/snippets/heading';
+import { Snippet } from '@/components/Snippet';
+import { Tabs } from '@/components/Tabs';
+import { CodeBlock } from '@/components/CodeBlock';
 
 # Heading
 

canon-docs/src/app/(docs)/components/icon/page.mdx

@@ -1,9 +1,9 @@
-import { PropsTable } from '../components/PropsTable';
+import { PropsTable } from '@/components/PropsTable';
 import { icons } from '@backstage/canon';
-import { IconPreview } from '../snippets/icon';
-import { Snippet } from '../components/Snippet';
-import { Tabs } from '../components/Tabs';
-import { CodeBlock } from '../components/CodeBlock';
+import { IconPreview } from '@/snippets/icon';
+import { Snippet } from '@/components/Snippet';
+import { Tabs } from '@/components/Tabs';
+import { CodeBlock } from '@/components/CodeBlock';
 
 # Icon
 

canon-docs/src/app/(docs)/components/inline/page.mdx

@@ -1,9 +1,9 @@
-import { CodeBlock } from '../components/CodeBlock';
-import { PropsTable } from '../components/PropsTable';
-import { spacePropsList } from '../utils/spaceProps';
-import { Tabs } from '../components/Tabs';
-import { Snippet } from '../components/Snippet';
-import { InlinePreview } from '../snippets/inline';
+import { CodeBlock } from '@/components/CodeBlock';
+import { PropsTable } from '@/components/PropsTable';
+import { spacePropsList } from '@/utils/spaceProps';
+import { Tabs } from '@/components/Tabs';
+import { Snippet } from '@/components/Snippet';
+import { InlinePreview } from '@/snippets/inline';
 
 # Inline
 

canon-docs/src/app/(docs)/components/stack/page.mdx

@@ -1,15 +1,15 @@
-import { PropsTable } from '../components/PropsTable';
-import { spacePropsList } from '../utils/spaceProps';
-import { Tabs } from '../components/Tabs';
-import { CodeBlock } from '../components/CodeBlock';
+import { PropsTable } from '@/components/PropsTable';
+import { spacePropsList } from '@/utils/spaceProps';
+import { Tabs } from '@/components/Tabs';
+import { CodeBlock } from '@/components/CodeBlock';
 import {
   stackFAQ1,
   stackSimple,
   stackResponsive,
   stackAlign,
-} from './_snippets';
-import { Snippet } from '../components/Snippet';
-import { StackPreview } from '../snippets/stack';
+} from '@/snippets/_snippets';
+import { Snippet } from '@/components/Snippet';
+import { StackPreview } from '@/snippets/stack';
 
 # Stack
 

canon-docs/src/app/(docs)/components/text/page.mdx

@@ -1,13 +1,13 @@
-import { PropsTable } from '../components/PropsTable';
+import { PropsTable } from '@/components/PropsTable';
 import {
   TextPreview,
   TextAllVariants,
   TextResponsive,
   TextAllWeights,
-} from '../snippets/text';
-import { Snippet } from '../components/Snippet';
-import { Tabs } from '../components/Tabs';
-import { CodeBlock } from '../components/CodeBlock';
+} from '@/snippets/text';
+import { Snippet } from '@/components/Snippet';
+import { Tabs } from '@/components/Tabs';
+import { CodeBlock } from '@/components/CodeBlock';
 
 # Text
 

canon-docs/src/app/(docs)/layout.module.css

@@ -1,4 +1,4 @@
-.container {
+.pageContainer {
   width: 100%;
   max-width: 960px;
   margin: 0 auto;

canon-docs/src/app/(docs)/layout.tsx

@@ -0,0 +1,16 @@
+import type { Metadata } from 'next';
+
+import styles from './layout.module.css';
+
+export const metadata: Metadata = {
+  title: 'Canon',
+  description: 'UI library for Backstage',
+};
+
+export default function DocsLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return <div className={styles.pageContainer}>{children}</div>;
+}

canon-docs/src/app/(docs)/page.mdx

@@ -1,4 +1,4 @@
-import { CodeBlock } from '../components/CodeBlock';
+import { CodeBlock } from '@/components/CodeBlock';
 
 <img src="header.png" style={{ width: '100%', marginBottom: '32px' }} />
 

canon-docs/src/app/(docs)/theme/typography/page.mdx

@@ -1,6 +1,6 @@
-import { HeadingAllVariants } from '../snippets/heading';
-import { TextAllVariants } from '../snippets/text';
-import { Snippet } from '../components/Snippet';
+import { HeadingAllVariants } from '@/snippets/heading';
+import { TextAllVariants } from '@/snippets/text';
+import { Snippet } from '@/components/Snippet';
 
 # Typography
 

canon-docs/src/app/(playground)/playground/page.tsx

@@ -1,9 +1,7 @@
 'use client';
 
 import { ReactNode } from 'react';
-import { Grid } from '../../../packages/canon/src/components/Grid';
-import { Stack } from '../../../packages/canon/src/components/Stack';
-import { Text } from '../../../packages/canon/src/components/Text';
+import { Grid, Stack, Text } from '../../../../../packages/canon';
 import { screenSizes } from '@/utils/data';
 import { Frame } from '@/components/Frame';
 import { usePlayground } from '@/utils/playground-context';

canon-docs/src/app/layout.tsx

@@ -3,29 +3,33 @@ import { Sidebar } from '../components/Sidebar';
 
 import styles from './page.module.css';
 import { Providers } from './providers';
-import { cookies } from 'next/headers';
 
 import './globals.css';
-import '@/public/core.css';
-import '@/public/components.css';
-import '@/public/backstage.css';
+import '/public/core.css';
+import '/public/components.css';
+import '/public/backstage.css';
 
 export const metadata: Metadata = {
   title: 'Canon',
   description: 'UI library for Backstage',
 };
 
-export default async function RootLayout({
+export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const cookieStore = await cookies();
-  const theme = cookieStore.get('theme')?.value || 'light';
-  const themeName = cookieStore.get('theme-name')?.value || 'default';
+  // const cookieStore = await cookies();
+  // const theme = cookieStore.get('theme')?.value || 'light';
+  // const themeName = cookieStore.get('theme-name')?.value || 'default';
 
   return (
-    <html lang="en" data-theme={theme} data-theme-name={themeName}>
+    <html
+      lang="en"
+      data-theme="light"
+      data-theme-name="default"
+      suppressHydrationWarning
+    >
       <body>
         <Providers>
           <div className={styles.global}>

canon-docs/src/app/providers.tsx

@@ -0,0 +1,29 @@
+/*
+* Copyright 2024 The Backstage Authors
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+'use client';
+
+import { ReactNode } from 'react';
+import { CanonProvider } from '../../../packages/canon/src/contexts/canon';
+import { PlaygroundProvider } from '@/utils/playground-context';
+
+export const Providers = ({ children }: { children: ReactNode }) => {
+  return (
+    <CanonProvider>
+      <PlaygroundProvider>{children}</PlaygroundProvider>
+    </CanonProvider>
+  );
+};

canon-docs/src/components/CodeBlock/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { BundledLanguage } from 'shiki';
 import { codeToHtml } from 'shiki';
-import { Text } from '../../../packages/canon/src/components/Text';
+import { Text } from '../../../../packages/canon/src/components/Text';
 import styles from './styles.module.css';
 
 interface CodeBlockProps {

canon-docs/src/components/HeadlessBanners/BaseUI.tsx

@@ -1,6 +1,6 @@
 import styles from './styles.module.css';
-import { Text } from '../../../packages/canon/src/components/Text';
-import { Icon } from '../../../packages/canon/src/components/Icon';
+import { Text } from '../../../../packages/canon/src/components/Text';
+import { Icon } from '../../../../packages/canon/src/components/Icon';
 
 interface BaseUIProps {
   href: string;

canon-docs/src/components/IconLibrary/IconLibrary.tsx

@@ -15,10 +15,10 @@
  */
 
 import React from 'react';
-import { Icon } from '../../../packages/canon/src/components/Icon';
-import type { IconNames } from '../../../packages/canon/src/components/Icon';
-import { Text } from '../../../packages/canon/src/components/Text';
-import { icons } from '../../../packages/canon/src/components/Icon/icons';
+import { Icon } from '../../../../packages/canon/src/components/Icon';
+import type { IconNames } from '../../../../packages/canon/src/components/Icon';
+import { Text } from '../../../../packages/canon/src/components/Text';
+import { icons } from '../../../../packages/canon/src/components/Icon/icons';
 import styles from './styles.module.css';
 
 export const IconLibrary = () => {

canon-docs/src/components/Sidebar/docs.tsx

@@ -2,8 +2,8 @@
 
 import Link from 'next/link';
 import { components, overview, layoutComponents, theme } from '@/utils/data';
-import { Box } from '../../../packages/canon/src/components/Box';
-import { Text } from '../../../packages/canon/src/components/Text';
+import { Box } from '../../../../packages/canon/src/components/Box';
+import { Text } from '../../../../packages/canon/src/components/Text';
 import { motion } from 'framer-motion';
 import styles from './Sidebar.module.css';
 import { usePathname } from 'next/navigation';

canon-docs/src/components/Sidebar/index.tsx

@@ -2,14 +2,9 @@ import styles from './Sidebar.module.css';
 import { TabsVersion, TabsPages, TabsTheme } from './tabs';
 import { Docs } from './docs';
 import { Playground } from './playground';
-import { cookies } from 'next/headers';
 import Link from 'next/link';
 
-export const Sidebar = async () => {
-  const cookieStore = await cookies();
-  const theme = cookieStore.get('theme');
-  const themeName = cookieStore.get('theme-name');
-
+export const Sidebar = () => {
   return (
     <div className={styles.sidebar}>
       <div className={styles.content}>
@@ -26,8 +21,8 @@ export const Sidebar = async () => {
           </svg>
         </Link>
         <div className={styles.actions}>
-          <TabsVersion themeName={themeName} />
-          <TabsTheme theme={theme} />
+          <TabsVersion />
+          <TabsTheme />
         </div>
         <TabsPages />
         <div className={styles.menu}>

canon-docs/src/components/Sidebar/playground.tsx

@@ -1,9 +1,9 @@
 'use client';
 
 import { components } from '@/utils/data';
-import { Box } from '../../../packages/canon/src/components/Box';
-import { Checkbox } from '../../../packages/canon/src/components/Checkbox';
-import { Text } from '../../../packages/canon/src/components/Text';
+import { Box } from '../../../../packages/canon/src/components/Box';
+import { Checkbox } from '../../../../packages/canon/src/components/Checkbox';
+import { Text } from '../../../../packages/canon/src/components/Text';
 import { motion } from 'framer-motion';
 import styles from './Sidebar.module.css';
 import { usePathname } from 'next/navigation';

canon-docs/src/components/Sidebar/tabs.tsx

@@ -2,22 +2,19 @@
 
 import styles from './Tabs.module.css';
 import { Tabs } from '@base-ui-components/react/tabs';
-import { Icon } from '../../../packages/canon/src/components/Icon';
-import { Text } from '../../../packages/canon/src/components/Text';
+import { Icon } from '../../../../packages/canon/src/components/Icon';
+import { Text } from '../../../../packages/canon/src/components/Text';
 import { usePathname } from 'next/navigation';
 import { useRouter } from 'next/navigation';
-import { setThemeCookie, setThemeNameCookie } from './actions';
+import { usePlayground } from '@/utils/playground-context';
 
-export const TabsVersion = ({
-  themeName,
-}: {
-  themeName?: { value: string; name: string };
-}) => {
+export const TabsVersion = () => {
+  const { selectedThemeName, setSelectedThemeName } = usePlayground();
   return (
     <Tabs.Root
       className={styles.tabs}
-      onValueChange={setThemeNameCookie}
-      value={themeName?.value || 'default'}
+      onValueChange={setSelectedThemeName}
+      value={selectedThemeName}
     >
       <Tabs.List className={styles.list}>
         <Tabs.Tab className={styles.tab} value="legacy">
@@ -36,16 +33,14 @@ export const TabsVersion = ({
   );
 };
 
-export const TabsTheme = ({
-  theme,
-}: {
-  theme?: { value: string; name: string };
-}) => {
+export const TabsTheme = () => {
+  const { selectedTheme, setSelectedTheme } = usePlayground();
+
   return (
     <Tabs.Root
       className={styles.tabsTheme}
-      onValueChange={setThemeCookie}
-      value={theme?.value || 'light'}
+      onValueChange={setSelectedTheme}
+      value={selectedTheme}
     >
       <Tabs.List className={styles.list}>
         <Tabs.Tab className={styles.tab} value="light">

canon-docs/src/components/Snippet/index.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { CodeBlock } from '../CodeBlock';
-import { Text } from '../../../packages/canon/src/components/Text';
+import { Text } from '../../../../packages/canon/src/components/Text';
 import { Collapsible } from '@base-ui-components/react/collapsible';
 import styles from './styles.module.css';
 

canon-docs/src/components/Tabs/parts.tsx

@@ -2,7 +2,7 @@
 
 import { Tabs as TabsPrimitive } from '@base-ui-components/react/tabs';
 import styles from './styles.module.css';
-import { Text } from '../../../packages/canon/src/components/Text';
+import { Text } from '../../../../packages/canon/src/components/Text';
 
 export const Root = ({
   className,

canon-docs/src/mdx-components.tsx

@@ -1,11 +1,11 @@
 import type { MDXComponents } from 'mdx/types';
 import Image, { ImageProps } from 'next/image';
-import { ReactNode, ReactElement } from 'react';
+import { ReactNode } from 'react';
 import React from 'react';
 import { CodeBlock } from '@/components/CodeBlock';
-import { Heading } from '../packages/canon/src/components/Heading';
-import { Text } from '../packages/canon/src/components/Text';
-import { Box } from '../packages/canon/src/components/Box';
+import { Heading } from '../../packages/canon/src/components/Heading';
+import { Text } from '../../packages/canon/src/components/Text';
+import { Box } from '../../packages/canon/src/components/Box';
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {

canon-docs/src/snippets/box.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import * as BoxStories from '../../packages/canon/src/components/Box/Box.stories';
+import * as BoxStories from '../../../packages/canon/src/components/Box/Box.stories';
 import { composeStories } from '@storybook/react';
 
 export const BoxPreview = () => {

canon-docs/src/snippets/button.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import * as ButtonStories from '../../packages/canon/src/components/Button/Button.stories';
+import * as ButtonStories from '../../../packages/canon/src/components/Button/Button.stories';
 import { composeStories } from '@storybook/react';
 
 export const ButtonPreview = () => {
@@ -42,7 +42,9 @@ export const ButtonResponsive = () => {
 };
 
 export const ButtonPlayground = () => {
-  const { Playground } = composeStories(ButtonStories);
+  // const { Playground } = composeStories(ButtonStories);
 
-  return <Playground />;
+  // return <Playground />;
+
+  return <div>werg</div>;
 };

canon-docs/src/snippets/checkbox.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import * as CheckboxStories from '../../packages/canon/src/components/Checkbox/Checkbox.stories';
+import * as CheckboxStories from '../../../packages/canon/src/components/Checkbox/Checkbox.stories';
 import { composeStories } from '@storybook/react';
 
 export const CheckboxPreview = () => {

canon-docs/src/snippets/container.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { composeStories } from '@storybook/react';
-import * as ContainerStories from '../../packages/canon/src/components/Container/Container.stories';
+import * as ContainerStories from '../../../packages/canon/src/components/Container/Container.stories';
 
 export const ContainerPreview = () => {
   const { Preview } = composeStories(ContainerStories);

canon-docs/src/snippets/grid.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { composeStories } from '@storybook/react';
-import * as GridStories from '../../packages/canon/src/components/Grid/Grid.stories';
+import * as GridStories from '../../../packages/canon/src/components/Grid/Grid.stories';
 
 export const GridPreview = () => {
   const { Default } = composeStories(GridStories);

canon-docs/src/snippets/heading.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import * as HeadingStories from '../../packages/canon/src/components/Heading/Heading.stories';
+import * as HeadingStories from '../../../packages/canon/src/components/Heading/Heading.stories';
 import { composeStories } from '@storybook/react';
 
 export const HeadingPreview = () => {

canon-docs/src/snippets/icon.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import * as IconStories from '../../packages/canon/src/components/Icon/Icon.stories';
+import * as IconStories from '../../../packages/canon/src/components/Icon/Icon.stories';
 import { composeStories } from '@storybook/react';
 
 export const IconPreview = () => {

canon-docs/src/snippets/inline.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import * as InlineStories from '../../packages/canon/src/components/Inline/Inline.stories';
+import * as InlineStories from '../../../packages/canon/src/components/Inline/Inline.stories';
 import { composeStories } from '@storybook/react';
 
 export const InlinePreview = () => {

canon-docs/src/snippets/stack.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import * as StackStories from '../../packages/canon/src/components/Stack/Stack.stories';
+import * as StackStories from '../../../packages/canon/src/components/Stack/Stack.stories';
 import { composeStories } from '@storybook/react';
 
 export const StackPreview = () => {

canon-docs/src/snippets/text.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import * as TextStories from '../../packages/canon/src/components/Text/Text.stories';
+import * as TextStories from '../../../packages/canon/src/components/Text/Text.stories';
 import { composeStories } from '@storybook/react';
 
 export const TextPreview = () => {

canon-docs/src/utils/playground-context.tsx

@@ -0,0 +1,90 @@
+import React, {
+  createContext,
+  useContext,
+  ReactNode,
+  useState,
+  useEffect,
+} from 'react';
+import { components } from './data';
+
+// Create a context with an empty array as the default value
+const PlaygroundContext = createContext<{
+  selectedScreenSizes: string[];
+  setSelectedScreenSizes: (screenSizes: string[]) => void;
+  selectedComponents: string[];
+  setSelectedComponents: (components: string[]) => void;
+  selectedTheme: string | null;
+  setSelectedTheme: (theme: string) => void;
+  selectedThemeName: string;
+  setSelectedThemeName: (themeName: string) => void;
+}>({
+  selectedScreenSizes: [],
+  setSelectedScreenSizes: () => {},
+  selectedComponents: [],
+  setSelectedComponents: () => {},
+  selectedTheme: 'light',
+  setSelectedTheme: () => {},
+  selectedThemeName: 'default',
+  setSelectedThemeName: () => {},
+});
+
+// Create a provider component
+export const PlaygroundProvider = ({ children }: { children: ReactNode }) => {
+  // Check if running in a browser environment
+  const isBrowser = typeof window !== 'undefined';
+
+  const [selectedScreenSizes, setSelectedScreenSizes] = useState<string[]>([]);
+  const [selectedComponents, setSelectedComponents] = useState<string[]>(
+    components.map(component => component.slug),
+  );
+  const [selectedTheme, setSelectedTheme] = useState<string | null>(() => {
+    return isBrowser ? localStorage.getItem('theme') : 'light';
+  });
+  const [selectedThemeName, setSelectedThemeName] = useState<string>(() => {
+    return isBrowser
+      ? localStorage.getItem('theme-name') || 'default'
+      : 'default';
+  });
+
+  useEffect(() => {
+    if (isBrowser) {
+      document.documentElement.setAttribute(
+        'data-theme',
+        selectedTheme || 'light',
+      );
+      localStorage.setItem('theme', selectedTheme || 'light');
+    }
+  }, [selectedTheme, isBrowser]);
+
+  useEffect(() => {
+    if (isBrowser) {
+      document.documentElement.setAttribute(
+        'data-theme-name',
+        selectedThemeName || 'default',
+      );
+      localStorage.setItem('theme-name', selectedThemeName || 'default');
+    }
+  }, [selectedThemeName, isBrowser]);
+
+  return (
+    <PlaygroundContext.Provider
+      value={{
+        selectedScreenSizes,
+        setSelectedScreenSizes,
+        selectedComponents,
+        setSelectedComponents,
+        selectedTheme,
+        setSelectedTheme,
+        selectedThemeName,
+        setSelectedThemeName,
+      }}
+    >
+      {children}
+    </PlaygroundContext.Provider>
+  );
+};
+
+// Create a custom hook to use the screen sizes
+export const usePlayground = () => {
+  return useContext(PlaygroundContext);
+};