feat: add shared project configuration

Author: vallemar

.env

@@ -0,0 +1 @@
+VITE_BASE_URL="http://localhost:5173/"

.env.production

@@ -0,0 +1 @@
+VITE_BASE_URL="https://nativescript-initializr.jmarvall.com/"

README.md

@@ -11,6 +11,6 @@ npm run dev
 ```
 
 ## Roadmap
-- Share configuration.
+- ✅  Share project configuration.
 - Allow changing npm version in plugins.
 - ✅ Add react plugins for OpenNative.

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@octokit/core": "^4.1.0",
     "@vueuse/core": "^9.5.0",
+    "floating-vue": "^2.0.0-beta.20",
     "isomorphic-fetch": "^3.0.0",
     "jszip": "^3.10.1",
     "pinia": "^2.0.24",

src/components/Body.vue

@@ -1,30 +1,57 @@
 <script setup lang="ts">
-import { computed, PropType, reactive, ref } from "vue";
-import { Plugin, ProjectMetadata, Flavor } from "@/types/app.types";
+import { computed, reactive, ref, defineAsyncComponent } from "vue";
+import { Flavor, Plugin, ProjectMetadata } from "@/types/app.types";
 import RadioGroup from "@/components/RadioGroup.vue";
 import { FLAVORS, PROJECT_DEFINITION } from "@/constant/constant";
 import { pluginService } from "@/services/PluginService";
-import ItemPlugin from "@/components/ItemPlugin.vue";
-import Modal from "@/components/Modal.vue";
-import { useWindowSize } from "@vueuse/core";
+import { useClipboard, useWindowSize } from "@vueuse/core";
 import { DownloadProjectService } from "@/services/DownloadProjectService";
-import Loading from "@/components/Loading.vue";
-import SearchPlugins from "@/components/SearchPlugins.vue";
+import { shared } from "@/utils/Shared";
+import { SharedProject } from "@/types/share.types";
+import { useRoute } from "vue-router";
+import { useCommonStore } from "@/plugins/stores/Common.store";
+const ItemPlugin = defineAsyncComponent(
+  () => import("@/components/ItemPlugin.vue")
+);
+const SearchPlugins = defineAsyncComponent(
+  () => import("@/components/SearchPlugins.vue")
+);
+const Modal = defineAsyncComponent(() => import("@/components/Modal.vue"));
+const LoadingDownload = defineAsyncComponent(
+  () => import("@/components/LoadingDownload.vue")
+);
+const Loading = defineAsyncComponent(() => import("@/components/Loading.vue"));
 
 const downloadProjectService: DownloadProjectService =
   new DownloadProjectService();
 const { width } = useWindowSize();
+const route = useRoute();
+const commonStore = useCommonStore();
 const loading = ref(false);
+const loadingPlugins = ref(false);
 const refDownload = ref<HTMLAnchorElement>();
 const formFlavor = ref<Flavor[]>(FLAVORS);
 const projectMetadata = reactive<ProjectMetadata>(PROJECT_DEFINITION);
 const pluginsStore = ref<Plugin[]>([]);
 const addPlugins = ref<Plugin[]>([]);
 const openModalAddPlugin = ref(false);
-const reactNativePlugins = ref(false);
+
+const flavorSelected = computed<Flavor | undefined>(() =>
+  formFlavor.value.find((flavor) => flavor.selected)
+);
+const sharedProjectData = reactive<
+  SharedProject & { openModal: boolean; dataString: string }
+>({
+  flavor: "",
+  name: "",
+  plugins: [],
+  openModal: false,
+  rnPlugins: false,
+  dataString: "",
+});
+const { copy: copyClipboard } = useClipboard();
 
 const onSelectedFlavor = (index: number) => {
-  console.log(index);
   formFlavor.value.forEach((flavor) => (flavor.selected = false));
   formFlavor.value[index].selected = true;
 };
@@ -48,15 +75,40 @@ const removePlugin = (plugin: Plugin) => {
 
 const download = async () => {
   loading.value = true;
-  const flavor = formFlavor.value.find((flavor) => flavor.selected);
-  if (flavor) {
+  if (flavorSelected.value) {
     await downloadProjectService.download(
       refDownload.value!,
-      flavor,
+      flavorSelected.value,
       projectMetadata,
       addPlugins.value
     );
-    loading.value = false;
+  }
+  loading.value = false;
+};
+
+if (shared.isSharedProject(route)) {
+  loadingPlugins.value = true;
+  const shareData = shared.retrieveSharedProject(route);
+  const indexFlavor = FLAVORS.findIndex(
+    (flavor: Flavor) => flavor.text === shareData.flavor
+  );
+  onSelectedFlavor(indexFlavor);
+  projectMetadata.name = shareData.name;
+  projectMetadata.description = shareData.description;
+  projectMetadata.package = shareData.package;
+  commonStore.enableReactNativePlugins = shareData.rnPlugins;
+}
+
+const sharedProject = () => {
+  if (flavorSelected.value) {
+    const sharedData = shared.buildURL(
+      flavorSelected.value,
+      projectMetadata,
+      addPlugins.value,
+      commonStore.enableReactNativePlugins
+    );
+    sharedProjectData.openModal = true;
+    sharedProjectData.dataString = sharedData;
   }
 };
 
@@ -67,16 +119,23 @@ pluginService.findAll().then((plugins) => {
       return new Date(b.date) - new Date(a.date);
     })
   );
+  if (shared.isSharedProject(route)) {
+    loadingPlugins.value = true;
+    shared.resolvePlugins(route, pluginsStore.value).then((plugins) => {
+      addPlugins.value.push(...plugins);
+      loadingPlugins.value = false;
+    });
+  }
 });
 </script>
 
 <template>
-  <Loading
+  <LoadingDownload
     :full="true"
     message="Generating project"
     :show="loading"
     position="fixed"
-  ></Loading>
+  ></LoadingDownload>
   <div class="px-3 my-8 mb-16">
     <a ref="refDownload"></a>
     <div class="width-content grid lg:grid-cols-2 grid-cols-1">
@@ -100,7 +159,7 @@ pluginService.findAll().then((plugins) => {
           </div>
         </div>
       </div>
-      <div class="lg:p-4 p-0 mt-9 lg:border-left">
+      <div class="lg:p-4 p-0 mt-9 lg:border-left relative">
         <div class="flex justify-between items-center border-b pb-4">
           <h3 class="text-2xl">Plugins</h3>
           <div
@@ -110,7 +169,9 @@ pluginService.findAll().then((plugins) => {
             Add plugins
           </div>
         </div>
-        <div class="mt-2 added-plugin">
+        <div class="mt-2 added-plugin relative" style="min-height: 200px">
+          <Loading :show="loadingPlugins" position="absolute"></Loading>
+
           <div
             v-for="(pluginAdded, i) in addPlugins"
             :key="i"
@@ -148,6 +209,12 @@ pluginService.findAll().then((plugins) => {
           <span class="mdi mdi-github ml-2"></span>
         </a>
       </div>
+      <button
+        class="px-3 md:px-5 py-2 text-white bg font-bold mr-4 rounded-full"
+        @click="sharedProject"
+      >
+        Shared
+      </button>
       <button
         class="px-5 py-2 color-bg font-bold mr-4 md:mr-0 rounded-full"
         style="background: var(--color-ns-cyan)"
@@ -171,6 +238,32 @@ pluginService.findAll().then((plugins) => {
       >
       </SearchPlugins>
     </Modal>
+    <Modal
+      :open="sharedProjectData.openModal"
+      @close="sharedProjectData.openModal = false"
+    >
+      <div
+        class="p-6 flex flex-col items-center relative"
+        :style="{ minWidth: width < 900 ? '85vw' : '35vw' }"
+      >
+        <h3 class="text-2xl text-left w-full">Copy and share project</h3>
+        <input
+          class="mt-8 w-full"
+          type="text"
+          v-model="sharedProjectData.dataString"
+          disabled
+        />
+        <VDropdown :distance="6">
+          <button
+            @click="copyClipboard(sharedProjectData.dataString)"
+            class="mdi mdi-content-copy cursor-pointer mt-4"
+          ></button>
+          <template #popper>
+            <div class="text-white p-3">Copied</div>
+          </template>
+        </VDropdown>
+      </div>
+    </Modal>
   </div>
 </template>
 

src/components/Loading.vue

@@ -8,15 +8,7 @@
       :style="{ background: background, position: position }"
     >
       <div class="width f-column center-vertical center-full">
-        <lottie-player
-          src="/loading.json"
-          background="transparent"
-          speed="1"
-          style="width: 300px; height: 300px"
-          loop
-          autoplay
-        ></lottie-player>
-
+        <div class="loader"></div>
         <p class="mt-4 text-center" v-if="message">
           {{ message }}
         </p>
@@ -55,22 +47,21 @@ const state = reactive({ count: 0 });
 
 <style scoped>
 .content-loading {
-  position: fixed;
   left: 0;
   top: 0;
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   min-width: 32px;
   min-height: 32px;
-  z-index: 5;
+  z-index: 1;
 }
 .loader {
-  border: 4px solid var(--c-primary);
+  border: 4px solid var(--color-ns-cyan);
   border-radius: 50%;
-  border-top: 4px solid var(--c-secondary);
+  border-top: 4px solid var(--color-ns-cyan);
   width: 35px;
   height: 35px;
   -webkit-animation: spin 2s linear infinite; /* Safari */

src/components/LoadingDownload.vue

@@ -0,0 +1,107 @@
+<template>
+  <div :class="{ full: full }"></div>
+
+  <transition name="fade">
+    <div
+      class="content-loading width"
+      v-if="show"
+      :style="{ background: background, position: position }"
+    >
+      <div class="width f-column center-vertical center-full">
+        <lottie-player
+          src="/loading.json"
+          background="transparent"
+          speed="1"
+          style="width: 300px; height: 300px"
+          loop
+          autoplay
+        ></lottie-player>
+
+        <p class="mt-4 text-center" v-if="message">
+          {{ message }}
+        </p>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script setup>
+import { reactive } from "vue";
+defineProps({
+  text: String,
+  message: {
+    type: String,
+    default: null,
+  },
+  show: {
+    type: Boolean,
+    default: true,
+  },
+  background: {
+    type: String,
+    default: "var(--bg)",
+  },
+  full: {
+    type: Boolean,
+    default: false,
+  },
+  position: {
+    type: String,
+    default: "absolute",
+  },
+});
+const state = reactive({ count: 0 });
+</script>
+
+<style scoped>
+.content-loading {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 32px;
+  min-height: 32px;
+  z-index: 5;
+}
+.loader {
+  border: 4px solid var(--c-primary);
+  border-radius: 50%;
+  border-top: 4px solid var(--c-secondary);
+  width: 35px;
+  height: 35px;
+  -webkit-animation: spin 2s linear infinite; /* Safari */
+  animation: spin 2s linear infinite;
+}
+/* Safari */
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.25s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+.message {
+  min-width: 80%;
+  max-width: 80%;
+}
+</style>

src/components/Modal.vue

@@ -47,7 +47,7 @@ export default defineComponent({
     },
     maxHeight: {
       type: String,
-      default: "100%",
+      default: "auto",
     },
   },
   emits: ["close"],

src/constant/constant.ts

@@ -52,3 +52,5 @@ export const PROJECT_DEFINITION: ProjectMetadata = {
   description: "Description",
   package: "com.nativescript.demo",
 };
+
+export const BASE_URL = import.meta.env.VITE_BASE_URL;