@eggspot/ui 0.0.2 → 0.0.3

package/src/components/Calendar.tsx

@@ -1,275 +0,0 @@
-"use client"
-
-import React, { useContext } from "react"
-import { buttonVariants } from "@eggspot/ui/components/Button"
-import {
-  getCalendarMonths,
-  getCalendarYears,
-} from "@eggspot/ui/components/Calendar.utils"
-import {
-  NativeSelect,
-  NativeSelectOption,
-} from "@eggspot/ui/components/NativeSelect"
-import { cn } from "@eggspot/ui/lib/utils"
-import {
-  CalendarDate,
-  getLocalTimeZone,
-  parseDate,
-  today,
-} from "@internationalized/date"
-import { ChevronLeft, ChevronRight } from "lucide-react"
-import {
-  Button as AriaButton,
-  Calendar as AriaCalendar,
-  CalendarCell as AriaCalendarCell,
-  CalendarCellProps as AriaCalendarCellProps,
-  CalendarGrid as AriaCalendarGrid,
-  CalendarGridBody as AriaCalendarGridBody,
-  CalendarGridBodyProps as AriaCalendarGridBodyProps,
-  CalendarGridHeader as AriaCalendarGridHeader,
-  CalendarGridHeaderProps as AriaCalendarGridHeaderProps,
-  CalendarGridProps as AriaCalendarGridProps,
-  CalendarHeaderCell as AriaCalendarHeaderCell,
-  CalendarHeaderCellProps as AriaCalendarHeaderCellProps,
-  RangeCalendar as AriaRangeCalendar,
-  CalendarStateContext,
-  composeRenderProps,
-  RangeCalendarStateContext,
-  useLocale,
-} from "react-aria-components"
-
-const Calendar = AriaCalendar
-
-const RangeCalendar = AriaRangeCalendar
-
-const months = getCalendarMonths()
-const years = getCalendarYears()
-
-const CalendarHeading = (props: React.HTMLAttributes<HTMLElement>) => {
-  const { direction } = useLocale()
-  const calendarState = useContext(CalendarStateContext)
-  const rangeCalendarState = useContext(RangeCalendarStateContext)
-  const state = calendarState ?? rangeCalendarState
-
-  // RangeCalendar and Calendar have visibleRange.
-  const visibleStart = (state as any)?.visibleRange?.start as
-    | CalendarDate
-    | undefined
-
-  const baseDate =
-    state?.focusedDate ?? visibleStart ?? today(getLocalTimeZone())
-
-  return (
-    <header className="flex w-full items-center gap-0.5 pb-1" {...props}>
-      <h2 className="flex flex-1 items-center pl-1">
-        <NativeSelect
-          size="sm"
-          variant="ghost"
-          value={baseDate.month}
-          onChange={(e) => {
-            const month = Number(e.target.value)
-            const current =
-              state?.focusedDate ?? visibleStart ?? today(getLocalTimeZone())
-
-            const nextFocusedDate = new CalendarDate(
-              current.year,
-              month,
-              current.day
-            )
-            state?.setFocusedDate(nextFocusedDate)
-          }}
-        >
-          {months.map((month) => (
-            <NativeSelectOption key={month.value} value={month.value}>
-              {month.label}
-            </NativeSelectOption>
-          ))}
-        </NativeSelect>
-
-        <NativeSelect
-          size="sm"
-          variant="ghost"
-          value={baseDate.year}
-          onChange={(e) => {
-            const year = Number(e.target.value)
-            const current =
-              state?.focusedDate ?? visibleStart ?? today(getLocalTimeZone())
-
-            const nextFocusedDate = new CalendarDate(
-              year,
-              current.month,
-              current.day
-            )
-            state?.setFocusedDate(nextFocusedDate)
-          }}
-        >
-          {years.map((year) => (
-            <NativeSelectOption key={year} value={year}>
-              {year}
-            </NativeSelectOption>
-          ))}
-        </NativeSelect>
-      </h2>
-
-      <AriaButton
-        slot="previous"
-        className={cn(
-          buttonVariants({ variant: "ghost", intent: "secondary" }),
-          "text-accent-11 size-9 rounded-full bg-transparent p-0",
-          "data-disabled:opacity-40",
-          "data-hovered:bg-gray-2 data-hovered:text-accent-11 data-hovered:opacity-100"
-        )}
-      >
-        {direction === "rtl" ? (
-          <ChevronRight aria-hidden className="size-5" />
-        ) : (
-          <ChevronLeft aria-hidden className="size-5" />
-        )}
-      </AriaButton>
-
-      <AriaButton
-        slot="next"
-        className={cn(
-          buttonVariants({ variant: "ghost", intent: "secondary" }),
-          "text-accent-11 size-9 rounded-full bg-transparent p-0",
-          "data-disabled:opacity-40",
-          "data-hovered:bg-gray-2 data-hovered:text-accent-11 data-hovered:opacity-100"
-        )}
-      >
-        {direction === "rtl" ? (
-          <ChevronLeft aria-hidden className="size-5" />
-        ) : (
-          <ChevronRight aria-hidden className="size-5" />
-        )}
-      </AriaButton>
-    </header>
-  )
-}
-
-const CalendarGrid = ({ className, ...props }: AriaCalendarGridProps) => (
-  <AriaCalendarGrid
-    className={cn(
-      "border-separate border-spacing-x-0.5 border-spacing-y-0.5",
-      className
-    )}
-    {...props}
-  />
-)
-
-const CalendarGridHeader = ({ ...props }: AriaCalendarGridHeaderProps) => (
-  <AriaCalendarGridHeader {...props} />
-)
-
-const CalendarHeaderCell = ({
-  className,
-  ...props
-}: AriaCalendarHeaderCellProps) => (
-  <AriaCalendarHeaderCell
-    className={cn("w-9 rounded-md text-[0.8rem] font-normal", className)}
-    {...props}
-  />
-)
-
-const CalendarGridBody = ({
-  className,
-  ...props
-}: AriaCalendarGridBodyProps) => (
-  <AriaCalendarGridBody className={cn("[&>tr>td]:p-0", className)} {...props} />
-)
-
-const CalendarCell = ({ className, ...props }: AriaCalendarCellProps) => {
-  return (
-    <AriaCalendarCell
-      className={composeRenderProps(className, (className, renderProps) =>
-        cn(
-          "text-gray-12 select-none",
-          "relative flex size-9 items-center justify-center rounded-full p-0 text-sm font-normal transition-none",
-          /* Disabled */
-          renderProps.isDisabled && "text-gray-11 opacity-40",
-          /* Selected */
-          renderProps.isSelected &&
-            "bg-accent-9 text-accent-contrast data-[focused]:bg-accent-9",
-          /* Current Date */
-          renderProps.date.compare(today(getLocalTimeZone())) === 0 &&
-            !renderProps.isSelected &&
-            "text-accent-11",
-          /* Hovered */
-          renderProps.isHovered && "bg-neutral-400/20",
-          /* Outside Month */
-          renderProps.isOutsideMonth && "opacity-40",
-          /* Focused */
-          renderProps.isFocused && "ring-2 outline-none ring-inset",
-          className
-        )
-      )}
-      {...props}
-    />
-  )
-}
-
-/** Accepts values in the format YYYY-MM-DD */
-interface EgCalendarProps {
-  value?: string
-  onChange?: (date: string) => void
-  defaultValue?: string
-  minValue?: string
-  maxValue?: string
-  variant?: "default" | "unstyled"
-  className?: string
-}
-
-function EgCalendar({
-  value: controlledValue,
-  onChange: controlledOnChange,
-  defaultValue,
-  minValue,
-  maxValue,
-  className,
-  variant = "default",
-}: EgCalendarProps) {
-  const [uncontrolledValue, setUncontrolledValue] = React.useState<
-    string | undefined
-  >(defaultValue)
-
-  const value = controlledValue ?? uncontrolledValue
-  const onChange = controlledOnChange ?? setUncontrolledValue
-
-  return (
-    <Calendar
-      value={value ? parseDate(value) : null}
-      onChange={(value) => onChange(value?.toString())}
-      className={composeRenderProps(className, (className) =>
-        cn(
-          "w-fit",
-          variant === "default" ? "bg-gray-3/40 rounded-lg border p-1" : "",
-          className
-        )
-      )}
-      minValue={minValue ? parseDate(minValue) : null}
-      maxValue={maxValue ? parseDate(maxValue) : null}
-    >
-      <CalendarHeading />
-      <CalendarGrid>
-        <CalendarGridHeader>
-          {(day) => <CalendarHeaderCell>{day}</CalendarHeaderCell>}
-        </CalendarGridHeader>
-        <CalendarGridBody>
-          {(date) => <CalendarCell date={date} />}
-        </CalendarGridBody>
-      </CalendarGrid>
-    </Calendar>
-  )
-}
-
-export {
-  Calendar,
-  CalendarCell,
-  CalendarGrid,
-  CalendarGridBody,
-  CalendarGridHeader,
-  CalendarHeaderCell,
-  CalendarHeading,
-  EgCalendar,
-  RangeCalendar,
-}
-export type { EgCalendarProps }

package/src/components/Calendar.utils.tsx

@@ -1,22 +0,0 @@
-import { MAX_YEAR_FROM_NOW, MIN_YEAR } from "@eggspot/ui/consts/config"
-import { DateFormatter } from "@internationalized/date"
-import dayjs from "dayjs"
-
-export const getCalendarYears = () => {
-  const startYear = MIN_YEAR
-  const endYear = dayjs().year() + MAX_YEAR_FROM_NOW
-  const years = Array.from(
-    { length: endYear - startYear + 1 },
-    (_, i) => startYear + i
-  )
-  return years
-}
-
-export const getCalendarMonths = (locale = "en-US") => {
-  const formatter = new DateFormatter(locale, { month: "short" })
-
-  return Array.from({ length: 12 }, (_, i) => ({
-    value: i + 1,
-    label: formatter.format(new Date(2020, i, 1)),
-  }))
-}

package/src/components/Checkbox.tsx

@@ -1,199 +0,0 @@
-"use client"
-
-import { Label, labelVariants } from "@eggspot/ui/components/Label"
-import { cn } from "@eggspot/ui/lib/utils"
-import { useControllableState } from "@radix-ui/react-use-controllable-state"
-import { cva } from "class-variance-authority"
-import { Check, Minus } from "lucide-react"
-import {
-  Checkbox as AriaCheckbox,
-  CheckboxGroup as AriaCheckboxGroup,
-  CheckboxGroupProps as AriaCheckboxGroupProps,
-  composeRenderProps,
-  type CheckboxProps as AriaCheckboxProps,
-} from "react-aria-components"
-
-const checkboxVariants = cva(
-  ["group/checkbox flex cursor-pointer items-center text-sm"],
-  {
-    variants: {
-      variant: {
-        default: ["group/default gap-x-2"],
-        card: [
-          "gap-x-3.5",
-          "border-gray-7 rounded-md border p-3.5",
-          /* Selected */
-          "bg-gray-2 data-selected:border-accent-9 data-selected:bg-accent-2 data-selected:border-1",
-          /* Hovered */
-          "data-hovered:border-gray-8",
-          /* Focus Visible */
-          "ring-offset-2 data-focus-visible:ring-2 data-pressed:scale-[0.99]",
-          /* Invalid */
-          "data-[invalid]:text-error-11",
-        ],
-      },
-    },
-  }
-)
-
-function Checkbox({
-  className,
-  children,
-  variant = "default",
-  reduceMotion = false,
-  isDisabled,
-  readOnly,
-  ...props
-}: AriaCheckboxProps & {
-  variant?: "default" | "card"
-  reduceMotion?: boolean
-  readOnly?: boolean
-}) {
-  return (
-    <AriaCheckbox
-      className={composeRenderProps(className, (className) =>
-        cn(checkboxVariants({ variant }), labelVariants, className)
-      )}
-      isDisabled={isDisabled || readOnly}
-      {...props}
-    >
-      {composeRenderProps(children, (children, renderProps) => (
-        <>
-          <div
-            className={cn(
-              "transition-all duration-150",
-              reduceMotion && "transition-none",
-              "bg-gray-2 text-accent-contrast ring-offset-gray-1 flex size-4 shrink-0 items-center justify-center rounded-sm border",
-              /* Focus Visible */
-              "group-data-[focus-visible]/default:ring-2 group-data-[focus-visible]/default:ring-offset-2 group-data-[focus-visible]/default:outline-none",
-              /* Selected */
-              "group-data-[indeterminate]/checkbox:bg-accent-9 group-data-[selected]/checkbox:bg-accent-9 group-data-[indeterminate]/checkbox:border-accent-9 group-data-[selected]/checkbox:border-accent-9",
-              /* Hovered */
-              "group-data-hovered/checkbox:border-gray-8",
-              /* Disabled */
-              !readOnly &&
-                "group-data-[disabled]:cursor-not-allowed group-data-[disabled]/checkbox:cursor-not-allowed group-data-[disabled]/checkbox:opacity-80",
-              /* Resets */
-              "focus:outline-none focus-visible:outline-none",
-              /* Pressed */
-              "group-data-pressed/checkbox:scale-[0.95]"
-            )}
-          >
-            {renderProps.isIndeterminate ? (
-              <Minus
-                className={cn(
-                  "animate-in zoom-in-60 fade-in size-5",
-                  reduceMotion && "animate-none"
-                )}
-              />
-            ) : renderProps.isSelected ? (
-              <Check
-                className={cn(
-                  "animate-in zoom-in-60 fade-in size-5",
-                  reduceMotion && "animate-none"
-                )}
-              />
-            ) : null}
-          </div>
-          {children}
-        </>
-      ))}
-    </AriaCheckbox>
-  )
-}
-
-interface CheckboxOption {
-  value: string | number
-  label: string
-}
-
-interface CheckboxGroupProps<T extends CheckboxOption>
-  extends Omit<AriaCheckboxGroupProps, "value" | "onChange" | "defaultValue"> {
-  /** The label for the checkbox group. */
-  label?: string
-
-  /** The options for the checkbox group. */
-  options: Array<T>
-
-  /** The variant for the checkbox group. */
-  variant?: "default" | "card"
-
-  /** The class name for the checkbox group. */
-  className?: string
-
-  /** Whether to show an asterisk for the label. */
-  withAsterisk?: boolean
-
-  /** The tooltip for the checkbox group. */
-  tooltip?: React.ReactNode
-
-  /** Custom rendering function for each option in the checkbox group. */
-  renderOption?: (option: T) => React.ReactNode
-
-  /** If this prop is set, the checkbox group operates in a controlled manner and uses this value as its state. */
-  value?: Array<T>
-
-  /** If this prop is set, the checkbox group will call this function with the new value whenever the value changes. */
-  onChange?: (value: Array<T>) => void
-
-  /** Initial value used when the component is uncontrolled. */
-  defaultValue?: Array<T>
-}
-
-function CheckboxGroup<T extends CheckboxOption>({
-  options,
-  renderOption,
-  variant = "default",
-  className,
-  label,
-  withAsterisk,
-  tooltip,
-  value: controlledValue,
-  onChange: controlledOnChange,
-  defaultValue,
-  ...props
-}: CheckboxGroupProps<T>) {
-  const [value, onChange] = useControllableState({
-    prop: controlledValue,
-    defaultProp: defaultValue ?? [],
-    onChange: controlledOnChange,
-  })
-
-  return (
-    <AriaCheckboxGroup
-      className="grid gap-1.5"
-      value={value.map((v) => JSON.stringify(v))}
-      onChange={(v) => onChange(v.map((v) => JSON.parse(v)))}
-      {...props}
-    >
-      {label && (
-        <Label withAsterisk={withAsterisk} tooltip={tooltip}>
-          {label}
-        </Label>
-      )}
-      <div
-        className={cn(
-          "grid",
-          variant === "card" && "gap-2.5",
-          variant === "default" && "gap-1.5",
-          className
-        )}
-      >
-        {options.map((option) => {
-          return (
-            <Checkbox
-              key={option.value}
-              value={JSON.stringify(option)}
-              variant={variant}
-            >
-              {renderOption ? renderOption(option) : option.label}
-            </Checkbox>
-          )
-        })}
-      </div>
-    </AriaCheckboxGroup>
-  )
-}
-
-export { Checkbox, CheckboxGroup }
-export type { CheckboxGroupProps, CheckboxOption }

package/src/components/ConfirmDialog.tsx

@@ -1,183 +0,0 @@
-"use client"
-
-import React, { useState } from "react"
-import { Button } from "@eggspot/ui/components/Button"
-import {
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@eggspot/ui/components/Dialog"
-import { Form } from "@eggspot/ui/components/Form"
-import { zodResolver } from "@hookform/resolvers/zod"
-import { createStore } from "@xstate/store"
-import { useSelector } from "@xstate/store/react"
-import { useForm, UseFormReturn } from "react-hook-form"
-import { z } from "zod"
-
-const AsyncFunction = Object.getPrototypeOf(async function () {}).constructor
-
-interface ConfirmDialogContext<T extends z.ZodSchema<any, any>> {
-  /** Indicates whether the confirm dialog is open */
-  isOpen: boolean
-
-  /** Data for the confirm dialog, including title, description, and actions */
-  data?: {
-    /** Whether to dismiss the dialog when the user clicks outside of it */
-    isDismissable?: boolean
-
-    /** The title displayed in the confirm dialog */
-    title: string
-
-    /** Optional description displayed in the confirm dialog */
-    description?: string
-
-    /** Text for the confirm action button */
-    continueText?: string
-
-    /** Text for the cancel action button */
-    cancelText?: string
-
-    /** Optional variant for the action button */
-    intent?: "primary" | "danger"
-
-    /** Callback function to be called when the confirm action is clicked */
-    onContinue?: (values: z.infer<T>) => Promise<void> | void
-
-    /** Callback function to be called when the cancel action is clicked */
-    onCancel?: (values: z.infer<T>) => void
-
-    form?: {
-      schema?: T
-      /** Displays the content of the confirm dialog, wrapped in the context of React Hook Form, allowing you to add any fields using react-hook-form. */
-      content?: (
-        form: UseFormReturn<z.infer<T>, any, z.infer<T>>
-      ) => React.ReactNode
-    }
-  }
-}
-
-const confirmStore = createStore({
-  context: {
-    isOpen: false,
-  } as ConfirmDialogContext<any>,
-  on: {
-    open: (_, data: ConfirmDialogContext<any>["data"]) => ({
-      isOpen: true,
-      data,
-    }),
-    close: (context) => ({ ...context, isOpen: false }),
-  },
-})
-
-const { open, close } = confirmStore.trigger
-
-function confirm<T extends z.ZodSchema<any, any>>(
-  data: ConfirmDialogContext<T>["data"]
-) {
-  if (!data) return
-
-  open(data)
-}
-
-function ConfirmDialog() {
-  const [isPending, setIsPending] = useState(false)
-  const isOpen = useSelector(confirmStore, (state) => state.context.isOpen)
-  const data = useSelector(confirmStore, (state) => state.context.data)
-  const intent = data?.intent || "primary"
-
-  const form = useForm({
-    defaultValues: data?.form?.schema,
-    resolver: data?.form?.schema ? zodResolver(data.form.schema) : undefined,
-  })
-
-  const handleClose = () => {
-    close()
-    setTimeout(() => {
-      form.reset()
-      setIsPending(false)
-    }, 200)
-  }
-
-  const handleCancel = () => {
-    data?.onCancel?.(form.getValues())
-    handleClose()
-  }
-
-  const handleSubmit = form.handleSubmit((values) => {
-    if (!data?.onContinue) {
-      handleClose()
-      return
-    }
-
-    if (data.onContinue instanceof AsyncFunction) {
-      setIsPending(true)
-      const onContinueAsync = data.onContinue as (values: any) => Promise<void>
-      onContinueAsync(values)
-        .then(() => {
-          handleClose()
-        })
-        .catch(() => {
-          setIsPending(false)
-        })
-      return
-    }
-
-    data?.onContinue?.(values)
-    handleClose()
-    return
-  })
-
-  return (
-    <DialogTrigger
-      isOpen={isOpen}
-      onOpenChange={(isOpen) => {
-        if (!isOpen) {
-          close()
-          setTimeout(() => {
-            form.reset()
-          }, 200)
-        }
-      }}
-    >
-      <DialogContent
-        isDismissable={data?.isDismissable ?? false}
-        className="md:max-w-[500px]"
-        closeButton={false}
-      >
-        <Form {...form}>
-          <form onSubmit={handleSubmit} className="flex flex-col gap-4">
-            <DialogHeader>
-              <DialogTitle>{data?.title || "Confirm"}</DialogTitle>
-              <DialogDescription>
-                {data?.description || "Are you sure you want to confirm?"}
-              </DialogDescription>
-            </DialogHeader>
-            {data?.form?.content && data.form.content(form)}
-            <DialogFooter>
-              <Button
-                variant="minimal"
-                onClick={handleCancel}
-                isDisabled={isPending}
-              >
-                {data?.cancelText || "Cancel"}
-              </Button>
-              <Button
-                type="submit"
-                variant="solid"
-                intent={intent}
-                isLoading={isPending}
-              >
-                {data?.continueText || "Continue"}
-              </Button>
-            </DialogFooter>
-          </form>
-        </Form>
-      </DialogContent>
-    </DialogTrigger>
-  )
-}
-
-export { confirm, ConfirmDialog }