Skip to content

feat: add Member Management component docs and previews - #1697

Open
grandmaester wants to merge 7 commits into
mainfrom
feat/member-mgmt-docs
Open

feat: add Member Management component docs and previews#1697
grandmaester wants to merge 7 commits into
mainfrom
feat/member-mgmt-docs

Conversation

@grandmaester

@grandmaester grandmaester commented Aug 10, 2026

Copy link
Copy Markdown
Contributor

Description

Adds documentation and interactive previews for the two My Organization member components: OrganizationMemberManagement and OrganizationMemberDetail.

Stacked PR — this targets feat/uc-3.1.2-upgrade (#1712), which carries the library upgrade and the mock reshapes that 3.x forced. Review and merge #1712 first; this PR's diff is member-management work only.

Docs (English only for now)

organization-member-management.mdx and organization-member-detail.mdx, under get-started/universal-components/web/components/, following the configure-org-domains page structure: ReleaseStageNotice (beta) → live ComponentLoader preview → React / Next.js / shadcn tabs → setup, install, get started, full integration example → Required/Display/Action/Customization props with per-prop deep dives → Available Messages and Styling Options accordions → advanced customization (subcomponents + hooks). Content is ported from the internal component reference so the public docs and the internal source of truth stay aligned.

Both pages are added to the My Organization group in main/config/navigation/universal-components.json, since navigation is manual.

Previews

New mocks for both components, wired through src/mocks/index.ts, src/helpers/getComponentMock.ts, and src/routes/index.ts.

Unlike the previously integrated components, modals are deliberately left live here rather than suppressed. These two components essentially are their modal flows — invite, revoke, revoke-and-resend, assign roles, remove from organization — so a preview with the dialogs pinned shut would show almost nothing usable. Each confirm handler mutates in-memory state behind a short delay and then closes, so the flows complete end to end without a tenant or any API call. Mocks avoid Date.now() / Math.random(), using fixed ISO timestamps and a state-backed sequence counter, so previews render deterministically.

Spinner fix

ComponentLoader.jsx rendered <Spinner> without importing it, resolving out of the calling page's MDX scope. Every consuming page therefore carried an otherwise-unused import Spinner, and any disturbance to scope surfaced as a confusing Expected component `Spinner` to be defined error that masqueraded as the root cause — which is exactly how it presented while debugging these previews. The spinner markup is now inlined so the snippet is self-contained, and the seven dead imports are removed. snippets/Spinner.jsx is left in place but is now unreferenced.

Mock-authoring skill

universal-components/.claude/skills/creating-universal-component-mocks/SKILL.md — auto-invoking guidance for the next component. Documents the harness wiring and the four files that must share the same kebab-case key, verifying a *View is a runtime (not type-only) export, reading prop contracts from the installed .d.ts rather than component source in another repo, flat vs. nested mock shapes, both modal policies, and how to type-check a mock against the real contract (which tsc -b cannot do through any).

Note on the package source

@auth0/universal-components-react is pinned to a checked-in tarball rather than the registry range used by #1712, because published 3.1.2 does not export OrganizationMemberManagementView at runtime — a barrel omission upstream. (OrganizationMemberDetailView is published.) Without the tarball the management preview cannot mount at all. This should revert to a plain registry version range once a release includes the missing export; flagging it explicitly so it isn't merged unnoticed.

References

Testing

cd universal-components
pnpm install
pnpm tsc -b && pnpm lint && pnpm build   # all pass

Then cd main && mint dev and load the two new pages. Both previews render with seeded data; every modal opens, completes, and closes. Verified both *View symbols and both route keys are present in the shipped bundle, and that all component pages still compile with no Spinner reference remaining.

Checklist

  • I've read and followed CONTRIBUTING.md.
  • I've tested the site build for this change locally.
  • I've made appropriate docs updates for any code or config changes.
  • I've coordinated with the Product Docs and/or Docs Management team about non-trivial changes.

🤖 Generated with Claude Code

@grandmaester
grandmaester requested review from a team as code owners August 10, 2026 10:27
@mintlify

mintlify Bot commented Aug 10, 2026

Copy link
Copy Markdown
Contributor

Preview deployment for your docs. Learn more about Mintlify Previews.

Project Status Preview Updated (UTC)
auth0 🟢 Ready View Preview Aug 10, 2026, 10:33 AM

💡 Tip: Enable Workflows to automatically generate PRs for you.

@mintlify

mintlify Bot commented Aug 10, 2026

Copy link
Copy Markdown
Contributor

Preview deployment for your docs. Learn more about Mintlify Previews.

Project Status Preview Updated (UTC)
auth0-docs-dev 🟢 Ready View Preview Aug 10, 2026, 10:33 AM

💡 Tip: Enable Workflows to automatically generate PRs for you.

@mintlify

mintlify Bot commented Aug 10, 2026

Copy link
Copy Markdown
Contributor

Preview deployment for your docs. Learn more about Mintlify Previews.

Project Status Preview Updated (UTC)
auth0-docs-staging 🟢 Ready View Preview Aug 10, 2026, 10:33 AM

💡 Tip: Enable Workflows to automatically generate PRs for you.

@github-actions

github-actions Bot commented Aug 10, 2026

Copy link
Copy Markdown
Contributor

Summary

Status Count
🔍 Total 3
✅ Successful 0
⏳ Timeouts 0
🔀 Redirected 0
👻 Excluded 3
❓ Unknown 0
🚫 Errors 0
⛔ Unsupported 0
Full Github Actions output

@@ -0,0 +1,202 @@
---

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

@grandmaester we should only add component view files and remove all the other supporting files form our repo like this SKILL.md which is not necessary for the live previews.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

@SurajThotakura Are you suggesting to just add doc content changes? Skill is new addition on this to make sure this will be done much easier for future components

Comment thread universal-components/package.json Outdated
"@auth0/universal-components-core": "^2.0.1",
"@auth0/universal-components-react": "^2.0.1",
"@auth0/universal-components-core": "^3.1.2",
"@auth0/universal-components-react": "file:./auth0-universal-components-react-3.1.2.tgz",

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

This will be removed in sometime, once we deploy change for exporting view components on the react package

grandmaester and others added 2 commits August 13, 2026 13:36
Adds documentation and interactive previews for the two My Organization
member components, stacked on the 3.1.2 upgrade branch.

Docs (English only for now), following the configure-org-domains pattern:
- organization-member-management.mdx
- organization-member-detail.mdx
Both added to the My Organization nav group, since navigation is manual.

Previews:
- New mocks for both components, wired through mocks/index.ts,
  getComponentMock.ts, and routes/index.ts.
- Modals are intentionally left live rather than suppressed. These two
  components essentially are their modal flows (invite, revoke,
  revoke-and-resend, assign roles, remove from organization), so a
  preview with the dialogs pinned shut would show almost nothing usable.
  Each confirm handler mutates in-memory state behind a short delay and
  then closes, so flows complete without a tenant or any API call.

Fixes a latent Spinner fault while here: ComponentLoader.jsx rendered
<Spinner> without importing it, resolving out of the calling page's MDX
scope. Every consuming page therefore carried an otherwise-unused
`import Spinner`, and any disturbance to scope surfaced as a confusing
"Expected component `Spinner` to be defined" error that masqueraded as
the root cause. The spinner markup is now inlined so the snippet is
self-contained, and the seven dead imports are removed.

Adds a creating-universal-component-mocks skill documenting the harness
wiring, how to verify a View is a runtime (not type-only) export, reading
prop contracts from the installed .d.ts, and the version-bump checklist.

Note: @auth0/universal-components-react is pinned to a checked-in tarball
because published 3.1.2 does not export OrganizationMemberManagementView
at runtime (a barrel omission upstream; the detail View is present).
Revert to the registry range once a release includes it.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@grandmaester
grandmaester force-pushed the feat/member-mgmt-docs branch from b826187 to 3ede61b Compare August 13, 2026 08:10
* docs: fix universal components live preview

* fix: update ui-components

* docs: address pr comments

* docs: address pr comments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

documentation Improvements or additions to documentation

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants