Document NextJS integration examples

daine commented 4 months ago

📇 User story

As a GC Design System developer, I want to have example code of how to use the new GCDS Components React SSR package in NextJS, so that I am familiar with its usage.

✅ Definition of Done

[x] Code is viewable
[ ] Code is tested
[x] At least 3 components work and are rendering successfully
[x] Uses the requirements we tested with the Cupcake app
[x] Cupcake app is updated to work and look more closer to a government application

📜 Acceptance criteria

[x] Code resides in an examples repository
[ ] App fits our testing criteria

📝 More info

We can start using our https://github.com/cds-snc/gcds-examples/ repo to store some of these code

Cupcake app: https://github.com/ethanWallace/fable-test (demo)

daine commented 3 months ago

Work is ongoing, adding more example use cases like usage with the NextJS Link component. Testing the production build environment at the moment.

daine commented 3 months ago

Work still in progress -- finding some painpoints in handling link navigations, so the goal is to provide a workaround for users in a reusable function or property.

The majority of the work goes back and forth with testing our upcoming react-ssr package, so this ticket covers both the example app and work on our react-ssr package.

Upon testing, I'm also running into an issue when you use user-defined components as children in our components, particularly our header component. We're going to need to validate some of the issues on that one as well, and add it into the readme as a warning.

daine commented 2 months ago

Getting closer to completion.

Fixed issues having className on our component
Workaround for links documented a next step recommendation would be to have e2e tests for this integration example.

ClementineHahn commented 1 month ago

@daine , what would be the status of this ? Do you think we can prioritize this one first ?. Thanks

daine commented 1 month ago

After thinking about this, I think this will be blocked by the SSR release. We've done all we can to have the code in a state that puts the react-ssr package in a good spot, but we can't merge it without the react SSR package being published in NPM.

Because of that I'm proposing to move it to blocked. @ClementineHahn

daine commented 1 month ago

Putting this card in "In Review" as the PR is in review and won't be merged until a canary release of the react ssr package has been published

daine commented 2 weeks ago

With the react ssr canary version published, just final cleanup and review is needed on this

daine commented 1 week ago

@melaniebmn is helping out on this, getting it to completion. She's been going over the entire app making sure it's cohesive and clear, as well as updating the UI elements and components

adorayi commented 1 week ago

@melaniebmn to check the status.

melaniebmn commented 1 week ago

Work left to do:

Update react-ssr package
Add basic FR landing page

cds-snc / design-gc-conception