@jongh/cli 1.0.11 → 1.1.1

package/dist/index.js

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-import y from"yargs";import{hideBin as w}from"yargs/helpers";import m from"node:path";import a from"fs-extra";import{packageDirectory as l}from"pkg-dir";import*as t from"@clack/prompts";async function i(){let o=await l(),n=m.join(o||process.cwd(),"park-ui.json");try{return await a.readJSON(n)}catch{t.note("\uC124\uC815 \uD30C\uC77C\uC774 \uC874\uC7AC\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4");let e=await f();return await a.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 r from"node:path";import d from"fs-extra";import{fileURLToPath as u}from"node:url";var g=r.dirname(u(import.meta.url)),h=r.join(g,"./components/Button/index.tsx");async function c(o,n){try{let e=h,p=r.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 C=async()=>{await y(w(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 i();await c(o.components[0],n.outputPath)}).demandCommand(1,"You need at least one command before moving on").strict().help().argv};C();
+import x from"yargs";import{hideBin as A}from"yargs/helpers";import*as r from"@clack/prompts";import{packageDirectory as j}from"pkg-dir";import u from"fs-extra";import h from"path";import d from"fast-glob";import v from"fs-extra";import{loadConfig as g}from"tsconfig-paths";function a(t){let i=g(t);if(i?.resultType==="failed"||!Object.entries(i?.paths).length)return{baseAlias:null,styledSystemAlias:null};let s=null,n=null;for(let[o,e]of Object.entries(i.paths))e.includes("./styled-system/*")&&(n=o.replace(/\/\*$/,"")),(e.includes("./*")||e.includes("./src/*")||e.includes("./app/*"))&&(s=o.replace(/\/\*$/,""));return s||(s=Object.keys(i?.paths)?.[0].replace(/\/\*$/,"")??null),n||(n="."),{baseAlias:s,styledSystemAlias:n}}async function c(t){let i=await d.glob(["panda.config.*"],{cwd:t});return i.length?i[0]:null}var p="@pandacss/dev";async function l(t){let i=JSON.parse(u.readFileSync(h.join(t,"package.json"),"utf-8")),s=Object.keys(i.devDependencies).includes(p)||Object.keys(i.dependencies).includes(p),n=await c(t);return s&&!!n}import y from"path";import w from"fs-extra";async function f(t){return await w.pathExists(y.join(t,"components.json"))}import k from"fs-extra";import b from"path";async function m(){let t=await j();if(!t)throw new Error("Failed to find package root");if(await f(t))throw new Error("Already initialized");if(await l(t))throw new Error("install pandacss");let{baseAlias:n,styledSystemAlias:o}=a(t);if(!n||!o)throw new Error("Failed to find tsconfig alias");let e={utils:`${n}/utils`,components:`${n}/components`,hooks:`${n}/hooks`,styledsystem:o};await k.writeFile(b.resolve(t,"components.json"),JSON.stringify(e),"utf-8")}var I=async()=>x(A(process.argv)).command("init","initialize the project",()=>{},async()=>{r.note("Initializing project ...");try{await m()}catch(t){t instanceof Error&&r.cancel("Failed to initialize project: "+t.message)}});I();

package/package.json

@@ -1,8 +1,7 @@
 {
   "name": "@jongh/cli",
-  "version": "1.0.11",
+  "version": "1.1.1",
   "description": "",
-  "main": "index.js",
   "bin": "./dist/index.js",
   "type": "module",
   "keywords": [],
@@ -11,16 +10,27 @@
   "publishConfig": {
     "access": "public"
   },
+  "files": [
+    "dist",
+    "package.json"
+  ],
   "dependencies": {
+    "@babel/generator": "^7.26.3",
+    "@babel/parser": "^7.26.3",
+    "@babel/traverse": "^7.26.4",
     "@clack/prompts": "^0.7.0",
     "@effect/platform": "^0.69.13",
     "@effect/schema": "^0.75.5",
+    "@types/babel__traverse": "^7.20.6",
     "effect": "^3.10.8",
+    "fast-glob": "^3.3.2",
     "fs-extra": "^11.2.0",
     "pkg-dir": "^8.0.0",
+    "tsconfig-paths": "^4.2.0",
     "yargs": "^17.7.2"
   },
   "devDependencies": {
+    "@types/babel__generator": "^7.6.8",
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^22.8.6",
     "@types/yargs": "^17.0.33",
@@ -30,6 +40,9 @@
   },
   "scripts": {
     "build": "tsup",
-    "release": "pnpm publish -no-git-checks"
+    "release": "pnpm publish -no-git-checks",
+    "lint": "eslint . --max-warnings 0",
+    "check-type": "tsc --noEmit",
+    "test": "vitest"
   }
 }

package/dist/components/Accordion/Accordion.tsx

@@ -1,274 +0,0 @@
-import * as React from "react"
-import { createContext } from "../../hooks/createContext"
-import { useControlledState } from "../../hooks/useControllableState"
-import { useAccordionHeight } from "./useAccordionHeight"
-import { useKeyboardEvent } from "../../hooks/useKeyboardEvent"
-import { Slot } from "@radix-ui/react-slot"
-import { composeRefs } from "src/hooks/useComposedRefs"
-
-const ACCORDION_KEYS = [
-  "Home",
-  "End",
-  "ArrowDown",
-  "ArrowUp",
-  "ArrowLeft",
-  "ArrowRight",
-]
-export type TAccordionContext = {
-  selected?: string[]
-  onItemOpen: (value: string) => void
-  onItemClose: (value: string) => void
-  refs?: HTMLElement[]
-}
-
-const [AccordionProvider, useAccordionContext] =
-  createContext<TAccordionContext>("accordion")
-
-export interface AccordionProps {
-  value?: string[]
-  defaultValue?: string[]
-  onValueChange?: (value: string[]) => void
-  asChild?: boolean
-  type?: "single" | "multi"
-}
-
-export const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
-  (props, ref) => {
-    const { type = "single", ...accordionProps } = props
-    if (type === "single") {
-      return <SingleAccordion {...accordionProps} ref={ref} />
-    }
-    if (type === "multi") {
-      return <MultiAccordion {...accordionProps} />
-    }
-  },
-)
-
-Accordion.displayName = "Accordion"
-
-interface AccordionImplSingleProps {
-  value?: string[] // 현재 선택되어있는 item들을 담아놓는 용도
-  defaultValue?: string[]
-  onValueChange?: (value: string[]) => void
-  asChild?: boolean
-  children?: React.ReactNode
-}
-
-const SingleAccordion = React.forwardRef<
-  HTMLDivElement,
-  AccordionImplSingleProps
->(
-  (
-    { value, defaultValue = [], onValueChange, children, asChild, ...props },
-    forwardedRef,
-  ) => {
-    const [selected = [], setSelected] = useControlledState({
-      prop: value,
-      defaultProp: defaultValue,
-      onChange: onValueChange,
-    })
-
-    const { refs: accordionRefs, handleKeyDown } = useKeyboardEvent({
-      keyList: ACCORDION_KEYS,
-    })
-
-    const Comp = asChild ? Slot : "div"
-
-    return (
-      <AccordionProvider
-        selected={selected}
-        onItemOpen={(value) => setSelected((_) => [value])}
-        onItemClose={() => setSelected((_) => [])}
-        refs={accordionRefs.current || []}
-      >
-        <Comp
-          ref={composeRefs((node) => {
-            accordionRefs.current = Array.from(
-              node?.children || [],
-            ) as HTMLElement[]
-          }, forwardedRef)}
-          onKeyDown={(e) => {
-            handleKeyDown(e)
-          }}
-          {...props}
-        >
-          {children}
-        </Comp>
-      </AccordionProvider>
-    )
-  },
-)
-
-interface AccordionImplMultiProps {
-  value?: string[] // 현재 선택되어있는 item들을 담아놓는 용도
-  defaultValue?: string[]
-  onValueChange?: (value: string[]) => void
-  asChild?: boolean
-  children?: React.ReactNode
-}
-
-const MultiAccordion = React.forwardRef<
-  HTMLDivElement,
-  AccordionImplMultiProps
->(
-  (
-    { value, defaultValue, onValueChange, children, asChild, ...props },
-    forwardedRef,
-  ) => {
-    const [selected, setSelected] = useControlledState({
-      prop: value,
-      defaultProp: defaultValue,
-      onChange: onValueChange,
-    })
-
-    const handleItemOpen = React.useCallback(
-      (item: string) => {
-        setSelected((prev = []) => [...prev, item])
-      },
-      [setSelected],
-    )
-
-    const handleItemClose = React.useCallback(
-      (item: string) =>
-        setSelected((prev = []) => prev.filter((value) => value !== item)),
-      [setSelected],
-    )
-
-    const { refs: accordionRefs, handleKeyDown } = useKeyboardEvent({
-      keyList: ACCORDION_KEYS,
-    })
-
-    const Comp = asChild ? Slot : "div"
-
-    return (
-      <AccordionProvider
-        selected={selected}
-        onItemOpen={handleItemOpen}
-        onItemClose={handleItemClose}
-      >
-        <Comp
-          ref={(node) => {
-            accordionRefs.current = Array.from(
-              node?.children || [],
-            ) as HTMLElement[]
-            if (typeof forwardedRef === "function") {
-              forwardedRef(node)
-            } else if (forwardedRef) {
-              ;(
-                forwardedRef as React.MutableRefObject<HTMLDivElement | null>
-              ).current = node
-            }
-          }}
-          onKeyDown={handleKeyDown}
-          {...props}
-        >
-          {children}
-        </Comp>
-      </AccordionProvider>
-    )
-  },
-)
-//AccordionItem
-interface TAccordionItemContext {
-  isOpen: boolean
-  onToggle: () => void
-  value?: string
-}
-
-const [AccordionItemProvider, useAccordionItemProvider] =
-  createContext<TAccordionItemContext>("accordionItem")
-export interface AccordionItemProps {
-  value: string //unique value
-  disabled?: boolean
-  children: React.ReactNode
-  asChild?: boolean
-}
-
-export const AccordionItem = React.forwardRef<
-  HTMLDivElement,
-  AccordionItemProps
->(({ value, disabled = false, children, asChild, ...props }, forwardedRef) => {
-  const { selected, onItemOpen, onItemClose } = useAccordionContext("accordion")
-
-  const isOpen = selected?.includes(value) && !disabled
-
-  const onToggle = () => {
-    if (disabled) {
-      return
-    }
-    isOpen ? onItemClose(value) : onItemOpen(value)
-  }
-
-  const Comp = asChild ? Slot : "div"
-
-  return (
-    <AccordionItemProvider isOpen={!!isOpen} onToggle={onToggle} value={value}>
-      <Comp
-        ref={forwardedRef}
-        data-state={isOpen ? "open" : "close"}
-        tabIndex={0}
-        onKeyDown={(e) => {
-          if (e.key === "Enter") {
-            onToggle()
-          }
-        }}
-        {...props}
-      >
-        {children}
-      </Comp>
-    </AccordionItemProvider>
-  )
-})
-
-export interface AccordionTriggerProps extends React.PropsWithChildren {}
-export const AccordionTrigger = ({
-  children,
-  ...props
-}: AccordionTriggerProps) => {
-  const { onToggle, isOpen, value } = useAccordionItemProvider("accordionItem")
-  return (
-    <h3 data-state={isOpen ? "open" : "close"} {...props}>
-      <span
-        onClick={onToggle}
-        aria-expanded={isOpen ? "true" : "false"}
-        aria-controls={`content-${value}`}
-        id={`trigger-${value}`}
-      >
-        <span>{children}</span>
-      </span>
-    </h3>
-  )
-}
-//AccordionContent
-export interface AccordionContentProps extends React.PropsWithChildren {
-  duration?: number
-  asChild?: boolean
-}
-export const AccordionContent = ({
-  children,
-  duration = 150,
-  asChild,
-  ...props
-}: AccordionContentProps) => {
-  const Comp = asChild ? Slot : "div"
-  const { isOpen, value } = useAccordionItemProvider("accordionItem")
-
-  const contentRef = useAccordionHeight<HTMLDivElement>(isOpen, duration) //duration 초 뒤에 accordion을 열거나 닫아줌
-
-  if (!isOpen) {
-    return null
-  }
-
-  return (
-    <Comp
-      data-state={isOpen ? "open" : "close"}
-      id={`content-${value}`}
-      aria-labelledby={`trigger-${value}`}
-      role="region"
-      ref={contentRef}
-      {...props}
-    >
-      {children}
-    </Comp>
-  )
-}

package/dist/components/Accordion/index.tsx

@@ -1,37 +0,0 @@
-import { accordion, type AccordionVariantProps } from "@styled-system/recipes"
-import { createStyleContext } from "../../utils/createStyleContext"
-import type { ComponentProps, HTMLStyledProps } from "@styled-system/types"
-import type { Assign } from "../../types"
-import {
-  Accordion as AccordionProvider,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-  type AccordionContentProps,
-  type AccordionItemProps,
-  type AccordionProps,
-  type AccordionTriggerProps,
-} from "./Accordion"
-
-const { withProvider, withContext } = createStyleContext(accordion)
-
-export type RootProviderProps = ComponentProps<typeof AccordionProvider>
-export const Accordion = withProvider<
-  HTMLDivElement,
-  Assign<Assign<HTMLStyledProps<"div">, AccordionProps>, AccordionVariantProps>
->(AccordionProvider, "root")
-
-export const Item = withContext<
-  HTMLDivElement,
-  Assign<HTMLStyledProps<"div">, AccordionItemProps>
->(AccordionItem, "item")
-
-export const Trigger = withContext<
-  HTMLButtonElement,
-  Assign<HTMLStyledProps<"button">, AccordionTriggerProps>
->(AccordionTrigger, "trigger")
-
-export const Content = withContext<
-  HTMLDivElement,
-  Assign<HTMLStyledProps<"div">, AccordionContentProps>
->(AccordionContent, "content")

package/dist/components/Accordion/useAccordionHeight.ts

@@ -1,28 +0,0 @@
-import { useEffect, useRef } from "react"
-const ACCORDION_HEIGHT = "--accordion-height" //CSS 변수명- accordion의 높이를 제어하여 animation과 sync 맞춤
-export const useAccordionHeight = <T extends HTMLElement>(
-  isOpen: boolean,
-  duration = 150,
-) => {
-  const ref = useRef<T>(null)
-
-  useEffect(() => {
-    const element = ref.current
-    if (element === null) {
-      return
-    }
-
-    if (isOpen) {
-      const height = element.style.getPropertyValue(ACCORDION_HEIGHT)
-      if (height === "0" || !height) {
-        element.style.setProperty(ACCORDION_HEIGHT, `${element.scrollHeight}px`)
-      }
-    } else {
-      setTimeout(() => {
-        element.style.setProperty(ACCORDION_HEIGHT, `${element.scrollHeight}px`)
-      }, duration)
-    }
-  }, [isOpen, duration])
-
-  return ref
-}

package/dist/components/Avatar/Avatar.tsx

@@ -1,18 +0,0 @@
-import { Slot } from "@radix-ui/react-slot"
-import { useAvatar, type UseAvatarStatusProps } from "./useAvatar"
-import { forwardRef } from "react"
-
-interface AvatarProps extends UseAvatarStatusProps {
-  asChild?: boolean
-}
-
-export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>((props, ref) => {
-  const { asChild, src, onStatusChange } = props
-  const { getRootProps, getImgProps } = useAvatar({ src, onStatusChange })
-  const Comp = asChild ? Slot : "span"
-  return (
-    <Comp ref={ref} {...getRootProps()}>
-      <img {...getImgProps()}></img>
-    </Comp>
-  )
-})

package/dist/components/Avatar/useAvatar.ts

@@ -1,73 +0,0 @@
-import {
-  useLayoutEffect,
-  useState,
-  type ComponentProps,
-  type HTMLAttributes,
-} from "react"
-
-type Status = "loading" | "loaded" | "error"
-
-export interface UseAvatarStatusProps {
-  src?: string
-  onStatusChange?: (status: Status) => void
-}
-
-export const useAvatarStatus = ({
-  src,
-  onStatusChange,
-}: UseAvatarStatusProps) => {
-  const [status, setStatus] = useState<Status>("loading")
-
-  useLayoutEffect(() => {
-    if (!src) {
-      setStatus("error")
-      return
-    }
-    let isMounted: boolean = true
-    const image = new window.Image()
-
-    const updateStatus = (status: Status) => () => {
-      if (!isMounted) return
-      setStatus(status)
-      onStatusChange?.(status)
-    }
-
-    setStatus("loading")
-
-    image.src = src
-    image.onload = updateStatus("loaded")
-    image.onerror = updateStatus("error")
-
-    return () => {
-      isMounted = false
-    }
-  }, [src])
-
-  return status
-}
-
-type DataAttr = Record<`data-${string}`, string | undefined>
-
-const elementProps = (props: HTMLAttributes<HTMLElement> & DataAttr) => props
-
-const imgProps = (props: ComponentProps<"img"> & DataAttr) => props
-
-interface UseAvatarProps extends UseAvatarStatusProps {}
-export const useAvatar = ({ src, onStatusChange }: UseAvatarProps) => {
-  const status = useAvatarStatus({ src, onStatusChange })
-  const isLoaded = status === "loaded"
-  return {
-    getRootProps() {
-      return elementProps({
-        "data-loading-state": status,
-      })
-    },
-    getImgProps() {
-      return imgProps({
-        hidden: !isLoaded,
-        "data-visible": `${isLoaded}`,
-        src,
-      })
-    },
-  }
-}

package/dist/components/Button/index.tsx

@@ -1,66 +0,0 @@
-import {
-  forwardRef,
-  ComponentPropsWithoutRef,
-  isValidElement,
-  cloneElement,
-  type ReactElement,
-  type MouseEventHandler,
-} from "react"
-import { button, type ButtonVariant } from "@styled-system/recipes"
-import { Slot } from "@radix-ui/react-slot"
-
-type ButtonProps = Partial<ButtonVariant> &
-  ComponentPropsWithoutRef<"button"> & { as?: string } & {
-    /**왼쪽에 올 아이콘 */
-    leftIcon?: ReactElement
-    /**오른쪽에 위치할 아이콘 */
-    rightIcon?: ReactElement
-  }
-
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      as,
-      id,
-      className,
-      children,
-      disabled = false,
-      leftIcon,
-      rightIcon,
-      onClick,
-      ...rest
-    },
-    ref,
-  ) => {
-    const Comp = as ? Slot : "button"
-
-    const wrapIcon = (icon: ReactElement<{ onClick?: MouseEventHandler }>) => {
-      if (isValidElement(icon)) {
-        const { onClick: onClickIcon } = icon.props
-        return cloneElement(icon, {
-          onClick: (e: React.MouseEvent<HTMLButtonElement>) => {
-            e.stopPropagation()
-            onClickIcon ? onClickIcon(e) : onClick?.(e)
-          },
-        })
-      }
-    }
-
-    return (
-      <Comp
-        role="button"
-        ref={ref}
-        disabled={disabled}
-        id={id}
-        data-testid={id}
-        onClick={onClick}
-        className={button({})}
-        {...rest}
-      >
-        {leftIcon && <span>{wrapIcon(leftIcon)}</span>}
-        {children}
-        {rightIcon && <span>{wrapIcon(rightIcon)}</span>}
-      </Comp>
-    )
-  },
-)