Merge pull request #534 from omnifed/533-docs-mode-toggle-weirdness

docs: hotfix button issue
omnifed · Oct 2, 2024 · e9d1b6e · e9d1b6e
2 parents cf82128 + 9969dec
commit e9d1b6e
Show file tree

Hide file tree

Showing 9 changed files with 59 additions and 19 deletions.
diff --git a/docs/app/actions/theme.ts b/docs/app/actions/theme.ts
@@ -0,0 +1,15 @@
+'use server'
+
+import type { ColorModes } from '@cerberus-design/react'
+import type { ThemeName } from '@/styled-system/themes'
+import { getCookie } from './cookies'
+
+export async function getCachedTheme() {
+  const themeName = (await getCookie('theme')) as ThemeName
+  const colorModeName = (await getCookie('colorMode')) as ColorModes | undefined
+  return {
+    themeName,
+    colorModeName,
+    cached: Boolean(themeName && colorModeName),
+  }
+}
diff --git a/docs/app/api/route.ts b/docs/app/api/route.ts
@@ -0,0 +1,15 @@
+import { getCachedTheme } from '../actions/theme'
+import { setCookie } from '../actions/cookies'
+
+export async function GET() {
+  const { themeName, colorModeName, cached } = await getCachedTheme()
+
+  if (!cached) {
+    await setCookie('theme', themeName)
+    await setCookie('colorMode', colorModeName)
+  }
+
+  return new Response(
+    JSON.stringify({ themeName, colorModeName, success: true }),
+  )
+}
diff --git a/docs/app/components/ModeToggle.tsx b/docs/app/components/ModeToggle.tsx
@@ -13,10 +13,13 @@ export function ModeToggle() {
     return mode === 'light' ? 'Switch to dark mode' : 'Switch to light mode'
   }, [mode])
 
-  const handleUpdateMode = useCallback((e: MouseEvent<HTMLButtonElement>) => {
-    const currentMode = e.currentTarget.value
-    updateMode(currentMode === 'light' ? 'dark' : 'light')
-  }, [])
+  const handleUpdateMode = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      const currentMode = e.currentTarget.value
+      updateMode(currentMode === 'light' ? 'dark' : 'light')
+    },
+    [updateMode],
+  )
 
   return (
     <button

diff --git a/docs/app/components/Nav.tsx b/docs/app/components/Nav.tsx
@@ -12,7 +12,6 @@ import { AnimatingSunIcon } from './icons/AnimatingSunIcon'
 import { AnimatingMoonIcon } from './icons/AnimatingMoonIcon'
 import { usePathname } from 'next/navigation'
 import { focusStates } from '@cerberus-design/panda-preset'
-import { getColorMode } from '../utils/colors'
 import { button } from '@cerberus/styled-system/recipes'
 import { DogIcon } from './icons/DogIcon'
 import { FireIcon } from './icons/FireIcon'

diff --git a/docs/app/layout.tsx b/docs/app/layout.tsx
@@ -8,12 +8,13 @@ import {
   type DefaultThemes,
 } from '@cerberus-design/react'
 import { css, cx } from '@cerberus/styled-system/css'
-import { getTheme, type ThemeName } from '@/styled-system/themes'
+import { getTheme } from '@/styled-system/themes'
 import { base, openGraph } from './shared-metadata'
 import { Nav } from './components/Nav'
 
 import './globals.css'
-import { getCookie, setCookie } from './actions/cookies'
+import { setCookie } from './actions/cookies'
+import { getCachedTheme } from './actions/theme'
 
 const poppins = Poppins({
   display: 'swap',
@@ -37,9 +38,10 @@ export const metadata: Metadata = {
 interface RootProps {}
 
 export default async function RootLayout(props: PropsWithChildren<RootProps>) {
-  const themeName = (await getCookie('theme')) as ThemeName
-  const theme = themeName && (await getTheme(themeName))
-  const colorModeName = (await getCookie('colorMode')) as ColorModes | undefined
+  const { themeName, colorModeName } = await getCachedTheme()
+  const defaultThemeName = themeName || 'cerberus'
+  const defaultColorModeName = colorModeName || 'light'
+  const theme = defaultThemeName && (await getTheme(defaultThemeName))
 
   const handleUpdateTheme = async (theme: DefaultThemes) => {
     'use server'
@@ -55,11 +57,11 @@ export default async function RootLayout(props: PropsWithChildren<RootProps>) {
     <html
       className={cx(poppins.variable, recursive.variable)}
       lang="en"
-      data-panda-theme={themeName || 'cerberus'}
-      data-color-mode={colorModeName || 'light'}
+      data-panda-theme={defaultThemeName}
+      data-color-mode={defaultColorModeName}
     >
       <Analytics />
-      {themeName && (
+      {defaultThemeName && (
         <head>
           <style
             type="text/css"
@@ -76,8 +78,8 @@ export default async function RootLayout(props: PropsWithChildren<RootProps>) {
         })}
       >
         <ThemeProvider
-          defaultTheme={themeName || 'cerberus'}
-          defaultColorMode={colorModeName || 'light'}
+          defaultTheme={defaultThemeName}
+          defaultColorMode={defaultColorModeName}
           updateTheme={handleUpdateTheme}
           updateMode={handleUpdateMode}
         >

diff --git a/docs/app/page.tsx b/docs/app/page.tsx
@@ -5,7 +5,7 @@ import Link from 'next/link'
 import Image from 'next/image'
 import { button } from '@cerberus/styled-system/recipes'
 
-export default function Home() {
+export default async function Home() {
   return (
     <div
       className={css({

diff --git a/packages/panda-preset/src/index.ts b/packages/panda-preset/src/index.ts
@@ -29,12 +29,13 @@ export const cerberusPreset: Preset = definePreset({
 
   // optional themes
   themes: {
+    cerberus: baseTheme,
     acheron: acheronTheme,
   },
 
   // opt-into additional theme variants
   staticCss: {
-    themes: ['acheron'],
+    themes: ['cerberus', 'acheron'],
   },
 })
 

diff --git a/packages/styled-system/themes/cerberus.json b/packages/styled-system/themes/cerberus.json
diff --git a/packages/styled-system/themes/index.d.ts b/packages/styled-system/themes/index.d.ts
@@ -1,6 +1,11 @@
 /* eslint-disable */
-export type ThemeName = 'acheron'
+export type ThemeName = 'cerberus' | 'acheron'
 export type ThemeByName = {
+  cerberus: {
+    id: string
+    name: 'cerberus'
+    css: string
+  }
   acheron: {
     id: string
     name: 'acheron'