refactor: Improving the Structure and Fixing Bugs (#284)

* refaktor: core all components

* fix: test

* fix: primitive test

* fix: visuall-hidden test

* fix: test

* fix: toggle

* fix: test

* fix: aspet-ratio

nx.json

@@ -7,7 +7,7 @@
         "cacheableOperations": [
           "build"
         ],
-        "parallel": 1
+        "parallel": 5
       }
     }
   },

package.json

@@ -95,7 +95,7 @@
     "tailwindcss": "^3.3.3",
     "tsup": "^7.2.0",
     "typescript": "^5.1.6",
-    "unbuild": "^1.2.1",
+    "unbuild": "^2.0.0-rc.0",
     "vite": "^4.4.7",
     "vite-plugin-dts": "^3.5.1",
     "vitest": "^0.34.1",

packages/components/arrow/src/arrow.test.ts

@@ -3,17 +3,26 @@ import type { VueWrapper } from '@vue/test-utils'
 import { mount } from '@vue/test-utils'
 import { axe } from 'vitest-axe'
 import type { VueNode } from '@vue/test-utils/dist/types'
+import type { Component } from 'vue'
+import { h } from 'vue'
 import { OkuArrow } from './arrow'
 
-const WIDTH = 40
-const HEIGHT = 30
+const component = {
+  setup(props, { attrs, slots }) {
+    return () => h(OkuArrow, { ...attrs }, slots)
+  },
+} as Component
+
+// TODO: delete any
+const WIDTH = 40 as any
+const HEIGHT = 30 as any
 
 describe('label', () => {
   let _wrapper: VueWrapper
   let svg: VueNode<SVGSVGElement>
 
   beforeEach(() => {
-    const wrapper = mount(OkuArrow, {
+    const wrapper = mount(component, {
       props: {
         width: WIDTH,
         height: HEIGHT,

packages/components/arrow/src/arrow.ts

@@ -1,25 +1,25 @@
 import { cloneVNode, defineComponent, h } from 'vue'
-import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive'
-import { Primitive, PrimitiveProps } from '@oku-ui/primitive'
+import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import { Primitive, primitiveProps } from '@oku-ui/primitive'
 import { useForwardRef } from '@oku-ui/use-composable'
 
-type ArrowElement = ElementType<'svg'>
-export type _ArrowEl = SVGSVGElement
+export type ArrowIntrinsicElement = ElementType<'svg'>
+export type ArrowElement = SVGSVGElement
 
-interface ArrowProps extends IPrimitiveProps {}
+interface ArrowProps extends PrimitiveProps {}
 
-const NAME = 'Arrow'
+const NAME = 'OkuArrow'
 
 const arrow = defineComponent({
   name: NAME,
   inheritAttrs: false,
   props: {
-    ...PrimitiveProps,
+    ...primitiveProps,
   },
   setup(props, { attrs, slots }) {
     const forwardedRef = useForwardRef()
 
-    const { width = '10px', height = '5px', ...arrowAttrs } = attrs as ArrowElement
+    const { width = '10px', height = '5px', ...arrowAttrs } = attrs as ArrowIntrinsicElement
 
     const originalReturn = () => {
       const defaultSlot = typeof slots.default === 'function' ? slots.default()[0] : slots.default ?? null
@@ -53,10 +53,9 @@ const arrow = defineComponent({
 })
 
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
-type _ArrowProps = MergeProps<ArrowProps, ArrowElement>
-type InstanceArrowType = InstanceTypeRef<typeof arrow, _ArrowEl>
-
-const OkuArrow = arrow as typeof arrow & (new () => { $props: _ArrowProps })
+export const OkuArrow = arrow as typeof arrow
+& (new () => {
+  $props: Partial<ArrowElement>
+})
 
-export { OkuArrow }
-export type { ArrowProps, ArrowElement, InstanceArrowType }
+export type { ArrowProps }

packages/components/arrow/src/index.ts

@@ -1,4 +1,4 @@
 export {
   OkuArrow,
 } from './arrow'
-export type { ArrowProps, ArrowElement, InstanceArrowType, _ArrowEl } from './arrow'
+export type { ArrowProps, ArrowElement, ArrowIntrinsicElement } from './arrow'

packages/components/aspect-ratio/build.config.ts

@@ -5,8 +5,8 @@ export default defineBuildConfig({
     {
       builder: 'mkdist',
       input: './src/',
-      pattern: ['**/!(*.test|*.stories).ts'],
+      pattern: ['**', '!stories'],
+      declaration: true,
     },
   ],
-  declaration: true,
 })

packages/components/aspect-ratio/src/aspect-ratio.test.ts

@@ -1,16 +1,24 @@
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
 import { axe } from 'vitest-axe'
+import type { Component } from 'vue'
+import { h } from 'vue'
 import { OkuAspectRatio } from './aspect-ratio'
 
+const component = {
+  setup(props, { attrs, slots }) {
+    return () => h(OkuAspectRatio, { ...attrs }, slots)
+  },
+} as Component
+
 describe('OkuAspectRatio', () => {
   it('renders the component correctly', () => {
-    const wrapper = mount(OkuAspectRatio)
+    const wrapper = mount(component)
     expect(wrapper.exists()).toBe(true)
   })
 
   it('should have no accessibility violations', async () => {
-    const _wrapper = mount(OkuAspectRatio)
+    const _wrapper = mount(component)
 
     const results = await axe(_wrapper.element)
     // @ts-expect-error toHaveNoViolations add types project

packages/components/aspect-ratio/src/aspect-ratio.ts

@@ -1,16 +1,17 @@
-import { defineComponent, h } from 'vue'
-import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive'
-import { Primitive, PrimitiveProps } from '@oku-ui/primitive'
+import type { CSSProperties } from 'vue'
+import { defineComponent, h, toRef } from 'vue'
+import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import { Primitive, primitiveProps } from '@oku-ui/primitive'
 import { useForwardRef } from '@oku-ui/use-composable'
 
-interface AspectRatioProps extends IPrimitiveProps {
-  ratio?: number
-}
+export type AspectRatioIntrinsicElement = ElementType<'div'>
+export type AspectRatioElement = HTMLDivElement
 
-type AspectRatioElement = ElementType<'div'>
-export type _AspectRatioEl = HTMLDivElement
+const NAME = 'OkuAspectRatio'
 
-const NAME = 'AspectRatio'
+interface AspectRatioProps extends PrimitiveProps {
+  ratio?: number
+}
 
 const AspectRatio = defineComponent({
   name: NAME,
@@ -20,37 +21,37 @@ const AspectRatio = defineComponent({
       type: Number,
       default: 1 / 1,
     },
-    ...PrimitiveProps,
+    ...primitiveProps,
   },
   setup(props, { attrs, slots }) {
-    const { style, ...aspectRatioProps } = attrs as AspectRatioElement
+    const ratio = toRef(props, 'ratio')
+    const { style, ...aspectRatioAttrs } = attrs as AspectRatioIntrinsicElement
 
     const forwardedRef = useForwardRef()
-
     const originalReturn = () => h(
       'div', {
         'style': {
           position: 'relative',
           width: '100%',
-          paddingBottom: `${100 / props.ratio}%`,
-        },
+          paddingBottom: `${100 / ratio.value}%`,
+        } as CSSProperties,
         'data-oku-aspect-ratio-wrapper': '',
       },
       [
         h(
           Primitive.div,
           {
-            ...aspectRatioProps,
+            asChild: props.asChild,
+            ...aspectRatioAttrs,
             ref: forwardedRef,
             style: {
               ...(style as any),
               position: 'absolute',
-              top: 0,
-              right: 0,
-              bottom: 0,
-              left: 0,
+              top: '0px',
+              right: '0px',
+              left: '0px',
+              bottom: '0px',
             },
-            asChild: props.asChild,
           },
           {
             default: () => slots.default?.(),
@@ -64,10 +65,9 @@ const AspectRatio = defineComponent({
 })
 
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
-type _AspectRatioProps = MergeProps<AspectRatioProps, AspectRatioElement>
-type InstanceAspectRatioType = InstanceTypeRef<typeof AspectRatio, _AspectRatioEl>
-
-const OkuAspectRatio = AspectRatio as typeof AspectRatio & (new () => { $props: _AspectRatioProps })
+export const OkuAspectRatio = AspectRatio as typeof AspectRatio &
+(new () => {
+  $props: Partial<AspectRatioElement>
+})
 
-export { OkuAspectRatio }
-export type { AspectRatioProps, AspectRatioElement, InstanceAspectRatioType }
+export type { AspectRatioProps }

packages/components/aspect-ratio/src/index.ts

@@ -1,9 +1,6 @@
-export {
-  OkuAspectRatio,
-} from './aspect-ratio'
+export { OkuAspectRatio } from './aspect-ratio'
 export type {
   AspectRatioProps,
   AspectRatioElement,
-  InstanceAspectRatioType,
-  _AspectRatioEl,
+  AspectRatioIntrinsicElement,
 } from './aspect-ratio'

packages/components/aspect-ratio/src/stories/AspectRatioDemo.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import type { AspectRatioProps, InstanceAspectRatioType } from '@oku-ui/aspect-ratio'
 import { OkuAspectRatio } from '@oku-ui/aspect-ratio'
 import { onMounted, ref } from 'vue'
 
-export interface IAspectRatioProps extends AspectRatioProps {
+export interface IAspectRatioProps {
   template?: '#1' | '#2' | '#3' | '#4' | '#5'
   imageurl?: string
   allShow?: boolean
@@ -15,9 +14,9 @@ withDefaults(defineProps<IAspectRatioProps>(), {
   allShow: false,
 })
 
-const root = ref<InstanceAspectRatioType>()
+const root = ref()
 onMounted(() => {
-  console.log(root.value?.$el)
+  console.log(root.value)
 })
 </script>
 
@@ -57,7 +56,7 @@ onMounted(() => {
         </OkuAspectRatio>
       </div>
       <div class="w-[150px] rounded-sm overflow-hidden">
-        <OkuAspectRatio :ratio="2 / 1">
+        <OkuAspectRatio :ratio="3 / 1">
           <img
             class="object-cover w-full h-full rounded-lg"
             src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"

packages/components/avatar/src/avatar.ts

@@ -1,12 +1,14 @@
 import { defineComponent, h, ref } from 'vue'
-import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive'
+import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
 import { Primitive } from '@oku-ui/primitive'
 import type { Scope } from '@oku-ui/provide'
-import { ScopePropObject, createProvideScope } from '@oku-ui/provide'
+import { createProvideScope } from '@oku-ui/provide'
 import { useForwardRef } from '@oku-ui/use-composable'
+import type { ScopeAvatar } from './utils'
+import { scopeAvatarProps } from './utils'
 
-const AVATAR_NAME = 'Avatar'
-const [createAvatarProvide, createAvatarScope] = createProvideScope(AVATAR_NAME)
+const AVATAR_NAME = 'OkuAvatar'
+export const [createAvatarProvide, createAvatarScope] = createProvideScope(AVATAR_NAME)
 
 type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error'
 
@@ -15,32 +17,30 @@ type AvatarProvideValue = {
   onImageLoadingStatusChange(status: ImageLoadingStatus): void
 }
 
-export const [AvatarProvider, useAvatarInject] = createAvatarProvide<AvatarProvideValue>(AVATAR_NAME)
+export const [avatarProvider, useAvatarInject] = createAvatarProvide<AvatarProvideValue>(AVATAR_NAME)
 
-type AvatarElement = ElementType<'span'>
-export type _AvatarEl = HTMLSpanElement
+export type AvatarIntrinsicElement = ElementType<'span'>
+export type AvatarElement = HTMLSpanElement
 
-interface AvatarProps extends IPrimitiveProps {
+interface AvatarProps extends PrimitiveProps {
   scopeAvatar?: Scope
 }
 
-const Avatar = defineComponent({
+const avatar = defineComponent({
   name: AVATAR_NAME,
   inheritAttrs: false,
   props: {
-    scopeAvatar: {
-      ...ScopePropObject,
-    },
+    ...scopeAvatarProps,
   },
   setup(props, { attrs, slots }) {
-    const { ...avatarProps } = attrs as AvatarElement
+    const { ...avatarProps } = attrs as AvatarIntrinsicElement
 
     const forwardedRef = useForwardRef()
 
     const imageLoadingStatus = ref<ImageLoadingStatus>('idle')
 
-    AvatarProvider({
-      scope: props.scopeAvatar,
+    avatarProvider({
+      scope: props.scopeOkuAvatar,
       imageLoadingStatus: imageLoadingStatus.value,
       onImageLoadingStatusChange: (status: ImageLoadingStatus) => {
         imageLoadingStatus.value = status
@@ -61,19 +61,11 @@ const Avatar = defineComponent({
 })
 
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
-type _OkuAvatarProps = MergeProps<AvatarProps, AvatarElement>
-
-type InstanceAvatarType = InstanceTypeRef<typeof Avatar, _AvatarEl>
-
-const OkuAvatar = Avatar as typeof Avatar & (new () => { $props: _OkuAvatarProps })
-
-export {
-  OkuAvatar,
-  createAvatarScope,
-}
+export const OkuAvatar = avatar as typeof avatar &
+(new () => {
+  $props: ScopeAvatar<Partial<AvatarElement>>
+})
 
 export type {
   AvatarProps,
-  AvatarElement,
-  InstanceAvatarType,
 }