@jongh/cli 1.0.11 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jongh/cli",
-  "version": "1.0.11",
+  "version": "1.1.0",
   "description": "",
   "main": "index.js",
   "bin": "./dist/index.js",

package/src/{fetchComponent.ts → copyComponent.ts}

@@ -3,7 +3,6 @@ import path from "node:path"
 import fs from "fs-extra"
 import { fileURLToPath } from "node:url"
 
-// __dirname은 현재 실행되는 스크립트의 디렉토리 경로 (우리 패키지 내부)
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
 const COMPONENTS_DIR = path.join(__dirname, "./components/Button/index.tsx")

package/src/getConfig.ts

@@ -3,9 +3,13 @@ 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(), "park-ui.json")
+  const configPath = path.join(packageDir || process.cwd(), jsonFileName)
   try {
     // 1. 프로젝트 루트 디렉토리 찾기
 
@@ -13,11 +17,10 @@ export async function getConfig(): Promise<{ outputPath: string }> {
     const config = await fs.readJSON(configPath)
     return config
   } catch {
-    // 4. 설정 파일이 없거나 잘못된 경우 사용자에게 입력받기
     p.note("설정 파일이 존재하지 않습니다")
     const config = await promptConfig() //3. 사용자에게 경로 관련 입력 받기
 
-    // 5. 새 설정 파일 저장
+    // 4. 새 설정 파일 저장
     await fs.outputJSON(
       configPath,
       {
@@ -36,7 +39,7 @@ const promptConfig = async () =>
       outputPath: () =>
         p.text({
           message: "컴포넌트 저장 경로를 설정해주세요",
-          initialValue: "./src/components/ui",
+          initialValue: initialPath,
           validate: (value) => {
             if (!value) return "Please enter a path."
             if (!value.startsWith("."))

package/src/index.ts

@@ -4,7 +4,7 @@ import yargs from "yargs"
 import { hideBin } from "yargs/helpers"
 import { getConfig } from "./getConfig"
 import * as p from "@clack/prompts"
-import { copyComponent } from "./fetchComponent"
+import { copyComponent } from "./copyComponent"
 
 const main = async () => {
   await yargs(hideBin(process.argv))
@@ -28,7 +28,7 @@ const main = async () => {
       async (argv) => {
         // 컴포넌트가 없고 --all 플래그도 없으면 에러
         if (argv.components.length === 0 && !argv.all) {
-          p.note(
+          p.cancel(
             "Error: You need to specify at least one component or use the --all flag",
           )
           console.log('Run "cli --help" for more information')

package/dist/components/Slider/Slider.tsx

@@ -1,140 +0,0 @@
-import { useState } from "react"
-import { useControlledState } from "../../hooks/useControllableState"
-
-type Props = {
-  min: number
-  max: number
-  value: number
-  defaultValue?: number
-  onChange: (value: number) => void
-}
-
-const getPercentage = (value: number, min: number, max: number) =>
-  ((value - min) / (max - min)) * 100
-
-const isTouchEvent = (e: TouchEvent | MouseEvent): e is TouchEvent => {
-  return e && "touches" in e
-}
-
-const isMouseEvent = (e: TouchEvent | MouseEvent): e is MouseEvent => {
-  return e && "screenX" in e
-}
-
-const getClientX = (
-  e: React.TouchEvent<HTMLElement> | React.MouseEvent<HTMLElement>,
-) => {
-  let clientX = 0
-  if (isMouseEvent(e.nativeEvent)) {
-    clientX = e.nativeEvent.clientX
-  } else if (isTouchEvent(e.nativeEvent)) {
-    clientX =
-      e.nativeEvent.touches.length > 0
-        ? e.nativeEvent.touches[0].clientX
-        : e.nativeEvent.changedTouches[0].clientX
-  }
-  return clientX
-}
-
-export const Slider = ({
-  min = 0,
-  max = 100,
-  value,
-  onChange,
-  defaultValue,
-}: Props) => {
-  const [isDragging, setIsDragging] = useState(false)
-
-  const [innerValue = 0, setValue] = useControlledState({
-    prop: value,
-    defaultProp: defaultValue || min,
-    onChange,
-  })
-
-  const handlePointerDown = (e: React.PointerEvent) => {
-    e.preventDefault()
-    setIsDragging(true)
-    e.currentTarget.setPointerCapture(e.pointerId)
-  }
-
-  const handlePointerUp = (e: React.PointerEvent) => {
-    e.preventDefault()
-    setIsDragging(false)
-    e.currentTarget.releasePointerCapture(e.pointerId)
-  }
-
-  const percentage = getPercentage(innerValue, min, max)
-
-  const handleMouseMove = (e: React.PointerEvent<HTMLElement>) => {
-    e.preventDefault()
-    if (!isDragging) return
-    //width는 본인의 상위태그여야함..
-    const { left, width } = e.currentTarget.getBoundingClientRect()
-    let percentage = (getClientX(e) - left) / width
-    console.log(left, width)
-    percentage = Math.min(Math.max(percentage, 0), 1)
-    console.log(percentage)
-    const newValue = min + percentage * (max - min)
-    setValue(newValue)
-  }
-
-  return (
-    <>
-      <span
-        className="slider-wrapper"
-        style={{
-          position: "relative",
-          display: "flex",
-          alignItems: "center",
-          width: "200px",
-          height: "50px",
-        }}
-      >
-        <span
-          className="slider-track"
-          onPointerDownCapture={handlePointerDown}
-          onPointerUpCapture={handlePointerUp}
-          onPointerMoveCapture={handleMouseMove}
-          onPointerCancelCapture={handlePointerUp}
-          style={{
-            position: "relative",
-            backgroundColor: "black",
-            flexGrow: 1,
-            borderRadius: "9999px",
-            height: "10px",
-          }}
-        >
-          <span
-            className="slider-value"
-            style={{
-              backgroundColor: "white",
-              borderRadius: "9999px",
-              height: "100%",
-              position: "absolute",
-              width: `${percentage}%`,
-            }}
-          ></span>
-          <span
-            className="slider-thumb"
-            style={{
-              position: "absolute",
-              left: `${percentage}%`,
-              transform: "translateX(-50%)",
-            }}
-          >
-            <span
-              style={{
-                width: "10px",
-                height: "10px",
-                borderRadius: "100px",
-                backgroundColor: "pink",
-                opacity: "0.5",
-                display: "block",
-              }}
-            ></span>
-          </span>
-        </span>
-      </span>
-      <div style={{ color: "pink" }}>{innerValue}</div>
-    </>
-  )
-}

package/dist/components/Tab/TabIndicator.tsx

@@ -1,19 +0,0 @@
-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/index.ts

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

package/dist/components/Tab/style.ts

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

package/park-ui.json

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