realtimex-crm 0.1.2

package/src/hooks/useSupportCreateSuggestion.tsx

@@ -0,0 +1,188 @@
+import * as React from "react";
+import type { ChangeEvent, ReactElement } from "react";
+import {
+  createContext,
+  isValidElement,
+  useContext,
+  useRef,
+  useState,
+} from "react";
+import type { Identifier, OptionText } from "ra-core";
+import { useTranslate } from "ra-core";
+import set from "lodash/set";
+
+/**
+ * This hook provides support for suggestion creation in inputs which have choices.
+ *
+ * @deprecated Use `useSupportCreateSuggestion` from "ra-core" when available.
+ *
+ * @param options The hook option
+ * @param {ReactElement} options.create A react element which will be rendered when users choose to create a new choice. This component must call the `useCreateSuggestionContext` hook which provides `onCancel`, `onCreate` and `filter`. See the examples.
+ * @param {React.ReactNode|string} options.createLabel Optional. The label for the choice item allowing users to create a new choice. Can be a translation key. Defaults to `ra.action.create`.
+ * @param {React.ReactNode|string} options.createItemLabel Optional. The label for the choice item allowing users to create a new choice when they already entered a filter. Can be a translation key. The function and ttranslation will receive an `item` parameter. Providing this option will turn the create label when there is no filter to be a hint (i.e. a disabled item).
+ * @param {any} options.createValue Optional. The value for the choice item allowing users to create a new choice. Defaults to `@@ra-create`.
+ * @param {any} options.createHintValue Optional. The value for the (disabled) item hinting users on how to create a new choice. Defaults to `@@ra-create-hint`.
+ * @param {String} options.filter Optional. The filter users may have already entered. Useful for autocomplete inputs for example.
+ * @param {OnCreateHandler} options.onCreate Optional. A function which will be called when users choose to create a new choice, if the `create` option wasn't provided.
+ * @param {Function} options.handleChange A function to pass to the input. Receives the same parameter as the original event handler and an additional newItem parameter if a new item was create.
+ *
+ * @returns {UseSupportCreateValue} An object with the following properties:
+ * - getCreateItem: a function which will return the label of the choice for create a new choice.
+ * - handleChange: a function which should be called when the input value changes. It will call the `onCreate` function if the value is the createValue.
+ * - createElement: a React element to render after the input. It will be rendered when users choose to create a new choice. It renders null otherwise.
+ * - getOptionDisabled: a function which should be passed to the input to disable the create choice when the filter is empty (to make it a hint).
+ */
+export const useSupportCreateSuggestion = <T = unknown,>(
+  options: SupportCreateSuggestionOptions<T>,
+): UseSupportCreateValue<T> => {
+  const {
+    create,
+    createLabel = "ra.action.create",
+    createItemLabel,
+    createValue = "@@ra-create",
+    createHintValue = "@@ra-create-hint",
+    optionText = "name",
+    filter,
+    handleChange,
+    onCreate,
+  } = options;
+
+  const translate = useTranslate();
+  const [renderOnCreate, setRenderOnCreate] = useState(false);
+  const filterRef = useRef(filter);
+
+  return {
+    createId: createValue,
+    createHintId: createHintValue,
+    getCreateItem: (filter?: string) => {
+      filterRef.current = filter;
+
+      return set(
+        {
+          id: createItemLabel && !filter ? createHintValue : createValue,
+        },
+        typeof optionText === "string" ? optionText : "name",
+        filter && createItemLabel
+          ? typeof createItemLabel === "string"
+            ? translate(createItemLabel, {
+                item: filter,
+                _: createItemLabel,
+              })
+            : createItemLabel(filter)
+          : typeof createLabel === "string"
+            ? translate(createLabel, { _: createLabel })
+            : createLabel,
+      );
+    },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    handleChange: async (eventOrValue: MouseEvent | any) => {
+      const value = eventOrValue?.target?.value || eventOrValue;
+      const finalValue = Array.isArray(value) ? [...value].pop() : value;
+
+      if (finalValue?.id === createValue || finalValue === createValue) {
+        if (!isValidElement(create)) {
+          if (!onCreate) {
+            // this should never happen because the createValue is only added if a create function is provided
+            // @see AutocompleteInput:filterOptions
+            throw new Error(
+              "To create a new option, you must pass an onCreate function or a create element.",
+            );
+          }
+          const newSuggestion = await onCreate(filter);
+          if (newSuggestion) {
+            handleChange(newSuggestion);
+            return;
+          }
+        } else {
+          setRenderOnCreate(true);
+          return;
+        }
+      }
+      handleChange(eventOrValue);
+    },
+    createElement:
+      renderOnCreate && isValidElement(create) ? (
+        <CreateSuggestionContext.Provider
+          value={{
+            filter: filterRef.current,
+            onCancel: () => setRenderOnCreate(false),
+            onCreate: (item) => {
+              setRenderOnCreate(false);
+              handleChange(item as T);
+            },
+          }}
+        >
+          {create}
+        </CreateSuggestionContext.Provider>
+      ) : null,
+    getOptionDisabled: (option) =>
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (option as any)?.id === createHintValue || option === createHintValue,
+  };
+};
+
+/**
+ * @deprecated Use `SupportCreateSuggestionOptions` from "ra-core" when available.
+ */
+export interface SupportCreateSuggestionOptions<T = unknown> {
+  create?: ReactElement;
+  createValue?: string;
+  createHintValue?: string;
+  createLabel?: React.ReactNode;
+  createItemLabel?: string | ((filter: string) => React.ReactNode);
+  filter?: string;
+  handleChange: (value: T) => void;
+  onCreate?: OnCreateHandler;
+  optionText?: OptionText;
+}
+
+/**
+ * @deprecated Use `UseSupportCreateValue` from "ra-core" when available.
+ */
+export interface UseSupportCreateValue<T = unknown> {
+  createId: string;
+  createHintId: string;
+  getCreateItem: (filterValue?: string) => {
+    id: Identifier;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    [key: string]: any;
+  };
+  handleChange: (eventOrValue: ChangeEvent | T) => Promise<void>;
+  createElement: ReactElement | null;
+  getOptionDisabled: (option: T) => boolean;
+}
+
+/**
+ * @deprecated Use `CreateSuggestionContext` from "ra-core" when available.
+ */
+const CreateSuggestionContext = createContext<
+  CreateSuggestionContextValue | undefined
+>(undefined);
+
+/**
+ * @deprecated Use `CreateSuggestionContextValue` from "ra-core" when available.
+ */
+interface CreateSuggestionContextValue<T = unknown> {
+  filter?: string;
+  onCreate: (choice: T) => void;
+  onCancel: () => void;
+}
+
+/**
+ * @deprecated Use `useCreateSuggestionContext` from "ra-core" when available.
+ */
+export const useCreateSuggestionContext = () => {
+  const context = useContext(CreateSuggestionContext);
+  if (!context) {
+    throw new Error(
+      "useCreateSuggestionContext must be used inside a CreateSuggestionContext.Provider",
+    );
+  }
+  return context;
+};
+
+/**
+ * @deprecated Use `OnCreateHandler` from "ra-core" when available.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type OnCreateHandler = (filter?: string) => any | Promise<any>;

package/src/hooks/user-menu-context.tsx

@@ -0,0 +1,24 @@
+import { createContext, useContext } from "react";
+
+/**
+ * @deprecated Use UserMenuContextValue from `ra-core` once available.
+ */
+export type UserMenuContextValue = {
+  /**
+   * Closes the user menu
+   * @see UserMenu
+   */
+  onClose: () => void;
+};
+
+/**
+ * @deprecated Use UserMenuContext from `ra-core` once available.
+ */
+export const UserMenuContext = createContext<UserMenuContextValue | undefined>(
+  undefined,
+);
+
+/**
+ * @deprecated Use useUserMenu from `ra-core` once available.
+ */
+export const useUserMenu = () => useContext(UserMenuContext);

package/src/index.css

@@ -0,0 +1,170 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+  --avatar-0: oklch(0.85 0.08 240);
+  --avatar-1: oklch(0.88 0.1 340);
+  --avatar-2: oklch(0.85 0.07 180);
+  --avatar-3: oklch(0.9 0.09 40);
+  --avatar-4: oklch(0.87 0.08 300);
+  --avatar-5: oklch(0.85 0.08 150);
+  --avatar-6: oklch(0.87 0.08 200);
+  --avatar-7: oklch(0.88 0.09 10);
+  --avatar-8: oklch(0.92 0.08 80);
+  --avatar-9: oklch(0.86 0.09 270);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 15%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+  --avatar-0: oklch(0.35 0.12 240);
+  --avatar-1: oklch(0.38 0.14 340);
+  --avatar-2: oklch(0.35 0.11 180);
+  --avatar-3: oklch(0.38 0.13 40);
+  --avatar-4: oklch(0.36 0.12 300);
+  --avatar-5: oklch(0.35 0.11 150);
+  --avatar-6: oklch(0.37 0.12 200);
+  --avatar-7: oklch(0.38 0.14 10);
+  --avatar-8: oklch(0.4 0.11 80);
+  --avatar-9: oklch(0.36 0.13 270);
+}
+
+a,
+button {
+  cursor: pointer;
+}
+
+input {
+  cursor: text;
+}
+
+a[aria-disabled="true"],
+button[aria-disabled="true"],
+button:disabled,
+input[aria-disabled="true"],
+input:disabled {
+  cursor: not-allowed;
+}
+
+input[type="date"],
+input[type="datetime-local"],
+input[type="month"],
+input[type="time"] {
+  position: relative;
+}
+
+.dark ::-webkit-calendar-picker-indicator {
+  filter: invert(1);
+  position: absolute;
+  right: 0.75rem;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/src/lib/field.type.ts

@@ -0,0 +1,22 @@
+import type { BaseFieldProps } from "ra-core";
+import type { ReactNode } from "react";
+
+export interface FieldProps<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  RecordType extends Record<string, any> = Record<string, any>,
+> extends Omit<BaseFieldProps<RecordType>, "resource"> {
+  /**
+   * The component to display when the field value is empty. Defaults to empty string.
+   *
+   * @example
+   * const PostList = () => (
+   *     <List>
+   *         <DataTable>
+   *             <TextField source="title" />
+   *             <TextField source="author" empty="missing data" />
+   *         </DataTable>
+   *     </List>
+   * );
+   */
+  empty?: ReactNode;
+}

package/src/lib/genericMemo.ts

@@ -0,0 +1,18 @@
+import type { FunctionComponent } from "react";
+import { memo } from "react";
+
+/**
+ * A version of React.memo that preserves the original component type allowing it to accept generics.
+ * See {@link https://stackoverflow.com/a/70890101}
+ * @deprecated Use genericMemo from "ra-core" when available.
+ */
+export function genericMemo<T>(component: T): T {
+  const result = memo(component as FunctionComponent);
+
+  // We have to set the displayName on both the field implementation and the memoized version.
+  // On the implementation so that the memoized version can pick them up and users may reference the defaultProps in their components.
+  // On the memoized version so that components that inspect their children props may read them.
+  // @ts-expect-error: genericMemo does not have a displayName property
+  result.displayName = component.displayName?.replace("Impl", "");
+  return result as unknown as T;
+}

package/src/lib/i18nProvider.ts

@@ -0,0 +1,9 @@
+import defaultMessages from "ra-language-english";
+import polyglotI18nProvider from "ra-i18n-polyglot";
+
+export const i18nProvider = polyglotI18nProvider(
+  () => defaultMessages,
+  "en",
+  [{ name: "en", value: "English" }],
+  { allowMissing: true },
+);

package/src/lib/sanitizeInputRestProps.ts

@@ -0,0 +1,46 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+export const sanitizeInputRestProps = ({
+  afterSubmit,
+  allowNull,
+  alwaysOn,
+  beforeSubmit,
+  component,
+  data,
+  defaultValue,
+  error,
+  format,
+  formatOnBlur,
+  initializeForm,
+  input,
+  isEqual,
+  isRequired,
+  label,
+  limitChoicesToValue,
+  locale,
+  meta,
+  multiple,
+  name,
+  options,
+  optionText,
+  optionValue,
+  parse,
+  record,
+  ref,
+  refetch,
+  render,
+  resource,
+  setFilter,
+  setPagination,
+  setSort,
+  shouldUnregister,
+  source,
+  submitError,
+  subscription,
+  textAlign,
+  translate,
+  translateChoice,
+  validate,
+  validateFields,
+  value,
+  ...rest
+}: any) => rest;

package/src/lib/supabase-config.ts

@@ -0,0 +1,123 @@
+/**
+ * Supabase Configuration Management
+ *
+ * Handles storing and retrieving Supabase connection details
+ * Priority: localStorage > environment variables
+ */
+
+export interface SupabaseConfig {
+  url: string;
+  anonKey: string;
+  configuredAt?: string;
+}
+
+const STORAGE_KEY = 'realtimex_crm_supabase_config';
+
+/**
+ * Get the current Supabase configuration
+ * Priority: localStorage override > environment variables
+ */
+export function getSupabaseConfig(): SupabaseConfig | null {
+  // Try localStorage first (user-configured via UI)
+  const stored = localStorage.getItem(STORAGE_KEY);
+  if (stored) {
+    try {
+      return JSON.parse(stored);
+    } catch (e) {
+      console.error('Failed to parse stored Supabase config:', e);
+      localStorage.removeItem(STORAGE_KEY);
+    }
+  }
+
+  // Fallback to environment variables
+  const url = import.meta.env.VITE_SUPABASE_URL;
+  const anonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
+
+  if (url && anonKey) {
+    return { url, anonKey };
+  }
+
+  return null;
+}
+
+/**
+ * Save Supabase configuration to localStorage
+ */
+export function saveSupabaseConfig(config: Omit<SupabaseConfig, 'configuredAt'>): void {
+  const configWithTimestamp: SupabaseConfig = {
+    ...config,
+    configuredAt: new Date().toISOString(),
+  };
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(configWithTimestamp));
+}
+
+/**
+ * Clear stored Supabase configuration
+ */
+export function clearSupabaseConfig(): void {
+  localStorage.removeItem(STORAGE_KEY);
+}
+
+/**
+ * Check if Supabase is configured
+ */
+export function isSupabaseConfigured(): boolean {
+  return getSupabaseConfig() !== null;
+}
+
+/**
+ * Validate Supabase connection
+ */
+export async function validateSupabaseConnection(
+  url: string,
+  anonKey: string
+): Promise<{ valid: boolean; error?: string }> {
+  try {
+    // Basic URL validation
+    if (!url.startsWith('http://') && !url.startsWith('https://')) {
+      return { valid: false, error: 'Invalid URL format' };
+    }
+
+    // Basic anon key validation (JWT format)
+    if (!anonKey.startsWith('eyJ')) {
+      return { valid: false, error: 'Invalid anon key format' };
+    }
+
+    // Test connection by making a simple request
+    const response = await fetch(`${url}/rest/v1/`, {
+      method: 'GET',
+      headers: {
+        apikey: anonKey,
+        Authorization: `Bearer ${anonKey}`,
+      },
+    });
+
+    if (!response.ok) {
+      if (response.status === 401 || response.status === 403) {
+        return { valid: false, error: 'Invalid API key' };
+      }
+      return { valid: false, error: `Connection failed: ${response.statusText}` };
+    }
+
+    return { valid: true };
+  } catch (error) {
+    return {
+      valid: false,
+      error: error instanceof Error ? error.message : 'Connection failed',
+    };
+  }
+}
+
+/**
+ * Get Supabase config source (for display purposes)
+ */
+export function getConfigSource(): 'ui' | 'env' | 'none' {
+  const stored = localStorage.getItem(STORAGE_KEY);
+  if (stored) return 'ui';
+
+  const url = import.meta.env.VITE_SUPABASE_URL;
+  const anonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
+  if (url && anonKey) return 'env';
+
+  return 'none';
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.tsx";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import "@testing-library/jest-dom";

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />