chore: use pnpm's workspace feature to manage base components (#579)

.github/workflows/main.yml

@@ -28,7 +28,7 @@ jobs:
       - name: Install pnpm
         uses: pnpm/action-setup@v2.0.1
         with:
-          version: 6.15.1
+          version: 7.1.6
   
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v2
@@ -38,6 +38,8 @@ jobs:
 
       - name: Install dependencies
         run: pnpm install
+      - name: Build packages
+        run: pnpm build:packages
       - name: Run code lint check
         run: pnpm lint
       - name: Run unit test

.gitignore

@@ -11,7 +11,6 @@ node_modules
 .DS_Store
 dist
 dist-ssr
-dist-typings
 histoire-dist
 coverage
 *.local

env.d.ts

@@ -1 +1,8 @@
 /// <reference types="vite/client" />
+
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  // eslint-disable-next-line
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

histoire.config.ts

@@ -1,5 +0,0 @@
-import { defineConfig } from "histoire";
-
-export default defineConfig({
-  setupFile: "/src/histoire.setup.ts",
-});

package.json

@@ -5,71 +5,73 @@
     "prepare": "husky install",
     "dev": "vite --host",
     "build": "vue-tsc --noEmit && vite build",
+    "build:packages": "pnpm --filter './packages/**' build",
     "preview": "vite preview --port 5050",
-    "test:unit": "vitest --environment jsdom --run",
+    "test:unit": "vitest --environment jsdom --run && pnpm run test:unit:packages",
     "test:unit:watch": "vitest --environment jsdom --watch",
     "test:unit:ui": "vitest --environment jsdom --watch --ui",
     "test:unit:coverage": "vitest run --environment jsdom --coverage",
     "test:e2e": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress open'",
     "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress run'",
-    "typecheck": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore",
-    "story:dev": "histoire dev --port 4000",
-    "story:build": "histoire build",
-    "prettier": "prettier --write './src/**/*.{vue,js,jsx,ts,tsx,css,scss,json,yml,yaml,html}'"
+    "typecheck": "vue-tsc --noEmit -p tsconfig.app.json --composite false && pnpm run typecheck:packages",
+    "lint": "eslint ./src --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore && pnpm run lint:packages",
+    "prettier": "prettier --write './src/**/*.{vue,js,jsx,ts,tsx,css,scss,json,yml,yaml,html}' && pnpm run prettier:packages",
+    "typecheck:packages": "pnpm --filter './packages/**' run typecheck",
+    "lint:packages": "pnpm --filter './packages/**' lint",
+    "prettier:packages": "pnpm --filter './packages/**' prettier",
+    "test:unit:packages": "pnpm --filter './packages/**' run test:unit"
   },
+  "workspaces": [
+    "packages/*"
+  ],
   "dependencies": {
-    "@halo-dev/admin-api": "^1.0.0",
-    "@vueuse/core": "^8.5.0",
-    "filepond": "^4.30.3",
+    "@halo-dev/admin-api": "^1.1.0",
+    "@vueuse/core": "^8.6.0",
+    "filepond": "^4.30.4",
     "filepond-plugin-image-preview": "^4.6.11",
     "floating-vue": "2.0.0-beta.16",
     "lodash.clonedeep": "^4.5.0",
     "pinia": "^2.0.14",
-    "tippy.js": "^6.3.7",
-    "vue": "^3.2.36",
+    "vue": "^3.2.37",
     "vue-filepond": "^7.0.3",
     "vue-grid-layout": "3.0.0-beta1",
-    "vue-router": "^4.0.15"
+    "vue-router": "^4.0.16",
+    "@halo-dev/components": "workspace:*"
   },
   "devDependencies": {
-    "@iconify-json/ri": "^1.1.2",
     "@rushstack/eslint-patch": "^1.1.3",
     "@tailwindcss/aspect-ratio": "^0.4.0",
     "@types/jsdom": "^16.2.14",
     "@types/lodash.clonedeep": "4.5.0",
-    "@types/node": "^17.0.35",
+    "@types/node": "^17.0.42",
     "@vitejs/plugin-vue": "^2.3.3",
     "@vitejs/plugin-vue-jsx": "^1.3.10",
-    "@vitest/ui": "^0.12.9",
+    "@vitest/ui": "^0.12.10",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^10.0.0",
     "@vue/test-utils": "^2.0.0",
     "@vue/tsconfig": "^0.1.3",
     "autoprefixer": "^10.4.7",
     "c8": "^7.11.3",
-    "cypress": "^9.6.1",
-    "eslint": "^8.16.0",
+    "cypress": "^9.7.0",
+    "eslint": "^8.17.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-vue": "^8.7.1",
-    "histoire": "^0.4.6",
     "husky": "^8.0.1",
     "jsdom": "^19.0.0",
     "postcss": "^8.4.14",
     "prettier": "^2.6.2",
     "prettier-plugin-tailwindcss": "^0.1.11",
-    "sass": "^1.52.1",
+    "sass": "^1.52.3",
     "start-server-and-test": "^1.14.0",
-    "tailwindcss": "^3.0.24",
+    "tailwindcss": "^3.1.2",
     "tailwindcss-safe-area": "^0.2.2",
     "tailwindcss-themeable": "^1.3.0",
     "typescript": "~4.6.4",
-    "unplugin-icons": "^0.14.3",
-    "vite": "^2.9.9",
+    "vite": "^2.9.12",
     "vite-compression-plugin": "^0.0.3",
-    "vite-plugin-dts": "^1.1.1",
     "vite-plugin-pwa": "^0.12.0",
-    "vitest": "^0.12.9",
-    "vue-tsc": "^0.34.16"
+    "vitest": "^0.12.10",
+    "vue-tsc": "^0.34.17"
   }
 }

packages/components/.eslintrc.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ["../../.eslintrc.cjs"],
+};

packages/components/env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+/// <reference types="histoire" />
+
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  // eslint-disable-next-line
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

packages/components/histoire.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from "histoire";
+import type { UserConfig } from "vite";
+
+export default defineConfig({
+  setupFile: "./src/histoire.setup.ts",
+
+  vite: {
+    plugins: [
+      {
+        name: "disable-lib-plugin",
+        config(config: UserConfig) {
+          if (!config || !config.build || !config.build.rollupOptions) {
+            return;
+          }
+          config.build.lib = false;
+          config.build.rollupOptions.external = [];
+        },
+      },
+    ],
+  },
+});

packages/components/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@halo-dev/components",
+  "version": "0.0.0",
+  "description": "",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/halo-components.umd.js",
+  "module": "./dist/halo-components.es.js",
+  "unpkg": "./dist/halo-components.iife.js",
+  "jsdelivr": "./dist/halo-components.iife.js",
+  "types": "./dist/typings/index.d.ts",
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build",
+    "test:unit": "vitest --environment jsdom --run",
+    "test:unit:watch": "vitest --environment jsdom --watch",
+    "test:unit:ui": "vitest --environment jsdom --watch --ui",
+    "test:unit:coverage": "vitest run --environment jsdom --coverage",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
+    "story:dev": "histoire dev --port 4000",
+    "story:build": "histoire build",
+    "lint": "eslint ./src --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts",
+    "prettier": "prettier --write './src/**/*.{vue,js,jsx,ts,tsx,css,scss,json,yml,yaml,html}'",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "halo",
+    "halo-components",
+    "halo-dev",
+    "@halo-dev/components"
+  ],
+  "author": {
+    "name": "@halo-dev",
+    "url": "https://github.com/halo-dev"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/halo-dev/halo-admin.git",
+    "directory": "packages/components"
+  },
+  "bugs": {
+    "url": "https://github.com/halo-dev/halo/issues"
+  },
+  "homepage": "https://github.com/halo-dev/halo-admin/tree/next/packages/components#readme",
+  "license": "MIT",
+  "dependencies": {
+    "tippy.js": "^6.3.7"
+  },
+  "devDependencies": {
+    "@iconify-json/ri": "^1.1.2",
+    "@rollup/plugin-typescript": "^8.3.3",
+    "histoire": "^0.7.6",
+    "unplugin-icons": "^0.14.3",
+    "vite-plugin-dts": "^1.2.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.2.37",
+    "vue-router": "^4.0.16"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/halo-components.es.js",
+      "require": "./dist/halo-components.umd.js"
+    },
+    "./dist/style.css": "./dist/style.css"
+  }
+}

packages/components/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

packages/components/prettier.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: ["../../prettier.config.js"],
+};

packages/components/src/components.ts

@@ -0,0 +1,15 @@
+export * from "./components/alert";
+export * from "./components/button";
+export * from "./components/card";
+export * from "./components/checkbox";
+export * from "./components/header";
+export * from "./components/input";
+export * from "./components/menu";
+export * from "./components/modal";
+export * from "./components/radio";
+export * from "./components/select";
+export * from "./components/space";
+export * from "./components/tabs";
+export * from "./components/tag";
+export * from "./components/textarea";
+export * from "./components/tooltip";

packages/components/src/components/alert/Alert.story.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { VAlert } from "./index";
-import { VButton } from "@/components/base/button";
-import { IconMessage } from "@/core/icons";
+import { VButton } from "./../button";
+import { IconMessage } from "../../icons/icons";
 
 function initState() {
   return {

packages/components/src/components/alert/Alert.vue

@@ -1,14 +1,14 @@
 <script lang="ts" setup>
 import type { Component, PropType } from "vue";
 import { computed } from "vue";
-import type { Type } from "@/components/base/alert/interface";
+import type { Type } from "./interface";
 import {
   IconCheckboxCircle,
   IconClose,
   IconCloseCircle,
   IconErrorWarning,
   IconInformation,
-} from "@/core/icons";
+} from "../../icons/icons";
 
 const TypeIcons: Record<Type, Component> = {
   success: IconCheckboxCircle,

packages/components/src/components/button/Button.story.vue

@@ -138,7 +138,7 @@
 <script lang="ts" setup>
 import { VButton } from "./index";
 import { VSpace } from "../space";
-import { IconSettings } from "@/core/icons";
+import { IconSettings } from "../../icons/icons";
 
 function loadingState() {
   return {

packages/components/src/components/button/Button.vue

@@ -39,7 +39,7 @@ import type { PropType } from "vue";
 import { computed } from "vue";
 import type { RouteLocationRaw } from "vue-router";
 import { useRouter } from "vue-router";
-import type { Size, Type } from "@/components/base/button/interface";
+import type { Size, Type } from "./interface";
 
 const props = defineProps({
   type: {

packages/components/src/components/button/__tests__/Button.spec.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it, vi } from "vitest";
 import { VButton } from "../index";
 import { mount } from "@vue/test-utils";
-import { IconSettings } from "../../../../core/icons";
+import { IconSettings } from "../../../icons/icons";
 
 describe("Button", () => {
   it("should render", () => {

packages/components/src/components/card/Card.story.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { VCard } from "./index";
-import { VInput } from "@/components/base/input";
-import { VSpace } from "@/components/base/space";
-import { VButton } from "@/components/base/button";
-import { IconSettings } from "@/core/icons";
+import { VInput } from "../../components/input";
+import { VSpace } from "../../components/space";
+import { VButton } from "../../components/button";
+import { IconSettings } from "../../icons/icons";
 </script>
 
 <template>

packages/components/src/components/checkbox/CheckBox.story.vue

@@ -11,7 +11,7 @@
   </Story>
 </template>
 <script lang="ts" setup>
-import { VCheckboxGroup } from "@/components/base/checkbox";
+import { VCheckboxGroup } from "./index";
 
 function initState() {
   return {

packages/components/src/components/input/Input.story.vue

@@ -18,7 +18,7 @@
   </Story>
 </template>
 <script lang="ts" setup>
-import { VInput } from "@/components/base/input/index";
+import { VInput } from "../../components/input";
 
 function initState() {
   return {

packages/components/src/components/input/Input.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { PropType } from "vue";
 import { computed } from "vue";
-import type { Size } from "@/components/base/input/interface";
+import type { Size } from "./interface";
 
 const props = defineProps({
   modelValue: {

packages/components/src/components/menu/Menu.story.vue

@@ -44,5 +44,5 @@ import {
   IconFolder,
   IconMessage,
   IconPages,
-} from "@/core/icons";
+} from "../../icons/icons";
 </script>

packages/components/src/components/menu/MenuItem.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { IconArrowRight } from "@/core/icons";
+import { IconArrowRight } from "../../icons/icons";
 import { computed, inject, ref, useSlots } from "vue";
 
 const props = defineProps({

packages/components/src/components/menu/RoutesMenu.tsx

@@ -1,7 +1,7 @@
 import type { Component, PropType } from "vue";
 import { computed, defineComponent } from "vue";
-import type { MenuGroupType, MenuItemType } from "@/router/menus.config";
-import { VMenu, VMenuItem, VMenuLabel } from "@/components/base/menu/index";
+import type { MenuGroupType, MenuItemType } from "./interface";
+import { VMenu, VMenuItem, VMenuLabel } from "./index";
 import type { RouteLocationMatched } from "vue-router";
 import { useRoute, useRouter } from "vue-router";
 

packages/components/src/components/menu/interface.ts

@@ -0,0 +1,14 @@
+import type { Component } from "vue";
+
+export interface MenuGroupType {
+  name?: string;
+  items: MenuItemType[];
+}
+
+export interface MenuItemType {
+  name: string;
+  path: string;
+  icon?: Component;
+  meta?: Record<string, unknown>;
+  children?: MenuItemType[];
+}

packages/components/src/components/modal/Modal.story.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { VButton } from "@/components/base/button";
-import { VModal } from "@/components/base/modal";
-import { VSpace } from "@/components/base/space";
+import { VButton } from "../../components/button";
+import { VModal } from "../../components/modal";
+import { VSpace } from "../../components/space";
 
 function initState() {
   return {

packages/components/src/components/modal/Modal.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { PropType } from "vue";
 import { computed, ref } from "vue";
-import { IconClose } from "@/core/icons";
+import { IconClose } from "../../icons/icons";
 
 const props = defineProps({
   visible: {

packages/components/src/components/radio/Radio.story.vue

@@ -15,7 +15,7 @@
   </Story>
 </template>
 <script lang="ts" setup>
-import { VRadio, VRadioGroup } from "@/components/base/radio/index";
+import { VRadio, VRadioGroup } from "../../components/radio";
 
 function initState() {
   return {

packages/components/src/components/select/Select.story.vue

@@ -25,7 +25,7 @@
   </Story>
 </template>
 <script lang="ts" setup>
-import { VOption, VSelect } from "@/components/base/select/index";
+import { VOption, VSelect } from "../../components/select";
 
 function initState() {
   return {

packages/components/src/components/space/Space.story.vue

@@ -38,9 +38,9 @@
   </Story>
 </template>
 <script lang="ts" setup>
-import { VSpace } from "@/components/base/space/index";
-import { VButton } from "@/components/base/button";
-import { VRadio } from "@/components/base/radio";
+import { VSpace } from "../../components/space";
+import { VButton } from "../../components/button";
+import { VRadio } from "../../components/radio";
 
 function initState() {
   return {

packages/components/src/components/tabs/Tabs.vue

@@ -2,7 +2,7 @@
 import type { ComputedRef, PropType } from "vue";
 import { computed, provide, useSlots } from "vue";
 import { VTabbar } from "./index";
-import type { Direction, Type } from "@/components/base/tabs/interface";
+import type { Direction, Type } from "./interface";
 
 const props = defineProps({
   activeId: {

packages/components/src/components/tag/Tag.story.vue

@@ -43,7 +43,7 @@
   </Story>
 </template>
 <script lang="ts" setup>
-import { VTag } from "@/components/base/tag/index";
-import { VSpace } from "@/components/base/space/index";
-import { IconSettings } from "@/core/icons";
+import { VTag } from "../../components/tag";
+import { VSpace } from "../../components/space";
+import { IconSettings } from "../../icons/icons";
 </script>

packages/components/src/components/tag/Tag.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { PropType } from "vue";
 import { computed } from "vue";
-import type { Theme } from "@/components/base/tag/interface";
+import type { Theme } from "./interface";
 
 const props = defineProps({
   theme: {

packages/components/src/components/textarea/Textarea.story.vue

@@ -20,7 +20,7 @@
   </Story>
 </template>
 <script lang="ts" setup>
-import { VTextarea } from "@/components/base/textarea/index";
+import { VTextarea } from "./index";
 
 function initState() {
   return {

packages/components/src/components/tooltip/Tooltip.story.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { VTooltip } from "@/components/base/tooltip";
-import { VButton } from "@/components/base/button";
+import { VTooltip } from "../../components/tooltip";
+import { VButton } from "../../components/button";
 </script>
 <template>
   <Story title="Tooltip">