@jongh/ui 1.6.5

package/src/stories/button.stories.tsx

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

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

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

package/src/stories/select.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import * as Select from "../component/select/ui"
+
+export default {
+  title: "Select",
+  tags: ["autodocs"],
+} satisfies Meta<typeof Select>
+
+type Story = StoryObj<typeof Select>
+
+const arr = Array.from({ length: 100 }, (_, i) => i)
+//부모 요소의 width 고정값 or Trigger의 width 고정값 필요
+export const Primary: Story = {
+  render: () => {
+    return (
+      <div style={{ width: "300px" }}>
+        <Select.Root>
+          <Select.Trigger>
+            <Select.Value placeholder="Select a frui" />
+          </Select.Trigger>
+          <Select.Content>
+            <Select.Group>
+              {arr.map((num) => (
+                <Select.Item key={num} value={num.toString()}>
+                  {num}
+                </Select.Item>
+              ))}
+            </Select.Group>
+          </Select.Content>
+        </Select.Root>
+      </div>
+    )
+  },
+}

package/src/stories/slider.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { css } from "@styled-system/css"
+
+import * as Slider from "../component/slider/ui"
+
+export default {
+  title: "Slider",
+  tags: ["autodocs"],
+} satisfies Meta<typeof Slider>
+
+type Story = StoryObj<typeof Slider>
+
+export const Primary: Story = {
+  render: () => {
+    return (
+      <Slider.Root
+        defaultValue={[50, 100]}
+        max={100}
+        step={2}
+        className={css({
+          width: "[100px]",
+        })}
+      >
+        <Slider.Track>
+          <Slider.Range />
+        </Slider.Track>
+        <Slider.Thumb />
+      </Slider.Root>
+    )
+  },
+}

package/src/stories/tabs.stories.tsx

@@ -0,0 +1,63 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { useState } from "@storybook/preview-api"
+import type { Meta, StoryObj } from "@storybook/react"
+
+import * as Tabs from "../component/tabs/ui"
+
+const meta = {
+  title: "Tabs",
+  tags: ["autodocs"],
+} satisfies Meta<typeof Tabs>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const data = [
+  { value: "1", label: "Tab 1", content: "1번" },
+  { value: "2", label: "Tab 2", content: "2번" },
+  { value: "3", label: "Tab 3", content: "3번" },
+]
+
+export const Primary: Story = {
+  render: (args) => {
+    return (
+      <Tabs.Root {...args}>
+        <Tabs.List>
+          {data.map((item) => (
+            <Tabs.Trigger key={item.value} value={item.value}>
+              {item.label}
+            </Tabs.Trigger>
+          ))}
+        </Tabs.List>
+        {data.map((item) => (
+          <Tabs.Content key={item.value} value={item.value}>
+            {item.content}
+          </Tabs.Content>
+        ))}
+      </Tabs.Root>
+    )
+  },
+}
+
+// 제어 컴포넌트 예시
+export const Controlled: Story = {
+  render: (args) => {
+    const [value, setValue] = useState("2")
+    return (
+      <Tabs.Root value={value} onValueChange={setValue} {...args}>
+        <Tabs.List>
+          {data.map((item) => (
+            <Tabs.Trigger key={item.value} value={item.value}>
+              {item.label}
+            </Tabs.Trigger>
+          ))}
+        </Tabs.List>
+        {data.map((item) => (
+          <Tabs.Content key={item.value} value={item.value}>
+            {item.content}
+          </Tabs.Content>
+        ))}
+      </Tabs.Root>
+    )
+  },
+}

package/src/test/accordion.test.tsx

@@ -0,0 +1,66 @@
+import { fireEvent, render, screen } from "@testing-library/react"
+import { useState } from "react"
+import { describe, expect, it, vi } from "vitest"
+
+import * as Accordion from "../component/accordion/ui"
+
+// 예시 컴포넌트
+const AccordionExample = () => {
+  const [selectedItems, setSelectedItems] = useState<string[]>([])
+
+  return (
+    <Accordion.Root
+      type="multiple"
+      value={selectedItems}
+      onValueChange={(items) => setSelectedItems(items)}
+    >
+      <Accordion.Item value="1">
+        <Accordion.Header>
+          <Accordion.Trigger data-testid="1">1번</Accordion.Trigger>
+        </Accordion.Header>
+        <Accordion.Content>내용1</Accordion.Content>
+      </Accordion.Item>
+    </Accordion.Root>
+  )
+}
+
+// 테스트
+describe("Accordion with useState", () => {
+  it("상태 변경 테스트", async () => {
+    render(<AccordionExample />)
+
+    // 초기 상태 확인
+    expect(screen.queryByText("내용1")).toBeDefined()
+
+    // 트리거 클릭
+    const trigger = screen.getByTestId("1")
+    await fireEvent.click(trigger)
+
+    // 상태 변경 후 내용 표시 확인
+    expect(screen.getByText("내용1")).toBeDefined()
+  })
+
+  // 외부에서 상태를 제어하는 경우 테스트
+  it("외부 상태 제어 테스트", () => {
+    const onValueChange = vi.fn()
+
+    render(
+      <Accordion.Root
+        type="multiple"
+        value={["1"]}
+        onValueChange={onValueChange}
+      >
+        <Accordion.Item value="1">
+          <Accordion.Trigger data-testid="trigger-1">1번</Accordion.Trigger>
+          <Accordion.Content>내용1</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    )
+    //Fix: getByText로 찾을 시 multiple error 발생
+    const trigger = screen.getByTestId("trigger-1")
+
+    fireEvent.click(trigger)
+
+    expect(onValueChange).toHaveBeenCalledWith([])
+  })
+})

package/src/test/tabs.test.tsx

@@ -0,0 +1,30 @@
+import { composeStories } from "@storybook/react"
+import { screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { expect, test } from "vitest"
+
+import * as stories from "../stories/tabs.stories"
+
+const { Primary } = composeStories(stories)
+
+test("초기 렌더링 시 defaultValue가 존재하면 해당되는 탭이 선택됩니다", async () => {
+  await Primary.run({ args: { ...Primary.args } })
+  expect(screen.getByText("Tab 1")).toBeDefined()
+})
+
+test("클릭 시 해당 tab에 대한 content가 노출됩니다", async () => {
+  const user = userEvent.setup()
+  await Primary.run({ args: { ...Primary.args } })
+  await user.click(screen.getByText("Tab 2"))
+  expect(screen.getByText("2번")).toBeDefined()
+})
+
+test("arrow key를 통해 탭을 조작할 수 있습니다", async () => {
+  const user = userEvent.setup()
+  await Primary.run()
+
+  await user.click(screen.getByText("Tab 2"))
+  await user.keyboard("{ArrowLeft}")
+
+  expect(document.activeElement).toBe(screen.getByText("Tab 1"))
+})

package/src/types/index.ts

@@ -0,0 +1 @@
+export type Assign<T, U> = Omit<T, keyof U> & U

package/src/utils/createStyleContext.tsx

@@ -0,0 +1,108 @@
+import {
+  createContext,
+  type ElementType,
+  forwardRef,
+  type ForwardRefExoticComponent,
+  type PropsWithoutRef,
+  type RefAttributes,
+  useContext,
+} from "react"
+import { cx } from "styled-system/css"
+import { isCssProperty, styled, type StyledComponent } from "styled-system/jsx"
+
+type Props = Record<string, unknown>
+type Recipe = {
+  (props?: Props): Props
+  splitVariantProps: (props: Props) => [Props, Props]
+}
+type Slot<R extends Recipe> = keyof ReturnType<R>
+type Options = { forwardProps?: string[] }
+
+const shouldForwardProp = (
+  prop: string,
+  variantKeys: string[],
+  options: Options = {},
+) =>
+  options.forwardProps?.includes(prop) ||
+  (!variantKeys.includes(prop) && !isCssProperty(prop))
+
+export const createStyleContext = <R extends Recipe>(recipe: R) => {
+  const StyleContext = createContext<Record<Slot<R>, string> | null>(null)
+
+  const withRootProvider = (Component: ElementType) => {
+    const StyledComponent = (props: Props) => {
+      const [variantProps, otherProps] = recipe.splitVariantProps(props)
+      const slotStyles = recipe(variantProps) as Record<Slot<R>, string>
+
+      return (
+        <StyleContext.Provider value={slotStyles}>
+          <Component {...otherProps} />
+        </StyleContext.Provider>
+      )
+    }
+    return StyledComponent
+  }
+
+  const withProvider = <T, P extends { className?: string | undefined }>(
+    Component: ElementType,
+    slot: Slot<R>,
+    options?: Options,
+  ): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>> => {
+    const StyledComponent = styled(
+      Component,
+      {},
+      {
+        shouldForwardProp: (prop, variantKeys) =>
+          shouldForwardProp(prop, variantKeys, options),
+      },
+    ) as StyledComponent<ElementType>
+    const StyledSlotProvider = forwardRef<T, P>((props, ref) => {
+      const [variantProps, otherProps] = recipe.splitVariantProps(props)
+      const slotStyles = recipe(variantProps) as Record<Slot<R>, string>
+
+      return (
+        <StyleContext.Provider value={slotStyles}>
+          <StyledComponent
+            {...otherProps}
+            ref={ref}
+            className={cx(slotStyles?.[slot], props.className)}
+          />
+        </StyleContext.Provider>
+      )
+    })
+    // @ts-expect-error '''
+    StyledSlotProvider.displayName = Component.displayName || Component.name
+
+    return StyledSlotProvider
+  }
+
+  const withContext = <T, P extends { className?: string | undefined }>(
+    Component: ElementType,
+    slot: Slot<R>,
+  ): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>> => {
+    const StyledComponent = styled(Component)
+    const StyledSlotComponent = forwardRef<T, P>((props, ref) => {
+      const slotStyles = useContext(StyleContext)
+      return (
+        <StyledComponent
+          {...props}
+          ref={ref}
+          className={cx(slotStyles?.[slot], props.className)}
+        />
+      )
+    })
+
+    StyledSlotComponent.displayName =
+      typeof Component === "function"
+        ? Component.displayName || Component.name
+        : String(Component)
+
+    return StyledSlotComponent
+  }
+
+  return {
+    withRootProvider,
+    withProvider,
+    withContext,
+  }
+}

package/src/utils/defineSafe.ts

@@ -0,0 +1,46 @@
+import {
+  RecipeConfig,
+  SlotRecipeConfig,
+  SystemStyleObject,
+  TextStyles,
+} from "@pandacss/dev"
+import {
+  RecipeConfig as CodegenRecipeConfig,
+  RecipeVariantRecord,
+  SlotRecipeConfig as CodegenSlotRecipeConfig,
+  SlotRecipeVariantRecord,
+  SystemStyleObject as CodegenSystemStyleObject,
+} from "@styled-system/types"
+import { TextStyle } from "@styled-system/types/composition"
+
+function defineSafeRecipe<T extends RecipeVariantRecord>(
+  config: CodegenRecipeConfig<T>,
+): RecipeConfig {
+  return config as RecipeConfig
+}
+
+function defineSafeSlotRecipe<
+  S extends string,
+  T extends SlotRecipeVariantRecord<S>,
+>(config: CodegenSlotRecipeConfig<S, T>): SlotRecipeConfig {
+  return config as SlotRecipeConfig
+}
+
+interface Token<T> {
+  value: T
+  description?: string
+}
+
+interface Recursive<T> {
+  // @ts-expect-error this makes the textStyles typings happy
+  value?: T
+  [key: string]: Recursive<T> | T
+}
+
+export const defineSafe = {
+  recipe: defineSafeRecipe,
+  slotRecipe: defineSafeSlotRecipe,
+  textStyle: (definition: TextStyle) => definition,
+  styles: (styles: CodegenSystemStyleObject) => styles as SystemStyleObject,
+  textStyles: (defs: Recursive<Token<TextStyle>>) => defs as TextStyles,
+}

package/src/utils/getObjectKeys.ts

@@ -0,0 +1,20 @@
+export type ObjectKeys<T extends Record<PropertyKey, unknown>> =
+  `${Exclude<keyof T, symbol>}`
+
+export function objectKeys<T extends Record<PropertyKey, unknown>>(
+  obj: T,
+): Array<ObjectKeys<T>> {
+  return Object.keys(obj) as Array<ObjectKeys<T>>
+}
+
+export function objectValues<T extends Record<PropertyKey, unknown>>(
+  obj: T,
+): Array<T[ObjectKeys<T>]> {
+  return Object.values(obj) as Array<T[ObjectKeys<T>]>
+}
+
+export function objectEntries<T extends Record<PropertyKey, unknown>>(
+  obj: T,
+): Array<[ObjectKeys<T>, T[ObjectKeys<T>]]> {
+  return Object.entries(obj) as Array<[ObjectKeys<T>, T[ObjectKeys<T>]]>
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />