realtimex-crm 0.1.2

package/src/components/admin/form.tsx

@@ -0,0 +1,312 @@
+import * as React from "react";
+import type { MouseEventHandler } from "react";
+import { createContext, useCallback, useContext, useMemo } from "react";
+import type {
+  CreateParams,
+  RaRecord,
+  TransformData,
+  UpdateParams,
+} from "ra-core";
+import {
+  setSubmissionErrors,
+  useRecordFromLocation,
+  useSaveContext,
+  useTranslate,
+  ValidationError,
+  warning,
+} from "ra-core";
+import { Loader2, Save } from "lucide-react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import { FormProvider, useFormContext, useFormState } from "react-hook-form";
+import type { UseMutationOptions } from "@tanstack/react-query";
+import { cn } from "@/lib/utils";
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
+
+const Form = FormProvider;
+
+type FormItemContextValue = {
+  id: string;
+  name: string;
+};
+
+const FormItemContext = createContext<FormItemContextValue>(
+  {} as FormItemContextValue,
+);
+
+const useFormField = () => {
+  const { getFieldState, formState } = useFormContext();
+  const { id, name } = useContext(FormItemContext);
+
+  const fieldState = getFieldState(name, formState);
+
+  return useMemo(
+    () => ({
+      formItemId: id,
+      formDescriptionId: `${id}-description`,
+      formMessageId: `${id}-message`,
+      ...fieldState,
+    }),
+    [id, fieldState],
+  );
+};
+
+function FormField({ className, id, name, ...props }: FormItemProps) {
+  const contextValue: FormItemContextValue = useMemo(
+    () => ({
+      id,
+      name,
+    }),
+    [id, name],
+  );
+
+  return (
+    <FormItemContext.Provider value={contextValue}>
+      <div
+        data-slot="form-item"
+        className={cn("grid gap-2", className)}
+        role="group"
+        {...props}
+      />
+    </FormItemContext.Provider>
+  );
+}
+
+type FormItemProps = Omit<React.ComponentProps<"div">, "id"> & {
+  id: string;
+  name: string;
+};
+
+function FormLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn("data-[error=true]:text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
+
+  return (
+    <Slot
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <div
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+const FormError = ({ className, ...props }: React.ComponentProps<"p">) => {
+  const { invalid, error, formMessageId } = useFormField();
+
+  const err = error?.root?.message ?? error?.message;
+  if (!invalid || !err) {
+    return null;
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn("text-destructive text-sm", className)}
+      {...props}
+    >
+      <ValidationError error={err} />
+    </p>
+  );
+};
+
+/**
+ * A button that saves form data with loading state and validation.
+ *
+ * Automatically handles form submission, validation, and loading states. Shows a spinner during
+ * save operations and can be disabled when the form is pristine or invalid.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/savebutton/ SaveButton documentation}
+ *
+ * @example
+ * import { SimpleForm, SaveButton } from '@/components/admin';
+ *
+ * const PostEdit = () => (
+ *   <Edit>
+ *     <SimpleForm toolbar={<SaveButton />}>
+ *       // form inputs here
+ *     </SimpleForm>
+ *   </Edit>
+ * )
+ */
+const SaveButton = <RecordType extends RaRecord = RaRecord>(
+  props: SaveButtonProps<RecordType>,
+) => {
+  const {
+    className,
+    icon = defaultIcon,
+    label = "ra.action.save",
+    onClick,
+    mutationOptions,
+    disabled: disabledProp,
+    type = "submit",
+    transform,
+    variant = "default",
+    alwaysEnable = false,
+    ...rest
+  } = props;
+  const translate = useTranslate();
+  const form = useFormContext();
+  const saveContext = useSaveContext();
+  const { dirtyFields, isValidating, isSubmitting } = useFormState();
+  // useFormState().isDirty might differ from useFormState().dirtyFields (https://github.com/react-hook-form/react-hook-form/issues/4740)
+  const isDirty = Object.keys(dirtyFields).length > 0;
+  // Use form isDirty, isValidating and form context saving to enable or disable the save button
+  // if alwaysEnable is undefined and the form wasn't prefilled
+  const recordFromLocation = useRecordFromLocation();
+  const disabled = valueOrDefault(
+    alwaysEnable === false || alwaysEnable === undefined
+      ? undefined
+      : !alwaysEnable,
+    disabledProp ||
+      (!isDirty && recordFromLocation == null) ||
+      isValidating ||
+      isSubmitting,
+  );
+
+  warning(
+    type === "submit" &&
+      ((mutationOptions &&
+        (mutationOptions.onSuccess || mutationOptions.onError)) ||
+        transform),
+    'Cannot use <SaveButton mutationOptions> props on a button of type "submit". To override the default mutation options on a particular save button, set the <SaveButton type="button"> prop, or set mutationOptions in the main view component (<Create> or <Edit>).',
+  );
+
+  const handleSubmit = useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    async (values: any) => {
+      let errors;
+      if (saveContext?.save) {
+        errors = await saveContext.save(values, {
+          ...mutationOptions,
+          transform,
+        });
+      }
+      if (errors != null) {
+        setSubmissionErrors(errors, form.setError);
+      }
+    },
+    [form.setError, saveContext, mutationOptions, transform],
+  );
+
+  const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(
+    async (event) => {
+      if (onClick) {
+        onClick(event);
+      }
+      if (event.defaultPrevented) {
+        return;
+      }
+      if (type === "button") {
+        // this button doesn't submit the form, so it doesn't trigger useIsFormInvalid in <FormContent>
+        // therefore we need to check for errors manually
+        event.stopPropagation();
+        await form.handleSubmit(handleSubmit)(event);
+      }
+    },
+    [onClick, type, form, handleSubmit],
+  );
+
+  const displayedLabel = label && translate(label, { _: label });
+
+  return (
+    <Button
+      variant={variant}
+      type={type}
+      disabled={disabled}
+      onClick={handleClick}
+      className={cn(
+        disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
+        className,
+      )}
+      {...rest}
+    >
+      {isSubmitting ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : icon}
+      {displayedLabel}
+    </Button>
+  );
+};
+
+const defaultIcon = <Save className="h-4 w-4" />;
+
+interface Props<
+  RecordType extends RaRecord = RaRecord,
+  MutationOptionsError = unknown,
+> {
+  className?: string;
+  disabled?: boolean;
+  icon?: React.ReactNode;
+  label?: string;
+  mutationOptions?: UseMutationOptions<
+    RecordType,
+    MutationOptionsError,
+    CreateParams<RecordType> | UpdateParams<RecordType>
+  >;
+  transform?: TransformData;
+  variant?:
+    | "default"
+    | "destructive"
+    | "outline"
+    | "secondary"
+    | "ghost"
+    | "link";
+}
+
+export type SaveButtonProps<RecordType extends RaRecord = RaRecord> =
+  Props<RecordType> &
+    React.ComponentProps<"button"> & {
+      alwaysEnable?: boolean;
+    };
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const valueOrDefault = (value: any, defaultValue: any) =>
+  typeof value === "undefined" ? defaultValue : value;
+
+export {
+  // eslint-disable-next-line react-refresh/only-export-components
+  useFormField,
+  Form,
+  FormField,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormError,
+  SaveButton,
+};

package/src/components/admin/icon-button-with-tooltip.tsx

@@ -0,0 +1,85 @@
+import { useTranslate } from "ra-core";
+import * as React from "react";
+import type { MouseEvent } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+/**
+ * A button with a tooltip that ensures the tooltip is closed on click to avoid ghost tooltips.
+ *
+ * Prevents ghost tooltips that can appear when the button position changes after interaction.
+ * Supports internationalization for the label text.
+ *
+ * @example
+ * // Basic usage with icon and label
+ * <IconButtonWithTooltip label="Delete">
+ *   <Trash2 />
+ * </IconButtonWithTooltip>
+ */
+export const IconButtonWithTooltip = ({
+  label,
+  onClick,
+  children,
+  disabled,
+  ...props
+}: IconButtonWithTooltipProps) => {
+  const translate = useTranslate();
+  const [open, setOpen] = React.useState(false);
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const handleOpen = () => {
+    setOpen(true);
+  };
+
+  let translatedLabel = label;
+  if (typeof label === "string") {
+    translatedLabel = translate(label, { _: label });
+  }
+
+  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+    handleClose();
+    onClick?.(event);
+  };
+
+  return (
+    <TooltipProvider>
+      <Tooltip open={open} onOpenChange={setOpen}>
+        <TooltipTrigger asChild>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            aria-label={
+              typeof translatedLabel === "string" ? translatedLabel : undefined
+            }
+            onClick={handleClick}
+            disabled={disabled}
+            onMouseEnter={handleOpen}
+            onMouseLeave={handleClose}
+            {...props}
+          >
+            {children}
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>{translatedLabel}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+};
+
+export interface IconButtonWithTooltipProps
+  extends React.ComponentProps<"button"> {
+  label: React.ReactNode;
+  children: React.ReactNode;
+}

package/src/components/admin/index.ts

@@ -0,0 +1,73 @@
+export * from "./admin";
+export * from "./app-sidebar";
+export * from "./array-field";
+export * from "./array-input";
+export * from "./authentication";
+export * from "./autocomplete-input";
+export * from "./autocomplete-array-input";
+export * from "./badge-field";
+export * from "./boolean-input";
+export * from "./breadcrumb";
+export * from "./bulk-actions-toolbar";
+export * from "./bulk-delete-button";
+export * from "./bulk-export-button";
+export * from "./cancel-button";
+export * from "./columns-button";
+export * from "./count";
+export * from "./create-button";
+export * from "./create";
+export * from "./data-table";
+export * from "./date-field";
+export * from "./date-input";
+export * from "./date-time-input";
+export * from "./delete-button";
+export * from "./edit-button";
+export * from "./edit-guesser";
+export * from "./edit";
+export * from "./email-field";
+export * from "./error";
+export * from "./export-button";
+export * from "./field-toggle";
+export * from "./file-field";
+export * from "./file-input";
+export * from "./filter-form";
+export * from "./form";
+export * from "./layout";
+export * from "./list-guesser";
+export * from "./list-pagination";
+export * from "./list";
+export * from "./loading";
+export * from "./locales-menu-button";
+export * from "./login-page";
+export * from "./notification";
+export * from "./number-field";
+export * from "./number-input";
+export * from "./radio-button-group-input";
+export * from "./ready";
+export * from "./record-field";
+export * from "./reference-array-input";
+export * from "./reference-array-field";
+export * from "./reference-field";
+export * from "./reference-input";
+export * from "./reference-many-count";
+export * from "./reference-many-field";
+export * from "./refresh-button";
+export * from "./saved-queries";
+export * from "./search-input";
+export * from "./select-field";
+export * from "./select-input";
+export * from "./show-button";
+export * from "./show-guesser";
+export * from "./show";
+export * from "./simple-form";
+export * from "./simple-form-iterator";
+export * from "./simple-show-layout";
+export * from "./single-field-list";
+export * from "./sort-button";
+export * from "./text-field";
+export * from "./text-input";
+export * from "./toggle-filter-button";
+export * from "./theme-mode-toggle";
+export * from "./theme-provider";
+export * from "./url-field";
+export * from "./user-menu";

package/src/components/admin/input-helper-text.tsx

@@ -0,0 +1,29 @@
+import { useTranslate } from "ra-core";
+import type { ReactNode } from "react";
+import { isValidElement } from "react";
+import { FormDescription } from "@/components/admin/form";
+
+/**
+ * Renders helper text below form inputs with automatic translation support.
+ *
+ * @internal
+ */
+export function InputHelperText({ helperText }: { helperText?: ReactNode }) {
+  const translate = useTranslate();
+
+  if (!helperText) {
+    return null;
+  }
+
+  if (isValidElement(helperText)) {
+    return helperText;
+  }
+
+  return (
+    <FormDescription>
+      {typeof helperText === "string"
+        ? translate(helperText, { _: helperText })
+        : helperText}
+    </FormDescription>
+  );
+}

package/src/components/admin/layout.tsx

@@ -0,0 +1,69 @@
+import type { ErrorInfo } from "react";
+import { Suspense, useState } from "react";
+import { cn } from "@/lib/utils";
+import type { CoreLayoutProps } from "ra-core";
+import { ErrorBoundary } from "react-error-boundary";
+import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
+import { UserMenu } from "@/components/admin/user-menu";
+import { ThemeModeToggle } from "@/components/admin/theme-mode-toggle";
+import { Notification } from "@/components/admin/notification";
+import { AppSidebar } from "@/components/admin/app-sidebar";
+import { RefreshButton } from "@/components/admin/refresh-button";
+import { LocalesMenuButton } from "@/components/admin/locales-menu-button";
+import { Error } from "@/components/admin/error";
+import { Loading } from "@/components/admin/loading";
+
+/**
+ * The main application layout with sidebar, header, and content area.
+ *
+ * Renders the app structure with a collapsible sidebar, header with breadcrumb navigation,
+ * theme toggle, user menu, and main content area. Includes error boundary and loading states.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/layout/ Layout documentation}
+ */
+export const Layout = (props: CoreLayoutProps) => {
+  const [errorInfo, setErrorInfo] = useState<ErrorInfo | undefined>(undefined);
+  const handleError = (_: Error, info: ErrorInfo) => {
+    setErrorInfo(info);
+  };
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <main
+        className={cn(
+          "ml-auto w-full max-w-full",
+          "peer-data-[state=collapsed]:w-[calc(100%-var(--sidebar-width-icon)-1rem)]",
+          "peer-data-[state=expanded]:w-[calc(100%-var(--sidebar-width))]",
+          "sm:transition-[width] sm:duration-200 sm:ease-linear",
+          "flex h-svh flex-col",
+          "group-data-[scroll-locked=1]/body:h-full",
+          "has-[main.fixed-main]:group-data-[scroll-locked=1]/body:h-svh",
+        )}
+      >
+        <header className="flex h-16 md:h-12 shrink-0 items-center gap-2 px-4">
+          <SidebarTrigger className="scale-125 sm:scale-100" />
+          <div className="flex-1 flex items-center" id="breadcrumb" />
+          <LocalesMenuButton />
+          <ThemeModeToggle />
+          <RefreshButton />
+          <UserMenu />
+        </header>
+        <ErrorBoundary
+          onError={handleError}
+          fallbackRender={({ error, resetErrorBoundary }) => (
+            <Error
+              error={error}
+              errorInfo={errorInfo}
+              resetErrorBoundary={resetErrorBoundary}
+            />
+          )}
+        >
+          <Suspense fallback={<Loading />}>
+            <div className="flex flex-1 flex-col px-4 ">{props.children}</div>
+          </Suspense>
+        </ErrorBoundary>
+      </main>
+      <Notification />
+    </SidebarProvider>
+  );
+};