reflex 0.6.0a4__py3-none-any.whl → 0.6.1a1__py3-none-any.whl

reflex/components/datadisplay/code.py

@@ -2,11 +2,10 @@
 
 from __future__ import annotations
 
-from typing import Any, Dict, Literal, Optional, Union
+import dataclasses
+from typing import ClassVar, Dict, Literal, Optional, Union
 
-from typing_extensions import get_args
-
-from reflex.components.component import Component
+from reflex.components.component import Component, ComponentNamespace
 from reflex.components.core.cond import color_mode_cond
 from reflex.components.lucide.icon import Icon
 from reflex.components.radix.themes.components.button import Button
@@ -14,58 +13,9 @@ from reflex.components.radix.themes.layout.box import Box
 from reflex.constants.colors import Color
 from reflex.event import set_clipboard
 from reflex.style import Style
-from reflex.utils import format
+from reflex.utils import console, format
 from reflex.utils.imports import ImportDict, ImportVar
-from reflex.vars.base import LiteralVar, Var
-
-LiteralCodeBlockTheme = Literal[
-    "a11y-dark",
-    "atom-dark",
-    "cb",
-    "coldark-cold",
-    "coldark-dark",
-    "coy",
-    "coy-without-shadows",
-    "darcula",
-    "dark",
-    "dracula",
-    "duotone-dark",
-    "duotone-earth",
-    "duotone-forest",
-    "duotone-light",
-    "duotone-sea",
-    "duotone-space",
-    "funky",
-    "ghcolors",
-    "gruvbox-dark",
-    "gruvbox-light",
-    "holi-theme",
-    "hopscotch",
-    "light",  # not present in react-syntax-highlighter styles
-    "lucario",
-    "material-dark",
-    "material-light",
-    "material-oceanic",
-    "night-owl",
-    "nord",
-    "okaidia",
-    "one-dark",
-    "one-light",
-    "pojoaque",
-    "prism",
-    "shades-of-purple",
-    "solarized-dark-atom",
-    "solarizedlight",
-    "synthwave84",
-    "tomorrow",
-    "twilight",
-    "vs",
-    "vs-dark",
-    "vsc-dark-plus",
-    "xonokai",
-    "z-touch",
-]
-
+from reflex.vars.base import LiteralVar, Var, VarData
 
 LiteralCodeLanguage = Literal[
     "abap",
@@ -350,18 +300,82 @@ LiteralCodeLanguage = Literal[
 ]
 
 
-def replace_quotes_with_camel_case(value: str) -> str:
-    """Replaces quotes in the given string with camel case format.
+def construct_theme_var(theme: str) -> Var[Theme]:
+    """Construct a theme var.
 
     Args:
-        value (str): The string to be processed.
+        theme: The theme to construct.
 
     Returns:
-        str: The processed string with quotes replaced by camel case.
+        The constructed theme var.
     """
-    for theme in get_args(LiteralCodeBlockTheme):
-        value = value.replace(f'"{theme}"', format.to_camel_case(theme))
-    return value
+    return Var(
+        theme,
+        _var_data=VarData(
+            imports={
+                f"react-syntax-highlighter/dist/cjs/styles/prism/{format.to_kebab_case(theme)}": [
+                    ImportVar(tag=theme, is_default=True, install=False)
+                ]
+            }
+        ),
+    )
+
+
+@dataclasses.dataclass(init=False)
+class Theme:
+    """Themes for the CodeBlock component."""
+
+    a11y_dark: ClassVar[Var[Theme]] = construct_theme_var("a11yDark")
+    atom_dark: ClassVar[Var[Theme]] = construct_theme_var("atomDark")
+    cb: ClassVar[Var[Theme]] = construct_theme_var("cb")
+    coldark_cold: ClassVar[Var[Theme]] = construct_theme_var("coldarkCold")
+    coldark_dark: ClassVar[Var[Theme]] = construct_theme_var("coldarkDark")
+    coy: ClassVar[Var[Theme]] = construct_theme_var("coy")
+    coy_without_shadows: ClassVar[Var[Theme]] = construct_theme_var("coyWithoutShadows")
+    darcula: ClassVar[Var[Theme]] = construct_theme_var("darcula")
+    dark: ClassVar[Var[Theme]] = construct_theme_var("oneDark")
+    dracula: ClassVar[Var[Theme]] = construct_theme_var("dracula")
+    duotone_dark: ClassVar[Var[Theme]] = construct_theme_var("duotoneDark")
+    duotone_earth: ClassVar[Var[Theme]] = construct_theme_var("duotoneEarth")
+    duotone_forest: ClassVar[Var[Theme]] = construct_theme_var("duotoneForest")
+    duotone_light: ClassVar[Var[Theme]] = construct_theme_var("duotoneLight")
+    duotone_sea: ClassVar[Var[Theme]] = construct_theme_var("duotoneSea")
+    duotone_space: ClassVar[Var[Theme]] = construct_theme_var("duotoneSpace")
+    funky: ClassVar[Var[Theme]] = construct_theme_var("funky")
+    ghcolors: ClassVar[Var[Theme]] = construct_theme_var("ghcolors")
+    gruvbox_dark: ClassVar[Var[Theme]] = construct_theme_var("gruvboxDark")
+    gruvbox_light: ClassVar[Var[Theme]] = construct_theme_var("gruvboxLight")
+    holi_theme: ClassVar[Var[Theme]] = construct_theme_var("holiTheme")
+    hopscotch: ClassVar[Var[Theme]] = construct_theme_var("hopscotch")
+    light: ClassVar[Var[Theme]] = construct_theme_var("oneLight")
+    lucario: ClassVar[Var[Theme]] = construct_theme_var("lucario")
+    material_dark: ClassVar[Var[Theme]] = construct_theme_var("materialDark")
+    material_light: ClassVar[Var[Theme]] = construct_theme_var("materialLight")
+    material_oceanic: ClassVar[Var[Theme]] = construct_theme_var("materialOceanic")
+    night_owl: ClassVar[Var[Theme]] = construct_theme_var("nightOwl")
+    nord: ClassVar[Var[Theme]] = construct_theme_var("nord")
+    okaidia: ClassVar[Var[Theme]] = construct_theme_var("okaidia")
+    one_dark: ClassVar[Var[Theme]] = construct_theme_var("oneDark")
+    one_light: ClassVar[Var[Theme]] = construct_theme_var("oneLight")
+    pojoaque: ClassVar[Var[Theme]] = construct_theme_var("pojoaque")
+    prism: ClassVar[Var[Theme]] = construct_theme_var("prism")
+    shades_of_purple: ClassVar[Var[Theme]] = construct_theme_var("shadesOfPurple")
+    solarized_dark_atom: ClassVar[Var[Theme]] = construct_theme_var("solarizedDarkAtom")
+    solarizedlight: ClassVar[Var[Theme]] = construct_theme_var("solarizedlight")
+    synthwave84: ClassVar[Var[Theme]] = construct_theme_var("synthwave84")
+    tomorrow: ClassVar[Var[Theme]] = construct_theme_var("tomorrow")
+    twilight: ClassVar[Var[Theme]] = construct_theme_var("twilight")
+    vs: ClassVar[Var[Theme]] = construct_theme_var("vs")
+    vs_dark: ClassVar[Var[Theme]] = construct_theme_var("vsDark")
+    vsc_dark_plus: ClassVar[Var[Theme]] = construct_theme_var("vscDarkPlus")
+    xonokai: ClassVar[Var[Theme]] = construct_theme_var("xonokai")
+    z_touch: ClassVar[Var[Theme]] = construct_theme_var("zTouch")
+
+
+for theme_name in dir(Theme):
+    if theme_name.startswith("_"):
+        continue
+    setattr(Theme, theme_name, getattr(Theme, theme_name)._replace(_var_type=Theme))
 
 
 class CodeBlock(Component):
@@ -374,7 +388,7 @@ class CodeBlock(Component):
     alias = "SyntaxHighlighter"
 
     # The theme to use ("light" or "dark").
-    theme: Var[Any] = "one-light"  # type: ignore
+    theme: Var[Union[Theme, str]] = Theme.one_light
 
     # The language to use.
     language: Var[LiteralCodeLanguage] = "python"  # type: ignore
@@ -405,31 +419,6 @@ class CodeBlock(Component):
         """
         imports_: ImportDict = {}
 
-        themeString = str(self.theme)
-
-        selected_themes = []
-
-        for possibleTheme in get_args(LiteralCodeBlockTheme):
-            if format.to_camel_case(possibleTheme) in themeString:
-                selected_themes.append(possibleTheme)
-            if possibleTheme in themeString:
-                selected_themes.append(possibleTheme)
-
-        selected_themes = sorted(set(map(self.convert_theme_name, selected_themes)))
-
-        imports_.update(
-            {
-                f"react-syntax-highlighter/dist/cjs/styles/prism/{theme}": [
-                    ImportVar(
-                        tag=format.to_camel_case(theme),
-                        is_default=True,
-                        install=False,
-                    )
-                ]
-                for theme in selected_themes
-            }
-        )
-
         if (
             self.language is not None
             and (language_without_quotes := str(self.language).replace('"', ""))
@@ -480,14 +469,20 @@ class CodeBlock(Component):
         if "theme" not in props:
             # Default color scheme responds to global color mode.
             props["theme"] = color_mode_cond(
-                light=Var(_js_expr="oneLight"),
-                dark=Var(_js_expr="oneDark"),
+                light=Theme.one_light,
+                dark=Theme.one_dark,
             )
 
         # react-syntax-highlighter doesnt have an explicit "light" or "dark" theme so we use one-light and one-dark
         # themes respectively to ensure code compatibility.
         if "theme" in props and not isinstance(props["theme"], Var):
-            props["theme"] = cls.convert_theme_name(props["theme"])
+            props["theme"] = getattr(Theme, format.to_snake_case(props["theme"]))  # type: ignore
+            console.deprecate(
+                feature_name="theme prop as string",
+                reason="Use code_block.themes instead.",
+                deprecation_version="0.6.0",
+                removal_version="0.7.0",
+            )
 
         if can_copy:
             code = children[0]
@@ -533,9 +528,7 @@ class CodeBlock(Component):
     def _render(self):
         out = super()._render()
 
-        theme = self.theme._replace(
-            _js_expr=replace_quotes_with_camel_case(str(self.theme))
-        )
+        theme = self.theme
 
         out.add_props(style=theme).remove_props("theme", "code").add_props(
             children=self.code
@@ -543,19 +536,13 @@ class CodeBlock(Component):
 
         return out
 
-    @staticmethod
-    def convert_theme_name(theme) -> str:
-        """Convert theme names to appropriate names.
 
-        Args:
-            theme: The theme name.
+class CodeblockNamespace(ComponentNamespace):
+    """Namespace for the CodeBlock component."""
 
-        Returns:
-            The right theme name.
-        """
-        if theme in ["light", "dark"]:
-            return f"one-{theme}"
-        return theme
+    themes = Theme
+
+    __call__ = CodeBlock.create
 
 
-code_block = CodeBlock.create
+code_block = CodeblockNamespace()