Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: Decouple USWDS packages from the library bundle #1337

Merged
merged 7 commits into from
Dec 19, 2024

Conversation

dzole0311
Copy link
Collaborator

@dzole0311 dzole0311 commented Dec 18, 2024

Related Ticket / Closes: #1317
Related Next.js PR: developmentseed/next-veda-ui#30

Description of Changes

Restructured the library build for local development and library build:

  1. Development environment:
  • When developing in the veda-ui repo, we will have full USWDS package access
  • Moved USWDS related packages under devDependencies and added USWDS as a peerDependency
  1. Library build:
  • Modified the build to only bundle custom component styles
  • Removed USWDS package styles from the final library bundle

Notes & Questions About Changes

Going forward, the VEDA UI library now expects consuming apps to:

  • Install USWDS as a dependency
  • Configure their own USWDS theme via a _uswds-theme.scss config file

Furthermore, we could also expose the themed variables that @AliceR and @sandrahoang686 created in a similar config file like the one for USWDS (e.g. _veda-theme.scss) and allow instances to customize them in a similar manner like the uswds theme. Since that's out of scope for this PR, I'll create a follow-up issue to track it.

Validation / Testing

  1. Deployment preview:
  • Component styles are correctly applied
  • USWDS theming works as expected
  • Style specificity is maintained (custom styles override USWDS defaults)
  1. Test in local development:
  • Run yarn dev and check that the development environment still has full USWDS access
  • Build library (yarn build) and inspect the main.css under /lib directory -> it should contain only custom CSS styles w/o USWDS styles included
  1. In Next.js
  • See related PR with deployment preview
  • Change the colors using USWDS tokens in the instances _uswds-theme.scss config file -> check that the change is applied, for example, to the header

Copy link

netlify bot commented Dec 18, 2024

Deploy Preview for veda-ui ready!

Name Link
🔨 Latest commit 93270da
🔍 Latest deploy log https://app.netlify.com/sites/veda-ui/deploys/6763f06435cf99000883d171
😎 Deploy Preview https://deploy-preview-1337--veda-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

package.json Outdated
@@ -40,6 +40,10 @@
"engines": {
"node": ">=18.0.0"
},
"peerDependencies": {
"@uswds/uswds": "^3.8.1",
"@trussworks/react-uswds": "^9.0.0"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do we need react-uswds as a peer dependency?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point. Thinking about it again, we should move @trussworks/react-uswds to regular dependencies since we're using its components directly in our library that gets bundled by Parcel. I've updated the package.json in the instance repo as well.

Copy link
Collaborator

@hanbyul-here hanbyul-here left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🙇 thanks sfor looking at it. I left a question but not a blocker

@dzole0311 dzole0311 merged commit df72331 into main Dec 19, 2024
10 checks passed
@dzole0311 dzole0311 deleted the refactor-decouple-uswds-from-lib-bundle branch December 19, 2024 10:33
dzole0311 added a commit that referenced this pull request Dec 24, 2024
**Related Ticket:** #1317

### Description of Changes
Added USWDS theming guide documentation to help developers understand
and implement custom styling configuration when using VEDA UI components
with USWDS.

This documents the changes implemented in
#1337 and
developmentseed/next-veda-ui#30.

### Notes & Questions About Changes
_{Add additonal notes and outstanding questions here related to changes
in this pull request}_

### Validation / Testing
_{Update with info on what can be manually validated in the Deploy
Preview link for example "Validate style updates to selection modal do
NOT affect cards"}_
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants