realtimex-crm 0.1.2

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

@@ -0,0 +1,323 @@
+import { X } from "lucide-react";
+import type { ChoicesProps, InputProps } from "ra-core";
+import {
+  FieldTitle,
+  useChoices,
+  useChoicesContext,
+  useGetRecordRepresentation,
+  useInput,
+  useTranslate,
+} from "ra-core";
+import type { ComponentProps, ReactElement } from "react";
+import { useCallback, useEffect } from "react";
+
+import { FormError, FormField, FormLabel } from "@/components/admin/form";
+import { InputHelperText } from "@/components/admin/input-helper-text";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Skeleton } from "@/components/ui/skeleton";
+import type { SupportCreateSuggestionOptions } from "@/hooks/useSupportCreateSuggestion";
+import { useSupportCreateSuggestion } from "@/hooks/useSupportCreateSuggestion";
+import { cn } from "@/lib/utils";
+
+/**
+ * Dropdown select input for choosing a single value from a list of options.
+ *
+ * Use `<SelectInput>` for fields with many possible values (5+) like categories, statuses, or
+ * countries. Supports creating new options on the fly with the `create` or `onCreate` props.
+ * Wrap in `<ReferenceInput>` to select from related resources.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/selectinput/ SelectInput documentation}
+ * @see {@link https://ui.shadcn.com/docs/components/select Select documentation}
+ *
+ * @example
+ * import { Edit, SimpleForm, TextInput, SelectInput } from '@/components/admin';
+ *
+ * const PostEdit = () => (
+ *   <Edit>
+ *     <SimpleForm>
+ *       <TextInput source="title" />
+ *       <SelectInput
+ *         source="category"
+ *         choices={[
+ *           { id: 'tech', name: 'Tech' },
+ *           { id: 'lifestyle', name: 'Lifestyle' },
+ *           { id: 'people', name: 'People' },
+ *         ]}
+ *       />
+ *     </SimpleForm>
+ *   </Edit>
+ * );
+ */
+export const SelectInput = (props: SelectInputProps) => {
+  const {
+    choices: choicesProp,
+    isLoading: isLoadingProp,
+    isFetching: isFetchingProp,
+    isPending: isPendingProp,
+    resource: resourceProp,
+    source: sourceProp,
+
+    optionText,
+    optionValue,
+    disableValue = "disabled",
+    translateChoice,
+    createValue,
+    createHintValue,
+
+    alwaysOn,
+    defaultValue,
+    format,
+    label,
+    helperText,
+    name,
+    onBlur,
+    onChange,
+    parse,
+    validate,
+    readOnly,
+    disabled,
+
+    className,
+    emptyText = "",
+    emptyValue = "",
+    filter: _filter,
+    create,
+    createLabel,
+    onCreate,
+
+    ...rest
+  } = props;
+  const translate = useTranslate();
+
+  useEffect(() => {
+    if (emptyValue == null) {
+      throw new Error(
+        `emptyValue being set to null or undefined is not supported. Use parse to turn the empty string into null.`,
+      );
+    }
+  }, [emptyValue]);
+
+  const {
+    allChoices,
+    isPending,
+    error: fetchError,
+    source,
+    resource,
+    isFromReference,
+  } = useChoicesContext({
+    choices: choicesProp,
+    isLoading: isLoadingProp,
+    isFetching: isFetchingProp,
+    isPending: isPendingProp,
+    resource: resourceProp,
+    source: sourceProp,
+  });
+
+  if (source === undefined) {
+    throw new Error(
+      `If you're not wrapping the SelectInput inside a ReferenceInput, you must provide the source prop`,
+    );
+  }
+
+  if (!isPending && !fetchError && allChoices === undefined) {
+    throw new Error(
+      `If you're not wrapping the SelectInput inside a ReferenceInput, you must provide the choices prop`,
+    );
+  }
+
+  const getRecordRepresentation = useGetRecordRepresentation(resource);
+  const { getChoiceText, getChoiceValue, getDisableValue } = useChoices({
+    optionText:
+      optionText ?? (isFromReference ? getRecordRepresentation : undefined),
+    optionValue,
+    disableValue,
+    translateChoice: translateChoice ?? !isFromReference,
+    createValue,
+    createHintValue,
+  });
+  const { id, field, isRequired } = useInput({
+    alwaysOn,
+    defaultValue,
+    format,
+    label,
+    helperText,
+    name,
+    onBlur,
+    onChange,
+    parse,
+    resource,
+    source,
+    validate,
+    readOnly,
+    disabled,
+  });
+
+  const renderEmptyItemOption = useCallback(() => {
+    return typeof emptyText === "string"
+      ? emptyText === ""
+        ? " " // em space, forces the display of an empty line of normal height
+        : translate(emptyText, { _: emptyText })
+      : emptyText;
+  }, [emptyText, translate]);
+
+  const renderMenuItemOption = useCallback(
+    (choice: any) => getChoiceText(choice),
+    [getChoiceText],
+  );
+
+  const handleChange = useCallback(
+    async (value: string) => {
+      if (value === emptyValue) {
+        field.onChange(emptyValue);
+      } else {
+        // Find the choice by value and pass it to field.onChange
+        const choice = allChoices?.find(
+          (choice) => getChoiceValue(choice) === value,
+        );
+        field.onChange(choice ? getChoiceValue(choice) : value);
+      }
+    },
+    [field, getChoiceValue, emptyValue, allChoices],
+  );
+
+  const {
+    getCreateItem,
+    handleChange: handleChangeWithCreateSupport,
+    createElement,
+  } = useSupportCreateSuggestion({
+    create,
+    createLabel,
+    createValue,
+    createHintValue,
+    onCreate,
+    handleChange,
+    optionText,
+  });
+
+  if (isPending) {
+    return (
+      <FormField
+        id={id}
+        name={field.name}
+        className={cn("w-full min-w-20", className)}
+      >
+        {label !== "" && label !== false && (
+          <FormLabel>
+            <FieldTitle
+              label={label}
+              source={source}
+              resource={resourceProp}
+              isRequired={isRequired}
+            />
+          </FormLabel>
+        )}
+        <div className="relative">
+          <Skeleton className="w-full h-9" />
+        </div>
+        <InputHelperText helperText={helperText} />
+        <FormError />
+      </FormField>
+    );
+  }
+
+  const createItem = create || onCreate ? getCreateItem() : null;
+  let finalChoices = fetchError ? [] : allChoices;
+  if (create || onCreate) {
+    finalChoices = [...finalChoices, createItem];
+  }
+
+  // Handle reset functionality
+  const handleReset = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+    field.onChange(emptyValue);
+  };
+
+  return (
+    <>
+      <FormField
+        id={id}
+        name={field.name}
+        className={cn("w-full min-w-20", className)}
+        {...rest}
+      >
+        {label !== "" && label !== false && (
+          <FormLabel>
+            <FieldTitle
+              label={label}
+              source={source}
+              resource={resourceProp}
+              isRequired={isRequired}
+            />
+          </FormLabel>
+        )}
+        <div className="relative">
+          <Select
+            //FIXME https://github.com/radix-ui/primitives/issues/3135
+            // Setting a key based on the value fixes an issue where onValueChange
+            // was called with an empty string when the controlled value was changed.
+            // See: https://github.com/radix-ui/primitives/issues/3135#issuecomment-2916908248
+            key={`select:${field.value?.toString() ?? emptyValue}`}
+            value={field.value?.toString() || emptyValue}
+            onValueChange={handleChangeWithCreateSupport}
+          >
+            <SelectTrigger
+              className={cn("w-full transition-all hover:bg-accent")}
+              disabled={field.disabled}
+            >
+              <SelectValue placeholder={renderEmptyItemOption()} />
+
+              {field.value && field.value !== emptyValue ? (
+                <div
+                  role="button"
+                  className="p-0 ml-auto pointer-events-auto hover:bg-transparent text-muted-foreground opacity-50 hover:opacity-100"
+                  onClick={handleReset}
+                >
+                  <X className="h-4 w-4" />
+                </div>
+              ) : null}
+            </SelectTrigger>
+            <SelectContent>
+              {finalChoices?.map((choice) => {
+                if (!choice) return null;
+                const value = getChoiceValue(choice);
+                const isDisabled = getDisableValue(choice);
+
+                return (
+                  <SelectItem
+                    key={value}
+                    value={value?.toString()}
+                    disabled={isDisabled}
+                  >
+                    {renderMenuItemOption(
+                      !!createItem && choice?.id === createItem.id
+                        ? createItem
+                        : choice,
+                    )}
+                  </SelectItem>
+                );
+              })}
+            </SelectContent>
+          </Select>
+        </div>
+        <InputHelperText helperText={helperText} />
+      </FormField>
+      {createElement}
+    </>
+  );
+};
+
+export type SelectInputProps = ChoicesProps &
+  // Source is optional as SelectInput can be used inside a ReferenceInput that already defines the source
+  Partial<InputProps> &
+  Omit<SupportCreateSuggestionOptions, "handleChange"> & {
+    emptyText?: string | ReactElement;
+
+    emptyValue?: any;
+    onChange?: (value: string) => void;
+  } & Omit<ComponentProps<typeof FormField>, "id" | "name" | "children">;

package/src/components/admin/show-button.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { Link } from "react-router";
+import { buttonVariants } from "@/components/ui/button";
+import { Eye } from "lucide-react";
+import {
+  Translate,
+  useCreatePath,
+  useRecordContext,
+  useResourceContext,
+} from "ra-core";
+
+export type ShowButtonProps = {
+  label?: string;
+  icon?: React.ReactNode;
+} & React.AnchorHTMLAttributes<HTMLAnchorElement>;
+
+/**
+ * A button that navigates to the show page for a record.
+ *
+ * Works within RecordContext to automatically get the record ID.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/showbutton/ ShowButton documentation}
+ *
+ * @example
+ * import { ShowButton } from '@/components/admin';
+ *
+ * const PostActions = () => (
+ *   <ShowButton label="View Details" />
+ * );
+ */
+export const ShowButton = (props: ShowButtonProps) => {
+  const resource = useResourceContext();
+  const record = useRecordContext();
+  const createPath = useCreatePath();
+  const link = createPath({
+    resource,
+    type: "show",
+    id: record?.id,
+  });
+  const { label, icon, ...rest } = props;
+  return (
+    <Link
+      className={buttonVariants({ variant: "outline" })}
+      to={link}
+      onClick={stopPropagation}
+      {...rest}
+    >
+      {icon ?? <Eye />}
+      <Translate i18nKey={label ?? "ra.action.show"}>
+        {label ?? "Show"}
+      </Translate>
+    </Link>
+  );
+};
+
+// useful to prevent click bubbling in a datagrid with rowClick
+const stopPropagation = (e: React.MouseEvent) => e.stopPropagation();

package/src/components/admin/show-guesser.tsx

@@ -0,0 +1,215 @@
+import type { ReactNode } from "react";
+import { useEffect, useState, isValidElement, Children } from "react";
+import type { InferredTypeMap } from "ra-core";
+import {
+  ShowBase,
+  InferredElement,
+  getElementsFromRecords,
+  useResourceContext,
+  useShowContext,
+} from "ra-core";
+import { capitalize, singularize } from "inflection";
+import { ShowView } from "@/components/admin/show";
+import { RecordField } from "@/components/admin/record-field";
+import { DateField } from "./date-field";
+import { ReferenceField } from "@/components/admin/reference-field";
+import { NumberField } from "@/components/admin/number-field";
+import { ArrayField } from "@/components/admin/array-field";
+import { BadgeField } from "@/components/admin/badge-field";
+import { SingleFieldList } from "@/components/admin/single-field-list";
+import { ReferenceArrayField } from "@/components/admin/reference-array-field";
+
+/**
+ * A show page that automatically generates fields from your data.
+ *
+ * Inspects the record to infer field types and automatically creates appropriate display fields.
+ * Useful for rapid prototyping. Logs generated code to console when enableLog is true.
+ *
+ * @example
+ * import { ShowGuesser } from '@/components/admin';
+ *
+ * export const PostShow = () => <ShowGuesser enableLog />;
+ */
+export const ShowGuesser = (props: { enableLog?: boolean }) => (
+  <ShowBase>
+    <ShowViewGuesser {...props} />
+  </ShowBase>
+);
+
+const ShowViewGuesser = (props: { enableLog?: boolean }) => {
+  const resource = useResourceContext();
+
+  if (!resource) {
+    throw new Error(`Cannot use <ShowGuesser> outside of a ResourceContext`);
+  }
+
+  const { record } = useShowContext();
+  const [child, setChild] = useState<ReactNode>(null);
+  const { enableLog = process.env.NODE_ENV === "development", ...rest } = props;
+
+  useEffect(() => {
+    setChild(null);
+  }, [resource]);
+
+  useEffect(() => {
+    if (record && !child) {
+      const inferredElements = getElementsFromRecords([record], showFieldTypes);
+      const inferredChild = new InferredElement(
+        showFieldTypes.show,
+        null,
+        inferredElements,
+      );
+      setChild(inferredChild.getElement());
+
+      if (!enableLog) return;
+
+      const representation = inferredChild.getRepresentation();
+      const components = ["Show"]
+        .concat(
+          Array.from(
+            new Set(
+              Array.from(representation.matchAll(/<([^/\s>]+)/g))
+                .map((match) => match[1])
+                .filter(
+                  (component) => component !== "span" && component !== "div",
+                ),
+            ),
+          ),
+        )
+        .sort();
+
+      // eslint-disable-next-line no-console
+      console.log(
+        `Guessed Show:
+
+${components
+  .map(
+    (component) =>
+      `import { ${component} } from "@/components/admin/${kebabCase(
+        component,
+      )}";`,
+  )
+  .join("\n")}
+
+export const ${capitalize(singularize(resource))}Show = () => (
+    <Show>
+${inferredChild.getRepresentation()}
+    </Show>
+);`,
+      );
+    }
+  }, [record, child, resource, enableLog]);
+
+  return <ShowView {...rest}>{child}</ShowView>;
+};
+
+const showFieldTypes: InferredTypeMap = {
+  show: {
+    component: (props: any) => (
+      <div className="flex flex-col gap-4">{props.children}</div>
+    ),
+    representation: (
+      _props: any,
+      children: { getRepresentation: () => string }[],
+    ) => `        <div className="flex flex-col gap-4">
+${children
+  .map((child) => `            ${child.getRepresentation()}`)
+  .join("\n")}
+        </div>`,
+  },
+  reference: {
+    component: (props: any) => (
+      <RecordField source={props.source}>
+        <ReferenceField source={props.source} reference={props.reference} />
+      </RecordField>
+    ),
+    representation: (props: any) =>
+      `<RecordField source="${props.source}">
+                <ReferenceField source="${props.source}" reference="${props.reference}" />
+            </RecordField>`,
+  },
+  array: {
+    component: ({ children, ...props }: any) => {
+      const childrenArray = Children.toArray(children);
+      return (
+        <RecordField source={props.source}>
+          <ArrayField source={props.source}>
+            <SingleFieldList>
+              <BadgeField
+                source={
+                  childrenArray.length > 0 &&
+                  isValidElement(childrenArray[0]) &&
+                  (childrenArray[0].props as any).source
+                }
+              />
+            </SingleFieldList>
+          </ArrayField>
+        </RecordField>
+      );
+    },
+    representation: (props: any, children: any) =>
+      `<RecordField source="${props.source}">
+                <ArrayField source="${props.source}">
+                    <SingleFieldList>
+                        <BadgeField source="${
+                          children.length > 0 && children[0].getProps().source
+                        }" />
+                    </SingleFieldList>
+                </ArrayField>
+            </RecordField>`,
+  },
+  referenceArray: {
+    component: (props: any) => (
+      <RecordField source={props.source}>
+        <ReferenceArrayField {...props} />
+      </RecordField>
+    ),
+    representation: (props: any) =>
+      `<RecordField source="${props.source}">
+                <ReferenceArrayField source="${props.source}" reference="${props.reference}" />
+            </RecordField>`,
+  },
+  boolean: {
+    component: (props: any) => (
+      <RecordField
+        source={props.source}
+        render={(record) => (record[props.source] ? "Yes" : "No")}
+      />
+    ),
+    representation: (props: any) =>
+      `<RecordField source="${props.source}" render={record => record[${props.source}] ? 'Yes' : 'No'} />`,
+  },
+  date: {
+    component: (props: any) => (
+      <RecordField source={props.source}>
+        <DateField source={props.source} />
+      </RecordField>
+    ),
+    representation: (props: any) =>
+      `<RecordField source="${props.source}">
+                <DateField source="${props.source}" />
+            </RecordField>`,
+  },
+  number: {
+    component: (props: any) => (
+      <RecordField source={props.source}>
+        <NumberField source={props.source} />
+      </RecordField>
+    ),
+    representation: (props: any) =>
+      `<RecordField source="${props.source}">
+                <NumberField source="${props.source}" />
+            </RecordField>`,
+  },
+  string: {
+    component: (props: any) => <RecordField source={props.source} />,
+    representation: (props: any) => `<RecordField source="${props.source}" />`,
+  },
+};
+
+const kebabCase = (name: string) => {
+  return name
+    .replace(/([a-z])([A-Z])/g, "$1-$2")
+    .replace(/([A-Z])([A-Z][a-z])/g, "$1-$2")
+    .toLowerCase();
+};