@jongh/cli 1.0.0

package/dist/components/Tab/Tab.tsx

@@ -0,0 +1,35 @@
+import { forwardRef, useId, type ReactNode } from "react"
+import { useControlledState } from "../../hooks/useControllableState"
+import { Slot } from "@radix-ui/react-slot"
+import { TabProvider } from "./useTabContext"
+
+export interface TabProps {
+  children: ReactNode
+  selected?: string
+  defaultValue?: string
+  onSelect?: (value: string) => void
+  asChild?: boolean
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const Tab = forwardRef<any, TabProps>(
+  ({ children, selected, defaultValue, onSelect, asChild }, ref) => {
+    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}>{children}</Element>
+      </TabProvider>
+    )
+  },
+)

package/dist/components/Tab/TabContent.tsx

@@ -0,0 +1,60 @@
+import { type ReactNode } from "react"
+import { useTabContext } from "./useTabContext"
+import { motion } from "framer-motion"
+
+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 }: 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"
+    >
+      <motion.div key={value} variants={cardVariant}>
+        {isSelected && children}
+      </motion.div>
+    </motion.div>
+  )
+}

package/dist/components/Tab/TabIndicator.tsx

@@ -0,0 +1,19 @@
+import { css } from "@styled-system/css"
+import { motion } from "framer-motion"
+
+export const TabIndicator = () => {
+  return (
+    <motion.div
+      className={css({
+        width: "var(--indicator-width)",
+        height: "2px",
+        transform: "translateZ(0px)",
+        position: "absolute",
+        bottom: 0,
+        left: `var(--indicator-left)`,
+        background: "red_300",
+        borderRadius: "rounded",
+      })}
+    ></motion.div>
+  )
+}

package/dist/components/Tab/TabList.tsx

@@ -0,0 +1,118 @@
+import {
+  type ReactNode,
+  type ReactElement,
+  type ComponentPropsWithRef,
+  forwardRef,
+} from "react"
+import { useTabContext } from "./useTabContext"
+
+import { css, cx } from "@styled-system/css"
+import { RovingTabIndexRoot, useRovingTabIndex } from "./useRovingTabIndex"
+import isHotkey from "is-hotkey"
+import { Slot } from "@radix-ui/react-slot"
+import { composeRefs } from "../../hooks/useComposedRefs"
+import {
+  getNextFocusableId,
+  getPrevFocusableId,
+} from "../../utils/getFocusableId"
+
+interface TabListProps {
+  children: ReactNode
+  className?: string
+}
+
+const setIndicatorStyle = (target: HTMLElement) => {
+  const targetRect = target.getBoundingClientRect()
+  const parentRect = target.parentElement?.getBoundingClientRect()
+  if (!targetRect || !parentRect) {
+    return
+  }
+  document.documentElement.style.setProperty(
+    "--indicator-left",
+    `${Math.abs(parentRect.left - targetRect.left)}px`,
+  )
+  document.documentElement.style.setProperty(
+    "--indicator-width",
+    `${Math.abs(targetRect.width)}px`,
+  )
+}
+
+export const TabList = ({ children, className }: TabListProps) => {
+  const { selected } = useTabContext("tab")
+  return (
+    <RovingTabIndexRoot as="div" active={selected}>
+      <div
+        role="tablist"
+        className={cx(
+          className,
+          css({ position: "relative", display: "flex" }),
+        )}
+      >
+        {children}
+      </div>
+    </RovingTabIndexRoot>
+  )
+}
+type TabItemProps = 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 (isHotkey("right", e)) {
+            nextItem = getNextFocusableId(items, value)
+          } else if (isHotkey("left", e)) {
+            nextItem = getPrevFocusableId(items, value)
+          }
+          nextItem?.element.focus()
+        },
+      })}
+    >
+      {children}
+    </Slot>
+  )
+}
+
+export const TabItem = forwardRef<HTMLButtonElement, TabItemProps>(
+  ({ children, className, 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/Tab/index.ts

@@ -0,0 +1,4 @@
+export * from "./Tab"
+export * from "./TabList"
+export * from "./TabContent"
+export * from "./TabIndicator"

package/dist/components/Tab/style.ts

@@ -0,0 +1,9 @@
+import { define } from "../../../dev"
+
+export const tabRecipe = define.recipe({
+  className: "tab",
+  base: {
+    display: "flex",
+    flexDirection: "row",
+  },
+})

package/dist/components/Tab/useRovingTabIndex.tsx

@@ -0,0 +1,172 @@
+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) => {
+          console.log("parent focus")
+          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/Tab/useTabContext.ts

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

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

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

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

@@ -0,0 +1,5 @@
+export * from "./Button"
+// export * from "./TagButton/TagButton"
+export * from "./Accordion"
+// export * from "./Tab/index"
+// export * from "./Slider/Slider"

package/dist/index.d.mts

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

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+"use strict";var w=Object.create;var p=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var O=(o,t,n,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of x(t))!j.call(o,a)&&a!==n&&p(o,a,{get:()=>t[a],enumerable:!(i=C(t,a))||i.enumerable});return o};var r=(o,t,n)=>(n=o!=null?w(P(o)):{},O(t||!o||!o.__esModule?p(n,"default",{value:o,enumerable:!0}):n,o));var g=r(require("yargs")),y=require("yargs/helpers");var m=r(require("path")),c=r(require("fs-extra")),l=require("pkg-dir"),e=r(require("@clack/prompts"));async function f(){let o=(0,l.packageDirectorySync)()||process.cwd(),t=m.default.join(o,"park-ui.json");try{return await c.default.readJSON(t)}catch{e.note("\uC124\uC815 \uD30C\uC77C\uC774 \uC874\uC7AC\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4");let n=await b();return await c.default.outputJSON(t,{...n},{spaces:2}),n}}var b=async()=>e.group({outputPath:()=>e.text({message:"\uCEF4\uD3EC\uB10C\uD2B8 \uC800\uC7A5 \uACBD\uB85C\uB97C \uC124\uC815\uD574\uC8FC\uC138\uC694",initialValue:"./src/components/ui",validate:o=>{if(!o)return"Please enter a path.";if(!o.startsWith("."))return"Please enter a relative path to the project root."}})},{onCancel:()=>{e.cancel("Operation cancelled."),process.exit(0)}});var h=r(require("@clack/prompts"));var s=r(require("path")),d=r(require("fs-extra")),S=s.default.join(__dirname,"./components/Button/index.tsx");async function u(o,t){try{let n=S,i=s.default.join(process.cwd(),t,`${o}.tsx`);await d.default.copy(n,i),console.log(`${o} copied to ${t}`)}catch(n){throw new Error(`Failed to copy component: ${n}`)}}var $=async()=>{await(0,g.default)((0,y.hideBin)(process.argv)).command("components add [components..]","Add components to your project",o=>o.positional("components",{describe:"List of components to add",type:"string",array:!0,default:[]}).option("all",{type:"boolean",description:"Add all components",default:!1}),async o=>{if(o.components.length===0&&!o.all){h.note("Error: You need to specify at least one component or use the --all flag"),console.log('Run "cli --help" for more information');return}let t=await f();await u(o.components[0],t.outputPath)}).demandCommand(1,"You need at least one command before moving on").strict().help().argv};$();

package/dist/index.mjs

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+import g from"yargs";import{hideBin as y}from"yargs/helpers";import m from"node:path";import r from"fs-extra";import{packageDirectorySync as l}from"pkg-dir";import*as t from"@clack/prompts";async function a(){let o=l()||process.cwd(),n=m.join(o,"park-ui.json");try{return await r.readJSON(n)}catch{t.note("\uC124\uC815 \uD30C\uC77C\uC774 \uC874\uC7AC\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4");let e=await f();return await r.outputJSON(n,{...e},{spaces:2}),e}}var f=async()=>t.group({outputPath:()=>t.text({message:"\uCEF4\uD3EC\uB10C\uD2B8 \uC800\uC7A5 \uACBD\uB85C\uB97C \uC124\uC815\uD574\uC8FC\uC138\uC694",initialValue:"./src/components/ui",validate:o=>{if(!o)return"Please enter a path.";if(!o.startsWith("."))return"Please enter a relative path to the project root."}})},{onCancel:()=>{t.cancel("Operation cancelled."),process.exit(0)}});import*as s from"@clack/prompts";import i from"node:path";import d from"fs-extra";var u=i.join(__dirname,"./components/Button/index.tsx");async function c(o,n){try{let e=u,p=i.join(process.cwd(),n,`${o}.tsx`);await d.copy(e,p),console.log(`${o} copied to ${n}`)}catch(e){throw new Error(`Failed to copy component: ${e}`)}}var h=async()=>{await g(y(process.argv)).command("components add [components..]","Add components to your project",o=>o.positional("components",{describe:"List of components to add",type:"string",array:!0,default:[]}).option("all",{type:"boolean",description:"Add all components",default:!1}),async o=>{if(o.components.length===0&&!o.all){s.note("Error: You need to specify at least one component or use the --all flag"),console.log('Run "cli --help" for more information');return}let n=await a();await c(o.components[0],n.outputPath)}).demandCommand(1,"You need at least one command before moving on").strict().help().argv};h();

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@jongh/cli",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "bin": "./dist/index.js",
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@clack/prompts": "^0.7.0",
+    "@effect/platform": "^0.69.13",
+    "@effect/schema": "^0.75.5",
+    "effect": "^3.10.8",
+    "fs-extra": "^11.2.0",
+    "pkg-dir": "^8.0.0",
+    "yargs": "^17.7.2"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "@types/node": "^22.8.6",
+    "@types/yargs": "^17.0.33",
+    "ts-node": "^10.9.2",
+    "tsup": "^8.3.0",
+    "tsx": "^4.19.2"
+  },
+  "scripts": {
+    "build": "tsup",
+    "release": "pnpm publish -no-git-checks"
+  }
+}

package/park-ui.json

@@ -0,0 +1,3 @@
+{
+  "outputPath": "./src/components/ui"
+}

package/src/fetchComponent.ts

@@ -0,0 +1,27 @@
+// src/copy-components.ts
+import path from "node:path"
+import fs from "fs-extra"
+
+// __dirname은 현재 실행되는 스크립트의 디렉토리 경로 (우리 패키지 내부)
+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}`)
+  }
+}