@jongh/cli 1.0.1 → 1.1.0

package/.lintstagedrc.json

@@ -0,0 +1,4 @@
+{
+  "**/*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"]
+}
+

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @jongh/cli
+
+## 1.1.0
+
+### Minor Changes
+
+- cb4aefa: test changeset ci build issue

package/dist/components/Accordion/Accordion.tsx

@@ -1,7 +1,6 @@
 import * as React from "react"
 import { createContext } from "../../hooks/createContext"
 import { useControlledState } from "../../hooks/useControllableState"
-import { useAccordionHeight } from "./useAccordionHeight"
 import { useKeyboardEvent } from "../../hooks/useKeyboardEvent"
 import { Slot } from "@radix-ui/react-slot"
 import { composeRefs } from "src/hooks/useComposedRefs"
@@ -227,15 +226,14 @@ export const AccordionTrigger = ({
 }: AccordionTriggerProps) => {
   const { onToggle, isOpen, value } = useAccordionItemProvider("accordionItem")
   return (
-    <h3 data-state={isOpen ? "open" : "close"} {...props}>
-      <span
-        onClick={onToggle}
+    <h3 data-state={isOpen ? "open" : "close"} onClick={onToggle} {...props}>
+      <button
         aria-expanded={isOpen ? "true" : "false"}
         aria-controls={`content-${value}`}
         id={`trigger-${value}`}
       >
-        <span>{children}</span>
-      </span>
+        {children}
+      </button>
     </h3>
   )
 }
@@ -244,31 +242,40 @@ export interface AccordionContentProps extends React.PropsWithChildren {
   duration?: number
   asChild?: boolean
 }
+
 export const AccordionContent = ({
   children,
-  duration = 150,
   asChild,
   ...props
 }: AccordionContentProps) => {
   const Comp = asChild ? Slot : "div"
   const { isOpen, value } = useAccordionItemProvider("accordionItem")
+  const contentRef = React.useRef<HTMLDivElement>(null)
 
-  const contentRef = useAccordionHeight<HTMLDivElement>(isOpen, duration) //duration 초 뒤에 accordion을 열거나 닫아줌
-
-  if (!isOpen) {
-    return null
-  }
+  React.useEffect(() => {
+    if (contentRef.current) {
+      const element = contentRef.current
+      if (isOpen) {
+        element.style.setProperty(
+          "--accordion-height",
+          `${element.scrollHeight}px`,
+        )
+      } else {
+        element.style.setProperty("--accordion-height", "0px")
+      }
+    }
+  }, [isOpen])
 
   return (
     <Comp
+      ref={contentRef}
       data-state={isOpen ? "open" : "close"}
       id={`content-${value}`}
       aria-labelledby={`trigger-${value}`}
       role="region"
-      ref={contentRef}
       {...props}
     >
-      {children}
+      {isOpen && children}
     </Comp>
   )
 }

package/dist/components/Accordion/useAccordionHeight.ts

@@ -1,28 +1,25 @@
 import { useEffect, useRef } from "react"
-const ACCORDION_HEIGHT = "--accordion-height" //CSS 변수명- accordion의 높이를 제어하여 animation과 sync 맞춤
-export const useAccordionHeight = <T extends HTMLElement>(
-  isOpen: boolean,
-  duration = 150,
-) => {
+
+const ACCORDION_HEIGHT = "--accordion-height"
+
+export const useAccordionHeight = <T extends HTMLElement>(isOpen: boolean) => {
   const ref = useRef<T>(null)
 
   useEffect(() => {
     const element = ref.current
-    if (element === null) {
-      return
-    }
+    if (!element) return
 
     if (isOpen) {
-      const height = element.style.getPropertyValue(ACCORDION_HEIGHT)
-      if (height === "0" || !height) {
-        element.style.setProperty(ACCORDION_HEIGHT, `${element.scrollHeight}px`)
-      }
+      // 열릴 때 높이를 scrollHeight로 설정
+      const newHeight = element.scrollHeight
+      element.style.setProperty(ACCORDION_HEIGHT, `${newHeight}px`)
+      element.style.height = `${newHeight}px`
     } else {
-      setTimeout(() => {
-        element.style.setProperty(ACCORDION_HEIGHT, `${element.scrollHeight}px`)
-      }, duration)
+      // 닫힐 때 높이를 0으로 설정
+      element.style.setProperty(ACCORDION_HEIGHT, `0px`)
+      element.style.height = "0px"
     }
-  }, [isOpen, duration])
+  }, [isOpen])
 
   return ref
 }

package/dist/components/Button/index.tsx

@@ -1,50 +1,19 @@
-import {
-  forwardRef,
-  ComponentPropsWithoutRef,
-  isValidElement,
-  cloneElement,
-  type ReactElement,
-  type MouseEventHandler,
-} from "react"
+import { forwardRef, ComponentPropsWithoutRef, type ReactNode } from "react"
 import { button, type ButtonVariant } from "@styled-system/recipes"
 import { Slot } from "@radix-ui/react-slot"
+import { cx } from "@styled-system/css"
 
-type ButtonProps = Partial<ButtonVariant> &
-  ComponentPropsWithoutRef<"button"> & { as?: string } & {
-    /**왼쪽에 올 아이콘 */
-    leftIcon?: ReactElement
-    /**오른쪽에 위치할 아이콘 */
-    rightIcon?: ReactElement
-  }
+export type ButtonProps = ComponentPropsWithoutRef<"button"> & {
+  children: ReactNode
+  as?: boolean
+  disabled?: boolean
+} & Partial<ButtonVariant>
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      as,
-      id,
-      className,
-      children,
-      disabled = false,
-      leftIcon,
-      rightIcon,
-      onClick,
-      ...rest
-    },
-    ref,
-  ) => {
-    const Comp = as ? Slot : "button"
+  ({ as, disabled, id, onClick, children, ...rest }, ref) => {
+    const [buttonProps] = button.splitVariantProps(rest)
 
-    const wrapIcon = (icon: ReactElement<{ onClick?: MouseEventHandler }>) => {
-      if (isValidElement(icon)) {
-        const { onClick: onClickIcon } = icon.props
-        return cloneElement(icon, {
-          onClick: (e: React.MouseEvent<HTMLButtonElement>) => {
-            e.stopPropagation()
-            onClickIcon ? onClickIcon(e) : onClick?.(e)
-          },
-        })
-      }
-    }
+    const Comp = as ? Slot : "button"
 
     return (
       <Comp
@@ -52,14 +21,11 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         ref={ref}
         disabled={disabled}
         id={id}
-        data-testid={id}
         onClick={onClick}
-        className={button({})}
+        className={cx(button(buttonProps))}
         {...rest}
       >
-        {leftIcon && <span>{wrapIcon(leftIcon)}</span>}
         {children}
-        {rightIcon && <span>{wrapIcon(rightIcon)}</span>}
       </Comp>
     )
   },

package/dist/components/Primitive/index.tsx

@@ -0,0 +1,58 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+//radix ui Primitive를  참고하여 작성한 코드
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+
+const NODES = [
+  "a",
+  "button",
+  "div",
+  "form",
+  "h2",
+  "h3",
+  "img",
+  "input",
+  "label",
+  "li",
+  "nav",
+  "ol",
+  "p",
+  "span",
+  "svg",
+  "ul",
+] as const
+
+type Primitives = {
+  [E in (typeof NODES)[number]]: PrimitiveForwardRefComponent<E>
+}
+type PrimitivePropsWithRef<E extends React.ElementType> =
+  React.ComponentPropsWithRef<E> & {
+    asChild?: boolean
+  }
+
+interface PrimitiveForwardRefComponent<E extends React.ElementType>
+  extends React.ForwardRefExoticComponent<PrimitivePropsWithRef<E>> {}
+
+/* -------------------------------------------------------------------------------------------------
+ * Primitive
+ * -----------------------------------------------------------------------------------------------*/
+
+const Primitive = NODES.reduce((primitive, node) => {
+  const Node = React.forwardRef(
+    (props: PrimitivePropsWithRef<typeof node>, forwardedRef: any) => {
+      const { asChild, ...primitiveProps } = props
+      const Comp: any = asChild ? Slot : node
+
+      return <Comp {...primitiveProps} ref={forwardedRef} />
+    },
+  )
+
+  Node.displayName = `Primitive.${node}`
+
+  return { ...primitive, [node]: Node }
+}, {} as Primitives)
+
+const Root = Primitive
+
+export { Primitive, Root }
+export type { PrimitivePropsWithRef }

package/dist/components/RovingIndex/RovingItem.tsx

@@ -0,0 +1,47 @@
+import type { ReactElement } from "react"
+import { useRovingTabIndex } from "./useRovingTabIndex"
+import { Slot } from "@radix-ui/react-slot"
+import isHotkey from "is-hotkey"
+import {
+  getNextFocusableId,
+  getPrevFocusableId,
+} from "../../utils/getFocusableId"
+
+export const RovingItem = ({
+  value,
+  children,
+}: {
+  value: string
+  children: ReactElement
+}) => {
+  const { getOrderedItems, getRovingProps, dir } = useRovingTabIndex(value)
+
+  return (
+    <Slot
+      {...getRovingProps<"button">({
+        onKeyDown: (e) => {
+          const items = getOrderedItems()
+          let nextItem
+          if (dir === "horizontal") {
+            if (isHotkey("right", e)) {
+              nextItem = getNextFocusableId(items, value)
+            } else if (isHotkey("left", e)) {
+              nextItem = getPrevFocusableId(items, value)
+            }
+            nextItem?.element.focus()
+          }
+          if (dir === "vertical") {
+            if (e.key === "ArrowDown") {
+              nextItem = getNextFocusableId(items, value)
+            } else if (e.key === "ArrowUp") {
+              nextItem = getPrevFocusableId(items, value)
+            }
+            nextItem?.element.focus()
+          }
+        },
+      })}
+    >
+      {children}
+    </Slot>
+  )
+}

package/dist/components/RovingIndex/RovingTabIndexRoot.tsx

@@ -0,0 +1,92 @@
+import { ReactNode, useCallback, useRef, useState } from "react"
+import { useControlledState } from "../../hooks/useControllableState"
+import { RovingTabIndexProvider } from "./useRovingTabIndex"
+import { Slot } from "@radix-ui/react-slot"
+
+export const NODE_SELECTOR = "data-roving-tabindex-node"
+const ROOT_SELECTOR = "data-roving-tabindex-root"
+const NOT_FOCUSABLE_SELECTOR = "data-roving-tabindex-not-focusable"
+const SELECTOR_ACTIVE = `:where([${NODE_SELECTOR}=true]):not(:where([${NOT_FOCUSABLE_SELECTOR}=true] *))`
+
+type RovingTabIndexRootBaseProps = {
+  children: ReactNode | ReactNode[]
+  active?: string
+  setActive?: (value: string) => void
+  asChild?: boolean
+  dir?: "horizontal" | "vertical"
+}
+
+type RovingTabIndexRootProps = RovingTabIndexRootBaseProps
+
+function onFocusFirst(candidates: HTMLElement[]) {
+  const previousFocus = document.activeElement
+  while (document.activeElement === previousFocus && candidates.length > 0) {
+    candidates.shift()?.focus()
+  }
+}
+
+export const RovingTabIndexRoot = ({
+  children,
+  active,
+  setActive,
+  asChild,
+  dir = "horizontal",
+  ...props
+}: RovingTabIndexRootProps) => {
+  const [isShiftTabbing, setIsShiftTabbing] = useState(false)
+
+  const [value = null, setValue] = useControlledState({
+    prop: active,
+    onChange: setActive,
+  })
+  const rootRef = useRef<HTMLDivElement | null>(null)
+  const elementsRef = useRef<Map<string, HTMLElement>>(new Map())
+  const getOrderedItems = useCallback(() => {
+    if (!rootRef.current) return []
+    const activeElements = Array.from(
+      rootRef.current.querySelectorAll(SELECTOR_ACTIVE),
+    )
+
+    return Array.from(elementsRef.current)
+      .sort(
+        (a, b) => activeElements.indexOf(a[1]) - activeElements.indexOf(b[1]),
+      )
+      .map(([value, element]) => ({ value, element }))
+  }, [])
+
+  return (
+    <RovingTabIndexProvider
+      setFocusableId={(value: string) => {
+        setValue(value)
+      }}
+      onShiftTab={() => {
+        setIsShiftTabbing(true)
+      }}
+      currentFocusedValue={value}
+      getOrderedItems={getOrderedItems}
+      elements={elementsRef}
+      dir={dir}
+    >
+      <Slot
+        {...{ [ROOT_SELECTOR]: true }}
+        tabIndex={isShiftTabbing ? -1 : 0}
+        onFocus={(e) => {
+          if (e.target !== e.currentTarget) return
+          if (isShiftTabbing) return
+          const orderedItems = getOrderedItems()
+          if (orderedItems.length === 0) return
+          const candidates = [
+            elementsRef.current.get(value ?? ""),
+            ...orderedItems.map((i) => i.element),
+          ].filter((element): element is HTMLElement => element != null)
+          onFocusFirst(candidates)
+        }}
+        onBlur={() => setIsShiftTabbing(false)}
+        ref={rootRef}
+        {...props}
+      >
+        {children}
+      </Slot>
+    </RovingTabIndexProvider>
+  )
+}

package/dist/components/RovingIndex/index.ts

@@ -0,0 +1,3 @@
+export * from "./RovingItem"
+export * from "./useRovingTabIndex"
+export * from "./RovingTabIndexRoot"

package/dist/components/RovingIndex/useRovingTabIndex.tsx

@@ -0,0 +1,76 @@
+import {
+  FocusEvent,
+  MouseEvent,
+  KeyboardEvent,
+  ComponentPropsWithoutRef,
+  ElementType,
+  MutableRefObject,
+} from "react"
+import { createContext } from "../../hooks/createContext"
+import { NODE_SELECTOR } from "./RovingTabIndexRoot"
+
+export type RovingTabIndexItem = {
+  value: string
+  element: HTMLElement
+}
+
+type RovingTabIndexContext = {
+  currentFocusedValue: string | null
+  setFocusableId: (id: string) => void
+  onShiftTab: () => void
+  getOrderedItems: () => RovingTabIndexItem[]
+  elements: MutableRefObject<Map<string, HTMLElement>>
+  dir?: "horizontal" | "vertical"
+}
+
+export const [RovingTabIndexProvider, useRovingTabIndexContext] =
+  createContext<RovingTabIndexContext>("rovingTabIndex")
+
+export const useRovingTabIndex = (value: string) => {
+  const {
+    currentFocusedValue,
+    setFocusableId,
+    onShiftTab,
+    getOrderedItems,
+    elements,
+    dir,
+  } = useRovingTabIndexContext("rovingTabIndex")
+
+  return {
+    getOrderedItems,
+    dir,
+    isFocusable: currentFocusedValue === value,
+    getRovingProps: <T extends ElementType>(
+      props?: ComponentPropsWithoutRef<T>,
+    ) => ({
+      ...props,
+      ref: (element: HTMLElement | null) => {
+        if (element) {
+          elements.current.set(value, element)
+        } else {
+          elements.current.delete(value)
+        }
+      },
+      onMouseDown: (e: MouseEvent) => {
+        props?.onMouseDown?.(e)
+        if (e.target !== e.currentTarget) return
+        setFocusableId(value)
+      },
+      onKeyDown: (e: KeyboardEvent) => {
+        props?.onKeyDown?.(e)
+        if (e.target !== e.currentTarget) return
+        if (e.shiftKey && e.key === "Tab") {
+          onShiftTab()
+          return
+        }
+      },
+      onFocus: (e: FocusEvent) => {
+        props?.onFocus?.(e)
+        if (e.target !== e.currentTarget) return
+        setFocusableId(value)
+      },
+      [NODE_SELECTOR]: true,
+      tabIndex: currentFocusedValue === value ? 0 : -1,
+    }),
+  }
+}