@jongh/cli 1.0.0

package/dist/components/Accordion/Accordion.tsx

@@ -0,0 +1,274 @@
+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"
+
+const ACCORDION_KEYS = [
+  "Home",
+  "End",
+  "ArrowDown",
+  "ArrowUp",
+  "ArrowLeft",
+  "ArrowRight",
+]
+export type TAccordionContext = {
+  selected?: string[]
+  onItemOpen: (value: string) => void
+  onItemClose: (value: string) => void
+  refs?: HTMLElement[]
+}
+
+const [AccordionProvider, useAccordionContext] =
+  createContext<TAccordionContext>("accordion")
+
+export interface AccordionProps {
+  value?: string[]
+  defaultValue?: string[]
+  onValueChange?: (value: string[]) => void
+  asChild?: boolean
+  type?: "single" | "multi"
+}
+
+export const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
+  (props, ref) => {
+    const { type = "single", ...accordionProps } = props
+    if (type === "single") {
+      return <SingleAccordion {...accordionProps} ref={ref} />
+    }
+    if (type === "multi") {
+      return <MultiAccordion {...accordionProps} />
+    }
+  },
+)
+
+Accordion.displayName = "Accordion"
+
+interface AccordionImplSingleProps {
+  value?: string[] // 현재 선택되어있는 item들을 담아놓는 용도
+  defaultValue?: string[]
+  onValueChange?: (value: string[]) => void
+  asChild?: boolean
+  children?: React.ReactNode
+}
+
+const SingleAccordion = React.forwardRef<
+  HTMLDivElement,
+  AccordionImplSingleProps
+>(
+  (
+    { value, defaultValue = [], onValueChange, children, asChild, ...props },
+    forwardedRef,
+  ) => {
+    const [selected = [], setSelected] = useControlledState({
+      prop: value,
+      defaultProp: defaultValue,
+      onChange: onValueChange,
+    })
+
+    const { refs: accordionRefs, handleKeyDown } = useKeyboardEvent({
+      keyList: ACCORDION_KEYS,
+    })
+
+    const Comp = asChild ? Slot : "div"
+
+    return (
+      <AccordionProvider
+        selected={selected}
+        onItemOpen={(value) => setSelected((_) => [value])}
+        onItemClose={() => setSelected((_) => [])}
+        refs={accordionRefs.current || []}
+      >
+        <Comp
+          ref={composeRefs((node) => {
+            accordionRefs.current = Array.from(
+              node?.children || [],
+            ) as HTMLElement[]
+          }, forwardedRef)}
+          onKeyDown={(e) => {
+            handleKeyDown(e)
+          }}
+          {...props}
+        >
+          {children}
+        </Comp>
+      </AccordionProvider>
+    )
+  },
+)
+
+interface AccordionImplMultiProps {
+  value?: string[] // 현재 선택되어있는 item들을 담아놓는 용도
+  defaultValue?: string[]
+  onValueChange?: (value: string[]) => void
+  asChild?: boolean
+  children?: React.ReactNode
+}
+
+const MultiAccordion = React.forwardRef<
+  HTMLDivElement,
+  AccordionImplMultiProps
+>(
+  (
+    { value, defaultValue, onValueChange, children, asChild, ...props },
+    forwardedRef,
+  ) => {
+    const [selected, setSelected] = useControlledState({
+      prop: value,
+      defaultProp: defaultValue,
+      onChange: onValueChange,
+    })
+
+    const handleItemOpen = React.useCallback(
+      (item: string) => {
+        setSelected((prev = []) => [...prev, item])
+      },
+      [setSelected],
+    )
+
+    const handleItemClose = React.useCallback(
+      (item: string) =>
+        setSelected((prev = []) => prev.filter((value) => value !== item)),
+      [setSelected],
+    )
+
+    const { refs: accordionRefs, handleKeyDown } = useKeyboardEvent({
+      keyList: ACCORDION_KEYS,
+    })
+
+    const Comp = asChild ? Slot : "div"
+
+    return (
+      <AccordionProvider
+        selected={selected}
+        onItemOpen={handleItemOpen}
+        onItemClose={handleItemClose}
+      >
+        <Comp
+          ref={(node) => {
+            accordionRefs.current = Array.from(
+              node?.children || [],
+            ) as HTMLElement[]
+            if (typeof forwardedRef === "function") {
+              forwardedRef(node)
+            } else if (forwardedRef) {
+              ;(
+                forwardedRef as React.MutableRefObject<HTMLDivElement | null>
+              ).current = node
+            }
+          }}
+          onKeyDown={handleKeyDown}
+          {...props}
+        >
+          {children}
+        </Comp>
+      </AccordionProvider>
+    )
+  },
+)
+//AccordionItem
+interface TAccordionItemContext {
+  isOpen: boolean
+  onToggle: () => void
+  value?: string
+}
+
+const [AccordionItemProvider, useAccordionItemProvider] =
+  createContext<TAccordionItemContext>("accordionItem")
+export interface AccordionItemProps {
+  value: string //unique value
+  disabled?: boolean
+  children: React.ReactNode
+  asChild?: boolean
+}
+
+export const AccordionItem = React.forwardRef<
+  HTMLDivElement,
+  AccordionItemProps
+>(({ value, disabled = false, children, asChild, ...props }, forwardedRef) => {
+  const { selected, onItemOpen, onItemClose } = useAccordionContext("accordion")
+
+  const isOpen = selected?.includes(value) && !disabled
+
+  const onToggle = () => {
+    if (disabled) {
+      return
+    }
+    isOpen ? onItemClose(value) : onItemOpen(value)
+  }
+
+  const Comp = asChild ? Slot : "div"
+
+  return (
+    <AccordionItemProvider isOpen={!!isOpen} onToggle={onToggle} value={value}>
+      <Comp
+        ref={forwardedRef}
+        data-state={isOpen ? "open" : "close"}
+        tabIndex={0}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            onToggle()
+          }
+        }}
+        {...props}
+      >
+        {children}
+      </Comp>
+    </AccordionItemProvider>
+  )
+})
+
+export interface AccordionTriggerProps extends React.PropsWithChildren {}
+export const AccordionTrigger = ({
+  children,
+  ...props
+}: AccordionTriggerProps) => {
+  const { onToggle, isOpen, value } = useAccordionItemProvider("accordionItem")
+  return (
+    <h3 data-state={isOpen ? "open" : "close"} {...props}>
+      <span
+        onClick={onToggle}
+        aria-expanded={isOpen ? "true" : "false"}
+        aria-controls={`content-${value}`}
+        id={`trigger-${value}`}
+      >
+        <span>{children}</span>
+      </span>
+    </h3>
+  )
+}
+//AccordionContent
+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 = useAccordionHeight<HTMLDivElement>(isOpen, duration) //duration 초 뒤에 accordion을 열거나 닫아줌
+
+  if (!isOpen) {
+    return null
+  }
+
+  return (
+    <Comp
+      data-state={isOpen ? "open" : "close"}
+      id={`content-${value}`}
+      aria-labelledby={`trigger-${value}`}
+      role="region"
+      ref={contentRef}
+      {...props}
+    >
+      {children}
+    </Comp>
+  )
+}

package/dist/components/Accordion/index.tsx

@@ -0,0 +1,37 @@
+import { accordion, type AccordionVariantProps } from "@styled-system/recipes"
+import { createStyleContext } from "../../utils/createStyleContext"
+import type { ComponentProps, HTMLStyledProps } from "@styled-system/types"
+import type { Assign } from "../../types"
+import {
+  Accordion as AccordionProvider,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  type AccordionContentProps,
+  type AccordionItemProps,
+  type AccordionProps,
+  type AccordionTriggerProps,
+} from "./Accordion"
+
+const { withProvider, withContext } = createStyleContext(accordion)
+
+export type RootProviderProps = ComponentProps<typeof AccordionProvider>
+export const Accordion = withProvider<
+  HTMLDivElement,
+  Assign<Assign<HTMLStyledProps<"div">, AccordionProps>, AccordionVariantProps>
+>(AccordionProvider, "root")
+
+export const Item = withContext<
+  HTMLDivElement,
+  Assign<HTMLStyledProps<"div">, AccordionItemProps>
+>(AccordionItem, "item")
+
+export const Trigger = withContext<
+  HTMLButtonElement,
+  Assign<HTMLStyledProps<"button">, AccordionTriggerProps>
+>(AccordionTrigger, "trigger")
+
+export const Content = withContext<
+  HTMLDivElement,
+  Assign<HTMLStyledProps<"div">, AccordionContentProps>
+>(AccordionContent, "content")

package/dist/components/Accordion/useAccordionHeight.ts

@@ -0,0 +1,28 @@
+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 ref = useRef<T>(null)
+
+  useEffect(() => {
+    const element = ref.current
+    if (element === null) {
+      return
+    }
+
+    if (isOpen) {
+      const height = element.style.getPropertyValue(ACCORDION_HEIGHT)
+      if (height === "0" || !height) {
+        element.style.setProperty(ACCORDION_HEIGHT, `${element.scrollHeight}px`)
+      }
+    } else {
+      setTimeout(() => {
+        element.style.setProperty(ACCORDION_HEIGHT, `${element.scrollHeight}px`)
+      }, duration)
+    }
+  }, [isOpen, duration])
+
+  return ref
+}

package/dist/components/Avatar/Avatar.tsx

@@ -0,0 +1,18 @@
+import { Slot } from "@radix-ui/react-slot"
+import { useAvatar, type UseAvatarStatusProps } from "./useAvatar"
+import { forwardRef } from "react"
+
+interface AvatarProps extends UseAvatarStatusProps {
+  asChild?: boolean
+}
+
+export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>((props, ref) => {
+  const { asChild, src, onStatusChange } = props
+  const { getRootProps, getImgProps } = useAvatar({ src, onStatusChange })
+  const Comp = asChild ? Slot : "span"
+  return (
+    <Comp ref={ref} {...getRootProps()}>
+      <img {...getImgProps()}></img>
+    </Comp>
+  )
+})

package/dist/components/Avatar/useAvatar.ts

@@ -0,0 +1,73 @@
+import {
+  useLayoutEffect,
+  useState,
+  type ComponentProps,
+  type HTMLAttributes,
+} from "react"
+
+type Status = "loading" | "loaded" | "error"
+
+export interface UseAvatarStatusProps {
+  src?: string
+  onStatusChange?: (status: Status) => void
+}
+
+export const useAvatarStatus = ({
+  src,
+  onStatusChange,
+}: UseAvatarStatusProps) => {
+  const [status, setStatus] = useState<Status>("loading")
+
+  useLayoutEffect(() => {
+    if (!src) {
+      setStatus("error")
+      return
+    }
+    let isMounted: boolean = true
+    const image = new window.Image()
+
+    const updateStatus = (status: Status) => () => {
+      if (!isMounted) return
+      setStatus(status)
+      onStatusChange?.(status)
+    }
+
+    setStatus("loading")
+
+    image.src = src
+    image.onload = updateStatus("loaded")
+    image.onerror = updateStatus("error")
+
+    return () => {
+      isMounted = false
+    }
+  }, [src])
+
+  return status
+}
+
+type DataAttr = Record<`data-${string}`, string | undefined>
+
+const elementProps = (props: HTMLAttributes<HTMLElement> & DataAttr) => props
+
+const imgProps = (props: ComponentProps<"img"> & DataAttr) => props
+
+interface UseAvatarProps extends UseAvatarStatusProps {}
+export const useAvatar = ({ src, onStatusChange }: UseAvatarProps) => {
+  const status = useAvatarStatus({ src, onStatusChange })
+  const isLoaded = status === "loaded"
+  return {
+    getRootProps() {
+      return elementProps({
+        "data-loading-state": status,
+      })
+    },
+    getImgProps() {
+      return imgProps({
+        hidden: !isLoaded,
+        "data-visible": `${isLoaded}`,
+        src,
+      })
+    },
+  }
+}

package/dist/components/Button/index.tsx

@@ -0,0 +1,66 @@
+import {
+  forwardRef,
+  ComponentPropsWithoutRef,
+  isValidElement,
+  cloneElement,
+  type ReactElement,
+  type MouseEventHandler,
+} from "react"
+import { button, type ButtonVariant } from "@styled-system/recipes"
+import { Slot } from "@radix-ui/react-slot"
+
+type ButtonProps = Partial<ButtonVariant> &
+  ComponentPropsWithoutRef<"button"> & { as?: string } & {
+    /**왼쪽에 올 아이콘 */
+    leftIcon?: ReactElement
+    /**오른쪽에 위치할 아이콘 */
+    rightIcon?: ReactElement
+  }
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      as,
+      id,
+      className,
+      children,
+      disabled = false,
+      leftIcon,
+      rightIcon,
+      onClick,
+      ...rest
+    },
+    ref,
+  ) => {
+    const Comp = as ? Slot : "button"
+
+    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)
+          },
+        })
+      }
+    }
+
+    return (
+      <Comp
+        role="button"
+        ref={ref}
+        disabled={disabled}
+        id={id}
+        data-testid={id}
+        onClick={onClick}
+        className={button({})}
+        {...rest}
+      >
+        {leftIcon && <span>{wrapIcon(leftIcon)}</span>}
+        {children}
+        {rightIcon && <span>{wrapIcon(rightIcon)}</span>}
+      </Comp>
+    )
+  },
+)

package/dist/components/Slider/Slider.tsx

@@ -0,0 +1,140 @@
+import { useState } from "react"
+import { useControlledState } from "../../hooks/useControllableState"
+
+type Props = {
+  min: number
+  max: number
+  value: number
+  defaultValue?: number
+  onChange: (value: number) => void
+}
+
+const getPercentage = (value: number, min: number, max: number) =>
+  ((value - min) / (max - min)) * 100
+
+const isTouchEvent = (e: TouchEvent | MouseEvent): e is TouchEvent => {
+  return e && "touches" in e
+}
+
+const isMouseEvent = (e: TouchEvent | MouseEvent): e is MouseEvent => {
+  return e && "screenX" in e
+}
+
+const getClientX = (
+  e: React.TouchEvent<HTMLElement> | React.MouseEvent<HTMLElement>,
+) => {
+  let clientX = 0
+  if (isMouseEvent(e.nativeEvent)) {
+    clientX = e.nativeEvent.clientX
+  } else if (isTouchEvent(e.nativeEvent)) {
+    clientX =
+      e.nativeEvent.touches.length > 0
+        ? e.nativeEvent.touches[0].clientX
+        : e.nativeEvent.changedTouches[0].clientX
+  }
+  return clientX
+}
+
+export const Slider = ({
+  min = 0,
+  max = 100,
+  value,
+  onChange,
+  defaultValue,
+}: Props) => {
+  const [isDragging, setIsDragging] = useState(false)
+
+  const [innerValue = 0, setValue] = useControlledState({
+    prop: value,
+    defaultProp: defaultValue || min,
+    onChange,
+  })
+
+  const handlePointerDown = (e: React.PointerEvent) => {
+    e.preventDefault()
+    setIsDragging(true)
+    e.currentTarget.setPointerCapture(e.pointerId)
+  }
+
+  const handlePointerUp = (e: React.PointerEvent) => {
+    e.preventDefault()
+    setIsDragging(false)
+    e.currentTarget.releasePointerCapture(e.pointerId)
+  }
+
+  const percentage = getPercentage(innerValue, min, max)
+
+  const handleMouseMove = (e: React.PointerEvent<HTMLElement>) => {
+    e.preventDefault()
+    if (!isDragging) return
+    //width는 본인의 상위태그여야함..
+    const { left, width } = e.currentTarget.getBoundingClientRect()
+    let percentage = (getClientX(e) - left) / width
+    console.log(left, width)
+    percentage = Math.min(Math.max(percentage, 0), 1)
+    console.log(percentage)
+    const newValue = min + percentage * (max - min)
+    setValue(newValue)
+  }
+
+  return (
+    <>
+      <span
+        className="slider-wrapper"
+        style={{
+          position: "relative",
+          display: "flex",
+          alignItems: "center",
+          width: "200px",
+          height: "50px",
+        }}
+      >
+        <span
+          className="slider-track"
+          onPointerDownCapture={handlePointerDown}
+          onPointerUpCapture={handlePointerUp}
+          onPointerMoveCapture={handleMouseMove}
+          onPointerCancelCapture={handlePointerUp}
+          style={{
+            position: "relative",
+            backgroundColor: "black",
+            flexGrow: 1,
+            borderRadius: "9999px",
+            height: "10px",
+          }}
+        >
+          <span
+            className="slider-value"
+            style={{
+              backgroundColor: "white",
+              borderRadius: "9999px",
+              height: "100%",
+              position: "absolute",
+              width: `${percentage}%`,
+            }}
+          ></span>
+          <span
+            className="slider-thumb"
+            style={{
+              position: "absolute",
+              left: `${percentage}%`,
+              transform: "translateX(-50%)",
+            }}
+          >
+            <span
+              style={{
+                width: "10px",
+                height: "10px",
+                borderRadius: "100px",
+                backgroundColor: "pink",
+                opacity: "0.5",
+                display: "block",
+              }}
+            ></span>
+          </span>
+        </span>
+      </span>
+      <div style={{ color: "pink" }}>{innerValue}</div>
+    </>
+  )
+}

package/dist/components/Slider/style.ts

@@ -0,0 +1,42 @@
+import { define } from "../../../dev"
+
+export const sliderRecipe = define.recipe({
+  className: "slider",
+  base: {
+    WebkitAppearance: "none",
+    height: "4px",
+    borderRadius: "lg",
+    backgroundColor: "grey_300",
+    backgroundImage: "linear-gradient(#7DD3FC, #7DD3FC)",
+    backgroundSize: "var(--range-size)",
+    backgroundRepeat: "no-repeat",
+    "&::-webkit-slider-thumb": {
+      WebkitAppearance: "none",
+      width: "20px",
+      height: "20px",
+      backgroundColor: "grey_300",
+      borderRadius: "rounded",
+      border: "none",
+      cursor: "pointer",
+    },
+    "&::-moz-range-thumb": {
+      WebkitAppearance: "none",
+      width: "20px",
+      height: "20px",
+      backgroundColor: "grey_300",
+      borderRadius: "rounded",
+      border: "none",
+      cursor: "pointer",
+    },
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        writingMode: "horizontal-tb",
+      },
+      vertical: {
+        writingMode: "vertical-rl",
+      },
+    },
+  },
+})