feat: plugins

Author: productdevbook

.docs/.vitepress/config.ts

@@ -113,6 +113,7 @@ export default defineConfig({
           { text: 'Animation/Transition', link: '/guides/animation' },
           { text: 'Composition', link: '/guides/composition' },
           { text: 'Server side rendering', link: '/guides/server-side-rendering' },
+          { text: 'Namespaced', link: '/docs/guides/namespaced-components' },
         ],
       },
       {
@@ -125,12 +126,12 @@ export default defineConfig({
           { text: 'Avatar', link: '/components/avatar' },
           { text: 'Checkbox', link: '/components/checkbox' },
           { text: 'Collapsible', link: '/components/collapsible' },
-          { text: 'Context Menu', link: '/components/context-menu' },
+          { text: `Context Menu ${BadgeHTML('New')}`, link: '/components/context-menu' },
           { text: 'Dialog', link: '/components/dialog' },
-          { text: 'Dropdown Menu', link: '/components/dropdown-menu' },
+          { text: `Dropdown Menu ${BadgeHTML('New')}`, link: '/components/dropdown-menu' },
           { text: 'Hover Card', link: '/components/hover-card' },
           { text: 'Label', link: '/components/label' },
-          { text: 'Menubar', link: '/components/menubar' },
+          { text: `Menubar ${BadgeHTML('New')}`, link: '/components/menubar' },
           // { text: 'Navigation Menu', link: '/components/navigation-menu' },
           { text: 'Popover', link: '/components/popover' },
           { text: 'Progress', link: '/components/progress' },

.docs/content/guides/animation.md

@@ -89,9 +89,8 @@ import { DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPor
 ```
 
 ::: tip
-Futhemore, we discovered that [Motion One](https://motion.dev/vue/quick-start), a Web Animations API based animation library works perfectly with Oku Primitives.
+Futhemore, we discovered that [Motion One](https://motion.oku-ui.com), a Web Animations API based animation library works perfectly with Oku Primitives.
 
-Check out this [Stackblitz Demo](https://stackblitz.com/edit/hfxgtx-n6jbjp?file=src%2FApp.vue) 🤩
 :::
 
 ## Delegating unmounting for JavaScript Animation
@@ -156,5 +155,5 @@ watch(open, () => {
 ```
 
 ::: tip
-Check out this [Stackblitz Demo](https://stackblitz.com/edit/macsaz?file=src%2FApp.vue)
+Check out this [Stackblitz Demo]()
 :::

.docs/content/guides/composition.md

@@ -1,23 +1,23 @@
 ---
 
 title: Composition
-description: Use the `asChild` prop to compose Radix's functionality onto alternative element types or your own Vue components.
+description: Use the `as` prop to compose Radix's functionality onto alternative element types or your own Vue components.
 ---
 
 # Composition
 
 <Description>
-Use the `asChild` prop to compose Radix's functionality onto alternative
+Use the `as` prop to compose Radix's functionality onto alternative
 element types or your own Vue components.
 </Description>
 
-All Radix primitive parts that render a DOM element accept an `asChild` prop. When `asChild` is set to `true`, Oku Primitives will not render a default DOM element, instead passing the props and behavior required to make it functional to the first child of the slots.
+All Radix primitive parts that render a DOM element accept an `as` prop. When `as` is set to `true`, Oku Primitives will not render a default DOM element, instead passing the props and behavior required to make it functional to the first child of the slots.
 
 ## Changing the element type
 
 In the majority of cases you shouldn’t need to modify the element type as Radix has been designed to provide the most appropriate defaults. However, there are cases where it is helpful to do so.
 
-A good example is with `TooltipTrigger`. By default this part is rendered as a `button`, though you may want to add a tooltip to a link (`a` tag) as well. Let's see how you can achieve this using `asChild`:
+A good example is with `TooltipTrigger`. By default this part is rendered as a `button`, though you may want to add a tooltip to a link (`a` tag) as well. Let's see how you can achieve this using `as`:
 
 ```vue{7}
 <script setup lang="ts">
@@ -26,7 +26,7 @@ import { TooltipRoot, TooltipTrigger, TooltipPortal } from "@oku-ui/primitives";
 
 <template>
   <TooltipRoot>
-    <TooltipTrigger asChild>
+    <TooltipTrigger as="template">
       <a href="https://primitives.oku-ui.com/">Oku Primitives</a>
     </TooltipTrigger>
     <TooltipPortal>…</TooltipPortal>
@@ -40,12 +40,12 @@ In reality, you will rarely modify the underlying DOM element like we've seen ab
 
 ## Composing with your own Vue components
 
-This works exactly the same as above, you pass `asChild` to the part and then wrap your own component with it.
+This works exactly the same as above, you pass `as` to the part and then wrap your own component with it.
 However, there are a few gotchas to be aware of.
 
 ## Composing multiple primitives
 
-`asChild` can be used as deeply as you need to. This means it is a great way to compose multiple primitive's behavior together.
+`as` can be used as deeply as you need to. This means it is a great way to compose multiple primitive's behavior together.
 Here is an example of how you can compose `TooltipTrigger` and `DialogTrigger` together with your own button:
 
 ```vue{9,10}
@@ -57,8 +57,8 @@ import MyButton from from "@/components/MyButton.vue"
 <template>
   <DialogRoot>
     <TooltipRoot>
-      <TooltipTrigger asChild>
-        <DialogTrigger asChild>
+      <TooltipTrigger as="template">
+        <DialogTrigger as="template">
           <MyButton>Open dialog</MyButton>
         </DialogTrigger>
       </TooltipTrigger>

.docs/content/guides/namespaced-components.md

@@ -0,0 +1,40 @@
+# Namespaced Components
+
+The Oku Primitives design pattern involves creating individual primitives for each component, allowing users to construct or [compose](./composition) components as they wish.
+
+However, importing all the necessary components individually can be cumbersome, and users might occasionally forget to import an important component.
+
+To address this issue, we’ve introduced [Namespaced components](https://vuejs.org/api/sfc-script-setup.html#namespaced-components).
+
+## How to use?
+
+First, you need to import the namespaced components via `@oku-ui/primitives/namespaced` in your Vue component.
+
+```vue line=2
+<script setup lang="ts">
+import { Dialog, DropdownMenu } from '@oku-ui/primitives/namespaced'
+</script>
+```
+
+Then, you can use all the relevant components within the namespace.
+
+```vue line=6-17
+<script setup lang="ts">
+import { Dialog } from '@oku-ui/primitives/namespaced'
+</script>
+
+<template>
+  <Dialog.Root>
+    <Dialog.Trigger>
+      Trigger
+    </Dialog.Trigger>
+  </Dialog.Root>
+
+  <Dialog.Portal>
+    <Dialog.Overlay />
+    <Dialog.Content>
+      …
+    </Dialog.Content>
+  </Dialog.Portal>
+</template>
+```

.docs/scripts/autogen.ts

@@ -7,7 +7,7 @@ import fg from 'fast-glob'
 import MarkdownIt from 'markdown-it'
 import { babelParse, parse as sfcParse } from 'vue/compiler-sfc'
 import { createChecker } from 'vue-component-meta'
-import { components } from '../../packages/core/constant/components'
+import { components } from '../../packages/core/src/constant/components'
 import { transformJSDocLinks } from './utils'
 
 // @ts-expect-error ignore

.storybook/main.ts

@@ -18,10 +18,11 @@ const config: StorybookConfig = {
   framework: {
     name: '@storybook/vue3-vite',
     options: {
-      docgen: {
-        plugin: 'vue-component-meta',
-        tsconfig: 'tsconfig.app.json',
-      },
+      // TODO: ReferenceError: clamp is not defined
+      // docgen: {
+      //   plugin: 'vue-component-meta',
+      //   tsconfig: 'tsconfig.app.json',
+      // },
     },
   },
   docs: {

CONTRIBUTING.md

@@ -49,10 +49,10 @@ pnpm build core utils # Build only core and utils package (packages/core) check
 
 ```shell
 pnpm dev
-pnpm build # Build all packages with cache (packages/components)
-pnpm build:skip # Build without cache (packages/components)
+pnpm build # Build all packages with cache (packages)
+pnpm build:skip # Build without cache (packages)
 
-pnpm story # Run Storybook and live reload support (packages/vue/src)
+pnpm story # Run Storybook and live reload support (packages/core/src)
 pnpm build:storybook # Build Storybook
 
 pnpm lint # Run ESLint

package.json

@@ -1,7 +1,6 @@
 {
   "name": "primitives",
   "type": "module",
-  "version": "0.6.1",
   "packageManager": "[email protected]",
   "repository": "oku-ui/primitives",
   "engines": {
@@ -13,14 +12,9 @@
     "docs:build": "pnpm --filter docs docs:build",
     "nuxt:generate": "pnpm --filter nuxt-app generate",
     "build:skip": "pnpm nx run-many -t build --skip-nx-cache",
-    "oku": "pnpm jiti ./scripts/index.ts",
     "story": "pnpm storybook dev -p 6006 --no-open",
     "lint": "eslint . --cache",
     "lint:fix": "eslint . --fix --cache",
-    "play:vue": "pnpm clean:dts && pnpm --filter=vue3 p:dev",
-    "play:nuxt": "pnpm clean:dts && pnpm --filter=nuxt3 p:dev",
-    "play": "pnpm clean:dts && pnpm --filter='./playground/**' p:dev",
-    "play:gencomponents": "pnpm jiti ./scripts/playground-generator.ts",
     "test": "vitest run",
     "test:watch": "vitest --watch",
     "test:nuxt": "vitest -c vitest.nuxt.config.ts --coverage",
@@ -30,10 +24,8 @@
     "clean": "pnpm nx run-many -t clean",
     "clean:node": "rimraf 'packages/**/node_modules' 'playground/**/node_modules' 'node_modules'",
     "clean:dist": "rimraf 'packages/**/dist' 'playground/**/dist'",
-    "clean:dts": "rimraf 'playground/vue3/src/components.d.ts' 'playground/vue3/src/auto-imports.d.ts' 'playground/nuxt3/.nuxt'",
     "update:version": "esno scripts/update-version.ts",
     "prepare": "npx simple-git-hooks",
-    "release": "bumpp --commit --push --tag",
     "scripts:genpackage": "esno scripts/generateAliasCode.ts"
   },
   "devDependencies": {
@@ -42,6 +34,7 @@
     "@egoist/tailwindcss-icons": "^1.8.1",
     "@floating-ui/vue": "^1.1.5",
     "@iconify-json/ph": "^1.2.1",
+    "@oku-ui/primitives": "workspace:^",
     "@storybook/addon-essentials": "^8.4.2",
     "@storybook/addon-interactions": "^8.4.2",
     "@storybook/addon-links": "^8.4.2",
@@ -88,6 +81,11 @@
     "vue": "^3.5.12",
     "vue-component-meta": "^2.1.10"
   },
+  "pnpm": {
+    "overrides": {
+      "@oku-ui/primitives": "workspace:^"
+    }
+  },
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged"
   },

packages/core/index.ts

@@ -1,18 +1,19 @@
 {
   "name": "@oku-ui/primitives",
   "type": "module",
-  "version": "0.7.0",
+  "version": "0.7.1-beta.1",
   "license": "MIT",
   "funding": "https://github.com/sponsors/productdevbook",
   "homepage": "https://oku-ui.com/primitives",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/oku-ui/primitives.git",
-    "directory": "packages/vue-primitives"
+    "directory": "packages/core"
   },
   "bugs": {
     "url": "https://github.com/oku-ui/primitives/issues"
   },
+
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -28,8 +29,8 @@
   "typesVersions": {
     "*": {
       "*": [
-        "./dist/*",
-        "./*"
+        "./dist/*/index.d.ts",
+        "./dist/index.d.ts"
       ]
     }
   },