@asd20/ui 3.2.1044 → 3.3.0

package/.eslintrc.js

@@ -1,15 +1,54 @@
+// .eslintrc.js (for @asd20/ui)
 module.exports = {
   root: true,
+
   env: {
+    browser: true,
     node: true,
-    jest: true,
+    jest: true
   },
-  extends: ['plugin:vue/essential', '@vue/prettier'],
+
+  // Use vue-eslint-parser for SFCs; delegate <script> to @babel/eslint-parser
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    parser: '@babel/eslint-parser',
+    requireConfigFile: false,
+    babelOptions: {
+      presets: ['@vue/cli-plugin-babel/preset']
+    },
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  },
+
+  extends: [
+    'eslint:recommended',
+    'plugin:vue/recommended'
+    // If you use Prettier formatting, add '@vue/eslint-config-prettier'
+  ],
+
   rules: {
     'no-console': 'off',
     'no-debugger': 'off',
+    'vue/v-slot-style': 'off'
   },
-  parserOptions: {
-    parser: 'babel-eslint',
-  },
+
+  // Useful in a component library to avoid linting built artfacts and external deps
+  ignorePatterns: ['dist', 'node_modules', 'packages/**/dist', 'storybook-static'],
+
+  overrides: [
+    // Loosen rules slightly for Storybook stories
+    {
+      files: ['**/*.stories.@(js|jsx|ts|tsx)'],
+      rules: {
+        'vue/no-unused-components': 'warn'
+      }
+    },
+    // Keep Vue SFCs consistent
+    {
+      files: ['**/*.vue'],
+      rules: {
+        'vue/no-unused-components': 'warn'
+      }
+    }
+  ]
 }

package/package.json

@@ -1,24 +1,26 @@
 {
   "name": "@asd20/ui",
+  "version": "3.3.0",
+  "private": false,
+  "license": "MIT",
   "sideEffects": [
     "*.css",
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.1044",
-  "private": false,
-  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://asd20dev@dev.azure.com/asd20dev/asd20-ui/_git/asd20-ui"
   },
+  "engines": {
+    "node": ">=20",
+    "npm": ">=10"
+  },
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
-    "storybook": "start-storybook -s ./public -p 9000",
-    "test:e2e": "vue-cli-service test:e2e",
-    "test:unit": "vue-cli-service test:unit",
+    "storybook": "start-storybook -p 9000",
     "build:package": "./build-scripts/build-components.sh",
     "build:icons": "./build-scripts/build-icons.sh",
     "release": "release-it"
@@ -27,7 +29,7 @@
     "vue": "2.6.14"
   },
   "dependencies": {
-    "axios": "^0.19.2",
+    "axios": "^1.12.2",
     "basicscroll": "^3.0.2",
     "countup.js": "^2.0.0",
     "date-fns": "^2.30.0",
@@ -50,41 +52,33 @@
     "vuex": "^3.0.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.3.4",
-    "@release-it/conventional-changelog": "^1",
+    "@babel/core": "^7.28.4",
+    "@babel/eslint-parser": "^7.28.4",
+    "@release-it/conventional-changelog": "^10.0.1",
     "@storybook/addon-a11y": "^6.5.16",
     "@storybook/addon-actions": "^6.5.16",
     "@storybook/addon-controls": "^6.5.16",
     "@storybook/addon-docs": "^6.5.16",
     "@storybook/addon-knobs": "^6.4.0",
     "@storybook/addon-links": "^6.5.16",
+    "@storybook/builder-webpack5": "^6.5.16",
+    "@storybook/manager-webpack5": "^6.5.16",
     "@storybook/vue": "^6.5.16",
-    "@vue/cli-plugin-babel": "^3.4.0",
-    "@vue/cli-plugin-e2e-cypress": "^3.4.0",
-    "@vue/cli-plugin-eslint": "^3.4.0",
-    "@vue/cli-plugin-unit-jest": "^3.9.0",
-    "@vue/cli-service": "^3.7.0",
+    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/cli-plugin-eslint": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
     "@vue/eslint-config-prettier": "^4.0.1",
-    "@vue/test-utils": "^1.0.0-beta.20",
-    "array-to-tree": "^3.3.0",
     "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "^10.0.1",
-    "babel-jest": "^23.6.0",
-    "babel-loader": "^8.0.5",
-    "babel-polyfill": "^6.26.0",
-    "babel-preset-vue": "^2.0.2",
-    "css-loader": "^2.1.0",
-    "eslint": "^5.8.0",
-    "eslint-plugin-vue": "^5.0.0",
-    "html-webpack-plugin": "^3.2.0",
-    "jest-image-snapshot": "^2.5.0",
-    "lint-staged": "^8.1.0",
-    "puppeteer": "^1.9.0",
+    "core-js": "^3.37.1",
+    "eslint": "^7.32.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-vue": "^7.20.0",
+    "lint-staged": "^15.2.9",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "release-it": "^10.2.0",
+    "release-it": "^19.0.5",
     "sass": "^1.69.0",
-    "sass-loader": "10.1.1",
+    "sass-loader": "13.3.2",
     "storybook-addon-vue-info": "^1.4.1",
     "stylelint": "^9.10.1",
     "stylelint-config-css-modules": "^1.3.0",
@@ -94,13 +88,12 @@
     "vue": "2.6.14",
     "vue-class-component": "^7.0.2",
     "vue-docgen-api": "^3.26.0",
-    "vue-loader": "^15.8.3",
+    "vue-loader": "^15.11.1",
     "vue-router": "^3.1.4",
     "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "2.6.14",
     "vuex-pathify": "^1.1.3"
   },
-  "gitHooks": {},
   "lint-staged": {
     "*.js": [
       "vue-cli-service lint",

package/src/components/atoms/Asd20Factoid/index.vue

@@ -94,7 +94,7 @@ $factoid-fg: var(--website-card__reverse-background-color);
   text-align: center;
   padding: space(1) 0;
   background: $factoid-bg;
-  // background-image: url('/statics/images/chalk-dark.png');
+  // background-image: var(--website-texture__default);
   background-size: 320px auto;
   background-position-y: top;
   box-sizing: border-box;

package/src/components/organisms/Asd20SiteMenu/index.vue

@@ -127,7 +127,7 @@
 <script>
 // import Vue from 'vue'
 
-import { setTimeout } from 'timers'
+// import { setTimeout } from 'timers'
 import { FocusTrap } from 'focus-trap-vue'
 import Asd20Icon from '../../atoms/Asd20Icon'
 // import VScrollLock from 'v-scroll-lock'

package/src/components/templates/Asd20ProfileTemplate/index.vue

@@ -669,7 +669,7 @@ export default {
 
   &__primary-content {
     background: asd20-swatch('background-alt', 7);
-    background-image: url('/img/chalk-dark.png');
+    background-image: var(--website-texture__default);
     background-position-y: top;
     padding: 0 space(1);
     display: flex;

package/src/components/templates/Asd20SchoolHomeTemplate/index.vue

@@ -364,7 +364,7 @@ export default {
 
   &::v-deep .widgets-section {
     background: var(--website-page__alternate-background-t70);
-    background-image: url('/statics/images/chalk-dark.png');
+    background-image: var(--website-texture__default);
     background-position-y: top;
     padding-top: 1px; //fix bug
 

package/src/components/templates/Asd20SchoolHomeVideoTemplate/index.vue

@@ -320,7 +320,7 @@ export default {
 
   &::v-deep .widgets-section {
     background: var(--website-page__alternate-background-t70);
-    background-image: url('/statics/images/chalk-dark.png');
+    background-image: var(--website-texture__default);
     background-position-y: top;
     padding-top: 1px;
 

package/vue.config.js

@@ -1,25 +1,51 @@
+// vue.config.js
+const path = require('path')
+
 module.exports = {
-  chainWebpack: config => {
-    config.devServer.disableHostCheck(true)
-  },
+  // For consumers that import from @asd20/ui in Vue 2 apps
+  transpileDependencies: ['@asd20/ui'],
+
   configureWebpack: {
-    // We provide the app's title in Webpack's name field, so that
-    // it can be accessed in index.html to inject the correct title.
-    name: 'Academy District 20',
-    // Set up all the aliases we use in our app.
-    resolve: {
-      alias: require('./aliases.config').webpack,
-    },
-    devtool: 'source-map',
+    name: 'Academy District 20 UI',
+    resolve: { alias: require('./aliases.config').webpack },
+    devtool: 'source-map'
   },
 
+  // Keep CSS maps on for library dev; you can turn off for prod if desired
   css: {
-    // Enable CSS source maps.
     sourceMap: true,
-    extract: true,
+    extract: true
+  },
+
+  // Match your apps: warn instead of error on lint
+  lintOnSave: 'warning',
+
+  // Example: if you maintain an internal SVG sprite for docs/dev
+  chainWebpack: (config) => {
+    const iconsDir = path.resolve(__dirname, 'src/assets/icons')
+    // If you don’t use a sprite here, you can remove this whole block
+    config.module.rule('svg').exclude.add(iconsDir)
+    config.module
+      .rule('svg-sprite')
+      .test(/\.svg$/)
+      .include.add(iconsDir)
+      .end()
+      .use('svg-sprite-loader')
+      .loader('svg-sprite-loader')
+      .options({ symbolId: 'icon-[name]' })
+      .end()
+      .use('svgo-loader')
+      .loader('svgo-loader')
+      .options({
+        plugins: [
+          { name: 'preset-default' },
+          { name: 'removeViewBox', active: false }
+        ]
+      })
   },
 
-  lintOnSave: undefined,
+  // Smaller, cleaner prod builds like the apps
+  productionSourceMap: false,
 
-  pluginOptions: {},
+  pluginOptions: {}
 }