@eggspot/ui 0.0.0 → 0.0.3

package/src/components/Select.tsx

@@ -1,626 +0,0 @@
-"use client"
-
-import React from "react"
-import { Button } from "@eggspot/ui/components/Button"
-import { Checkbox } from "@eggspot/ui/components/Checkbox"
-import { fieldGroupVariants } from "@eggspot/ui/components/Field"
-import { SearchInput } from "@eggspot/ui/components/Input"
-import { Label } from "@eggspot/ui/components/Label"
-import { Popover, PopoverDialog } from "@eggspot/ui/components/Popover"
-import { useAriaSelectProps } from "@eggspot/ui/components/Select.utils"
-import { Spinner } from "@eggspot/ui/components/Spinner"
-import { cn } from "@eggspot/ui/lib/utils"
-import { omit } from "lodash"
-import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react"
-import type { ListBoxItemProps } from "react-aria-components"
-import {
-  Button as AriaButton,
-  PopoverProps as AriaPopoverProps,
-  Select as AriaSelect,
-  SelectProps as AriaSelectProps,
-  Autocomplete,
-  AutocompleteStateContext,
-  Collection,
-  DialogTrigger,
-  ListBox,
-  ListBoxItem,
-  ListBoxLoadMoreItem,
-  ListLayout,
-  Pressable,
-  SelectStateContext,
-  SelectValue,
-  useFilter,
-  Virtualizer,
-} from "react-aria-components"
-
-const SELECT_ALL_KEYWORD =
-  "this_is_keyword_for_select_all_checkbox_asljqdkasjdlkajsd"
-
-interface SelectOption<T = string | number> {
-  id?: string
-  value: T
-  label: string
-}
-
-interface SelectProps<T extends SelectOption, M extends "single" | "multiple">
-  extends Omit<
-    AriaSelectProps<T>,
-    "children" | "onChange" | "value" | "defaultValue" | "selectionMode"
-  > {
-  /** The selection mode for the select. */
-  selectionMode?: M
-
-  /** Initial value used when the component is uncontrolled. */
-  defaultValue?: M extends "multiple" ? Array<T> : T
-
-  /** If this prop is set, the select operates in a controlled manner and uses this value as its state. */
-  value?: M extends "multiple" ? Array<T> : T
-
-  /** If this prop is set, the select will call this function with the new value whenever the value changes. */
-  onChange?: M extends "multiple"
-    ? (value: Array<T>) => void
-    : (value: T) => void
-
-  /** Information for managing async option loading. */
-  optionsLoader?: {
-    /** Whether there are more pages of options to load. */
-    hasNextPage: boolean
-
-    /** Callback to fetch the next page of options. */
-    onFetchNextPage: () => void
-
-    /** Whether the next page of options is currently being fetched. */
-    isFetching?: boolean
-
-    /** A function to search for options. */
-    onSearch?: (search: string) => void
-  }
-
-  /**
-   * The array of options to display in the select dropdown.
-   */
-  options?: Array<T>
-
-  /**
-   * If true, enables a search field for filtering options.
-   */
-  isSearchable?: boolean
-
-  /**
-   * Custom render function for the selected value display.
-   */
-  renderValue?: (value: T) => React.ReactNode
-
-  /**
-   * Custom render function for each option in the dropdown.
-   */
-  renderOption?: (item: T) => React.ReactNode
-
-  /**
-   * The maximum number of badges to display. To show all badges, set to Infinity.
-   */
-  maxVisibleBadges?: number
-
-  /**
-   * If true, the clear button will be shown.
-   */
-  isClearable?: boolean
-
-  /**
-   * The message to display when there are no options found.
-   */
-  emptyMessage?: string
-
-  /**
-   * The label to display above the select.
-   */
-  label?: string
-
-  /**
-   * If true, an asterisk will be displayed next to the label.
-   */
-  withAsterisk?: boolean
-
-  /**
-   * The tooltip for the select.
-   */
-  tooltip?: React.ReactNode
-
-  /**
-   * The keyword to search for.
-   */
-  keyword?: keyof T
-
-  /**
-   * The action to perform when the create new button is clicked.
-   */
-  onCreate?: (value: string) => void
-
-  /**
-   * The class name for the trigger button.
-   */
-  triggerClassName?: string
-
-  /**
-   * The class name for the popover.
-   */
-  popoverProps?: AriaPopoverProps
-}
-
-function Select<
-  T extends SelectOption,
-  M extends "single" | "multiple" = "single",
->(props: SelectProps<T, M>) {
-  const {
-    value: controlledValue,
-    onChange: controlledOnChange,
-    defaultValue,
-    optionsLoader,
-    options,
-    renderOption,
-    renderValue,
-    isClearable = true,
-    maxVisibleBadges = 2,
-    placeholder = "Select",
-    isSearchable = true,
-    emptyMessage = "No results found",
-    label,
-    withAsterisk,
-    tooltip,
-    keyword,
-    onCreate,
-    triggerClassName,
-    popoverProps,
-    ...restProps
-  } = props
-  const [isOpen, setIsOpen] = React.useState(false)
-  const selectionMode = props.selectionMode || "single"
-  const isAsync = Boolean(optionsLoader)
-  const optionsWithId = options?.map((option) => ({
-    ...option,
-    id: JSON.stringify(option),
-  }))
-
-  const ariaProps = useAriaSelectProps({
-    value: controlledValue,
-    defaultValue: defaultValue,
-    onChange: controlledOnChange,
-    selectionMode: selectionMode,
-  })
-
-  return (
-    <AriaSelect
-      isOpen={isOpen}
-      onOpenChange={(isOpen) => {
-        if (!isOpen) {
-          setIsOpen(false)
-          setTimeout(() => {
-            optionsLoader?.onSearch?.("")
-          }, 100)
-        }
-      }}
-      aria-label="Select"
-      className={cn("group relative flex w-full flex-col gap-1.5")}
-      {...ariaProps}
-      {...restProps}
-    >
-      {label && (
-        <Label withAsterisk={withAsterisk} tooltip={tooltip}>
-          {label}
-        </Label>
-      )}
-      <AriaButton
-        className={cn(
-          fieldGroupVariants(),
-          "data-focus-visible:ring-accent-9 h-auto min-h-8 cursor-pointer py-1 pr-4 data-focus-visible:ring-2 data-focused:outline-none",
-          "relative flex justify-between",
-          "group-data-[invalid]:ring-error-7 group-data-[disabled]:cursor-not-allowed group-data-[disabled]:opacity-70",
-          "aria-[expanded=true]:ring-accent-9 aria-[expanded=true]:ring-2",
-          triggerClassName
-        )}
-        onClick={() => setIsOpen(!isOpen)}
-      >
-        <SelectValue<T> className="truncate">
-          {() => {
-            const selectedItems = [ariaProps.value]
-              .flat()
-              .filter(Boolean)
-              .map((v) => JSON.parse(v))
-            const isPlaceholder = selectedItems.length === 0
-
-            if (isPlaceholder) {
-              // If placeholder is not set, return an empty div
-              if (!placeholder) {
-                return (
-                  <div className="opacity-0" aria-hidden="true">
-                    &nbsp;
-                  </div>
-                )
-              }
-
-              return <div className="text-gray-11">{placeholder}</div>
-            }
-
-            if (selectionMode === "single") {
-              const selectedItem = selectedItems[0]
-
-              if (!selectedItem) return null
-
-              return renderValue
-                ? renderValue(selectedItem)
-                : selectedItem?.label
-            }
-
-            if (selectionMode === "multiple") {
-              const selectedItemsWithId = selectedItems.map((item) => ({
-                ...item,
-                id: JSON.stringify(item),
-              }))
-
-              return (
-                <div className="flex flex-1 flex-wrap gap-1 pr-4">
-                  {selectedItemsWithId
-                    ?.slice(0, maxVisibleBadges)
-                    .map((item) => {
-                      if (!item) return null
-
-                      return (
-                        <SelectBadge key={item?.id} title={item.label}>
-                          <div className="truncate">
-                            {renderValue ? renderValue(item) : item.label}
-                          </div>
-                          <BadgeClearButton data={item} />
-                        </SelectBadge>
-                      )
-                    })}
-
-                  {/* Remaining badges count */}
-                  {!!selectedItemsWithId?.length &&
-                    selectedItemsWithId.length > maxVisibleBadges && (
-                      <RemainingBadges
-                        items={selectedItemsWithId.slice(maxVisibleBadges)}
-                      />
-                    )}
-                </div>
-              )
-            }
-          }}
-        </SelectValue>
-        <ChevronDownIcon className="text-gray-11 size-4 translate-x-1" />
-        {isClearable && <SelectClearButton />}
-      </AriaButton>
-      <Popover
-        className={cn(
-          "w-(--trigger-width) overflow-hidden",
-          popoverProps?.className
-        )}
-        {...omit(popoverProps, "className")}
-      >
-        <div className="flex flex-col">
-          <ItemsWrapper
-            isAsync={isAsync}
-            isSearchable={isSearchable}
-            selectionMode={selectionMode}
-            manualSearching={!!optionsLoader}
-            onSearch={optionsLoader?.onSearch}
-          >
-            <div>
-              <Virtualizer
-                layout={ListLayout}
-                layoutOptions={{
-                  estimatedRowHeight: 36,
-                }}
-              >
-                <ListBox
-                  className="!max-h-[250px] flex-1 scroll-pb-1 overflow-y-auto outline-hidden"
-                  renderEmptyState={() => {
-                    if (optionsLoader?.isFetching) return null
-
-                    return (
-                      <div className="text-gray-11 flex h-20 items-center justify-center text-center text-sm">
-                        {emptyMessage}
-                      </div>
-                    )
-                  }}
-                >
-                  {selectionMode === "multiple" && !isAsync && (
-                    <SelectAllCheckbox
-                      value={ariaProps.value}
-                      onChange={ariaProps.onChange}
-                      options={optionsWithId as Array<Record<string, any>>}
-                    />
-                  )}
-                  <Collection items={optionsWithId}>
-                    {(item) => (
-                      <SelectItem
-                        selectionMode={selectionMode}
-                        renderOption={renderOption}
-                        textValue={(item as any)[keyword || "label"]}
-                      >
-                        {item.label}
-                      </SelectItem>
-                    )}
-                  </Collection>
-                  <ListBoxLoadMoreItem
-                    onLoadMore={
-                      optionsLoader?.hasNextPage
-                        ? optionsLoader?.onFetchNextPage
-                        : undefined
-                    }
-                    isLoading={optionsLoader?.isFetching}
-                    className="flex items-center justify-center pt-1.5"
-                  >
-                    <Spinner className="text-gray-11/50 size-5" />
-                  </ListBoxLoadMoreItem>
-                </ListBox>
-              </Virtualizer>
-            </div>
-            <CreateNew onCreate={onCreate} />
-          </ItemsWrapper>
-        </div>
-      </Popover>
-    </AriaSelect>
-  )
-}
-
-function SelectBadge({ className, ...props }: React.ComponentProps<"span">) {
-  return (
-    <span
-      className={cn(
-        "text-gray-12 bg-gray-4 inline-flex items-center justify-center truncate rounded-sm px-2 py-0.5 text-xs font-medium",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function RemainingBadges({
-  items,
-  renderValue,
-}: {
-  items: Array<SelectOption>
-  renderValue?: (item: SelectOption) => React.ReactNode
-}) {
-  const [isOpen, setIsOpen] = React.useState(false)
-
-  return (
-    <DialogTrigger>
-      <Pressable>
-        <SelectBadge
-          title="Show more options"
-          className="hover:bg-gray-3 focus-visible:outline-none"
-          onClick={(e) => {
-            e.stopPropagation()
-            setIsOpen(!isOpen)
-          }}
-        >
-          <span>{`+${items.length}`}</span>
-        </SelectBadge>
-      </Pressable>
-      <Popover
-        isOpen={isOpen}
-        onOpenChange={setIsOpen}
-        placement="bottom left"
-        className="overflow-hidden rounded-md"
-      >
-        <PopoverDialog className="p-0">
-          <div className="flex max-h-[250px] max-w-[260px] min-w-[150px] flex-col gap-1.5 overflow-y-auto p-2">
-            {items.map((item) => (
-              <SelectBadge key={item?.id} className="w-full justify-between">
-                <div className="truncate" title={item.label}>
-                  {renderValue ? renderValue(item) : item.label}
-                </div>
-                <BadgeClearButton data={item} />
-              </SelectBadge>
-            ))}
-          </div>
-        </PopoverDialog>
-      </Popover>
-    </DialogTrigger>
-  )
-}
-
-interface ItemsWrapperProps {
-  children: React.ReactNode
-  isSearchable: boolean
-  selectionMode: "single" | "multiple"
-  manualSearching?: boolean
-  onSearch?: (search: string) => void
-  isAsync?: boolean
-}
-
-function ItemsWrapper({
-  children,
-  isSearchable,
-  manualSearching,
-  onSearch,
-}: ItemsWrapperProps) {
-  const { contains } = useFilter({ sensitivity: "base" })
-
-  const customFilter = (textValue: string, inputValue: string) => {
-    if (textValue === SELECT_ALL_KEYWORD) return true
-
-    return contains(textValue, inputValue)
-  }
-
-  return isSearchable ? (
-    <Autocomplete
-      disableVirtualFocus
-      filter={manualSearching ? undefined : customFilter}
-    >
-      <SearchInput
-        autoFocus
-        placeholder="Search"
-        className="rounded-none border-b ring-0!"
-        onChange={onSearch}
-      />
-      <div className="p-1.5">{children}</div>
-    </Autocomplete>
-  ) : (
-    <div className="p-1.5">{children}</div>
-  )
-}
-
-interface SelectAllCheckboxProps {
-  value: Array<Record<string, any>>
-  onChange: (value: Array<Record<string, any>> | null) => void
-  options: Array<Record<string, any>>
-}
-
-function SelectAllCheckbox({
-  value,
-  onChange,
-  options,
-}: SelectAllCheckboxProps) {
-  const state = React.useContext(SelectStateContext)
-
-  const isAllSelected = value?.length === options?.length
-  const isIndeterminate = !!value?.length && value?.length < options?.length
-
-  return (
-    <ListBoxItem
-      textValue={SELECT_ALL_KEYWORD}
-      onClick={(e) => {
-        e.stopPropagation()
-        if (isAllSelected) {
-          onChange([])
-        } else {
-          const ids = options.map((option) => option.id)
-          onChange(ids)
-        }
-      }}
-      className={cn(
-        "group text-gray-12 flex cursor-pointer items-center gap-2 rounded-md px-2 py-2 text-sm outline-hidden select-none",
-        "data-focused:bg-gray-3"
-      )}
-    >
-      <Checkbox
-        readOnly
-        reduceMotion
-        isSelected={isAllSelected}
-        isIndeterminate={isIndeterminate}
-      />
-      Select All
-    </ListBoxItem>
-  )
-}
-
-interface CreateNewProps {
-  onCreate?: (value: string) => void
-}
-
-function CreateNew({ onCreate }: CreateNewProps) {
-  const selectState = React.useContext(SelectStateContext)
-  const autocompleteState = React.useContext(AutocompleteStateContext)
-  const inputValue = autocompleteState?.inputValue || ""
-
-  if (!onCreate) return null
-
-  return (
-    <div className="py-1.5">
-      <Button
-        fullWidth
-        variant="minimal"
-        intent="secondary"
-        isDisabled={!inputValue}
-        onClick={() => {
-          onCreate(inputValue)
-          selectState?.close()
-        }}
-      >
-        Create new
-      </Button>
-    </div>
-  )
-}
-
-function SelectItem<T extends SelectOption>({
-  children,
-  renderOption,
-  selectionMode = "multiple",
-  ...props
-}: ListBoxItemProps & {
-  children: string
-  renderOption?: (item: T) => React.ReactNode
-  selectionMode: "single" | "multiple"
-}) {
-  const content = (
-    <div className="flex-1 overflow-hidden text-sm font-normal">
-      <div className="truncate">
-        {renderOption ? renderOption(props.value as T) : children}
-      </div>
-    </div>
-  )
-
-  return (
-    <ListBoxItem
-      {...props}
-      className={cn(
-        "group text-gray-12 flex cursor-pointer items-center gap-2 rounded-md px-2 py-2 outline-hidden select-none",
-        "data-focused:bg-gray-3"
-      )}
-    >
-      {({ isSelected }) => (
-        <>
-          {selectionMode === "single" &&
-            (isSelected ? <CheckIcon size={16} /> : <div className="w-4" />)}
-          {selectionMode === "multiple" && (
-            <Checkbox readOnly reduceMotion isSelected={isSelected} />
-          )}
-          {content}
-        </>
-      )}
-    </ListBoxItem>
-  )
-}
-
-function SelectClearButton() {
-  const state = React.useContext(SelectStateContext)
-  const value = state?.value as string | Array<number | string>
-
-  if (!value || value.length === 0) return null
-
-  return (
-    <div
-      role="button"
-      tabIndex={0}
-      onClick={(e) => {
-        e.stopPropagation()
-        state?.setValue(null)
-      }}
-      className={cn(
-        "focus-visible:ring-2 focus-visible:outline-none",
-        "bg-gray-2 text-gray-11 hover:bg-gray-3 z-10 flex size-6 cursor-pointer items-center justify-center rounded-sm",
-        "absolute top-1/2 right-8 -translate-y-1/2"
-      )}
-    >
-      <XIcon className="text-gray-11 size-3.5" />
-    </div>
-  )
-}
-
-function BadgeClearButton({ data }: { data: SelectOption }) {
-  const state = React.useContext(SelectStateContext)
-  const value = state?.value as string | Array<number | string>
-
-  if (!Array.isArray(value)) return null
-
-  return (
-    <div
-      role="button"
-      tabIndex={0}
-      className="z-10 -mr-1.5 flex size-4! shrink-0 cursor-pointer items-center justify-center rounded-sm bg-transparent hover:bg-neutral-400/15 focus-visible:ring-2 focus-visible:outline-none"
-      onClick={(e) => {
-        e.stopPropagation()
-        const newKeys = value.filter((v) => v !== data.id)
-        state?.setValue(newKeys)
-      }}
-    >
-      <XIcon className="size-2.5!" />
-    </div>
-  )
-}
-
-export { Select }
-export type { SelectOption }

package/src/components/Select.utils.tsx

@@ -1,64 +0,0 @@
-import { useControllableState } from "@radix-ui/react-use-controllable-state"
-
-interface UseAriaSelectProps {
-  /**object or array of objects */
-  value: any
-
-  /**function that takes a value and returns void */
-  onChange?: (value: any) => void
-
-  /**object or array of objects */
-  defaultValue: any
-
-  /**single or multiple */
-  selectionMode: "single" | "multiple"
-}
-
-// Because React Aria only supports string values, we need to convert the value and onChange to use strings.
-// When the user selects a value, we need to convert the string back into an object.
-
-export function useAriaSelectProps({
-  value: controlledValue,
-  onChange: controlledOnChange,
-  defaultValue,
-  selectionMode,
-}: UseAriaSelectProps): any {
-  const [internalValue, internalOnChange] = useControllableState({
-    prop: controlledValue,
-    defaultProp: defaultValue,
-    onChange: controlledOnChange,
-  })
-
-  try {
-    const getValue = () => {
-      if (selectionMode === "single") {
-        return internalValue ? JSON.stringify(internalValue) : null
-      }
-
-      return internalValue?.map((v: object) => JSON.stringify(v))
-    }
-
-    const onChange = (v: any) => {
-      if (selectionMode === "single") {
-        internalOnChange(v ? JSON.parse(v as string) : null)
-      } else {
-        internalOnChange(
-          (v as string[])
-            ?.map((v) => {
-              try {
-                return JSON.parse(v)
-              } catch (error) {
-                return null
-              }
-            })
-            .filter(Boolean)
-        )
-      }
-    }
-
-    return { value: getValue(), onChange }
-  } catch (error) {
-    console.error(error)
-    return {}
-  }
-}

package/src/components/Separator.tsx

@@ -1,25 +0,0 @@
-"use client"
-
-import { cn } from "@eggspot/ui/lib/utils"
-import {
-  Separator as AriaSeparator,
-  SeparatorProps as AriaSeparatorProps,
-} from "react-aria-components"
-
-const Separator = ({
-  className,
-  orientation = "horizontal",
-  ...props
-}: AriaSeparatorProps) => (
-  <AriaSeparator
-    orientation={orientation}
-    className={cn(
-      "border-gray-6 bg-gray-6",
-      orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
-      className
-    )}
-    {...props}
-  />
-)
-
-export { Separator }