@alepha/ui 0.11.3 → 0.11.4

package/src/components/Action.tsx

@@ -1,345 +0,0 @@
-import {
-  type RouterGoOptions,
-  type UseActiveOptions,
-  useActive,
-  useAlepha,
-  useRouter,
-} from "@alepha/react";
-import { type FormModel, useFormState } from "@alepha/react-form";
-import {
-  Button,
-  type ButtonProps,
-  Flex,
-  Menu,
-  Tooltip,
-  type TooltipProps,
-} from "@mantine/core";
-import { IconChevronRight } from "@tabler/icons-react";
-import { type ReactNode, useState } from "react";
-
-export interface ActionMenuItem {
-  /**
-   * Menu item type
-   */
-  type?: "item" | "divider" | "label";
-
-  /**
-   * Label text for the menu item
-   */
-  label?: string;
-
-  /**
-   * Icon element to display before the label
-   */
-  icon?: ReactNode;
-
-  /**
-   * Click handler for menu items
-   */
-  onClick?: () => void;
-
-  /**
-   * Color for the menu item (e.g., "red" for danger actions)
-   */
-  color?: string;
-
-  /**
-   * Nested submenu items
-   */
-  children?: ActionMenuItem[];
-}
-
-export interface ActionMenuConfig {
-  /**
-   * Array of menu items to display
-   */
-  items: ActionMenuItem[];
-
-  /**
-   * Menu position relative to the button
-   */
-  position?:
-    | "bottom"
-    | "bottom-start"
-    | "bottom-end"
-    | "top"
-    | "top-start"
-    | "top-end"
-    | "left"
-    | "right";
-
-  /**
-   * Menu width
-   */
-  width?: number | string;
-
-  /**
-   * Menu shadow
-   */
-  shadow?: "xs" | "sm" | "md" | "lg" | "xl";
-}
-
-export interface ActionCommonProps extends ButtonProps {
-  children?: ReactNode;
-  textVisibleFrom?: "xs" | "sm" | "md" | "lg" | "xl";
-
-  /**
-   * Tooltip to display on hover. Can be a string for simple tooltips
-   * or a TooltipProps object for advanced configuration.
-   */
-  tooltip?: string | TooltipProps;
-
-  /**
-   * Menu configuration. When provided, the action will display a dropdown menu.
-   */
-  menu?: ActionMenuConfig;
-
-  /**
-   * If set, a confirmation dialog will be shown before performing the action.
-   * If `true`, a default title and message will be used.
-   * If a string, it will be used as the message with a default title.
-   * If an object, it can contain `title` and `message` properties to customize the dialog.
-   */
-  confirm?: boolean | string | { title?: string; message: string };
-}
-
-export type ActionProps = ActionCommonProps &
-  (ActiveHrefProps | ActionClickProps | ActionSubmitProps | {});
-
-// ---------------------------------------------------------------------------------------------------------------------
-
-// Helper function to render menu items recursively
-const renderMenuItem = (item: ActionMenuItem, index: number): ReactNode => {
-  // Render divider
-  if (item.type === "divider") {
-    return <Menu.Divider key={index} />;
-  }
-
-  // Render label
-  if (item.type === "label") {
-    return <Menu.Label key={index}>{item.label}</Menu.Label>;
-  }
-
-  // Render submenu if has children
-  if (item.children && item.children.length > 0) {
-    return (
-      <Menu key={index} trigger="hover" position="right-start" offset={2}>
-        <Menu.Target>
-          <Menu.Item
-            leftSection={item.icon}
-            rightSection={<IconChevronRight size={14} />}
-          >
-            {item.label}
-          </Menu.Item>
-        </Menu.Target>
-        <Menu.Dropdown>
-          {item.children.map((child, childIndex) =>
-            renderMenuItem(child, childIndex),
-          )}
-        </Menu.Dropdown>
-      </Menu>
-    );
-  }
-
-  // Render regular menu item
-  return (
-    <Menu.Item
-      key={index}
-      leftSection={item.icon}
-      onClick={item.onClick}
-      color={item.color}
-    >
-      {item.label}
-    </Menu.Item>
-  );
-};
-
-const Action = (_props: ActionProps) => {
-  const props = { variant: "subtle", ..._props };
-  const { tooltip, menu, ...restProps } = props;
-
-  if (props.leftSection && !props.children) {
-    restProps.className ??= "mantine-Action-iconOnly";
-    restProps.p ??= "xs";
-  }
-
-  if (props.textVisibleFrom) {
-    const { children, textVisibleFrom, leftSection, ...rest } = restProps;
-    return (
-      <>
-        <Flex w={"100%"} visibleFrom={textVisibleFrom}>
-          <Action
-            flex={1}
-            {...rest}
-            leftSection={leftSection}
-            tooltip={tooltip}
-            menu={menu}
-          >
-            {children}
-          </Action>
-        </Flex>
-        <Flex w={"100%"} hiddenFrom={textVisibleFrom}>
-          <Action px={"xs"} {...rest} tooltip={tooltip} menu={menu}>
-            {leftSection}
-          </Action>
-        </Flex>
-      </>
-    );
-  }
-
-  const renderAction = () => {
-    if ("href" in restProps && restProps.href) {
-      return (
-        <ActionHref {...restProps} href={restProps.href}>
-          {restProps.children}
-        </ActionHref>
-      );
-    }
-
-    if ("onClick" in restProps && restProps.onClick) {
-      return (
-        <ActionClick {...restProps} onClick={restProps.onClick}>
-          {restProps.children}
-        </ActionClick>
-      );
-    }
-
-    if ("form" in restProps && restProps.form) {
-      return (
-        <ActionSubmit {...restProps} form={restProps.form}>
-          {restProps.children}
-        </ActionSubmit>
-      );
-    }
-
-    return <Button {...(restProps as any)}>{restProps.children}</Button>;
-  };
-
-  let actionElement = renderAction();
-
-  // Wrap with Menu if provided
-  if (menu) {
-    actionElement = (
-      <Menu
-        position={menu.position || "bottom-start"}
-        width={menu.width || 200}
-        shadow={menu.shadow || "md"}
-      >
-        <Menu.Target>{actionElement}</Menu.Target>
-        <Menu.Dropdown>
-          {menu.items.map((item, index) => renderMenuItem(item, index))}
-        </Menu.Dropdown>
-      </Menu>
-    );
-  }
-
-  // Wrap with Tooltip if provided
-  if (tooltip) {
-    const tooltipProps: TooltipProps =
-      typeof tooltip === "string"
-        ? { label: tooltip, children: actionElement }
-        : { ...tooltip, children: actionElement };
-
-    return <Tooltip {...tooltipProps} />;
-  }
-
-  return actionElement;
-};
-
-export default Action;
-
-// ---------------------------------------------------------------------------------------------------------------------
-
-export interface ActionSubmitProps extends ButtonProps {
-  form: FormModel<any>;
-}
-
-/**
- * Action button that submits a form with loading and disabled state handling.
- */
-const ActionSubmit = (props: ActionSubmitProps) => {
-  const { form, ...buttonProps } = props;
-  const state = useFormState(form);
-  return (
-    <Button
-      {...buttonProps}
-      loading={state.loading}
-      disabled={state.loading}
-      type={"submit"}
-    >
-      {props.children}
-    </Button>
-  );
-};
-
-// ---------------------------------------------------------------------------------------------------------------------
-
-export interface ActionClickProps extends ButtonProps {
-  onClick: (e: any) => any;
-}
-
-/**
- * Basic action button that handles click events with loading and error handling.
- */
-const ActionClick = (props: ActionClickProps) => {
-  const [pending, setPending] = useState(false);
-  const alepha = useAlepha();
-
-  const onClick = async (e: any) => {
-    setPending(true);
-    try {
-      await props.onClick(e);
-    } catch (e) {
-      console.error(e);
-      await alepha.events.emit("form:submit:error", {
-        id: "action",
-        error: e as Error,
-      });
-    } finally {
-      setPending(false);
-    }
-  };
-
-  return (
-    <Button
-      {...props}
-      disabled={pending || props.disabled}
-      loading={pending}
-      onClick={onClick}
-    >
-      {props.children}
-    </Button>
-  );
-};
-
-// ---------------------------------------------------------------------------------------------------------------------
-
-export interface ActiveHrefProps extends ButtonProps {
-  href: string;
-  active?: Partial<UseActiveOptions> | false;
-  routerGoOptions?: RouterGoOptions;
-}
-
-/**
- * Action for navigation with active state support.
- */
-const ActionHref = (props: ActiveHrefProps) => {
-  const { active: options, routerGoOptions, ...buttonProps } = props;
-  const router = useRouter();
-  const { isPending, isActive } = useActive(
-    options ? { href: props.href, ...options } : { href: props.href },
-  );
-  const anchorProps = router.anchor(props.href, routerGoOptions);
-
-  return (
-    <Button
-      component={"a"}
-      loading={isPending}
-      {...anchorProps}
-      {...buttonProps}
-      variant={isActive && options !== false ? "filled" : "subtle"}
-    >
-      {props.children}
-    </Button>
-  );
-};

package/src/components/DataTable.css

@@ -1,199 +0,0 @@
-/* ------------------------------------------------------------------------------------------------------------------ */
-/* DataTable Component Styles */
-/* ------------------------------------------------------------------------------------------------------------------ */
-
-.alepha-datatable-container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.alepha-datatable-toolbar {
-  border-radius: var(--mantine-radius-md);
-  background: var(--mantine-color-body);
-}
-
-.alepha-datatable-search-input {
-  min-width: 200px;
-  max-width: 300px;
-}
-
-.alepha-datatable-page-size-select {
-  width: 120px;
-}
-
-.alepha-datatable-table {
-  position: relative;
-}
-
-.alepha-datatable-th {
-  font-weight: 600;
-  white-space: nowrap;
-  user-select: none;
-  transition: background-color 0.2s ease;
-}
-
-.alepha-datatable-th:hover {
-  background-color: var(--mantine-color-gray-0);
-}
-
-[data-mantine-color-scheme="dark"] .alepha-datatable-th:hover {
-  background-color: var(--mantine-color-dark-6);
-}
-
-.alepha-datatable-tr {
-  transition: background-color 0.15s ease;
-}
-
-.alepha-datatable-tr.alepha-datatable-selected {
-  background-color: var(--mantine-color-blue-0) !important;
-}
-
-[data-mantine-color-scheme="dark"]
-  .alepha-datatable-tr.alepha-datatable-selected {
-  background-color: rgba(34, 139, 230, 0.1) !important;
-}
-
-.alepha-datatable-checkbox-column {
-  width: 40px;
-  text-align: center;
-}
-
-.alepha-datatable-actions-column {
-  width: 100px;
-  text-align: center;
-}
-
-.alepha-datatable-sort-icon {
-  color: var(--mantine-color-blue-6);
-  transition: transform 0.2s ease;
-}
-
-.alepha-datatable-sort-icon-inactive {
-  color: var(--mantine-color-gray-5);
-  opacity: 0;
-  transition: opacity 0.2s ease;
-}
-
-.alepha-datatable-th:hover .alepha-datatable-sort-icon-inactive {
-  opacity: 0.5;
-}
-
-/* Loading state */
-.alepha-datatable-loading {
-  position: relative;
-  pointer-events: none;
-  opacity: 0.5;
-}
-
-.alepha-datatable-loading-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(255, 255, 255, 0.8);
-  z-index: 10;
-}
-
-[data-mantine-color-scheme="dark"] .alepha-datatable-loading-overlay {
-  background: rgba(26, 27, 30, 0.8);
-}
-
-/* Sticky header styles */
-.alepha-datatable-sticky-header {
-  position: sticky;
-  top: 0;
-  z-index: 5;
-  background: var(--mantine-color-body);
-}
-
-/* Zebra striping adjustments */
-.alepha-datatable-striped tbody tr:nth-of-type(odd) {
-  background-color: var(--mantine-color-gray-0);
-}
-
-[data-mantine-color-scheme="dark"]
-  .alepha-datatable-striped
-  tbody
-  tr:nth-of-type(odd) {
-  background-color: var(--mantine-color-dark-7);
-}
-
-/* Empty state */
-.alepha-datatable-empty-state {
-  padding: 3rem 1rem;
-  text-align: center;
-}
-
-.alepha-datatable-empty-icon {
-  color: var(--mantine-color-gray-5);
-  margin-bottom: 1rem;
-}
-
-/* Footer */
-.alepha-datatable-footer {
-  border-top: 1px solid var(--mantine-color-gray-2);
-  padding-top: var(--mantine-spacing-sm);
-  margin-top: var(--mantine-spacing-xs);
-}
-
-[data-mantine-color-scheme="dark"] .alepha-datatable-footer {
-  border-top-color: var(--mantine-color-dark-5);
-}
-
-/* Custom scrollbar for better UX */
-.alepha-datatable-container ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-.alepha-datatable-container ::-webkit-scrollbar-track {
-  background: var(--mantine-color-gray-1);
-  border-radius: 4px;
-}
-
-[data-mantine-color-scheme="dark"]
-  .alepha-datatable-container
-  ::-webkit-scrollbar-track {
-  background: var(--mantine-color-dark-6);
-}
-
-.alepha-datatable-container ::-webkit-scrollbar-thumb {
-  background: var(--mantine-color-gray-4);
-  border-radius: 4px;
-}
-
-[data-mantine-color-scheme="dark"]
-  .alepha-datatable-container
-  ::-webkit-scrollbar-thumb {
-  background: var(--mantine-color-dark-4);
-}
-
-.alepha-datatable-container ::-webkit-scrollbar-thumb:hover {
-  background: var(--mantine-color-gray-5);
-}
-
-[data-mantine-color-scheme="dark"]
-  .alepha-datatable-container
-  ::-webkit-scrollbar-thumb:hover {
-  background: var(--mantine-color-dark-3);
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-  .alepha-datatable-toolbar {
-    padding: var(--mantine-spacing-sm);
-  }
-
-  .alepha-datatable-search-input {
-    min-width: 150px;
-  }
-
-  .alepha-datatable-page-size-select {
-    width: 100px;
-  }
-}