feat: ESDS 3.0 release based on Vue 3 and PrimeVue #1461

ericdouglaspratt · 2024-07-24T18:03:12Z

🔗 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

es-ds-docs/app.vue

es-ds-docs/assets/scss/main.scss

es-ds-docs/nuxt.config.ts

es-ds-docs/package.json

ericdouglaspratt · 2024-07-25T19:09:56Z

@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:

create a feature branch
create the es-ds-components folder and package as a Nuxt layer
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 · 2024-07-26T16:48:13Z

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 · 2024-07-26T17:56:42Z

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 · 2024-07-26T19:00:42Z

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 · 2024-07-26T19:29:55Z

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 · 2024-07-29T13:05:01Z

@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 · 2024-07-29T13:34:39Z

@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 · 2024-07-29T13:37:45Z

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 · 2024-07-29T14:27:16Z

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

mpleroux · 2024-07-29T15:16:04Z

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.

es-ds-docs/pages/index.vue

es-ds-components/components/b-col.vue

es-bs-base/scss/modules/blues.module.scss

es-ds-docs/nuxt.config.ts

swarmia · 2024-09-04T15:25:27Z

✅ Linked to Task ESDS-3 · [email protected] creation

feat: finish EsRating TODOs

…nings fix: ran sass-migrator on files with deprecation warnings

feat: enable templated EsDataTable cells; better match PrimeVue API

feat: Add peek props to carousel and update numDots calculation

fix: accordion initial expand with multiple expand

feat: add preference center link to footer

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:

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 · 2025-01-23T16:05:12Z

es-ds-docs/aws/package.json

+    "dependencies": {
+        "aws-cdk": "^2.90.0",
+        "aws-cdk-lib": "^2.90.0",
+        "es-cdk": "^1.20.0",


Security control: License Compliance Checker

License Compliance Violation

Found 1 violation in es-cdk (GPL-3.0-or-later OR MIT):

es-cdk -> aws-cdk-lib -> case (GPL-3.0-or-later OR MIT)

Severity: HIGH

Why should you fix this issue?
This code introduces a dependency vulnerability. In a production environment, using vulnerable dependencies can lead to serious security risks. If an attacker exploits a known vulnerability in one of these dependencies, it could compromise the entire application or lead to unauthorized access.

Jit Bot commands and options (e.g., ignore issue)

You can trigger Jit actions by commenting on this PR review:

#jit_ignore_fp Ignore and mark this specific single instance of finding as “False Positive”

#jit_ignore_accept Ignore and mark this specific single instance of finding as “Accept Risk”

#jit_ignore_type_in_file Ignore any finding of type "License Compliance Violation" in es-ds-docs/aws/package.json; future occurrences will also be ignored.

#jit_undo_ignore Undo ignore command

jit-ci · 2025-01-23T16:05:12Z

es-ds-docs/package.json

+        "format": "npm run format:prettier && npm run format:eslint"
+    },
+    "dependencies": {
+        "@energysage/es-ds-components": "^3.0.0-alpha.15",


Security control: License Compliance Checker

License Compliance Violation

Found 3 violations in @energysage/es-ds-components (BSD-3-Clause OR GPL-2.0):

@energysage/es-ds-components -> nuxt -> nitropack -> listhen -> node-forge (BSD-3-Clause OR GPL-2.0)

@energysage/es-ds-components -> nuxt -> nitropack -> unstorage -> listhen -> node-forge (BSD-3-Clause OR GPL-2.0)

@energysage/es-ds-components -> nuxt -> unstorage -> listhen -> node-forge (BSD-3-Clause OR GPL-2.0)

Severity: HIGH

Why should you fix this issue?
This code introduces a dependency vulnerability. In a production environment, using vulnerable dependencies can lead to serious security risks. If an attacker exploits a known vulnerability in one of these dependencies, it could compromise the entire application or lead to unauthorized access.

Jit Bot commands and options (e.g., ignore issue)

You can trigger Jit actions by commenting on this PR review:

#jit_ignore_fp Ignore and mark this specific single instance of finding as “False Positive”

#jit_ignore_accept Ignore and mark this specific single instance of finding as “Accept Risk”

#jit_ignore_type_in_file Ignore any finding of type "License Compliance Violation" in es-ds-docs/package.json; future occurrences will also be ignored.

#jit_undo_ignore Undo ignore command

jit-ci · 2025-01-23T16:05:12Z

es-ds-docs/package.json

+    "dependencies": {
+        "@energysage/es-ds-components": "^3.0.0-alpha.15",
+        "@energysage/es-ds-styles": "^3.0.0-alpha.12",
+        "@nuxt/image": "^1.8.0",


Security control: License Compliance Checker

License Compliance Violation

Found 2 violations in @nuxt/image (BSD-3-Clause OR GPL-2.0):

@nuxt/image -> ipx -> listhen -> node-forge (BSD-3-Clause OR GPL-2.0)

@nuxt/image -> ipx -> unstorage -> listhen -> node-forge (BSD-3-Clause OR GPL-2.0)

Severity: HIGH

Why should you fix this issue?
This code introduces a dependency vulnerability. In a production environment, using vulnerable dependencies can lead to serious security risks. If an attacker exploits a known vulnerability in one of these dependencies, it could compromise the entire application or lead to unauthorized access.

Jit Bot commands and options (e.g., ignore issue)

You can trigger Jit actions by commenting on this PR review:

#jit_ignore_fp Ignore and mark this specific single instance of finding as “False Positive”

#jit_ignore_accept Ignore and mark this specific single instance of finding as “Accept Risk”

#jit_ignore_type_in_file Ignore any finding of type "License Compliance Violation" in es-ds-docs/package.json; future occurrences will also be ignored.

#jit_undo_ignore Undo ignore command

jit-ci · 2025-01-23T16:05:13Z

es-ds-components/package.json

+    "private": false,
+    "type": "module",
+    "description": "An EnergySage Vue component library",
+    "main": "./nuxt.config.ts",


Security control: License Compliance Checker

License Compliance Violation

Found 3 violations in nuxt (BSD-3-Clause OR GPL-2.0):

nuxt -> nitropack -> listhen -> node-forge (BSD-3-Clause OR GPL-2.0)

nuxt -> nitropack -> unstorage -> listhen -> node-forge (BSD-3-Clause OR GPL-2.0)

nuxt -> unstorage -> listhen -> node-forge (BSD-3-Clause OR GPL-2.0)

Severity: HIGH

Why should you fix this issue?
This code introduces a dependency vulnerability. In a production environment, using vulnerable dependencies can lead to serious security risks. If an attacker exploits a known vulnerability in one of these dependencies, it could compromise the entire application or lead to unauthorized access.

Jit Bot commands and options (e.g., ignore issue)

You can trigger Jit actions by commenting on this PR review:

#jit_ignore_fp Ignore and mark this specific single instance of finding as “False Positive”

#jit_ignore_accept Ignore and mark this specific single instance of finding as “Accept Risk”

#jit_ignore_type_in_file Ignore any finding of type "License Compliance Violation" in es-ds-components/package.json; future occurrences will also be ignored.

#jit_undo_ignore Undo ignore command

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.

jit-ci · 2025-01-23T16:52:20Z

es-ds-docs/package.json

+        "format": "npm run format:prettier && npm run format:eslint"
+    },
+    "dependencies": {
+        "@energysage/es-ds-components": "^3.0.0-alpha.17",


Security control: License Compliance Checker

License Compliance Violation

Found 3 violations in @energysage/es-ds-components (BSD-3-Clause OR GPL-2.0):

@energysage/es-ds-components -> nuxt -> nitropack -> listhen -> node-forge (BSD-3-Clause OR GPL-2.0)

@energysage/es-ds-components -> nuxt -> nitropack -> unstorage -> listhen -> node-forge (BSD-3-Clause OR GPL-2.0)

@energysage/es-ds-components -> nuxt -> unstorage -> listhen -> node-forge (BSD-3-Clause OR GPL-2.0)

Severity: HIGH

Why should you fix this issue?
This code introduces a dependency vulnerability. In a production environment, using vulnerable dependencies can lead to serious security risks. If an attacker exploits a known vulnerability in one of these dependencies, it could compromise the entire application or lead to unauthorized access.

Jit Bot commands and options (e.g., ignore issue)

You can trigger Jit actions by commenting on this PR review:

#jit_ignore_fp Ignore and mark this specific single instance of finding as “False Positive”

#jit_ignore_accept Ignore and mark this specific single instance of finding as “Accept Risk”

#jit_ignore_type_in_file Ignore any finding of type "License Compliance Violation" in es-ds-docs/package.json; future occurrences will also be ignored.

#jit_undo_ignore Undo ignore command

ericdouglaspratt requested review from tomleo and nathanielwarner as code owners July 24, 2024 18:03

ericdouglaspratt changed the title ~~feat: create foundation for Vue 3 design system work~~ feat: feature branch for Vue 3 design system work Jul 24, 2024

tomleo reviewed Jul 24, 2024

View reviewed changes

ericdouglaspratt changed the title ~~feat: feature branch for Vue 3 design system work~~ feat: ESDS 2.0 Vue 3 design system based on PrimeVue Jul 25, 2024

ericdouglaspratt changed the title ~~feat: ESDS 2.0 Vue 3 design system based on PrimeVue~~ feat: ESDS 3.0 design system based on Vue 3 and PrimeVue Jul 25, 2024

ericdouglaspratt changed the title ~~feat: ESDS 3.0 design system based on Vue 3 and PrimeVue~~ feat: ESDS 3.0 release based on Vue 3 and PrimeVue Jul 25, 2024

ericdouglaspratt requested review from mpleroux and hroth1994 July 26, 2024 14:24

ericdouglaspratt added the primevue label Jul 29, 2024

nathanielwarner reviewed Aug 5, 2024

View reviewed changes

es-ds-docs/pages/index.vue Outdated Show resolved Hide resolved

es-ds-components/components/b-col.vue Outdated Show resolved Hide resolved

es-bs-base/scss/modules/blues.module.scss Outdated Show resolved Hide resolved

es-ds-docs/nuxt.config.ts Outdated Show resolved Hide resolved

nathanielwarner mentioned this pull request Aug 9, 2024

CED-1724: new folder structure and publish process for v3 #1467

Merged

8 tasks

hroth1994 and others added 7 commits September 18, 2024 11:20

Merge pull request #1517 from EnergySage/ced-1822-more-es-rating

1c5483b

feat: finish EsRating TODOs

fix: double events

2e3fff7

Merge branch 'esds-3.0-vue3-primevue' into CED-1755-slider

98674b5

fix: button text for side-by-side example

800e742

feat: added nav bar and footer

4d52d60

feat: add local focus variable

c8e5d86

chore: linting failure message

06a96c3

ericdouglaspratt and others added 26 commits December 4, 2024 16:13

fix: ran sass-migrator on files with deprecation warnings

9528e02

Merge pull request #1564 from EnergySage/ced-1998-fix-deprecation-war…

02a2560

…nings fix: ran sass-migrator on files with deprecation warnings

chore: updated versions for alpha release

0245f5e

chore: post-release install of new alpha releases

a670520

feat: enable templated data table cells; better match PrimeVue API

03cdb5a

Merge pull request #1565 from EnergySage/ced-2000-update-es-data-table

8bf7b92

feat: enable templated EsDataTable cells; better match PrimeVue API

chore: release es-ds-components 3.0.0-alpha.14

404c1a8

feat: add cookie link and left align section

58e1082

feat: add privacy choices link

6306fed

feat: add peek props to carousel and update numDots calc

0961048

docs: remove a todo comment

8011e61

Merge pull request #1567 from EnergySage/carousel-peek-styling-updates

9d4e195

feat: Add peek props to carousel and update numDots calculation

fix: accordion initial expand with multiple expand

5bf43ca

Merge branch 'esds-3.0-vue3-primevue' into CED-2041-fix-accordion-list

3347e6c

Merge pull request #1568 from EnergySage/CED-2041-fix-accordion-list

be83a4d

fix: accordion initial expand with multiple expand

chore: update package verions

fa58de0

fix: npm audit fix to resolve 1 moderate severity vulnerability

82ac0dc

chore: remove cookie notice link

c2cb22d

Merge branch 'esds-3.0-vue3-primevue' into ced-2034-add-footer-links

d0cfc9b

fix: fix typescript error

c0d50b7

chore: clean up styles

21a57ef

chore: run prettier

9db8a7c

fix: use aria-label

46dbbd3

refactor: update ccpa icon

95fd550

fix: move margin and replace TODO

0858df3

Merge pull request #1566 from EnergySage/ced-2034-add-footer-links

d7afa5f

feat: add preference center link to footer

jit-ci bot reviewed Jan 23, 2025

View reviewed changes

ericdouglaspratt added 2 commits January 23, 2025 11:49

chore: release es-ds-components 3.0.0-alpha.17

d714fa8

fix: use npm audit to fix two moderate vulnerabilities

a2ddf3d

jit-ci bot reviewed Jan 23, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: ESDS 3.0 release based on Vue 3 and PrimeVue #1461

feat: ESDS 3.0 release based on Vue 3 and PrimeVue #1461

ericdouglaspratt commented Jul 24, 2024 •

edited

Loading

ericdouglaspratt commented Jul 25, 2024 •

edited

Loading

mpleroux commented Jul 26, 2024 •

edited

Loading

hroth1994 commented Jul 26, 2024

mpleroux commented Jul 26, 2024

ericdouglaspratt commented Jul 26, 2024 •

edited

Loading

ericdouglaspratt commented Jul 29, 2024

hroth1994 commented Jul 29, 2024

ericdouglaspratt commented Jul 29, 2024

mpleroux commented Jul 29, 2024

mpleroux commented Jul 29, 2024 •

edited

Loading

nathanielwarner left a comment

swarmia bot commented Sep 4, 2024

jit-ci bot left a comment

jit-ci bot Jan 23, 2025

jit-ci bot Jan 23, 2025

jit-ci bot Jan 23, 2025

jit-ci bot Jan 23, 2025

jit-ci bot left a comment

jit-ci bot Jan 23, 2025

feat: ESDS 3.0 release based on Vue 3 and PrimeVue #1461

Are you sure you want to change the base?

feat: ESDS 3.0 release based on Vue 3 and PrimeVue #1461

Conversation

ericdouglaspratt commented Jul 24, 2024 • edited Loading

🔗 Linked issue

❓ Type of change

📚 Description

🥼 Testing

🧐 Feedback Requested / Focus Areas

📝 Checklist

ericdouglaspratt commented Jul 25, 2024 • edited Loading

mpleroux commented Jul 26, 2024 • edited Loading

hroth1994 commented Jul 26, 2024

mpleroux commented Jul 26, 2024

ericdouglaspratt commented Jul 26, 2024 • edited Loading

ericdouglaspratt commented Jul 29, 2024

hroth1994 commented Jul 29, 2024

ericdouglaspratt commented Jul 29, 2024

mpleroux commented Jul 29, 2024

mpleroux commented Jul 29, 2024 • edited Loading

nathanielwarner left a comment

Choose a reason for hiding this comment

swarmia bot commented Sep 4, 2024

jit-ci bot left a comment

Choose a reason for hiding this comment

jit-ci bot Jan 23, 2025

Choose a reason for hiding this comment

jit-ci bot Jan 23, 2025

Choose a reason for hiding this comment

jit-ci bot Jan 23, 2025

Choose a reason for hiding this comment

jit-ci bot Jan 23, 2025

Choose a reason for hiding this comment

jit-ci bot left a comment

Choose a reason for hiding this comment

jit-ci bot Jan 23, 2025

Choose a reason for hiding this comment

ericdouglaspratt commented Jul 24, 2024 •

edited

Loading

ericdouglaspratt commented Jul 25, 2024 •

edited

Loading

mpleroux commented Jul 26, 2024 •

edited

Loading

ericdouglaspratt commented Jul 26, 2024 •

edited

Loading

mpleroux commented Jul 29, 2024 •

edited

Loading