Skip to content

[Portal] Add Storybook setup and component stories#5685

Merged
tung2744 merged 12 commits intoauthgear:mainfrom
fungc-io:v1-storybook
May 7, 2026
Merged

[Portal] Add Storybook setup and component stories#5685
tung2744 merged 12 commits intoauthgear:mainfrom
fungc-io:v1-storybook

Conversation

@fungc-io
Copy link
Copy Markdown
Member

@fungc-io fungc-io commented Apr 24, 2026

Summary

  • Add Storybook v9 setup under portal/.storybook/ with component stories for buttons, inputs, dialogs, dropdowns, toggles, etc.
  • Add portal/docs/components-guidelines/ docs bundle and Portal ARCHITECTURE.md / FRONTEND.md.
  • Restructure AGENTS.md documentation map to reference portal/docs.

Test plan

  • cd portal && npm install && npm run storybook — verify dev server runs at http://localhost:6006
  • Browse each story category (buttons, inputs, selection, feedback, overlay, navigation)
  • npm run build-storybook builds without errors

fungc-io and others added 12 commits April 21, 2026 10:34
Initialize FluentUI icons in Storybook preview so v1 components render
icons correctly. Add stories for TextFieldWithCopyButton under the
components/v1 sidebar group, and document the v1/v2 Storybook
convention under portal/docs/storybook.md.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Point agents at portal/docs/ (including portal/docs/storybook.md) so
Portal-specific conventions are discoverable alongside docs/specs.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…d documentation map

Introduce Portal-specific developer docs under portal/docs/ describing
the SPA architecture, frontend conventions (routing, GraphQL, styling,
i18n, forms), and how they relate to the two GraphQL endpoints.

Replace AGENTS.md "Read first" section with a "Documentation map" table
so agents can find authoritative docs for each area at a glance.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Consolidate portal component usage guidelines into a dedicated docs folder so contributors can find naming, selection, input, feedback, and modal patterns in one place.

Made-with: Cursor
TextArea, TextField, Button, Checkbox, Toggle
Foldable, ChoiceButton, DefaultButton, ActionButton
Tooltip, OutlineActionButton, PrimaryButton, TextFiled
IconRadioCards, LoginMethods, Dialog
Extract inline render bodies with hooks into named components to satisfy
react-hooks/rules-of-hooks. Apply explicit boolean JSX values, consistent
interface definitions, and drop unused eslint-disable directives and
redundant conditional expressions.
@tung2744 tung2744 self-assigned this Apr 27, 2026
@tung2744
Copy link
Copy Markdown
Contributor

I believe docs in portal/docs is not for human so lets put it in .agents?

@fungc-io
Copy link
Copy Markdown
Member Author

I think it's easier to manage if the harness rules/references live in their respective area folders. So component references would go in portal/docs/..., with a map added to AGENTS.md / CLAUDE.md to point the agent to the right files.

If that creates confusion with other spec documents, how about putting them into portal/references instead?

That said, for other docs/specs, I think they'll be read by both humans and AI agents (they should follow the same spec after all). So I'd lean towards keeping those documents in docs and having the rules point to them.

@tung2744
Copy link
Copy Markdown
Contributor

I see your point, but my concern is this added many docs to the repo which will likely become outdated after half year. It will be ok if they are expected to be managed and read only by agent. But if they are for human, I think it create confusion.
Also, the docs doesn't seems to be easy for human to read. For example, I do not know when should I read docs inside ‎portal/docs/components-guidelines. So I think eventually only agents are reading them.

So I think:
Human -> Look at the storybook directly. Use common sense to determine which component to use.
Agent -> Read these docs.

@tung2744
Copy link
Copy Markdown
Contributor

tung2744 commented May 4, 2026

@fungc-io

I suggest the following changes to this PR:

  1. Move the long docs including the ARCHITECTURE.md, FRONTEND.md, and component-guidelines into .agents.
  2. Have a portal/README.md which only document the local development setup and useful npm commands, like npm start and npm gentype.
  3. storybook.md can be keep but I might simplify it later.

@tung2744
Copy link
Copy Markdown
Contributor

tung2744 commented May 7, 2026

Maybe I can just merge this and relocate the docs later, as they are not affecting the portal code.

@tung2744 tung2744 merged commit 7c44e1f into authgear:main May 7, 2026
11 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants