@jongh/cli 1.0.11 → 1.1.1

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/Slider/style.ts

@@ -1,42 +0,0 @@
-import { define } from "../../../dev"
-
-export const sliderRecipe = define.recipe({
-  className: "slider",
-  base: {
-    WebkitAppearance: "none",
-    height: "4px",
-    borderRadius: "lg",
-    backgroundColor: "grey_300",
-    backgroundImage: "linear-gradient(#7DD3FC, #7DD3FC)",
-    backgroundSize: "var(--range-size)",
-    backgroundRepeat: "no-repeat",
-    "&::-webkit-slider-thumb": {
-      WebkitAppearance: "none",
-      width: "20px",
-      height: "20px",
-      backgroundColor: "grey_300",
-      borderRadius: "rounded",
-      border: "none",
-      cursor: "pointer",
-    },
-    "&::-moz-range-thumb": {
-      WebkitAppearance: "none",
-      width: "20px",
-      height: "20px",
-      backgroundColor: "grey_300",
-      borderRadius: "rounded",
-      border: "none",
-      cursor: "pointer",
-    },
-  },
-  variants: {
-    orientation: {
-      horizontal: {
-        writingMode: "horizontal-tb",
-      },
-      vertical: {
-        writingMode: "vertical-rl",
-      },
-    },
-  },
-})

package/dist/components/Tab/Tab.tsx

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

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

@@ -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/TabList.tsx

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

@@ -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/dist/components/Tab/useRovingTabIndex.tsx

@@ -1,172 +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) => {
-          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

@@ -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"