docs: use selected theme in code demos (#3169)

Co-authored-by: Sebastian Sebald <[email protected]>
marigold-ui · Jul 20, 2023 · f0484d2 · f0484d2 · vercel · Jul 20, 2023
1 parent d36d4ef
commit f0484d2
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 6 deletions.
diff --git a/docs/app/_components/ThemeSwitch.tsx b/docs/app/_components/ThemeSwitch.tsx
@@ -25,7 +25,7 @@ export const useThemeSwitch = () => useContext(Context);
 export interface MarigoldThemeSwitchProps {
   children?: ReactNode;
   themes: { [name: string]: Theme };
-  initial?: string;
+  initial: string;
 }
 
 export const MarigoldThemeSwitch = ({

diff --git a/docs/app/layout.tsx b/docs/app/layout.tsx
@@ -1,21 +1,25 @@
 import './globals.css';
+import '@marigold/theme-b2b/index.css';
+import '@marigold/theme-core/index.css';
 
 import { MarigoldProvider } from '@/ui';
-import { theme } from '@/theme';
+import { theme, b2bTheme, coreTheme } from '@/theme';
 import { fontSans } from '@/theme/fonts';
 
 import { Analytics } from './_components/Analytics';
 import { Navigation } from './_components/Navigation';
 import { SiteHeader } from './_components/SiteHeader';
 import { MarigoldThemeSwitch } from './_components/ThemeSwitch';
-import { b2bTheme, coreTheme } from '@/theme';
 
 // Metadata
 // ---------------
 export const metadata = {
   title: 'Marigold Documentation',
   description: "Documentation of Reservix' Design System",
 };
+
+// Themes
+// ---------------
 const themes = {
   b2b: b2bTheme,
   core: coreTheme,
@@ -27,7 +31,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
   return (
     <html lang="en">
       <body className={`${fontSans.className} min-h-screen`}>
-        <MarigoldThemeSwitch themes={themes}>
+        <MarigoldThemeSwitch themes={themes} initial="b2b">
           <MarigoldProvider theme={theme}>
             <div className="flex min-h-screen flex-col">
               <SiteHeader />

diff --git a/docs/package.json b/docs/package.json
@@ -12,6 +12,8 @@
     "@marigold/components": "workspace:*",
     "@marigold/eslint-config": "workspace:*",
     "@marigold/icons": "workspace:*",
+    "@marigold/theme-b2b": "workspace:*",
+    "@marigold/theme-core": "workspace:*",
     "@marigold/theme-preset": "workspace:*",
     "@tailwindcss/typography": "0.5.9",
     "@vercel/analytics": "1.0.1",

diff --git a/docs/tsconfig.json b/docs/tsconfig.json
@@ -29,6 +29,7 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["./*"],
+      "@marigold/*/index.css": ["../themes/*/dist/index.css"],
       "@marigold/*": ["../packages/*/src", "../themes/*/src"],
       "contentlayer/generated": ["./.contentlayer/generated"]
     },

diff --git a/docs/ui/ComponentDemo.tsx b/docs/ui/ComponentDemo.tsx
@@ -1,6 +1,10 @@
 import { ReactNode } from 'react';
+import { type Theme } from '@marigold/system';
+
 import { registry } from '../registry';
+import { MarigoldProvider } from './marigold';
 
+import { useThemeSwitch } from '@/app/_components/ThemeSwitch';
 export interface ComponentDemoProps {
   name: keyof typeof registry;
   source: string;
@@ -13,15 +17,20 @@ export const ComponentDemo = ({
   children,
 }: ComponentDemoProps) => {
   const Demo = registry[name].demo;
+  const { current, themes } = useThemeSwitch();
 
   return (
     <div className="bg-cyan-800 p-10 text-cyan-100">
       <pre>
         <code className="language-tsx">{source}</code>
       </pre>
       <hr />
-      <div>
-        <Demo />
+      <div data-theme={current}>
+        <MarigoldProvider theme={(current && themes[current]) as Theme}>
+          <div className="px-4 py-6">
+            <Demo />
+          </div>
+        </MarigoldProvider>
       </div>
     </div>
   );

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml