chore: using design system

.env

@@ -5,3 +5,4 @@ PUBLIC_PATH=http://localhost:3003/
 REMOTE_ROOT=root@http://localhost:3000/remoteEntry.js
 REMOTE_STORE=store@http://localhost:3005/remoteEntry.js
 REMOTE_AUTH=auth@http://localhost:3006/remoteEntry.js
+REMOTE_DS=ds@http://localhost:3007/remoteEntry.js

.env.other

@@ -2,4 +2,7 @@ NODE_ENV=production
 PUBLIC_PATH=http://localhost:3003/
 
 # remotes
-REMOTE_ROOT=root@http://localhost:3000/remoteEntry.js
+REMOTE_ROOT=root@http://localhost:3000/remoteEntry.js
+REMOTE_STORE=store@http://localhost:3005/remoteEntry.js
+REMOTE_AUTH=auth@http://localhost:3006/remoteEntry.js
+REMOTE_DS=ds@http://localhost:3007/remoteEntry.js

.env.production

@@ -4,4 +4,5 @@ PUBLIC_PATH=https://mfe-module-federation-vue-profile.netlify.app/
 # remotes
 REMOTE_ROOT=root@https://mfe-module-federation-vue-root.netlify.app/remoteEntry.js
 REMOTE_STORE=store@https://mfe-module-federation-vue-store.netlify.app/remoteEntry.js
-REMOTE_AUTH=auth@https://mfe-module-federation-vue-auth.netlify.app/remoteEntry.js
+REMOTE_AUTH=auth@https://mfe-module-federation-vue-auth.netlify.app/remoteEntry.js
+REMOTE_DS=ds@http://mfe-module-federation-vue-ds.netlify.app/remoteEntry.js

.npmrc

@@ -1 +1 @@
-//registry.npmjs.org/:_authToken=${NPM_TOKEN}
+//registry.npmjs.org/:_authToken=97e78321-793c-445b-9d68-436004455287

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@microfrontend-vue/profile",
+  "name": "@mfe-module-federation-vue/profile",
   "version": "0.1.0",
   "private": true,
   "scripts": {

src/bootstrap.js

@@ -1,12 +1,12 @@
 import Vue from "vue";
 import App from "./App.vue";
-import vuetify from "./plugins/vuetify";
+import { frameworkConfig } from "ds/DSConfig";
 import store from "./store";
 
 Vue.config.productionTip = false;
 
 new Vue({
-  vuetify,
+  ...frameworkConfig,
   store,
   render: (h) => h(App),
 }).$mount("#app");

src/components/FullProfile.vue

@@ -1,34 +1,24 @@
 <template>
   <v-container class="custom__user-profile" fluid>
-    <v-btn @click="change">change</v-btn>
     <v-layout column>
       <v-card v-if="!loading && user">
         <v-flex class="custom__user-avatar justify-center">
-          <v-avatar size="124" class="mr-4 elevation-6">
-            <img :src="user.picture.large" alt="Avatar" />
-          </v-avatar>
+          <DSUserPicture :src="user.picture.large" />
         </v-flex>
         <v-card-text class="custom__user-content">
-          <v-text-field
-            v-model="user.name.first"
-            label="FirstName"
-          ></v-text-field>
-          <v-text-field
-            v-model="user.name.last"
-            label="Last Name"
-          ></v-text-field>
-          <v-text-field
-            v-model="user.email"
-            label="Email Address"
-          ></v-text-field>
-          <v-text-field v-model="user.cell" label="Mobile"></v-text-field>
-          <v-text-field v-model="user.phone" label="Phone"></v-text-field>
+          <DSInput v-model="user.name.first" label="FirstName"></DSInput>
+          <DSInput v-model="user.name.last" label="Last Name"></DSInput>
+          <DSInput v-model="user.email" label="Email Address"></DSInput>
+          <DSInput v-model="user.cell" label="Mobile"></DSInput>
+          <DSInput v-model="user.phone" label="Phone"></DSInput>
         </v-card-text>
         <v-card-actions>
-          <v-btn color="primary" :loading="loading" @click.native="update">
+          <DSButton @click="change"> Change User </DSButton>
+
+          <DSButton :loading="loading" @click.native="update">
             <v-icon left dark>mdi-check</v-icon>
             Save Changes
-          </v-btn>
+          </DSButton>
         </v-card-actions>
       </v-card>
     </v-layout>
@@ -37,9 +27,17 @@
 
 <script>
 import UserTools from "auth/UserTools";
+import DSButton from "ds/DSButton";
+import DSInput from "ds/DSInput";
+import DSUserPicture from "ds/DSUserPicture";
 
 export default {
   name: "FullProfile",
+  components: {
+    DSButton,
+    DSInput,
+    DSUserPicture,
+  },
   data() {
     return {
       user: {},

src/components/Profile.vue

@@ -1,16 +1,8 @@
 <template>
   <v-card v-if="!loading && user" height="150">
-    <p>
-      {{
-        ($store && $store.getters && $store.getters["user/user"]) || "nothing"
-      }}
-    </p>
-
     <v-row class="pt-2 pl-2">
       <v-col class="align-content-center" align-self="center" cols="4">
-        <v-avatar align-self="center" class="profile" color="grey" size="124">
-          <v-img align-self="center" :src="userPicture"></v-img>
-        </v-avatar>
+        <DSUserPicture :src="userPicture" />
       </v-col>
       <v-col align-self="start" cols="8">
         <v-list-item>
@@ -39,11 +31,12 @@
   </v-card>
 </template>
 <script>
-import { fetchUser } from "@/service/user.service.js";
+import UserTools from "auth/UserTools";
+import DSUserPicture from "ds/DSUserPicture";
 
 export default {
   name: "Profile",
-
+  components: { DSUserPicture },
   data: () => ({
     user: {},
     loading: true,
@@ -64,8 +57,7 @@ export default {
   methods: {
     async loadUser() {
       try {
-        const response = await fetchUser();
-        this.user = response.results[0];
+        this.user = UserTools.storage.userData();
       } catch (err) {
         console.warn(err);
       } finally {

vue.config.js

@@ -17,6 +17,7 @@ module.exports = {
           root: process.env.REMOTE_ROOT,
           store: process.env.REMOTE_STORE,
           auth: process.env.REMOTE_AUTH,
+          ds: process.env.REMOTE_DS,
         },
         shared: require("./package.json").dependencies,
       }),