refactor(apps/www): use vite postcss depdendecy, use tsx instead of ts-node (#42)

* refactor(apps/www): use `vite` postcss dependency, use `tsx` instead of `ts-node`

- fix Excessive stack depth comparing types by updating vite to latest
- update deps

* docs: fix `DataTableDemo.vue` scroll-x on mobile devices

* docs: tweaks

* docs: bump `vitepress`

* docs: update deps

apps/www/.vitepress/config.mts

@@ -1,6 +1,8 @@
 import path from 'node:path'
 import { defineConfig } from 'vitepress'
 import Icons from 'unplugin-icons/vite'
+import tailwind from 'tailwindcss'
+import autoprefixer from 'autoprefixer'
 import { siteConfig } from './theme/config/site'
 import ComponentPreviewPlugin from './theme/plugins/previewer'
 
@@ -54,8 +56,16 @@ export default defineConfig({
     'content/(.*)': '(.*)',
   },
   vite: {
+    css: {
+      postcss: {
+        plugins: [
+          tailwind(),
+          autoprefixer(),
+        ],
+      },
+    },
     plugins: [
-      Icons({ compiler: 'vue3', autoInstall: true }) as any,
+      Icons({ compiler: 'vue3', autoInstall: true }),
     ],
     resolve: {
       alias: {

apps/www/.vitepress/theme/components/ComponentPreview.vue

@@ -41,7 +41,7 @@ const { style } = useConfigStore()
           <StyleSwitcher />
         </div>
         <div
-          :class="cn('preview flex min-h-[350px] w-full justify-center p-10', {
+          :class="cn('preview flex min-h-[350px] w-full justify-center p-6 lg:p-10', {
             'items-center': align === 'center',
             'items-start': align === 'start',
             'items-end': align === 'end',

apps/www/package.json

@@ -9,21 +9,19 @@
     "dev": "vitepress dev",
     "build": "vitepress build",
     "preview": "vitepress preview",
-    "build:registry": "ts-node --esm --project ./tsconfig.scripts.json ./scripts/build-registry.ts"
+    "build:registry": "tsx ./scripts/build-registry.ts"
   },
   "dependencies": {
     "@morev/vue-transitions": "^2.3.6",
-    "@tanstack/vue-table": "^8.9.3",
+    "@tanstack/vue-table": "^8.9.8",
     "@unovis/ts": "^1.2.1",
-    "@vitejs/plugin-vue-jsx": "^3.0.2",
-    "@vueuse/core": "^10.2.1",
-    "class-variance-authority": "^0.6.1",
+    "@vueuse/core": "^10.4.1",
+    "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "date-fns": "^2.30.0",
-    "lucide-vue-next": "^0.268.0",
-    "tailwindcss-animate": "^1.0.6",
+    "lucide-vue-next": "^0.276.0",
+    "tailwindcss-animate": "^1.0.7",
     "v-calendar": "^3.0.3",
-    "vitepress": "^1.0.0-rc.10",
     "vue": "^3.3.4",
     "vue-wrap-balancer": "^1.1.3",
     "zod": "^3.22.2"
@@ -35,20 +33,21 @@
     "@iconify/vue": "^4.1.1",
     "@types/lodash.template": "^4.5.1",
     "@types/node": "^20.5.7",
-    "@vitejs/plugin-vue": "^4.1.0",
+    "@vitejs/plugin-vue": "^4.3.4",
+    "@vitejs/plugin-vue-jsx": "^3.0.2",
     "@vue/compiler-core": "^3.3.4",
     "@vue/compiler-dom": "^3.3.4",
-    "autoprefixer": "^10.4.14",
+    "autoprefixer": "^10.4.15",
     "lodash.template": "^4.5.0",
-    "postcss": "^8.4.24",
     "radix-vue": "^0.1.34",
     "rimraf": "^5.0.1",
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "^3.3.3",
-    "ts-node": "^10.9.1",
-    "typescript": "^5.0.2",
-    "unplugin-icons": "^0.16.6",
-    "vite": "^4.3.9",
-    "vue-tsc": "^1.4.2"
+    "tsx": "^3.12.8",
+    "typescript": "^5.2.2",
+    "unplugin-icons": "^0.17.0",
+    "vite": "^4.4.9",
+    "vitepress": "^1.0.0-rc.12",
+    "vue-tsc": "^1.8.10"
   }
 }

apps/www/postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

apps/www/src/content/docs/figma.md

@@ -18,4 +18,8 @@ The Figma UI Kit is open sourced by [Pietro Schirano](https://twitter.com/skiran
 
 ## Grab a copy
 
-https://www.figma.com/community/file/1203061493325953101
+<div class="break-words">
+
+https://www.figma.com/community/file/1203061493325953101
+
+</div>

apps/www/src/lib/registry/default/example/DataTableDemo.vue

@@ -103,7 +103,7 @@ const columns: ColumnDef<Payment>[] = [
       return h(Button, {
         variant: 'ghost',
         onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
-      }, ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])
+      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])
     },
     cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
   },
@@ -128,9 +128,9 @@ const columns: ColumnDef<Payment>[] = [
     cell: ({ row }) => {
       const payment = row.original
 
-      return h(DropdownAction, {
+      return h('div', { class: 'relative' }, h(DropdownAction, {
         payment,
-      })
+      }))
     },
   },
 ]
@@ -162,7 +162,7 @@ const table = useVueTable({
 
 <template>
   <div class="w-full">
-    <div class="flex items-center py-4">
+    <div class="flex gap-2 items-center py-4">
       <Input
         class="max-w-sm"
         placeholder="Filter emails..."
@@ -244,7 +244,6 @@ const table = useVueTable({
           :disabled="!table.getCanNextPage()"
           @click="table.nextPage()"
         >
-          >
           Next
         </Button>
       </div>

apps/www/tsconfig.scripts.json

@@ -1,34 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "include": [".contentlayer/generated", "src/**/*.ts", "scripts/**/*.ts"],
-  "exclude": ["node_modules"],
-  "compilerOptions": {
-    "target": "ES2019",
-    "lib": [
-      "es2019",
-      "DOM"
-    ],
-    "module": "ESNext",
-    "declaration": true,
-    "strict": true,
-    "strictNullChecks": true,
-    "noImplicitThis": true,
-    "alwaysStrict": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": false,
-    "experimentalDecorators": true,
-    "strictPropertyInitialization": false,
-    "isolatedModules": true,
-    "typeRoots": [
-      "./node_modules/@types"
-    ],
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
-    "moduleResolution": "node"
-  },
-  "ts-node": {
-    "esm": true,
-    "experimentalSpecifierResolution": "node",
-    "transpileOnly": true
-  }
-}