create-nuxt-base 0.1.23 → 0.2.1

package/nuxt-base-template/src/components/transition/TransitionFadeScale.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
-const props = withDefaults(defineProps<{
-  startDuration?: number | `${number}`;
-  leaveDuration?: number | `${number}`;
-}>(), {
-  startDuration: 100,
-  leaveDuration: 100,
-});
+const props = withDefaults(
+  defineProps<{
+    startDuration?: number | `${number}`;
+    leaveDuration?: number | `${number}`;
+  }>(),
+  {
+    startDuration: 100,
+    leaveDuration: 100,
+  }
+);
 </script>
 
 <template>

package/nuxt-base-template/src/composables/use-auth-fetch.ts

@@ -1,19 +1,33 @@
 import type { ExtractedRouteMethod, NitroFetchOptions, NitroFetchRequest, TypedInternalResponse } from 'nitropack';
 
-export function useAuthFetch<DefaultT = unknown, DefaultR extends NitroFetchRequest = NitroFetchRequest, T = DefaultT, R extends NitroFetchRequest = DefaultR, O extends NitroFetchOptions<R> = NitroFetchOptions<R>>(request: R, opts?: O): Promise<TypedInternalResponse<R, T, ExtractedRouteMethod<R, O>>>  {
+export function useAuthFetch<
+  DefaultT = unknown,
+  DefaultR extends NitroFetchRequest = NitroFetchRequest,
+  T = DefaultT,
+  R extends NitroFetchRequest = DefaultR,
+  O extends NitroFetchOptions<R> = NitroFetchOptions<R>
+>(request: R, opts?: O): Promise<TypedInternalResponse<R, T, ExtractedRouteMethod<R, O>>> {
   const { requestNewToken } = useAuth();
+  const { accessTokenState } = useAuthState();
   const config = useRuntimeConfig();
 
   // @ts-expect-error - because of nice types from ofetch <3
   return $fetch(request, {
     ...opts,
     baseURL: config.public.apiUrl,
-    retry: 3,
-    async onRequest({ request, options }) {
-      const { token } = await requestNewToken();
-      options.headers = {
-        'Authorization': 'Bearer ' + token,
-      };
+    async onRequest(data: any) {
+      if (accessTokenState.value) {
+        data.options.headers = {
+          ...data.options.headers,
+          Authorization: `Bearer ${accessTokenState.value}`,
+        };
+      }
+    },
+    onResponseError: async () => {
+      await requestNewToken();
     },
+    retry: 3,
+    retryDelay: 500,
+    retryStatusCodes: [401],
   });
-}
+}

package/nuxt-base-template/src/composables/use-context-menu.ts

@@ -0,0 +1,19 @@
+const contextMenuState = <T>() => useState<any | null>(() => null);
+
+export function useContextMenu<T = object>() {
+  const menu = contextMenuState<T>();
+
+  const open = (config: { items: any[] }) => {
+    menu.value = Object.assign(config, { show: true });
+  };
+
+  const close = () => {
+    menu.value = null;
+  };
+
+  return {
+    activeMenu: menu,
+    close,
+    open,
+  };
+}

package/nuxt-base-template/src/composables/use-file.ts

@@ -1,5 +1,4 @@
 import { useFetch } from '@vueuse/core';
-import { useHelper } from '~/composables/use-helper';
 
 export function useFile() {
   const { isValidMongoID } = useHelper();
@@ -18,4 +17,4 @@ export function useFile() {
   }
 
   return { getFileInfo };
-}
+}

package/nuxt-base-template/src/composables/use-modal.ts

@@ -81,4 +81,4 @@ export function useModal<T = object>() {
     open,
     close,
   };
-}
+}

package/nuxt-base-template/src/composables/use-notification.ts

@@ -18,7 +18,7 @@ export function useNotification() {
   };
 
   const remove = (uuid: string) => {
-    notifications.value = notifications.value.filter(n => n.uuid !== uuid);
+    notifications.value = notifications.value.filter((n) => n.uuid !== uuid);
   };
 
   return {
@@ -26,4 +26,4 @@ export function useNotification() {
     remove,
     notifications,
   };
-}
+}

package/nuxt-base-template/src/composables/use-share.ts

@@ -1,5 +1,5 @@
-import { ModalShare } from '#components';
 import { useModal } from '~/composables/use-modal';
+import ModalShare from '~/components/ModalShare.vue';
 
 export function useShare() {
   const route = useRoute();
@@ -12,11 +12,11 @@ export function useShare() {
         text: text ?? window.location.origin,
       });
     } else {
-      useModal().open({ component: ModalShare, size: 'md', data: { link: url ?? window.location.origin } });
+      useModal().open({ component: ModalShare, size: 'md', data: { link: url ?? window.location.origin, name: window.name } });
     }
   }
 
   return {
     share,
   };
-}
+}

package/nuxt-base-template/src/error.vue

@@ -7,7 +7,8 @@ console.error(props.error);
 const debugWord = ref<string>('');
 const { current } = useMagicKeys();
 
-watch(() => current.values(),
+watch(
+  () => current.values(),
   () => {
     if (current.values().next().value === 'escape') {
       debugWord.value = '';
@@ -21,7 +22,7 @@ watch(() => current.values(),
     if (current.values().next().value && !debugWord.value.includes(current.values().next().value)) {
       debugWord.value += current.values().next().value;
     }
-  },
+  }
 );
 
 const handleError = () => clearError({ redirect: '/' });
@@ -31,23 +32,18 @@ const handleError = () => clearError({ redirect: '/' });
   <NuxtLayout>
     <div class="w-full min-h-screen flex flex-col justify-center items-center">
       <div class="w-full flex flex-col items-center mb-20">
-        <h1 class="text-[12rem] font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-primary-600 to-primary-400">
-          Oops!
-        </h1>
+        <h1 class="text-[12rem] font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-primary-600 to-primary-400">Oops!</h1>
         <h2 v-if="error?.statusCode" class="text-3xl text-gray-600">
           {{ error?.statusCode }}
         </h2>
       </div>
 
       <pre v-if="debugWord === 'debug'" class="w-full max-w-3xl mb-5 mx-auto bg-black/80 text-white font-mono p-2 rounded-lg overflow-x-scroll">
-      {{
-        { error }
-      }}
-    </pre>
-
-      <BaseButton color="primary" appearance="outline" @click="handleError">
-        Zurück zur Startseite
-      </BaseButton>
+      {{ { error } }}
+    </pre
+      >
+
+      <BaseButton color="primary" appearance="outline" @click="handleError"> Zurück zur Startseite </BaseButton>
     </div>
   </NuxtLayout>
-</template>
+</template>

package/nuxt-base-template/src/layouts/default.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { useGlobalMutationLoading, useGlobalQueryLoading } from '@vue/apollo-composable';
+
+const queryLoading = useGlobalQueryLoading();
+const mutationLoading = useGlobalMutationLoading();
+</script>
+
+<template>
+  <div>
+    <NuxtLoadingIndicator :loading="queryLoading || mutationLoading" />
+    <slot></slot>
+  </div>
+</template>

package/nuxt-base-template/src/middleware/auth.global.ts

@@ -1,8 +1,8 @@
 export default defineNuxtRouteMiddleware((to, from) => {
-  const { accessToken } = useAuthState();
+  const { accessTokenState } = useAuthState();
 
   if (to.fullPath.startsWith('/app')) {
-    if (!accessToken?.value) {
+    if (!accessTokenState?.value) {
       return navigateTo('/auth/login');
     }
   }

package/nuxt-base-template/src/pages/index.vue

@@ -1,10 +1,35 @@
+<script setup lang="ts">
+import FormTextarea from '~/components/form/FormTextarea.vue';
+
+const isSubmitting = ref(false);
+</script>
+
 <template>
   <div class="flex h-screen items-center justify-center flex-col">
-    <h1
-      class="font-extrabold text-transparent text-8xl bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600"
-    >
-      Lenne Nuxt Starter
-    </h1>
-    <HelloWorld />
+    <h1 class="font-extrabold text-transparent text-8xl bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600">Lenne Nuxt Starter</h1>
+
+    <h2 class="mt-5">DEMO</h2>
+    <FormInput name="email" type="email" label="E-Mail" placeholder="max.mustermann@test.de" />
+    <FormTextarea name="description" label="Description" placeholder="..." />
+    <FormPassword name="password" label="Password" placeholder="Password" />
+    <FormSelect
+      name="select"
+      label="Select"
+      placeholder="placeholder"
+      :options="[
+        { label: 'Option 1', value: 1 },
+        { label: 'Option 2', value: 2 },
+        { label: 'Option 3', value: 3 },
+      ]"
+    />
+    <FormToggle name="toggle" label="Toggle" />
+    <div class="flex items-center gap-3">
+      <FormSubmit label="Save" :is-submitting="isSubmitting" @click="isSubmitting = true" />
+      <BaseButton size="sm" :loading="isSubmitting" @click="isSubmitting = true">Submit</BaseButton>
+      <BaseButton size="lg" :loading="isSubmitting" @click="isSubmitting = true">Submit</BaseButton>
+      <BaseButton size="md" :loading="isSubmitting" appearance="outline" @click="isSubmitting = true">Submit</BaseButton>
+      <BaseButton size="md" :loading="isSubmitting" appearance="none" @click="isSubmitting = true">Submit</BaseButton>
+      <BaseButton size="md" color="danger" @click="isSubmitting = false">Reset</BaseButton>
+    </div>
   </div>
 </template>

package/nuxt-base-template/src/plugins/auth.server.ts

@@ -0,0 +1,72 @@
+import { callWithNuxt, defineNuxtPlugin, useNuxtApp, useRuntimeConfig } from 'nuxt/app';
+import { ofetch } from 'ofetch';
+
+export default defineNuxtPlugin({
+  enforce: 'post',
+  name: 'auth-server',
+  async setup() {
+    const _nuxt = useNuxtApp();
+    const config = await callWithNuxt(_nuxt, useRuntimeConfig);
+    const { accessTokenState, currentUserState, refreshTokenState } = await callWithNuxt(_nuxt, useAuthState);
+    const { clearSession, getDecodedAccessToken, isTokenExpired, setCurrentUser, setTokens } = await callWithNuxt(_nuxt, useAuth);
+    const payload = accessTokenState.value ? getDecodedAccessToken(accessTokenState.value) : null;
+
+    if (!accessTokenState.value || !refreshTokenState.value || currentUserState.value) {
+      return;
+    }
+
+    let token = accessTokenState.value;
+    if (isTokenExpired(accessTokenState.value)) {
+      const refreshTokenResult = await ofetch(config.public.host, {
+        body: JSON.stringify({
+          query: 'mutation refreshToken {refreshToken {token, refreshToken}}',
+          variables: {},
+        }),
+        headers: {
+          Authorization: `Bearer ${refreshTokenState.value}`,
+        },
+        method: 'POST',
+      }).catch((err) => {
+        console.error('2.auth.server.ts::refreshToken::catch', err.data);
+        clearSession();
+        navigateTo('/auth/login');
+      });
+
+      const data = refreshTokenResult?.data?.refreshToken;
+      if (data) {
+        setTokens(data.token, data.refreshToken);
+        token = data?.token;
+      } else {
+        clearSession();
+        await navigateTo('/auth/login');
+      }
+    }
+
+    if (token && payload?.id) {
+      const userResult = await ofetch(config.public.host, {
+        body: JSON.stringify({
+          query: 'query getUser($id: String!){' + 'getUser(id: $id){' + 'id ' + 'avatar ' + 'firstName ' + 'lastName ' + 'email ' + 'gender ' + 'roles ' + '}}',
+          variables: {
+            id: payload.id,
+          },
+        }),
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+        method: 'POST',
+      }).catch((err) => {
+        console.error('2.auth.server.ts::getUser::catch', err);
+      });
+
+      if (userResult?.errors) {
+        clearSession();
+        navigateTo('/auth/login');
+        return;
+      }
+
+      if (userResult?.data) {
+        setCurrentUser(userResult?.data?.getUser);
+      }
+    }
+  },
+});

package/nuxt-base-template/src/plugins/form.plugin.ts

@@ -0,0 +1,21 @@
+import { setLocale } from 'yup';
+
+export default defineNuxtPlugin(async (_nuxtApp) => {
+  setLocale({
+    // use constant translation keys for messages without values
+    mixed: {
+      required: 'Dieses Feld ist erforderlich.',
+      default: 'Dieses Feld ist ungültig.',
+      notType: 'Dieses Feld ist ungültig.',
+    },
+    string: {
+      email: 'Bitte geben Sie eine gültige E-Mail-Adresse ein.',
+    },
+  });
+
+  // Custom validation rules
+  // https://github.com/jquense/yup?tab=readme-ov-file#addmethodschematype-schema-name-string-method--schema-void
+  // addMethod(string, 'plz', () => {
+  //     return
+  // });
+});

package/nuxt-base-template/src/plugins/pwa.plugin.ts

@@ -0,0 +1,110 @@
+export default defineNuxtPlugin(async (_nuxtApp) => {
+  const applicationServerKey = useRuntimeConfig().public.webPushKey as string;
+  const permissionState = ref<PermissionState>('prompt');
+  const subscription = ref<PushSubscription | null>(null);
+
+  if (process.client) {
+    const iosPWASplash = (await import('ios-pwa-splash')).default;
+    iosPWASplash('/notification.png', '#FFFFFF');
+  }
+
+  async function subscribe() {
+    const sw = await navigator.serviceWorker.ready;
+    const push = await sw.pushManager.subscribe({
+      applicationServerKey,
+      userVisibleOnly: true,
+    });
+    await refreshSubscription();
+    await refreshPermissionState();
+    const body = {
+      payload: push,
+    };
+    try {
+      await useAuthFetch('/web-push/subscribe', {
+        baseURL: process.env.API_URL,
+        body,
+        method: 'POST',
+      });
+    } catch (error) {}
+  }
+
+  async function refreshPermissionState() {
+    try {
+      const sw = await navigator.serviceWorker.ready;
+      permissionState.value = await sw.pushManager.permissionState({
+        applicationServerKey,
+        userVisibleOnly: true,
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  async function refreshSubscription() {
+    try {
+      const sw = await navigator.serviceWorker.ready;
+      subscription.value = await sw.pushManager.getSubscription();
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  async function unsubscribe() {
+    if (subscription.value) {
+      await subscription.value.unsubscribe();
+      const body = {
+        payload: subscription.value,
+      };
+      await refreshPermissionState();
+      try {
+        await useAuthFetch('/web-push/', {
+          baseURL: process.env.API_URL,
+          body,
+          method: 'DELETE',
+        });
+      } catch (error) {}
+      subscription.value = null;
+    }
+  }
+
+  const route = useRoute();
+  const pwa = ref(false);
+  const isPwa = computed(() => route.query.standalone === 'true' || pwa.value);
+
+  if (process.client) {
+    if (window && window.matchMedia && document && window.matchMedia('(display-mode: standalone)').matches) {
+      if (navigator && navigator.serviceWorker) {
+        await refreshSubscription();
+        await refreshPermissionState();
+      }
+      pwa.value = true;
+      document.body.classList.add('select-none', 'overscroll-y-none', 'no-scrollbar', 'bg-rm-gray-1');
+    } else {
+      pwa.value = false;
+      document.body.classList.remove('select-none', 'overscroll-y-none', 'no-scrollbar', 'bg-rm-gray-1');
+    }
+  }
+
+  useHead({
+    htmlAttrs: { class: isPwa.value ? 'pwa' : '' },
+    meta: [
+      {
+        content: 'width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no',
+        hid: 'viewport',
+        name: 'viewport',
+      },
+    ],
+  });
+
+  return {
+    provide: {
+      pwa: {
+        isPwa: () => isPwa.value,
+        permissionState,
+        subscribe,
+        subscription,
+        unsubscribe,
+      },
+    },
+  };
+});

package/nuxt-base-template/src/tests/init.test.ts

@@ -9,4 +9,4 @@ describe('Initialization', async () => {
   test('Init test', () => {
     // ... write tests here
   });
-});
+});

package/nuxt-base-template/tailwind.config.js

@@ -3,11 +3,10 @@ const defaultTheme = require('tailwindcss/defaultTheme');
 const { iconsPlugin, getIconCollections } = require('@egoist/tailwindcss-icons');
 const typography = require('@tailwindcss/typography');
 const forms = require('@tailwindcss/forms');
-const formkit = require('@formkit/themes/tailwindcss');
+const plugin = require('tailwindcss/plugin');
 
 module.exports = {
-  darkMode: "class",
-  content: ['./formkit-theme.js'],
+  darkMode: 'class',
   theme: {
     // fontFamily: {
     //   montserrat: ['Montserrat'],
@@ -15,34 +14,45 @@ module.exports = {
     //   serif: ['Work Sans', 'Montserrat', ...defaultTheme.fontFamily.serif],
     // },
     extend: {
-      // colors: {
-      //   primary: {
-      //     DEFAULT: '#57B39A',
-      //     50: '#f3faf7',
-      //     100: '#d6f1e7',
-      //     200: '#ade2d0',
-      //     300: '#7cccb3',
-      //     400: '#57b39a',
-      //     500: '#37957d',
-      //     600: '#2a7765',
-      //     700: '#256052',
-      //     800: '#224d45',
-      //     900: '#20413a',
-      //     950: '#0d2621',
-      //   },
-      // }
+      colors: {
+        primary: {
+          DEFAULT: '#57B39A',
+          50: '#f3faf7',
+          100: '#d6f1e7',
+          200: '#ade2d0',
+          300: '#7cccb3',
+          400: '#57b39a',
+          500: '#37957d',
+          600: '#2a7765',
+          700: '#256052',
+          800: '#224d45',
+          900: '#20413a',
+          950: '#0d2621',
+        },
+        background: '#FFFFFF',
+        foreground: '#000000',
+        border: 'hsl(0 0% 0% / 0.5)',
+        hover: 'hsl(0 0% 100% / 0.2)',
+        active: 'hsl(0 0% 100% / 0.2)',
+      },
       screens: {
-        '3xl': '2400px'
-      }
-    }
+        '3xl': '2400px',
+      },
+    },
   },
   plugins: [
     typography,
-    formkit,
     forms,
     iconsPlugin({
       // Select the icon collections you want to use
       collections: getIconCollections(['bi']),
     }),
+    plugin(({ addVariant, e }) => {
+      addVariant('pwa', ({ modifySelectors, separator }) => {
+        modifySelectors(({ className }) => {
+          return `.pwa .${e(`pwa${separator}${className}`)}`;
+        });
+      });
+    }),
   ],
 };

package/nuxt-base-template/vitest.config.js

@@ -1,5 +1,5 @@
-import vue from '@vitejs/plugin-vue'
-import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue';
+import { defineConfig } from 'vite';
 
 export default defineConfig({
   plugins: [vue()],
@@ -7,4 +7,4 @@ export default defineConfig({
     globals: true,
     environment: 'jsdom',
   },
-})
+});

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "create-nuxt-base",
-  "version": "0.1.23",
+  "version": "0.2.1",
   "description": "Starter to generate a configured environment with VueJS, Nuxt, Tailwind, Eslint, @lenne.tech/nuxt-base, Unit Tests, Cypress etc.",
   "main": "index.js",
   "bin": {
     "create-nuxt-base": "./index.js"
   },
   "scripts": {
+    "prettier": "prettier \"*.{js,json,yml,md,html,ts}\" .",
+    "format": "npm run prettier -- --write",
     "release": "standard-version && git push --follow-tags origin main",
     "release:minor": "standard-version --release-as minor && git push --follow-tags origin main",
     "release:major": "standard-version --release-as major && git push --follow-tags origin main"