refactor: move vf components into separate workspace

.gitignore

@@ -2,7 +2,6 @@
 node_modules
 dist
 
-
 # local env files
 .env.local
 .env.*.local

src/components/vf/VfAvatarList.vue → felafel/VfAvatarList.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import VfAvatarItem from '@/components/vf/VfAvatarItem.vue'
+import VfAvatarItem from './VfAvatarItem.vue'
 
 export default {
   data() {

felafel/index.js

@@ -0,0 +1,22 @@
+import VfTextarea from './VfTextarea.vue'
+import VfSelect from './VfSelect.vue'
+import VfModal from './VfModal.vue'
+import VfInput from './VfInput.vue'
+import VfCalender from './VfCalender.vue'
+import VfButton from './VfButton.vue'
+import VfAvatarList from './VfAvatarList.vue'
+import VfAvatarItem from './VfAvatarItem.vue'
+
+// there may be a better way to import all these components
+export default {
+  install: (app) => {
+    app.component('vf-avatar-item', VfAvatarItem)
+    app.component('vf-avatar-list', VfAvatarList)
+    app.component('vf-button', VfButton)
+    app.component('vf-calender', VfCalender)
+    app.component('vf-input', VfInput)
+    app.component('vf-modal', VfModal)
+    app.component('vf-select', VfSelect)
+    app.component('vf-textarea', VfTextarea)
+  },
+}

felafel/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@oflatmate/felafel",
+  "version": "0.4.0",
+  "main": "index.js",
+  "repository": "https://github.com/ludanxer/oflatmate",
+  "author": "Haoran Sun",
+  "license": "MIT",
+  "private": true,
+  "dependencies": {
+    "flatpickr": "^4.6.9"
+  }
+}

functions/package.json

@@ -1,8 +1,8 @@
 {
-  "name": "functions",
+  "name": "@oflatmate/functions",
   "private": true,
   "main": "index.js",
-  "version": "0.0.3",
+  "version": "0.4.0",
   "engines": {
     "node": "12"
   },

package.json

@@ -1,41 +1,27 @@
 {
-  "name": "flatmate",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "private": true,
   "workspaces": [
-    "functions"
+    "functions",
+    "src",
+    "felafel"
   ],
   "scripts": {
     "ci": "yarn install --frozen-lockfile --ignore-engines",
     "dev": "vite",
     "build": "vite build",
     "serve": "vite preview",
-    "lint": "eslint src/**/*.{js,vue} functions/*.js *.js --fix",
+    "lint": "eslint src/**/*.{js,vue} felafel/*.{js,vue} functions/*.js *.js --fix",
     "emulate": "firebase emulators:start --import=./tmp-data --export-on-exit",
     "deploy:func": "firebase deploy --only functions",
     "env": "yarn env:unset && yarn env:set",
     "env:set": "firebase functions:config:set env=\"$(cat functions/env.json)\"",
     "env:unset": "firebase functions:config:unset env"
   },
   "dependencies": {
-    "@tailwindcss/forms": "^0.2.1",
+    "vite": "^2.0.5",
     "@vitejs/plugin-vue": "^1.1.5",
-    "@vue/compiler-sfc": "^3.0.7",
-    "autoprefixer": "^10.2.4",
-    "core-js": "^3.6.5",
-    "dayjs": "^1.10.4",
-    "dompurify": "^2.2.6",
-    "firebase": "^8.2.1",
-    "firebaseui": "^4.7.3",
-    "flatpickr": "^4.6.9",
-    "postcss": "^8.2.6",
-    "tailwindcss": "^2.0.3",
-    "validator": "^13.5.2",
-    "vite": "^2.0.4",
-    "vue": "^3.0.7",
-    "vue-router": "^4.0.2",
-    "vuedraggable": "^4.0.1",
-    "vuex": "^4.0.0"
+    "@vue/compiler-sfc": "^3.0.7"
   },
   "devDependencies": {
     "eslint": "^6.7.2",

src/components/headings/HeadItemInvitation.vue

@@ -45,12 +45,8 @@
 
 <script>
 import { validateInput } from '@/utils'
-import VfButton from '@/components/vf/VfButton.vue'
-import VfInput from '@/components/vf/VfInput.vue'
-import VfModal from '@/components/vf/VfModal.vue'
 
 export default {
-  components: { VfInput, VfButton, VfModal },
   data() {
     return {
       showInvite: false,

src/components/headings/HeadItemNewFlat.vue

@@ -4,11 +4,3 @@
     <span class="text-lg ml-2">New Flat</span>
   </vf-button>
 </template>
-
-<script>
-import VfButton from '@/components/vf/VfButton.vue'
-
-export default {
-  components: { VfButton },
-}
-</script>

src/components/headings/HeadItemProfile.vue

@@ -31,15 +31,12 @@
 </template>
 
 <script>
-import VfAvatarItem from '@/components/vf/VfAvatarItem.vue'
-
 export default {
   data() {
     return {
       open: false,
     }
   },
-  components: { VfAvatarItem },
   mounted() {
     document.addEventListener('click', this.closeMenu)
   },

src/components/singleton/TheAnnouncement.vue

@@ -12,15 +12,11 @@
 </template>
 
 <script>
-import VfButton from '../vf/VfButton.vue'
-import VfTextarea from '../vf/VfTextarea.vue'
-
 export default {
   data() {
     return {
       message: '',
     }
   },
-  components: { VfTextarea, VfButton },
 }
 </script>

src/components/singleton/TheChoreList.vue

@@ -57,10 +57,6 @@
 </template>
 
 <script>
-import VfSelect from '@/components/vf/VfSelect.vue'
-import VfButton from '@/components/vf/VfButton.vue'
-import VfAvatarList from '@/components/vf/VfAvatarList.vue'
-import VfCalender from '@/components/vf/VfCalender.vue'
 import { shuffle } from '@/utils'
 import draggable from 'vuedraggable'
 import dayjs from 'dayjs'
@@ -73,7 +69,7 @@ export default {
       startDate: new Date(),
     }
   },
-  components: { VfSelect, VfButton, VfAvatarList, draggable, VfCalender },
+  components: { draggable },
   methods: {
     generateSchedule() {
       const residentNum = this.$store.getters.currentFlat.member.length

src/components/singleton/TheFlatTrack.vue

@@ -38,10 +38,7 @@
 
 <script>
 import { validateInput } from '@/utils'
-import VfButton from '@/components/vf/VfButton.vue'
-import VfInput from '@/components/vf/VfInput.vue'
 import FlatItem from '@/components/FlatItem.vue'
-import VfAvatarList from '@/components/vf/VfAvatarList.vue'
 
 export default {
   data() {
@@ -53,7 +50,7 @@ export default {
       },
     }
   },
-  components: { VfButton, VfInput, FlatItem, VfAvatarList },
+  components: { FlatItem },
   methods: {
     createFlat() {
       const result = validateInput(this.flatName, { length: 25 })

src/main.js

@@ -3,10 +3,11 @@ import App from './App.vue'
 import router from './router/index.js'
 import store from './store.js'
 import { userMixin } from './utils'
+import felafel from '@oflatmate/felafel'
 import { functions, auth } from './firebaseConfig'
 import 'tailwindcss/tailwind.css'
 
-const app = createApp(App).use(router).use(store)
+const app = createApp(App).use(router).use(store).use(felafel)
 
 // make $user available in every component
 app.mixin(userMixin)

src/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@oflatmate/src",
+  "version": "0.4.0",
+  "main": "main.js",
+  "repository": "https://github.com/ludanxer/oflatmate",
+  "author": "Haoran",
+  "license": "MIT",
+  "private": true,
+  "dependencies": {
+    "vue": "^3.0.7",
+    "vuex": "^4.0.0",
+    "vue-router": "^4.0.2",
+    "tailwindcss": "^2.0.3",
+    "@tailwindcss/forms": "^0.2.1",
+    "@oflatmate/felafel": "0.4.0",
+    "dayjs": "^1.10.4",
+    "dompurify": "^2.2.6",
+    "firebase": "^8.2.1",
+    "firebaseui": "^4.7.3",
+    "validator": "^13.5.2",
+    "vuedraggable": "^4.0.1"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.2.4",
+    "postcss": "^8.2.6"
+  }
+}

src/views/User.vue

@@ -38,17 +38,12 @@
 </template>
 
 <script>
-import VfButton from '@/components/vf/VfButton.vue'
-import VfModal from '@/components/vf/VfModal.vue'
-import VfAvatarItem from '@/components/vf/VfAvatarItem.vue'
-
 export default {
   data() {
     return {
       deletePop: false,
     }
   },
-  components: { VfButton, VfAvatarItem, VfModal },
   methods: {
     conformDelete() {
       this.$user

yarn.lock

@@ -1313,11 +1313,6 @@ [email protected]:
   resolved "https://registry.npmjs.org/core-js/-/core-js-3.6.5.tgz#7395dc273af37fb2e50e9bd3d9fe841285231d1a"
   integrity sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA==
 
-core-js@^3.6.5:
-  version "3.9.1"
-  resolved "https://registry.npmjs.org/core-js/-/core-js-3.9.1.tgz#cec8de593db8eb2a85ffb0dbdeb312cb6e5460ae"
-  integrity sha512-gSjRvzkxQc1zjM/5paAmL4idJBFzuJoo+jDjF1tStYFMV2ERfD02HhahhCGXUyHxQRG4yFKVSdO6g62eoRMcDg==
-
 cors@^2.8.5:
   version "2.8.5"
   resolved "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz#eac11da51592dd86b9f06f6e7ac293b3df875d29"
@@ -4327,10 +4322,10 @@ vfile@^4.0.0:
     unist-util-stringify-position "^2.0.0"
     vfile-message "^2.0.0"
 
-vite@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.npmjs.org/vite/-/vite-2.0.4.tgz#063532a4139b59a067297d8ebb5960d450907a09"
-  integrity sha512-+PP89D7AKXFE4gps8c5+4eP5yXTh5qCogjdYX7iSsIxbLZAa26JoGSq6OLk0qdb/fqDh7gtJqGiLbG2V6NvkKQ==
+vite@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.npmjs.org/vite/-/vite-2.0.5.tgz#ac46857a3fa8686d077921e61bd48a986931df1d"
+  integrity sha512-QTgEDbq1WsTtr6j+++ewjhBFEk6c8v0xz4fb/OWJQKNYU8ZZtphOshwOqAlnarSstPBtWCBR0tsugXx6ajfoUg==
   dependencies:
     esbuild "^0.8.52"
     postcss "^8.2.1"