poc(ipa-ui): component refactor, Badge, IpaMetadata, CSS co-location#37
Draft
poc(ipa-ui): component refactor, Badge, IpaMetadata, CSS co-location#37
Conversation
- Refactor all IPA components into folder-per-component structure (Rule/, RulesSection/, Examples/, Workflow/, Correct/, Incorrect/, Reason/, IpaMetadata/) each with co-located CSS module - Extract generic Badge component into src/components/ui/Badge/ (renamed from Tag — 'badge' is the standard UI pattern name) - Replace monolithic styles.module.css with per-component CSS modules - Add IpaMetadata component that reads frontmatter `state` via useDoc() and renders a pill tag strip above the page title - Swizzle DocItem/Content (wrap mode) to inject IpaMetadata automatically on every IPA doc page without touching individual files - Migrate 36 IPA docs: add `state: adopt|experimental` to frontmatter, remove old :::info[State] admonition blocks - Use CSS counters for rule numbering (removes render-time side effects) - Add severity-based left border accent on Rule cards (must/should/may) - Unify accordion styles for Examples and Workflow - Add dark mode support for all severity and state colours
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This is a draft / PoC — not intended to merge as-is. The goal is to show the proposed component architecture for review and discussion.
What's in this PR
Component structure
Rule/,RulesSection/,Examples/,Workflow/,Correct/,Incorrect/,Reason/,IpaMetadata/), each with a co-located CSS moduleBadgecomponent extracted tosrc/components/ui/Badge/(renamed fromTag) — no IPA-specific logic, reusable by anythingstyles.module.cssdeleted; replaced by per-component CSS modulesIPA state metadata
state: adopt | experimental | deprecated | retiredadded to frontmatter of all 36 IPA docs:::info[State]admonition blocks removed from all docsIpaMetadatacomponent reads the frontmatter viauseDoc()and renders a coloured pill badge above the page titleDocItem/Contentswizzled in wrap mode to injectIpaMetadataautomatically — no changes needed to individual doc filesStyling improvements
Rulecards (must= red,should= amber,may= blue)ExamplesandWorkflowBadgepill component with six colour variants (green,amber,blue,orange,red,muted)Questions for reviewers
Badgecomponent the right abstraction for both page-level state tags and inline rule badges?IpaMetadatagrow to include other frontmatter fields (e.g.lintable,since)?