reflex-dev/reflex-examples

A repository full of Reflex example apps.

reflex-examples's Issues

mobile testing

Mobile webapp is not testing yet.
We catn start to test mobile web after pc preview release in new version of pynecone

Can you add an example of a dynamically updated dropdown list?

Hi,

My pynecone-app is taking shape :) However, it is being a bit difficult for me to do things like in other options like Flask are a bit more straightforward.

For example, I would like to have 2 dropdowns or selects. The first one has the values '1' and '2'. The second one gets updated dynamically depending on the selection of the first one. If you select '1' in the first dropdown, the options in the second dropdown get updated to 'A, 'B'. If you select '2' in the first dropdown, the options in the second dropdown get updated to 'C', 'D'.

Can you post here a minimal example of this? I guess we should access the option list in the 2nd dropdown by accessing it referencing its ID but I cannot find an example of this.

Thanks a lot.

translator example: miss the top margin on pc.select (0.1.32)

0.1.31

0.1.32

The new pc.select in 0.1.32 miss the top margin.

todo example click `add` two time make one empty task pc 0.1.28

This testing is in pynecone 0.1.28 environment only right now.
The original page is the following.

Typing the input field and clicking Add two times, you can see the following page

The expected behavior should be one of these two cases.

• Case 1: don't add repeated items.
• Case 2: just put one same item on the list but not an empty item.
• Case otherwise: some reasonable behavior.

Getting 'Could not determine storage type' error in gpt app

Hi Team,

I am able to generate the signup page, however when user signs up in gpt page and gets redirected to 'home' page, I am getting following error regarding storage type on Python 3.8:

Seems to be related to this snippet for linking to data table:

                    pc.data_table(
                        data=State.questions,
                        columns=["Question", "Answer"],
                        pagination=True,
                        search=True,
                        sort=True,
                        width="100%",
                    ),

sales example: no icon on the related tab of browser.

On the console of browser, we can it cannot find favicon.ico, so it's failed

crm example: show error sometimes when change page

My Testing Environment
        OS Darwin 22.4.0
        Pynecone 0.1.30
        Python 3.11.3
        Node v16.8.0
        Bun 0.5.9

When user change page, it will show the error sometimes.
There is no way to reproduce this bug. But if we test it more time, it will show up sometimes.

nba example failed after first released version v0.1.14 and v0.1.27 on PyPI

• My developing environment

python: 3.11.3
bun: 0.5.4 
node:12.22.12
OS: Mac OS X 13.3.1 (Intel CPU)
Browser:Chrome 
frontend run on localhost:3000
backend run on localhost:8000

• My way to setup and run nba from clean python environment

$ cd nba
$ rm -rf .web/ && for i in $(find ./ | grep "__pycache__"$ );do rm -rf  $i; done 
$ pip install pynecone==0.1.14
$ pip install plotly-express plotly pandas
$ curl -fsSL https://bun.sh/install | bash -s -- bun-v0.5.4
$ pc init
$ pc run --loglevel=debug

• Error message is the following

  194 | <VStack><VStack alignItems="left"
  195 | sx={{"width": "100%"}}><HStack><Badge>{`Min Age: `}
> 196 | {state.age.at(0)}</Badge>
      |           ^
  197 | <Spacer/>
  198 | <Badge>{`Max Age: `}
  199 | {state.age.at(1)}</Badge></HStack>
warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works
error - pages/index.js (196:11) @ Component
error - TypeError: state.age.at is not a function
    at Component (webpack-internal:///./pages/index.js:10398:75)

• More description
  When I test 'nba', I need to open browser to reload again and again. Then the pc app will open to run well.

By the way,
I also test
v0.1.21 with bun 0.5.4
v0.1.24 with bun 0.5.4
v0.1.27 with bun 0.5.9
All of their errors are the same.

nba example: pc.select cutoff (0.1.32)

My Testing Environment
        OS Darwin 22.4.0
        Pynecone 0.1.32
        Python 3.11.3
        Node v16.8.0
        Bun 0.5.9

0.1.31

0.1.32

upload example: failed to upload file sometimes (0.1.32)

Click upload and no file update sometimes.

The content of TextArea shows the file's name in .web/public/files/.
The files are there, and GUI shows correctly.
But just no thing uploads after selecting one file and uploading it.

pc 0.1.31 have the same bug too.

Plotly title and x/y axis labels not showing

Plotly express works fine but whenever I try to use titles for an axis or the graph itself they do not show. (NBA app specifically)

asyncio_server failed for tick on pynecone==0.1.21

Python Version: 3.11
Mac OS
NodeJS Version: 12.22.12

tick is work on pynecone==0.1.20 but not on pynecone==0.1.21 because backend part has some issue.

For the backend part, snakegame and clock example cannot work for pynecone==0.1.21
But if we use pynecone==0.1.21 to build frontend, it can work with the backend with pynecone==0.1.20

future: <Task finished name='Task-35' coro=<AsyncServer._handle_event_internal() done, defined at /Users/milochen/opt/anaconda3/envs/pynecone-311/lib/python3.11/site-packages/socketio/asyncio_server.py:522> exception=AssertionError("Unexpected event type, <class 'method'>.")>
Traceback (most recent call last):
  File "/Users/milochen/opt/anaconda3/envs/pynecone-311/lib/python3.11/site-packages/socketio/asyncio_server.py", line 524, in _handle_event_internal
    r = await server._trigger_event(data[0], namespace, sid, *data[1:])
        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/Users/milochen/opt/anaconda3/envs/pynecone-311/lib/python3.11/site-packages/socketio/asyncio_server.py", line 569, in _trigger_event
    return await self.namespace_handlers[namespace].trigger_event(
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/Users/milochen/opt/anaconda3/envs/pynecone-311/lib/python3.11/site-packages/socketio/asyncio_namespace.py", line 37, in trigger_event
    ret = await handler(*args)
          ^^^^^^^^^^^^^^^^^^^^
  File "/Users/milochen/opt/anaconda3/envs/pynecone-311/lib/python3.11/site-packages/pynecone/app.py", line 582, in on_event
    update = await process(self.app, event, sid, headers, client_ip)
             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/Users/milochen/opt/anaconda3/envs/pynecone-311/lib/python3.11/site-packages/pynecone/app.py", line 438, in process
    update = await state.process(event)
             ^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/Users/milochen/opt/anaconda3/envs/pynecone-311/lib/python3.11/site-packages/pynecone/state.py", line 579, in process
    events = fix_events(events, event.token)
             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/Users/milochen/opt/anaconda3/envs/pynecone-311/lib/python3.11/site-packages/pynecone/event.py", line 352, in fix_events
    assert isinstance(e, EventSpec), f"Unexpected event type, {type(e)}."
AssertionError: Unexpected event type, <class 'method'>.

twitter: AttributeError: 'property' object has no attribute

In twitter sample, the table is defined likethis:

class User(pc.Model, table=True):
    """A table of Users."""

    username: str
    password: str

and in login scripts, the function looks like:

        with pc.session() as session:
            user = session.exec(
                User.select.where(User.username == self.username)

and it runs into an error:

AttributeError: 'property' object has no attribute 

I think the source code model.Model.select is something wrong.Can you help?

clock example: switch ui is not correct after refresh (0.1.32)

My Testing Environment
        OS Darwin 22.4.0
        Pynecone 0.1.32
        Python 3.11.3
        Node v16.8.0
        Bun 0.5.9

Turn switch on and refresh page.
The switch is still on but clock is not moving.
The expected switch on UI is to display switch-off

Default 404 page and default error pages

Trying to figure out how to have a 404 page for routes or pages that don't exist. I see that the pynecone website doesn't have this in place, but you provide a blank page. What would be the process here?

nba example: pc run is halting

My Testing Environment
        OS Darwin 22.4.0
        Pynecone 0.1.30
        Python 3.11.3
        Node v16.8.0
        Bun 0.5.9

It's halting here.

But if we try to refresh many times on the browser.
Then it will keep going. And show the page correctly.

chatroom example: cannot set nick and send message(0.1.33)

After setup Nick in Nick's input and then clicking Message'input,
We have the following error message

Traceback (most recent call last):
  File "/Users/milochen/anaconda3/envs/pynecone-examples/lib/python3.11/site-packages/pynecone/state.py", line 693, in _process_event
    events = await fn(**payload)
             ^^^^^^^^^^^^^^^^^^^
  File "/Users/milochen/git/py-webapp/chatroom/chatroom/chatroom.py", line 33, in nick_change
    await broadcast_nicks()
  File "/Users/milochen/git/py-webapp/chatroom/chatroom/chatroom.py", line 117, in broadcast_nicks
    await broadcast_event("state.set_nicks", payload=dict(nicks=nicks))
  File "/Users/milochen/git/py-webapp/chatroom/chatroom/chatroom.py", line 94, in broadcast_event
    update = await state._process(
             ^^^^^^^^^^^^^^^^^^^^^
TypeError: object async_generator can't be used in 'await' expression

My Testing Environment
        OS Darwin 22.4.0
        Pynecone 0.1.33
        Python 3.11.3
        Node v16.8.0
        Bun 0.5.9

clock example: cannot show default time zone on pc.select (0.1.32)

My Testing Environment
        OS Darwin 22.4.0
        Pynecone 0.1.32
        Python 3.11.3
        Node v16.8.0
        Bun 0.5.9

clock example: cannot show default time zone on pc.select (0.1.32)

Update requirements.txt

All the requirement.txt files currently reference pynecone-io>=0.1.6 which is an ancient version. We should update them.

How should the table relationship be?

class ProductGroup(pc.Model, table=True):
    code: str = None
    name: str


class Product(pc.Model, table=True):
    code: str = None
    name: str
    price = float
    image: str = None
    description: str = None
    is_active: bool = True
    productgroup: ProductGroup

The Product table is related to the ProductGroup table with a foreign key.
The above definition doesn't work!

gpt example error

hello. I keep getting the following error while running the example code. This is the result of pc init and pc run in the gpt example folder after git clone. What could be the problem?

pc init issue on nba example: pc init cannot afford to run well in the first time

My environment

python 3.11.3 
pc 0.1.28
bun 5.9
Mac 13.3.1 (Intel CPU)

The following step allows the developer to clean and re-init pc project.
so it can simulate the situation of the first time to run the project

rm -rf .web && for i in $(find ./ | grep __pycache__$); do rm -rf $i; done && pc init &&  pc run

TEST FAILED: When you test it, open localhost:3000 cannot see anything.

But if you change to use the following steps, the init procedure will work well for first time to run nba example.

rm -rf .web && for i in $(find ./ | grep __pycache__$); do rm -rf $i; done && pc init && ~/.bun/bin/bun install --cwd .web/ &&  pc run

I just add ~/.bun/bin/bun install --cwd .web/ after pc init.
Then nba example can work in the first time.

I got this idea from @r0b2g1t 's contribution on PR

• reflex-dev/reflex#911
• https://github.com/pynecone-io/pynecone/pull/911/files

Several Issues with Twitter demo

Able to login with empty input fields

With reference to this demo I am able to login without entering any email or password and when I try to sign up without any email or password, I get the message "username already exists".

This could be an issue where any checks were not placed in the signup function allowing empty values "" for username and password to be entered in the database. Please see if you can fix this and maybe even add a warning in the docs to alert the users about this potential pitfall.

Passwords do not match error (possibly due to space but could be handled better)

As following list grows, the tweet button disappears. Need another scrollbar here.

Scrolling to the bottom of the page shows weird scrollbars

quiz example: question 1 & question 2 is not correct (0.1.32)

This issue is reported by
@jiangmiemie
question 1 and question 2 seem to need a fix as well(It should be mandatory to check one of them). It is recommended to complete the submission at one time

upload example: failed to upload - pc 0.1.30

My Testing Environment
        OS Darwin 22.4.0
        Pynecone 0.1.30
        Python 3.11.3
        Node v16.8.0
        Bun 0.5.9

The upload function is not working.
When you click upload, the log is the following.

future: <Task finished name='Task-61' coro=<AsyncServer._handle_event_internal() done, defined at /Users/milochen/anaconda3/envs/pynecone-examples/lib/python3.11/site-packages/socketio/asyncio_server.py:522> exception=ValidationError(model='Event', errors=[{'loc': ('payload',), 'msg': 'value is not a valid dict', 'type': 'type_error.dict'}])>
Traceback (most recent call last):
  File "/Users/milochen/anaconda3/envs/pynecone-examples/lib/python3.11/site-packages/socketio/asyncio_server.py", line 524, in _handle_event_internal
    r = await server._trigger_event(data[0], namespace, sid, *data[1:])
        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/Users/milochen/anaconda3/envs/pynecone-examples/lib/python3.11/site-packages/socketio/asyncio_server.py", line 569, in _trigger_event
    return await self.namespace_handlers[namespace].trigger_event(
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/Users/milochen/anaconda3/envs/pynecone-examples/lib/python3.11/site-packages/socketio/asyncio_namespace.py", line 37, in trigger_event
    ret = await handler(*args)
          ^^^^^^^^^^^^^^^^^^^^
  File "/Users/milochen/anaconda3/envs/pynecone-examples/lib/python3.11/site-packages/pynecone/app.py", line 594, in on_event
    event = Event.parse_raw(data)
            ^^^^^^^^^^^^^^^^^^^^^
  File "pydantic/main.py", line 549, in pydantic.main.BaseModel.parse_raw
  File "pydantic/main.py", line 526, in pydantic.main.BaseModel.parse_obj
  File "pydantic/main.py", line 342, in pydantic.main.BaseModel.__init__
pydantic.error_wrappers.ValidationError: 1 validation error for Event
payload
  value is not a valid dict (type=type_error.dict)

How to create dropdown menu bar and get selected menu in pynecone

Pynecone CRUD

It gives many errors in Add/Update/Delete errors. When price is float, set cannot input..

import pynecone as pc
import datetime
from typing import List, Optional
from sqlmodel import Field


class Product(pc.Model, table=True):
    id: int = Field(primary_key=True)
    code: str = None
    names: str
    price: float
    image: str

    def __init__(self, id, code, names, price, image):
        self.id = id
        self.code = code
        self.names = names
        self.price = price
        self.image = image

    def __repr__(self) -> str:
        return "("+self.code+","+self.names+","+self.price+")"

class State(pc.State):
    """The app state."""
    code: str = ""
    names: str = ""
    price: float= 0
    image: str = ""

    async def handle_upload(self, file: pc.UploadFile):
        #pc.window_alert(f"image has been added.")
        upload_data = await file.read()
        outfile = f"assets/product/{file.filename}"

        # Save the file.
        with open(outfile, "wb") as file_object:
            file_object.write(upload_data)

        # Update the img var.
        self.image = file.filename

    def add_product_page(self):
        return pc.redirect("/product/add")

    def add_product(self):
        with pc.session() as session:
            session.add(
                Product(
                    code=self.code,
                    names=self.names,
                    price=self.price,
                    image=self.image,
                )
            )
            session.commit()
        #return pc.window_alert(f"Product {self.names} has been added.")
        return pc.redirect("/product/list")

    producsList: list[Product] = []

    @pc.var
    def get_products(self) -> list[Product]:
        """Get all products from the database."""
        with pc.session() as session:
            self.producsList = session.query(Product).all()
            return self.producsList


    def update_product_page(self, id: int):
        with pc.session() as session:
            product = session.query(Product).filter_by(id=id).first()
            if product:
                self.code = product.code
                self.names = product.names
                self.price = product.price
                self.image = product.image
                pc.input(value=self.code)
                return pc.redirect("/product/update")
            else:
                return pc.window_alert("Product not exists!!!")


    def update_product(self, id: str):
        with pc.session() as session:
            product = session.query(Product).filter_by(id=id).first()
            if product:
                pass
            else:
                return pc.window_alert("Product not exists!!!")

    modal_show: bool = False

    def modal_change(self):
        self.modal_show = not (self.modal_show)

    def delete_product(self, names: str):
        with pc.session() as session:
            session.query(Product).filter_by(names=names).delete()
            session.commit()
            self.modal_change()

def index():
    """The main page."""
    return pc.center(
        pc.vstack(
            pc.text("Home"),
            pc.link(
                "Products",
                href="/product/list",
                color="rgb(107,99,246)",
            )
        ),
    )

def show_products(item: Product):
    """Show a product in a table row."""
    return pc.tr(
        pc.td(item.code),
        pc.td(item.names),
        pc.td(item.price),
        pc.td(pc.image(src=item.image, height="60px"),),
        pc.td(
            pc.button("Update", on_click=lambda: State.update_product_page(item.id)),
        ),
        pc.td(

            pc.button("Delete", on_click=State.modal_change),
            pc.modal(
                pc.modal_overlay(
                    pc.modal_content(
                        pc.modal_header("Confirm"),
                        pc.modal_body(
                            "Do you want to delete product?"
                        ),
                        pc.modal_footer(
                            pc.button(
                                "Delete",
                                on_click=lambda: State.delete_product(item.names),
                                bg="red",
                                color="white",
                            ),
                            pc.button(
                                "Close", on_click=State.modal_change
                            )
                        ),
                    )
                ),
                is_open=State.modal_show,
            ),
        ),
    )

def product_list_page():
    return pc.center(
        pc.vstack(
            #navbar(),
            pc.vstack(
                pc.hstack(
                    pc.heading("Products"),
                    pc.button(pc.icon(tag="add"), on_click=State.add_product_page, bg="#F7FAFC", border="1px solid #ddd"),
                ),
                pc.table_container(
                    pc.table(
                        pc.thead(
                            pc.tr(
                                pc.th("Code"),
                                pc.th("Name"),
                                pc.th("Price"),
                                pc.th("Image"),
                            )
                        ),
                        pc.tbody(pc.foreach(State.get_products, show_products)),
                        variant="striped",
                        #size="100px",
                    ),
                    bg="#F7FAFC ",
                    border="1px solid #ddd",
                ),
                align_items="left",
                padding_top="7em",
            ),

        ),
        padding="1em",
    )


def product_add():
    return pc.center(
        pc.vstack(
            #navbar(),
            pc.heading("Product Add Page"),
            pc.vstack(
                pc.hstack(
                    pc.text("Code:"),
                    pc.input(placeholder="Code", on_blur=State.set_code),
                ),
                pc.hstack(
                    pc.text("Name:"),
                    pc.input(placeholder="Name", on_blur=State.set_names),
                ),
                pc.hstack(
                    pc.text("Price:"),
                    pc.input(placeholder="Price", on_blur=State.set_price),
                ),
                pc.hstack(
                    pc.text("Image:"),
                    #pc.input(placeholder="Image", on_blur=State.set_image),
                    pc.image(src=State.image),
                    pc.upload(
                        pc.button("Select File"),
                        pc.text("Drag and drop files here or click to select files"),
                        border="1px dotted black",
                        on_mouse_out=lambda: State.handle_upload(pc.upload_files())
                        #padding="20em",
                    ),
                )
            ),
            pc.button("Save", on_click=State.add_product),

            #box_shadow="lg",
            #bg="#F7FAFC ",
            padding="1em",
            border="1px solid #ddd",
        ),
        padding_top="3em",
    )


def product_update_page():
    return pc.center(
        pc.vstack(
            #navbar(),
            pc.heading("Product Update Page"),
            pc.vstack(
                pc.hstack(
                    pc.text("Code:"),
                    pc.input(placeholder="Code", value=State.code, on_blur=State.set_code),
                ),
                pc.hstack(
                    pc.text("Name:"),
                    pc.input(placeholder="Name", value=State.names, on_blur=State.set_names),
                ),
                pc.hstack(
                    pc.text("Price:"),
                    pc.input(placeholder="Price", value=State.price, on_blur=State.set_price),
                ),
                pc.hstack(
                    pc.text("Image:"),
                    #pc.input(placeholder="Image", on_blur=State.set_price),
                    pc.image(src=State.image),
                    pc.upload(
                        pc.button("Select File"),
                        pc.text("Drag and drop files here or click to select files"),
                        border="1px dotted black",
                        on_mouse_out=lambda: State.handle_upload(pc.upload_files())
                        #padding="20em",
                    ),
                )
            ),
            pc.button("Save", on_click=State.add_product),

            #box_shadow="lg",
            #bg="#F7FAFC ",
            padding="1em",
            border="1px solid #ddd",
        ),
        padding_top="3em",
    )


# Add state and page to the app.
app = pc.App(state=State)
app.add_page(index)
app.add_page(product_list_page, "/product/list")
app.add_page(product_update_page, "/product/update")
app.compile()

Get warning log and miss running progress bar in sales example with pynecone==0.1.28

Get warning log in sales example with pynecone==0.1.28
Warning message and find out the frontend appears to miss the light. it doesn't have some moving light in new version after 0.1.24.
The light is from the following code. It is between the heading text and textarea.

      pc.cond(
          State.gen_response,
          pc.progress(is_indeterminate=True, color="blue", width="100%"),
          pc.progress(value=0, width="100%"),
      ),

And the warning message is the following

Warning: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
    at textarea
    at /Users/milochen/git/py-webapp/sales/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:51:25
    at /Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/textarea/dist/chakra-ui-textarea.cjs.dev.js:70:23
    at div
    at /Users/milochen/git/py-webapp/sales/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:51:25
    at /Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/layout/dist/chakra-ui-layout.cjs.dev.js:910:24
    at VStack
    at div
    at /Users/milochen/git/py-webapp/sales/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:51:25
    at /Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/layout/dist/chakra-ui-layout.cjs.dev.js:910:24
    at VStack
    at div
    at /Users/milochen/git/py-webapp/sales/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:51:25
    at Component (webpack-internal:///./pages/index.js:38:88)
    at EnvironmentProvider (/Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/react-env/dist/chakra-ui-react-env.cjs.dev.js:120:24)
    at ColorModeProvider (/Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/color-mode/dist/chakra-ui-color-mode.cjs.dev.js:228:21)
    at ThemeProvider (/Users/milochen/git/py-webapp/sales/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:106:21)
    at ThemeProvider (/Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/system/dist/chakra-ui-system.cjs.dev.js:57:27)
    at /Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/hooks/dist/chakra-ui-hooks.cjs.dev.js:265:23
    at /Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/hooks/dist/chakra-ui-hooks.cjs.dev.js:265:23
    at ChakraProvider (/Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/provider/dist/chakra-ui-provider.cjs.dev.js:40:24)
    at MyApp (webpack-internal:///./pages/_app.js:23:18)
    at StyleRegistry (/Users/milochen/git/py-webapp/sales/.web/node_modules/styled-jsx/dist/index/index.js:448:36)
    at AppContainer (/Users/milochen/git/py-webapp/sales/.web/node_modules/next/dist/server/render.js:298:29)
    at AppContainerWithIsomorphicFiberStructure (/Users/milochen/git/py-webapp/sales/.web/node_modules/next/dist/server/render.js:327:57)
    at div
    at Body (/Users/milochen/git/py-webapp/sales/.web/node_modules/next/dist/server/render.js:614:21)
Warning: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
    at textarea
    at /Users/milochen/git/py-webapp/sales/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:51:25
    at /Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/textarea/dist/chakra-ui-textarea.cjs.dev.js:70:23
    at div
    at /Users/milochen/git/py-webapp/sales/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:51:25
    at /Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/layout/dist/chakra-ui-layout.cjs.dev.js:910:24
    at VStack
    at div
    at /Users/milochen/git/py-webapp/sales/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:51:25
    at /Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/layout/dist/chakra-ui-layout.cjs.dev.js:910:24
    at VStack
    at div
    at /Users/milochen/git/py-webapp/sales/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:51:25
    at Component (webpack-internal:///./pages/index.js:38:88)
    at EnvironmentProvider (/Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/react-env/dist/chakra-ui-react-env.cjs.dev.js:120:24)
    at ColorModeProvider (/Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/color-mode/dist/chakra-ui-color-mode.cjs.dev.js:228:21)
    at ThemeProvider (/Users/milochen/git/py-webapp/sales/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:106:21)
    at ThemeProvider (/Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/system/dist/chakra-ui-system.cjs.dev.js:57:27)
    at /Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/hooks/dist/chakra-ui-hooks.cjs.dev.js:265:23
    at /Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/hooks/dist/chakra-ui-hooks.cjs.dev.js:265:23
    at ChakraProvider (/Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/provider/dist/chakra-ui-provider.cjs.dev.js:40:24)
    at MyApp (webpack-internal:///./pages/_app.js:23:18)
    at StyleRegistry (/Users/milochen/git/py-webapp/sales/.web/node_modules/styled-jsx/dist/index/index.js:448:36)
    at AppContainer (/Users/milochen/git/py-webapp/sales/.web/node_modules/next/dist/server/render.js:298:29)
    at AppContainerWithIsomorphicFiberStructure (/Users/milochen/git/py-webapp/sales/.web/node_modules/next/dist/server/render.js:327:57)
    at div
    at Body (/Users/milochen/git/py-webapp/sales/.web/node_modules/next/dist/server/render.js:614:21)

The following picture is the working GUI but not work on its center line.

salse example: progress bar doesn't work

The progress bar doesn't work when the user clicks the button to generate an email.

The following picture is the working GUI but not work on its center line.

Mac OS X pynecone==0.1.27 /bin/bash: next: command not found

Before, My development environment is running well with pyhteonce 0.1.24
Today I try to upgrade pynecone into 0.1.27 for testing every examples on pynecone-examples.

pynecone==0.1.24
I can run example from this project.

In the next released on the PiPy
repynecone==0.1.27

I use the same node environment to test on my computer.
pynecone==0.1.24 is working but not pynecone==0.1.27

My node version : v16.10.0
My testing way is to use the same nodejs environment to test pc 0.1.24 and pc 0.1.27.

There is the following error on pynecone==0.1.27

───────────────────────────────────────────────────── Installing frontend packages ─────────────────────────────────────────────────────
bun install v0.5.5 (242dcea2)
───────────────────────────────────────────────────────────── App Running ──────────────────────────────────────────────────────────────
$ next dev
/bin/bash: next: command not found
error: script "dev" exited with code 127

nba example cannot run on iOS safari for pc 0.1.28

nba example cannot run on iOS Safari for pc 0.1.28.
On my Mac OS X
Chrome browser and safari is okay for that.

chatroom is not working well after pynecone 0.1.24 -> 0.1.27

The chatroom is working well in the following condition

pynecone==0.1.24
bun==5.9
node==12.22.12

If we change to use pynecone==0.1.27, then it cannot work.
The following is the condition.

pynecone==0.1.24
bun==5.9
node==12.22.12

fragment example: UI layout strange (0.1.32)

The same example but with a different version
0.1.31

0.1.32

Request for an example using lightweight-charts library

Hi, thanks for all of these works. I am a big fan of Pynecone framework.

I am using Pynecone for building chart web-app that uses lightweight-charts as a charting framework, which is built by TradingView. I am quite new to react so after following the guide in docs about wrapping react I was not able to launch any chart from the library. It would be really helpful to have any example of using lightweight-charts with datasets.

I have tried this but not working (it says SyntaxError: Cannot use import statement outside a module):

class TradingView(pc.Component):
    library = "lightweight-charts"
    tag = "ColorType"

Thanks.

quiz example: Question 3 read wrong input (0.1.32)

My Testing Environment
        OS Darwin 22.4.0
        Pynecone 0.1.32
        Python 3.11.3
        Node v16.8.0
        Bun 0.5.9

This bug may come from old version code. but not only this version

Don't check any box and get the following result after submit.

The output data in the field your answer is false, false, false, false, false.
But the expected data in the field of your answer is false, true, true, true, true.

Syntax error in home.js in the GPT example

Upon compiling the /home route in the GPT example, I am getting

error - ./pages/home.js
Error: 
  x Expected ident
    ,----
 82 | <DataTableGrid columns={state.["Question", "Answer"]}
    :                               ^
    `----

Caused by:
    0: failed to process input file
    1: Syntax Error

Manually removing the state. prefix to the columns argument seems to yield valid syntax.

I am using Pynecone 0.1.20 with Node.js 18.15.0 on a MacBook Pro M1 Pro.

pc run --backend-port is not work(0.1.32)

We can use the clock example to test

pc run --backend-port=3088

The frontend's code is still connect the to the backend port=8000

Create requirements.txt for all apps

• Some apps are missing the requirements.txt
• Include pynecone-io in the file, plus additional app-specific requirements

Create chat app example

We should have a Chatgpt UI example

Twitter example: the both list Follower & Following are incorrect.

Bug Description

1. Create Alice in window A. Create Bob in window B
2. Let them Add Friend to each other
3. Then you can see the wrong following list and follower list in both windows

The key point is that the following list and follower list are wrong

1. Running information of my environment by my tool

I use the following one-line to test each example

pip install -r requirements.txt && rm -f pynecone.db && rm -rf .web && for i in $(find ./ | grep __pycache__$); do rm -rf $i; done && echo -e "\033[1;92mMy Testing Environment\033[0m" && echo -e "\t"OS $(uname) $(uname -r) && echo -e "\t"Pynecone $(pc version) && echo -e "\t"$(python --version) && echo -e "\t"Node $(node --version) && echo -e "\t"Bun $(~/.bun/bin/bun --version) && pc init && pc run --loglevel=debug

I you want to understand what the above has done, you can refer to this
simple document to understand why I do that in the testing.

Environment Information

Through the above one-line command, we can get information about my testing environment.

My Testing Environment
        OS Darwin 22.4.0
        Pynecone 0.1.29
        Python 3.11.3
        Node v16.6.0
        Bun 0.5.9

2. Reproduce the bug

The following detailed steps show how to reproduce the bug.

Window A: SignUp the new account: Alice

Window B: SignUp the new account: Bob

Window A: Type "Bob" in "Add Friend" input field
Window A: Click '+' button in right of Bob

Window B: Type "Alice" in "Add Friend" input field
Window B: Click '+' button in right of Alice

Widnows A: Refresh the window A by using the browser

Widnows B: Refresh the window B by using the browser

[The following picture is what we can see now]

Window A: Sign out Alice

Window B: Sign out Bob

Window A: Sign in Alice

Window B: Sign in Bob

Window A: click Tweet button

[The following picture is what we can see now]

Window B: click Tweet button

[The following picture is what we can see now]

Window A: Type "I'm Alice" and then click 'Tweet' button

Window B: Type "This is Bob" and then click 'Tweet' button

[The following picture is what we can see now]

Window A: Click 'Tweet' button and click 'X' in the dialog

[The following picture is what we can see now]

Bug Summary

The follower list and the following list show incorrect information.
We try to use different ways to refresh the page by the browser by making some actions in the UI.
But the follower list and following list still show incorrect information.

twitter is not working well after pynecone 0.1.24 -> 0.1.27

The twitter example is working well in the following condition.

pynecone==0.1.24
bun==5.9
node==20.0.0

After using 0.1.27

pynecone==0.1.27
bun==5.9
node==20.0.0

When we type in the search field,
We have the following error from the log.

Traceback (most recent call last):
  File "/Users/milochen/anaconda3/envs/pynecone-examples/lib/python3.11/site-packages/pynecone/state.py", line 655, in _process_event
    events = fn(**payload)
             ^^^^^^^^^^^^^
  File "/Users/milochen/git/py-webapp/twitter/twitter/home.py", line 51, in set_search
    return self.get_tweets()
           ^^^^^^^^^^^^^^^^^
TypeError: HomeState.get_tweets() missing 1 required positional argument: 'self'

And the page is like

If you click Tweet button, it also has the bug too.
And it debug message is the following

Traceback (most recent call last):
  File "/Users/milochen/anaconda3/envs/pynecone-examples/lib/python3.11/site-packages/pynecone/state.py", line 655, in _process_event
    events = fn(**payload)
             ^^^^^^^^^^^^^
  File "/Users/milochen/git/py-webapp/twitter/twitter/home.py", line 20, in toggle_tweet
    return self.get_tweets()
           ^^^^^^^^^^^^^^^^^
TypeError: HomeState.get_tweets() missing 1 required positional argument: 'self'

Bad API token for DALL-E example app

Currently getting the following error for the DALL-E app.

Clock meridiem is incorrect on some timezones

The meridiem is calculated in UTC time rather than the timezone. At 6pm pacific:

>>> datetime.datetime.now(tz=datetime.timezone.utc).hour
2
>>> datetime.datetime.now().hour
18

sales example: get warning log

When call pc run , there is the following issue
0.1.29 and 0.1.28 both have this issue.

Warning: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
    at textarea
    at /Users/milochen/git/py-webapp/sales/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:51:25
    at /Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/textarea/dist/chakra-ui-textarea.cjs.dev.js:70:23
    at div
    at /Users/milochen/git/py-webapp/sales/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:51:25
    at /Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/layout/dist/chakra-ui-layout.cjs.dev.js:910:24
    at VStack
    at div
    at /Users/milochen/git/py-webapp/sales/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:51:25
    at /Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/layout/dist/chakra-ui-layout.cjs.dev.js:910:24
    at VStack
    at div
    at /Users/milochen/git/py-webapp/sales/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:51:25
    at Component (webpack-internal:///./pages/index.js:38:88)
    at EnvironmentProvider (/Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/react-env/dist/chakra-ui-react-env.cjs.dev.js:120:24)
    at ColorModeProvider (/Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/color-mode/dist/chakra-ui-color-mode.cjs.dev.js:228:21)
    at ThemeProvider (/Users/milochen/git/py-webapp/sales/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:106:21)
    at ThemeProvider (/Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/system/dist/chakra-ui-system.cjs.dev.js:57:27)
    at /Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/hooks/dist/chakra-ui-hooks.cjs.dev.js:265:23
    at /Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/hooks/dist/chakra-ui-hooks.cjs.dev.js:265:23
    at ChakraProvider (/Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/provider/dist/chakra-ui-provider.cjs.dev.js:40:24)
    at MyApp (webpack-internal:///./pages/_app.js:23:18)
    at StyleRegistry (/Users/milochen/git/py-webapp/sales/.web/node_modules/styled-jsx/dist/index/index.js:448:36)
    at AppContainer (/Users/milochen/git/py-webapp/sales/.web/node_modules/next/dist/server/render.js:298:29)
    at AppContainerWithIsomorphicFiberStructure (/Users/milochen/git/py-webapp/sales/.web/node_modules/next/dist/server/render.js:327:57)
    at div
    at Body (/Users/milochen/git/py-webapp/sales/.web/node_modules/next/dist/server/render.js:614:21)
Warning: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
    at textarea
    at /Users/milochen/git/py-webapp/sales/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:51:25
    at /Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/textarea/dist/chakra-ui-textarea.cjs.dev.js:70:23
    at div
    at /Users/milochen/git/py-webapp/sales/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:51:25
    at /Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/layout/dist/chakra-ui-layout.cjs.dev.js:910:24
    at VStack
    at div
    at /Users/milochen/git/py-webapp/sales/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:51:25
    at /Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/layout/dist/chakra-ui-layout.cjs.dev.js:910:24
    at VStack
    at div
    at /Users/milochen/git/py-webapp/sales/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:51:25
    at Component (webpack-internal:///./pages/index.js:38:88)
    at EnvironmentProvider (/Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/react-env/dist/chakra-ui-react-env.cjs.dev.js:120:24)
    at ColorModeProvider (/Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/color-mode/dist/chakra-ui-color-mode.cjs.dev.js:228:21)
    at ThemeProvider (/Users/milochen/git/py-webapp/sales/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:106:21)
    at ThemeProvider (/Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/system/dist/chakra-ui-system.cjs.dev.js:57:27)
    at /Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/hooks/dist/chakra-ui-hooks.cjs.dev.js:265:23
    at /Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/hooks/dist/chakra-ui-hooks.cjs.dev.js:265:23
    at ChakraProvider (/Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/provider/dist/chakra-ui-provider.cjs.dev.js:40:24)
    at MyApp (webpack-internal:///./pages/_app.js:23:18)
    at StyleRegistry (/Users/milochen/git/py-webapp/sales/.web/node_modules/styled-jsx/dist/index/index.js:448:36)
    at AppContainer (/Users/milochen/git/py-webapp/sales/.web/node_modules/next/dist/server/render.js:298:29)
    at AppContainerWithIsomorphicFiberStructure (/Users/milochen/git/py-webapp/sales/.web/node_modules/next/dist/server/render.js:327:57)
    at div
    at Body (/Users/milochen/git/py-webapp/sales/.web/node_modules/next/dist/server/render.js:614:21)

traversal example: pc.select has layout issue in the hstack (0.1.32)

0.1.31

0.1.32

clock project ModuleNotFoundError: No module named 'pytz'

pytz package seems to be missing from the requirements.txt

gpt example: show error sometimes when change page

My Testing Environment
        OS Darwin 22.4.0
        Pynecone 0.1.30
        Python 3.11.3
        Node v16.8.0
        Bun 0.5.9

When user change page, it will show the error sometimes.
There is no way to reproduce this bug. But if we test it more time, it will show up sometimes.

Need tests for examples

As noted in reflex-dev/reflex#856 (comment), we should consider adding tests for the example projects.

At the very least, we should be able to pc init and pc export every project without errors.

Down the road it would be amazing to have a pytest-pynecone plugin that would help developers test their full stack apps end-to-end.

Add example using pc.upload

nba app not responsive

The dropdowns and sliders on the live app https://nba.pynecone.app/ don't seem to be doing anything.