Skip to content

enhance organization components with proper types and additional props #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
PJ-Snap wants to merge 1 commit into
base: main
Choose a base branch
from
Open

enhance organization components with proper types and additional props #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions custom_components/reflex_clerk_api/__init__.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,12 @@
sign_out_button,
sign_up_button,
)
from .organization_components import (
create_organization,
organization_profile,
organization_switcher,
organization_list,
)
Comment on lines +28 to +33
Copy link

Copilot AI Apr 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The new from .organization_components import (...) block is out of import-sort order for this module (ruff/isort is enabled via extend-select = ["I", ...]). To avoid CI/lint failures, move this import to its alphabetically correct position among the local imports (likely before .pages/.unstyled_components).

Copilot uses AI. Check for mistakes.
from .user_components import user_button, user_profile

__all__ = [
Expand All @@ -36,7 +42,11 @@
"clerk_loaded",
"clerk_loading",
"clerk_provider",
"create_organization",
"on_load",
"organization_list",
"organization_profile",
"organization_switcher",
"protect",
"redirect_to_user_profile",
"register_on_auth_change_handler",
Expand Down
183 changes: 106 additions & 77 deletions custom_components/reflex_clerk_api/organization_components.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
from typing import Optional
import reflex as rx

from reflex_clerk_api.base import ClerkBase
from reflex_clerk_api.models import Appearance


class CreateOrganization(ClerkBase):
Expand All @@ -9,24 +10,30 @@ class CreateOrganization(ClerkBase):

This component renders Clerk's <CreateOrganization /> React component,
allowing users to set up new organizations with customizable appearance and routing.

Props:
appearance: Optional object to style your components. Will only affect Clerk components.
path: The path where the component is mounted when routing is set to 'path'.
routing: The routing strategy for your pages. Defaults to 'path' for frameworks
that handle routing, or 'hash' for other SDKs.
after_create_organization_url: The full URL or path to navigate to after creating an organization.
fallback: An optional element to be rendered while the component is mounting.
"""

tag = "CreateOrganization"

# Optional props that CreateOrganization supports
appearance: Optional[str] = None
path: Optional[str] = None
routing: Optional[str] = None
after_create_organization_url: Optional[str] = None
fallback: Optional[str] = None
appearance: Appearance | None = None
"Optional object to style your components. Will only affect Clerk components."

path: str | None = None
"The path where the component is mounted when routing is set to 'path'."

routing: str | None = None
"The routing strategy for your pages. Defaults to 'path' for frameworks that handle routing, or 'hash' for other SDKs."

after_create_organization_url: str | None = None
"The full URL or path to navigate to after creating an organization."

skip_invitation_screen: bool | None = None
"Controls whether to skip the invitation screen when creating an organization."

hide_slug: bool | None = None
"Controls whether the optional slug field in the Organization creation screen is hidden."

fallback: rx.Component | None = None
"An optional element to be rendered while the component is mounting."


class OrganizationProfile(ClerkBase):
Expand All @@ -35,26 +42,27 @@ class OrganizationProfile(ClerkBase):

This component renders Clerk's <OrganizationProfile /> React component,
allowing users to manage organization information, members, billing, and security settings.

Props:
appearance: Optional object to style your components. Will only affect Clerk components.
path: The path where the component is mounted when routing is set to 'path'.
routing: The routing strategy for your pages. Defaults to 'path' for frameworks
that handle routing, or 'hash' for other SDKs.
after_leave_organization_url: The full URL or path to navigate to after leaving an organization.
custom_pages: An array of custom pages to add to the organization profile.
fallback: An optional element to be rendered while the component is mounting.
"""

tag = "OrganizationProfile"

# Optional props that OrganizationProfile supports
appearance: Optional[str] = None
path: Optional[str] = None
routing: Optional[str] = None
after_leave_organization_url: Optional[str] = None
custom_pages: Optional[str] = None
fallback: Optional[str] = None
appearance: Appearance | None = None
"Optional object to style your components. Will only affect Clerk components."

path: str | None = None
"The path where the component is mounted when routing is set to 'path'."

routing: str | None = None
"The routing strategy for your pages. Defaults to 'path' for frameworks that handle routing, or 'hash' for other SDKs."

after_leave_organization_url: str | None = None
"The full URL or path to navigate to after leaving an organization."

custom_pages: list | None = None
"An array of custom pages to add to the organization profile."
Comment on lines +61 to +62
Copy link

Copilot AI Apr 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

custom_pages is typed as list | None, which loses element type information and is inconsistent with the more specific generics used elsewhere in the package (e.g., list[str], dict[str, Any]). Consider typing this as a parameterized list (e.g., list[dict[str, Any]] | None) to preserve type safety and IDE support.

Copilot uses AI. Check for mistakes.

fallback: rx.Component | None = None
"An optional element to be rendered while the component is mounting."


class OrganizationSwitcher(ClerkBase):
Expand All @@ -63,35 +71,48 @@ class OrganizationSwitcher(ClerkBase):

This component renders Clerk's <OrganizationSwitcher /> React component,
providing a dropdown interface for organization switching with customizable appearance.

Props:
appearance: Optional object to style your components. Will only affect Clerk components.
organization_profile_mode: Controls whether selecting the organization opens as a modal or navigates to a page.
organization_profile_url: The full URL or path leading to the organization management interface.
create_organization_mode: Controls whether selecting create organization opens as a modal or navigates to a page.
create_organization_url: The full URL or path leading to the create organization interface.
after_leave_organization_url: The full URL or path to navigate to after leaving an organization.
after_create_organization_url: The full URL or path to navigate to after creating an organization.
after_select_organization_url: The full URL or path to navigate to after selecting an organization.
default_open: Controls whether the OrganizationSwitcher should open by default during the first render.
hide_personal_account: Controls whether the personal account option is hidden in the switcher.
fallback: An optional element to be rendered while the component is mounting.
"""

tag = "OrganizationSwitcher"

# Optional props that OrganizationSwitcher supports
appearance: Optional[str] = None
organization_profile_mode: Optional[str] = None
organization_profile_url: Optional[str] = None
create_organization_mode: Optional[str] = None
create_organization_url: Optional[str] = None
after_leave_organization_url: Optional[str] = None
after_create_organization_url: Optional[str] = None
after_select_organization_url: Optional[str] = None
default_open: Optional[str] = None
hide_personal_account: Optional[str] = None
fallback: Optional[str] = None
appearance: Appearance | None = None
"Optional object to style your components. Will only affect Clerk components."

organization_profile_mode: str | None = None
"Controls whether selecting the organization opens as a modal or navigates to a page. Defaults to 'modal'."

organization_profile_url: str | None = None
"The full URL or path leading to the organization management interface."

organization_profile_props: dict | None = None
"Specify options for the underlying OrganizationProfile component."

create_organization_mode: str | None = None
"Controls whether selecting create organization opens as a modal or navigates to a page. Defaults to 'modal'."

create_organization_url: str | None = None
"The full URL or path leading to the create organization interface."

after_leave_organization_url: str | None = None
"The full URL or path to navigate to after leaving an organization."

after_create_organization_url: str | None = None
"The full URL or path to navigate to after creating an organization."

after_select_organization_url: str | None = None
"The full URL or path to navigate to after selecting an organization."

default_open: bool | None = None
"Controls whether the OrganizationSwitcher should open by default during the first render."

hide_personal: bool | None = None
"Controls whether the personal account option is hidden in the switcher."

hide_slug: bool | None = None
"Controls whether the optional slug field in the Organization creation screen is hidden."

fallback: rx.Component | None = None
"An optional element to be rendered while the component is mounting."


class OrganizationList(ClerkBase):
Expand All @@ -100,31 +121,39 @@ class OrganizationList(ClerkBase):

This component renders Clerk's <OrganizationList /> React component,
providing an interface to view and manage organization memberships.

Props:
appearance: Optional object to style your components. Will only affect Clerk components.
after_create_organization_url: The full URL or path to navigate to after creating an organization.
after_select_organization_url: The full URL or path to navigate to after selecting an organization.
after_select_personal_url: The full URL or path to navigate to after selecting the personal account.
create_organization_mode: Controls whether selecting create organization opens as a modal or navigates to a page.
create_organization_url: The full URL or path leading to the create organization interface.
hide_personal_account: Controls whether the personal account option is hidden in the list.
skip_invitation_screen: Controls whether to skip the invitation screen when creating an organization.
fallback: An optional element to be rendered while the component is mounting.
"""

tag = "OrganizationList"

# Optional props that OrganizationList supports
appearance: Optional[str] = None
after_create_organization_url: Optional[str] = None
after_select_organization_url: Optional[str] = None
after_select_personal_url: Optional[str] = None
create_organization_mode: Optional[str] = None
create_organization_url: Optional[str] = None
hide_personal_account: Optional[str] = None
skip_invitation_screen: Optional[str] = None
fallback: Optional[str] = None
appearance: Appearance | None = None
"Optional object to style your components. Will only affect Clerk components."

after_create_organization_url: str | None = None
"The full URL or path to navigate to after creating an organization."

after_select_organization_url: str | None = None
"The full URL or path to navigate to after selecting an organization."

after_select_personal_url: str | None = None
"The full URL or path to navigate to after selecting the personal account."

create_organization_mode: str | None = None
"Controls whether selecting create organization opens as a modal or navigates to a page. Defaults to 'modal'."

create_organization_url: str | None = None
"The full URL or path leading to the create organization interface."

hide_personal: bool | None = None
"Controls whether the personal account option is hidden in the list."

hide_slug: bool | None = None
"Controls whether the optional slug field in the Organization creation screen is hidden."

skip_invitation_screen: bool | None = None
"Controls whether to skip the invitation screen when creating an organization."

fallback: rx.Component | None = None
"An optional element to be rendered while the component is mounting."


create_organization = CreateOrganization.create
Expand Down
Loading