@jongh/cli 1.1.0 → 1.2.0

package/dist/components/Tabs/Tab.tsx

@@ -1,39 +0,0 @@
-import { forwardRef, useId, type ReactNode, type ForwardedRef } from "react"
-import { useControlledState } from "../../hooks/useControllableState"
-import { Slot } from "@radix-ui/react-slot"
-import { TabProvider } from "./useTabContext"
-
-export type TabProps = {
-  children?: ReactNode
-  selected?: string
-  defaultValue?: string
-  onSelect?: (value: string) => void
-  asChild?: boolean
-}
-
-export const Tab = forwardRef(
-  (
-    { children, selected, defaultValue, onSelect, asChild, ...props }: TabProps,
-    ref: ForwardedRef<HTMLDivElement>,
-  ) => {
-    const Element = asChild ? Slot : "div"
-
-    const [value, setValue] = useControlledState({
-      prop: selected,
-      onChange: onSelect,
-      defaultProp: defaultValue,
-    })
-
-    const onSelectItem = (value: string) => {
-      setValue(value)
-    }
-
-    return (
-      <TabProvider selected={value} onSelect={onSelectItem} tabId={useId()}>
-        <Element ref={ref} {...props}>
-          {children}
-        </Element>
-      </TabProvider>
-    )
-  },
-)

package/dist/components/Tabs/TabContent.tsx

@@ -1,62 +0,0 @@
-import { type ReactNode } from "react"
-import { useTabContext } from "./useTabContext"
-import { motion } from "framer-motion"
-
-export interface TabContentProps {
-  children: ReactNode
-  value: string
-}
-
-const tabContentVariant = {
-  active: {
-    display: "block",
-    transition: {
-      staggerChildren: 0.2,
-    },
-  },
-  inactive: {
-    display: "none",
-  },
-} as const
-
-const cardVariant = {
-  active: {
-    opacity: 1,
-    x: 0,
-    transition: {
-      duration: 0.3,
-    },
-  },
-  inactive: {
-    opacity: 0,
-    x: 10,
-    transition: {
-      duration: 0.3,
-    },
-  },
-}
-
-export const TabContent = ({ children, value, ...props }: TabContentProps) => {
-  const { selected, tabId } = useTabContext("tab")
-
-  const isSelected = selected === value
-
-  return (
-    <motion.div
-      role="tabpanel"
-      tabIndex={0}
-      id={tabId + "-tabpanel-" + value}
-      data-state={isSelected ? "active" : "inactive"}
-      aria-labelledby={tabId + "-tabitem-" + value}
-      key={tabId + "-tabpanel-" + value}
-      variants={tabContentVariant}
-      animate={isSelected ? "active" : "inactive"}
-      initial="inactive"
-      {...props}
-    >
-      <motion.div key={value} variants={cardVariant}>
-        {isSelected && children}
-      </motion.div>
-    </motion.div>
-  )
-}

package/dist/components/Tabs/TabIndicator.tsx

@@ -1,6 +0,0 @@
-import { motion } from "framer-motion"
-
-export interface TabIndicatorProps {}
-export const TabIndicator = ({ ...props }: TabIndicatorProps) => {
-  return <motion.div {...props}></motion.div>
-}

package/dist/components/Tabs/TabList.tsx

@@ -1,117 +0,0 @@
-import {
-  type ReactNode,
-  type ReactElement,
-  type ComponentPropsWithRef,
-  forwardRef,
-} from "react"
-import { useTabContext } from "./useTabContext"
-
-import { RovingTabIndexRoot, useRovingTabIndex } from "../RovingIndex"
-
-import { Slot } from "@radix-ui/react-slot"
-import { composeRefs } from "../../hooks/useComposedRefs"
-import {
-  getNextFocusableId,
-  getPrevFocusableId,
-} from "../../utils/getFocusableId"
-
-export interface TabListProps {
-  children: ReactNode
-  className?: string
-}
-
-const setIndicatorStyle = (target: HTMLElement) => {
-  const targetRect = target.getBoundingClientRect()
-  const parent = target.parentElement //TabList
-  const parentRect = parent?.getBoundingClientRect()
-
-  if (!targetRect || !parentRect || !parent) {
-    return
-  }
-  const scrollLeft = parent.scrollLeft //overflow일때 고려
-
-  const indicatorLeft = targetRect.left - parentRect.left + scrollLeft
-
-  document.documentElement.style.setProperty(
-    "--indicator-left",
-    `${indicatorLeft}px`,
-  )
-  document.documentElement.style.setProperty(
-    "--indicator-width",
-    `${targetRect.width}px`,
-  )
-}
-
-export const TabList = ({ children, ...props }: TabListProps) => {
-  const { selected } = useTabContext("tab")
-  return (
-    <RovingTabIndexRoot active={selected}>
-      <div role="tablist" {...props}>
-        {children}
-      </div>
-    </RovingTabIndexRoot>
-  )
-}
-export interface TabItemProps extends ComponentPropsWithRef<"button"> {
-  value: string
-}
-
-export const RovingItem = ({
-  value,
-  children,
-}: {
-  value: string
-  children: ReactElement
-}) => {
-  const { getOrderedItems, getRovingProps } = useRovingTabIndex(value)
-  return (
-    <Slot
-      {...getRovingProps<"button">({
-        onKeyDown: (e) => {
-          const items = getOrderedItems()
-          let nextItem
-          if (e.key === "ArrowRight") {
-            nextItem = getNextFocusableId(items, value)
-          } else if (e.key === "ArrowLeft") {
-            nextItem = getPrevFocusableId(items, value)
-          }
-          nextItem?.element.focus()
-        },
-      })}
-    >
-      {children}
-    </Slot>
-  )
-}
-
-export const TabItem = forwardRef<HTMLButtonElement, TabItemProps>(
-  ({ children, value, ...props }: TabItemProps, forwardRef) => {
-    const { selected, onSelect, tabId } = useTabContext("tab")
-    const isSelected = selected === value
-
-    const handleSelect = () => {
-      onSelect?.(value)
-    }
-
-    return (
-      <RovingItem value={value}>
-        <button
-          ref={composeRefs((node) => {
-            if (isSelected && node) {
-              setIndicatorStyle(node as HTMLElement)
-            }
-          }, forwardRef)}
-          onClick={handleSelect}
-          onFocus={handleSelect}
-          role="tab"
-          aria-selected={isSelected}
-          id={tabId + "-tabitem-" + value}
-          aria-controls={tabId + "-tabpanel-" + value}
-          {...props}
-        >
-          {children}
-        </button>
-      </RovingItem>
-    )
-  },
-)

package/dist/components/Tabs/index.ts

@@ -1,43 +0,0 @@
-"use client"
-import { Tab, TabProps } from "./Tab"
-import { TabContent, TabContentProps } from "./TabContent"
-import { TabIndicator, TabIndicatorProps } from "./TabIndicator"
-import { TabList, TabListProps } from "./TabList"
-import { TabItem, TabItemProps } from "./TabList"
-import { type TabsVariantProps, tabs } from "styled-system/recipes"
-import type { Assign, HTMLStyledProps } from "styled-system/types"
-import { createStyleContext } from "../../utils/createStyleContext"
-
-const { withProvider, withContext } = createStyleContext(tabs)
-
-const Root = withProvider<
-  HTMLDivElement,
-  Assign<Assign<HTMLStyledProps<"div">, TabProps>, TabsVariantProps>
->(Tab, "root")
-
-const Content = withContext<
-  HTMLDivElement,
-  Assign<HTMLStyledProps<"div">, TabContentProps>
->(TabContent, "content")
-
-const Indicator = withContext<
-  HTMLDivElement,
-  Assign<HTMLStyledProps<"div">, TabIndicatorProps>
->(TabIndicator, "indicator")
-
-const List = withContext<
-  HTMLDivElement,
-  Assign<HTMLStyledProps<"div">, TabListProps>
->(TabList, "list")
-
-const Item = withContext<
-  HTMLButtonElement,
-  Assign<HTMLStyledProps<"button">, TabItemProps>
->(TabItem, "item")
-
-export const Tabs = Object.assign(Root, {
-  Content,
-  List,
-  Item,
-  Indicator,
-})

package/dist/components/Tabs/useRovingTabIndex.tsx

@@ -1,171 +0,0 @@
-import isHotkey from "is-hotkey"
-import {
-  ReactNode,
-  useCallback,
-  useRef,
-  useState,
-  FocusEvent,
-  MouseEvent,
-  KeyboardEvent,
-  ComponentPropsWithoutRef,
-  ElementType,
-  MutableRefObject,
-} from "react"
-import { useControlledState } from "../../hooks/useControllableState"
-import { createContext } from "../../hooks/createContext"
-import { composeRefs } from "../../hooks/useComposedRefs"
-
-export type RovingTabIndexItem = {
-  value: string
-  element: HTMLElement
-}
-
-function onFocusFirst(candidates: HTMLElement[]) {
-  const previousFocus = document.activeElement
-  while (document.activeElement === previousFocus && candidates.length > 0) {
-    candidates.shift()?.focus()
-  }
-}
-
-type RovingTabIndexContext = {
-  currentFocusedValue: string | null
-  setFocusableId: (id: string) => void
-  onShiftTab: () => void
-  getOrderedItems: () => RovingTabIndexItem[]
-  elements: MutableRefObject<Map<string, HTMLElement>>
-}
-
-const [RovingTabIndexProvider, useRovingTabIndexContext] =
-  createContext<RovingTabIndexContext>("rovingTabIndex")
-
-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<T> = {
-  children: ReactNode | ReactNode[]
-  active?: string
-  setActive?: (value: string) => void
-  as?: T
-}
-
-type RovingTabIndexRootProps<T extends ElementType> =
-  RovingTabIndexRootBaseProps<T> &
-    Omit<ComponentPropsWithoutRef<T>, keyof RovingTabIndexRootBaseProps<T>>
-
-export const RovingTabIndexRoot = <T extends ElementType>({
-  children,
-  active,
-  setActive,
-  as,
-  ref,
-  ...props
-}: RovingTabIndexRootProps<T>) => {
-  const Component = as || "div"
-  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}
-    >
-      <Component
-        {...{ [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={composeRefs(ref, rootRef)}
-        {...props}
-      >
-        {children}
-      </Component>
-    </RovingTabIndexProvider>
-  )
-}
-
-export const useRovingTabIndex = (value: string) => {
-  const {
-    currentFocusedValue,
-    setFocusableId,
-    onShiftTab,
-    getOrderedItems,
-    elements,
-  } = useRovingTabIndexContext("rovingTabIndex")
-
-  return {
-    getOrderedItems,
-    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 (isHotkey("shift+tab", e)) {
-          onShiftTab()
-          return
-        }
-      },
-      onFocus: (e: FocusEvent) => {
-        props?.onFocus?.(e)
-        if (e.target !== e.currentTarget) return
-        setFocusableId(value)
-      },
-      [NODE_SELECTOR]: true,
-      tabIndex: currentFocusedValue === value ? 0 : -1,
-    }),
-  }
-}

package/dist/components/Tabs/useTabContext.ts

@@ -1,11 +0,0 @@
-import { createContext } from "../../hooks/createContext"
-
-type Value = string
-
-export interface TabContext {
-  selected?: Value
-  onSelect?: (index: Value) => void
-  tabId: string
-}
-
-export const [TabProvider, useTabContext] = createContext<TabContext>("tab")

package/dist/components/TagButton/TagButton.tsx

@@ -1,75 +0,0 @@
-// import { cx } from "@styled-system/css"
-// // import { tagButton, type TagButtonVariant } from "@styled-system/recipes"
-// import { forwardRef } from "react"
-// import { useControlledState } from "../../hooks/useControllableState"
-
-// type TagButtonProps = Partial<TagButtonVariant> & {
-//   /** 버튼 내부에 표시될 텍스트 */
-//   children: string
-
-//   /** 버튼의 비활성화 여부를 지정합니다. true일 경우 버튼이 비활성화됩니다. */
-//   disabled?: boolean
-
-//   /** 버튼에 적용할 추가적인 CSS 클래스명 */
-//   className?: string
-
-//   /** 버튼의 고유 식별자 */
-//   id?: string
-
-//   /**
-//    * 버튼 클릭 시 실행될 함수
-//    * @param e 선택적 boolean 매개변수
-//    */
-//   onClick?: (e?: boolean) => void
-
-//   /** 버튼의 클릭 상태를 나타냅니다. true일 경우 클릭된 상태를 의미합니다. */
-//   isClicked?: boolean
-
-//   /** 버튼의 초기 클릭 상태를 설정합니다. true일 경우 처음부터 클릭된 상태로 시작합니다. */
-//   defaultClick?: boolean
-// }
-
-// export const TagButton = forwardRef<HTMLSpanElement, TagButtonProps>(
-//   (
-//     {
-//       children,
-//       disabled = false,
-//       className,
-//       id,
-//       onClick,
-//       isClicked,
-//       defaultClick = false,
-//       ...rest
-//     },
-//     ref,
-//   ) => {
-//     const [clicked, setClicked] = useControlledState({
-//       prop: isClicked,
-//       defaultProp: defaultClick,
-//       onChange: onClick,
-//     })
-//     //
-//     return (
-//       <span
-//         role="button"
-//         ref={ref}
-//         id={id}
-//         className={cx(tagButton({ ...rest }), className)}
-//         aria-disabled={disabled}
-//         aria-pressed={clicked}
-//         {...(disabled && { "data-invalid": "true" })}
-//         data-testid={id}
-//         onClick={() => {
-//           if (disabled) {
-//             return
-//           }
-//           setClicked((prev) => !prev)
-//         }}
-//       >
-//         {children}
-//       </span>
-//     )
-//   },
-// )
-
-// TagButton.displayName = "TagButton"

package/dist/components/TagButton/style.ts

@@ -1,35 +0,0 @@
-import { define } from "../../../dev"
-export const tagButtonRecipe = define.recipe({
-  className: "tagButton",
-  base: {
-    textAlign: "center",
-    borderRadius: "rounded",
-    padding: "4px 10px",
-    fontWeight: "normal",
-    cursor: "pointer",
-    border: "1px solid black",
-    color: "text_primary",
-    _hover: { boxShadow: "0px 0px 3px", boxShadowColor: "grey_300" },
-    _invalid: {
-      cursor: "not-allowed",
-    },
-    _pressed: {
-      borderWidth: "2px",
-      borderColor: "blue_300",
-    },
-    maxWidth: "screen",
-  },
-  variants: {
-    size: {
-      small: {
-        fontSize: "sm",
-      },
-      large: {
-        fontSize: "lg",
-      },
-    },
-  },
-  defaultVariants: {
-    size: "small",
-  },
-})

package/dist/components/core/Polymorphic/index.ts

@@ -1,26 +0,0 @@
-// polymorphic.d.ts
-import {
-  type ComponentPropsWithRef,
-  type ComponentPropsWithoutRef,
-  type ElementType,
-} from "react"
-
-type AsProp<C extends ElementType> = {
-  as?: C
-}
-
-export type AsRef<C extends ElementType> = ComponentPropsWithRef<C>["ref"]
-
-export type AsComponentProps<
-  C extends ElementType,
-  Props = object,
-> = AsProp<C> &
-  ComponentPropsWithoutRef<C> &
-  Props & {
-    ref?: AsRef<C>
-  }
-
-export type AsComponentPropsWithRef<
-  C extends ElementType,
-  Props = object,
-> = Props & { ref?: AsRef<C> }

package/dist/components/index.ts

@@ -1,5 +0,0 @@
-export * from "./Button"
-export * from "./Accordion"
-export * from "./Tabs"
-export * from "./Slider"
-export * from "./Select"

package/dist/index.d.ts

@@ -1 +0,0 @@
-#!/usr/bin/env node

package/src/copyComponent.ts

@@ -1,29 +0,0 @@
-// src/copy-components.ts
-import path from "node:path"
-import fs from "fs-extra"
-import { fileURLToPath } from "node:url"
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url))
-
-const COMPONENTS_DIR = path.join(__dirname, "./components/Button/index.tsx")
-
-export async function copyComponent(componentName: string, outputPath: string) {
-  try {
-    // 1. 우리 패키지 안의 컴포넌트 경로
-    const sourceFile = COMPONENTS_DIR
-
-    // 2. 유저 프로젝트의 목적지 경로 (CLI 실행 위치 기준)
-    const targetFile = path.join(
-      process.cwd(),
-      outputPath,
-      `${componentName}.tsx`,
-    )
-
-    // 3. 복사 실행
-    await fs.copy(sourceFile, targetFile)
-
-    console.log(`${componentName} copied to ${outputPath}`)
-  } catch (error) {
-    throw new Error(`Failed to copy component: ${error}`)
-  }
-}

package/src/getConfig.ts

@@ -1,56 +0,0 @@
-import path from "node:path"
-import fs from "fs-extra"
-import { packageDirectory } from "pkg-dir"
-import * as p from "@clack/prompts"
-//TODO: json schema 제공
-
-const initialPath = "./src/components/ui"
-const jsonFileName = "component.json"
-
-export async function getConfig(): Promise<{ outputPath: string }> {
-  const packageDir = await packageDirectory()
-  const configPath = path.join(packageDir || process.cwd(), jsonFileName)
-  try {
-    // 1. 프로젝트 루트 디렉토리 찾기
-
-    // 2. 설정 파일 읽기 시도
-    const config = await fs.readJSON(configPath)
-    return config
-  } catch {
-    p.note("설정 파일이 존재하지 않습니다")
-    const config = await promptConfig() //3. 사용자에게 경로 관련 입력 받기
-
-    // 4. 새 설정 파일 저장
-    await fs.outputJSON(
-      configPath,
-      {
-        ...config,
-      },
-      { spaces: 2 },
-    )
-
-    return config
-  }
-}
-
-const promptConfig = async () =>
-  p.group(
-    {
-      outputPath: () =>
-        p.text({
-          message: "컴포넌트 저장 경로를 설정해주세요",
-          initialValue: initialPath,
-          validate: (value) => {
-            if (!value) return "Please enter a path."
-            if (!value.startsWith("."))
-              return "Please enter a relative path to the project root."
-          },
-        }),
-    },
-    {
-      onCancel: () => {
-        p.cancel("Operation cancelled.")
-        process.exit(0)
-      },
-    },
-  )