realtimex-crm 0.1.2

package/src/components/atomic-crm/simple-list/SimpleList.tsx

@@ -0,0 +1,245 @@
+import {
+  ListIterator,
+  type RaRecord,
+  sanitizeListRestProps,
+  useGetRecordRepresentation,
+  useListContextWithProps,
+  useRecordContext,
+  useResourceContext,
+  useTranslate,
+} from "ra-core";
+import { isValidElement, type ReactElement } from "react";
+
+import { ListNoResults } from "./ListNoResults.tsx";
+import type { FunctionToElement } from "./SimpleListItem.tsx";
+import {
+  type SimpleListBaseProps,
+  SimpleListItem,
+  type SimpleListItemProps,
+} from "./SimpleListItem.tsx";
+import { SimpleListLoading } from "./SimpleListLoading.tsx";
+
+/**
+ * The <SimpleList> component renders a list of records
+ * It is usually used as a child of shadcn-admin-kit's <List> and <ReferenceManyField> components.
+ *
+ * Also widely used on Mobile.
+ *
+ * Props:
+ * - primaryText: function returning a React element (or some text) based on the record
+ * - secondaryText: same
+ * - tertiaryText: same
+ * - leftAvatar: function returning a React element based on the record
+ * - leftIcon: same
+ * - rightAvatar: same
+ * - rightIcon: same
+ * - linkType: deprecated - 'edit' or 'show', or a function returning 'edit' or 'show' based on the record
+ * - rowClick: The action to trigger when the user clicks on a row.
+ * - rowStyle: function returning a style object based on (record, index)
+ * - rowSx: function returning a sx object based on (record, index)
+ *
+ * @example // Display all posts as a List
+ * const postRowSx = (record, index) => ({
+ *     backgroundColor: record.views >= 500 ? '#efe' : 'white',
+ * });
+ * export const PostList = () => (
+ *     <List>
+ *         <SimpleList
+ *             primaryText={record => record.title}
+ *             secondaryText={record => `${record.views} views`}
+ *             tertiaryText={record =>
+ *                 new Date(record.published_at).toLocaleDateString()
+ *             }
+ *             rowSx={postRowSx}
+ *          />
+ *     </List>
+ * );
+ */
+export const SimpleList = <RecordType extends RaRecord = any>(
+  props: SimpleListProps<RecordType>,
+) => {
+  const {
+    className,
+    empty = DefaultEmpty,
+    leftAvatar,
+    leftIcon,
+    linkType,
+    rowClick,
+    primaryText,
+    rightAvatar,
+    rightIcon,
+    secondaryText,
+    tertiaryText,
+    resource,
+    ...rest
+  } = props;
+  const { data, isPending, total } = useListContextWithProps<RecordType>(props);
+
+  if (isPending === true) {
+    return (
+      <SimpleListLoading
+        className={className}
+        hasLeftAvatarOrIcon={!!leftIcon || !!leftAvatar}
+        hasRightAvatarOrIcon={!!rightIcon || !!rightAvatar}
+        hasSecondaryText={!!secondaryText}
+        hasTertiaryText={!!tertiaryText}
+      />
+    );
+  }
+
+  if (data == null || data.length === 0 || total === 0) {
+    if (empty) {
+      return empty;
+    }
+
+    return null;
+  }
+
+  return (
+    <ul className={className} {...sanitizeListRestProps(rest)}>
+      <ListIterator<RecordType>
+        data={data}
+        total={total}
+        render={(record, rowIndex) => (
+          <SimpleListItem
+            key={record.id}
+            rowIndex={rowIndex}
+            linkType={linkType}
+            rowClick={rowClick}
+            resource={resource}
+          >
+            <SimpleListItemContent
+              leftAvatar={leftAvatar}
+              leftIcon={leftIcon}
+              primaryText={primaryText}
+              rightAvatar={rightAvatar}
+              rightIcon={rightIcon}
+              secondaryText={secondaryText}
+              tertiaryText={tertiaryText}
+              rowIndex={rowIndex}
+            />
+          </SimpleListItem>
+        )}
+      />
+    </ul>
+  );
+};
+
+export interface SimpleListProps<RecordType extends RaRecord = any>
+  extends SimpleListBaseProps<RecordType> {
+  className?: string;
+  empty?: ReactElement;
+  // can be injected when using the component without context
+  resource?: string;
+  data?: RecordType[];
+  isLoading?: boolean;
+  isPending?: boolean;
+  isLoaded?: boolean;
+  total?: number;
+}
+
+const SimpleListItemContent = <RecordType extends RaRecord = any>(
+  props: SimpleListItemProps<RecordType>,
+) => {
+  const {
+    leftAvatar,
+    leftIcon,
+    primaryText,
+    rightAvatar,
+    rightIcon,
+    secondaryText,
+    tertiaryText,
+  } = props;
+  const resource = useResourceContext(props);
+  const record = useRecordContext<RecordType>(props);
+  const getRecordRepresentation = useGetRecordRepresentation(resource);
+  const translate = useTranslate();
+
+  const renderAvatar = (
+    record: RecordType,
+    avatarCallback: FunctionToElement<RecordType>,
+  ) => {
+    const avatarValue = avatarCallback(record, record.id);
+    if (
+      typeof avatarValue === "string" &&
+      (avatarValue.startsWith("http") || avatarValue.startsWith("data:"))
+    ) {
+      return (
+        <img
+          src={avatarValue}
+          alt=""
+          className="w-10 h-10 rounded-full object-cover"
+        />
+      );
+    } else {
+      return (
+        <div className="w-10 h-10 rounded-full flex items-center justify-center text-sm">
+          {avatarValue}
+        </div>
+      );
+    }
+  };
+
+  if (!record) return null;
+
+  return (
+    <div className="flex items-center space-x-3 p-3">
+      {leftIcon && (
+        <div className="flex-shrink-0">{leftIcon(record, record.id)}</div>
+      )}
+      {leftAvatar && (
+        <div className="flex-shrink-0">{renderAvatar(record, leftAvatar)}</div>
+      )}
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center justify-between">
+          <div className="text-sm font-medium truncate">
+            {primaryText
+              ? typeof primaryText === "string"
+                ? translate(primaryText, {
+                    ...record,
+                    _: primaryText,
+                  })
+                : isValidElement(primaryText)
+                  ? primaryText
+                  : primaryText(record, record.id)
+              : getRecordRepresentation(record)}
+          </div>
+
+          {!!tertiaryText && (
+            <div className="text-xs text-muted-foreground ml-2">
+              {typeof tertiaryText === "string"
+                ? translate(tertiaryText, {
+                    ...record,
+                    _: tertiaryText,
+                  })
+                : isValidElement(tertiaryText)
+                  ? tertiaryText
+                  : tertiaryText(record, record.id)}
+            </div>
+          )}
+        </div>
+
+        {!!secondaryText && (
+          <div className="text-sm text-muted-foreground truncate">
+            {typeof secondaryText === "string"
+              ? translate(secondaryText, {
+                  ...record,
+                  _: secondaryText,
+                })
+              : isValidElement(secondaryText)
+                ? secondaryText
+                : secondaryText(record, record.id)}
+          </div>
+        )}
+      </div>
+      {(rightAvatar || rightIcon) && (
+        <div className="flex-shrink-0 flex items-center space-x-2">
+          {rightAvatar && renderAvatar(record, rightAvatar)}
+          {rightIcon && rightIcon(record, record.id)}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const DefaultEmpty = <ListNoResults />;

package/src/components/atomic-crm/simple-list/SimpleListItem.tsx

@@ -0,0 +1,138 @@
+import {
+  useEvent,
+  useGetPathForRecord,
+  useGetPathForRecordCallback,
+  useRecordContext,
+  useResourceContext,
+  type Identifier,
+  type LinkToType,
+  type RaRecord,
+} from "ra-core";
+import type { CSSProperties, ReactElement, ReactNode } from "react";
+import { Link, useNavigate } from "react-router";
+
+export const SimpleListItem = <RecordType extends RaRecord = any>(
+  props: SimpleListItemProps<RecordType>,
+) => {
+  const { children, linkType, rowClick, style } = props;
+  const resource = useResourceContext(props);
+  const record = useRecordContext<RecordType>(props);
+  const navigate = useNavigate();
+  // If we don't have a function to get the path, we can compute the path immediately and set the href
+  // on the Link correctly without onClick (better for accessibility)
+  const isFunctionLink =
+    typeof linkType === "function" || typeof rowClick === "function";
+  const pathForRecord = useGetPathForRecord({
+    link: isFunctionLink ? false : (linkType ?? rowClick),
+    resource,
+  });
+  const getPathForRecord = useGetPathForRecordCallback();
+  const handleClick = useEvent(async () => {
+    // No need to handle non function linkType or rowClick
+    if (!isFunctionLink) return;
+    if (!record) return;
+
+    const link: LinkToType =
+      typeof linkType === "function"
+        ? linkType(record, record.id)
+        : typeof rowClick === "function"
+          ? (record, resource) => rowClick(record.id, resource, record)
+          : false;
+
+    const path = await getPathForRecord({
+      record,
+      resource,
+      link,
+    });
+    if (path === false || path == null) {
+      return;
+    }
+    navigate(path);
+  });
+
+  if (!record) return null;
+
+  if (isFunctionLink) {
+    return (
+      <li className="w-full">
+        <button
+          onClick={handleClick}
+          style={style}
+          className="w-full text-left hover:bg-muted focus: bg-muted focus:outline-none"
+        >
+          {children}
+        </button>
+      </li>
+    );
+  }
+
+  if (pathForRecord) {
+    return (
+      <li className="w-full">
+        <Link
+          to={pathForRecord}
+          style={style}
+          className="block w-full hover:bg-muted focus:bg-muted focus:outline-none"
+        >
+          {children}
+        </Link>
+      </li>
+    );
+  }
+
+  return <li className="w-full">{children}</li>;
+};
+
+export type FunctionToElement<RecordType extends RaRecord = any> = (
+  record: RecordType,
+  id: Identifier,
+) => ReactNode;
+
+export type FunctionLinkType = (record: RaRecord, id: Identifier) => string;
+
+export interface SimpleListBaseProps<RecordType extends RaRecord = any> {
+  leftAvatar?: FunctionToElement<RecordType>;
+  leftIcon?: FunctionToElement<RecordType>;
+  primaryText?: FunctionToElement<RecordType> | ReactElement | string;
+  /**
+   * @deprecated use rowClick instead
+   */
+  linkType?: string | FunctionLinkType | false;
+
+  /**
+   * The action to trigger when the user clicks on a row.
+   *
+   * @see https://marmelab.com/shadcn-admin-kit/docs/datatable/
+   * @example
+   * import { List, DataTable } from 'shadcn-admin-kit';
+   *
+   * export const PostList = () => (
+   *     <List>
+   *         <DataTable rowClick="edit">
+   *             ...
+   *         </DataTable>                    </ListItem>
+
+   *     </List>
+   * );
+   */
+  rowClick?: string | RowClickFunction | false;
+  rightAvatar?: FunctionToElement<RecordType>;
+  rightIcon?: FunctionToElement<RecordType>;
+  secondaryText?: FunctionToElement<RecordType> | ReactElement | string;
+  tertiaryText?: FunctionToElement<RecordType> | ReactElement | string;
+}
+
+export interface SimpleListItemProps<RecordType extends RaRecord = any>
+  extends SimpleListBaseProps<RecordType> {
+  rowIndex: number;
+  className?: string;
+  style?: CSSProperties;
+  children?: ReactNode;
+  resource?: string;
+}
+
+export type RowClickFunction<RecordType extends RaRecord = RaRecord> = (
+  id: Identifier,
+  resource: string,
+  record: RecordType,
+) => string | false | Promise<string | false>;

package/src/components/atomic-crm/simple-list/SimpleListLoading.tsx

@@ -0,0 +1,60 @@
+import { useTimeout } from "ra-core";
+import type { ReactNode } from "react";
+
+import { ListPlaceholder } from "./ListPlaceholder.tsx";
+
+export const SimpleListLoading = (props: SimpleListLoadingProps) => {
+  const {
+    className,
+    hasLeftAvatarOrIcon,
+    hasRightAvatarOrIcon,
+    hasSecondaryText,
+    hasTertiaryText,
+    nbFakeLines = 5,
+    ...rest
+  } = props;
+
+  const oneSecondHasPassed = useTimeout(1000);
+
+  return oneSecondHasPassed ? (
+    <ul className={className} {...rest}>
+      {times(nbFakeLines, (key) => (
+        <li key={key} className="flex items-center space-x-3 p-3">
+          {hasLeftAvatarOrIcon && (
+            <div className="w-10 h-10 bg-gray-300 rounded-full flex-shrink-0">
+              &nbsp;
+            </div>
+          )}
+          <div className="flex-1 min-w-0">
+            <div className="mb-1">
+              <ListPlaceholder className="w-1/3 inline-block mb-1" />
+              {hasTertiaryText && (
+                <span className="float-right opacity-55 min-w-[10vw]">
+                  <ListPlaceholder />
+                </span>
+              )}
+            </div>
+            {hasSecondaryText && <ListPlaceholder className="w-1/4" />}
+          </div>
+          {hasRightAvatarOrIcon && (
+            <div className="w-10 h-10 bg-gray-300 rounded-full flex-shrink-0">
+              &nbsp;
+            </div>
+          )}
+        </li>
+      ))}
+    </ul>
+  ) : null;
+};
+
+const times = (nbChildren: number, fn: (key: number) => ReactNode) =>
+  Array.from({ length: nbChildren }, (_, key) => fn(key));
+
+export interface SimpleListLoadingProps {
+  className?: string;
+  hasLeftAvatarOrIcon?: boolean;
+  hasRightAvatarOrIcon?: boolean;
+  hasSecondaryText?: boolean;
+  hasTertiaryText?: boolean;
+  nbFakeLines?: number;
+}

package/src/components/atomic-crm/tags/RoundButton.tsx

@@ -0,0 +1,10 @@
+export const RoundButton = ({ color, handleClick, selected }: any) => (
+  <button
+    type="button"
+    className={`w-8 h-8 rounded-full inline-block m-1 transition-all ${
+      selected ? "ring-2 ring-gray-500 ring-offset-1" : ""
+    }`}
+    style={{ backgroundColor: color }}
+    onClick={handleClick}
+  />
+);

package/src/components/atomic-crm/tags/TagChip.tsx

@@ -0,0 +1,45 @@
+import { X } from "lucide-react";
+import { useState } from "react";
+
+import type { Tag } from "../types";
+import { TagEditModal } from "./TagEditModal";
+
+type TagChipProps = {
+  tag: Tag;
+
+  onUnlink: () => Promise<void>;
+};
+
+export function TagChip({ tag, onUnlink }: TagChipProps) {
+  const [open, setOpen] = useState(false);
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const handleClick = () => {
+    setOpen(true);
+  };
+
+  return (
+    <>
+      <div
+        className="text-black inline-flex items-center gap-1 px-2 py-1 text-xs rounded-md cursor-pointer hover:opacity-80 transition-opacity"
+        style={{ backgroundColor: tag.color }}
+        onClick={handleClick}
+      >
+        {tag.name}
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            onUnlink();
+          }}
+          className="transition-colors p-0 ml-1 cursor-pointer"
+        >
+          <X className="w-3 h-3" />
+        </button>
+      </div>
+      <TagEditModal tag={tag} open={open} onClose={handleClose} />
+    </>
+  );
+}

package/src/components/atomic-crm/tags/TagCreateModal.tsx

@@ -0,0 +1,39 @@
+import { useCreate } from "ra-core";
+
+import type { Tag } from "../types";
+import { TagDialog } from "./TagDialog";
+
+type TagCreateModalProps = {
+  open: boolean;
+  onClose(): void;
+  onSuccess?(tag: Tag): Promise<void>;
+};
+
+export function TagCreateModal({
+  open,
+  onClose,
+  onSuccess,
+}: TagCreateModalProps) {
+  const [create] = useCreate<Tag>();
+
+  const handleCreateTag = async (data: Pick<Tag, "name" | "color">) => {
+    await create(
+      "tags",
+      { data },
+      {
+        onSuccess: async (tag) => {
+          await onSuccess?.(tag);
+        },
+      },
+    );
+  };
+
+  return (
+    <TagDialog
+      open={open}
+      title="Create a new tag"
+      onClose={onClose}
+      onSubmit={handleCreateTag}
+    />
+  );
+}

package/src/components/atomic-crm/tags/TagDialog.tsx

@@ -0,0 +1,118 @@
+import { SaveIcon } from "lucide-react";
+import { useEffect, useState, type ChangeEvent, type FormEvent } from "react";
+import { Button, buttonVariants } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+
+import type { Tag } from "../types";
+import { colors } from "./colors";
+import { RoundButton } from "./RoundButton";
+
+type TagDialogProps = {
+  open: boolean;
+  tag?: Pick<Tag, "name" | "color">;
+  title: string;
+  onSubmit(tag: Pick<Tag, "name" | "color">): Promise<void>;
+  onClose(): void;
+};
+
+export function TagDialog({
+  open,
+  tag,
+  title,
+  onClose,
+  onSubmit,
+}: TagDialogProps) {
+  const [newTagName, setNewTagName] = useState("");
+  const [newTagColor, setNewTagColor] = useState(colors[0]);
+  const [disabled, setDisabled] = useState(false);
+
+  const handleNewTagNameChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setNewTagName(event.target.value);
+  };
+
+  const handleClose = () => {
+    setDisabled(false);
+    onClose();
+  };
+
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    await onSubmit({ name: newTagName, color: newTagColor });
+
+    setDisabled(true);
+    setNewTagName("");
+    setNewTagColor(colors[0]);
+
+    handleClose();
+  };
+
+  useEffect(() => {
+    setNewTagName(tag?.name ?? "");
+    setNewTagColor(tag?.color ?? colors[0]);
+  }, [tag]);
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-lg">
+        <form onSubmit={handleSubmit}>
+          <DialogHeader>
+            <DialogTitle>{title}</DialogTitle>
+          </DialogHeader>
+
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label htmlFor="tag-name">Tag name</Label>
+              <Input
+                id="tag-name"
+                autoFocus
+                value={newTagName}
+                onChange={handleNewTagNameChange}
+                placeholder="Enter tag name"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label>Color</Label>
+              <div className="flex flex-wrap">
+                {colors.map((color) => (
+                  <RoundButton
+                    key={color}
+                    color={color}
+                    selected={color === newTagColor}
+                    handleClick={() => {
+                      setNewTagColor(color);
+                    }}
+                  />
+                ))}
+              </div>
+            </div>
+          </div>
+
+          <div className="flex justify-end pt-4">
+            <Button
+              variant="outline"
+              disabled={disabled}
+              className={cn(
+                buttonVariants({ variant: "outline" }),
+                "text-primary",
+                disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
+              )}
+            >
+              <SaveIcon />
+              Save
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/atomic-crm/tags/TagEditModal.tsx

@@ -0,0 +1,42 @@
+import { useUpdate } from "ra-core";
+
+import type { Tag } from "../types";
+import { TagDialog } from "./TagDialog";
+
+type TagEditModalProps = {
+  tag: Tag;
+  open: boolean;
+  onClose(): void;
+  onSuccess?(tag: Tag): Promise<void>;
+};
+
+export function TagEditModal({
+  tag,
+  open,
+  onClose,
+  onSuccess,
+}: TagEditModalProps) {
+  const [update] = useUpdate<Tag>();
+
+  const handleEditTag = async (data: Pick<Tag, "name" | "color">) => {
+    await update(
+      "tags",
+      { id: tag.id, data, previousData: tag },
+      {
+        onSuccess: async (tag) => {
+          await onSuccess?.(tag);
+        },
+      },
+    );
+  };
+
+  return (
+    <TagDialog
+      open={open}
+      title="Edit tag"
+      onClose={onClose}
+      onSubmit={handleEditTag}
+      tag={tag}
+    />
+  );
+}