Add initial component set#56
Draft
sjoerdbeentjes wants to merge 15 commits into
Draft
Conversation
sjoerdbeentjes
changed the title
sjoerdbeentjes
changed the title
sjoerdbeentjes
force-pushed
the
feat/initial-component-set
branch
from
b735500 to
51d80d8
Compare
Vendor eleven shadcn/Base UI primitives into @surfnet/react — avatar, breadcrumb, checkbox, dropdown-menu, field, input, label, select, separator, sidebar, table — each with a barrel, an index export, and a Storybook story. Add a DataTable component built on the table primitive + TanStack Table (row selection, sorting, filtering, column visibility, pagination); all of its user-facing strings are props with defaults. Add a contract per component in @surfnet/contracts (description-only where there is no axis) and tie each component to it via satisfies / typed props. Update the add-component skill to require a contract for every component and document the variant/size, orientation, and description-only shapes.
…cons Follow PR #44: replace all @tabler/icons-react usages in the new components and their stories with @phosphor-icons/react (`*Icon` suffix). The icon library config and peer/dev deps already came in via the rebase onto main.
The separator story declared an `orientation` control but every story hardcoded its render, so the control did nothing. Add an args-driven Default playground that consumes `orientation` (and adapts its layout) so the control works; keep the Horizontal/Vertical showcases. Audited the rest: Storybook here only surfaces explicitly declared argTypes (no prop inference), and separator was the only component with a declared-but- unconsumed control. Document the rule in the add-component skill so new stories always wire their controls to an args-driven story.
sjoerdbeentjes
force-pushed
the
feat/initial-component-set
branch
from
2692ebb to
0bc3dfa
Compare
…useDataTable hook
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.
What
Adds the React & Angular component-library half of the PoC component inventory to
@surfnet/react, plus the supporting contracts.Primitives vendored (shadcn CLI / Base UI, Phosphor icons) — each with its own directory, barrel,
src/index.tsexport, and a Storybook story:avatar,breadcrumb,checkbox,dropdown-menu,field,input,label,select,separator,sidebar,table. (buttonalready existed.)DataTable — a reusable component built on the
tableprimitive + TanStack Table (@tanstack/react-table), matching the dedicated "Data Table" Figma spec: row selection, sortable columns, text filter, column-visibility menu, row actions, and Previous/Next pagination. All user-facing strings (Columns,No results.,Previous,Next, the selection summary, filter placeholder) are props with sensible defaults.Contracts — every new component gets a
<name>Contractin@surfnet/contractsas the cross-framework source of truth. Components with a real axis are tied to the contract (cvasatisfies Record<…>or typed inline-union props):avatarsize,dropdown-menuitem variant,fieldorientation,selecttrigger size,sidebarmenu-button variant/size. The rest are description-only.Skill — updated
add-component(SKILL.md,react.md,angular.md) to require a contract for every component and to document the three contract shapes (variant/size, orientation, description-only), closing the gap that previously left primitives without contracts.Why
These are the primitives needed to rebuild the two PoC screens (App catalog, Login). Scope here is React components only