Skip to content

Commit 1af6fad

Browse files
carlosabadiacarlosabadia
committed
Update demo form
1 parent 5e5d1cf commit 1af6fad

File tree

6 files changed

+156
-194
lines changed

6 files changed

+156
-194
lines changed

‎.pre-commit-config.yaml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ fail_fast: true
22

33
repos:
44
- repo: https://github.com/astral-sh/ruff-pre-commit
5-
rev: v0.14.10
5+
rev: v0.14.11
66
hooks:
77
- id: ruff-check
88
files: ^reflex_ui/
@@ -28,7 +28,7 @@ repos:
2828
# entry: python3 scripts/make_pyi.py
2929

3030
- repo: https://github.com/RobertCraigie/pyright-python
31-
rev: v1.1.407
31+
rev: v1.1.408
3232
hooks:
3333
- id: pyright
3434
files: ^reflex_ui/

‎demo/demo/demo.py‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
import reflex as rx
44

55
import reflex_ui as ui
6-
from reflex_ui.blocks.demo_form import demo_form, demo_form_dialog
6+
from reflex_ui.blocks.demo_form import demo_form_dialog
7+
from reflex_ui.blocks.telemetry.default import get_default_telemetry_script
78

89

910
class State(rx.State):
@@ -16,7 +17,7 @@ def set_seed(self, seed: int):
1617

1718
def index() -> rx.Component:
1819
return rx.el.div(
19-
demo_form(),
20+
demo_form_dialog(ui.button("Test")),
2021
)
2122

2223

@@ -40,9 +41,7 @@ def index() -> rx.Component:
4041
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400..700&display=swap",
4142
rel="stylesheet",
4243
),
43-
rx.el.script(
44-
"""!function(e,t){var _=0;e.__default__=e.__default__||{},e.__default__.form_id=268792,e.__default__.team_id=654,e.__default__.listenToIds=[],function e(){var o=t.createElement("script");o.async=!0,o.src="https://import-cdn.default.com",o.onload=function(){!0,console.info("[Default.com] Powered by Default.com")},o.onerror=function(){++_<=3&&setTimeout(e,1e3*_)},t.head.appendChild(o)}()}(window,document);"""
45-
),
44+
get_default_telemetry_script(),
4645
],
4746
)
4847
app.add_page(index)

‎reflex_ui/blocks/demo_form.py‎

Lines changed: 22 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,11 @@
55
based on company size.
66
"""
77

8-
from typing import Any
9-
108
import reflex as rx
119
from reflex.experimental.client_state import ClientStateVar
1210

1311
import reflex_ui as ui
12+
from reflex_ui.components.base.button import BUTTON_VARIANTS, DEFAULT_CLASS_NAME
1413

1514
demo_form_error_message = ClientStateVar.create("demo_form_error_message", "")
1615
demo_form_open_cs = ClientStateVar.create("demo_form_open", False)
@@ -60,70 +59,7 @@ def check_if_company_email(email: str) -> bool:
6059

6160
def check_if_default_value_is_selected(value: str) -> bool:
6261
"""Check if the default value is selected."""
63-
return value.strip() != "Select"
64-
65-
66-
class DemoFormStateUI(rx.State):
67-
"""State for handling demo form submissions and validation."""
68-
69-
@rx.event
70-
def on_submit(self, form_data: dict[str, Any]):
71-
"""Handle form submission with validation logic.
72-
73-
Validates company email and required fields. If successful, clears errors.
74-
The actual submission is handled by the external script.
75-
76-
Args:
77-
form_data: Form data dictionary containing user inputs
78-
"""
79-
if not check_if_company_email(form_data.get("email", "")):
80-
return [
81-
rx.set_focus("email"),
82-
rx.toast.error(
83-
"Please enter a valid company email - gmails, aol, me, etc are not allowed",
84-
position="top-center",
85-
),
86-
demo_form_error_message.push(
87-
"Please enter a valid company email - gmails, aol, me, etc are not allowed"
88-
),
89-
]
90-
91-
# Check if the has selected a number of employees
92-
if not check_if_default_value_is_selected(
93-
form_data.get("number_of_employees", "")
94-
):
95-
return [
96-
rx.toast.error(
97-
"Please select a number of employees",
98-
position="top-center",
99-
),
100-
demo_form_error_message.push("Please select a number of employees"),
101-
]
102-
103-
# Check if the has entered a referral source
104-
if not check_if_default_value_is_selected(
105-
form_data.get("how_did_you_hear_about_us", "")
106-
):
107-
return [
108-
rx.toast.error(
109-
"Please select how did you hear about us",
110-
position="top-center",
111-
),
112-
demo_form_error_message.push("Please select how did you hear about us"),
113-
]
114-
115-
# Check if the has entered a technical level
116-
if not check_if_default_value_is_selected(form_data.get("technical_level", "")):
117-
return [
118-
rx.set_focus("technical_level"),
119-
rx.toast.error(
120-
"Please select a technical level",
121-
position="top-center",
122-
),
123-
demo_form_error_message.push("Please select a technical level"),
124-
]
125-
126-
return None
62+
return bool(value.strip())
12763

12864

12965
def input_field(
@@ -211,12 +147,24 @@ def select_field(
211147
label + (" *" if required else ""),
212148
class_name="block text-xs lg:text-sm font-medium text-secondary-12 truncate min-w-0",
213149
),
214-
ui.select(
215-
default_value="Select",
216-
name=name,
217-
items=items,
218-
required=required,
219-
class_name="w-full",
150+
rx.el.div(
151+
rx.el.select(
152+
rx.el.option("Select", value=""),
153+
*[rx.el.option(item, value=item) for item in items],
154+
default_value="",
155+
name=name,
156+
required=required,
157+
class_name=ui.cn(
158+
"w-full appearance-none pr-9",
159+
DEFAULT_CLASS_NAME,
160+
BUTTON_VARIANTS["variant"]["outline"],
161+
BUTTON_VARIANTS["size"]["md"],
162+
),
163+
),
164+
ui.select_arrow(
165+
class_name="size-4 text-secondary-9 absolute right-2.5 top-1/2 -translate-y-1/2 pointer-events-none"
166+
),
167+
class_name="relative",
220168
),
221169
class_name="flex flex-col gap-1.5 min-w-0",
222170
)
@@ -258,6 +206,7 @@ def demo_form(**props) -> rx.Component:
258206
"Number of employees?",
259207
"number_of_employees",
260208
["1", "2-5", "6-10", "11-50", "51-100", "101-500", "500+"],
209+
required=True,
261210
),
262211
select_field(
263212
"How did you hear about us?",
@@ -270,6 +219,7 @@ def demo_form(**props) -> rx.Component:
270219
"Conference",
271220
"Other",
272221
],
222+
required=True,
273223
),
274224
class_name="grid grid-cols-1 md:grid-cols-2 gap-4",
275225
),
@@ -291,7 +241,6 @@ def demo_form(**props) -> rx.Component:
291241
type="submit",
292242
class_name="w-full",
293243
),
294-
on_submit=DemoFormStateUI.on_submit,
295244
class_name=ui.cn(
296245
"@container flex flex-col lg:gap-6 gap-2 p-6",
297246
props.pop("class_name", ""),

‎reflex_ui/blocks/telemetry/__init__.py‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
from .clearbit import get_clearbit_trackers
44
from .common_room import get_common_room_trackers, identify_common_room_user
5+
from .default import get_default_telemetry_script
56
from .google import get_google_analytics_trackers, gtag_report_conversion
67
from .koala import get_koala_trackers
78
from .posthog import get_posthog_trackers
@@ -11,6 +12,7 @@
1112
__all__ = [
1213
"get_clearbit_trackers",
1314
"get_common_room_trackers",
15+
"get_default_telemetry_script",
1416
"get_google_analytics_trackers",
1517
"get_koala_trackers",
1618
"get_posthog_trackers",

‎reflex_ui/blocks/telemetry/default.py‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
"""Default.com telemetry integration script."""
2+
3+
import reflex as rx
4+
5+
DEFAULT_TELEMETRY_SCRIPT = """
6+
!function(e,t){var _=0;e.__default__=e.__default__||{},e.__default__.form_id=268792,e.__default__.team_id=654,e.__default__.listenToIds=[],function e(){var o=t.createElement("script");o.async=!0,o.src="https://import-cdn.default.com",o.onload=function(){!0},o.onerror=function(){++_<=3&&setTimeout(e,1e3*_)},t.head.appendChild(o)}()}(window,document);
7+
"""
8+
9+
10+
def get_default_telemetry_script() -> rx.Component:
11+
"""Get the Default.com telemetry script."""
12+
return rx.el.script(DEFAULT_TELEMETRY_SCRIPT)

0 commit comments

Comments
 (0)