@jongh/ui 1.6.5 → 2.20260905.1

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

@@ -1,61 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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

@@ -1,34 +0,0 @@
-/* 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

@@ -1,20 +0,0 @@
-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

@@ -1,87 +0,0 @@
-/* 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

@@ -1,58 +0,0 @@
-/* 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

@@ -1,63 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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>
-    )
-  },
-}

package/src/stories/button.stories.tsx

@@ -1,53 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { expect, fn, userEvent, within } from "@storybook/test"
-import type { ComponentProps } from "react"
-
-import { Button } from "../component/button/ui"
-export default {
-  title: "Button",
-  tags: ["autodocs"],
-  component: Button,
-} as Meta<typeof Button>
-
-type Story = StoryObj<ComponentProps<typeof Button>>
-
-export const Primary: Story = {
-  args: {
-    children: "click",
-    onClick: fn(),
-  },
-  play: async ({ args, canvasElement }) => {
-    const canvas = within(canvasElement)
-    const button = canvas.getByRole("button")
-    await userEvent.click(button)
-    await expect(args.onClick).toHaveBeenCalled()
-  },
-}
-
-export const Secondary: Story = {
-  args: {
-    children: "click",
-    variant: "secondary",
-  },
-}
-
-export const Ghost: Story = {
-  args: {
-    children: "click",
-    variant: "outline",
-  },
-}
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-    children: "disabled",
-    onClick: fn(),
-  },
-  play: async ({ args, canvasElement }) => {
-    const canvas = within(canvasElement)
-    const button = canvas.getByRole("button")
-    await userEvent.click(button)
-    await expect(args.onClick).not.toHaveBeenCalled()
-  },
-}

package/src/stories/chip.stories.tsx

@@ -1,69 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { expect, fn, userEvent } from "@storybook/test"
-import { PlusCircleIcon } from "lucide-react"
-import { ComponentProps } from "react"
-
-import { Chip } from "../component/chip/ui"
-
-export default {
-  title: "Chip",
-  tags: ["autodocs"],
-  component: Chip,
-} as Meta<typeof Chip>
-
-type Story = StoryObj<ComponentProps<typeof Chip>>
-
-export const Primary: Story = {
-  args: {
-    children: <div>확인</div>,
-  },
-}
-
-export const Outlined: Story = {
-  args: {
-    children: <div>확인</div>,
-    variant: "outlined",
-  },
-}
-
-export const IconOnly: Story = {
-  args: {
-    layout: "iconOnly",
-    children: <PlusCircleIcon />,
-  },
-}
-
-export const WithPrefixIcon: Story = {
-  args: {
-    children: (
-      <>
-        <PlusCircleIcon />
-        ㅎㅇ
-      </>
-    ),
-  },
-}
-
-export const WithSuffixIcon: Story = {
-  args: {
-    children: (
-      <>
-        ㅎㅇ
-        <PlusCircleIcon />
-      </>
-    ),
-  },
-}
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-    children: "disabled",
-    onClick: fn(),
-  },
-  play: async ({ args, canvas }) => {
-    const button = canvas.getByRole("button")
-    await userEvent.click(button)
-    await expect(args.onClick).not.toHaveBeenCalled()
-  },
-}

package/src/stories/dialog.stories.tsx

@@ -1,134 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import {
-  expect,
-  screen,
-  userEvent,
-  waitForElementToBeRemoved,
-  within,
-} from "@storybook/test"
-import { css } from "@styled-system/css"
-
-import * as Dialog from "../component/dialog/ui"
-
-const meta = {
-  title: "Dialog",
-  tags: ["autodocs"],
-} satisfies Meta<typeof Dialog>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Primary: Story = {
-  render: () => {
-    return (
-      <Dialog.Root>
-        <Dialog.Trigger>Open</Dialog.Trigger>
-        <Dialog.Content>
-          <Dialog.Header>
-            <Dialog.Title>Dialog</Dialog.Title>
-            <Dialog.Description>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
-              venenatis feugiat eros aliquam convallis. Donec tincidunt eros sed
-              ligula tincidunt, sit amet tristique purus pulvinar. Donec maximus
-              nunc vitae vestibulum cursus. Phasellus laoreet, velit non mollis
-              semper, nunc dui accumsan orci, consequat accumsan libero quam ac
-              est. Pellentesque habitant morbi tristique senectus et netus et
-              malesuada fames ac turpis egestas. Phasellus ac turpis neque.
-              Class aptent taciti sociosqu ad litora torquent per conubia
-              nostra, per inceptos himenaeos.
-            </Dialog.Description>
-          </Dialog.Header>
-        </Dialog.Content>
-      </Dialog.Root>
-    )
-  },
-  play: async ({ canvasElement }) => {
-    //canvasElement -> storybook의 #storybook-root
-    //React portal API를 사용할 경우 다른곳에 렌더링
-    //더 넓은 범위의 screen으로 테스트하는게 더 올바른 방법이라고 생각
-    const canvas = within(canvasElement)
-    const ButtonElement = canvas.getByRole("button")
-    await userEvent.click(ButtonElement)
-    const CloseElement = screen.getByText("Close")
-    expect(CloseElement).not.toBeNull()
-
-    await userEvent.click(CloseElement)
-
-    waitForElementToBeRemoved(CloseElement).then(() =>
-      expect(CloseElement).not.toBeInTheDocument(),
-    )
-  },
-}
-
-export const LongText: Story = {
-  render: () => {
-    return (
-      <Dialog.Root>
-        <Dialog.Trigger
-          className={css({
-            textStyle: "6xl",
-          })}
-        >
-          Open
-        </Dialog.Trigger>
-        <Dialog.Content
-          className={css({
-            bg: "cyan.600",
-          })}
-        >
-          <Dialog.Header>
-            <Dialog.Title
-              className={css({
-                color: "red.100",
-              })}
-            >
-              Dialog
-            </Dialog.Title>
-            <Dialog.Description
-              className={css({
-                fontSize: "sm",
-              })}
-            >
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
-              venenatis feugiat eros aliquam convallis. Donec tincidunt eros sed
-              ligula tincidunt, sit amet tristique purus pulvinar. Donec maximus
-              nunc vitae vestibulum cursus. Phasellus laoreet, velit non mollis
-              semper, nunc dui accumsan orci, consequat accumsan libero quam ac
-              est. Pellentesque habitant morbi tristique senectus et netus et
-              malesuada fames ac turpis egestas. Phasellus ac turpis neque.
-              Class aptent taciti sociosqu ad litora torquent per conubia
-              nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet,
-              consectetur adipiscing elit. Integer venenatis feugiat eros
-              aliquam convallis. Donec tincidunt eros sed ligula tincidunt, sit
-              amet tristique purus pulvinar. Donec maximus nunc vitae vestibulum
-              cursus. Phasellus laoreet, velit non mollis semper, nunc dui
-              accumsan orci, consequat accumsan libero quam ac est. Pellentesque
-              habitant morbi tristique senectus et netus et malesuada fames ac
-              turpis egestas. Phasellus ac turpis neque. Class aptent taciti
-              sociosqu ad litora torquent per conubia nostra, per inceptos
-              himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing
-              elit. Integer venenatis feugiat eros aliquam convallis. Donec
-              tincidunt eros sed ligula tincidunt, sit amet tristique purus
-              pulvinar. Donec maximus nunc vitae vestibulum cursus. Phasellus
-              laoreet, velit non mollis semper, nunc dui accumsan orci,
-              consequat accumsan libero quam ac est. Pellentesque habitant morbi
-              tristique senectus et netus et malesuada fames ac turpis egestas.
-              Phasellus ac turpis neque. Class aptent taciti sociosqu ad litora
-              torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum
-              dolor sit amet, consectetur adipiscing elit. Integer venenatis
-              feugiat eros aliquam convallis. Donec tincidunt eros sed ligula
-              tincidunt, sit amet tristique purus pulvinar. Donec maximus nunc
-              vitae vestibulum cursus. Phasellus laoreet, velit non mollis
-              semper, nunc dui accumsan orci, consequat accumsan libero quam ac
-              est. Pellentesque habitant morbi tristique senectus et netus et
-              malesuada fames ac turpis egestas. Phasellus ac turpis neque.
-              Class aptent taciti sociosqu ad litora torquent per conubia
-              nostra, per inceptos himenaeos.
-            </Dialog.Description>
-          </Dialog.Header>
-        </Dialog.Content>
-      </Dialog.Root>
-    )
-  },
-}