Add demo app using @surfnet/angular#69
Open
loofpc wants to merge 38 commits into
Open
Conversation
…tailwind styling does not work properly yet.
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.
…useDataTable hook
…hat look mostly like the React ones. Only the data-table lacks for now since that is not a standard spartan-ng component.
The new helm components only consumed the contracts in their stories, so a contract change failed the React build but compiled fine on the Angular side, defeating the cross-framework parity guarantee. Wire each axis-bearing component to its contract the way hlm-button already does: avatar, select-trigger, and dropdown-menu-item type their input from the contract name; field and sidebar-menu-button add `satisfies Record<…>` on their cva variant maps so a stray or missing key fails `pnpm lint`.
There is no Angular data table yet and nothing imports the package. Remove it from package.json and from ng-package.json allowedNonPeerDependencies.
The vendored components shipped spartan's default @ng-icons/lucide glyphs while the design system standardized on Phosphor (React migrated in PR #44) and only the stories used it. Swap every component-side icon to its Phosphor equivalent (matching React's choices, e.g. CaretUpDown on the select trigger), promote @ng-icons/phosphor-icons to a runtime dependency, and remove @ng-icons/lucide from package.json and ng-package.json.
The WithLeadingDropdown story (React and Angular) had a static "Category" trigger and dropdown items that did nothing when selected. Track the chosen category in state and reflect it in the trigger label and input placeholder so the example demonstrates real behavior.
Add react-storybook (6006) and angular-storybook (6007) entries so the component libraries can be launched for preview/verification.
…tton The leading dropdown trigger used hlmBtn, which isn't among the story's imported directives, so it matched nothing and rendered unstyled. Switch to hlmInputGroupButton (already imported via HlmInputGroupImports), matching React's InputGroupButton, so the ghost-variant button styling applies.
…consuming the package. Revert downgrade of @angular/cdk.
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
2 participants
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.
The PR adds the content for the
apps/angularapplication that demos the consumption of the@surfnet/angularpackage. The demo component shows fake data content to resemble the Figma design .