@eggspot/ui 0.0.0

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

@@ -0,0 +1,97 @@
+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

@@ -0,0 +1,213 @@
+"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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,109 @@
+"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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,167 @@
+"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

@@ -0,0 +1,49 @@
+"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 }