chore: all update readme (#240)

* fix: add readme * chore: update readme * chore: updated read me all components
oku-ui · Jul 23, 2023 · 35f22fb · 35f22fb
1 parent b4f6cbf
commit 35f22fb
Show file tree

Hide file tree

Showing 21 changed files with 84 additions and 32 deletions.
diff --git a/README.md b/README.md
@@ -24,36 +24,37 @@ Enter the component you want most in the components, leave the emojis and follow
 
 **Developers can work on unclaimed components**.
 
-- [ ] [Accordion](https://github.com/oku-ui/primitives/issues/3)
-- [ ] [Alert Dialog](https://github.com/oku-ui/primitives/issues/4)
-- [x] [Aspect Ratio](https://github.com/oku-ui/primitives/issues/1)
-- [x] [Avatar](https://github.com/oku-ui/primitives/issues/5)
-- [x] [Checkbox](https://github.com/oku-ui/primitives/issues/6)
-- [x] [Collapsible](https://github.com/oku-ui/primitives/issues/7)
-- [ ] [Context Menu](https://github.com/oku-ui/primitives/issues/8)
-- [ ] [Dialog](https://github.com/oku-ui/primitives/issues/9)
-- [ ] [Dropdown Menu](https://github.com/oku-ui/primitives/issues/10)
-- [ ] [Form](https://github.com/oku-ui/primitives/issues/11)
-- [ ] [Hover Card](https://github.com/oku-ui/primitives/issues/12)
-- [x] [Label](https://github.com/oku-ui/primitives/issues/2)
-- [ ] [Menubar](https://github.com/oku-ui/primitives/issues/13)
-- [ ] [Navigation Menu](https://github.com/oku-ui/primitives/issues/14)
-- [ ] [Popover](https://github.com/oku-ui/primitives/issues/15)
-- [x] [Progress](https://github.com/oku-ui/primitives/issues/16)
-- [ ] [Radio Group](https://github.com/oku-ui/primitives/issues/17)
-- [ ] [Scroll Area](https://github.com/oku-ui/primitives/issues/18)
-- [ ] [Select](https://github.com/oku-ui/primitives/issues/19)
-- [x] [Separator](https://github.com/oku-ui/primitives/issues/20)
-- [ ] [Slider](https://github.com/oku-ui/primitives/issues/21)
-- [ ] [Switch](https://github.com/oku-ui/primitives/issues/22)
-- [ ] [Tabs](https://github.com/oku-ui/primitives/issues/23)
-- [ ] [Toast](https://github.com/oku-ui/primitives/issues/24)
-- [x] [Toggle](https://github.com/oku-ui/primitives/issues/25)
-- [ ] [Toggle Group](https://github.com/oku-ui/primitives/issues/26)
-- [ ] [Toolbar](https://github.com/oku-ui/primitives/issues/27)
-- [ ] [Tooltip](https://github.com/oku-ui/primitives/issues/28)
+| Component | Description | Status | Docs |
+| --- | --- | --- | --- |
+| [Accordion](https://github.com/oku-ui/primitives/issues/3) | A group of collapsible panels | Not Started | -  |
+| [Alert Dialog](https://github.com/oku-ui/primitives/issues/4) | A modal dialog that interrupts the user's workflow to get a response | Not Started | -  |
+| [Aspect Ratio](https://oku-ui.com/primitives/components/aspect-ratio) | <span><a href="https://www.npmjs.com/package/@oku-ui/aspect-ratio "><img src="https://img.shields.io/npm/v/@oku-ui/aspect-ratio.svg?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/aspect-ratio"><img src="https://img.shields.io/npm/dm/@oku-ui/aspect-ratio.svg?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"></a> </span> | <span> <a href="https://oku-ui.com/primitives/components/aspect-ratio"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span> |
+| [Avatar](https://oku-ui.com/primitives/components/avatar) | <span><a href="https://www.npmjs.com/package/@oku-ui/avatar "><img src="https://img.shields.io/npm/v/@oku-ui/avatar?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/avatar"><img src="https://img.shields.io/npm/dm/@oku-ui/avatar?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"></a></span> | <span> <a href="https://oku-ui.com/primitives/components/avatar"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> |
+| [Checkbox](https://oku-ui.com/primitives/components/checkbox) | <span><a href="https://www.npmjs.com/package/@oku-ui/checkbox "><img src="https://img.shields.io/npm/v/@oku-ui/checkbox?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/checkbox"> <img src="https://img.shields.io/npm/dm/@oku-ui/checkbox?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/checkbox"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> |
+| [Collapsible](https://oku-ui.com/primitives/components/collapsible) | <span><a href="https://www.npmjs.com/package/@oku-ui/collapsible "><img src="https://img.shields.io/npm/v/@oku-ui/collapsible?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/collapsible"> <img src="https://img.shields.io/npm/dm/@oku-ui/collapsible?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/collapsible"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> |
+| [Context Menu](https://github.com/oku-ui/primitives/issues/8) | A menu that appears when a user interacts with an element's trigger | Not Started | -  |
+| [Dialog](https://github.com/oku-ui/primitives/issues/9) | A modal dialog that interrupts the user's workflow to get a response | Not Started | -  |
+| [Dropdown Menu](https://github.com/oku-ui/primitives/issues/10) | A menu that appears when a user interacts with an element's trigger | Not Started | -  |
+| [Form](https://github.com/oku-ui/primitives/issues/11) | A group of form controls | Not Started | -  |
+| [Hover Card](https://github.com/oku-ui/primitives/issues/12) | A card that appears when a user hovers over an element | Not Started | -  |
+| [Label](https://oku-ui.com/primitives/components/label) | <span><a href="https://www.npmjs.com/package/@oku-ui/label "><img src="https://img.shields.io/npm/v/@oku-ui/label?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/label"> <img src="https://img.shields.io/npm/dm/@oku-ui/label?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/label"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> |
+| [Menubar](https://github.com/oku-ui/primitives/issues/13) | A menu that appears when a user interacts with an element's trigger | Not Started | -  |
+| [Navigation Menu](https://github.com/oku-ui/primitives/issues/14) | A menu that appears when a user interacts with an element's trigger | Not Started | -  |
+| [Popover](https://github.com/oku-ui/primitives/issues/15) | A card that appears when a user hovers over an element | Not Started | -  |
+| [Progress](https://oku-ui.com/primitives/components/progress) | <span><a href="https://www.npmjs.com/package/@oku-ui/progress "><img src="https://img.shields.io/npm/v/@oku-ui/progress?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/progress"> <img src="https://img.shields.io/npm/dm/@oku-ui/progress?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/progress"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span> |
+| [Radio Group](https://github.com/oku-ui/primitives/issues/17) | A group of radio buttons | Not Started | -  |
+| [Scroll Area](https://github.com/oku-ui/primitives/issues/18) | A scrollable area | Not Started | -  |
+| [Select](https://github.com/oku-ui/primitives/issues/19) | A control that allows users to select one or more items from a list of options | 🚧 In Progress | -  |
+| [Separator](https://oku-ui.com/primitives/components/separator) | <span><a href="https://www.npmjs.com/package/@oku-ui/separator "><img src="https://img.shields.io/npm/v/@oku-ui/separator?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/separator"> <img src="https://img.shields.io/npm/dm/@oku-ui/separator?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/separator"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span> |
+| [Slider](https://github.com/oku-ui/primitives/issues/21) | A control that allows users to input numeric values in a given range | Not Started | -  |
+| [Switch](https://github.com/oku-ui/primitives/issues/22) | A control that allows users to switch between two mutually exclusive options | 🚧 In Progress | -  |
+| [Tabs](https://github.com/oku-ui/primitives/issues/23) | A group of tabs | 🚧 In Progress | -  |
+| [Toast](https://github.com/oku-ui/primitives/issues/24) | A non-modal dialog that appears and disappears from the screen |  | -  |
+| [Toggle](https://oku-ui.com/primitives/components/toggle) | <span><a href="https://www.npmjs.com/package/@oku-ui/toggle "><img src="https://img.shields.io/npm/v/@oku-ui/toggle?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/toggle"> <img src="https://img.shields.io/npm/dm/@oku-ui/toggle?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/toggle"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span> |
+| [Toggle Group](https://github.com/oku-ui/primitives/issues/26) | A group of toggle buttons | Not Started | -  |
+| [Toolbar](https://github.com/oku-ui/primitives/issues/27) | A group of toolbar buttons | Not Started | -  |
+| [Tooltip](https://github.com/oku-ui/primitives/issues/28) | A card that appears when a user hovers over an element | Not Started | -  |
 
----
 
 ## Community
 

diff --git a/packages/components/arrow/README.md b/packages/components/arrow/README.md
@@ -1,5 +1,7 @@
 # `arrow`
 
+<span><a href="https://www.npmjs.com/package/@oku-ui/arrow "><img src="https://img.shields.io/npm/v/@oku-ui/arrow?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/arrow"> <img src="https://img.shields.io/npm/dm/@oku-ui/arrow?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span>
+
 ## Installation
 
 ```sh

diff --git a/packages/components/aspect-ratio/README.md b/packages/components/aspect-ratio/README.md
@@ -1,5 +1,7 @@
 # `aspect-ratio`
 
+<span><a href="https://www.npmjs.com/package/@oku-ui/aspect-ratio "><img src="https://img.shields.io/npm/v/@oku-ui/aspect-ratio?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/aspect-ratio"> <img src="https://img.shields.io/npm/dm/@oku-ui/aspect-ratio?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/aspect-ratio"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span>
+
 ## Installation
 
 ```sh

diff --git a/packages/components/avatar/README.md b/packages/components/avatar/README.md
@@ -1,4 +1,6 @@
-# `avatar-ratio`
+# `avatar`
+
+<span><a href="https://www.npmjs.com/package/@oku-ui/avatar "><img src="https://img.shields.io/npm/v/@oku-ui/avatar?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/avatar"> <img src="https://img.shields.io/npm/dm/@oku-ui/avatar?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/avatar"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span>
 
 ## Installation
 

diff --git a/packages/components/checkbox/README.md b/packages/components/checkbox/README.md
@@ -1,5 +1,7 @@
 # `@oku-ui/checkbox`
 
+<span><a href="https://www.npmjs.com/package/@oku-ui/checkbox "><img src="https://img.shields.io/npm/v/@oku-ui/checkbox?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/checkbox"> <img src="https://img.shields.io/npm/dm/@oku-ui/checkbox?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/checkbox"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span>
+
 ## Installation
 
 ```sh

diff --git a/packages/components/collapsible/README.md b/packages/components/collapsible/README.md
@@ -1,5 +1,7 @@
 # `@oku-ui/collapsible`
 
+<span><a href="https://www.npmjs.com/package/@oku-ui/collapsible "><img src="https://img.shields.io/npm/v/@oku-ui/collapsible?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/collapsible"> <img src="https://img.shields.io/npm/dm/@oku-ui/collapsible?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/collapsible"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span>
+
 ## Installation
 
 ```sh

diff --git a/packages/components/label/README.md b/packages/components/label/README.md
@@ -1,5 +1,7 @@
 # `label`
 
+<span><a href="https://www.npmjs.com/package/@oku-ui/label "><img src="https://img.shields.io/npm/v/@oku-ui/label?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/label"> <img src="https://img.shields.io/npm/dm/@oku-ui/label?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/label"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span>
+
 ## Installation
 
 ```sh

diff --git a/packages/components/popper/README.md b/packages/components/popper/README.md
@@ -1,5 +1,6 @@
 # `@oku-ui/toggle`
 
+<span><a href="https://www.npmjs.com/package/@oku-ui/toggle "><img src="https://img.shields.io/npm/v/@oku-ui/toggle?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/toggle"> <img src="https://img.shields.io/npm/dm/@oku-ui/toggle?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span>
 ## Installation
 
 ```sh

diff --git a/packages/components/presence/README.md b/packages/components/presence/README.md
@@ -1,5 +1,7 @@
 # `presence`
 
+<span><a href="https://www.npmjs.com/package/@oku-ui/presence "><img src="https://img.shields.io/npm/v/@oku-ui/presence?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/presence"> <img src="https://img.shields.io/npm/dm/@oku-ui/presence?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span>
+
 ## Installation
 
 ```sh

diff --git a/packages/components/progress/README.md b/packages/components/progress/README.md
@@ -1,5 +1,7 @@
 # `@oku-ui/progress`
 
+<span><a href="https://www.npmjs.com/package/@oku-ui/progress "><img src="https://img.shields.io/npm/v/@oku-ui/progress?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/progress"> <img src="https://img.shields.io/npm/dm/@oku-ui/progress?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/progress"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span>
+
 ## Installation
 
 ```sh

diff --git a/packages/components/separator/README.md b/packages/components/separator/README.md
@@ -1,5 +1,7 @@
 # `separator`
 
+<span><a href="https://www.npmjs.com/package/@oku-ui/separator "><img src="https://img.shields.io/npm/v/@oku-ui/separator?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/separator"> <img src="https://img.shields.io/npm/dm/@oku-ui/separator?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/separator"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span>
+
 ## Installation
 
 ```sh

diff --git a/packages/components/switch/README.md b/packages/components/switch/README.md
@@ -1,5 +1,7 @@
 # `@oku-ui/switch`
 
+<span><a href="https://www.npmjs.com/package/@oku-ui/switch "><img src="https://img.shields.io/npm/v/@oku-ui/switch?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/switch"> <img src="https://img.shields.io/npm/dm/@oku-ui/switch?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/switch"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span>
+
 ## Installation
 
 ```sh

diff --git a/packages/components/switch/package.json b/packages/components/switch/package.json
@@ -8,7 +8,8 @@
   "homepage": "https://oku-ui.com/primitives",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/oku-ui/primitives.git"
+    "url": "git+https://github.com/oku-ui/primitives.git",
+    "directory": "packages/components/switch"
   },
   "bugs": {
     "url": "https://github.com/oku-ui/primitives/issues"

diff --git a/packages/components/toggle/README.md b/packages/components/toggle/README.md
@@ -1,5 +1,7 @@
 # `@oku-ui/toggle`
 
+<span><a href="https://www.npmjs.com/package/@oku-ui/toggle "><img src="https://img.shields.io/npm/v/@oku-ui/toggle?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/toggle"> <img src="https://img.shields.io/npm/dm/@oku-ui/toggle?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/toggle"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span>
+
 ## Installation
 
 ```sh

diff --git a/packages/example-package/package.json b/packages/example-package/package.json
@@ -8,7 +8,8 @@
   "homepage": "https://oku-ui.com/primitives",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/oku-ui/primitives.git"
+    "url": "git+https://github.com/oku-ui/primitives.git",
+        "directory": "packages/components/example"
   },
   "bugs": {
     "url": "https://github.com/oku-ui/primitives/issues"

diff --git a/playground/nuxt3/pages/index.vue b/playground/nuxt3/pages/index.vue
@@ -40,6 +40,10 @@ const pages: Page[] = [
     name: 'OkuCollapsible',
     path: '/collapsible',
   },
+  {
+    name: 'OkuSwitch',
+    path: '/switch',
+  },
 ]
 </script>
 

diff --git a/playground/vue3/package.json b/playground/vue3/package.json
@@ -17,6 +17,7 @@
     "@oku-ui/label": "workspace:^",
     "@oku-ui/progress": "workspace:^",
     "@oku-ui/separator": "workspace:^",
+    "@oku-ui/switch": "workspace:^",
     "vite-plugin-pages": "^0.31.0",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4"

diff --git a/playground/vue3/src/pages/collapsible.vue b/playground/vue3/src/pages/collapsible.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <CollapsibleDemo allshow />
+  </div>
+</template>
diff --git a/playground/vue3/src/pages/index.vue b/playground/vue3/src/pages/index.vue
@@ -36,6 +36,14 @@ const pages: Page[] = [
     name: 'OkuPopper',
     path: '/popper',
   },
+  {
+    name: 'OkuCollapsible',
+    path: '/collapsible',
+  },
+  {
+    name: 'OkuSwitch',
+    path: '/switch',
+  },
 ]
 </script>
 

diff --git a/playground/vue3/src/pages/switch.vue b/playground/vue3/src/pages/switch.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <SwitchDemo allshow />
+  </div>
+</template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml