feat(ui): added ui package (#98)

Signed-off-by: Neko Ayaka <neko@ayaka.moe>

Author: nekomeowww

.vscode/settings.json

@@ -10,8 +10,9 @@
     "graymatter",
     "iconify",
     "Logseq",
-    "Nólëbase",
+    "mkdist",
     "nolebase",
+    "Nólëbase",
     "quotepath"
   ],
   "prettier.enable": false,

docs/.vitepress/config.ts

@@ -48,6 +48,7 @@ export default defineConfig({
         nav: [
           { text: 'Guide', link: '/pages/en/guide/getting-started' },
           { text: 'Integrations', link: '/pages/en/integrations/' },
+          { text: 'UI Components', link: '/pages/en/ui/' },
         ],
         sidebar: [
           {
@@ -98,6 +99,7 @@ export default defineConfig({
         nav: [
           { text: '指南', link: '/pages/zh-CN/guide/getting-started' },
           { text: '集成', link: '/pages/zh-CN/integrations/' },
+          { text: 'UI 组件', link: '/pages/zh-CN/ui/' },
         ],
         sidebar: [
           {

docs/.vitepress/theme/index.ts

@@ -1,6 +1,11 @@
 import { h } from 'vue'
+import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 
+import {
+  install as installNolebaseUI,
+} from '@nolebase/ui'
+
 import {
   LayoutMode as NolebaseEnhancedReadabilitiesLayoutMode,
   NolebaseEnhancedReadabilitiesMenu,
@@ -35,7 +40,6 @@ import '@nolebase/vitepress-plugin-page-properties/client/style.css'
 import './styles/vars.css'
 import './styles/main.css'
 
-import type { Theme } from 'vitepress'
 import IntegrationCard from './components/IntegrationCard.vue'
 import HomeContent from './components/HomeContent.vue'
 import RiveCanvas from './components/LazyRiveDataCanvas.vue'
@@ -57,6 +61,8 @@ export default {
     })
   },
   enhanceApp({ app }) {
+    installNolebaseUI(app)
+
     app.component('IntegrationCard', IntegrationCard)
     app.component('HomeContent', HomeContent)
 

docs/package.json

@@ -12,6 +12,7 @@
   "devDependencies": {
     "@nolebase/markdown-it-bi-directional-links": "workspace:^",
     "@nolebase/markdown-it-element-transform": "workspace:^",
+    "@nolebase/ui": "workspace:^",
     "@nolebase/vitepress-plugin-enhanced-readabilities": "workspace:^",
     "@nolebase/vitepress-plugin-git-changelog": "workspace:^",
     "@nolebase/vitepress-plugin-highlight-targeted-heading": "workspace:^",

docs/pages/en/ui/index.md

@@ -0,0 +1,13 @@
+# UI Components
+
+::: warning 🚧 Constructing
+Nice to meet you! But sorry, this page is still under construction. If you don’t find the information you are interested in, you can first find the content you are interested in in the navigation in the sidebar to start reading.
+:::
+
+## Buttons
+
+<div>
+  <NuButton>
+    ABCD
+  </NuButton>
+</div>

docs/pages/zh-CN/ui/index.md

@@ -0,0 +1,13 @@
+# UI 组件
+
+::: warning 🚧 施工中
+很高兴见到你！但很抱歉，这个页面还在施工中，如果没有找到你感兴趣的信息，你可以先在侧边栏的导航中寻找你感兴趣的内容来开始阅读
+:::
+
+## 按钮
+
+<div>
+  <NuButton>
+    ABCD
+  </NuButton>
+</div>

docs/vite.config.ts

@@ -1,4 +1,4 @@
-import { join } from 'node:path'
+import { join, resolve } from 'node:path'
 import { defineConfig } from 'vite'
 import UnoCSS from 'unocss/vite'
 import Inspect from 'vite-plugin-inspect'
@@ -11,6 +11,11 @@ export default defineConfig({
     '**/*.mp4',
     '**/*.riv',
   ],
+  resolve: {
+    alias: {
+      '@nolebase/ui': resolve(__dirname, '../packages/ui/src/'),
+    },
+  },
   plugins: [
     Inspect(),
     UnoCSS(),

packages/ui/build.config.ts

@@ -0,0 +1,32 @@
+// Thanks to https://github.com/wobsoriano/vue-sfc-unbuild
+// and all the discussions in https://github.com/unjs/unbuild/issues/80
+// for the following configuration.
+
+import { defineBuildConfig } from 'unbuild'
+
+export default defineBuildConfig({
+  entries: [
+    {
+      builder: 'mkdist',
+      input: './src',
+      pattern: ['**/*.vue'],
+      loaders: ['vue'],
+    },
+    {
+      builder: 'mkdist',
+      input: './src',
+      pattern: ['**/*.ts'],
+      format: 'cjs',
+      loaders: ['js'],
+    },
+    {
+      builder: 'mkdist',
+      input: './src',
+      pattern: ['**/*.ts'],
+      format: 'esm',
+      loaders: ['js'],
+    },
+  ],
+  declaration: true,
+  clean: true,
+})

packages/ui/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@nolebase/ui",
+  "type": "module",
+  "version": "1.22.4",
+  "description": "A collection of Vue components Nolebase uses.",
+  "author": {
+    "name": "Nólëbase",
+    "email": "nolebase@ayaka.moe",
+    "url": "https://github.com/nolebase"
+  },
+  "license": "MIT",
+  "homepage": "https://nolebase-integrations.ayaka.io/pages/en/ui/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nolebase/integrations.git",
+    "directory": "packages/ui"
+  },
+  "keywords": [
+    "unjs",
+    "vue",
+    "vite",
+    "vitepress",
+    "vitepress-plugin",
+    "components",
+    "component-library",
+    "markdown",
+    "frontmatter",
+    "nolebase",
+    "nolebase-integration"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "*",
+        "dist/*",
+        "dist/*.d.ts",
+        "dist/*/index.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "README.md",
+    "dist",
+    "package.json"
+  ],
+  "scripts": {
+    "build": "unbuild"
+  },
+  "peerDependencies": {
+    "vue": "^3.2.0"
+  },
+  "devDependencies": {
+    "@vue/tsconfig": "^0.5.1"
+  }
+}

packages/ui/src/components/NuButton.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const count = ref(0)
+
+function onClick() {
+  count.value++
+  // eslint-disable-next-line no-console
+  console.log('Button clicked')
+}
+</script>
+
+<template>
+  <div>
+    <button
+      bg="blue" rounded="md" text="white" p="2" shadow="md" transition="all 0.3s ease"
+      @click="onClick"
+    >
+      <span>
+        Count is: {{ count }}
+      </span>
+      <div>
+        <slot />
+      </div>
+    </button>
+  </div>
+</template>