Update markdown component map to use new rx.code_block.theme enum (#3996)

* Update markdown component map to use new rx.code_block.theme enum

* change var to theme

* give the types some attention instead of ignoring them

---------

Co-authored-by: Khaleel Al-Adhami <khaleel.aladhami@gmail.com>

reflex/components/datadisplay/__init__.py

@@ -8,7 +8,6 @@ _SUBMOD_ATTRS: dict[str, list[str]] = {
     "code": [
         "CodeBlock",
         "code_block",
-        "LiteralCodeBlockTheme",
         "LiteralCodeLanguage",
     ],
     "dataeditor": ["data_editor", "data_editor_theme", "DataEditorTheme"],

reflex/components/datadisplay/__init__.pyi

@@ -4,7 +4,6 @@
 # ------------------------------------------------------
 
 from .code import CodeBlock as CodeBlock
-from .code import LiteralCodeBlockTheme as LiteralCodeBlockTheme
 from .code import LiteralCodeLanguage as LiteralCodeLanguage
 from .code import code_block as code_block
 from .dataeditor import DataEditorTheme as DataEditorTheme

reflex/components/datadisplay/code.py

@@ -2,10 +2,8 @@
 
 from __future__ import annotations
 
-import enum
+import dataclasses
-from typing import Any, Dict, Literal, Optional, Union
+from typing import ClassVar, Dict, Literal, Optional, Union
-
-from typing_extensions import get_args
 
 from reflex.components.component import Component, ComponentNamespace
 from reflex.components.core.cond import color_mode_cond
@@ -19,55 +17,6 @@ from reflex.utils import console, format
 from reflex.utils.imports import ImportDict, ImportVar
 from reflex.vars.base import LiteralVar, Var, VarData
 
-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",
-]
-
-
 LiteralCodeLanguage = Literal[
     "abap",
     "abnf",
@@ -351,18 +300,82 @@ LiteralCodeLanguage = Literal[
 ]
 
 
-def replace_quotes_with_camel_case(value: str) -> str:
+def construct_theme_var(theme: str) -> Var[Theme]:
-    """Replaces quotes in the given string with camel case format.
+    """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):
+    return Var(
-        value = value.replace(f'"{theme}"', format.to_camel_case(theme))
+        theme,
-    return value
+        _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):
@@ -375,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
@@ -523,91 +536,6 @@ class CodeBlock(Component):
 
         return out
 
-    @staticmethod
-    def convert_theme_name(theme) -> str:
-        """Convert theme names to appropriate names.
-
-        Args:
-            theme: The theme name.
-
-        Returns:
-            The right theme name.
-        """
-        if theme in ["light", "dark"]:
-            return f"one-{theme}"
-        return theme
-
-
-def construct_theme_var(theme: str) -> Var:
-    """Construct a theme var.
-
-    Args:
-        theme: The theme to construct.
-
-    Returns:
-        The constructed theme var.
-    """
-    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)
-                ]
-            }
-        ),
-    )
-
-
-class Theme(enum.Enum):
-    """Themes for the CodeBlock component."""
-
-    a11y_dark = construct_theme_var("a11yDark")
-    atom_dark = construct_theme_var("atomDark")
-    cb = construct_theme_var("cb")
-    coldark_cold = construct_theme_var("coldarkCold")
-    coldark_dark = construct_theme_var("coldarkDark")
-    coy = construct_theme_var("coy")
-    coy_without_shadows = construct_theme_var("coyWithoutShadows")
-    darcula = construct_theme_var("darcula")
-    dark = construct_theme_var("oneDark")
-    dracula = construct_theme_var("dracula")
-    duotone_dark = construct_theme_var("duotoneDark")
-    duotone_earth = construct_theme_var("duotoneEarth")
-    duotone_forest = construct_theme_var("duotoneForest")
-    duotone_light = construct_theme_var("duotoneLight")
-    duotone_sea = construct_theme_var("duotoneSea")
-    duotone_space = construct_theme_var("duotoneSpace")
-    funky = construct_theme_var("funky")
-    ghcolors = construct_theme_var("ghcolors")
-    gruvbox_dark = construct_theme_var("gruvboxDark")
-    gruvbox_light = construct_theme_var("gruvboxLight")
-    holi_theme = construct_theme_var("holiTheme")
-    hopscotch = construct_theme_var("hopscotch")
-    light = construct_theme_var("oneLight")
-    lucario = construct_theme_var("lucario")
-    material_dark = construct_theme_var("materialDark")
-    material_light = construct_theme_var("materialLight")
-    material_oceanic = construct_theme_var("materialOceanic")
-    night_owl = construct_theme_var("nightOwl")
-    nord = construct_theme_var("nord")
-    okaidia = construct_theme_var("okaidia")
-    one_dark = construct_theme_var("oneDark")
-    one_light = construct_theme_var("oneLight")
-    pojoaque = construct_theme_var("pojoaque")
-    prism = construct_theme_var("prism")
-    shades_of_purple = construct_theme_var("shadesOfPurple")
-    solarized_dark_atom = construct_theme_var("solarizedDarkAtom")
-    solarizedlight = construct_theme_var("solarizedlight")
-    synthwave84 = construct_theme_var("synthwave84")
-    tomorrow = construct_theme_var("tomorrow")
-    twilight = construct_theme_var("twilight")
-    vs = construct_theme_var("vs")
-    vs_dark = construct_theme_var("vsDark")
-    vsc_dark_plus = construct_theme_var("vscDarkPlus")
-    xonokai = construct_theme_var("xonokai")
-    z_touch = construct_theme_var("zTouch")
-
 
 class CodeblockNamespace(ComponentNamespace):
     """Namespace for the CodeBlock component."""

reflex/components/datadisplay/code.pyi

@@ -3,8 +3,8 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-import enum
+import dataclasses
-from typing import Any, Callable, Dict, Literal, Optional, Union, overload
+from typing import Any, Callable, ClassVar, Dict, Literal, Optional, Union, overload
 
 from reflex.components.component import Component, ComponentNamespace
 from reflex.constants.colors import Color
@@ -13,53 +13,6 @@ from reflex.style import Style
 from reflex.utils.imports import ImportDict
 from reflex.vars.base import 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",
-    "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",
-]
 LiteralCodeLanguage = Literal[
     "abap",
     "abnf",
@@ -342,7 +295,59 @@ LiteralCodeLanguage = Literal[
     "zig",
 ]
 
-def replace_quotes_with_camel_case(value: str) -> str: ...
+def construct_theme_var(theme: str) -> Var[Theme]: ...
+@dataclasses.dataclass(init=False)
+class Theme:
+    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):
     def add_imports(self) -> ImportDict: ...
@@ -353,7 +358,7 @@ class CodeBlock(Component):
         *children,
         can_copy: Optional[bool] = False,
         copy_button: Optional[Union[Component, bool]] = None,
-        theme: Optional[Union[Any, Var[Any]]] = None,
+        theme: Optional[Union[Theme, Var[Union[Theme, str]], str]] = None,
         language: Optional[
             Union[
                 Literal[
@@ -999,57 +1004,6 @@ class CodeBlock(Component):
         ...
 
     def add_style(self): ...
-    @staticmethod
-    def convert_theme_name(theme) -> str: ...
-
-def construct_theme_var(theme: str) -> Var: ...
-
-class Theme(enum.Enum):
-    a11y_dark = construct_theme_var("a11yDark")
-    atom_dark = construct_theme_var("atomDark")
-    cb = construct_theme_var("cb")
-    coldark_cold = construct_theme_var("coldarkCold")
-    coldark_dark = construct_theme_var("coldarkDark")
-    coy = construct_theme_var("coy")
-    coy_without_shadows = construct_theme_var("coyWithoutShadows")
-    darcula = construct_theme_var("darcula")
-    dark = construct_theme_var("oneDark")
-    dracula = construct_theme_var("dracula")
-    duotone_dark = construct_theme_var("duotoneDark")
-    duotone_earth = construct_theme_var("duotoneEarth")
-    duotone_forest = construct_theme_var("duotoneForest")
-    duotone_light = construct_theme_var("duotoneLight")
-    duotone_sea = construct_theme_var("duotoneSea")
-    duotone_space = construct_theme_var("duotoneSpace")
-    funky = construct_theme_var("funky")
-    ghcolors = construct_theme_var("ghcolors")
-    gruvbox_dark = construct_theme_var("gruvboxDark")
-    gruvbox_light = construct_theme_var("gruvboxLight")
-    holi_theme = construct_theme_var("holiTheme")
-    hopscotch = construct_theme_var("hopscotch")
-    light = construct_theme_var("oneLight")
-    lucario = construct_theme_var("lucario")
-    material_dark = construct_theme_var("materialDark")
-    material_light = construct_theme_var("materialLight")
-    material_oceanic = construct_theme_var("materialOceanic")
-    night_owl = construct_theme_var("nightOwl")
-    nord = construct_theme_var("nord")
-    okaidia = construct_theme_var("okaidia")
-    one_dark = construct_theme_var("oneDark")
-    one_light = construct_theme_var("oneLight")
-    pojoaque = construct_theme_var("pojoaque")
-    prism = construct_theme_var("prism")
-    shades_of_purple = construct_theme_var("shadesOfPurple")
-    solarized_dark_atom = construct_theme_var("solarizedDarkAtom")
-    solarizedlight = construct_theme_var("solarizedlight")
-    synthwave84 = construct_theme_var("synthwave84")
-    tomorrow = construct_theme_var("tomorrow")
-    twilight = construct_theme_var("twilight")
-    vs = construct_theme_var("vs")
-    vs_dark = construct_theme_var("vsDark")
-    vsc_dark_plus = construct_theme_var("vscDarkPlus")
-    xonokai = construct_theme_var("xonokai")
-    z_touch = construct_theme_var("zTouch")
 
 class CodeblockNamespace(ComponentNamespace):
     themes = Theme
@@ -1059,7 +1013,7 @@ class CodeblockNamespace(ComponentNamespace):
         *children,
         can_copy: Optional[bool] = False,
         copy_button: Optional[Union[Component, bool]] = None,
-        theme: Optional[Union[Any, Var[Any]]] = None,
+        theme: Optional[Union[Theme, Var[Union[Theme, str]], str]] = None,
         language: Optional[
             Union[
                 Literal[

reflex/components/markdown/markdown.py

@@ -147,7 +147,7 @@ class Markdown(Component):
         Returns:
             The imports for the markdown component.
         """
-        from reflex.components.datadisplay.code import CodeBlock
+        from reflex.components.datadisplay.code import CodeBlock, Theme
         from reflex.components.radix.themes.typography.code import Code
 
         return [
@@ -173,8 +173,8 @@ class Markdown(Component):
                 component(_MOCK_ARG)._get_all_imports()  # type: ignore
                 for component in self.component_map.values()
             ],
-            CodeBlock.create(theme="light")._get_imports(),  # type: ignore,
+            CodeBlock.create(theme=Theme.light)._get_imports(),
-            Code.create()._get_imports(),  # type: ignore,
+            Code.create()._get_imports(),
         ]
 
     def get_component(self, tag: str, **props) -> Component: