feat(nuxt): ui module (#82)

* Add .histoire to pnpm-workspace.yaml and import PergelPageSignin component in app.vue

* fix tailwindcss config

* Update .gitignore and nuxt.config.ts, delete unused files

* Add alias for Pergel UI brand

* Add Notivue and Radix-Vue modules, update UI package version

* Add src/**/pergel to .gitignore

* Update dependencies and refactor UI components

* Remove nuxt-icon module installation

* fix: lint issues

* Fix UI module installation and remove ColorModeButton component

* Update dependencies in package.json

* add egoist/tailwindcss-icons and icon component

* fix: lint issues

* Remove unused files and update dependencies

* Update paths in tsconfig.json

* Update lint command in CI workflow

* Update linting command in CI workflow and add new file to eslint ignore list

* Add ResolvedUIOptions to ResolvedModules

* Add @egoist/tailwindcss-icons and local-pkg dependencies

* Update UI package version and add i18n support

* Refactor configuration and module setup

* fix: lint issues

* Remove unused files and configurations

* Update UI components and pages

* Refactor authentication pages

* Update logo links in auth pages

* Update AuthHeader and ColorModeButton components

* Add conditional rendering for activated accounts in login page

* Add i18n module and tailwindcss plugin

* Refactor authentication pages to use internationalization

* Add i18n module and update tailwind.config.js

* fix: lint issues

* chore: upgrade

* fix: lock

* fix: add useI18n() for internationalization support

* i18n

* fix: lint issues

* Add Pinia support and update translations

* Add pinia option to UIOptions

* Update release scripts in package.json

eslint.config.js

@@ -19,6 +19,7 @@ export default antfu(
       '**/**.yml',
       '**/**.md',
       'playground/pergel',
+      'packages/nuxt/pergel',
       '**/README.yaml',
     ],
   },
@@ -36,6 +37,14 @@ export default antfu(
       'tailwindcss/no-arbitrary-value': 'off',
       'tailwindcss/no-custom-classname': 'off',
       'tailwindcss/no-contradicting-classname': 'error',
+      'import/first': 'off',
+      'symbol-description': 'off',
+    },
+  },
+  {
+    files: ['**/*.ts'],
+    rules: {
+      'symbol-description': 'off',
     },
   },
   {

package.json

@@ -23,7 +23,7 @@
     "test:coverage": "vitest --coverage",
     "release": "pnpm build && bumpp --commit --push --tag",
     "release:local": "bumpp --no-push && pnpm build && pnpm publish --no-git-checks",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit -p tsconfig.json"
   },
   "dependencies": {
     "@pergel/graphql": "workspace:0.0.0",

packages/graphql/package.json

@@ -19,7 +19,7 @@
   "bugs": "https://github.com/oku-ui/pergel/issues",
   "keywords": [],
   "scripts": {
-    "release": "pnpm publish"
+    "release": "pnpm build && pnpm bumpp --commit='version(graphql): release %s' --no-tag && pnpm publish"
   },
   "peerDependencies": {
     "graphql": ">=16.8.0"

packages/nuxt/.gitignore

@@ -59,4 +59,7 @@ Temporary Items
 # Pergel
 
 lib
-dist
+dist
+pergel
+schema.graphql
+!src/**/pergel

packages/nuxt/build.config.ts

@@ -16,6 +16,7 @@ export const external = [
   'drizzle-orm',
   'drizzle-kit',
   'postgres',
+  '@egoist/tailwindcss-icons',
   // @ts-expect-error
   ...Object.keys(pkg.peerDependencies || {}),
 ]

packages/nuxt/components.json

@@ -0,0 +1,15 @@
+{
+  "style": "default",
+  "typescript": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "assets/css/tailwind.css",
+    "baseColor": "zinc",
+    "cssVariables": true
+  },
+  "framework": "nuxt",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

packages/nuxt/nuxt.config.ts

@@ -5,8 +5,22 @@ export default defineNuxtConfig({
   pergel: {
     pergelDir: 'pergel',
     rootDir: 'playground',
+    debug: true,
     projects: {
       test: {
+        S3: true,
+        nodeCron: true,
+        ses: true,
+        bullmq: true,
+        json2csv: true,
+        graphqlYoga: {
+          mergeSchemas: true,
+        },
+        drizzle: true,
+        ui: true,
+      },
+      test2: {
+        S3: true,
       },
     },
   },

packages/nuxt/package.json

@@ -70,28 +70,30 @@
   "dependencies": {
     "@nuxt/devtools": "^1.0.6",
     "@nuxt/devtools-kit": "^1.0.6",
-    "@nuxt/kit": "^3.8.2",
-    "@vueuse/core": "^10.7.0",
+    "@nuxt/kit": "^3.9.0",
+    "@vueuse/core": "^10.7.1",
     "defu": "^6.1.3",
+    "local-pkg": "^0.5.0",
     "minimatch": "^9.0.3",
     "pathe": "^1.1.1",
     "sirv": "^2.0.4"
   },
   "devDependencies": {
-    "@aws-sdk/client-ses": "^3.478.0",
+    "@aws-sdk/client-ses": "^3.481.0",
     "@faker-js/faker": "^8.3.1",
     "@iconify-json/carbon": "^1.1.27",
     "@iconify-json/ph": "^1.1.9",
     "@json2csv/node": "^7.0.4",
     "@nuxt/devtools-ui-kit": "^1.0.6",
-    "@nuxt/module-builder": "^0.5.4",
-    "@nuxt/schema": "^3.8.2",
+    "@nuxt/module-builder": "^0.5.5",
+    "@nuxt/schema": "^3.9.0",
     "@nuxt/test-utils": "^3.9.0",
     "@pergel/graphql": "workspace:^",
     "@pergel/module-s3": "workspace:^",
+    "@pergel/module-ui": "workspace:^",
     "@types/node": "^20.10.5",
     "@types/node-cron": "^3.0.11",
-    "bullmq": "^4.16.0",
+    "bullmq": "^5.1.0",
     "esbuild-plugin-file-path-extensions": "^2.0.0",
     "node-cron": "^3.0.3",
     "nuxt": "^3.8.2",

packages/nuxt/playground/app.vue

@@ -1,8 +1,42 @@
 <script setup>
+import {
+  darkTheme,
+  lightTheme,
+} from 'notivue'
+
+const colorMode = useColorMode()
+
+const isDark = computed({
+  get() {
+    return colorMode.value === 'dark'
+  },
+  set() {
+    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+  },
+})
 </script>
 
 <template>
-  <div>
-    Nuxt module playground!
+  <Body class="h-full" />
+  <Html class="h-full" />
+  <Notivue
+    v-slot="item"
+  >
+    <Notifications
+      :item="item"
+      :theme="isDark ? darkTheme : lightTheme"
+    />
+  </Notivue>
+
+  <div class="h-full">
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
   </div>
 </template>
+
+<style>
+#__nuxt {
+  @apply w-full h-full;
+}
+</style>

packages/nuxt/playground/layouts/auth.vue

@@ -0,0 +1,15 @@
+<template>
+  <AuthLayout
+    :logo="{
+      dark: 'https://raw.githubusercontent.com/oku-ui/static/main/logo/logo-white.svg',
+      light: 'https://raw.githubusercontent.com/oku-ui/static/main/logo/logo-dark.svg',
+      alt: 'Your Company',
+    }"
+  >
+    <template v-for="(_, key) in useSlots()" #[key]>
+      <slot :name="key" />
+    </template>
+
+    <slot />
+  </AuthLayout>
+</template>

packages/nuxt/playground/layouts/default.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="h-full w-full">
+    <slot></slot>
+  </div>
+</template>

packages/nuxt/playground/nuxt.config.ts

@@ -59,6 +59,7 @@ export default defineNuxtConfig({
           mergeSchemas: true,
         },
         drizzle: true,
+        ui: true,
       },
       test2: {
         S3: true,

packages/nuxt/playground/package.json

@@ -8,15 +8,16 @@
     "generate": "nuxi generate"
   },
   "dependencies": {
-    "@aws-sdk/client-ses": "^3.478.0",
+    "@aws-sdk/client-ses": "^3.481.0",
     "@faker-js/faker": "^8.3.1",
     "@json2csv/node": "^7.0.4",
     "@pergel/graphql": "workspace:*",
     "@pergel/module-s3": "workspace:*",
-    "bullmq": "^4.16.0",
+    "@pergel/module-ui": "workspace:*",
+    "bullmq": "^4.17.0",
     "dotenv": "^16.3.1",
-    "drizzle-kit": "^0.20.7",
-    "drizzle-orm": "^0.29.1",
+    "drizzle-kit": "^0.20.9",
+    "drizzle-orm": "^0.29.2",
     "ioredis": "^5.3.2",
     "node-cron": "^3.0.3",
     "p-timeout": "^6.1.2",

packages/nuxt/playground/pages/auth/login.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+const route = useRoute()
+
+const isActivated = route.query.activated === 'true'
+function submit(values: any, loading: (value: boolean) => void) {
+  loading(true)
+  setTimeout(() => {
+    loading(false)
+    push.success('Signin success')
+  }, 1000)
+}
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <NuxtLayout name="auth">
+    <template #header>
+      <AuthHeader
+        link="/auth/signup"
+        :title="t('auth.signup')"
+      />
+    </template>
+    <template #left>
+      <AuthLeft
+        :logo="{
+          src: 'https://raw.githubusercontent.com/oku-ui/static/main/logo/logo-white.svg',
+          alt: 'Your Company',
+          link: '/',
+        }"
+        quote="This library has saved me countless hours of work and helped me deliver stunning designs to my clients faster than ever before."
+        footer="Sofia Davis"
+      />
+    </template>
+    <template #content>
+      <AuthForm
+        :title="t('auth.signin')"
+        :description="{
+          label: t('auth.signup_description'),
+          to: '/auth/signup',
+          text: t('auth.signup'),
+        }"
+        :terms="{
+          href: '/auth/terms-of-service',
+          label: t('auth.terms_of_service'),
+        }"
+        :privacy="{
+          href: '/auth/privacy-policy',
+          label: t('auth.privacy_policy'),
+        }"
+        :hidden-terms="isActivated"
+      >
+        <AuthFormLogin
+          v-if="!isActivated"
+          @submit="submit"
+        />
+        <div v-else>
+          <p class="text-sm">
+            {{ t('auth.dont_have_an_account') }}
+          </p>
+        </div>
+      </AuthForm>
+    </template>
+  </NuxtLayout>
+</template>