Merge pull request #677 from nasa-jpl/fix/v3-2-88-misc-issues

chore: package upgrades to match frontend, various bugfixes

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@3.0.3/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.changeset/fast-tips-train.md

@@ -0,0 +1,5 @@
+---
+"@explorer-1/vue": patch
+---
+
+upgrades packages to match www/frontend, fixes misc bugs for edu launch

.github/workflows/changeset.yml

@@ -0,0 +1,37 @@
+name: Changeset
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - '.changeset/**'
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  release:
+    name: Changeset
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js 20
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20.18.0
+
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        with:
+          version: 9
+          run_install: false
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Create Release Pull Request
+        uses: changesets/action@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.nvmrc

@@ -1 +1 @@
-v20.15.1
+v20.18.0

CONTRIBUTING.md

@@ -2,19 +2,28 @@
 
 Documentation on how to run this project locally and add more components.
 
-- [Getting started](#getting-started)
-  - [View the test page](#view-the-test-page)
-  - [View the Storybook](#view-the-storybook)
-  - [Testing your changes as a dependency in another project](#testing-your-changes-as-a-dependency-in-another-project)
-  - [Percy](#percy)
-- [Adding components](#adding-components)
-  - [Storybook](#storybook)
-  - [SCSS](#scss)
-  - [JavaScript](#javascript)
-- [Linting and Formatting](#linting-and-formatting)
-- [Pull request guidance](#pull-request-guidance)
-- [Publishing to npm](#publishing-to-npm)
-- [Contribution licensing](#contribution-licensing)
+- [For contributing developers](#for-contributing-developers)
+  - [Getting started](#getting-started)
+    - [View the test page](#view-the-test-page)
+    - [View the Storybook](#view-the-storybook)
+    - [Testing your changes as a dependency in another project](#testing-your-changes-as-a-dependency-in-another-project)
+    - [Percy](#percy)
+  - [Adding components](#adding-components)
+    - [Storybook](#storybook)
+      - [Adding a component story](#adding-a-component-story)
+      - [Reusing another component template](#reusing-another-component-template)
+      - [Decorators](#decorators)
+      - [Rebuilding assets](#rebuilding-assets)
+    - [SCSS](#scss)
+      - [Adding SCSS](#adding-scss)
+      - [Using Node modules](#using-node-modules)
+    - [JavaScript](#javascript)
+      - [Adding to scripts.js](#adding-to-scriptsjs)
+      - [Using Node modules](#using-node-modules-1)
+  - [Linting and Formatting](#linting-and-formatting)
+  - [Pull request guidance](#pull-request-guidance)
+  - [Publishing to npm](#publishing-to-npm)
+  - [Contribution licensing](#contribution-licensing)
 
 ## Getting started
 

Makefile

@@ -31,7 +31,6 @@ else
 	@make nvm-use
 	@echo '⏳ it can take a few minutes to install all of the $(YELLOW)node_modules$(RESET)'
 	@echo '🙆 this could be a good opportunity to have a stretch... '
-	@echo '⏭️  postinstall will check $(GREEN)workspaces$(RESET) with $(YELLOW)manypkg$(RESET)...'
 endif
 
 nvm:
@@ -47,6 +46,10 @@ i: install
 clean:
 	pnpm run clean
 
+## Version: Create a Changeset (walkthrough versioning)
+changeset:
+	pnpm run changeset
+
 ## Refresh: remove node_modules and install
 refresh:
 	pnpm run refresh

README.md

@@ -55,21 +55,26 @@ make html-storybook
 
 ## Table of contents
 
-- [Version 3.x.x docs (draft)](#version-3xx-docs-draft)
-  - [Publishing to npm](#publishing-to-npm)
-  - [Developing Vue components](#developing-vue-components)
-- [What's included](#whats-included)
-- [Installation](#installation)
-- [Using bundled assets](#using-bundled-assets)
-  - [CSS and JS](#css-and-js)
-  - [Fonts](#fonts)
-- [Compile your own: Using assets a la carte](#compile-your-own-using-assets-a-la-carte)
-  - [Styles](#styles)
-  - [JavaScript](#javascript)
-  - [Additional requirements for carousels](#additional-requirements-for-carousels)
-  - [Additional requirements for modals and lightboxes](#additional-requirements-for-modals-and-lightboxes)
-- [Component templates (HTML)](#component-templates-html)
-- [For contributing developers](#for-contributing-developers)
+- [Explorer 1: JPL's Design System](#explorer-1-jpls-design-system)
+  - [Version 3.x.x docs (draft)](#version-3xx-docs-draft)
+    - [Publishing to npm](#publishing-to-npm)
+    - [Developing Vue components](#developing-vue-components)
+  - [Table of contents](#table-of-contents)
+  - [What's included](#whats-included)
+  - [Installation](#installation)
+  - [Using bundled assets](#using-bundled-assets)
+    - [CSS and JS](#css-and-js)
+    - [Fonts](#fonts)
+  - [Compile your own: Using assets a la carte](#compile-your-own-using-assets-a-la-carte)
+    - [Styles](#styles)
+      - [Using the Explorer 1 Tailwind config](#using-the-explorer-1-tailwind-config)
+      - [Importing SCSS files](#importing-scss-files)
+      - [Preloading Fonts](#preloading-fonts)
+    - [JavaScript](#javascript)
+    - [Additional requirements for carousels](#additional-requirements-for-carousels)
+    - [Additional requirements for modals and lightboxes](#additional-requirements-for-modals-and-lightboxes)
+  - [Component templates (HTML)](#component-templates-html)
+  - [For contributing developers](#for-contributing-developers)
 
 ## What's included
 

apps/html-storybook/package.json

@@ -12,7 +12,7 @@
     "url": "https://github.com/nasa-jpl/explorer-1"
   },
   "engines": {
-    "node": "^20.13.1",
+    "node": "^20.18.0",
     "npm": "^10.5.2"
   },
   "prettier": "@explorer-1/prettier-config",
@@ -53,18 +53,18 @@
     "@storybook/preview-api": "^8.3.5",
     "@storybook/theming": "^8.3.5",
     "@whitespace/storybook-addon-html": "^6.1.1",
-    "autoprefixer": "^10.4.19",
+    "autoprefixer": "^10.4.20",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.38",
     "postcss-import": "^16.1.0",
     "remark-gfm": "^4.0.0",
-    "rimraf": "^5.0.5",
+    "rimraf": "^6.0.1",
     "storybook": "^8.3.5",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^3.4.14",
     "ts-node": "^10.9.2",
     "tslib": "^2.6.2",
-    "typescript": "^5.4.5",
-    "vite": "^5.3.1"
+    "typescript": "^5.6.3",
+    "vite": "^5.4.10"
   },
   "overrides": {
     "react-remove-scroll": {

apps/vue-storybook/package.json

@@ -38,15 +38,15 @@
     "@explorer-1/common-storybook": "workspace:*",
     "@explorer-1/vue": "workspace:*",
     "@fancyapps/ui": "^4.0.26",
-    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/forms": "^0.5.9",
     "click-outside-vue3": "^4.0.1",
-    "dayjs": "^1.11.11",
+    "dayjs": "^1.11.13",
     "mitt": "^3.0.1",
     "swiper": "^11.1.3",
-    "vue": "^3.5.3",
+    "vue": "^3.5.12",
     "vue-bind-once": "^0.2.1",
     "vue3-compare-image": "^1.2.5",
-    "vue3-observe-visibility": "^1.0.1"
+    "vue3-observe-visibility": "^1.0.2"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1",
@@ -65,27 +65,27 @@
     "@storybook/theming": "^8.3.5",
     "@storybook/vue3": "^8.3.5",
     "@storybook/vue3-vite": "^8.3.5",
-    "@vitejs/plugin-vue": "^5.0.4",
-    "@vue/eslint-config-prettier": "^7.1.0",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "@vue/eslint-config-prettier": "^10.1.0",
     "@whitespace/storybook-addon-html": "^6.1.1",
-    "a11y-dialog": "^8.1.0",
-    "autoprefixer": "^10.4.19",
-    "axe-playwright": "^2.0.1",
-    "chromatic": "^11.5.5",
+    "a11y-dialog": "^8.1.1",
+    "autoprefixer": "^10.4.20",
+    "axe-playwright": "^2.0.3",
+    "chromatic": "^11.16.5",
     "http-server": "^14.1.1",
-    "msw": "^2.3.0",
+    "msw": "^2.6.0",
     "msw-storybook-addon": "^2.0.2",
     "pinia": "^2.1.7",
-    "postcss": "^8.4.38",
+    "postcss": "^8.4.47",
     "postcss-import": "^16.1.0",
-    "rimraf": "^5.0.5",
+    "rimraf": "^6.0.1",
     "storybook": "^8.3.5",
     "storybook-addon-vue-slots": "^0.9.29",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^3.4.14",
     "ts-node": "^10.9.2",
-    "typescript": "^5.4.5",
-    "unplugin-vue-components": "^0.27.0",
-    "vite": "^5.3.1",
-    "vue-tsc": "^2.0.6"
+    "typescript": "^5.6.3",
+    "unplugin-vue-components": "^0.27.4",
+    "vite": "^5.4.10",
+    "vue-tsc": "^2.1.10"
   }
 }

apps/vue-storybook/vite.config.ts

@@ -1,5 +1,5 @@
-import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite'
 // import Components from 'unplugin-vue-components/vite'
 
 export default defineConfig({
@@ -26,5 +26,19 @@ export default defineConfig({
   build: {
     // storybook-only
     modulePreload: false
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        silenceDeprecations: [
+          // Deprecation Warning: https://sass-lang.com/d/mixed-decls
+          'mixed-decls',
+          // Deprecation Warning: https://sass-lang.com/d/import
+          'import',
+          // Deprecation Warning: https://sass-lang.com/d/legacy-js-api
+          'legacy-js-api'
+        ]
+      }
+    }
   }
 })

package.json

@@ -22,6 +22,7 @@
     "url": "https://github.com/nasa-jpl/explorer-1"
   },
   "scripts": {
+    "changeset": "pnpm exec changeset",
     "clean": "pnpm clean:nodemodules && pnpm clean:dist && pnpm clean:nuxt",
     "clean:nodemodules": "rimraf \"**/node_modules\"",
     "clean:cache": "rimraf \"**/.cache\"",
@@ -36,7 +37,7 @@
     "lint:fix": "pnpm run -r --if-present lint:fix"
   },
   "engines": {
-    "node": "^20.13.1",
+    "node": "^20.18.0",
     "pnpm": ">=9.1.1",
     "npm": "please-use-pnpm",
     "yarn": "please-use-pnpm"
@@ -50,6 +51,10 @@
     "@explorer-1/vue-storybook": "workspace:^",
     "@types/node": "^20.12.12"
   },
+  "dependencies": {
+    "@changesets/changelog-github": "^0.5.0",
+    "@changesets/cli": "^2.27.9"
+  },
   "resolutions": {
     "jackspeak": "2.1.1"
   },

packages/common-storybook/package.json

@@ -15,8 +15,8 @@
     "@explorer-1/common": "workspace:*",
     "@explorer-1/prettier-config": "workspace:*",
     "@explorer-1/tsconfig": "workspace:*",
-    "rimraf": "^5.0.5",
+    "rimraf": "^6.0.1",
     "ts-node": "^10.9.2",
-    "typescript": "^5.4.5"
+    "typescript": "^5.6.3"
   }
 }

packages/configs/eslint/package.json

@@ -16,15 +16,15 @@
   "prettier": "@explorer-1/prettier-config",
   "devDependencies": {
     "@eslint/eslintrc": "^3.1.0",
-    "@eslint/js": "^9.3.0",
-    "@stylistic/eslint-plugin": "^2.1.0",
-    "@typescript-eslint/eslint-plugin": "^7.10.0",
-    "@typescript-eslint/parser": "^7.10.0",
-    "eslint": "^9.3.0",
+    "@eslint/js": "^9.14.0",
+    "@stylistic/eslint-plugin": "^2.10.1",
+    "@typescript-eslint/eslint-plugin": "^8.13.0",
+    "@typescript-eslint/parser": "^8.13.0",
+    "eslint": "^9.14.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-storybook": "^0.8.0",
-    "eslint-plugin-vue": "^9.26.0",
-    "vue-eslint-parser": "^9.4.2"
+    "eslint-plugin-vue": "^9.30.0",
+    "vue-eslint-parser": "^9.4.3"
   }
 }

packages/html/package.json

@@ -36,10 +36,10 @@
   "devDependencies": {
     "@explorer-1/common": "workspace:*",
     "@explorer-1/prettier-config": "workspace:*",
-    "autoprefixer": "^10.4.19",
-    "lazysizes": "^5.3.0",
+    "autoprefixer": "^10.4.20",
+    "lazysizes": "^5.3.2",
     "postcss-import": "^16.1.0",
-    "typescript": "^5.4.5",
-    "vite": "^5.3.1"
+    "typescript": "^5.6.3",
+    "vite": "^5.4.10"
   }
 }