@jongh/cli 1.1.0 → 1.2.0

package/dist/components/Primitive/index.tsx

@@ -1,58 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-//radix ui Primitive를  참고하여 작성한 코드
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-
-const NODES = [
-  "a",
-  "button",
-  "div",
-  "form",
-  "h2",
-  "h3",
-  "img",
-  "input",
-  "label",
-  "li",
-  "nav",
-  "ol",
-  "p",
-  "span",
-  "svg",
-  "ul",
-] as const
-
-type Primitives = {
-  [E in (typeof NODES)[number]]: PrimitiveForwardRefComponent<E>
-}
-type PrimitivePropsWithRef<E extends React.ElementType> =
-  React.ComponentPropsWithRef<E> & {
-    asChild?: boolean
-  }
-
-interface PrimitiveForwardRefComponent<E extends React.ElementType>
-  extends React.ForwardRefExoticComponent<PrimitivePropsWithRef<E>> {}
-
-/* -------------------------------------------------------------------------------------------------
- * Primitive
- * -----------------------------------------------------------------------------------------------*/
-
-const Primitive = NODES.reduce((primitive, node) => {
-  const Node = React.forwardRef(
-    (props: PrimitivePropsWithRef<typeof node>, forwardedRef: any) => {
-      const { asChild, ...primitiveProps } = props
-      const Comp: any = asChild ? Slot : node
-
-      return <Comp {...primitiveProps} ref={forwardedRef} />
-    },
-  )
-
-  Node.displayName = `Primitive.${node}`
-
-  return { ...primitive, [node]: Node }
-}, {} as Primitives)
-
-const Root = Primitive
-
-export { Primitive, Root }
-export type { PrimitivePropsWithRef }

package/dist/components/RovingIndex/RovingItem.tsx

@@ -1,47 +0,0 @@
-import type { ReactElement } from "react"
-import { useRovingTabIndex } from "./useRovingTabIndex"
-import { Slot } from "@radix-ui/react-slot"
-import isHotkey from "is-hotkey"
-import {
-  getNextFocusableId,
-  getPrevFocusableId,
-} from "../../utils/getFocusableId"
-
-export const RovingItem = ({
-  value,
-  children,
-}: {
-  value: string
-  children: ReactElement
-}) => {
-  const { getOrderedItems, getRovingProps, dir } = useRovingTabIndex(value)
-
-  return (
-    <Slot
-      {...getRovingProps<"button">({
-        onKeyDown: (e) => {
-          const items = getOrderedItems()
-          let nextItem
-          if (dir === "horizontal") {
-            if (isHotkey("right", e)) {
-              nextItem = getNextFocusableId(items, value)
-            } else if (isHotkey("left", e)) {
-              nextItem = getPrevFocusableId(items, value)
-            }
-            nextItem?.element.focus()
-          }
-          if (dir === "vertical") {
-            if (e.key === "ArrowDown") {
-              nextItem = getNextFocusableId(items, value)
-            } else if (e.key === "ArrowUp") {
-              nextItem = getPrevFocusableId(items, value)
-            }
-            nextItem?.element.focus()
-          }
-        },
-      })}
-    >
-      {children}
-    </Slot>
-  )
-}

package/dist/components/RovingIndex/RovingTabIndexRoot.tsx

@@ -1,92 +0,0 @@
-import { ReactNode, useCallback, useRef, useState } from "react"
-import { useControlledState } from "../../hooks/useControllableState"
-import { RovingTabIndexProvider } from "./useRovingTabIndex"
-import { Slot } from "@radix-ui/react-slot"
-
-export 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 = {
-  children: ReactNode | ReactNode[]
-  active?: string
-  setActive?: (value: string) => void
-  asChild?: boolean
-  dir?: "horizontal" | "vertical"
-}
-
-type RovingTabIndexRootProps = RovingTabIndexRootBaseProps
-
-function onFocusFirst(candidates: HTMLElement[]) {
-  const previousFocus = document.activeElement
-  while (document.activeElement === previousFocus && candidates.length > 0) {
-    candidates.shift()?.focus()
-  }
-}
-
-export const RovingTabIndexRoot = ({
-  children,
-  active,
-  setActive,
-  asChild,
-  dir = "horizontal",
-  ...props
-}: RovingTabIndexRootProps) => {
-  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}
-      dir={dir}
-    >
-      <Slot
-        {...{ [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={rootRef}
-        {...props}
-      >
-        {children}
-      </Slot>
-    </RovingTabIndexProvider>
-  )
-}

package/dist/components/RovingIndex/index.ts

@@ -1,3 +0,0 @@
-export * from "./RovingItem"
-export * from "./useRovingTabIndex"
-export * from "./RovingTabIndexRoot"

package/dist/components/RovingIndex/useRovingTabIndex.tsx

@@ -1,76 +0,0 @@
-import {
-  FocusEvent,
-  MouseEvent,
-  KeyboardEvent,
-  ComponentPropsWithoutRef,
-  ElementType,
-  MutableRefObject,
-} from "react"
-import { createContext } from "../../hooks/createContext"
-import { NODE_SELECTOR } from "./RovingTabIndexRoot"
-
-export type RovingTabIndexItem = {
-  value: string
-  element: HTMLElement
-}
-
-type RovingTabIndexContext = {
-  currentFocusedValue: string | null
-  setFocusableId: (id: string) => void
-  onShiftTab: () => void
-  getOrderedItems: () => RovingTabIndexItem[]
-  elements: MutableRefObject<Map<string, HTMLElement>>
-  dir?: "horizontal" | "vertical"
-}
-
-export const [RovingTabIndexProvider, useRovingTabIndexContext] =
-  createContext<RovingTabIndexContext>("rovingTabIndex")
-
-export const useRovingTabIndex = (value: string) => {
-  const {
-    currentFocusedValue,
-    setFocusableId,
-    onShiftTab,
-    getOrderedItems,
-    elements,
-    dir,
-  } = useRovingTabIndexContext("rovingTabIndex")
-
-  return {
-    getOrderedItems,
-    dir,
-    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 (e.shiftKey && e.key === "Tab") {
-          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/Select/index.tsx

@@ -1,231 +0,0 @@
-import {
-  forwardRef,
-  type ComponentPropsWithoutRef,
-  type CSSProperties,
-  type ReactNode,
-} from "react"
-import { createContext } from "../../hooks/createContext"
-import { useControlledState } from "../../hooks/useControllableState"
-import { Slot } from "@radix-ui/react-slot"
-import { RovingTabIndexRoot } from "../RovingIndex/RovingTabIndexRoot"
-import {
-  autoUpdate,
-  flip,
-  offset,
-  size,
-  useFloating,
-} from "@floating-ui/react-dom"
-import {
-  useRovingTabIndex,
-  useRovingTabIndexContext,
-} from "../RovingIndex/useRovingTabIndex"
-import {
-  getNextFocusableId,
-  getPrevFocusableId,
-} from "../../utils/getFocusableId"
-import { composeRefs } from "../../hooks/useComposedRefs"
-import { Primitive } from "src/components/Primitive"
-
-const CONTEXT_NAME = "select"
-
-interface SelectContext {
-  isOpen: boolean //option들의 열림/닫힘 여부
-  onOpenChange: (Open: boolean) => void
-  selected: string | null //option들 중 선택된 value
-  onSelectChange: (value: string) => void
-  floatingStyles?: CSSProperties
-  setFloating: (node: HTMLElement) => void
-  setReference: (node: HTMLElement | null) => void
-  dir: "horizontal" | "vertical"
-}
-
-const [SelectContextProvider, useSelectContext] =
-  createContext<SelectContext>(CONTEXT_NAME)
-
-export interface SelectProps extends ComponentPropsWithoutRef<"div"> {
-  isOpen?: boolean
-  onOpenChange?: (open: boolean) => void
-  defaultOpen?: boolean
-  selected?: string
-  onSelectChange?: (value: string) => void
-  defaultValue?: string
-  children: ReactNode
-  dir?: "horizontal" | "vertical"
-}
-
-export const SelectRoot = ({
-  isOpen,
-  onOpenChange,
-  defaultOpen,
-  selected,
-  onSelectChange,
-  defaultValue,
-  dir = "vertical",
-  children,
-  ...props
-}: SelectProps) => {
-  const [open = false, setIsOpen] = useControlledState({
-    prop: isOpen,
-    defaultProp: defaultOpen,
-    onChange: onOpenChange,
-  })
-
-  const [selectedValue, setSelectedValue] = useControlledState({
-    prop: selected,
-    defaultProp: defaultValue,
-    onChange: onSelectChange,
-  })
-
-  const { refs, floatingStyles } = useFloating({
-    strategy: "absolute",
-    open: open,
-    middleware: [
-      offset(), //trigger와 얼마나 떨어져있는지
-      flip(), //화면 밖으로 나가지 않도록
-      size({
-        apply({ elements, availableHeight }) {
-          elements.floating.style.maxHeight = `${availableHeight}px`
-        },
-      }),
-    ],
-    whileElementsMounted: autoUpdate,
-  })
-
-  return (
-    <SelectContextProvider
-      isOpen={open}
-      onOpenChange={setIsOpen}
-      selected={selectedValue || null}
-      onSelectChange={setSelectedValue}
-      setFloating={refs.setFloating}
-      setReference={refs.setReference}
-      dir={dir}
-      floatingStyles={floatingStyles}
-    >
-      <RovingTabIndexRoot active={selectedValue} dir="vertical">
-        <div tabIndex={-1} {...props}>
-          {children}
-        </div>
-      </RovingTabIndexRoot>
-    </SelectContextProvider>
-  )
-}
-
-export interface SelectTriggerProps
-  extends ComponentPropsWithoutRef<typeof Primitive.button> {
-  placeholder?: string
-}
-
-export const SelectTrigger = forwardRef<
-  React.ElementRef<typeof Primitive.button>,
-  SelectTriggerProps
->((props, ref) => {
-  const { getOrderedItems } = useRovingTabIndexContext("rovingTabIndex")
-
-  const { setReference, onOpenChange, isOpen, selected } =
-    useSelectContext(CONTEXT_NAME)
-
-  const displayText = selected || props.placeholder || ""
-
-  return (
-    <Primitive.button
-      ref={composeRefs((node) => setReference(node), ref)}
-      onClick={(e) => {
-        e.preventDefault()
-        onOpenChange(!isOpen)
-        props?.onClick?.(e)
-      }}
-      onKeyDown={(e) => {
-        setTimeout(() => {
-          if (e.key === "ArrowDown") {
-            onOpenChange(true)
-            getOrderedItems()[0]?.element.focus()
-          }
-        })
-      }}
-      {...props}
-    >
-      <span>{displayText}</span>
-    </Primitive.button>
-  )
-})
-export interface SelectPortalProps {
-  children: ReactNode
-}
-export const SelectPortal = ({ children, ...props }: SelectPortalProps) => {
-  const { isOpen, floatingStyles, setFloating } = useSelectContext(CONTEXT_NAME)
-
-  if (!isOpen) {
-    return null
-  }
-
-  return (
-    <Slot
-      style={floatingStyles}
-      ref={(node) => {
-        if (node instanceof HTMLElement) {
-          setFloating(node)
-        }
-      }}
-      {...props}
-    >
-      {children}
-    </Slot>
-  )
-}
-
-export interface SelectItemProps
-  extends ComponentPropsWithoutRef<typeof Primitive.li> {
-  value: string
-}
-export const SelectItem = forwardRef<
-  React.ElementRef<typeof Primitive.li>,
-  SelectItemProps
->(({ children, value, asChild, ...props }, ref) => {
-  const { onSelectChange, onOpenChange, dir } = useSelectContext(CONTEXT_NAME)
-  const { getOrderedItems, getRovingProps } = useRovingTabIndex(value)
-
-  return (
-    <Primitive.li
-      {...getRovingProps<typeof Primitive.li>({
-        onClick: () => {
-          onSelectChange?.(value)
-          onOpenChange(false)
-        },
-        onKeyDown: (e) => {
-          if (e.key === "Enter") {
-            onSelectChange?.(value)
-            onOpenChange(false)
-          }
-          const items = getOrderedItems()
-          let nextItem
-          if (dir === "horizontal") {
-            if (e.key === "ArrowRight") {
-              nextItem = getNextFocusableId(items, value)
-            } else if (e.key === "ArrowLeft") {
-              nextItem = getPrevFocusableId(items, value)
-            }
-          }
-          if (dir === "vertical") {
-            if (e.key === "ArrowDown") {
-              nextItem = getNextFocusableId(items, value)
-            } else if (e.key === "ArrowUp") {
-              nextItem = getPrevFocusableId(items, value)
-            }
-          }
-          nextItem?.element.focus()
-        },
-      })}
-      ref={ref}
-      {...props}
-    >
-      {children}
-    </Primitive.li>
-  )
-})
-
-export const Select = Object.assign(SelectRoot, {
-  Trigger: SelectTrigger,
-  Portal: SelectPortal,
-  Item: SelectItem,
-})

package/dist/components/Slider/index.tsx

@@ -1,141 +0,0 @@
-import { useState, type ComponentPropsWithoutRef } from "react"
-import { useControlledState } from "../../hooks/useControllableState"
-import { createContext } from "../../hooks/createContext"
-//TODO: props type 관련 정리 및 event composing 필요
-const [SliderProvider, useSliderContext] = createContext<{
-  min: number
-  max: number
-  value: number
-  onChange: (value: number) => void
-  isDragging: boolean
-  onPointerDown: (e: React.PointerEvent) => void
-  onPointerMove: (e: React.PointerEvent) => void
-  onPointerUp: (e: React.PointerEvent) => void
-}>("Slider")
-
-type SliderRootProps = {
-  min: number
-  max: number
-  value: number
-  defaultValue?: number
-  onChange: (value: number) => void
-  children: React.ReactNode
-}
-
-const getPercentage = (value: number, min: number, max: number) =>
-  ((value - min) / (max - min)) * 100
-
-const SliderRoot = ({
-  min = 0,
-  max = 100,
-  value,
-  onChange,
-  defaultValue,
-  children,
-  ...props
-}: SliderRootProps) => {
-  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 { left, width } = e.currentTarget.getBoundingClientRect()
-    let percentage = (e.clientX - left) / width
-    percentage = Math.min(Math.max(percentage, 0), 1)
-
-    const newValue = min + percentage * (max - min)
-    setValue(newValue)
-  }
-
-  const handlePointerMove = (e: React.PointerEvent) => {
-    e.preventDefault()
-    if (!isDragging) return
-
-    const { left, width } = e.currentTarget.getBoundingClientRect()
-    let percentage = (e.clientX - left) / width
-    percentage = Math.min(Math.max(percentage, 0), 1)
-    const newValue = min + percentage * (max - min)
-    setValue(newValue)
-  }
-
-  return (
-    <SliderProvider
-      min={min}
-      max={max}
-      value={innerValue}
-      onChange={setValue}
-      isDragging={isDragging}
-      onPointerDown={handlePointerDown}
-      onPointerMove={handlePointerMove}
-      onPointerUp={handlePointerUp}
-    >
-      <div
-        onPointerDown={handlePointerDown}
-        onPointerUp={handlePointerUp}
-        onPointerMove={handlePointerMove}
-        {...props}
-      >
-        {children}
-      </div>
-    </SliderProvider>
-  )
-}
-
-const SliderTrack = ({
-  children,
-  ...props
-}: {
-  children?: React.ReactNode
-}) => {
-  return <span {...props}>{children}</span>
-}
-
-const SliderRange = ({ ...props }: ComponentPropsWithoutRef<"span">) => {
-  const { min, max, value } = useSliderContext()
-  const percentage = getPercentage(value, min, max)
-
-  return (
-    <span
-      {...props}
-      style={{
-        width: `${percentage}%`,
-      }}
-    />
-  )
-}
-
-const SliderThumb = ({ ...props }: ComponentPropsWithoutRef<"span">) => {
-  const { min, max, value } = useSliderContext()
-  const percentage = getPercentage(value, min, max)
-
-  return (
-    <span
-      {...props}
-      style={{
-        position: "absolute",
-        left: `${percentage}%`,
-        transform: "translateX(-50%)",
-      }}
-    />
-  )
-}
-
-export const Slider = Object.assign(SliderRoot, {
-  Root: SliderRoot,
-  Track: SliderTrack,
-  Range: SliderRange,
-  Thumb: SliderThumb,
-})

package/dist/components/Slider/style.ts

@@ -1,29 +0,0 @@
-import type { Assign } from "../../types"
-import { slider } from "@styled-system/recipes"
-import type { ComponentProps, HTMLStyledProps } from "styled-system/types"
-import { createStyleContext } from "../../utils/createStyleContext"
-import { Slider } from "."
-
-const { withProvider, withContext } = createStyleContext(slider)
-
-export const Root = withProvider<
-  HTMLDivElement,
-  Assign<HTMLStyledProps<"div">, ComponentProps<typeof Slider.Root>>
->(Slider.Root, "root")
-
-export const Track = withContext<
-  HTMLSpanElement,
-  Assign<HTMLStyledProps<"span">, ComponentProps<typeof Slider.Track>>
->(Slider.Track, "track")
-
-export const Range = withContext<
-  HTMLSpanElement,
-  Assign<HTMLStyledProps<"span">, ComponentProps<typeof Slider.Range>>
->(Slider.Range, "range")
-
-export const Thumb = withContext<
-  HTMLSpanElement,
-  Assign<HTMLStyledProps<"span">, ComponentProps<typeof Slider.Thumb>>
->(Slider.Thumb, "thumb")
-
-export const StyledSlider = Object.assign(Root, { Track, Range, Thumb })