@eggspot/ui 0.0.2 → 0.0.3

package/src/components/DataTable/types/data-table.ts

@@ -1,97 +0,0 @@
-import { ButtonProps } from "@eggspot/ui/components/Button"
-import {
-  ColumnDef,
-  ColumnPinningState,
-  ColumnSizingState,
-  InitialTableState,
-  Table,
-  TableState,
-  VisibilityState,
-} from "@tanstack/react-table"
-
-import { FilterValue } from "../../Filter"
-
-export interface DataTableProps<TData> {
-  /** Columns to display */
-  columns: ColumnDef<TData, any>[]
-  /** Data to display */
-  data: TData[]
-  /** Whether the data is fetched from the server or client */
-  dataSource?: "server" | "client"
-  /** Whether the data is loading */
-  isLoading?: boolean
-  /** Whether the data is fetching */
-  isFetching?: boolean
-  /** Whether the data is error */
-  isError?: boolean
-  /** Error message */
-  errorMessage?: string
-
-  /** Render a toolbar */
-  filterBar?: (clientFilterProps: {
-    value?: FilterValue
-    onChange?: (value: FilterValue) => void
-  }) => React.ReactNode
-  /** Render an action bar */
-  actionBar?: ({
-    table,
-  }: {
-    table: Table<TData>
-    clearSelection: () => void
-  }) => React.ReactNode
-
-  /** Initial state for the table */
-  initialState?: InitialTableState
-  /** Callback when the state changes */
-  onStateChange?: (state: TableState) => void
-  /** Total number of rows for server-side pagination */
-  rowCount?: number
-
-  /** Whether to enable row selection */
-  enableRowSelection?: boolean
-
-  /** Key to store the display settings in localStorage */
-  storageKey?: string
-  defaultColumnVisibility?: VisibilityState
-  defaultColumnSizing?: ColumnSizingState
-  defaultColumnPinning?: ColumnPinningState
-  defaultColumnOrder?: string[]
-
-  /** Estimated row height for virtualization */
-  estimatedRowHeight?: number
-
-  /** Title for the empty state */
-  emptyStateTitle?: string
-  /** Description for the empty state */
-  emptyStateDescription?: string
-}
-
-export interface SortingState {
-  id: string
-  desc: boolean
-}
-
-export interface BulkAction {
-  label: string
-  leftIcon?: React.ReactNode
-  onClick: (selectedRows: Record<string, boolean>) => void
-  intent?: ButtonProps["intent"]
-  variant?: ButtonProps["variant"]
-  size?: ButtonProps["size"]
-}
-
-export interface DisplaySettings {
-  columnVisibility: VisibilityState
-  columnSizing: ColumnSizingState
-  columnPinning: ColumnPinningState
-  columnOrder: string[]
-}
-
-export interface DataTableState {
-  sorting: SortingState[]
-  columnVisibility: VisibilityState
-  columnSizing: ColumnSizingState
-  columnPinning: ColumnPinningState
-  columnOrder: string[]
-  rowSelection: Record<string, boolean>
-}

package/src/components/DatePicker.tsx

@@ -1,213 +0,0 @@
-"use client"
-
-import { useContext } from "react"
-import { Button } from "@eggspot/ui/components/Button"
-import {
-  Calendar,
-  CalendarCell,
-  CalendarGrid,
-  CalendarGridBody,
-  CalendarGridHeader,
-  CalendarHeaderCell,
-  CalendarHeading,
-} from "@eggspot/ui/components/Calendar"
-import { DateInput } from "@eggspot/ui/components/Datefield"
-import { parse, toValidYear } from "@eggspot/ui/components/DatePicker.utils"
-import { FieldGroup } from "@eggspot/ui/components/Field"
-import { Label } from "@eggspot/ui/components/Label"
-import { Popover } from "@eggspot/ui/components/Popover"
-import { cn } from "@eggspot/ui/lib/utils"
-import { getLocalTimeZone } from "@internationalized/date"
-import { useControllableState } from "@radix-ui/react-use-controllable-state"
-import dayjs from "dayjs"
-import { CalendarIcon } from "lucide-react"
-import {
-  DatePicker as AriaDatePicker,
-  Dialog as AriaDialog,
-  DialogProps as AriaDialogProps,
-  PopoverProps as AriaPopoverProps,
-  composeRenderProps,
-  DatePickerStateContext,
-  I18nProvider,
-} from "react-aria-components"
-
-const DatePicker = AriaDatePicker
-
-const DatePickerContent = ({
-  className,
-  popoverClassName,
-  ...props
-}: AriaDialogProps & { popoverClassName?: AriaPopoverProps["className"] }) => (
-  <Popover
-    animateOut={false}
-    className={composeRenderProps(popoverClassName, (className) =>
-      cn("w-auto p-1", className)
-    )}
-    placement="bottom right"
-  >
-    <AriaDialog
-      className={cn(
-        "flex w-full flex-col space-y-4 outline-none sm:flex-row sm:space-y-0 sm:space-x-4",
-        className
-      )}
-      {...props}
-    />
-  </Popover>
-)
-
-interface EggDatePickerProps {
-  /* The current value for the DatePicker (controlled). */
-  value?: Date
-
-  /* Callback fired when the date value changes. */
-  onChange?: (value?: Date) => void
-
-  /* The initial value for the DatePicker (uncontrolled). */
-  defaultValue?: Date
-
-  /* The minimum selectable date. */
-  minValue?: Date
-
-  /* The maximum selectable date. */
-  maxValue?: Date
-
-  /* Whether the DatePicker should be disabled. */
-  isDisabled?: boolean
-
-  /* Whether the DatePicker is in an invalid state. */
-  isInvalid?: boolean
-
-  /* The label to display for the DatePicker. */
-  label?: string
-
-  /* If true, an asterisk will be shown next to the label to mark it as required. */
-  withAsterisk?: boolean
-
-  /* The tooltip for the DatePicker. */
-  tooltip?: React.ReactNode
-
-  /* The level of date/time granularity ('day' for date only, 'minute' for date and time). Default is 'day'. */
-  granularity?: "day" | "minute"
-
-  /* The time format for time picker: 12 or 24 hour cycle. Default is 24. */
-  hourCycle?: 12 | 24
-
-  /* The format of the date. Default is 'dd/mm/yyyy'. */
-  format?: "dd/mm/yyyy" | "mm/dd/yyyy" | "yyyy-mm-dd"
-}
-
-function EggDatePicker({
-  value: controlledValue,
-  onChange: controlledOnChange,
-  defaultValue,
-  minValue,
-  maxValue,
-  isDisabled,
-  isInvalid,
-  label,
-  withAsterisk,
-  tooltip,
-  granularity = "day",
-  hourCycle = 24,
-  format = "dd/mm/yyyy",
-}: EggDatePickerProps) {
-  const [value, onChange] = useControllableState<Date | undefined>({
-    prop: controlledValue,
-    defaultProp: defaultValue,
-    onChange: controlledOnChange,
-  })
-
-  let locale = "en-AU"
-
-  if (format === "dd/mm/yyyy") {
-    locale = "en-AU"
-  } else if (format === "mm/dd/yyyy") {
-    locale = "en-US"
-  } else if (format === "yyyy-mm-dd") {
-    locale = "en-CA"
-  }
-
-  return (
-    <I18nProvider locale={locale}>
-      <DatePicker
-        aria-label="Date Picker"
-        className={"flex w-full flex-col gap-1.5"}
-        value={parse(value, granularity)}
-        onChange={(value) => onChange(value?.toDate(getLocalTimeZone()))}
-        minValue={minValue ? parse(minValue) : null}
-        maxValue={maxValue ? parse(maxValue) : null}
-        isDisabled={isDisabled}
-        granularity={granularity}
-        hourCycle={hourCycle}
-        isInvalid={isInvalid}
-        hideTimeZone
-        onBlur={() => {
-          if (value) {
-            onChange(toValidYear(value))
-          }
-        }}
-      >
-        {label && (
-          <Label withAsterisk={withAsterisk} tooltip={tooltip}>
-            {label}
-          </Label>
-        )}
-        <FieldGroup className="has-[button[aria-expanded=true]]:ring-accent-9 pr-2.5 has-[button[aria-expanded=true]]:ring-2">
-          <DateInput className="flex-1" variant="ghost" />
-          <Button
-            mode="icon"
-            size="sm"
-            variant="ghost"
-            intent="secondary"
-            tooltip="Select Date"
-            tooltipDelay={2000}
-            className="-mr-1 size-6 data-[focus-visible]:ring-offset-0"
-            isDisabled={isDisabled}
-          >
-            <CalendarIcon aria-hidden className="text-gray-11 size-4" />
-          </Button>
-        </FieldGroup>
-        <span className="text-gray-11 text-xs leading-none">{format}</span>
-        <DatePickerContent>
-          <div>
-            <Calendar>
-              <CalendarHeading />
-              <CalendarGrid>
-                <CalendarGridHeader>
-                  {(day) => <CalendarHeaderCell>{day}</CalendarHeaderCell>}
-                </CalendarGridHeader>
-                <CalendarGridBody>
-                  {(date) => <CalendarCell date={date} />}
-                </CalendarGridBody>
-              </CalendarGrid>
-            </Calendar>
-            <div className="flex justify-center py-1">
-              <TodayButton />
-            </div>
-          </div>
-        </DatePickerContent>
-      </DatePicker>
-    </I18nProvider>
-  )
-}
-
-function TodayButton() {
-  const state = useContext(DatePickerStateContext)
-
-  return (
-    <Button
-      size="sm"
-      variant="ghost"
-      intent="primary"
-      onClick={() => {
-        state?.setValue(parse(dayjs().startOf("day").toDate()))
-        state?.close()
-      }}
-    >
-      Today
-    </Button>
-  )
-}
-
-export { EggDatePicker as DatePicker }
-export type { EggDatePickerProps as DatePickerProps }

package/src/components/DatePicker.utils.tsx

@@ -1,38 +0,0 @@
-import { MAX_YEAR_FROM_NOW, MIN_YEAR } from "@eggspot/ui/consts/config"
-import {
-  parseAbsoluteToLocal,
-  toCalendarDate,
-  toCalendarDateTime,
-} from "@internationalized/date"
-import dayjs from "dayjs"
-import { clamp } from "lodash"
-
-export const parse = (date?: Date, granularity?: "day" | "minute") => {
-  if (
-    !date ||
-    !(date instanceof Date) ||
-    typeof date.toISOString !== "function"
-  ) {
-    return null
-  }
-
-  const value = parseAbsoluteToLocal(date.toISOString())
-
-  if (granularity === "day") {
-    return toCalendarDate(value)
-  }
-
-  return toCalendarDateTime(value)
-}
-
-export const toValidYear = (date: Date): Date => {
-  let newDate = dayjs(date)
-  const validYear = clamp(
-    newDate.year(),
-    MIN_YEAR,
-    dayjs().year() + MAX_YEAR_FROM_NOW
-  )
-  newDate = newDate.year(validYear)
-
-  return newDate.toDate()
-}

package/src/components/Datefield.tsx

@@ -1,109 +0,0 @@
-"use client"
-
-import React from "react"
-import { fieldGroupVariants } from "@eggspot/ui/components/Field"
-import { cn } from "@eggspot/ui/lib/utils"
-import { parseDate } from "@internationalized/date"
-import { VariantProps } from "class-variance-authority"
-import {
-  DateField as AriaDateField,
-  DateInput as AriaDateInput,
-  DateInputProps as AriaDateInputProps,
-  DateSegment as AriaDateSegment,
-  DateSegmentProps as AriaDateSegmentProps,
-  TimeField as AriaTimeField,
-  composeRenderProps,
-} from "react-aria-components"
-
-const DateField = AriaDateField
-
-const TimeField = AriaTimeField
-
-function DateSegment({ className, ...props }: AriaDateSegmentProps) {
-  return (
-    <AriaDateSegment
-      className={composeRenderProps(className, (className) =>
-        cn(
-          "type-literal:px-0 inline rounded-sm px-[1px] caret-transparent outline-0",
-          /* Placeholder */
-          "data-[placeholder]:text-gray-11",
-          /* Disabled */
-          "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-70",
-          /* Focused */
-          "data-[focused]:bg-accent-9 data-[focused]:text-accent-contrast data-[focused]:data-[placeholder]:text-accent-contrast",
-          className
-        )
-      )}
-      {...props}
-    />
-  )
-}
-
-interface DateInputProps
-  extends AriaDateInputProps,
-    VariantProps<typeof fieldGroupVariants> {}
-
-function DateInput({
-  className,
-  variant,
-  ...props
-}: Omit<DateInputProps, "children">) {
-  return (
-    <AriaDateInput
-      className={composeRenderProps(className, (className) =>
-        cn(fieldGroupVariants({ variant }), "md:text-sm", className)
-      )}
-      {...props}
-    >
-      {(segment) => <DateSegment segment={segment} />}
-    </AriaDateInput>
-  )
-}
-
-/** Accepts values in the format YYYY-MM-DD */
-interface EGDateFieldProps {
-  value?: string
-  onChange?: (value: string) => void
-  defaultValue?: string
-  className?: string
-  variant?: "default" | "unstyled"
-  minValue?: string
-  maxValue?: string
-  isDisabled?: boolean
-}
-
-function EGDateField({
-  value: controlledValue,
-  onChange: controlledOnChange,
-  defaultValue,
-  minValue,
-  maxValue,
-  className,
-  isDisabled,
-  ...props
-}: EGDateFieldProps) {
-  const [uncontrolledValue, setUncontrolledValue] = React.useState<
-    string | undefined
-  >(defaultValue)
-
-  const value = controlledValue ?? uncontrolledValue
-  const onChange = controlledOnChange ?? setUncontrolledValue
-
-  return (
-    <DateField
-      aria-label="Date Field"
-      className={cn("w-full", className)}
-      value={value ? parseDate(value) : null}
-      onChange={(value) => onChange(value?.toString() ?? "")}
-      minValue={minValue ? parseDate(minValue) : null}
-      maxValue={maxValue ? parseDate(maxValue) : null}
-      isDisabled={isDisabled}
-      {...props}
-    >
-      <DateInput />
-    </DateField>
-  )
-}
-
-export { DateField, DateInput, DateSegment, EGDateField, TimeField }
-export type { DateInputProps, EGDateFieldProps }

package/src/components/Datefield.utils.ts

@@ -1,10 +0,0 @@
-import { Time } from "@internationalized/date"
-
-export const parseTime = (time: string) => {
-  try {
-    const timeArray = time.split(":").map(Number)
-    return new Time(...timeArray)
-  } catch (error) {
-    return null
-  }
-}

package/src/components/Dialog.tsx

@@ -1,167 +0,0 @@
-"use client"
-
-import React from "react"
-import { Button } from "@eggspot/ui/components/Button"
-import { cn } from "@eggspot/ui/lib/utils"
-import { X } from "lucide-react"
-import {
-  Dialog as AriaDialog,
-  DialogProps as AriaDialogProps,
-  DialogTrigger as AriaDialogTrigger,
-  Heading as AriaHeading,
-  HeadingProps as AriaHeadingProps,
-  Modal as AriaModal,
-  ModalOverlay as AriaModalOverlay,
-  ModalOverlayProps as AriaModalOverlayProps,
-  composeRenderProps,
-} from "react-aria-components"
-
-const Dialog = AriaDialog
-
-const DialogTrigger = AriaDialogTrigger
-
-const DialogOverlay = ({
-  className,
-  isDismissable = true,
-  ...props
-}: AriaModalOverlayProps) => (
-  <AriaModalOverlay
-    isDismissable={isDismissable}
-    className={composeRenderProps(className, (className) =>
-      cn(
-        "fixed inset-0 z-50 h-[var(--page-height)] bg-black/50",
-        /* Exiting */
-        "data-[exiting]:animate-out data-[exiting]:fade-out-0 max-md:data-[exiting]:duration-300",
-        /* Entering */
-        "data-[entering]:animate-in data-[entering]:fade-in-0 max-md:data-[entering]:duration-300",
-        className
-      )
-    )}
-    {...props}
-  />
-)
-
-interface DialogContentProps
-  extends Omit<React.ComponentProps<typeof AriaModal>, "children"> {
-  children?: AriaDialogProps["children"]
-  role?: AriaDialogProps["role"]
-  /** Whether to show the close button */
-  closeButton?: boolean
-
-  /** Whether to dismiss the dialog when the user clicks outside of it */
-  isDismissable?: boolean
-}
-
-const DialogContent = ({
-  className,
-  children,
-  role,
-  closeButton = true,
-  isDismissable = true,
-  ...props
-}: DialogContentProps) => (
-  <DialogOverlay isDismissable={isDismissable}>
-    <AriaModal
-      className={composeRenderProps(className, (className) =>
-        cn(
-          "bg-gray-1 fixed left-[50vw] z-50 max-h-[var(--visual-viewport-height)] w-full max-w-[calc(100vw-40px)] -translate-x-1/2 -translate-y-1/2 rounded-xl p-5 shadow-2xl md:max-w-lg dark:border",
-          "data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in-0 data-[exiting]:fade-out-0",
-          "md:data-[entering]:zoom-in-97 md:data-[exiting]:zoom-out-97",
-          "max-md:data-[entering]:slide-in-from-bottom-5 max-md:data-[exiting]:slide-out-to-bottom-5 max-md:data-[exiting]:duration-300",
-          className
-        )
-      )}
-      style={{
-        // This is an exceptional case where we can't use Tailwind, so we have to apply the style directly
-        top: "calc(var(--visual-viewport-height) / 2)",
-      }}
-      {...props}
-    >
-      <AriaDialog
-        role={role}
-        className={cn("grid h-full gap-4", "h-full outline-none")}
-      >
-        {composeRenderProps(children, (children, renderProps) => (
-          <>
-            {children}
-            {closeButton && (
-              <Button
-                onClick={renderProps.close}
-                mode="icon"
-                variant="ghost"
-                tooltip="Close"
-                tooltipDelay={2000}
-                className="absolute top-2.5 right-2.5"
-              >
-                <X className="text-gray-11 size-4!" />
-                <span className="sr-only">Close</span>
-              </Button>
-            )}
-          </>
-        ))}
-      </AriaDialog>
-    </AriaModal>
-  </DialogOverlay>
-)
-
-const DialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-)
-
-const DialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-      className
-    )}
-    {...props}
-  />
-)
-
-const DialogTitle = ({ className, ...props }: AriaHeadingProps) => (
-  <AriaHeading
-    slot="title"
-    className={cn(
-      "text-lg leading-none font-semibold tracking-tight",
-      className
-    )}
-    {...props}
-  />
-)
-
-const DialogDescription = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLParagraphElement>) => (
-  <p
-    className={cn(
-      "text-gray-11 flex flex-col space-y-1.5 text-center text-sm sm:text-left",
-      className
-    )}
-    {...props}
-  />
-)
-
-export {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogTitle,
-  DialogTrigger,
-}
-export type { DialogContentProps }

package/src/components/Field.tsx

@@ -1,49 +0,0 @@
-"use client"
-
-import { cn } from "@eggspot/ui/lib/utils"
-import { cva, type VariantProps } from "class-variance-authority"
-import {
-  Group as AriaGroup,
-  GroupProps as AriaGroupProps,
-  composeRenderProps,
-} from "react-aria-components"
-
-const fieldGroupVariants = cva("", {
-  variants: {
-    variant: {
-      default: [
-        "bg-gray-2 relative flex h-8 w-full items-center overflow-hidden rounded-md px-3 py-2 transition-all md:text-sm",
-        "ring-gray-7 ring",
-        /* SVGs */
-        "[&_svg]:text-gray-11 [&_svg]:pointer-events-none [&_svg]:size-[14px] [&_svg]:shrink-0 [&_svg]:stroke-2",
-        /* Focus Within */
-        "data-[focus-within]:ring-accent-9 data-[focus-within]:ring-2",
-        /* Disabled */
-        "data-[disabled]:opacity-60",
-        /* Invalid */
-        "data-[invalid]:ring-error-9 aria-invalid:ring-error-9",
-      ],
-      ghost: "",
-    },
-  },
-  defaultVariants: {
-    variant: "default",
-  },
-})
-
-interface GroupProps
-  extends AriaGroupProps,
-    VariantProps<typeof fieldGroupVariants> {}
-
-function FieldGroup({ className, variant, ...props }: GroupProps) {
-  return (
-    <AriaGroup
-      className={composeRenderProps(className, (className) =>
-        cn(fieldGroupVariants({ variant }), className)
-      )}
-      {...props}
-    />
-  )
-}
-
-export { FieldGroup, fieldGroupVariants }