feat: new components (#58)

* feat: new components added * chore: update * feat: colors is ready * chore: update docs * chore: update docs * chore: upgrade new version * chore: lint * chore: primitives show add * chore: update primitives show * [autofix.ci] apply automated fixes * feat: open graph images added * feat: set opengraph images for components * chore: add toast * [autofix.ci] apply automated fixes * chore: update package * feat: new og images * feat: hover card and dialog * feat: update readme (#61) * chore: init * chore: update * chore: update md * [autofix.ci] apply automated fixes * chore: update * chore: update * feat: toast component * chore: update * feat: radix component (#62) * chore: init * chore: update * components * [autofix.ci] apply automated fixes * chore: update --------- Co-authored-by: productdevbook <[email protected]> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> * feat: radix components (#63) * chore: init * chore: update * chore: update md * [autofix.ci] apply automated fixes * chore: update * chore: update * chore: new components * chore: radix hovercard * chore: update --------- Co-authored-by: productdevbook <[email protected]> * chore: update --------- Co-authored-by: emirulucay <[email protected]> Co-authored-by: Kubra KIRAS <[email protected]> Co-authored-by: Mustafa Türköz <[email protected]>
oku-ui · Sep 11, 2023 · 4a14bbd · 4a14bbd · vercel · Sep 11, 2023
1 parent 2dc0d04
commit 4a14bbd
Show file tree

Hide file tree

Showing 108 changed files with 9,091 additions and 1,391 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -3,5 +3,6 @@
     "rules": {
         "no-console": "warn",
         "@typescript-eslint/ban-ts-comment": "off",
+        "n/prefer-global/process": "off"
     }
 }
diff --git a/app.vue b/app.vue
@@ -9,10 +9,17 @@ useHead({
     { rel: 'prefetch', href: '/sponsors/productdevbook.svg' },
   ],
 })
+
+const useGlobal = useGlobalStore()
+
+onMounted(() => {
+  useGlobal.loadDesign()
+})
 </script>
 
 <template>
   <AppLayout>
+    <NuxtLoadingIndicator />
     <NuxtPage />
   </AppLayout>
 </template>
diff --git a/colors/index.ts b/colors/index.ts
@@ -1,4 +1,4 @@
-export const grayA = {
+export const grayOA = {
   50: 'hsl(0, 0%, 96%)',
   100: 'hsl(0, 0%, 91%)',
   200: 'hsl(0, 0%, 82%)',
@@ -25,7 +25,7 @@ export const oku = {
   900: 'hsl(211, 54%, 24%)',
   950: 'hsl(213, 53%, 16%)',
 }
-export const blackA = {
+export const blackOA = {
   50: 'hsl(0, 0%, 96%)',
   100: 'hsl(0, 0%, 91%)',
   200: 'hsl(0, 0%, 82%)',

diff --git a/components/app/ComponentCard.vue b/components/app/ComponentCard.vue
@@ -1,12 +1,15 @@
 <script setup lang="ts">
+import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
+
 export interface CardProps {
   data: {
     link: string
     version: string
     title: string
     description: string
-    component: string
-  }
+    componentName: string
+  } & ParsedContent
+  radix?: boolean
 }
 
 defineProps<CardProps>()
@@ -17,13 +20,16 @@ defineProps<CardProps>()
     <div
       class="w-full p-4 rounded-2xl flex-col gap-2 backdrop-blur-sm bg-[#575757]/10 border border-[#DEDEDE] dark:border-[#303030] inline-flex min-h-[138px] sm:min-h-[146px]"
     >
-      <div class="relative">
-        <component :is="data.component" class="py-10" />
+      <div class="relative w-full">
+        <component :is="data.componentName" v-if="!radix" class="py-10" />
+        <component :is="`${data.componentName}Radix`" v-else class="py-10" />
       </div>
-      <div class="">
+      <div>
         <span class="text-xs px-2 py-1 border border-[#DEDEDE] dark:border-[#222] rounded-full text-[#676767] inline">{{ data.version }}</span>
       </div>
-      <span class="text-[#111] dark:text-white font-medium">{{ data.title }}</span>
+      <NuxtLink :to="data._path" class="text-[#111] group-hover:text-oku-500 dark:text-white font-medium">
+        {{ data.title }}
+      </NuxtLink>
       <p class="text-[#6D6D6D] text-sm md:text-base line-clamp-2">
         {{ data.description }}
       </p>

diff --git a/components/content/ContentDesignTabs.vue b/components/content/ContentDesignTabs.vue
@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+const useGlobal = useGlobalStore()
+</script>
+
+<template>
+  <div class="w-full">
+    <slot v-if="useGlobal.design === 'oku'" name="oku" />
+    <slot v-else name="radix" />
+  </div>
+</template>
diff --git a/components/content/ContentPreview.vue b/components/content/ContentPreview.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+interface Props {
+  src: string
+  off?: string
+  design?: 'oku' | 'radix'
+}
+const props = withDefaults(defineProps<Props>(), {
+  off: '',
+})
+
+const dynamicComponent = shallowRef<Component | undefined>(() =>
+  h(
+    'div',
+    {
+      class: 'content-preview-loader',
+    },
+    h('div', {}, 'Loading...'),
+  ),
+)
+const pathParts = computed(() => props.src.split('/').slice(1))
+
+onMounted(async () => {
+  try {
+    dynamicComponent.value = defineAsyncComponent(() => {
+      return import(`@/components/primitives/${pathParts.value[1]}/${pathParts.value[2].split('.')[0]}.vue`)
+    })
+  }
+  catch (error) {
+    console.error(error)
+
+    dynamicComponent.value = () => h('div', {}, 'Not found')
+  }
+})
+</script>
+
+<template>
+  <div class="overflow-hidden">
+    <div class="rounded-lg w-full relative items-center justify-center flex" :class="props.design === 'radix' ? 'HeroCodeBlock' : 'componentBackground'">
+      <div class="w-full max-w-xl flex flex-col items-center justify-center px-4 py-20">
+        <component :is="dynamicComponent" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="postcss">
+.highlight-md.prose-code.language-md {
+  @apply mt-0;
+}
+
+.dark .componentBackground {
+  @apply bg-gradient-to-br from-[#161616] to-[#262626];
+}
+
+.componentBackground {
+  @apply bg-gradient-to-br from-[#E2E2E2] to-[#EFEFEF] shadow-inner;
+}
+
+.HeroCodeBlock {
+  background-image: linear-gradient(330deg,#8e4ec6 0,#3e63dd 100%);
+  padding-block: 100px;
+  border-top-left-radius: var(--radius-4);
+  border-top-right-radius: var(--radius-4);
+}
+</style>
diff --git a/components/content/ContentTabs.vue b/components/content/ContentTabs.vue
@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import { OkuTabs, OkuTabsContent, OkuTabsList, OkuTabsTrigger } from '@oku-ui/tabs'
+
+import { computed, ref } from 'vue'
+
+const slots = useSlots()
+
+const active = ref(Object.keys(slots)[0])
+
+const tabs = ref([
+  { name: 'preview', title: 'Preview' },
+  { name: 'config', title: 'inkline.config.ts' },
+  { name: 'vite', title: 'vite.config.ts' },
+  { name: 'nuxt', title: 'nuxt.config.ts' },
+  { name: 'webpack', title: 'webpack.config.js' },
+  { name: 'main', title: 'main.ts' },
+  { name: 'app', title: 'App.vue' },
+  { name: 'vue', title: 'Component.vue' },
+  { name: 'scss', title: 'style.scss' },
+  { name: 'output', title: 'Output' },
+])
+
+const availableTabs = computed(() => tabs.value.filter(tab => !!slots[tab.name]))
+</script>
+
+<template>
+  <div class="w-full">
+    <OkuTabs
+      v-bind="$attrs"
+      v-model="active"
+      class="flex flex-col"
+    >
+      <OkuTabsList class="shrink-0 flex border-b border-grayOA-500" aria-label="Manage your account">
+        <OkuTabsTrigger
+          v-for="tab in availableTabs"
+          :key="tab.name"
+          class="bg-white dark:bg-grayOA-950 px-5 h-[45px] flex-1 flex items-center justify-center text-[15px] leading-none text-grayOA-700 dark:text-grayOA-200 select-none first:rounded-tl-md last:rounded-tr-md hover:text-oku-500 dark:hover:text-oku-400 data-[state=active]:text-oku-500 dark:data-[state=active]:text-oku-400 data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative data-[state=active]:focus:shadow-[0_0_0_2px] data-[state=active]:focus:shadow-black outline-none cursor-default"
+          :value="tab.name"
+        >
+          {{ tab.title }}
+        </OkuTabsTrigger>
+      </OkuTabsList>
+      <OkuTabsContent
+        v-for="tab in availableTabs"
+        :key="tab.name"
+        class="grow focus:shadow-black mt-4"
+        :value="tab.name"
+      >
+        <slot :name="tab.name" />
+      </OkuTabsContent>
+    </OkuTabs>
+  </div>
+</template>
diff --git a/components/content/OkuAttributesTable.vue b/components/content/OkuAttributesTable.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+interface PropDef {
+  attribute: string
+  values: string[]
+}
+
+interface PropsTableProps {
+  data: PropDef[]
+}
+defineProps<PropsTableProps>()
+</script>
+
+<template>
+  <ProseTable>
+    <ProseThead>
+      <ProseTr>
+        <ProseTh class="w-[37%]">
+          <span>Data attribute</span>
+        </ProseTh>
+        <ProseTh>
+          <span>Values</span>
+        </ProseTh>
+      </ProseTr>
+    </ProseThead>
+    <ProseTbody>
+      <ProseTr v-for="(item, index) in data" :key="`${item.attribute}-${index}`">
+        <ProseTd>
+          <ProseCodeInline class="!text-[12px]">
+            {{ item.attribute }}
+          </ProseCodeInline>
+        </ProseTd>
+        <ProseTd>
+          <ProseCodeInline v-if="Array.isArray(item.values)" class="bg-oku-100">
+            <span v-for="(value, index) in item.values" :key="value">
+              {{ index + 1 !== item.values.length ? `"${value}" | ` : `"${value}"` }}
+            </span>
+          </ProseCodeInline>
+          <span v-else>{{ item.values }}</span>
+        </ProseTd>
+      </ProseTr>
+    </ProseTbody>
+  </ProseTable>
+</template>
diff --git a/components/content/OkuCssVariablesTable.vue b/components/content/OkuCssVariablesTable.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+interface PropDef {
+  cssVariable: string
+  description: string[]
+}
+
+interface PropsTableProps {
+  data: PropDef[]
+}
+defineProps<PropsTableProps>()
+</script>
+
+<template>
+  <ProseTable>
+    <ProseThead>
+      <ProseTr>
+        <ProseTh class="w-[37%]">
+          <span>CSS Variable</span>
+        </ProseTh>
+        <ProseTh>
+          <span>Description</span>
+        </ProseTh>
+      </ProseTr>
+    </ProseThead>
+    <ProseTbody>
+      <ProseTr v-for="(item, i) in data" :key="`${item}-${i}`">
+        <ProseTd>
+          <ProseCodeInline>
+            {{ item.cssVariable }}
+          </ProseCodeInline>
+        </ProseTd>
+        <ProseTd>
+          <div class="flex items-center">
+            <span v-html="item.description" />
+          </div>
+        </ProseTd>
+      </ProseTr>
+    </ProseTbody>
+  </ProseTable>
+</template>
diff --git a/components/content/OkuEmitsTable.vue b/components/content/OkuEmitsTable.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { OkuPopover, OkuPopoverArrow, OkuPopoverContent, OkuPopoverTrigger } from '@oku-ui/popover'
+
+interface PropDef {
+  name?: string
+  required?: boolean
+  default?: string | boolean
+  type: string
+  typeSimple: string
+  description?: string
+}
+
+interface PropsTableProps {
+  data: PropDef[]
+}
+const props = defineProps<PropsTableProps>()
+</script>
+
+<template>
+  <ProseTable>
+    <thead>
+      <ProseTr>
+        <ProseTh class="w-[33%]">
+          <span>Emit</span>
+        </ProseTh>
+        <ProseTh>
+          <span>Type</span>
+        </ProseTh>
+      </ProseTr>
+    </thead>
+    <tbody>
+      <ProseTr v-for="(item, i) in props.data" :key="`${item.name}-${i}`">
+        <ProseTd>
+          <div class="flex items-center justify-between">
+            <ProseCodeInline class="!text-[12px]">
+              {{ item.name }} - {{ item.required ? "*" : null }}
+            </ProseCodeInline>
+            <template v-if="item.description">
+              <OkuPopover>
+                <OkuPopoverTrigger
+                  class="rounded-full w-[20px] h-[20px] inline-flex items-center justify-center text-violet11 bg-white dark:bg-codGray-900 hover:bg-codGray-100 cursor-default outline-none"
+                >
+                  <i class="i-ph-info h-4 w-4 text-neutral-400" />
+                </OkuPopoverTrigger>
+                <OkuPopoverContent
+                  side="top"
+                  :side-offset="5"
+                  class="rounded p-5 w-[260px] bg-white dark:bg-codGray-900 shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)] focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2),0_0_0_2px_theme(colors.violet7)] will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade z-50"
+                >
+                  <span size="2" class="leading-5" v-html="item.description" />
+                  <OkuPopoverArrow class="fill-white dark:fill-codGray-900" :size="5" />
+                </OkuPopoverContent>
+              </OkuPopover>
+            </template>
+          </div>
+        </ProseTd>
+        <ProseTd>
+          <div class="flex items-center">
+            <ProseCodeInline>
+              {{ item.typeSimple ? item.typeSimple : item.type }}
+            </ProseCodeInline>
+            <template v-if="item.typeSimple">
+              <OkuPopover>
+                <OkuPopoverTrigger class="rounded-full w-[35px] h-[35px] inline-flex items-center justify-center text-violet11 bg-white dark:bg-codGray-900 hover:bg-violet3 cursor-default outline-none">
+                  <i class="i-ph-info h-4 w-4 text-neutral-400" />
+                </OkuPopoverTrigger>
+                <OkuPopoverContent
+                  :side-offset="5"
+                  side="top"
+                  class="rounded p-5 w-[260px] bg-white dark:bg-codGray-900 shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)] focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2),0_0_0_2px_theme(colors.violet7)] will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
+                >
+                  <ProseCodeInline class="whitespace-nowrap !text-[12px]">
+                    {{ item.type }}
+                  </ProseCodeInline>
+                  <OkuPopoverArrow class="fill-white dark:fill-codGray-900" :size="10" />
+                </OkuPopoverContent>
+              </OkuPopover>
+            </template>
+          </div>
+        </ProseTd>
+      </ProseTr>
+    </tbody>
+  </ProseTable>
+</template>