From 0c718e28d1371c69acbfd3e0641b650db783d74f Mon Sep 17 00:00:00 2001 From: Greg Date: Mon, 22 Apr 2024 19:36:19 +0200 Subject: [PATCH] first dark mode fix --- apps/frontend/app/(website)/page.tsx | 11 +++++---- .../app/(website)/studio/main/5PaneSetup.tsx | 2 +- .../app/(website)/studio/main/Header.tsx | 2 +- apps/frontend/app/(website)/studio/page.tsx | 5 ++-- .../studio/src/components/Snippet/Monaco.tsx | 2 +- .../components/Snippet/MonacoDiffEditor.tsx | 2 +- .../src/components/chatbot/ChatMessage.tsx | 2 +- .../src/components/chatbot/CodeBlock.tsx | 2 +- .../src/components/chatbot/ModelSelector.tsx | 2 +- apps/frontend/app/context/index.ts | 2 +- .../{themeContext.tsx => useTheme.tsx} | 8 +++---- apps/frontend/app/layout.tsx | 8 +++---- apps/frontend/hooks/useTheme.tsx | 24 ++++++++++++++++--- .../19/remove-context-provider/README.md | 8 +++---- .../react/19/use-context-hook/README.md | 8 +++---- 15 files changed, 53 insertions(+), 35 deletions(-) rename apps/frontend/app/context/{themeContext.tsx => useTheme.tsx} (88%) diff --git a/apps/frontend/app/(website)/page.tsx b/apps/frontend/app/(website)/page.tsx index 1f86f415a..626038731 100644 --- a/apps/frontend/app/(website)/page.tsx +++ b/apps/frontend/app/(website)/page.tsx @@ -4,6 +4,7 @@ import { resolveSanityRouteMetadata } from "@/data/sanity/resolveSanityRouteMeta import type { RouteProps } from "@/types"; import type { ResolvingMetadata } from "next"; +import { ThemeProvider } from "@/app/context"; import dynamic from "next/dynamic"; import { draftMode } from "next/headers"; import { notFound } from "next/navigation"; @@ -30,9 +31,9 @@ export default async function IndexRoute() { const pathname = `/`; const initial = await loadModularPage(pathname); - if (draftMode().isEnabled) { - return ; - } - - return ; + return draftMode().isEnabled ? ( + + ) : ( + + ); } diff --git a/apps/frontend/app/(website)/studio/main/5PaneSetup.tsx b/apps/frontend/app/(website)/studio/main/5PaneSetup.tsx index a341922bb..68b038e82 100644 --- a/apps/frontend/app/(website)/studio/main/5PaneSetup.tsx +++ b/apps/frontend/app/(website)/studio/main/5PaneSetup.tsx @@ -2,7 +2,7 @@ import ChevronRightSVG from "@/assets/icons/chevronright.svg"; import { cn } from "@/utils"; import { SignInButton, useAuth } from "@clerk/nextjs"; import type { KnownEngines } from "@codemod-com/utilities"; -import { useTheme } from "@context/themeContext"; +import { useTheme } from "@context/useTheme"; import getAccessToken from "@studio/api/getAccessToken"; import { getCodeDiff } from "@studio/api/getCodeDiff"; import Panel from "@studio/components/Panel"; diff --git a/apps/frontend/app/(website)/studio/main/Header.tsx b/apps/frontend/app/(website)/studio/main/Header.tsx index b1d34dcf5..2fca44b10 100644 --- a/apps/frontend/app/(website)/studio/main/Header.tsx +++ b/apps/frontend/app/(website)/studio/main/Header.tsx @@ -1,6 +1,6 @@ import AuthButtons from "@auth/AuthButtons"; import type { KnownEngines } from "@codemod-com/utilities"; -import { useTheme } from "@context/themeContext"; +import { useTheme } from "@context/useTheme"; import { Backspace as BackspaceIcon } from "@phosphor-icons/react"; import { Link as LinkIcon } from "@phosphor-icons/react"; import { Button } from "@studio/components/ui/button"; diff --git a/apps/frontend/app/(website)/studio/page.tsx b/apps/frontend/app/(website)/studio/page.tsx index df07e1638..68a14eaa5 100644 --- a/apps/frontend/app/(website)/studio/page.tsx +++ b/apps/frontend/app/(website)/studio/page.tsx @@ -1,12 +1,13 @@ "use client"; +import { ThemeProvider } from "@context/useTheme"; import { MainPage } from "@studio/main/index"; import { Toaster } from "react-hot-toast"; import { Tooltip } from "react-tooltip"; export default function Page() { return ( - <> + - + ); } diff --git a/apps/frontend/app/(website)/studio/src/components/Snippet/Monaco.tsx b/apps/frontend/app/(website)/studio/src/components/Snippet/Monaco.tsx index 5f0a0f3a6..23c0687a4 100644 --- a/apps/frontend/app/(website)/studio/src/components/Snippet/Monaco.tsx +++ b/apps/frontend/app/(website)/studio/src/components/Snippet/Monaco.tsx @@ -1,4 +1,4 @@ -import { useTheme } from "@context/themeContext"; +import { useTheme } from "@context/useTheme"; import Editor, { type EditorProps, type Monaco } from "@monaco-editor/react"; import type { monaco } from "@studio/customMonaco"; import type { OffsetRange } from "@studio/schemata/offsetRangeSchemata"; diff --git a/apps/frontend/app/(website)/studio/src/components/Snippet/MonacoDiffEditor.tsx b/apps/frontend/app/(website)/studio/src/components/Snippet/MonacoDiffEditor.tsx index d4938cd49..f1e924df5 100644 --- a/apps/frontend/app/(website)/studio/src/components/Snippet/MonacoDiffEditor.tsx +++ b/apps/frontend/app/(website)/studio/src/components/Snippet/MonacoDiffEditor.tsx @@ -1,4 +1,4 @@ -import { useTheme } from "@context/themeContext"; +import { useTheme } from "@context/useTheme"; import { DiffEditor, type DiffEditorProps } from "@monaco-editor/react"; import type { monaco } from "@studio/customMonaco"; import type { VisibilityOptions } from "@studio/types/options"; diff --git a/apps/frontend/app/(website)/studio/src/components/chatbot/ChatMessage.tsx b/apps/frontend/app/(website)/studio/src/components/chatbot/ChatMessage.tsx index 0a07a452a..17397a96d 100644 --- a/apps/frontend/app/(website)/studio/src/components/chatbot/ChatMessage.tsx +++ b/apps/frontend/app/(website)/studio/src/components/chatbot/ChatMessage.tsx @@ -1,6 +1,6 @@ import CompanyLogoSVG from "@/assets/icons/company_logo.svg"; import { cn } from "@/utils"; -import { useTheme } from "@context/themeContext"; +import { useTheme } from "@context/useTheme"; // Inspired by Chatbot-UI and modified to fit the needs of this project // @see https://github.com/mckaywrigley/chatbot-ui/blob/main/components/Chat/ChatMessage.tsx import { CaretDown, CaretRight, User as UserIcon } from "@phosphor-icons/react"; diff --git a/apps/frontend/app/(website)/studio/src/components/chatbot/CodeBlock.tsx b/apps/frontend/app/(website)/studio/src/components/chatbot/CodeBlock.tsx index 7df9adc7c..f4237056a 100644 --- a/apps/frontend/app/(website)/studio/src/components/chatbot/CodeBlock.tsx +++ b/apps/frontend/app/(website)/studio/src/components/chatbot/CodeBlock.tsx @@ -2,7 +2,7 @@ // @see https://github.com/mckaywrigley/chatbot-ui/blob/main/components/Markdown/CodeBlock.tsx import { cn } from "@/utils"; -import { useTheme } from "@context/themeContext"; +import { useTheme } from "@context/useTheme"; import { Check as CheckIcon, Copy as CopyIcon } from "@phosphor-icons/react"; import { Button } from "@studio/components/ui/button"; import { useCopyToClipboard } from "@studio/hooks/useCopyToClipboard"; diff --git a/apps/frontend/app/(website)/studio/src/components/chatbot/ModelSelector.tsx b/apps/frontend/app/(website)/studio/src/components/chatbot/ModelSelector.tsx index 69c107096..59d34558d 100644 --- a/apps/frontend/app/(website)/studio/src/components/chatbot/ModelSelector.tsx +++ b/apps/frontend/app/(website)/studio/src/components/chatbot/ModelSelector.tsx @@ -1,5 +1,5 @@ import { cn } from "@/utils"; -import { useTheme } from "@context/themeContext"; +import { useTheme } from "@context/useTheme"; import { Select, SelectContent, diff --git a/apps/frontend/app/context/index.ts b/apps/frontend/app/context/index.ts index 421e766f8..a1344d27a 100644 --- a/apps/frontend/app/context/index.ts +++ b/apps/frontend/app/context/index.ts @@ -1,2 +1,2 @@ export * from "./AuthProvider"; -export * from "./themeContext"; +export * from "./useTheme"; diff --git a/apps/frontend/app/context/themeContext.tsx b/apps/frontend/app/context/useTheme.tsx similarity index 88% rename from apps/frontend/app/context/themeContext.tsx rename to apps/frontend/app/context/useTheme.tsx index 018fe69c9..b37f608db 100644 --- a/apps/frontend/app/context/themeContext.tsx +++ b/apps/frontend/app/context/useTheme.tsx @@ -10,7 +10,7 @@ import { useState, } from "react"; -const ThemeContext = createContext<{ +const UseTheme = createContext<{ isDark: boolean | null; toggleTheme: () => void; }>({ @@ -51,15 +51,15 @@ const ThemeProvider = ({ children }: { children: ReactNode }) => { }, [setDarkTheme, isDark]); return ( - + {children} - + ); }; const isBrowserSchemeDark = () => window.matchMedia?.("(prefers-color-scheme: dark)").matches; -const useTheme = () => useContext(ThemeContext); +const useTheme = () => useContext(UseTheme); export { ThemeProvider, useTheme }; diff --git a/apps/frontend/app/layout.tsx b/apps/frontend/app/layout.tsx index 090d0af86..44d8f229f 100644 --- a/apps/frontend/app/layout.tsx +++ b/apps/frontend/app/layout.tsx @@ -39,12 +39,10 @@ export default async function RootLayout({ type="text/css" /> - + - - {children} - - + {children} + diff --git a/apps/frontend/hooks/useTheme.tsx b/apps/frontend/hooks/useTheme.tsx index 11885a94f..81014d895 100644 --- a/apps/frontend/hooks/useTheme.tsx +++ b/apps/frontend/hooks/useTheme.tsx @@ -1,11 +1,29 @@ +import { useEffect, useState } from "react"; + export type Theme = "light" | "dark"; export const useTheme = () => { + const [theme, _setTheme] = useState(); + const oppositeTheme = theme === "light" ? "dark" : "light"; + + useEffect(() => { + if (theme) { + document.documentElement.classList.remove("light", "dark"); + document.documentElement.classList.add(theme); + } else { + _setTheme((localStorage.getItem("theme") as Theme) || "light"); + return; + } + }, [theme]); const setTheme = (newTheme: Theme, store = false): void => { - document.documentElement.classList.remove("light", "dark"); - document.documentElement.classList.add(newTheme); + _setTheme(newTheme); store ? localStorage.setItem("theme", newTheme) : null; }; - return { setTheme }; + return { + setTheme, + theme, + isDark: theme === "dark", + toggleTheme: () => setTheme(oppositeTheme), + }; }; diff --git a/packages/codemods/react/19/remove-context-provider/README.md b/packages/codemods/react/19/remove-context-provider/README.md index 40c3f227e..290ebe9c8 100644 --- a/packages/codemods/react/19/remove-context-provider/README.md +++ b/packages/codemods/react/19/remove-context-provider/README.md @@ -7,9 +7,9 @@ function App() { const [theme, setTheme] = useState('light'); // ... return ( - + - + ); } ``` @@ -21,9 +21,9 @@ function App() { const [theme, setTheme] = useState('light'); // ... return ( - + - + ); } ``` \ No newline at end of file diff --git a/packages/codemods/react/19/use-context-hook/README.md b/packages/codemods/react/19/use-context-hook/README.md index 04e839093..fa05613c1 100644 --- a/packages/codemods/react/19/use-context-hook/README.md +++ b/packages/codemods/react/19/use-context-hook/README.md @@ -4,16 +4,16 @@ This codemod will convert the usage of `useContext` to the new hook format, intr ```tsx import { useContext } from "react"; -import ThemeContext from "./ThemeContext"; +import UseTheme from "./UseTheme"; -const theme = useContext(ThemeContext); +const theme = useContext(UseTheme); ``` ## After: ```tsx import { use } from "react"; -import ThemeContext from "./ThemeContext"; +import UseTheme from "./UseTheme"; -const theme = use(ThemeContext); +const theme = use(UseTheme); ```