reflex 0.8.0 compat (#41)

Author: adhami3310

docs/rcweb/.gitignore

@@ -4,4 +4,5 @@
 .web
 __pycache__/
 assets/external/
-assets/chakra_color_mode_provider.js
+assets/chakra_color_mode_provider.js
+*.zip

docs/rcweb/backend.zip

@@ -2,4 +2,5 @@
 
 config = rx.Config(
     app_name="rcweb",
+    plugins=[rx.plugins.TailwindV3Plugin()],
 )

docs/rcweb/frontend.zip

@@ -1,6 +1,6 @@
 [project]
 name = "reflex-chakra"
-version = "0.7.1"
+version = "0.8.0"
 description = "reflex using chakra components"
 authors = [{ name = "Elijah Ahianyo", email = "elijahahianyo@gmail.com" }]
 maintainers = [
@@ -11,7 +11,7 @@ maintainers = [
 readme = "README.md"
 requires-python = ">=3.10"
 license.text = "Apache-2.0"
-dependencies = ["reflex >=0.7.11"]
+dependencies = ["reflex >=0.8.0a"]
 
 
 [build-system]

docs/rcweb/rxconfig.py

@@ -1,21 +1,23 @@
+import { useTheme } from "$/utils/react-theme";
 import { useColorMode as chakraUseColorMode } from "@chakra-ui/react";
-import { useTheme } from "next-themes";
-import { useEffect, useState } from "react";
-import { ColorModeContext, defaultColorMode } from "$/utils/context.js";
+import { createElement, useEffect } from "react";
+import { ColorModeContext, defaultColorMode } from "$/utils/context";
 
 export default function ChakraColorModeProvider({ children }) {
   const { theme, resolvedTheme, setTheme } = useTheme();
-  const { colorMode, toggleColorMode } = chakraUseColorMode();
-  const [resolvedColorMode, setResolvedColorMode] = useState(colorMode);
+  const { colorMode: chakraColorMode, toggleColorMode: toggleChakraColorMode } =
+    chakraUseColorMode();
 
   useEffect(() => {
-    if (colorMode != resolvedTheme) {
-      toggleColorMode();
+    if (chakraColorMode != resolvedTheme) {
+      toggleChakraColorMode();
     }
-    setResolvedColorMode(resolvedTheme);
   }, [theme, resolvedTheme]);
 
-  const rawColorMode = colorMode;
+  const toggleColorMode = () => {
+    setTheme(resolvedTheme === "light" ? "dark" : "light");
+  };
+
   const setColorMode = (mode) => {
     const allowedModes = ["light", "dark", "system"];
     if (!allowedModes.includes(mode)) {
@@ -26,11 +28,17 @@ export default function ChakraColorModeProvider({ children }) {
     }
     setTheme(mode);
   };
-  return (
-    <ColorModeContext.Provider
-      value={{ rawColorMode, resolvedColorMode, toggleColorMode, setColorMode }}
-    >
-      {children}
-    </ColorModeContext.Provider>
+
+  return createElement(
+    ColorModeContext.Provider,
+    {
+      value: {
+        rawColorMode: theme,
+        resolvedColorMode: resolvedTheme,
+        toggleColorMode,
+        setColorMode,
+      },
+    },
+    children
   );
 }

pyproject.toml

@@ -115,7 +115,7 @@ def add_imports(self) -> ImportDict:
         """
         return {
             self.library: ImportVar(tag="extendTheme", is_default=False),
-            "$/utils/theme.js": ImportVar(tag="theme", is_default=True),
+            "$/utils/theme": ImportVar(tag="theme", is_default=True),
         }
 
     @staticmethod
@@ -132,7 +132,7 @@ def _get_app_wrap_components() -> dict[tuple[int, str], Component]:
 class ChakraColorModeProvider(Component):
     """Next-themes integration for chakra colorModeProvider."""
 
-    library = "$/public/chakra_color_mode_provider.js"
+    library = "$/public/chakra_color_mode_provider"
     tag = "ChakraColorModeProvider"
     is_default = True
 

reflex_chakra/assets/chakra_color_mode_provider.js

@@ -1,13 +1,11 @@
 """A link component."""
 
+from reflex import ImportVar
 from reflex_chakra.components import ChakraComponent
 from reflex.components.component import Component
-from reflex.components.next.link import NextLink
 from reflex.utils.imports import ImportDict
 from reflex.vars import Var
 
-next_link = NextLink.create()
-
 
 class Link(ChakraComponent):
     """Link to another page."""
@@ -24,7 +22,7 @@ class Link(ChakraComponent):
     text: Var[str]
 
     # What the link renders to.
-    as_: Var[Component] = Var("NextLink", _var_type=Component)
+    as_: Var[Component] = Var("ReactRouterLink", _var_type=Component)
 
     # If true, the link will open in new tab.
     is_external: Var[bool]
@@ -35,10 +33,12 @@ def add_imports(self) -> ImportDict:
         Returns:
             The import dict.
         """
-        return next_link._get_imports()  # type: ignore
+        return {
+            "react-router": ImportVar("Link", alias="ReactRouterLink"),
+        }
 
     @classmethod
-    def create(cls, *children, **props) -> Component:
+    def create(cls, *children, **props):
         """Create a Link component.
 
         Args: