Open
Conversation
✅ Deploy Preview for spirit-design-system-docsite ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for spirit-design-system canceled.
|
✅ Deploy Preview for spirit-design-system-storybook canceled.
|
✅ Deploy Preview for spirit-design-system-storybook canceled.
|
literat
force-pushed
the
feat/docsite-component-listing
branch
from
05b74c9 to
367baa8
Compare
There was a problem hiding this comment.
Pull request overview
This PR adds a “Components” listing to the docsite by reading the available Spirit Web React component directories, rendering them as cards, and wiring up Jest so the new utilities/repository code are tested in the monorepo.
Changes:
- Add a
/componentspage in the docsite that renders a grid of component cards. - Introduce slug ↔ component-name conversion helpers with Jest unit tests.
- Add a components repository (filesystem-based) with tests, and register the docsite Jest project + scripts.
Reviewed changes
Copilot reviewed 11 out of 12 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
yarn.lock |
Adds lock entries for docsite testing/tooling deps (jest, ts-node, npm-run-all2). |
jest.config.ts |
Registers apps/docsite/jest.config.ts in the root Jest projects list. |
apps/docsite/tsconfig.test.json |
Adds a Jest-focused TS config for ts-node/Jest config loading. |
apps/docsite/src/domains/routing/routes.ts |
Adds a routes.component() helper that slugifies component names. |
apps/docsite/src/domains/components/utils/componentSlug.ts |
Implements componentNameToSlug and slugToComponentName. |
apps/docsite/src/domains/components/utils/__tests__/componentSlug.test.ts |
Unit tests for slug conversion. |
apps/docsite/src/domains/components/ui/ComponentCard.tsx |
Adds a card UI for a component entry, including a link. |
apps/docsite/src/domains/components/repositories/componentsRepository.ts |
Reads component directories from packages/web-react via Node fs. |
apps/docsite/src/domains/components/repositories/__tests__/componentsRepository.test.ts |
Unit tests for the repository behavior. |
apps/docsite/src/app/(documentation)/components/page.tsx |
New Next.js page that renders the component list grid. |
apps/docsite/package.json |
Adds docsite test scripts and devDependencies for Jest tooling. |
apps/docsite/jest.config.ts |
Adds Jest preset + @local/* mapper for docsite tests. |
apps/docsite/src/domains/components/repositories/componentsRepository.ts
Show resolved
Hide resolved
apps/docsite/src/domains/components/repositories/__tests__/componentsRepository.test.ts
Show resolved
Hide resolved
apps/docsite/src/domains/components/constants/__tests__/componentCategories.test.ts
Outdated
Show resolved
Hide resolved
apps/docsite/src/domains/components/utils/groupComponentsByCategory.ts
Outdated
Show resolved
Hide resolved
apps/docsite/src/domains/components/ui/ComponentListSkeleton.tsx
Outdated
Show resolved
Hide resolved
literat
force-pushed
the
feat/docsite-component-listing
branch
from
c12c30d to
77c5c01
Compare
… components identification
* Cannot find module '@alma-oss/spirit-web-react' or its corresponding type declarations.
literat
requested review from
a team,
dlouhak,
katerinarehorkova and
pavelklibani
as code owners
apps/docsite/src/domains/components/utils/groupComponentsByCategory.ts
Outdated
Show resolved
Hide resolved
crishpeen
reviewed
Mar 31, 2026
| const components: string[] = fetchAllComponents(); | ||
|
|
||
| return ( | ||
| <Container> |
Member
There was a problem hiding this comment.
this should be in a Section too
Collaborator
Author
There was a problem hiding this comment.
Will this be a default for every page? If yes, it should go to layout.ts.
|
|
||
| export const COMPONENT_CATEGORIES: Record<string, string[]> = { | ||
| Actions: ['ActionGroup', 'Button', 'ButtonLink', 'ControlButton', 'Link', 'SkipLink', 'SplitButton'], | ||
| Content: ['Accordion', 'Avatar', 'Card', 'EmptyState', 'Item', 'Pill', 'PricingPlan', 'Tag', 'Timeline'], |
Member
There was a problem hiding this comment.
interactive tag is action too 😂
Collaborator
Author
There was a problem hiding this comment.
You can suggest different categories. And I think this will definitely change in the future. So maybe we can have a long topic about this... :-)
apps/docsite/src/domains/components/ui/CategoricalComponentList.tsx
Outdated
Show resolved
Hide resolved
apps/docsite/src/domains/components/ui/CategoricalComponentList.tsx
Outdated
Show resolved
Hide resolved
| <Grid elementType="ul" cols={{ mobile: 2, tablet: 3 }}> | ||
| {Array.from({ length: SKELETON_ITEMS_COUNT }, (_, index) => ( | ||
| <li key={index} className="d-grid"> | ||
| <SkeletonShape width={0} height={66} borderRadius="200" UNSAFE_style={{ width: '100%' }} /> |
Member
There was a problem hiding this comment.
Suggested change
| <SkeletonShape width={0} height={66} borderRadius="200" UNSAFE_style={{ width: '100%' }} /> | |
| <SkeletonShape width="100%" height={66} borderRadius="200" /> |
not possible? Of not we should allow it
Collaborator
Author
There was a problem hiding this comment.
Not possible, the number is required. Do we want to allow this?
apps/docsite/src/domains/components/ui/ComponentListSkeleton.tsx
Outdated
Show resolved
Hide resolved
Comment on lines
+4
to
+5
| // Reset to Node resolution for Jest compatibility | ||
| // @see: https://www.typescriptlang.org/tsconfig/#moduleResolution |
Collaborator
Author
There was a problem hiding this comment.
…of component list
…of component list
…of component list
…of component list
…of component list
…ion for components identification
…of component list
apps/docsite/src/domains/components/ui/ComponentListSkeleton.tsx
Outdated
Show resolved
Hide resolved
…of component list
…of component list
…of component list
…of component list
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
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.
Description
Adds a
/componentspage to the docsite that displays all Spirit Design System components withtwo browsing modes:
Layout, Media and Icons, Navigation, Overlays, Structure, Typography, Utilities)
Users toggle between views using a centered
SegmentedControl. The sort state is persisted inthe URL via
?sort=categorical(the default alphabetical mode keeps the URL clean with no queryparam).
Key implementation details
nuqs(added to thefrontendyarncatalog) as the standard URL state library for the docsite. It's purpose-built for Next.js App
Router with typed parsers and automatic default-value removal.
ComponentGrid(shared grid),
AlphabeticalComponentList,CategoricalComponentList,ComponentList(clientcomponent reading URL state), and
ComponentSortToggle.useComponentsSortQueryStateextracts the sort parser so it's defined onceand reused across components.
groupComponentsByCategoryis a pure, testable utility for mappingcomponents to their categories.
componentNameToSlug/slugToComponentNamehandle PascalCase ↔kebab-case conversion including
UNSTABLE_prefix support.alphabetical order, no empty categories), slug conversion, component repository, and category
grouping.
Additional context
/components/[slug]) are not yet implemented — card links will 404for now. This is planned as a follow-up.
nuqsadapter (NuqsAdapter) wraps the rootAppProviderand client components usinguseSearchParamsare wrapped in<Suspense>as required by Next.js static generation.Issue reference