Merge pull request #12 from uw-it-aca/develop

Develop
uw-it-aca · Nov 24, 2021 · e127892 · e127892
2 parents 10ad34d + 5843e8d
commit e127892
Show file tree

Hide file tree

Showing 58 changed files with 1,012 additions and 1,284 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
diff --git a/.prettierrc b/.prettierrc
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,4 +1,13 @@
 module.exports = {
-  stories: ['../src/stories/*.stories.js'],
-  addons: ['@storybook/addon-essentials', '@storybook/addon-links'],
-};
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials"
+  ],
+  "core": {
+    "builder": "storybook-builder-vite"
+  }
+}
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,10 +1,9 @@
-import '../src/assets/css/custom.scss';
-import '../src/assets/css/global.scss';
-
-/* use this parameter for now... need to figure out how
-to remove padding for layout stories ONLY */
-
 export const parameters = {
-  // layout: 'fullscreen',
-  // docs: { inlineStories: false },
-};
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}
diff --git a/README.md b/README.md
@@ -1,36 +1,33 @@
 # axdd-components
 AXDD VueJS Component Library
 
-## Project setup
-```
-npm install
-```
+* Vue 2
+* Vite 2
+* Bootstrap 5
 
-### Compiles and hot-reloads for development
-```
-npm run serve
-```
 
-### Compiles and minifies for production
-```
-npm run build
-```
+## Getting Started
+
+> Note to Vue users: Vite currently only works with Vue 3.x. This project uses vite-plugin-vue2 as a work around.
 
-### Cypress E2E testing
+```bash
+$ git clone [email protected]:uw-it-aca/axdd-components.git
+$ cd axdd-components
+$ npm install
 ```
-npm run test:e2e
+### Compiles and hot-reloads for development
+```bash
+$ npm run dev
 ```
 
-### Lints and fixes files
-```
-npm run lint
+### Compiles and minifies for production
+```bash
+$ npm run build
 ```
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
 
 ## Using Storybook
 
 ### Run Storybook server
-```
+```bash
 npm run storybook:serve
-```
+```
diff --git a/babel.config.js b/babel.config.js
diff --git a/cypress.json b/cypress.json
diff --git a/public/favicon.ico → favicon.ico b/public/favicon.ico → favicon.ico
diff --git a/index.html b/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="favicon.ico">
+    <title>AXDD Components</title>
+
+     <!-- google fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Encode+Sans:wght@700&family=Open+Sans:ital,wght@0,400;0,700;1,400&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -3,45 +3,37 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "test:e2e": "vue-cli-service test:e2e",
-    "lint": "vue-cli-service lint",
-    "storybook:build": "vue-cli-service storybook:build -c .storybook",
-    "storybook:serve": "vue-cli-service storybook:serve -p 6006 -c .storybook"
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.32",
     "@fortawesome/free-regular-svg-icons": "^5.15.1",
     "@fortawesome/free-solid-svg-icons": "^5.15.1",
-    "@fortawesome/vue-fontawesome": "^2.0.2",
-    "bootstrap": "^4.5.3",
-    "bootstrap-vue": "^2.21.1",
-    "core-js": "^3.6.5",
-    "vue": "^2.6.12"
+    "@fortawesome/vue-fontawesome": "^3.0.0-4",
+    "@popperjs/core": "^2.9.2",
+    "bootstrap": "^5.1.0",
+    "bootstrap-icons": "^1.5.0",
+    "jquery": "^3.6.0",
+    "vue": "^3.1.4",
+    "vue-router": "^4.0.10",
+    "vue3-mq": "^2.3.3",
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^6.2.9",
-    "@storybook/addon-links": "^6.2.9",
-    "@storybook/vue": "^6.2.9",
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-e2e-cypress": "^4.5.10",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-router": "^4.5.9",
-    "@vue/cli-plugin-vuex": "^4.5.9",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-vue": "^6.2.2",
-    "prettier": "^1.19.1",
-    "sass": "^1.32.13",
-    "sass-loader": "^8.0.2",
-    "vue-cli-plugin-storybook": "~2.0.0",
-    "vue-mq": "^1.0.1",
-    "vue-router": "^3.4.9",
-    "vue-template-compiler": "^2.6.11",
-    "vuex": "^3.6.0"
+    "@babel/core": "^7.14.6",
+    "@storybook/addon-actions": "^6.4.0-alpha.18",
+    "@storybook/addon-essentials": "^6.4.0-alpha.18",
+    "@storybook/addon-links": "^6.4.0-alpha.18",
+    "@storybook/vue3": "^6.4.0-alpha.18",
+    "@vitejs/plugin-vue": "^1.2.2",
+    "@vue/compiler-sfc": "^3.1.4",
+    "babel-loader": "^8.2.2",
+    "sass": "^1.35.2",
+    "storybook-builder-vite": "^0.0.12",
+    "vite": "^2.3.3"
   }
 }
diff --git a/public/index.html b/public/index.html
diff --git a/src/_base/card-property.vue b/src/_base/card-property.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="d-md-flex mb-3 myuw-text-md">
-    <div class="flex-md-fill mr-3 bd-highlight font-weight-bold property-label">
+    <div class="flex-md-fill me-3 bd-highlight font-weight-bold property-label">
       {{ title }}
     </div>
     <div class="flex-md-fill">

diff --git a/src/_base/card-status.vue b/src/_base/card-status.vue
@@ -4,7 +4,7 @@
       <h4 class="h6 m-0 text-dark font-weight-bold flex-fill">
         <slot name="status-label" />
       </h4>
-      <div class="flex-fill text-right">
+      <div class="flex-fill text-end">
         <span class="h4 font-weight-bold">
           <slot name="status-value" />
         </span>
@@ -18,4 +18,4 @@
 
 <script>
 export default {};
-</script>
+</script>
diff --git a/src/_base/card.vue b/src/_base/card.vue
@@ -1,14 +1,14 @@
 <template>
-  <b-card class="card rounded-0 shadow-sm mb-3 blah">
-    <slot></slot>
-  </b-card>
+  <div class="card rounded-0 shadow-sm mb-3">
+    <div class="card-body">
+      <slot></slot>
+    </div>
+  </div>
 </template>
 
 <script>
-import { BCard } from 'bootstrap-vue';
 
 export default {
-  components: { BCard },
   data: function () {
     return {};
   },