chore: update docs

oku-ui · Nov 9, 2024 · 7337941 · 7337941
1 parent 07c9d21
commit 7337941
Show file tree

Hide file tree

Showing 30 changed files with 309 additions and 167 deletions.
diff --git a/.docs/.vitepress/components/NewHeroCodeGroup.vue b/.docs/.vitepress/components/NewHeroCodeGroup.vue
@@ -121,7 +121,7 @@ watch(open, () => {
                   <SelectItem
                     v-for="framework in cssFrameworkOptions"
                     :key="framework.label"
-                    class="text-xs leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] pl-[25px] relative select-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+                    class="text-xs leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] pl-[25px] relative select-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
                     :value="framework.value"
                   >
                     <SelectItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">

diff --git a/.docs/.vitepress/components/NewHeroContainer.vue b/.docs/.vitepress/components/NewHeroContainer.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import CodeSandbox from '../../components/CodeSandbox.vue'
 import Stackblitz from '../../components/Stackblitz.vue'
+import Storybook from '../../components/Storybook.vue'
+import Nuxt from '../../components/Nuxt.vue'
 
 withDefaults(
   defineProps<{
@@ -36,6 +38,22 @@ withDefaults(
           :name="folder"
           :files="files"
         />
+
+        <Storybook
+          v-if="folder"
+          :key="cssFramework"
+          class="hidden sm:block absolute bottom-4 left-4"
+          :name="folder"
+          :files="files"
+        />
+
+        <Nuxt
+          v-if="folder"
+          :key="cssFramework"
+          class="hidden sm:block absolute bottom-4 left-12"
+          :name="folder"
+          :files="files"
+        />
       </div>
     </div>
     <slot name="codeSlot" />

diff --git a/.docs/.vitepress/config.ts b/.docs/.vitepress/config.ts
@@ -19,7 +19,7 @@ import { preWrapperPlugin } from './plugins/preWrapper'
 import { snippetPlugin } from './plugins/snippet'
 
 function BadgeHTML(text: string, translucent = false) {
-  return `<div class="inline-flex items-center rounded-full border px-2.5 py-0.5 ml-2 mt-1 text-xs transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-green8 ${translucent ? 'bg-opacity-30' : ''} text-white">
+  return `<div class="inline-flex items-center rounded-full border px-2.5 py-0.5 ml-2 mt-1 text-xs transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-indigo8 ${translucent ? 'bg-opacity-30' : ''} text-white">
 ${text}
 </div>
 `

diff --git a/.docs/codeeditor/index.ts b/.docs/codeeditor/index.ts
@@ -26,6 +26,20 @@ export function makeStackblitzParams(componentName: string, sources: Record<stri
   })
 }
 
+export function makeDemoParams(componentName: string, type: 'storybook' | 'nuxt') {
+  console.log('componentName', componentName)
+  const storybookUrl = 'https://primitives-storybook.oku-ui.com/?path=/story/components-'
+  const nuxtUrl = 'https://primitives-nuxt.oku-ui.com/'
+  if (type === 'storybook') {
+    return `${storybookUrl}${componentName.toLowerCase().replace(/ /g, '-')}`
+  }
+
+  if (type === 'nuxt') {
+    // ScrollArea -> scroll-area
+    return nuxtUrl + componentName.replace(/([A-Z])/g, '-$1').toLowerCase().replace(/^-/, '');
+  }
+}
+
 const viteConfig = {
   'vite.config.js': {
     content: `import { defineConfig } from 'vite'

diff --git a/.docs/components/Nuxt.vue b/.docs/components/Nuxt.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { makeDemoParams } from '../codeeditor'
+import Tooltip from './Tooltip.vue'
+import { Icon } from '@iconify/vue'
+
+const props = defineProps<{
+  name: string
+  files: string[]
+}>()
+
+const sources = ref<Record<string, string>>({})
+
+onMounted(() => {
+  props.files?.forEach((file) => {
+    const [folder, fileName] = file.split('/')
+    const extension = file.split('.').pop()
+    import(`../components/demo/${props.name}/${folder}/${fileName.replace(`.${extension}`, '')}.${extension}?raw`).then(
+      res => (sources.value[fileName] = res.default),
+    )
+  })
+})
+
+function handleClick() {
+  const url = makeDemoParams(props.name, 'nuxt')
+
+  window.open
+    ? window.open(url, '_blank')
+    : window.location.assign
+}
+</script>
+
+<template>
+  <div>
+    <Tooltip :content="`Open ${name} in Nuxt 3`">
+      <button @click="handleClick">
+        <Icon icon="simple-icons:nuxtdotjs" />
+      </button>
+    </Tooltip>
+  </div>
+</template>
diff --git a/.docs/components/Storybook.vue b/.docs/components/Storybook.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { makeDemoParams } from '../codeeditor'
+import Tooltip from './Tooltip.vue'
+import { Icon } from '@iconify/vue'
+
+const props = defineProps<{
+  name: string
+  files: string[]
+}>()
+
+const sources = ref<Record<string, string>>({})
+
+onMounted(() => {
+  props.files?.forEach((file) => {
+    const [folder, fileName] = file.split('/')
+    const extension = file.split('.').pop()
+    import(`../components/demo/${props.name}/${folder}/${fileName.replace(`.${extension}`, '')}.${extension}?raw`).then(
+      res => (sources.value[fileName] = res.default),
+    )
+  })
+})
+
+function handleClick() {
+  const url = makeDemoParams(props.name, 'storybook')
+
+  window.open
+    ? window.open(url, '_blank')
+    : window.location.assign
+}
+</script>
+
+<template>
+  <div>
+    <Tooltip :content="`Open ${name} in Storybook with Vue 3`">
+      <button @click="handleClick">
+        <Icon icon="simple-icons:storybook" />
+      </button>
+    </Tooltip>
+  </div>
+</template>
diff --git a/.docs/components/Tooltip.vue b/.docs/components/Tooltip.vue
@@ -10,7 +10,7 @@ defineProps<{
   <TooltipProvider>
     <TooltipRoot>
       <TooltipTrigger
-        class="text-white hover:text-mauve12 focus:text-mauve12 shadow-blackA7 focus:bg-green3 hover:bg-green3 inline-flex h-[35px] w-[35px] items-center justify-center rounded-full shadow-none outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
+        class="text-white hover:text-mauve12 focus:text-mauve12 shadow-blackA7 focus:bg-indigo3 hover:bg-indigo3 inline-flex h-[35px] w-[35px] items-center justify-center rounded-full shadow-none outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
         as-child
       >
         <slot />

diff --git a/.docs/components/demo/Accordion/tailwind/index.vue b/.docs/components/demo/Accordion/tailwind/index.vue
@@ -41,7 +41,7 @@ const accordionItems = [
             <span>{{ item.title }}</span>
             <Icon
               icon="radix-icons:chevron-down"
-              class="text-green10 ease-[cubic-bezier(0.87,_0,_0.13,_1)] transition-transform duration-300 group-data-[state=open]:rotate-180"
+              class="text-indigo10 ease-[cubic-bezier(0.87,_0,_0.13,_1)] transition-transform duration-300 group-data-[state=open]:rotate-180"
               aria-label="Expand/Collapse"
             />
           </AccordionTrigger>

diff --git a/.docs/components/demo/Checkbox/tailwind/index.vue b/.docs/components/demo/Checkbox/tailwind/index.vue
@@ -11,7 +11,7 @@ const checkboxOne = ref(true)
     <label class="flex flex-row gap-4 items-center [&>.checkbox]:hover:bg-neutral-100">
       <CheckboxRoot
         v-model:checked="checkboxOne"
-        class="shadow-blackA7 hover:bg-green3 flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-[4px] bg-white shadow-[0_2px_10px] outline-none focus-within:shadow-[0_0_0_2px_black]"
+        class="shadow-blackA7 hover:bg-indigo3 flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-[4px] bg-white shadow-[0_2px_10px] outline-none focus-within:shadow-[0_0_0_2px_black]"
       >
         <CheckboxIndicator class="bg-white h-full w-full rounded flex items-center justify-center">
           <Icon

diff --git a/.docs/components/demo/Collapsible/tailwind/index.vue b/.docs/components/demo/Collapsible/tailwind/index.vue
@@ -14,7 +14,7 @@ const open = ref(false)
     <div style="display: flex; align-items: center; justify-content: space-between">
       <span class="text-white text-[15px] leading-[25px]"> @peduarte starred 3 repos </span>
       <CollapsibleTrigger
-        class="cursor-default rounded-full h-[25px] w-[25px] inline-flex items-center justify-center text-mauve12 shadow-[0_2px_10px] shadow-blackA7 outline-none data-[state=closed]:bg-white data-[state=open]:bg-green3 hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-black"
+        class="cursor-default rounded-full h-[25px] w-[25px] inline-flex items-center justify-center text-mauve12 shadow-[0_2px_10px] shadow-blackA7 outline-none data-[state=closed]:bg-white data-[state=open]:bg-indigo3 hover:bg-indigo3 focus:shadow-[0_0_0_2px] focus:shadow-black"
       >
         <Icon
           v-if="open"