@jongh/cli 1.1.0 → 1.1.1

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 })

package/dist/components/Tabs/Tab.tsx

@@ -1,39 +0,0 @@
-import { forwardRef, useId, type ReactNode, type ForwardedRef } from "react"
-import { useControlledState } from "../../hooks/useControllableState"
-import { Slot } from "@radix-ui/react-slot"
-import { TabProvider } from "./useTabContext"
-
-export type TabProps = {
-  children?: ReactNode
-  selected?: string
-  defaultValue?: string
-  onSelect?: (value: string) => void
-  asChild?: boolean
-}
-
-export const Tab = forwardRef(
-  (
-    { children, selected, defaultValue, onSelect, asChild, ...props }: TabProps,
-    ref: ForwardedRef<HTMLDivElement>,
-  ) => {
-    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} {...props}>
-          {children}
-        </Element>
-      </TabProvider>
-    )
-  },
-)

package/dist/components/Tabs/TabContent.tsx

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

package/dist/components/Tabs/TabIndicator.tsx

@@ -1,6 +0,0 @@
-import { motion } from "framer-motion"
-
-export interface TabIndicatorProps {}
-export const TabIndicator = ({ ...props }: TabIndicatorProps) => {
-  return <motion.div {...props}></motion.div>
-}