@jongh/ui 1.6.5

package/src/component/select/ui/recipe.ts

@@ -0,0 +1,142 @@
+import { sva } from "@styled-system/css"
+
+export const recipe = sva({
+  className: "select",
+  slots: [
+    "root",
+    "group",
+    "value",
+    "trigger",
+    "viewport",
+    "content",
+    "label",
+    "item",
+    "itemIndicator",
+    "separator",
+  ],
+  base: {
+    trigger: {
+      display: "flex",
+      h: "10",
+      w: "full",
+      alignItems: "center",
+      justifyContent: "space-between",
+      rounded: "md",
+      border: "input",
+      bg: "transparent",
+      px: "3",
+      py: "2",
+      textStyle: "sm",
+      cursor: "pointer",
+      ringColor: "background",
+
+      _placeholder: {
+        color: "muted.foreground",
+      },
+
+      _focus: {
+        ringWidth: "1",
+        ringColor: "ring",
+        outlineOffset: "1",
+      },
+
+      _disabled: {
+        cursor: "not-allowed",
+        opacity: "0.5",
+      },
+    },
+    viewport: {
+      "&:is([data-position=popper])": {
+        h: "var(--radix-select-trigger-height)",
+        w: "full",
+        minW: "var(--radix-select-trigger-width)",
+      },
+    },
+    content: {
+      position: "relative",
+      zIndex: 50,
+      minW: "full",
+      overflow: "hidden",
+      rounded: "md",
+      border: "base",
+      bg: "popover",
+      color: "popover.foreground",
+      shadow: "md",
+      maxH: "96",
+
+      "&:is([data-state=open])": {
+        animationName: "fadeIn",
+        animationState: "ease-in",
+        animationDuration: "slowest",
+      },
+
+      "&:is(&[data-state=closed])": {
+        animationName: "slideInDown",
+        animationState: "ease-in",
+        animationDuration: "slowest",
+      },
+
+      "&:is([data-position=popper])": {
+        "&:is([data-side=top])": {
+          translateY: "-1",
+        },
+
+        "&:is([data-side=bottom])": {
+          translateY: "1",
+        },
+
+        "&:is([data-side=left])": {
+          translateX: "-1",
+        },
+
+        "&:is([data-side=right])": {
+          translateX: "1",
+        },
+      },
+    },
+    label: {
+      py: "1.5",
+      pl: "8",
+      pr: "2",
+      textStyle: "sm",
+      fontWeight: "semibold",
+    },
+    item: {
+      position: "relative",
+      display: "flex",
+      cursor: "default",
+      userSelect: "none",
+      alignItems: "center",
+      rounded: "sm",
+      py: "1.5",
+      pl: "8",
+      pr: "2",
+      textStyle: "sm",
+
+      _focus: {
+        bg: "accent",
+        color: "accent.foreground",
+      },
+
+      ["&[data-disabled]"]: {
+        pointerEvents: "none",
+        opacity: "0.5",
+      },
+    },
+    itemIndicator: {
+      position: "absolute",
+      left: "2",
+      display: "flex",
+      h: "3.5",
+      w: "3.5",
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    separator: {
+      mx: "-1",
+      my: "1",
+      h: "1",
+      bg: "muted",
+    },
+  },
+})

package/src/component/slider/ui/index.tsx

@@ -0,0 +1,61 @@
+import { css, cx } from "@styled-system/css"
+import { Slider as SliderPrimitive } from "radix-ui"
+import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react"
+
+import { recipe } from "./recipe"
+
+export const Root = forwardRef<
+  ElementRef<typeof SliderPrimitive.Root>,
+  ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const styles = recipe.raw()
+  return (
+    <SliderPrimitive.Root
+      ref={ref}
+      className={cx(css(styles.root), className)}
+      {...props}
+    />
+  )
+})
+
+export const Track = forwardRef<
+  ElementRef<typeof SliderPrimitive.Track>,
+  ComponentPropsWithoutRef<typeof SliderPrimitive.Track>
+>(({ className, ...props }, ref) => {
+  const styles = recipe.raw()
+  return (
+    <SliderPrimitive.Track
+      ref={ref}
+      className={cx(css(styles.track), className)}
+      {...props}
+    />
+  )
+})
+
+export const Range = forwardRef<
+  ElementRef<typeof SliderPrimitive.Range>,
+  ComponentPropsWithoutRef<typeof SliderPrimitive.Range>
+>(({ className, ...props }, ref) => {
+  const styles = recipe.raw()
+  return (
+    <SliderPrimitive.Range
+      ref={ref}
+      className={cx(css(styles.range), className)}
+      {...props}
+    />
+  )
+})
+
+export const Thumb = forwardRef<
+  ElementRef<typeof SliderPrimitive.Thumb>,
+  ComponentPropsWithoutRef<typeof SliderPrimitive.Thumb>
+>(({ className, ...props }, ref) => {
+  const styles = recipe.raw()
+  return (
+    <SliderPrimitive.Thumb
+      ref={ref}
+      className={cx(css(styles.thumb), className)}
+      {...props}
+    />
+  )
+})

package/src/component/slider/ui/recipe.ts

@@ -0,0 +1,52 @@
+import { sva } from "@styled-system/css"
+
+export const recipe = sva({
+  slots: ["root", "track", "range", "thumb"],
+  base: {
+    root: {
+      position: "relative",
+      display: "flex",
+      touchAction: "none",
+      userSelect: "none",
+      alignItems: "center",
+    },
+    track: {
+      position: "relative",
+      h: "2",
+      w: "full",
+      flexGrow: "1",
+      overflow: "hidden",
+      rounded: "full",
+      bg: "secondary",
+    },
+    range: {
+      position: "absolute",
+      h: "full",
+      bg: "primary",
+    },
+    thumb: {
+      display: "block",
+      h: "5",
+      w: "5",
+      cursor: "pointer",
+      rounded: "full",
+      borderWidth: "2px",
+      borderStyle: "solid",
+      borderColor: "primary",
+      bg: "background",
+      ringColor: "background",
+      transition: "colors",
+
+      _focusVisible: {
+        ringWidth: "1",
+        ringColor: "ring",
+        ringOffset: "1",
+      },
+
+      _disabled: {
+        pointerEvents: "none",
+        opacity: "0.5",
+      },
+    },
+  },
+})

package/src/component/tabs/ui/index.tsx

@@ -0,0 +1,61 @@
+import { css, cx } from "@styled-system/css"
+import { Tabs as TabsPrimitive } from "radix-ui"
+import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react"
+
+import { recipe } from "./recipe"
+
+export const Root = forwardRef<
+  ElementRef<typeof TabsPrimitive.Root>,
+  ComponentPropsWithoutRef<typeof TabsPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const styles = recipe.raw()
+  return (
+    <TabsPrimitive.Root
+      ref={ref}
+      className={cx(css(styles.root), className)}
+      {...props}
+    />
+  )
+})
+
+export const List = forwardRef<
+  ElementRef<typeof TabsPrimitive.List>,
+  ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => {
+  const styles = recipe.raw()
+  return (
+    <TabsPrimitive.List
+      ref={ref}
+      className={cx(css(styles.list), className)}
+      {...props}
+    />
+  )
+})
+
+export const Trigger = forwardRef<
+  ElementRef<typeof TabsPrimitive.Trigger>,
+  ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => {
+  const styles = recipe.raw()
+  return (
+    <TabsPrimitive.Trigger
+      ref={ref}
+      className={cx(css(styles.trigger), className)}
+      {...props}
+    />
+  )
+})
+
+export const Content = forwardRef<
+  ElementRef<typeof TabsPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => {
+  const styles = recipe.raw()
+  return (
+    <TabsPrimitive.Content
+      ref={ref}
+      className={cx(css(styles.content), className)}
+      {...props}
+    />
+  )
+})

package/src/component/tabs/ui/recipe.ts

@@ -0,0 +1,59 @@
+import { sva } from "@styled-system/css"
+
+export const recipe = sva({
+  slots: ["root", "list", "trigger", "content"],
+  base: {
+    list: {
+      display: "inline-flex",
+      h: "10",
+      alignItems: "center",
+      justifyContent: "center",
+      rounded: "md",
+      bg: "muted",
+      p: "1",
+      color: "muted.foreground",
+    },
+    trigger: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      whiteSpace: "nowrap",
+      rounded: "sm",
+      px: "3",
+      py: "1.5",
+      textStyle: "sm",
+      fontWeight: "medium",
+      transition: "all",
+      cursor: "pointer",
+      ringColor: "background",
+
+      _focusVisible: {
+        ringWidth: "1",
+        ringColor: "ring",
+        ringOffset: "1",
+      },
+
+      _disabled: {
+        pointerEvents: "none",
+        opacity: "50%",
+      },
+
+      "&:is([data-state=active])": {
+        bg: "background",
+        color: "foreground",
+        shadow: "sm",
+      },
+    },
+    content: {
+      mt: "2",
+      ringColor: "background",
+
+      _focusVisible: {
+        outlineWidth: "2",
+        outlineOffset: "2",
+        ringWidth: "2",
+        ringColor: "ring",
+      },
+    },
+  },
+})

package/src/hooks/createContext.tsx

@@ -0,0 +1,34 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import * as React from "react"
+
+export function createContext<ContextValueType extends object | null>(
+  rootComponentName: string,
+  defaultContext?: ContextValueType,
+) {
+  const C = React.createContext<ContextValueType | undefined>(defaultContext) //context 생성
+  const Provider = (
+    props: ContextValueType & { children: React.ReactNode },
+  ) => {
+    const { children, ...context } = props
+    // Only re-memoize when prop values change
+    const value = React.useMemo(
+      () => context,
+      Object.values(context),
+    ) as ContextValueType
+
+    return <C.Provider value={value}>{children}</C.Provider>
+  }
+
+  function useContext(consumerName?: string) {
+    const context = React.useContext(C)
+    if (context) return context
+    if (defaultContext !== undefined) return defaultContext
+    // if a defaultContext wasn't specified, it's a required context.
+    throw new Error(
+      `\`${consumerName}\` must be used within \`${rootComponentName}\``,
+    )
+  }
+
+  Provider.displayName = rootComponentName + "Provider"
+  return [Provider, useContext] as const
+}

package/src/hooks/useComposedRefs.ts

@@ -0,0 +1,20 @@
+import { useCallback } from "react"
+
+type PossibleRef<T> = React.Ref<T> | undefined
+
+function setRef<T>(ref: PossibleRef<T>, value: T) {
+  if (typeof ref === "function") {
+    ref(value)
+  } else if (ref !== null && ref !== undefined) {
+    ;(ref as React.MutableRefObject<T>).current = value
+  }
+}
+
+export function composeRefs<T>(...refs: Array<PossibleRef<T>>) {
+  return (node: T) => refs.forEach((ref) => setRef(ref, node))
+}
+
+export function useComposedRefs<T>(...refs: Array<PossibleRef<T>>) {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return useCallback(composeRefs(...refs), refs)
+}

package/src/hooks/useControllableState.ts

@@ -0,0 +1,87 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {
+  Dispatch,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react"
+
+export const useCallbackRef = <T extends (...args: any[]) => any>(
+  callback?: T,
+) => {
+  const callbackRef = useRef(callback)
+
+  useEffect(() => {
+    callbackRef.current = callback
+  })
+
+  return useMemo(
+    () =>
+      (...args: any[]) =>
+        callbackRef.current?.(...args),
+    [],
+  )
+}
+//그냥 useState인데, onChange 이벤트를 할수있게 해준 hook
+export const useUncontrolledState = <T>({
+  defaultValue,
+  onChange,
+}: {
+  defaultValue?: T | undefined
+  onChange?: (params: T) => void
+}) => {
+  const unControlledState = useState(defaultValue)
+  const [value] = unControlledState
+  const handleChange = useCallbackRef(onChange)
+  const ref = useRef(value)
+  useEffect(() => {
+    if (ref.current !== value) {
+      handleChange(value)
+      ref.current = value
+    }
+  }, [value, ref, handleChange])
+
+  return unControlledState
+}
+
+type SetStateFn<T> = (prev: T) => void
+
+type UseControllableState<T> = {
+  prop?: T | undefined
+  defaultProp?: T | undefined
+  onChange?: (state: T) => void
+}
+
+export const useControlledState = <T>({
+  prop,
+  defaultProp,
+  onChange,
+}: UseControllableState<T>) => {
+  const isControlled = prop !== undefined
+  const [unControlledProp, setUncontrolledProp] = useUncontrolledState({
+    defaultValue: defaultProp,
+    onChange,
+  })
+
+  const value = isControlled ? prop : unControlledProp
+  const handleChange = useCallbackRef(onChange)
+  const setValue: Dispatch<SetStateAction<T | undefined>> = useCallback(
+    (nextValue) => {
+      if (isControlled) {
+        const setter = nextValue as SetStateFn<T>
+        const value = typeof nextValue === "function" ? setter(prop) : nextValue
+        if (value !== prop) {
+          handleChange?.(value as T)
+        }
+      } else {
+        setUncontrolledProp(nextValue)
+      }
+    },
+    [isControlled, prop, setUncontrolledProp, handleChange],
+  )
+
+  return [value, setValue] as const
+}

package/src/hooks/useKeyboardEvent.ts

@@ -0,0 +1,58 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { KeyboardEvent, useCallback, useRef } from "react"
+
+type UseKeybaordEvent = {
+  keyList: string[]
+  changeIndex?: (index: number) => void
+}
+
+export const useKeyboardEvent = ({
+  keyList,
+  changeIndex,
+}: UseKeybaordEvent) => {
+  const refs = useRef<HTMLElement[]>([])
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLElement>, callback?: () => void) => {
+      if (!keyList.includes(event.key)) return
+      const length = refs.current.length
+      const target = event.target as HTMLElement
+      const currentIndex = refs.current.indexOf(target)
+      event.preventDefault()
+
+      let nextIndex = 0
+      switch (event.key) {
+        case "ArrowDown":
+          nextIndex = (currentIndex + 1) % length
+          break
+        case "ArrowUp":
+          nextIndex = (currentIndex - 1 + length) % length
+          break
+        case "ArrowRight":
+          nextIndex = (currentIndex + 1) % length
+          break
+        case "ArrowLeft":
+          nextIndex = (currentIndex - 1 + length) % length
+          break
+        case "Home":
+          nextIndex = 0
+          break
+        case "End":
+          nextIndex = length - 1
+          break
+        case "Tab":
+          nextIndex = (currentIndex + 1) % length
+          break
+        case "Enter":
+          callback?.()
+      }
+      changeIndex?.(nextIndex)
+      refs.current[nextIndex]?.focus()
+    },
+    [],
+  )
+
+  return { refs, handleKeyDown }
+}
+
+export default useKeyboardEvent

package/src/stories/accordion.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { expect, userEvent, waitFor } from "@storybook/test"
+import { css } from "@styled-system/css"
+
+import * as Accordion from "../component/accordion/ui"
+export default {
+  title: "Accordion",
+  tags: ["autodocs"],
+} satisfies Meta<typeof Accordion>
+
+type Story = StoryObj<typeof Accordion>
+
+export const Primary: Story = {
+  render: () => {
+    return (
+      <div style={{ width: "500px" }}>
+        <Accordion.Root type="single" collapsible>
+          <Accordion.Item value="1">
+            <Accordion.Header>
+              <Accordion.Trigger
+                className={css({
+                  color: "red.100",
+                })}
+              >
+                1번
+              </Accordion.Trigger>
+            </Accordion.Header>
+            <Accordion.Content>
+              <div>내용1</div>
+            </Accordion.Content>
+          </Accordion.Item>
+          <Accordion.Item value="2">
+            <Accordion.Header>
+              <Accordion.Trigger>2번</Accordion.Trigger>
+            </Accordion.Header>
+            <Accordion.Content>
+              <div>내용1</div>
+            </Accordion.Content>
+          </Accordion.Item>
+          <Accordion.Item value="3">
+            <Accordion.Header>
+              <Accordion.Trigger>3번</Accordion.Trigger>
+            </Accordion.Header>
+            <Accordion.Content>내용3</Accordion.Content>
+          </Accordion.Item>
+        </Accordion.Root>
+      </div>
+    )
+  },
+  play: async ({ canvas }) => {
+    const Item = canvas.getByText("1번")
+    expect(Item).toBeInTheDocument()
+    //토글로 내용이 열고 닫히는지 확인
+    await userEvent.click(Item)
+    await expect(canvas.getByText("내용1")).toBeInTheDocument()
+
+    await userEvent.click(Item)
+    await waitFor(async () => {
+      const Content = canvas.queryByText("내용1")
+      expect(Content).toBeNull()
+    })
+  },
+}

package/src/stories/avatar.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import * as Avatar from "../component/avatar/ui"
+
+export default {
+  title: "Avatar",
+  tags: ["autodocs"],
+} satisfies Meta<typeof Avatar>
+
+type Story = StoryObj<typeof Avatar>
+
+export const Primary: Story = {
+  args: {},
+  render: () => {
+    return (
+      <Avatar.Root>
+        <Avatar.Image src="https://encrypted-tbn3.gstatic.com/licensed-image?q=tbn:ANd9GcSDvLC5bOMlnrUBoojLDYnfS0S8G6kuUgQfcFq6d60TsnCmfNGimIc4pIgCmTHdnLaIgxGHBcdNeJ6FAoE" />
+      </Avatar.Root>
+    )
+  },
+}
+
+export const Fallback: Story = {
+  args: {},
+  render: () => {
+    return (
+      <Avatar.Root>
+        <Avatar.Image src="" />
+        <Avatar.Fallback>JD</Avatar.Fallback>
+      </Avatar.Root>
+    )
+  },
+}