@eggspot/ui 0.0.0

package/eslint.config.js

@@ -0,0 +1,4 @@
+import { config } from "@workspace/eslint-config/react-internal"
+
+/** @type {import("eslint").Linter.Config} */
+export default config

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@eggspot/ui",
+  "version": "0.0.0",
+  "type": "module",
+  "private": false,
+  "scripts": {
+    "lint": "eslint . --max-warnings 0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@hookform/resolvers": "catalog:",
+    "@internationalized/date": "^3.10.0",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-use-controllable-state": "^1.2.2",
+    "@tanstack/react-table": "catalog:",
+    "@tanstack/react-virtual": "^3.13.13",
+    "@xstate/react": "^6.0.0",
+    "@xstate/store": "^3.11.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "dayjs": "^1.11.19",
+    "input-otp": "^1.4.2",
+    "lodash": "catalog:",
+    "lucide-react": "catalog:",
+    "next-themes": "catalog:",
+    "radix-ui": "^1.4.3",
+    "react": "catalog:",
+    "react-aria-components": "^1.13.0",
+    "react-dom": "catalog:",
+    "react-hook-form": "catalog:",
+    "react-resizable-panels": "^3.0.6",
+    "react-use": "catalog:",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.3.1",
+    "tailwind-variants": "^3.1.1",
+    "tw-animate-css": "^1.3.6",
+    "xstate": "^5.24.0",
+    "zod": "catalog:"
+  },
+  "devDependencies": {
+    "@eggspot/theme": "workspace:*",
+    "@turbo/gen": "^2.5.5",
+    "@types/lodash": "catalog:",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "@workspace/eslint-config": "workspace:*",
+    "@workspace/typescript-config": "workspace:*",
+    "typescript": "catalog:"
+  },
+  "exports": {
+    "./globals.css": "./src/styles/globals.css",
+    "./postcss.config": "./postcss.config.mjs",
+    "./lib/*": "./src/lib/*.ts",
+    "./components/*": "./src/components/*.tsx",
+    "./hooks/*": "./src/hooks/*.ts",
+    "./consts/*": "./src/consts/*.ts"
+  }
+}

package/postcss.config.mjs

@@ -0,0 +1 @@
+export { default } from "@eggspot/theme/postcss.config"

package/src/components/Button.machine.tsx

@@ -0,0 +1,50 @@
+import { assign, createMachine } from "xstate"
+
+export const countdownMachine = createMachine({
+  /** @xstate-layout N4IgpgJg5mDOIC5QGMD2BXAdgFwqg7pgHQCSmAltuQIYA2AxAMoAqAggErMDaADALqJQAB1SxK5VJkEgAHogC0ARgBMADiIB2ACwBWVVoCcqnhoDMGsxoA0IAJ6JzGojoNrl7jTwBsXjaoC+-jZoWLgExADCGDjkmFD0MrDY1NhgRNQAZqkATgAUijyFAJT0ITh4hERRobFQvAJIICJiVJLScggGOkQGGnoGpl08Blq+qjb2CMqKTjOqGq5epvpGy4HB0WGV1TFxCUkpaZk5+YU8JWVbkZu1XIoNwqLibY0dWspEJu+K8zoTiDpFERvr9AkEQJhUBA4NJLhUpI1ms8EaAOvJTCoiKZTEtVKoCtpvF5-gh0V5Pn4VDp1iA4eFSBQqHRpEjWijZAplF4tFicct8V8iSTHM5XMYeNiTPyaXTtjc4iynmz2ogeMLVOTqeDZcQAGKxciwAAWkEVLQk7I6arsAOmYP8QA */
+  types: {
+    events: {} as { type: "START" },
+    context: {} as { count: number; initialCount: number },
+    input: {} as { initialCount: number },
+  },
+  id: "countdown",
+  initial: "Initial",
+  context: ({ input }) => ({
+    count: input.initialCount,
+    initialCount: input.initialCount,
+  }),
+  states: {
+    Initial: {
+      on: {
+        START: {
+          target: "Counting",
+        },
+      },
+    },
+    Counting: {
+      after: {
+        1000: [
+          {
+            guard: ({ context }) => context.count === 1,
+            target: "Finished",
+          },
+          {
+            actions: assign(({ context }) => ({
+              count: context.count - 1,
+            })),
+            target: "Counting",
+            reenter: true,
+          },
+        ],
+      },
+    },
+    Finished: {
+      always: {
+        target: "Initial",
+        actions: assign(({ context }) => ({
+          count: context.initialCount,
+        })),
+      },
+    },
+  },
+})

package/src/components/Button.tsx

@@ -0,0 +1,249 @@
+"use client"
+
+import { countdownMachine } from "@eggspot/ui/components/Button.machine"
+import {
+  ButtonVariantProps,
+  buttonVariants,
+} from "@eggspot/ui/components/Button.variants"
+import { Center, Float } from "@eggspot/ui/components/Layout"
+import { Spinner } from "@eggspot/ui/components/Spinner"
+import { Tooltip, TooltipTrigger } from "@eggspot/ui/components/Tooltip"
+import { cn, formatCount } from "@eggspot/ui/lib/utils"
+import { useMachine } from "@xstate/react"
+import { cva } from "class-variance-authority"
+import { Slot } from "radix-ui"
+import {
+  Button as AriaButton,
+  Focusable,
+  PressEvent,
+  type ButtonProps as AriaButtonProps,
+} from "react-aria-components"
+
+interface CommonButtonProps
+  extends AriaButtonProps,
+    React.RefAttributes<HTMLButtonElement>,
+    ButtonVariantProps {
+  /* If true, the button will be rendered as a child */
+  asChild?: boolean
+
+  /** If true, the button will show a loading state */
+  isLoading?: boolean
+
+  /** The delay of the tooltip */
+  tooltipDelay?: number
+
+  /** The test id of the button */
+  testId?: string
+
+  /** If true, the button will show a badge */
+  withBadge?: boolean
+
+  /** The badge number of the button */
+  badgeNumber?: number
+}
+
+interface IconButtonProps extends CommonButtonProps {
+  mode: "icon"
+
+  /** Tooltip text for the button. */
+  tooltip?: string
+
+  /** The placement of the tooltip */
+  tooltipPlacement?: "top" | "bottom" | "left" | "right"
+}
+interface DefaultButtonProps extends CommonButtonProps {
+  mode?: "default"
+
+  /** Optional tooltip for default buttons */
+  tooltip?: string
+
+  /** The left icon of the button */
+  leftIcon?: React.ReactNode
+
+  /** The right icon of the button */
+  rightIcon?: React.ReactNode
+
+  /** If provided, the button will show a countdown */
+  countdown?: number
+
+  /** The placement of the tooltip */
+  tooltipPlacement?: "top" | "bottom" | "left" | "right"
+}
+
+type ButtonProps = IconButtonProps | DefaultButtonProps
+
+function Button(props: ButtonProps) {
+  const {
+    mode,
+    size,
+    intent,
+    variant = "solid",
+    className,
+    fullWidth,
+    asChild = false,
+    isLoading = false,
+    children,
+    isDisabled,
+    tooltip,
+    tooltipDelay = 0,
+    tooltipPlacement = "bottom",
+    withBadge,
+    badgeNumber,
+    testId,
+    onPress,
+    ...restProps
+  } = props
+
+  const isDefault = mode === "default" || mode === undefined
+  const defaultIntent = variant === "solid" ? "primary" : "secondary"
+
+  const leftIcon = isDefault ? props.leftIcon : undefined
+  const rightIcon = isDefault ? props.rightIcon : undefined
+
+  // countdown and state machine setup
+  const hasCountdown = isDefault && props.countdown !== undefined
+  const initialCount = isDefault ? props.countdown : undefined
+  const [state, send] = useMachine(countdownMachine, {
+    input: {
+      initialCount: initialCount || 0,
+    },
+  })
+
+  const count = state.context.count
+  const isCounting = hasCountdown && state.matches("Counting")
+  const countdownProps = hasCountdown
+    ? {
+        onPress: (e: PressEvent) => {
+          send({ type: "START" })
+          onPress?.(e)
+        },
+      }
+    : {}
+
+  // rendering
+  const Comp = (asChild ? Slot.Root : AriaButton) as any
+  const isLoadingOrDisabled = isLoading || isDisabled || isCounting
+
+  const ariaProps: AriaButtonProps = asChild
+    ? {}
+    : {
+        isPending: isLoading,
+        isDisabled: isLoadingOrDisabled,
+      }
+
+  const button = (
+    <Comp
+      type="button"
+      aria-label={tooltip}
+      data-testid={testId}
+      data-has-right-element={!!rightIcon}
+      data-has-left-element={!!leftIcon}
+      className={cn(
+        buttonVariants({
+          mode,
+          size,
+          intent: intent || defaultIntent,
+          variant,
+          className,
+          fullWidth,
+        })
+      )}
+      {...ariaProps}
+      {...countdownProps}
+      {...restProps}
+    >
+      {isLoading && (
+        <Center className="spinner absolute inset-0 text-transparent">
+          <Spinner />
+        </Center>
+      )}
+
+      {/* badge */}
+      {withBadge && (
+        <Float position="top-right">
+          <ButtonBadge
+            badgeNumber={badgeNumber || 0}
+            className="border-gray-1 border"
+          />
+        </Float>
+      )}
+
+      {/* left icon */}
+      {leftIcon}
+
+      {/* children */}
+      <Slot.Slottable>{children as React.ReactNode}</Slot.Slottable>
+
+      {/* countdown  */}
+      {hasCountdown && isCounting && (
+        <ButtonBadge
+          intent="secondary"
+          badgeNumber={count}
+          maxVisibleNumber={99}
+        />
+      )}
+
+      {/* right icon */}
+      {rightIcon}
+    </Comp>
+  )
+
+  if (tooltip) {
+    return (
+      <TooltipTrigger delay={tooltipDelay} closeDelay={100}>
+        {asChild ? <Focusable>{button}</Focusable> : button}
+        <Tooltip style={{ zIndex: 100000000 }} placement={tooltipPlacement}>
+          {tooltip}
+        </Tooltip>
+      </TooltipTrigger>
+    )
+  }
+
+  return button
+}
+
+const badgeVariants = cva(
+  "bg-error-9 flex min-h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] leading-[14px] text-white",
+  {
+    variants: {
+      intent: {
+        primary: "bg-accent-9",
+        secondary: "bg-gray-9",
+        danger: "bg-error-9",
+      },
+    },
+    defaultVariants: {
+      intent: "danger",
+    },
+  }
+)
+
+interface ButtonBadgeProps {
+  badgeNumber?: number
+  className?: string
+  maxVisibleNumber?: number
+  intent?: "primary" | "secondary" | "danger"
+}
+
+function ButtonBadge({
+  badgeNumber,
+  className,
+  maxVisibleNumber = 9,
+  intent,
+}: ButtonBadgeProps) {
+  return (
+    <div
+      className={cn(
+        badgeVariants({ intent }),
+        badgeNumber && badgeNumber > maxVisibleNumber && "pr-[3px]",
+        !badgeNumber && "min-h-3 min-w-3",
+        className
+      )}
+    >
+      {badgeNumber ? formatCount(badgeNumber, maxVisibleNumber) : ""}
+    </div>
+  )
+}
+
+export { Button, ButtonBadge, buttonVariants }
+export type { ButtonProps }

package/src/components/Button.variants.tsx

@@ -0,0 +1,186 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
+export const buttonVariants = cva(
+  [
+    "text-gray-12 ring-offset-gray-1 relative inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-md text-sm font-medium whitespace-nowrap no-underline transition-[transform,background-color] duration-100 select-none",
+    /* SVGs */
+    "[&_svg]:pointer-events-none [&_svg]:size-[14px] [&_svg]:shrink-0 [&_svg]:stroke-2",
+    /* Pressed */
+    "active:transform-[scale(0.98)]",
+    /* Disabled */
+    "disabled:cursor-not-allowed disabled:opacity-55",
+    /* Loading */
+    "data-pending:text-transparent data-pending:[&>.spinner]:text-white",
+    /* Focus Visible */
+    "focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
+    /* Resets */
+    "focus-visible:outline-none",
+  ],
+  {
+    variants: {
+      mode: {
+        default: "",
+        icon: "",
+      },
+      size: {
+        sm: [
+          "h-7 px-2 text-[13px]",
+          /* Optically align elements */
+          "data-[has-left-element=true]:pl-1.5 data-[has-right-element=true]:pr-1.5",
+        ],
+        md: [
+          "h-8 px-3 py-2",
+          /* Optically align elements */
+          "data-[has-left-element=true]:pl-2 data-[has-right-element=true]:pr-2",
+        ],
+        lg: [
+          "h-10 gap-2 px-4",
+          /* Optically align elements */
+          "data-[has-left-element=true]:pl-[10px] data-[has-right-element=true]:pr-[10px]",
+        ],
+      },
+      intent: {
+        primary: "ring-accent-7",
+        secondary: "ring-gray-7",
+        danger: "ring-error-7",
+      },
+      variant: {
+        solid: "",
+        outline: "",
+        ghost: "",
+        minimal: "",
+      },
+      fullWidth: {
+        true: "w-full",
+      },
+    },
+    compoundVariants: [
+      /* Primary */
+      {
+        variant: "solid",
+        intent: "primary",
+        className: [
+          "bg-accent-9 text-accent-contrast hover:not-disabled:bg-accent-10",
+          "border border-black/5 dark:border-white/10",
+        ],
+      },
+      {
+        variant: "outline",
+        intent: "primary",
+        className: [
+          "bg-accent-2 border-accent-7 text-accent-11 hover:not-disabled:bg-accent-3 border",
+          "data-pending:[&>.spinner]:text-accent-11",
+        ],
+      },
+      {
+        variant: "ghost",
+        intent: "primary",
+        className: [
+          "text-accent-11 hover:not-disabled:bg-accent-3",
+          "data-pending:[&>.spinner]:text-accent-11 data-pending:bg-accent-3",
+        ],
+      },
+      {
+        variant: "minimal",
+        intent: "primary",
+        className: [
+          "text-accent-11 bg-accent-3 hover:not-disabled:bg-accent-4",
+          "data-pending:[&>.spinner]:text-accent-11",
+        ],
+      },
+
+      /* Secondary */
+      {
+        variant: "solid",
+        intent: "secondary",
+        className: [
+          "bg-gray-3 border-gray-3 hover:not-disabled:bg-gray-4 hover:not-disabled:border-gray-4 border",
+          "data-pending:[&>.spinner]:text-gray-11",
+        ],
+      },
+      {
+        variant: "outline",
+        intent: "secondary",
+        className: [
+          "bg-gray-2 border-gray-7 hover:not-disabled:bg-gray-3 border",
+          "data-pending:[&>.spinner]:text-gray-11",
+        ],
+      },
+      {
+        variant: "ghost",
+        intent: "secondary",
+        className: [
+          "hover:not-disabled:bg-gray-3",
+          "data-pending:[&>.spinner]:text-gray-11 data-pending:bg-gray-3",
+        ],
+      },
+      {
+        variant: "minimal",
+        intent: "secondary",
+        className: [
+          "bg-gray-3 hover:not-disabled:bg-gray-4",
+          "data-pending:[&>.spinner]:text-gray-11",
+        ],
+      },
+
+      /* Danger */
+      {
+        variant: "solid",
+        intent: "danger",
+        className: [
+          "bg-error-9 hover:not-disabled:bg-error-10 text-white",
+          "border border-black/5 dark:border-white/10",
+        ],
+      },
+      {
+        variant: "outline",
+        intent: "danger",
+        className: [
+          "bg-error-2 text-error-11 border-error-7 hover:not-disabled:bg-error-3 border",
+          "data-pending:[&>.spinner]:text-error-11",
+        ],
+      },
+      {
+        variant: "ghost",
+        intent: "danger",
+        className: [
+          "text-error-11 hover:not-disabled:bg-error-3",
+          "data-pending:[&>.spinner]:text-error-11 data-pending:bg-error-3",
+        ],
+      },
+      {
+        variant: "minimal",
+        intent: "danger",
+        className: [
+          "text-error-11 bg-error-3 hover:not-disabled:bg-error-4",
+          "data-pending:[&>.spinner]:text-error-11",
+        ],
+      },
+
+      /* Mode */
+      {
+        mode: "icon",
+        size: "sm",
+        className: ["size-7 [&_svg]:size-4"],
+      },
+      {
+        mode: "icon",
+        size: "md",
+        className: ["size-8 [&_svg]:size-[18px]"],
+      },
+      {
+        mode: "icon",
+        size: "lg",
+        className: ["size-10 [&_svg]:size-5"],
+      },
+    ],
+    defaultVariants: {
+      variant: "solid",
+      intent: "primary",
+      size: "md",
+      mode: "default",
+    },
+  }
+)
+
+export type ButtonVariantProps = VariantProps<typeof buttonVariants>

package/src/components/ButtonGroup.tsx

@@ -0,0 +1,56 @@
+import { Separator } from "@eggspot/ui/components/Separator"
+import { cn } from "@eggspot/ui/lib/utils"
+import { cva, type VariantProps } from "class-variance-authority"
+
+const buttonGroupVariants = cva(
+  "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 [&>input]:flex-1",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+        vertical:
+          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  }
+)
+
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn(
+        "bg-input relative m-0! self-stretch data-[orientation=vertical]:h-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { ButtonGroup, ButtonGroupSeparator, buttonGroupVariants }