jupyter component test file added

app-examples/gallery/gallery/gallery.py

@@ -76,6 +76,7 @@ def gallery_with_no_sidebar():
 @template(route="/", title="GALLERY")
 def gallery() -> xt.Component:
     return xt.vstack(
+        xt.header('Gallery'),
         xt.vstack(
             xt.vstack(
                 xt.image(src="/logo.svg", width="170px"),

pyproject.toml

@@ -51,6 +51,8 @@ pyjokes = "^0.6.0"
 pylint = "^3.0.3"
 charset-normalizer = "^3.3.2"
 aiosmtplib = "^3.0.1"
+reacton = "^1.8.2"
+solara = "^1.25.1"
 
 [tool.poetry.group.dev.dependencies]
 pytest = "^7.1.2"
@@ -130,7 +132,7 @@ target-version = "py37"
 "tests/*.py" = ["D100", "D103", "D104"]
 "nextpy/ai/*.py" = ["ALL"]
 "nextpy/data/vectordb/*.py" = ["ALL"]
-"nextpy/interfaces/templates/*.py" = ["D100", "D103", "D104"]
+"nextpy/interfaces/web/templates/*.py" = ["D100", "D103", "D104"]
 "*.pyi" = ["ALL"]
 "app-examples/*.py" = ["ALL"]
 "ai-notebooks/*.py" = ["ALL"]

test/chat_element_test.ipynb

@@ -0,0 +1,42 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import nextpy.interfaces.jupyter as xtj\n",
+    "\n",
+    "chat_input = xtj.chat_input()\n",
+    "\n",
+    "\n",
+    "@xtj.component\n",
+    "def Page():\n",
+    "    xtj.title('Testing')\n",
+    "    display(chat_input)"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": ".venv",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.11.5"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}

test/container1_test.ipynb

@@ -0,0 +1,130 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "Compiling takes time, but the compiled app is super fast⚡:\n",
+      "😂Optimist: The glass is half full. Pessimist: The glass is half empty. Programmer: The glass is twice as large as necessary. 😂\n",
+      "\n",
+      "111111111111111111 [Page()]\n"
+     ]
+    },
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "c202d60886a74b91b13dae50bc5c71fd",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/html": [
+       "Cannot show widget. You probably want to rerun the code cell above (<i>Click in the code cell, and press Shift+Enter <kbd>⇧</kbd>+<kbd>↩</kbd></i>)."
+      ],
+      "text/plain": [
+       "Cannot show ipywidgets in text"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "import nextpy.interfaces.jupyter as xtj\n",
+    "import pandas as pd\n",
+    "import plotly.express as px\n",
+    "import datetime\n",
+    "import reacton.ipyvuetify as v\n",
+    "from ipywidgets import HTML\n",
+    "\n",
+    "\n",
+    "card_contents = [\n",
+    "    {'title': 'Card 1', 'text': 'This is some text inside the first card.'},\n",
+    "    {'title': 'The Importance of bees', 'text': 'Bees play a critical role in maintaining the balance of our ecosystems and the survival of many plant and animal species. As master pollinators, they contribute to the growth of trees, flowers, and other plants, which serve as food and shelter for creatures large and small.'}\n",
+    "]\n",
+    "\n",
+    "container = xtj.create_container_with_layout_and_card(card_contents)  \n",
+    "\n",
+    "tab_items = [\n",
+    "    {'title': 'Home', 'content': 'Welcome to the Home tab!'},\n",
+    "    {'title': 'Profile', 'content': 'This is the Profile tab.'},\n",
+    "    {'title': 'Messages', 'content': 'Check your messages here.'},\n",
+    "]\n",
+    "\n",
+    "tabs_component = xtj.tabs(\n",
+    "    tab_items=tab_items,\n",
+    "    class_name='my-tabs',\n",
+    "    style='max-width: 800px;',\n",
+    ")\n",
+    "\n",
+    "\n",
+    "\n",
+    "\n",
+    "expander_title = \"The Importance of Bees in Our Ecosystem\"\n",
+    "\n",
+    "# Expander Content\n",
+    "expander_content_html = \"\"\"\n",
+    "<h4>Why Bees Matter</h4>\n",
+    "<p>Bees play a critical role in maintaining the balance of our ecosystems and the survival of many plant and animal species. As master pollinators, they contribute to the growth of trees, flowers, and other plants, which serve as food and shelter for creatures large and small.</p>\n",
+    "<p>Furthermore, bees are vital to the production of many of the fruits, nuts, and vegetables that we rely on. Their pollination efforts account for about one-third of the world's food supply. Without bees, our diets would be vastly different and nutritionally poorer.</p>\n",
+    "<p>Unfortunately, bee populations are in decline due to factors such as habitat loss, pollution, pesticide use, climate change, and disease. Protecting bees and their habitats is essential not only for the bees' survival but for ours as well.</p>\n",
+    "<p>Here are a few ways you can help protect bees:</p>\n",
+    "<ul>\n",
+    "    <li>Plant bee-friendly flowers and shrubs in your garden.</li>\n",
+    "    <li>Avoid using pesticides and chemicals in your garden.</li>\n",
+    "    <li>Support local beekeepers by buying local honey and beeswax products.</li>\n",
+    "    <li>Create a bee bath in your garden where bees can find fresh water.</li>\n",
+    "    <li>Spread the word about the importance of bees to our ecosystem.</li>\n",
+    "</ul>\n",
+    "<p>By understanding and supporting bees, we help maintain the balance of our ecosystems and ensure the continuation of the natural processes that are vital to our existence.</p>\n",
+    "\"\"\"\n",
+    "\n",
+    "# Create an expander using the modified function with shadow effect\n",
+    "expander = xtj.expander(expander_title, expanded=False)\n",
+    "\n",
+    "# Create HTML content\n",
+    "content = HTML(expander_content_html)\n",
+    "\n",
+    "# Add content to the expander\n",
+    "xtj.add_content_to_expander(expander, content)\n",
+    "\n",
+    "@xtj.component\n",
+    "def Page():\n",
+    "    xtj.title('Testing')   \n",
+    "    \n",
+    "    display(container)\n",
+    "    \n",
+    "    display(tabs_component)\n",
+    "    display(expander)\n",
+    "    \n",
+    "    \n",
+    "Page()\n"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "myvenv",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.9.4"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}

test/container_test.ipynb

@@ -0,0 +1 @@
+{"cells":[{"cell_type":"code","execution_count":1,"metadata":{},"outputs":[{"name":"stdout","output_type":"stream","text":["Compiling takes time, but the compiled app is super fast⚡:\n","😂Why do programmers confuse Halloween with Christmas? Because OCT 31 == DEC 25. 😂\n","\n"]},{"data":{"application/vnd.jupyter.widget-view+json":{"model_id":"b737e1862a3b4c6082a61f6f30c5c873","version_major":2,"version_minor":0},"text/html":["Cannot show widget. You probably want to rerun the code cell above (<i>Click in the code cell, and press Shift+Enter <kbd>⇧</kbd>+<kbd>↩</kbd></i>)."],"text/plain":["Cannot show ipywidgets in text"]},"metadata":{},"output_type":"display_data"}],"source":["import nextpy.interfaces.jupyter as xtj\n","from pathlib import Path\n","\n","@xtj.component\n","def containers():\n","    xtj.style(Path('hello.css'))\n","    with xtj.AppLayout():\n","        with xtj.sidebar():\n","            with xtj.box(style='height: 30px;'):\n","                xtj.markdown(label='Hey')\n","\n","        # BOX \n","        # UISNG WITH \n","        with xtj.box(class_name='hell'):\n","            xtj.text('Box text'),xtj.input(label='Box input')\n","        #  USING CHILDREN\n","        xtj.box(\n","            children = [xtj.text('Box text'),xtj.input(label='Box input')], \n","            style='border:2px solid black; padding:2px;'\n","        )\n","    \n","    \n","containers()"]},{"cell_type":"markdown","metadata":{},"source":[]}],"metadata":{"kernelspec":{"display_name":".venv","language":"python","name":"python3"},"language_info":{"codemirror_mode":{"name":"ipython","version":3},"file_extension":".py","mimetype":"text/x-python","name":"python","nbconvert_exporter":"python","pygments_lexer":"ipython3","version":"3.11.5"}},"nbformat":4,"nbformat_minor":2}

test/data.ipynb

@@ -0,0 +1,147 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "Compiling takes time, but the compiled app is super fast⚡:\n",
+      "😂['hip', 'hip'] (hip hip array!) 😂\n",
+      "\n"
+     ]
+    },
+    {
+     "ename": "ModuleNotFoundError",
+     "evalue": "No module named 'humanize'",
+     "output_type": "error",
+     "traceback": [
+      "\u001b[1;31m---------------------------------------------------------------------------\u001b[0m",
+      "\u001b[1;31mModuleNotFoundError\u001b[0m                       Traceback (most recent call last)",
+      "Cell \u001b[1;32mIn[1], line 1\u001b[0m\n\u001b[1;32m----> 1\u001b[0m \u001b[38;5;28;01mimport\u001b[39;00m \u001b[38;5;21;01mnextpy\u001b[39;00m\u001b[38;5;21;01m.\u001b[39;00m\u001b[38;5;21;01minterfaces\u001b[39;00m\u001b[38;5;21;01m.\u001b[39;00m\u001b[38;5;21;01mjupyter\u001b[39;00m \u001b[38;5;28;01mas\u001b[39;00m \u001b[38;5;21;01mxtj\u001b[39;00m\n\u001b[0;32m      2\u001b[0m \u001b[38;5;28;01mimport\u001b[39;00m \u001b[38;5;21;01mpandas\u001b[39;00m \u001b[38;5;28;01mas\u001b[39;00m \u001b[38;5;21;01mpd\u001b[39;00m\n\u001b[0;32m      3\u001b[0m \u001b[38;5;28;01mimport\u001b[39;00m \u001b[38;5;21;01mplotly\u001b[39;00m\u001b[38;5;21;01m.\u001b[39;00m\u001b[38;5;21;01mexpress\u001b[39;00m \u001b[38;5;28;01mas\u001b[39;00m \u001b[38;5;21;01mpx\u001b[39;00m\n",
+      "File \u001b[1;32mD:\\Dotagent\\nextpy\\nextpy\\interfaces\\jupyter\\__init__.py:54\u001b[0m\n\u001b[0;32m     52\u001b[0m \u001b[38;5;28;01mfrom\u001b[39;00m \u001b[38;5;21;01m.\u001b[39;00m\u001b[38;5;21;01mcache\u001b[39;00m \u001b[38;5;28;01mimport\u001b[39;00m memoize\n\u001b[0;32m     53\u001b[0m \u001b[38;5;28;01mfrom\u001b[39;00m \u001b[38;5;21;01m.\u001b[39;00m \u001b[38;5;28;01mimport\u001b[39;00m cache\n\u001b[1;32m---> 54\u001b[0m \u001b[38;5;28;01mfrom\u001b[39;00m \u001b[38;5;21;01m.\u001b[39;00m\u001b[38;5;21;01mcomponents\u001b[39;00m \u001b[38;5;28;01mimport\u001b[39;00m \u001b[38;5;241m*\u001b[39m\n\u001b[0;32m     55\u001b[0m \u001b[38;5;28;01mfrom\u001b[39;00m \u001b[38;5;21;01m.\u001b[39;00m\u001b[38;5;21;01mstate\u001b[39;00m \u001b[38;5;28;01mimport\u001b[39;00m State\n\u001b[0;32m     56\u001b[0m \u001b[38;5;28;01mfrom\u001b[39;00m \u001b[38;5;21;01m.\u001b[39;00m\u001b[38;5;21;01mrouting\u001b[39;00m \u001b[38;5;28;01mimport\u001b[39;00m use_route, use_router, use_route_level, find_route, use_pathname, resolve_path\n",
+      "File \u001b[1;32mD:\\Dotagent\\nextpy\\nextpy\\interfaces\\jupyter\\components\\__init__.py:11\u001b[0m\n\u001b[0;32m      9\u001b[0m \u001b[38;5;28;01mfrom\u001b[39;00m \u001b[38;5;21;01m.\u001b[39;00m\u001b[38;5;21;01mcontrol\u001b[39;00m \u001b[38;5;28;01mimport\u001b[39;00m form\n\u001b[0;32m     10\u001b[0m \u001b[38;5;28;01mfrom\u001b[39;00m \u001b[38;5;21;01m.\u001b[39;00m\u001b[38;5;21;01mdata_elements\u001b[39;00m \u001b[38;5;28;01mimport\u001b[39;00m dataframe, metrics, json_display\n\u001b[1;32m---> 11\u001b[0m \u001b[38;5;28;01mfrom\u001b[39;00m \u001b[38;5;21;01m.\u001b[39;00m\u001b[38;5;21;01minput_widgets\u001b[39;00m \u001b[38;5;28;01mimport\u001b[39;00m button, download_button, link_button\n\u001b[0;32m     12\u001b[0m \u001b[38;5;28;01mfrom\u001b[39;00m \u001b[38;5;21;01m.\u001b[39;00m\u001b[38;5;21;01minput_widgets\u001b[39;00m \u001b[38;5;28;01mimport\u001b[39;00m checkbox, select_box, multiselect, radio, switch \n\u001b[0;32m     13\u001b[0m \u001b[38;5;28;01mfrom\u001b[39;00m \u001b[38;5;21;01m.\u001b[39;00m\u001b[38;5;21;01minput_widgets\u001b[39;00m \u001b[38;5;28;01mimport\u001b[39;00m select_slider, select_slider_float\n",
+      "File \u001b[1;32mD:\\Dotagent\\nextpy\\nextpy\\interfaces\\jupyter\\components\\input_widgets\\__init__.py:6\u001b[0m\n\u001b[0;32m      4\u001b[0m \u001b[38;5;28;01mfrom\u001b[39;00m \u001b[38;5;21;01m.\u001b[39;00m\u001b[38;5;21;01mdate_picker\u001b[39;00m \u001b[38;5;28;01mimport\u001b[39;00m date_picker\n\u001b[0;32m      5\u001b[0m \u001b[38;5;28;01mfrom\u001b[39;00m \u001b[38;5;21;01m.\u001b[39;00m\u001b[38;5;21;01mdownload_button\u001b[39;00m \u001b[38;5;28;01mimport\u001b[39;00m download_button\n\u001b[1;32m----> 6\u001b[0m \u001b[38;5;28;01mfrom\u001b[39;00m \u001b[38;5;21;01m.\u001b[39;00m\u001b[38;5;21;01mfile_browser\u001b[39;00m \u001b[38;5;28;01mimport\u001b[39;00m file_browser\n\u001b[0;32m      7\u001b[0m \u001b[38;5;28;01mfrom\u001b[39;00m \u001b[38;5;21;01m.\u001b[39;00m\u001b[38;5;21;01mfile_uploader\u001b[39;00m \u001b[38;5;28;01mimport\u001b[39;00m file_dropper\n\u001b[0;32m      8\u001b[0m \u001b[38;5;28;01mfrom\u001b[39;00m \u001b[38;5;21;01m.\u001b[39;00m\u001b[38;5;21;01minput\u001b[39;00m \u001b[38;5;28;01mimport\u001b[39;00m \u001b[38;5;28minput\u001b[39m\n",
+      "File \u001b[1;32mD:\\Dotagent\\nextpy\\nextpy\\interfaces\\jupyter\\components\\input_widgets\\file_browser.py:6\u001b[0m\n\u001b[0;32m      3\u001b[0m \u001b[38;5;28;01mfrom\u001b[39;00m \u001b[38;5;21;01mpathlib\u001b[39;00m \u001b[38;5;28;01mimport\u001b[39;00m Path\n\u001b[0;32m      4\u001b[0m \u001b[38;5;28;01mfrom\u001b[39;00m \u001b[38;5;21;01mtyping\u001b[39;00m \u001b[38;5;28;01mimport\u001b[39;00m Callable, List, Optional, Union, cast\n\u001b[1;32m----> 6\u001b[0m \u001b[38;5;28;01mimport\u001b[39;00m \u001b[38;5;21;01mhumanize\u001b[39;00m\n\u001b[0;32m      7\u001b[0m \u001b[38;5;28;01mimport\u001b[39;00m \u001b[38;5;21;01mipyvuetify\u001b[39;00m \u001b[38;5;28;01mas\u001b[39;00m \u001b[38;5;21;01mvy\u001b[39;00m\n\u001b[0;32m      8\u001b[0m \u001b[38;5;28;01mimport\u001b[39;00m \u001b[38;5;21;01mtraitlets\u001b[39;00m\n",
+      "\u001b[1;31mModuleNotFoundError\u001b[0m: No module named 'humanize'"
+     ]
+    }
+   ],
+   "source": [
+    "import nextpy.interfaces.jupyter as xtj\n",
+    "import pandas as pd\n",
+    "import plotly.express as px\n",
+    "import datetime\n",
+    "import reacton.ipyvuetify as v\n",
+    "\n",
+    "image_path = 'C:/Users/HP/Documents/New_Nextpy_Development/nextpy/interfaces/jupyter/components/media/scene.jpg'\n",
+    "img = xtj.image(image_path, width=\"50%\")\n",
+    "text_area = xtj.textarea(\n",
+    "    label=None,\n",
+    "    placeholder=\"Enter text here...\",\n",
+    "    style='border: 1px solid #CCC; border-radius: 5px;',\n",
+    ")\n",
+    "color_picker = xtj.color_picker(\n",
+    "        label=\"Pick A Color\",\n",
+    "        value=\"#00f900\",  \n",
+    "        help=\"Choose a color from the picker\",  \n",
+    "        on_change=None,  \n",
+    "        args=None,  \n",
+    "        kwargs=None,  \n",
+    "        disabled=False,  \n",
+    "        label_visibility=\"visible\"  \n",
+    "    )\n",
+    "\n",
+    "date_picker_instance = xtj.date_picker(\n",
+    "    label=None,\n",
+    "    min=\"2000-01-01\",\n",
+    "    max=\"2030-12-31\",\n",
+    "    value=None  \n",
+    ")\n",
+    "\n",
+    "time_input_instance = xtj.time_picker(\n",
+    "        label=\"Select Time\",\n",
+    "        value=datetime.time(10, 30),  \n",
+    "        style='color: blue;',         \n",
+    "        \n",
+    "    )\n",
+    "options = [\"Comedy\", \"Drama\", \"Documentary\"]\n",
+    "icons = [\"\", \"\", \"🎥\"]  \n",
+    "\n",
+    "genre_radio = xtj.radio(\n",
+    "    label=\"What's your favorite movie genre\",\n",
+    "    options=options,\n",
+    "    value=options[2],  \n",
+    "    icons=icons,       \n",
+    "    horizontal=False,  \n",
+    "    class_name='',     \n",
+    "    style='',          \n",
+    ")\n",
+    "\n",
+    "df_example = pd.DataFrame({\n",
+    "    'Column 1': [1, 2, 3, 4],\n",
+    "    'Column 2': [5, 6, 7, 8],\n",
+    "    'Column 3': ['A', 'B', 'C', 'D']\n",
+    "})\n",
+    "dataframe_instance = xtj.dataframe(df_example, width=500, height=300, use_container_width=True)\n",
+    "\n",
+    "metric_card_1 = xtj.metrics(label=\"Temperature\", value=\"70 °F\", delta=\"1.2 °F\")\n",
+    "metric_card_2 = xtj.metrics(label=\"Wind\", value=\"9 mph\", delta=\"-8 %\")\n",
+    "metric_card_3 = xtj.metrics(label=\"Humidity\", value=\"86 %\", delta=\"4 %\")\n",
+    "example_json_data = {\n",
+    "    \"user\": {\n",
+    "        \"name\": \"Jane Smith\",\n",
+    "        \"id\": 102,\n",
+    "        \"permissions\": [\"admin\", \"editor\"]\n",
+    "    },\n",
+    "    \"settings\": {\n",
+    "        \"theme\": \"dark\",\n",
+    "        \"notifications\": {\n",
+    "            \"email\": True,\n",
+    "            \"sms\": False\n",
+    "        }\n",
+    "    }\n",
+    "}\n",
+    "\n",
+    "json_display_component = xtj.json_display(example_json_data, expanded=False)\n",
+    "    \n",
+    "\n",
+    "@xtj.component\n",
+    "def Page():\n",
+    "    xtj.title('Testing')   \n",
+    "    xtj.dataframe(df_example, width=500, height=300, use_container_width=True)\n",
+    "    display(dataframe_instance)\n",
+    "    display(metric_card_1)\n",
+    "    display(metric_card_2)\n",
+    "    display(metric_card_3)\n",
+    "    display(json_display_component)\n",
+    "    \n",
+    "Page()\n"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": ".venv",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.12.1"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}

test/hello.css

@@ -0,0 +1,4 @@
+.hell{
+    border: 2px solid blue; 
+    padding: 2px;
+}