@fishawack/lab-velocity 2.0.0-beta.7 → 2.0.0-beta.8

package/README.md

@@ -10,65 +10,176 @@ Prevent code repetition.
 
 ## Getting started
 
+### Requirements
+
+```json
+"vue": "^3.3.4",
+"vue-router": "^4.2.4",
+"vuex": "^4.1.0",
+"vuex-persistedstate": "^4.1.0"
+"vue-loader": "^17.2.2"
+```
+
 ### Install
 
 ```bash
 npm install @fishawack/lab-velocity
 ```
 
-### Auth Module
+## Hydrate Views
+
+Frontend & Admin files to work with the Hydrate Module including routes, store, axios and components.
+
+### Installation
+
+### Configure axios
+
+##### script.js
+
+```js
+import { Auth } from "@fishawack/lab-velocity";
+
+// Call in your boot method
+Auth.Axios.setAxiosDefaults(process.env.APP_URL, router);
+```
+
+### Configure router
 
-    Frontend files to to work with the Hydrate Module.
+##### router.js
 
-#### Installation
+```js
+import { Auth } from "@fishawack/lab-velocity";
+import store from "./store.js";
 
-##### Import Axios File
+Auth.Router.beforeEach(router, store);
+```
+
+### Configure routes
+
+There are two different set of routes for the admin and the frontend.
+
+##### routes.js
+
+```js
+import { Auth } from "@fishawack/lab-velocity";
 
-    import axios from "axios";
-    import "@fishawack/lab-velocity/AuthModule/js/AuthAxios.js";
+[
+    // ... other routes
 
-##### Import Routes File
+    // End user routes for login, register, chang password etc
+    ...Auth.Router.routes(node),
 
-    Inside Router.js file
-    import { authRoutes, configureRoutes } from "@fishawack/lab-velocity/AuthModule/js/AuthRoutes";
+    // Admin routes for headless login & managing users & companies
+    ...Auth.Router.adminRoutes(node),
 
-    let routes = require("./routes.js")(null, store).concat(authRoutes(null,store,store.state.auth.authBase));
-    Add routes to createRouter call
+    // ... wildcard 404 routes etc
+];
+```
+
+### Configure store
 
-    add method call after createRouter
-    configureRoutes(router);
+##### store.js
 
-##### Import Store
+```js
+import { Auth } from "@fishawack/lab-velocity";
 
-    import AuthStore from "@fishawack/lab-velocity/AuthModule/js/AuthStore.js";
-    Inside createStore method add
-        modules: {
-            auth: AuthStore
-        },
-    Inside VuexPersistedState add
-        paths:["auth"]
+// Call in store
+{
+    plugins: [
+        VuexPersistedState({
+            // ...
+            paths: ["auth.user"],
+        }),
+    ],
 
-    At bottom of file set
-        window.store = store;
+    modules: {
+        auth: Auth.Store,
+    },
 
-##### SVGS
+    // ...
+}
+```
 
-    Ensure Content has Velocity pulled in
-    {
-        "lftp": "ftp-fishawack.egnyte.com",
-        "location": "Shared/FW/Knutsford/Digital/Auto-Content/Lab/Velocity"
-    }
-    Copy out the svg folder contents into the svg files within vue.
+### Base Styles (admin)
 
-##### ENV VARS
+For the **admin only** you should replace the two references to variables & defaults with @fishawack/lab-velocity ones.
 
-    HYDRATE_LOGO=example-logo
+#### \_variables.scss
 
-    HYDRATE_LOGO=example-logo(No Default set, name of svg logo to display on page)
-    HYDRATE_REDIRECT=(Default index if not configured)
-    HYDRATE_CONTACT=(Default mailto:EP@avalerehealth, Email for contact us button)
+```sass
+@import "@fishawack/lab-velocity/variables";
+
+// Set global variables here, e.g $color6: red;
+```
 
-##### Verify dependencies are installed
+#### \_defaults.scss
 
-    Axios
-    form-backend-validation
+```sass
+@use "variables";
+@import "@fishawack/lab-velocity/defaults";
+
+$colors: variables.dynamic("color", module-variables("variables"));
+
+// Override lab-ui defaults here, e.g $button: $color6;
+```
+
+### Route Styles
+
+There are two different set of sass imports for the admin and the frontend routes.
+
+#### Frontend
+
+```sass
+// vendor.scss
+
+@import
+```
+
+#### Admin
+
+##### vendor.scss
+
+```sass
+// Vendor imports / Lab-ui imports
+@import "@fishawack/lab-ui/typography";
+@import "@fishawack/lab-ui/grid";
+@import "@fishawack/lab-ui/utilities";
+
+// Lab velocity
+@import "@fishawack/lab-velocity/base";
+@import "@fishawack/lab-velocity/components/pageTitle";
+@import "@fishawack/lab-velocity/components/breadcrumbs";
+@import "@fishawack/lab-velocity/components/table";
+@import "@fishawack/lab-velocity/components/icon";
+@import "@fishawack/lab-velocity/components/basic";
+@import "@fishawack/lab-velocity/components/button";
+@import "@fishawack/lab-velocity/components/form";
+@import "@fishawack/lab-velocity/components/checkbox";
+@import "@fishawack/lab-velocity/components/select";
+@import "@fishawack/lab-velocity/components/loader";
+@import "@fishawack/lab-velocity/components/permissionLegend";
+@import "@fishawack/lab-velocity/components/chip";
+```
+
+### Icons
+
+Ensure Content has Velocity pulled in & copy out the svg folder contents into the svg files within vue.
+
+```json
+{
+    "lftp": "ftp-fishawack.egnyte.com",
+    "location": "Shared/FW/Knutsford/Digital/Auto-Content/Lab/Velocity"
+}
+```
+
+### ENV VARS (frontend)
+
+```env
+# Required
+HYDRATE_LOGO=example-logo
+
+# Descriptions
+HYDRATE_LOGO Name of svg logo to display on page
+HYDRATE_REDIRECT Default index if not configured
+HYDRATE_CONTACT Default mailto:EP@avalerehealth, Email for contact us button
+```

package/_defaults.scss

@@ -5,5 +5,5 @@
 $colors: variables.dynamic("color", module-variables("variables"));
 
 // Override lab-ui defaults here, e.g $button: $color6;
-$fontColor: $color6 !default;
-$fontFamily: $primaryFont, sans-serif !default;
+$fontColor: $color1;
+$fontFamily: $primaryFont, sans-serif;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fishawack/lab-velocity",
-    "version": "2.0.0-beta.7",
+    "version": "2.0.0-beta.8",
     "description": "Avalere Health branded style system",
     "scripts": {
         "setup": "npm ci || npm i && npm run content",
@@ -62,7 +62,6 @@
     },
     "files": [
         "*.scss",
-        "modules",
         "components",
         "_Build/vue/components",
         "_Build/vue/modules/AuthModule"