feat: ESDS 3.0 release based on Vue 3 and PrimeVue

[ericdouglaspratt]

🔗 Linked issue

• https://energysage.atlassian.net/browse/CED-1339

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

• New es-ds-components package that is a Nuxt layer package and contains the PrimeVue config for downstream Nuxt 3 applications, as well as all related components
• New es-ds-docs folder that contains a Nuxt 3 app to power the new design system documentation site
• Local development and hot reloading are now much faster and simpler; the necessary linking and dev server initialization can be accomplished with a single command: make dev

🥼 Testing

• Tested on the new local docs site

🧐 Feedback Requested / Focus Areas

• Overall

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.
• I have documented testing approach

[ericdouglaspratt]

@tomleo The basic "hello world" foundation should be ready for a review now. Keep in mind, as per the ticket description, that the scope of this stage is:

1. create a feature branch
2. create the es-ds-components folder and package as a Nuxt layer
3. create the es-ds-docs folder, put a starter Nuxt 3 app in there, hook it up to es-bs-base and es-ds-components, and make sure hot reloading works for local development

I'm particularly interested in any feedback on the names of the makefile commands (make dev vs. make legacy-dev) and how we can best preserve the old packages' commands in case we need to do a hotfix (more worried about that in the Lerna case actually, which isn't set up yet for the new thing), while keeping it simple to run the new 3.0 design system locally and publish it.

And this PR will remain open for a while (so no need to fully approve it), as it represents the feature branch we'll work against. But worth reviewing what's there so far and any concerns. I've created or will create separate tickets for setting up the initial content in the docs site along with PrimeVue, Jest testing, linting, prettier, simultaneously publishing to NPM via Lerna, etc, as some of those can be done in parallel with developing PrimeVue components.

[mpleroux]

I get this error when running make dev after going through the usual build steps for es-ds. Is it looking for an npm package that doesn't exist yet?

mike@redtail es-ds % make dev   
npm --prefix es-bs-base link

up to date, audited 3 packages in 445ms

found 0 vulnerabilities
npm --prefix es-ds-components link

up to date, audited 3 packages in 275ms

found 0 vulnerabilities
cd es-ds-docs; npm link @energysage/es-bs-base @energysage/es-ds-components
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@energysage%2fes-ds-components - Not found
npm ERR! 404 
npm ERR! 404  '@energysage/es-ds-components@*' is not in this registry.
npm ERR! 404 
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in: /Users/mike/.npm/_logs/2024-07-26T16_47_07_229Z-debug-0.log
make: *** [dev] Error 1

[hroth1994]

I get this error when running make dev after going through the usual build steps for es-ds. Is it looking for an npm package that doesn't exist yet?

mike@redtail es-ds % make dev   
npm --prefix es-bs-base link

up to date, audited 3 packages in 445ms

found 0 vulnerabilities
npm --prefix es-ds-components link

up to date, audited 3 packages in 275ms

found 0 vulnerabilities
cd es-ds-docs; npm link @energysage/es-bs-base @energysage/es-ds-components
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@energysage%2fes-ds-components - Not found
npm ERR! 404 
npm ERR! 404  '@energysage/es-ds-components@*' is not in this registry.
npm ERR! 404 
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in: /Users/mike/.npm/_logs/2024-07-26T16_47_07_229Z-debug-0.log
make: *** [dev] Error 1

I got this error too.

[mpleroux]

After reviewing the contents of this PR more I now understand it's not meant to be run until the es-ds-components package exists. I familiarized myself with the files and I don't have any specific feedback right now.

[ericdouglaspratt]

Yeah I'm not entirely sure why that error happens - my first assumption was that it was because I hadn't given you an install command to run - I've now updated make install to run npm install on the newer folders - maybe that's necessary first.

If running make install and then make dev still doesn't work, maybe we can debug on Monday, because it works for me (originally, admittedly after manually running npm install in each folder separately, which make install should now be able to accomplish for you). And it's true the es-ds-components package doesn't exist on NPM, but if the local linking is working correctly, it shouldn't have to yet.

It could be because es-bs-base is listed first in the npm link command, so it tries to NPM install all the other packages including es-ds-components as part of that first step, and can't find it. I wonder if changing the order in the Makefile so that es-ds-components is first would help.

[ericdouglaspratt]

@mpleroux @hroth1994 I just published @energysage/es-ds-components to NPM and properly added it to the package.json of es-ds-docs - can you try again?

[hroth1994]

@mpleroux @hroth1994 I just published @energysage/es-ds-components to NPM and properly added it to the package.json of es-ds-docs - can you try again?

make install and make dev works now but I'm seeing a ton of these warnings:

[ericdouglaspratt]

Yeah I'm seeing those too; the newer version of SASS we're using is just saying some stuff is deprecated and should be cleaned up at some point. A full refactor of es-bs-base is a bit out of scope for this project, though I can make a ticket to have a look if we can clean it up because it makes it tougher to see other errors.

[mpleroux]

I have the same experience. I can run it locally and see the messages from App.vue and TestComponent.vue.

[mpleroux]

After reading the Sass page about those Mixed Declarations warnings it doesn't look like an easy fix. Declarations could be reordered within a single file, but conflicts between two files may require restructuring some of Bootstrap's SCSS:

   ┌──> ../../../.nodenv/versions/18.19.1/lib/node_modules/@energysage/es-bs-base/scss/_custom-forms.scss
501│       appearance: none;
   │       ^^^^^^^^^^^^^^^^ declaration
   ╵
   ┌──> ../../../.nodenv/versions/18.19.1/lib/node_modules/@energysage/es-bs-base/scss/mixins/_transition.scss
24 │ ┌       @media (prefers-reduced-motion: reduce) {
25 │ │         transition: none;
26 │ │       }
   │ └─── nested rule

I was wondering how Bootstrap themselves were handling it and their solution seems to be... downgrading Sass from 1.7.7.8 to 1.7.7.6? 🤦

[nathanielwarner]

Nice work on this! I'm glad you were even able to get the Prism source code viewing working.

Regarding the SASS deprecation warning, I don't know why we didn't encounter this before in the POCs. But in any case, I'm not sure it's that complex.. I left a comment on the ticket.

I also wonder whether we should be maintaining the old repos (es-vue-base and es-design-system) within this repo. es-vue-base would be broken if we remove styles from es-bs-base that are specific to the BootstrapVue implementation. It seems like we could keep the old design system as a branch instead.

[swarmia]

✅  Linked to Task ESDS-3 · es-bs-base@0.1.0 creation

[jit-ci]

❌ Jit has detected 4 important findings in this PR that you should review.
The findings are detailed below as separate comments.
It’s highly recommended that you fix these security issues before merge.

Repository Risks:

• High Severity Findings: Indicates that the resource has high severity security findings that need attention.
• Production: Critical as it operates in a live production environment, directly impacting users and business operations.

Repository Context:

Loading

graph LR
    GitHub$Repository_U23_EnergySage/es-ds["GitHub Repository<br/>EnergySage/es-ds"]:::GitHub$Repository
    Team_U23_Developers["Team<br/>Developers"]:::Team
    Team_U23_Prosumer$Europe["Team<br/>Prosumer Europe"]:::Team
    SQS$Queue_U23_long["SQS Queue<br/>long"]:::SQS$Queue
    AWS$Account_U23_780622972251["AWS Account<br/>780622972251"]:::AWS$Account
    S3$Bucket_U23_es-static-prod["S3 Bucket<br/>es-static-prod"]:::S3$Bucket
    Team_U23_Developers -- "Owns" --> GitHub$Repository_U23_EnergySage/es-ds
    Team_U23_Prosumer$Europe -- "Owns" --> GitHub$Repository_U23_EnergySage/es-ds
    GitHub$Repository_U23_EnergySage/es-ds -- "References" --> SQS$Queue_U23_long
    SQS$Queue_U23_long -- "Is part of" --> AWS$Account_U23_780622972251
    AWS$Account_U23_780622972251 -- "Has" --> S3$Bucket_U23_es-static-prod

[jit-ci]

❌ Jit has detected 4 important findings in this PR that you should review.
The findings are detailed as separate comments.
It’s highly recommended that you fix these security issues before merge.

Until now, you ignored/fixed 1 finding.