Form Designer Example (#165)

form-designer/.gitignore

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

form-designer/README.md

@@ -0,0 +1,45 @@
+# form-designer
+
+This is the Form Designer sample app for Reflex.
+
+It demonstrates how to make dynamic forms, take responses from end users, and display
+responses to the owner of the form.
+
+## Usage
+
+To get started, login to the app. If you have not already registered, then register a new
+account with username and password.
+
+The first user created on an instance will automatically be the admin user and has access
+to view and edit forms created by all other users.
+
+### Create a Form
+
+Click "Create or Edit Forms" to enter the form designer.
+
+Either select an existing form from the drop down, or create a new form by
+entering a name in the "Form Name" box. Press enter, or wait a second for the
+form to be created.
+
+When a form is selected, the interface will show the current fields associated
+with the form. Click the prompt of an existing field to edit it. Click the "X"
+button to delete the field.
+
+Below the existing fields, click "Add Field" to add a new field to the form.
+
+The Edit Field dialog allows you to enter a name for the field and a longer
+prompt with instructions for how to answer the field. You can also select the
+type of field, and add or remove options for enumerated types, like select,
+radio, or checkbox.
+
+### Fill out a Form
+
+Click the "Preview" button next to the form name box to see the form as an end
+user would see it.
+
+You can share the link to this preview to allow other users to answer the form.
+
+### View Responses
+
+Click the "Responses" button next to the form name box to see all responses that
+have been collected. Responses can be removed by clicking the red "X" button.

form-designer/alembic.ini

@@ -0,0 +1,116 @@
+# A generic, single database configuration.
+
+[alembic]
+# path to migration scripts
+script_location = alembic
+
+# template used to generate migration file names; The default value is %%(rev)s_%%(slug)s
+# Uncomment the line below if you want the files to be prepended with date and time
+# see https://alembic.sqlalchemy.org/en/latest/tutorial.html#editing-the-ini-file
+# for all available tokens
+# file_template = %%(year)d_%%(month).2d_%%(day).2d_%%(hour).2d%%(minute).2d-%%(rev)s_%%(slug)s
+
+# sys.path path, will be prepended to sys.path if present.
+# defaults to the current working directory.
+prepend_sys_path = .
+
+# timezone to use when rendering the date within the migration file
+# as well as the filename.
+# If specified, requires the python>=3.9 or backports.zoneinfo library.
+# Any required deps can installed by adding `alembic[tz]` to the pip requirements
+# string value is passed to ZoneInfo()
+# leave blank for localtime
+# timezone =
+
+# max length of characters to apply to the
+# "slug" field
+# truncate_slug_length = 40
+
+# set to 'true' to run the environment during
+# the 'revision' command, regardless of autogenerate
+# revision_environment = false
+
+# set to 'true' to allow .pyc and .pyo files without
+# a source .py file to be detected as revisions in the
+# versions/ directory
+# sourceless = false
+
+# version location specification; This defaults
+# to alembic/versions. When using multiple version
+# directories, initial revisions must be specified with --version-path.
+# The path separator used here should be the separator specified by "version_path_separator" below.
+# version_locations = %(here)s/bar:%(here)s/bat:alembic/versions
+
+# version path separator; As mentioned above, this is the character used to split
+# version_locations. The default within new alembic.ini files is "os", which uses os.pathsep.
+# If this key is omitted entirely, it falls back to the legacy behavior of splitting on spaces and/or commas.
+# Valid values for version_path_separator are:
+#
+# version_path_separator = :
+# version_path_separator = ;
+# version_path_separator = space
+version_path_separator = os # Use os.pathsep. Default configuration used for new projects.
+
+# set to 'true' to search source files recursively
+# in each "version_locations" directory
+# new in Alembic version 1.10
+# recursive_version_locations = false
+
+# the output encoding used when revision files
+# are written from script.py.mako
+# output_encoding = utf-8
+
+sqlalchemy.url = driver:https://user:pass@localhost/dbname
+
+
+[post_write_hooks]
+# post_write_hooks defines scripts or Python functions that are run
+# on newly generated revision scripts. See the documentation for further
+# detail and examples
+
+# format using "black" - use the console_scripts runner, against the "black" entrypoint
+# hooks = black
+# black.type = console_scripts
+# black.entrypoint = black
+# black.options = -l 79 REVISION_SCRIPT_FILENAME
+
+# lint with attempts to fix using "ruff" - use the exec runner, execute a binary
+# hooks = ruff
+# ruff.type = exec
+# ruff.executable = %(here)s/.venv/bin/ruff
+# ruff.options = --fix REVISION_SCRIPT_FILENAME
+
+# Logging configuration
+[loggers]
+keys = root,sqlalchemy,alembic
+
+[handlers]
+keys = console
+
+[formatters]
+keys = generic
+
+[logger_root]
+level = WARN
+handlers = console
+qualname =
+
+[logger_sqlalchemy]
+level = WARN
+handlers =
+qualname = sqlalchemy.engine
+
+[logger_alembic]
+level = INFO
+handlers =
+qualname = alembic
+
+[handler_console]
+class = StreamHandler
+args = (sys.stderr,)
+level = NOTSET
+formatter = generic
+
+[formatter_generic]
+format = %(levelname)-5.5s [%(name)s] %(message)s
+datefmt = %H:%M:%S

form-designer/alembic/README

@@ -0,0 +1 @@
+Generic single-database configuration.

form-designer/alembic/env.py

@@ -0,0 +1,78 @@
+from logging.config import fileConfig
+
+from sqlalchemy import engine_from_config
+from sqlalchemy import pool
+
+from alembic import context
+
+# this is the Alembic Config object, which provides
+# access to the values within the .ini file in use.
+config = context.config
+
+# Interpret the config file for Python logging.
+# This line sets up loggers basically.
+if config.config_file_name is not None:
+ fileConfig(config.config_file_name)
+
+# add your model's MetaData object here
+# for 'autogenerate' support
+# from myapp import mymodel
+# target_metadata = mymodel.Base.metadata
+target_metadata = None
+
+# other values from the config, defined by the needs of env.py,
+# can be acquired:
+# my_important_option = config.get_main_option("my_important_option")
+# ... etc.
+
+
+def run_migrations_offline() -> None:
+ """Run migrations in 'offline' mode.
+
+ This configures the context with just a URL
+ and not an Engine, though an Engine is acceptable
+ here as well. By skipping the Engine creation
+ we don't even need a DBAPI to be available.
+
+ Calls to context.execute() here emit the given string to the
+ script output.
+
+ """
+ url = config.get_main_option("sqlalchemy.url")
+ context.configure(
+ url=url,
+ target_metadata=target_metadata,
+ literal_binds=True,
+ dialect_opts={"paramstyle": "named"},
+ )
+
+ with context.begin_transaction():
+ context.run_migrations()
+
+
+def run_migrations_online() -> None:
+ """Run migrations in 'online' mode.
+
+ In this scenario we need to create an Engine
+ and associate a connection with the context.
+
+ """
+ connectable = engine_from_config(
+ config.get_section(config.config_ini_section, {}),
+ prefix="sqlalchemy.",
+ poolclass=pool.NullPool,
+ )
+
+ with connectable.connect() as connection:
+ context.configure(
+ connection=connection, target_metadata=target_metadata
+ )
+
+ with context.begin_transaction():
+ context.run_migrations()
+
+
+if context.is_offline_mode():
+ run_migrations_offline()
+else:
+ run_migrations_online()

form-designer/alembic/script.py.mako

@@ -0,0 +1,26 @@
+"""${message}
+
+Revision ID: ${up_revision}
+Revises: ${down_revision | comma,n}
+Create Date: ${create_date}
+
+"""
+from typing import Sequence, Union
+
+from alembic import op
+import sqlalchemy as sa
+${imports if imports else ""}
+
+# revision identifiers, used by Alembic.
+revision: str = ${repr(up_revision)}
+down_revision: Union[str, None] = ${repr(down_revision)}
+branch_labels: Union[str, Sequence[str], None] = ${repr(branch_labels)}
+depends_on: Union[str, Sequence[str], None] = ${repr(depends_on)}
+
+
+def upgrade() -> None:
+ ${upgrades if upgrades else "pass"}
+
+
+def downgrade() -> None:
+ ${downgrades if downgrades else "pass"}

form-designer/alembic/versions/481d2a7a6d6f_.py

@@ -0,0 +1,97 @@
+"""empty message
+
+Revision ID: 481d2a7a6d6f
+Revises: 
+Create Date: 2024-04-11 05:26:22.888723
+
+"""
+from typing import Sequence, Union
+
+from alembic import op
+import sqlalchemy as sa
+import sqlmodel
+
+# revision identifiers, used by Alembic.
+revision: str = '481d2a7a6d6f'
+down_revision: Union[str, None] = None
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def upgrade() -> None:
+ # ### commands auto generated by Alembic - please adjust! ###
+ op.create_table('localauthsession',
+ sa.Column('id', sa.Integer(), nullable=False),
+ sa.Column('user_id', sa.Integer(), nullable=False),
+ sa.Column('session_id', sqlmodel.sql.sqltypes.AutoString(), nullable=False),
+ sa.Column('expiration', sa.DateTime(timezone=True), server_default=sa.text('(CURRENT_TIMESTAMP)'), nullable=False),
+ sa.PrimaryKeyConstraint('id')
+ )
+ op.create_index(op.f('ix_localauthsession_session_id'), 'localauthsession', ['session_id'], unique=True)
+ op.create_index(op.f('ix_localauthsession_user_id'), 'localauthsession', ['user_id'], unique=False)
+ op.create_table('localuser',
+ sa.Column('id', sa.Integer(), nullable=False),
+ sa.Column('username', sqlmodel.sql.sqltypes.AutoString(), nullable=False),
+ sa.Column('password_hash', sa.LargeBinary(), nullable=False),
+ sa.Column('enabled', sa.Boolean(), nullable=False),
+ sa.PrimaryKeyConstraint('id')
+ )
+ op.create_index(op.f('ix_localuser_username'), 'localuser', ['username'], unique=True)
+ op.create_table('form',
+ sa.Column('id', sa.Integer(), nullable=False),
+ sa.Column('name', sqlmodel.sql.sqltypes.AutoString(), nullable=False),
+ sa.Column('owner_id', sa.Integer(), nullable=False),
+ sa.ForeignKeyConstraint(['owner_id'], ['localuser.id'], ),
+ sa.PrimaryKeyConstraint('id')
+ )
+ op.create_table('field',
+ sa.Column('id', sa.Integer(), nullable=False),
+ sa.Column('name', sqlmodel.sql.sqltypes.AutoString(), nullable=False),
+ sa.Column('type_', sa.Enum('text', 'number', 'email', 'password', 'checkbox', 'radio', 'select', 'textarea', name='fieldtype'), nullable=False),
+ sa.Column('required', sa.Boolean(), nullable=False),
+ sa.Column('prompt', sqlmodel.sql.sqltypes.AutoString(), nullable=False),
+ sa.Column('form_id', sa.Integer(), nullable=False),
+ sa.ForeignKeyConstraint(['form_id'], ['form.id'], ),
+ sa.PrimaryKeyConstraint('id')
+ )
+ op.create_table('response',
+ sa.Column('id', sa.Integer(), nullable=False),
+ sa.Column('client_token', sqlmodel.sql.sqltypes.AutoString(), nullable=False),
+ sa.Column('form_id', sa.Integer(), nullable=False),
+ sa.Column('ts', sa.DateTime(timezone=True), server_default=sa.text('(CURRENT_TIMESTAMP)'), nullable=True),
+ sa.ForeignKeyConstraint(['form_id'], ['form.id'], ),
+ sa.PrimaryKeyConstraint('id')
+ )
+ op.create_table('fieldvalue',
+ sa.Column('id', sa.Integer(), nullable=False),
+ sa.Column('field_id', sa.Integer(), nullable=False),
+ sa.Column('response_id', sa.Integer(), nullable=False),
+ sa.Column('value', sqlmodel.sql.sqltypes.AutoString(), nullable=False),
+ sa.ForeignKeyConstraint(['field_id'], ['field.id'], ),
+ sa.ForeignKeyConstraint(['response_id'], ['response.id'], ),
+ sa.PrimaryKeyConstraint('id')
+ )
+ op.create_table('option',
+ sa.Column('id', sa.Integer(), nullable=False),
+ sa.Column('label', sqlmodel.sql.sqltypes.AutoString(), nullable=False),
+ sa.Column('value', sqlmodel.sql.sqltypes.AutoString(), nullable=False),
+ sa.Column('field_id', sa.Integer(), nullable=False),
+ sa.ForeignKeyConstraint(['field_id'], ['field.id'], ),
+ sa.PrimaryKeyConstraint('id')
+ )
+ # ### end Alembic commands ###
+
+
+def downgrade() -> None:
+ # ### commands auto generated by Alembic - please adjust! ###
+ op.drop_table('option')
+ op.drop_table('fieldvalue')
+ op.drop_table('response')
+ op.drop_table('field')
+ op.drop_table('form')
+ op.drop_index(op.f('ix_localuser_username'), table_name='localuser')
+ op.drop_table('localuser')
+ op.drop_index(op.f('ix_localauthsession_user_id'), table_name='localauthsession')
+ op.drop_index(op.f('ix_localauthsession_session_id'), table_name='localauthsession')
+ op.drop_table('localauthsession')
+ # ### end Alembic commands ###

form-designer/form_designer/components/__init__.py

@@ -0,0 +1,19 @@
+from .field_editor import FieldEditorState, field_editor_modal, field_edit_title
+from .field_view import field_prompt, field_view
+from .form_editor import FormEditorState, form_editor, form_edit_title
+from .form_select import form_select
+from .navbar import navbar
+
+
+__all__ = [
+ "FieldEditorState",
+ "FormEditorState",
+ "field_edit_title",
+ "field_editor_modal",
+ "field_prompt",
+ "field_view",
+ "form_edit_title",
+ "form_editor",
+ "form_select",
+ "navbar",
+]