From 4f68e6b80751ba40842f48b72fb12a9d0e8d3694 Mon Sep 17 00:00:00 2001 From: Elijah Date: Tue, 3 Sep 2024 15:42:51 +0000 Subject: [PATCH 1/4] Move `chakra_color_mode_provider.js` from reflex --- .../assets/chakra_color_mode_provider.js | 36 +++++++++++++++++++ reflex_chakra/components/base.py | 18 +++++++++- reflex_chakra/constants.py | 6 ++++ 3 files changed, 59 insertions(+), 1 deletion(-) create mode 100644 reflex_chakra/assets/chakra_color_mode_provider.js create mode 100644 reflex_chakra/constants.py diff --git a/reflex_chakra/assets/chakra_color_mode_provider.js b/reflex_chakra/assets/chakra_color_mode_provider.js new file mode 100644 index 0000000..ad41d51 --- /dev/null +++ b/reflex_chakra/assets/chakra_color_mode_provider.js @@ -0,0 +1,36 @@ +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"; + +export default function ChakraColorModeProvider({ children }) { + const { theme, resolvedTheme, setTheme } = useTheme(); + const { colorMode, toggleColorMode } = chakraUseColorMode(); + const [resolvedColorMode, setResolvedColorMode] = useState(colorMode); + + useEffect(() => { + if (colorMode != resolvedTheme) { + toggleColorMode(); + } + setResolvedColorMode(resolvedTheme); + }, [theme, resolvedTheme]); + + const rawColorMode = colorMode; + const setColorMode = (mode) => { + const allowedModes = ["light", "dark", "system"]; + if (!allowedModes.includes(mode)) { + console.error( + `Invalid color mode "${mode}". Defaulting to "${defaultColorMode}".` + ); + mode = defaultColorMode; + } + setTheme(mode); + }; + return ( + + {children} + + ); +} diff --git a/reflex_chakra/components/base.py b/reflex_chakra/components/base.py index bd55a94..f082d85 100644 --- a/reflex_chakra/components/base.py +++ b/reflex_chakra/components/base.py @@ -2,13 +2,17 @@ from __future__ import annotations +import shutil from functools import lru_cache +from pathlib import Path from typing import List, Literal from reflex.components.component import Component from reflex.ivars.base import ImmutableVar from reflex.utils.imports import ImportDict, ImportVar from reflex.vars import Var +from reflex_chakra import constants + class ChakraComponent(Component): @@ -51,6 +55,18 @@ def _get_dependencies_imports(cls) -> ImportDict: ] } + @classmethod + def create(cls, *children, **props) -> rx.Component: + # copy color mode provider file to client's asset dir if it doesnt exist. + if not ( + color_mode_provider := ( + constants.ASSETS_DIR / constants.COLOR_MODE_PROVIDER_FILENAME + ) + ).exists(): + shutil.copy(color_mode_provider, (Path.cwd() / "assets")) + + return super().create(*children, **props) + class ChakraProvider(ChakraComponent): """Top level Chakra provider must be included in any app using chakra components.""" @@ -95,7 +111,7 @@ def _get_app_wrap_components() -> dict[tuple[int, str], Component]: class ChakraColorModeProvider(Component): """Next-themes integration for chakra colorModeProvider.""" - library = "/components/reflex/chakra_color_mode_provider.js" + library = "/public/chakra_color_mode_provider.js" tag = "ChakraColorModeProvider" is_default = True diff --git a/reflex_chakra/constants.py b/reflex_chakra/constants.py new file mode 100644 index 0000000..15e9fee --- /dev/null +++ b/reflex_chakra/constants.py @@ -0,0 +1,6 @@ +from pathlib import Path + +ASSET_DIR_NAME = "assets" +ASSETS_DIR = (Path(__file__).parent / ASSET_DIR_NAME).resolve() + +COLOR_MODE_PROVIDER_FILENAME = "chakra_color_mode_provider.js" From f1ae77bc54500ad5ad208391a3bac23dabad47eb Mon Sep 17 00:00:00 2001 From: Elijah Date: Thu, 5 Sep 2024 16:57:35 +0000 Subject: [PATCH 2/4] format file --- reflex_chakra/components/base.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/reflex_chakra/components/base.py b/reflex_chakra/components/base.py index f082d85..7c33814 100644 --- a/reflex_chakra/components/base.py +++ b/reflex_chakra/components/base.py @@ -11,8 +11,8 @@ from reflex.ivars.base import ImmutableVar from reflex.utils.imports import ImportDict, ImportVar from reflex.vars import Var -from reflex_chakra import constants +from reflex_chakra import constants class ChakraComponent(Component): From f2f5e825aa76cdc6c5e8c3340ea3feb4858202b2 Mon Sep 17 00:00:00 2001 From: Elijah Date: Fri, 6 Sep 2024 10:25:35 +0000 Subject: [PATCH 3/4] bump version --- pyproject.toml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pyproject.toml b/pyproject.toml index 3cc3708..13e6f4d 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -1,6 +1,6 @@ [tool.poetry] name = "reflex-chakra" -version = "0.6.0a1" +version = "0.6.0a2" description = "reflex using chakra components" authors = [ "Elijah Ahianyo " From 6fb904f2c9677d17d3667e01572d333dab8b4662 Mon Sep 17 00:00:00 2001 From: Elijah Date: Fri, 6 Sep 2024 17:40:51 +0000 Subject: [PATCH 4/4] Get reflex tests to pass --- pyproject.toml | 2 +- reflex_chakra/components/base.py | 16 +++++++++++----- reflex_chakra/constants.py | 4 ++-- 3 files changed, 14 insertions(+), 8 deletions(-) diff --git a/pyproject.toml b/pyproject.toml index 13e6f4d..1d59e17 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -1,6 +1,6 @@ [tool.poetry] name = "reflex-chakra" -version = "0.6.0a2" +version = "0.6.0a4" description = "reflex using chakra components" authors = [ "Elijah Ahianyo " diff --git a/reflex_chakra/components/base.py b/reflex_chakra/components/base.py index 7c33814..33c0dd3 100644 --- a/reflex_chakra/components/base.py +++ b/reflex_chakra/components/base.py @@ -56,15 +56,21 @@ def _get_dependencies_imports(cls) -> ImportDict: } @classmethod - def create(cls, *children, **props) -> rx.Component: + def create(cls, *children, **props) -> Component: # copy color mode provider file to client's asset dir if it doesnt exist. + client_asset_dir = Path.cwd() / constants.ASSETS_DIR_NAME if not ( - color_mode_provider := ( - constants.ASSETS_DIR / constants.COLOR_MODE_PROVIDER_FILENAME + client_color_mode_provider := ( + Path.cwd() + / constants.ASSETS_DIR_NAME + / constants.COLOR_MODE_PROVIDER_FILENAME ) ).exists(): - shutil.copy(color_mode_provider, (Path.cwd() / "assets")) - + client_asset_dir.mkdir(exist_ok=True) + shutil.copy( + constants.ASSETS_DIR / constants.COLOR_MODE_PROVIDER_FILENAME, + client_color_mode_provider.parent, + ) return super().create(*children, **props) diff --git a/reflex_chakra/constants.py b/reflex_chakra/constants.py index 15e9fee..a63de53 100644 --- a/reflex_chakra/constants.py +++ b/reflex_chakra/constants.py @@ -1,6 +1,6 @@ from pathlib import Path -ASSET_DIR_NAME = "assets" -ASSETS_DIR = (Path(__file__).parent / ASSET_DIR_NAME).resolve() +ASSETS_DIR_NAME = "assets" +ASSETS_DIR = (Path(__file__).parent / ASSETS_DIR_NAME).resolve() COLOR_MODE_PROVIDER_FILENAME = "chakra_color_mode_provider.js"