Add support for jupyter notebooks

app-examples/mapping/mapping/mapping.py

@@ -3,7 +3,7 @@
 
 from typing import Dict, List, Tuple
 import nextpy as xt
-from nextpy.frontend.components.leaflet import (
+from nextpy.interfaces.web.components.leaflet import (
     map_container,
     tile_layer,
     marker,

app-examples/todo/todo/todo.py

@@ -0,0 +1,40 @@
+import nextpy as xt
+
+class State(xt.State):
+    count: int = 0
+    message: str = ""
+
+    def increment(self):
+        self.count += 1
+        if self.count == 10:
+            self.message = "Count is 10!"
+
+    def decrement(self):
+        self.count -= 1
+        if self.count < 10:
+            self.message = ""
+
+
+def index():
+    return xt.hstack(
+        xt.button(
+            "Decrement",
+            bg="#fef2f2",
+            color="#b91c1c",
+            border_radius="lg",
+            on_click=State.decrement,
+        ),
+        xt.heading(State.count, font_size="2em"),
+        xt.text(State.message),
+        xt.button(
+            "Increment",
+            bg="#ecfdf5",
+            color="#047857",
+            border_radius="lg",
+            on_click=State.increment,
+        ),
+        spacing="1em",
+    )
+
+app = xt.App()
+app.add_page(index)

app-examples/todo/xtconfig.py

@@ -0,0 +1,5 @@
+import nextpy as xt
+
+config = xt.Config(
+    app_name="todo",
+)

app-examples/unstyled_example/.gitignore

@@ -0,0 +1,4 @@
+*.db
+*.py[cod]
+.web
+__pycache__/

app-examples/unstyled_example/unstyled_example/unstyled_example.py

@@ -0,0 +1,54 @@
+import nextpy as xt
+
+
+class CounterState(xt.State):
+    value: int = 0
+
+    def change_value(self, amount):
+        self.value += amount
+
+
+def create_button(label, amount):
+    return xt.unstyled.button(
+        label,
+        on_click=lambda: CounterState.change_value(amount)
+    )
+
+
+def index() -> xt.Component:
+    heading_color = xt.match(
+        CounterState.value,
+        (0, "red"),
+        (4, "blue"),
+        (8, "green"),
+        (12, "orange"),
+        (16, "lime"),
+        (20, "orange"),
+        "black"
+    )
+
+    return xt.unstyled.flex(
+        xt.unstyled.heading(
+            CounterState.value, 
+            color="white",
+            background_color=heading_color,
+            as_="h2"
+        ),
+        xt.unstyled.flex(
+            create_button("decrement", -1),
+            create_button("increment", 1),
+            gap="2"
+        ),
+        align_items="center",
+        direction="column",
+        gap="2"
+    )
+
+
+# Global styles defined as a Python dictionary
+style = {
+    "text_align": "center",  
+}
+
+app = xt.App(style=style)
+app.add_page(index)

app-examples/unstyled_example/xtconfig.py

@@ -0,0 +1,5 @@
+import nextpy as xt
+
+config = xt.Config(
+    app_name="unstyled_example",
+)

docs/references/frontend/components/base/app_wrap_reference.md

@@ -11,7 +11,7 @@
 ### Basic Implementation
 
 ```python
-from nextpy.frontend.components.base.app_wrap import AppWrap
+from nextpy.interfaces.web.components.base.app_wrap import AppWrap
 from nextpy.frontend.style import Style
 
 # Basic usage of AppWrap to group components with an applied style

docs/references/frontend/components/base/body_reference.md

@@ -25,7 +25,7 @@ The `Body` component is used in scenarios such as:
 Here is a simple example of how to use the `Body` component:
 
 ```python
-from nextpy.frontend.components.base.body import Body
+from nextpy.interfaces.web.components.base.body import Body
 
 # Create a Body component with a child component
 body = Body.create(
@@ -39,7 +39,7 @@ body = Body.create(
 For a more advanced usage that involves event handling and custom attributes:
 
 ```python
-from nextpy.frontend.components.base.body import Body
+from nextpy.interfaces.web.components.base.body import Body
 from nextpy.backend.event import EventHandler
 
 def on_click_handler(event):

docs/references/frontend/components/chakra/forms/iconbutton_reference.md

@@ -25,7 +25,7 @@ The primary purpose of the `IconButton` component is to capture user interaction
 
 ```python
 from nextpy.components.chakra.forms.iconbutton import IconButton
-from nextpy.frontend.components.font_awesome.icon import FaIcon
+from nextpy.interfaces.web.components.font_awesome.icon import FaIcon
 
 # Create an IconButton with a specific icon
 icon_button = IconButton.create(

docs/references/frontend/components/chakra/layout/container_reference.md

@@ -27,7 +27,7 @@ For more complex scenarios, you can include multiple child components, custom at
 
 ```python
 from nextpy.components.chakra.layout import Container
-from nextpy.frontend.components.basic import Text
+from nextpy.interfaces.web.components.basic import Text
 
 def app():
     return Container.create(

docs/references/frontend/components/chakra/layout/spacer_reference.md

@@ -31,7 +31,7 @@ spacer = Spacer.create()
 
 ```python
 # Basic usage of Spacer to push two components apart
-from nextpy.frontend.components.chakra import Box, Spacer
+from nextpy.interfaces.web.components.chakra import Box, Spacer
 
 left_component = Box.create("Left Item", style={"width": "100px"})
 right_component = Box.create("Right Item", style={"width": "100px"})
@@ -48,7 +48,7 @@ layout = Box.create(
 
 ```python
 # Advanced usage with multiple spacers for different spacing
-from nextpy.frontend.components.chakra import Box, Spacer
+from nextpy.interfaces.web.components.chakra import Box, Spacer
 
 left_component = Box.create("Left Item", style={"width": "100px"})
 middle_component = Box.create("Middle Item", style={"width": "100px"})

docs/references/frontend/components/chakra/media/image_reference.md

@@ -49,7 +49,7 @@ A more advanced example of the `Image` component might include handling events a
 
 ```python
 from nextpy.components.chakra.media.image import Image
-from nextpy.frontend.components.basic import Text
+from nextpy.interfaces.web.components.basic import Text
 
 # Advanced image usage with fallback and events
 image_with_fallback = Image.create(

docs/references/frontend/components/core/layout/center_reference.md

@@ -25,7 +25,7 @@ The `Center` component serves the purpose of simplifying the alignment of elemen
 ### Basic Implementation
 
 ```python
-from nextpy.frontend.components.core.layout.center import Center
+from nextpy.interfaces.web.components.core.layout.center import Center
 
 centered_content = Center.create(
     "This is a centered text block."
@@ -35,7 +35,7 @@ centered_content = Center.create(
 ### Advanced Implementation
 
 ```python
-from nextpy.frontend.components.core.layout.center import Center
+from nextpy.interfaces.web.components.core.layout.center import Center
 from nextpy.frontend.style import Style
 
 centered_content_with_style = Center.create(

docs/references/frontend/components/core/layout/spacer_reference.md

@@ -19,7 +19,7 @@ The `Spacer` component is essentially a `Div` element with the capability to pro
 ### Basic Usage
 
 ```python
-from nextpy.frontend.components.core.layout import spacer
+from nextpy.interfaces.web.components.core.layout import spacer
 
 # Creating a simple spacer with default properties
 simple_spacer = spacer.create()
@@ -28,7 +28,7 @@ simple_spacer = spacer.create()
 ### Advanced Usage
 
 ```python
-from nextpy.frontend.components.core.layout import spacer
+from nextpy.interfaces.web.components.core.layout import spacer
 from nextpy.frontend.style import Style
 
 # Creating a spacer with a specific height and width

docs/references/frontend/components/core/layout/stack_reference.md

@@ -18,7 +18,7 @@ The `Stack` component in Nextpy is a layout utility designed to stack its child
 ### Basic Usage
 
 ```python
-from nextpy.frontend.components.core.layout.stack import HStack, VStack
+from nextpy.interfaces.web.components.core.layout.stack import HStack, VStack
 
 # Horizontal Stack
 horizontal_stack = HStack.create(

docs/references/frontend/components/radix/themes/components/icons_reference.md

@@ -51,7 +51,7 @@ my_icon = Icon.create(
 
 ```python
 from nextpy.components.radix.themes.components.icons import Icon, ICON_LIST
-from nextpy.frontend.components.flex import Flex
+from nextpy.interfaces.web.components.flex import Flex
 
 # Displaying a set of icons
 icon_set = Flex.create(

nextpy/__init__.py

@@ -12,7 +12,7 @@
 import importlib
 from typing import Type
 
-from nextpy.frontend.page import page as page
+from nextpy.interfaces.web.page import page as page
 from nextpy.utils import console
 from nextpy.utils.format import to_snake_case
 
@@ -283,14 +283,15 @@
     "nextpy.constants": ["Env", "constants"],
     "nextpy.data.jsondb": ["JsonDatabase"],
     "nextpy.data.model": ["Model", "model", "session"],
-    "nextpy.frontend.components": _ALL_COMPONENTS + ["chakra", "next"],
-    "nextpy.frontend.components.framer.motion": ["motion"],
-    "nextpy.frontend.components.component": ["memo"],
-    "nextpy.frontend.components.el": ["el"],
-    "nextpy.frontend.components.moment.moment": ["MomentDelta"],
+    "nextpy.interfaces.web.components": _ALL_COMPONENTS + ["chakra", "next"],
+    "nextpy.interfaces.web.components.framer.motion": ["motion"],
+    "nextpy.interfaces.web.components.component": ["memo"],
+    "nextpy.interfaces.web.components.el": ["el"],
+    "nextpy.interfaces.web.components.moment.moment": ["MomentDelta"],
     "nextpy.frontend.page": ["page"],
+    "nextpy.interfaces.web.components.proxy": ["animation", "unstyled"],
     "nextpy.frontend.style": ["color_mode", "style", "toggle_color_mode"],
-    "nextpy.frontend.components.recharts": [
+    "nextpy.interfaces.web.components.recharts": [
         "area_chart", "bar_chart", "line_chart", "composed_chart", "pie_chart",
         "radar_chart", "radial_bar_chart", "scatter_chart", "funnel_chart", "treemap",
         "area", "bar", "line", "scatter", "x_axis", "y_axis", "z_axis", "brush",
@@ -300,7 +301,6 @@
         "polar_angle_axis", "polar_grid", "polar_radius_axis",
     ],
     "nextpy.utils": ["utils"],
-    "nextpy.frontend.components.proxy": ["animation"],
 }
 
 
@@ -351,9 +351,12 @@ def __getattr__(name: str) -> Type:
     """
     # Custom alias handling
     if name == "animation":
-        module = importlib.import_module("nextpy.frontend.components.proxy")
+        module = importlib.import_module("nextpy.interfaces.web.components.proxy")
         return module.animation
 
+    # Custom alias handling for 'unstyled'
+    if name == "unstyled":
+        return importlib.import_module("nextpy.interfaces.web.components.proxy.unstyled")
 
     try:
         # Check for import of a module that is not in the mapping.
@@ -371,4 +374,4 @@ def __getattr__(name: str) -> Type:
             getattr(module, name) if name != _MAPPING[name].rsplit(".")[-1] else module
         )
     except ModuleNotFoundError:
-        raise AttributeError(f"module 'nextpy' has no attribute {name}") from None
+        raise AttributeError(f"module 'nextpy' has no attribute {name}") from None