Merge pull request #1 from TimChild/add-props

Add props to ClerkProvider (plus some other minor changes)

Author: TimChild

.github/workflows/ci.yml

@@ -2,8 +2,9 @@ name: CI
 
 on:
   push:
-    tags:
-      - "v*.*.*"
+    # tags:
+    #   - "v*.*.*"
+    branches: [main]
   pull_request:
     branches: [main]
 

.github/workflows/deploy.yml

@@ -5,6 +5,7 @@ on:
     workflows: ["Publish"]
     types:
       - completed
+    branches: [main]
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}

.github/workflows/publish.yml

@@ -5,6 +5,7 @@ on:
     workflows: ["CI"]
     types:
       - completed
+    branches: [main]
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}

.gitignore

@@ -6,4 +6,4 @@ dist/
 site/
 .states/
 playwright_test_error.png
-.prettierignore
+.idea

README.md

@@ -1,4 +1,4 @@
-![Test Status](https://github.com/TimChild/reflex-clerk-api/actions/workflows/ci.yml/badge.svg?branch=v0.1.14)
+![Test Status](https://github.com/TimChild/reflex-clerk-api/actions/workflows/ci.yml/badge.svg?branch=v0.2.0)
 ![PyPi publish Status](https://github.com/TimChild/reflex-clerk-api/actions/workflows/publish.yml/badge.svg)
 ![Demo Deploy Status](https://github.com/TimChild/reflex-clerk-api/actions/workflows/deploy.yml/badge.svg)
 
@@ -65,3 +65,8 @@ I use [Taskfile](https://taskfile.dev/) (similar to `makefile`) to make common t
 - `task run-docs` -- Run the docs locally
 - `task test` -- Run tests
 - `task bump-patch/minor/major` -- Bump the version (`patch` for a bug fix, `minor` for an added feature).
+
+
+## TODO:
+
+- How should the `condition` and `fallback` props be defined on `Protect`? They are supposed to be `Javascript` and `JSX` respectively, but are just `str` for now... Is `Javascript` `rx.Script`? And `JSX` `rx.Component`?

clerk_api_demo/clerk_api_demo/clerk_api_demo.py

@@ -11,8 +11,11 @@
 from rxconfig import config
 
 # Set up debug logging with a console handler
-logging.basicConfig(level=logging.DEBUG, handlers=[logging.StreamHandler()])
-logging.debug("Logging is set up.")
+logging.basicConfig(level=logging.INFO, handlers=[logging.StreamHandler()])
+# Just a very quick check to see which loggers are actually active in the console
+logging.debug("Logging DEBUG")
+logging.info("Logging INFO")
+logging.warning("Logging WARNING")
 
 
 load_dotenv()
@@ -589,46 +592,56 @@ def user_profile_demo() -> rx.Component:
 
 
 def demo_header() -> rx.Component:
-    return rx.vstack(
-        rx.heading("Demos", size="6"),
-        rx.grid(
-            rx.vstack(
-                rx.text(
-                    "The demos below are using a development Clerk API key, so you can try out everything with fake credentials."
-                ),
-                rx.text(
-                    "To simply log in, you can use the email/password combination."
-                ),
-            ),
-            rx.card(
-                rx.vstack(
-                    rx.data_list.root(
-                        data_list_item(
-                            "username", rx.code("test+clerk_test@gmail.com")
+    demo_intro = rx.vstack(
+        rx.text(
+            "The demos below are using a development Clerk API key, so you can try out everything with fake credentials."
+        ),
+        rx.text("To simply log in, you can use the email/password combination."),
+    )
+    clerk_user_info = rx.box(
+        clerk.clerk_loaded(
+            rx.cond(
+                clerk.ClerkState.is_signed_in,
+                rx.card(
+                    rx.hstack(
+                        rx.data_list.root(
+                            data_list_item(
+                                "Clerk user_id", rx.text(clerk.ClerkState.user_id)
+                            ),
+                            data_list_item("User button", clerk.user_button()),
                         ),
-                        data_list_item("password", rx.code("test-clerk-password")),
                     ),
+                ),
+                rx.text("Sign in to see user info."),
+            )
+        ),
+        clerk.clerk_loading(rx.spinner(size="3")),
+    )
+
+    test_user_and_pass = rx.card(
+        rx.vstack(
+            rx.data_list.root(
+                data_list_item("username", rx.code("test+clerk_test@gmail.com")),
+                data_list_item("password", rx.code("test-clerk-password")),
+            ),
+            rx.hstack(
+                clerk.signed_in(
+                    clerk.sign_out_button(rx.button("Sign out", data_testid="sign_out"))
+                ),
+                clerk.signed_out(
                     rx.hstack(
-                        clerk.signed_in(
-                            clerk.sign_out_button(
-                                rx.button("Sign out", data_testid="sign_out")
-                            )
+                        clerk.sign_in_button(
+                            rx.button("Sign in", data_testid="sign_in")
                         ),
-                        clerk.signed_out(
-                            rx.hstack(
-                                clerk.sign_in_button(
-                                    rx.button("Sign in", data_testid="sign_in")
-                                ),
-                                clerk.sign_up_button(
-                                    rx.button("Sign up", data_testid="sign_up")
-                                ),
-                            ),
+                        clerk.sign_up_button(
+                            rx.button("Sign up", data_testid="sign_up")
                         ),
                     ),
                 ),
             ),
-            columns=rx.breakpoints(initial="1", sm="2"),
         ),
+    )
+    using_demo_instructions = rx.box(
         rx.text(
             "Or if you want test signing up, you can use any email with ",
             rx.code("+clerk_test"),
@@ -650,50 +663,74 @@ def demo_header() -> rx.Component:
         ),
     )
 
+    return rx.vstack(
+        rx.heading("Demos", size="6"),
+        rx.grid(
+            demo_intro,
+            clerk_user_info,
+            test_user_and_pass,
+            using_demo_instructions,
+            columns=rx.breakpoints(initial="1", sm="2"),
+            spacing="4",
+        ),
+    )
+
 
 def index() -> rx.Component:
     clerk.register_on_auth_change_handler(State.do_something_on_log_in_or_out)
 
-    return clerk.clerk_provider(
-        rx.box(
-            rx.vstack(
-                rx.flex(
-                    demo_page_header_and_description(),
-                    getting_started(),
-                    spacing="7",
-                    direction=rx.breakpoints(initial="column", sm="row"),
-                ),
-                # rx.button("Dev reset", on_click=clerk.ClerkState.force_reset),
-                rx.divider(),
-                demo_header(),
-                rx.grid(
-                    current_clerk_state_values(),
-                    clerk_loaded_demo(),
-                    on_load_demo(),
-                    on_auth_change_demo(),
-                    user_info_demo(),
-                    links_to_demo_pages(),
-                    user_profile_demo(),
-                    columns=rx.breakpoints(initial="1", sm="2", md="3", xl="4"),
-                    spacing="4",
-                    align="stretch",
-                ),
-                align="center",
+    # Note: Using `clerk.wrap_app(...)` instead of `clerk.clerk_provider(...)` here.
+    return rx.box(
+        rx.vstack(
+            rx.flex(
+                demo_page_header_and_description(),
+                getting_started(),
                 spacing="7",
+                direction=rx.breakpoints(initial="column", sm="row"),
             ),
-            height="100vh",
-            max_width="100%",
-            overflow_y="auto",
-            padding="2em",
-        ),
-        publishable_key=os.environ["CLERK_PUBLISHABLE_KEY"],
-        register_user_state=True,
-        secret_key=os.environ.get("CLERK_SECRET_KEY"),
+            # rx.button("Dev reset", on_click=clerk.ClerkState.force_reset),
+            rx.divider(),
+            demo_header(),
+            rx.grid(
+                current_clerk_state_values(),
+                clerk_loaded_demo(),
+                on_load_demo(),
+                on_auth_change_demo(),
+                user_info_demo(),
+                links_to_demo_pages(),
+                user_profile_demo(),
+                columns=rx.breakpoints(initial="1", sm="2", md="3", xl="4"),
+                spacing="4",
+                align="stretch",
+            ),
+            align="center",
+            spacing="7",
+        ),
+        height="100vh",
+        max_width="100%",
+        overflow_y="auto",
+        padding="2em",
     )
 
 
 # Add state and page to the app.
 app = rx.App()
+
+# This wraps the entire app (all pages) with the ClerkProvider.
+clerk.wrap_app(
+    app,
+    publishable_key=os.environ["CLERK_PUBLISHABLE_KEY"],
+    secret_key=os.environ["CLERK_SECRET_KEY"],
+    register_user_state=True,
+    # NOTE: Colors customizable via the `Appearance` object. (baseTheme is not yet implemented)
+    # appearance=Appearance(
+    #     variables=Variables(
+    #         color_primary="#111A27",
+    #         color_background="#C2F3FF",
+    #     ),
+    # ),
+)
+
 # NOTE: Use the `clerk.on_load` to ensure that the ClerkState is updated *before* any other on_load events are run.
 #  The `ClerkState` is updated by an event sent from the frontend that is not guaranteed to run before the reflex on_load events.
 app.add_page(

custom_components/reflex_clerk_api/__init__.py

@@ -5,6 +5,7 @@
     clerk_provider,
     on_load,
     register_on_auth_change_handler,
+    wrap_app,
 )
 from .control_components import (
     clerk_loaded,
@@ -45,4 +46,5 @@
     "signed_out",
     "user_button",
     "user_profile",
+    "wrap_app",
 ]