realtimex-crm 0.1.2

package/src/components/admin/array-input.tsx

@@ -0,0 +1,201 @@
+import {
+  FieldTitle,
+  OptionalResourceContextProvider,
+  SourceContextProvider,
+  composeSyncValidators,
+  isRequired,
+  useApplyInputDefaultValues,
+  useFormGroupContext,
+  useFormGroups,
+  useGetValidationErrorMessage,
+  useSourceContext,
+  sanitizeInputRestProps,
+  ArrayInputContext,
+} from "ra-core";
+import type { InputProps, SourceContextValue } from "ra-core";
+import * as React from "react";
+import { useEffect } from "react";
+import { useFieldArray, useFormContext } from "react-hook-form";
+
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+import { Skeleton } from "../ui/skeleton";
+import { InputHelperText } from "@/components/admin/input-helper-text";
+import { FormError, FormField } from "@/components/admin/form";
+
+/**
+ * Creates a list of sub-forms for editing arrays of data embedded inside a record.
+ *
+ * Use `<ArrayInput>` when you need to edit array fields like order items, tags, or any
+ * repeatable embedded data. Requires a form iterator child (typically `<SimpleFormIterator>`)
+ * to render and manage individual array items.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/arrayinput/ ArrayInput documentation}
+ *
+ * @example
+ * import {
+ *   Edit,
+ *   SimpleForm,
+ *   TextInput,
+ *   NumberInput,
+ *   ArrayInput,
+ *   SimpleFormIterator,
+ * } from '@/components/admin';
+ *
+ * const OrderEdit = () => (
+ *   <Edit>
+ *     <SimpleForm>
+ *       <TextInput source="customer" />
+ *       <TextInput source="date" type="date" />
+ *       <ArrayInput source="items">
+ *         <SimpleFormIterator inline>
+ *           <TextInput source="name" />
+ *           <NumberInput source="price" />
+ *           <NumberInput source="quantity" />
+ *         </SimpleFormIterator>
+ *       </ArrayInput>
+ *     </SimpleForm>
+ *   </Edit>
+ * );
+ */
+export const ArrayInput = (props: ArrayInputProps) => {
+  const {
+    className,
+    defaultValue = [],
+    label,
+    isPending,
+    children,
+    helperText,
+    resource: resourceFromProps,
+    source: arraySource,
+    validate,
+    ...rest
+  } = props;
+
+  const formGroupName = useFormGroupContext();
+  const formGroups = useFormGroups();
+  const parentSourceContext = useSourceContext();
+  const finalSource = parentSourceContext.getSource(arraySource);
+
+  const sanitizedValidate = Array.isArray(validate)
+    ? composeSyncValidators(validate)
+    : validate;
+  const getValidationErrorMessage = useGetValidationErrorMessage();
+
+  const { getValues } = useFormContext();
+
+  const fieldProps = useFieldArray({
+    name: finalSource,
+    rules: {
+      validate: async (value) => {
+        if (!sanitizedValidate) return true;
+        const error = await sanitizedValidate(value, getValues(), props);
+
+        if (!error) return true;
+        return getValidationErrorMessage(error);
+      },
+    },
+  });
+
+  useEffect(() => {
+    if (formGroups && formGroupName != null) {
+      formGroups.registerField(finalSource, formGroupName);
+    }
+
+    return () => {
+      if (formGroups && formGroupName != null) {
+        formGroups.unregisterField(finalSource, formGroupName);
+      }
+    };
+  }, [finalSource, formGroups, formGroupName]);
+
+  useApplyInputDefaultValues({
+    inputProps: { ...props, defaultValue },
+    isArrayInput: true,
+    fieldArrayInputControl: fieldProps,
+  });
+
+  // The SourceContext will be read by children of ArrayInput to compute their composed source and label
+  //
+  // <ArrayInput source="orders" /> => SourceContext is "orders"
+  //   <SimpleFormIterator> => SourceContext is "orders.0"
+  //     <DateInput source="date" /> => final source for this input will be "orders.0.date"
+  //   </SimpleFormIterator>
+  // </ArrayInput>
+  //
+  const sourceContext = React.useMemo<SourceContextValue>(
+    () => ({
+      // source is the source of the ArrayInput child
+      getSource: (source: string) => {
+        if (!source) {
+          // SimpleFormIterator calls getSource('') to get the arraySource
+          return parentSourceContext.getSource(arraySource);
+        }
+
+        // We want to support nesting and composition with other inputs (e.g. TranslatableInputs, ReferenceOneInput, etc),
+        // we must also take into account the parent SourceContext
+        //
+        // <ArrayInput source="orders" /> => SourceContext is "orders"
+        //   <SimpleFormIterator> => SourceContext is "orders.0"
+        //      <DateInput source="date" /> => final source for this input will be "orders.0.date"
+        //      <ArrayInput source="items" /> => SourceContext is "orders.0.items"
+        //          <SimpleFormIterator> => SourceContext is "orders.0.items.0"
+        //              <TextInput source="reference" /> => final source for this input will be "orders.0.items.0.reference"
+        //          </SimpleFormIterator>
+        //      </ArrayInput>
+        //   </SimpleFormIterator>
+        // </ArrayInput>
+        return parentSourceContext.getSource(`${arraySource}.${source}`);
+      },
+      // if Array source is items, and child source is name, .0.name => resources.orders.fields.items.name
+      getLabel: (source: string) =>
+        parentSourceContext.getLabel(`${arraySource}.${source}`),
+    }),
+    [parentSourceContext, arraySource],
+  );
+
+  if (isPending) {
+    return <Skeleton className="w-full h-9" />;
+  }
+
+  return (
+    <FormField
+      className={cn(
+        "ra-input",
+        `ra-input-${finalSource}`,
+        className,
+        "w-full flex flex-col gap-2",
+      )}
+      name={finalSource}
+      {...sanitizeInputRestProps(rest)}
+    >
+      <Label className="text-sm">
+        <FieldTitle
+          label={label}
+          source={arraySource}
+          resource={resourceFromProps}
+          isRequired={isRequired(validate)}
+        />
+      </Label>
+      <ArrayInputContext.Provider value={fieldProps}>
+        <OptionalResourceContextProvider value={resourceFromProps}>
+          <SourceContextProvider value={sourceContext}>
+            {children}
+          </SourceContextProvider>
+        </OptionalResourceContextProvider>
+      </ArrayInputContext.Provider>
+
+      <InputHelperText helperText={helperText} />
+      <FormError />
+    </FormField>
+  );
+};
+
+export interface ArrayInputProps
+  extends Omit<InputProps, "disabled" | "readOnly"> {
+  className?: string;
+  children: React.ReactNode;
+  isFetching?: boolean;
+  isLoading?: boolean;
+  isPending?: boolean;
+}

package/src/components/admin/authentication.tsx

@@ -0,0 +1,86 @@
+import { Link } from "react-router";
+import { Translate, useHandleAuthCallback, useTranslate } from "ra-core";
+import { CircleAlert, LockIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Loading } from "@/components/admin/loading";
+
+/**
+ * A standalone page to be used as a redirection target for external authentication services (e.g. OAuth)
+ *
+ * It displays a loading indicator while processing the authentication response,
+ * then redirects to the admin app or shows an error message if authentication fails.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/security/ Security documentation}
+ *
+ * @example
+ * import { Admin } from "@/components/admin";
+ * import MyAuthCallbackPage from './MyAuthCallbackPage';
+ * const App = () => (
+ *     <Admin authCallbackPage={MyAuthCallbackPage} authProvider={authProvider}>
+ *         ...
+ *     </Admin>
+ * );
+ */
+export const AuthCallback = () => {
+  const { error } = useHandleAuthCallback();
+  if (error) {
+    return (
+      <AuthError
+        message={(error as Error) ? (error as Error).message : undefined}
+      />
+    );
+  }
+  return <Loading />;
+};
+
+export interface AuthErrorProps {
+  className?: string;
+  title?: string;
+  message?: string;
+}
+
+/**
+ * Authentication error page displayed when authentication fails.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/security/ Security documentation}
+ *
+ * @example
+ * import { Admin } from "@/components/admin";
+ * import MyAuthErrorPage from './MyAuthErrorPage';
+ * const App = () => (
+ *   <Admin authenticationError={MyAuthErrorPage} authProvider={authProvider}>
+ *     ...
+ *   </Admin>
+ * );
+ */
+export const AuthError = (props: AuthErrorProps) => {
+  const {
+    className,
+    title = "ra.page.error",
+    message = "ra.message.auth_error",
+    ...rest
+  } = props;
+
+  const translate = useTranslate();
+  return (
+    <div
+      className={cn(
+        "flex flex-col justify-center items-center h-full",
+        className,
+      )}
+      {...rest}
+    >
+      <h1 className="flex items-center text-3xl my-5 gap-3" role="alert">
+        <CircleAlert className="w-2em h-2em" />
+        <Translate i18nKey={title} />
+      </h1>
+      <p className="my-5">{translate(message, { _: message })}</p>
+      <Button asChild>
+        <Link to="/login">
+          <LockIcon /> {translate("ra.auth.sign_in", { _: "Sign in" })}
+        </Link>
+      </Button>
+    </div>
+  );
+};

package/src/components/admin/autocomplete-array-input.tsx

@@ -0,0 +1,254 @@
+import * as React from "react";
+import { X } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import {
+  Command,
+  CommandGroup,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  FormControl,
+  FormError,
+  FormField,
+  FormLabel,
+} from "@/components/admin/form";
+import { Command as CommandPrimitive } from "cmdk";
+import type { ChoicesProps, InputProps } from "ra-core";
+import {
+  useChoices,
+  useChoicesContext,
+  useGetRecordRepresentation,
+  useInput,
+  useTranslate,
+  FieldTitle,
+  useEvent,
+} from "ra-core";
+import { InputHelperText } from "./input-helper-text";
+import { useCallback } from "react";
+
+/**
+ * Form control that lets users choose multiple values from a list using a dropdown with autocompletion.
+ *
+ * This input allows editing array values with a searchable dropdown interface and displays selected items as removable badges.
+ * Works seamlessly inside ReferenceArrayInput for editing many-to-many relationships.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/autocompletearrayinput/ AutocompleteArrayInput documentation}
+ *
+ * @example
+ * import {
+ *   Create,
+ *   SimpleForm,
+ *   AutocompleteArrayInput,
+ *   ReferenceArrayInput,
+ * } from '@/components/admin';
+ *
+ * const PostCreate = () => (
+ *   <Create>
+ *     <SimpleForm>
+ *       <AutocompleteArrayInput
+ *         source="tags"
+ *         choices={[
+ *           { id: 'tech', name: 'Tech' },
+ *           { id: 'news', name: 'News' },
+ *           { id: 'lifestyle', name: 'Lifestyle' },
+ *         ]}
+ *       />
+ *       <ReferenceArrayInput source="tag_ids" reference="tags">
+ *         <AutocompleteArrayInput />
+ *       </ReferenceArrayInput>
+ *     </SimpleForm>
+ *   </Create>
+ * );
+ */
+export const AutocompleteArrayInput = (
+  props: Omit<InputProps, "source"> &
+    Partial<Pick<InputProps, "source">> &
+    ChoicesProps & {
+      className?: string;
+      disableValue?: string;
+      filterToQuery?: (searchText: string) => any;
+      translateChoice?: boolean;
+      placeholder?: string;
+      inputText?:
+        | React.ReactNode
+        | ((option: any | undefined) => React.ReactNode);
+    },
+) => {
+  const { filterToQuery = DefaultFilterToQuery, inputText } = props;
+  const {
+    allChoices = [],
+    source,
+    resource,
+    isFromReference,
+    setFilters,
+  } = useChoicesContext(props);
+  const { id, field, isRequired } = useInput({ ...props, source });
+  const translate = useTranslate();
+  const { placeholder = translate("ra.action.search", { _: "Search..." }) } =
+    props;
+
+  const getRecordRepresentation = useGetRecordRepresentation(resource);
+  const { getChoiceText, getChoiceValue } = useChoices({
+    optionText:
+      props.optionText ?? (isFromReference ? getRecordRepresentation : "name"),
+    optionValue: props.optionValue ?? "id",
+    disableValue: props.disableValue,
+    translateChoice: props.translateChoice ?? !isFromReference,
+  });
+
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const [open, setOpen] = React.useState(false);
+
+  const handleUnselect = useEvent((choice: any) => {
+    field.onChange(
+      field.value.filter((v: any) => v !== getChoiceValue(choice)),
+    );
+  });
+
+  const handleKeyDown = useEvent((e: React.KeyboardEvent<HTMLDivElement>) => {
+    const input = inputRef.current;
+    if (input) {
+      if (e.key === "Delete" || e.key === "Backspace") {
+        if (input.value === "") {
+          field.onChange(field.value.slice(0, -1));
+        }
+      }
+      // This is not a default behavior of the <input /> field
+      if (e.key === "Escape") {
+        input.blur();
+      }
+    }
+  });
+
+  const availableChoices = allChoices.filter(
+    (choice) => !field.value.includes(getChoiceValue(choice)),
+  );
+  const selectedChoices = allChoices.filter((choice) =>
+    field.value.includes(getChoiceValue(choice)),
+  );
+  const [filterValue, setFilterValue] = React.useState("");
+
+  const getInputText = useCallback(
+    (selectedChoice: any) => {
+      if (typeof inputText === "function") {
+        return inputText(selectedChoice);
+      }
+      if (inputText !== undefined) {
+        return inputText;
+      }
+      return getChoiceText(selectedChoice);
+    },
+    [inputText, getChoiceText],
+  );
+
+  return (
+    <FormField className={props.className} id={id} name={field.name}>
+      {props.label !== false && (
+        <FormLabel>
+          <FieldTitle
+            label={props.label}
+            source={props.source ?? source}
+            resource={resource}
+            isRequired={isRequired}
+          />
+        </FormLabel>
+      )}
+      <FormControl>
+        <Command
+          onKeyDown={handleKeyDown}
+          shouldFilter={!isFromReference}
+          className="overflow-visible bg-transparent"
+        >
+          <div className="group rounded-md bg-transparent dark:bg-input/30 border border-input px-3 py-1.75 text-sm transition-all ring-offset-background focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]">
+            <div className="flex flex-wrap gap-1">
+              {selectedChoices.map((choice) => (
+                <Badge key={getChoiceValue(choice)} variant="outline">
+                  {getInputText(choice)}
+                  <button
+                    className="ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter") {
+                        handleUnselect(choice);
+                      }
+                    }}
+                    onMouseDown={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                    }}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      handleUnselect(choice);
+                    }}
+                  >
+                    <span className="sr-only">
+                      {translate("ra.action.remove", {
+                        _: "Remove",
+                      })}
+                    </span>
+                    <X className="h-3 w-3" />
+                  </button>
+                </Badge>
+              ))}
+              {/* Avoid having the "Search" Icon by not using CommandInput */}
+              <CommandPrimitive.Input
+                ref={inputRef}
+                value={filterValue}
+                onValueChange={(filter) => {
+                  setFilterValue(filter);
+                  // We don't want the ChoicesContext to filter the choices if the input
+                  // is not from a reference as it would also filter out the selected values
+                  if (isFromReference) {
+                    setFilters(filterToQuery(filter), undefined, true);
+                  }
+                }}
+                onBlur={() => setOpen(false)}
+                onFocus={() => setOpen(true)}
+                placeholder={placeholder}
+                className="ml-2 flex-1 bg-transparent outline-none placeholder:text-muted-foreground"
+              />
+            </div>
+          </div>
+          <div className="relative">
+            <CommandList>
+              {open && availableChoices.length > 0 ? (
+                <div className="absolute top-2 z-10 w-full rounded-md border bg-popover text-popover-foreground shadow-md outline-none animate-in">
+                  <CommandGroup className="h-full overflow-auto">
+                    {availableChoices.map((choice) => {
+                      return (
+                        <CommandItem
+                          key={getChoiceValue(choice)}
+                          onMouseDown={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                          }}
+                          onSelect={() => {
+                            setFilterValue("");
+                            if (isFromReference) {
+                              setFilters(filterToQuery(""));
+                            }
+                            field.onChange([
+                              ...field.value,
+                              getChoiceValue(choice),
+                            ]);
+                          }}
+                          className="cursor-pointer"
+                        >
+                          {getChoiceText(choice)}
+                        </CommandItem>
+                      );
+                    })}
+                  </CommandGroup>
+                </div>
+              ) : null}
+            </CommandList>
+          </div>
+        </Command>
+      </FormControl>
+      <InputHelperText helperText={props.helperText} />
+      <FormError />
+    </FormField>
+  );
+};
+
+const DefaultFilterToQuery = (searchText: string) => ({ q: searchText });