@pocketprep/ui-kit 2.0.40 → 3.0.0

package/package.json

@@ -1,84 +1,103 @@
 {
   "name": "@pocketprep/ui-kit",
-  "version": "2.0.40",
+  "version": "3.0.0",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {
-    "serve": "vue-cli-service styleguidist",
-    "build": "npm run build-lib && npm run build-docs",
-    "build-lib": "vue-cli-service build --target lib --name @pocketprep/ui-kit src/main.ts",
-    "build-docs": "vue-cli-service styleguidist:build",
+    "dev": "vite",
+    "build": "run-p type-check build-only",
+    "preview": "vite preview",
+    "test:e2e": "start-server-and-test preview :4173 'cypress run --e2e'",
+    "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' :4173 'cypress open --e2e'",
+    "test:unit": "cypress run --component",
+    "test:unit:dev": "cypress open --component",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --noEmit -p tsconfig.json --composite false",
     "patch": "npm version patch --no-git-tag-version",
-    "start": "open docs/index.html",
-    "lint": "vue-cli-service lint && stylelint '**/*.{scss,vue}'",
-    "test": "vue-cli-service test:unit 'tests/**/*.spec.{ts,js}'",
-    "inspect-webpack": "vue-cli-service inspect > inspect-webpack.js",
-    "uikit-copy": "npm run build-lib && pwd | pbcopy"
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore && stylelint '**/*.{scss,vue}'",
+    "uikit-copy": "npm run build && pwd | pbcopy"
   },
-  "main": "./dist/@pocketprep/ui-kit.common.js",
+  "type": "module",
+  "main": "./dist/@pocketprep/ui-kit.umd.cjs",
+  "module": "./dist/@pocketprep/ui-kit.js",
   "files": [
-    "assets",
+    "lib",
     "dist",
-    "styles",
-    "pocketprep.scss",
-    "pocketprep-export.module.scss",
-    ".eslintrc.js",
-    "config",
-    "stylelint.config.js",
-    "**/*.d.ts"
+    ".eslintrc.cjs",
+    "stylelint.config.cjs"
   ],
+  "exports": {
+    ".": {
+      "import": "./dist/@pocketprep/ui-kit.js",
+      "require": "./dist/@pocketprep/ui-kit.umd.cjs"
+    },
+    "./styles": {
+      "import": "./dist/style.css",
+      "require": "./dist/style.css"
+    },
+    "./pocketprep.scss": {
+      "import": "./lib/pocketprep.scss",
+      "require": "./lib/pocketprep.scss"
+    },
+    "./pocketprep-export.module.scss": {
+      "import": "./lib/pocketprep-export.module.scss",
+      "require": "./lib/pocketprep-export.module.scss"
+    },
+    "./fonts": {
+      "import": "./lib/styles/fonts.css",
+      "require": "./lib/styles/fonts.css"
+    },
+    "./normalize": {
+      "import": "./lib/styles/normalize.css",
+      "require": "./lib/styles/normalize.css"
+    },
+    "./breakpoints": {
+      "import": "./lib/styles/_breakpoints.scss",
+      "require": "./lib/styles/_breakpoints.scss"
+    },
+    "./colors": {
+      "import": "./lib/styles/_colors.scss",
+      "require": "./lib/styles/_colors.scss"
+    }
+  },
   "dependencies": {
-    "core-js": "3.22.6",
-    "highcharts": "9.2.2",
-    "litepicker": "2.0.11",
+    "highcharts": "10.3.3",
+    "litepicker": "2.0.12",
     "resize-observer": "1.0.4",
-    "vue": "2.6.14",
-    "vue-class-component": "7.2.6",
-    "vue-property-decorator": "9.1.2"
+    "vue": "3.2.47",
+    "vue-facing-decorator": "2.1.13"
   },
   "devDependencies": {
-    "@pocketprep/types": "1.6.41",
-    "@types/chai": "4.2.21",
-    "@types/mocha": "9.0.0",
-    "@vue/cli-plugin-babel": "5.0.4",
-    "@vue/cli-plugin-eslint": "5.0.4",
-    "@vue/cli-plugin-typescript": "5.0.4",
-    "@vue/cli-plugin-vuex": "5.0.4",
-    "@vue/cli-service": "5.0.4",
-    "@vue/eslint-config-typescript": "10.0.0",
-    "@vue/test-utils": "1.2.2",
-    "chai": "4.3.6",
-    "eslint": "8.16.0",
-    "eslint-plugin-vue": "8.7.1",
-    "lint-staged": "11.1.2",
-    "react": "17.0.2",
-    "sass": "1.52.1",
-    "sass-loader": "13.0.0",
-    "stylelint": "13.13.1",
-    "stylelint-config-standard": "22.0.0",
-    "typescript": "4.6.4",
-    "vue-cli-plugin-styleguidist": "4.45.0",
-    "vue-styleguidist": "4.45.1",
-    "vue-template-compiler": "2.6.14"
+    "@pocketprep/types": "1.8.4",
+    "@vitejs/plugin-vue": "4.0.0",
+    "@vue/eslint-config-typescript": "11.0.2",
+    "@vue/tsconfig": "0.1.3",
+    "cypress": "12.0.2",
+    "eslint": "8.34.0",
+    "eslint-plugin-cypress": "2.12.1",
+    "eslint-plugin-vue": "9.9.0",
+    "npm-run-all": "4.1.5",
+    "postcss-html": "1.5.0",
+    "sass": "1.58.3",
+    "stylelint": "15.1.0",
+    "stylelint-config-recommended-scss": "9.0.1",
+    "stylelint-config-recommended-vue": "1.4.0",
+    "typescript": "4.9.5",
+    "vite": "4.1.2",
+    "vue-tsc": "1.1.3",
+    "yorkie": "2.0.0"
   },
   "bugs": {
     "url": "https://github.com/Pocket-Prep/ui-kit/issues"
   },
   "gitHooks": {
-    "pre-commit": "lint-staged"
+    "pre-commit": "npm run build"
   },
   "homepage": "https://github.com/Pocket-Prep/ui-kit#readme",
   "keywords": [
     "pocketprep"
   ],
   "license": "MIT",
-  "lint-staged": {
-    "*.{js,jsx,vue,ts,tsx}": [
-      "npm run lint",
-      "npm run build",
-      "git add docs/"
-    ]
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Pocket-Prep/ui-kit.git"

package/{stylelint.config.js → stylelint.config.cjs}

@@ -1,7 +1,9 @@
 module.exports = {
-    'extends': 'stylelint-config-standard',
+    'extends': [
+        'stylelint-config-recommended-scss',
+        'stylelint-config-recommended-vue/scss',
+    ],
     'rules': {
-        'indentation': 4,
         'at-rule-no-unknown': null,
         'selector-pseudo-class-no-unknown': [
             true,
@@ -11,9 +13,10 @@ module.exports = {
         ],
         'selector-pseudo-element-no-unknown': null,
         'selector-type-no-unknown': null,
-        'declaration-colon-newline-after': 'always-multi-line',
         'no-descending-specificity': null,
         'property-no-unknown': null,
         'alpha-value-notation': 'number',
+        'scss/at-import-no-partial-leading-underscore': null,
+        'scss/no-global-function-names': null,
     },
 }

package/assets/Fonts.md

@@ -1,114 +0,0 @@
-- Avenir is available on MacOS, but we host Muli locally for other OS support.
-- Avenir and Muli have slightly different font weights, so we "normalize" them as follows:
-    - Avenir Next 400 (regular) / Muli 400 (regular) = font-weight: 400 / normal
-    - Avenir Next 500 (medium) / Muli 600 (demi-bold) = font-weight: 500 / medium
-    - Avenir Next 600 (demi-bold) / Muli 700 (bold) = font-weight: 600 / demi-bold
-
-```vue
-<template>
-    <div class="assets-docs">
-        <div class="assets-docs__400">
-            <h3>Font Weight: 400 (regular)</h3>
-            <div class="assets-docs__comparison">
-                <div class="assets-docs__avenir">
-                    <h4>Avenir</h4>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </div>
-                <div class="assets-docs__muli">
-                    <h4>Muli</h4>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </div>
-            </div>
-        </div>
-        <div class="assets-docs__500">
-            <h3>Font Weight: 500 (medium)</h3>
-            <div class="assets-docs__comparison">
-                <div class="assets-docs__avenir">
-                    <h4>Avenir</h4>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </div>
-                <div class="assets-docs__muli">
-                    <h4>Muli</h4>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </div>
-            </div>
-        </div>
-        <div class="assets-docs__600">
-            <h3>Font Weight: 600 (demi-bold)</h3>
-            <div class="assets-docs__comparison">
-                <div class="assets-docs__avenir">
-                    <h4>Avenir</h4>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </div>
-                <div class="assets-docs__muli">
-                    <h4>Muli</h4>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </div>
-            </div>
-        </div>
-        <div class="assets-docs__700">
-            <h3>Font Weight: 700 (bold)</h3>
-            <div class="assets-docs__comparison">
-                <div class="assets-docs__avenir">
-                    <h4>Avenir</h4>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </div>
-                <div class="assets-docs__muli">
-                    <h4>Muli</h4>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </div>
-            </div>
-        </div>
-        <Styleguidist />
-    </div>
-</template>
-
-<script>
-import Styleguidist from './Styleguidist.vue'
-
-export default {
-    components: {
-        Styleguidist,
-    }
-}
-</script>
-
-<style>
-h3, h4 {
-    margin: 0;
-}
-
-.assets-docs__400 {
-    font-weight: 400;
-}
-
-.assets-docs__500 {
-    font-weight: 500;
-}
-
-.assets-docs__600 {
-    font-weight: 600;
-}
-
-.assets-docs__700 {
-    font-weight: 700;
-}
-
-.assets-docs__comparison {
-    display: flex;
-}
-
-.assets-docs__comparison div {
-    padding: 10px;
-    width: 50%;
-}
-
-.assets-docs__avenir {
-    font-family: Avenir Next;
-}
-
-.assets-docs__muli {
-    font-family: Muli;
-}
-</style>
-```

package/assets/Images.md

@@ -1,2 +0,0 @@
-![favicon](favicon.ico)  
-favicon.ico

package/assets/Styleguidist.vue

@@ -1,11 +0,0 @@
-<template>
-    <div class="styleguidist" />
-</template>
-
-<style lang="scss">
-@import 'ui-kit/pocketprep.scss';
-
-body {
-    overflow: initial !important; // overwrite quiz container overflow: hidden in styleguidist
-}
-</style>