feat: use single unique id generator

abelflopes · abelflopes · commit a3ddb7385501 · 2025-08-20T17:56:16.000+01:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components/base/package.json b/packages/components/base/package.json
@@ -38,6 +38,7 @@
     "@react-ck/icon": "^4.3.2",
     "@react-ck/keyboard-controls": "^1.1.0",
     "@react-ck/layers": "^1.4.15",
+    "@react-ck/manager": "^1.3.26",
     "@react-ck/react-utils": "^2.0.4",
     "@react-ck/scss-utils": "^1.1.13",
     "@react-ck/snackbar-provider": "^1.0.7",
diff --git a/packages/components/base/src/dropdown/specs/index.unit.test.tsx b/packages/components/base/src/dropdown/specs/index.unit.test.tsx
@@ -2,7 +2,7 @@ import React, { act } from "react";
 import { Dropdown } from "../Dropdown";
 import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
-// eslint-disable-next-line workspaces/no-relative-imports, workspaces/require-dependency -- this is a test
+// eslint-disable-next-line workspaces/no-relative-imports -- this is a test
 import { Manager } from "../../../../../providers/manager/src";
 
 describe("unit Dropdown", () => {
diff --git a/packages/components/base/src/form-field/FormField.tsx b/packages/components/base/src/form-field/FormField.tsx
@@ -3,6 +3,7 @@ import styles from "./styles/index.module.scss";
 import classNames from "classnames";
 import { Text } from "../text";
 import { FormFieldContext, type FormFieldContextProps } from "./context";
+import { useManagerContext } from "@react-ck/manager";
 
 /**
  * Props interface for the FormField component.
@@ -79,9 +80,9 @@ export const FormField = ({
   reserveSpace,
   ...otherProps
 }: Readonly<FormFieldProps>): React.ReactElement => {
-  const generatedId = useMemo(() => `ff-${Math.random()}-${Date.now()}`, []);
+  const { generateUniqueId } = useManagerContext();
 
-  const computedId = useMemo(() => id ?? generatedId, [id, generatedId]);
+  const computedId = useMemo(() => id ?? generateUniqueId(), [id, generateUniqueId]);
 
   const context = useMemo<FormFieldContextProps>(
     () => ({
diff --git a/packages/components/base/src/form-field/specs/__snapshots__/index.snapshot.test.tsx.snap b/packages/components/base/src/form-field/specs/__snapshots__/index.snapshot.test.tsx.snap
@@ -3,15 +3,19 @@
 exports[`snapshot FormField renders correctly 1`] = `
 <DocumentFragment>
   <div
-    class="root skin_default variation_default"
+    style="--react-ck-color-highlight-primary-light: hsl(185deg 50% 95%); --react-ck-color-highlight-primary: hsl(185deg 50% 55%); --react-ck-color-highlight-primary-dark: hsl(185deg 50% 35%); --react-ck-color-highlight-alt: #0052cc; --react-ck-color-highlight-alt-dark: #003e99; --react-ck-color-neutral-light-100: #fff; --react-ck-color-neutral-light-200: hsl(230deg 40% 76% / 10%); --react-ck-color-neutral-light-300: hsl(230deg 40% 76% / 20%); --react-ck-color-neutral-light-400: hsl(230deg 30% 46% / 20%); --react-ck-color-neutral-light-500: hsl(230deg 10% 2% / 25%); --react-ck-color-neutral-light-600: hsl(230deg 5% 1% / 35%); --react-ck-color-neutral-light-200-solid: #F9FAFB; --react-ck-color-neutral-light-300-solid: hsl(230deg 40% 95%); --react-ck-color-neutral-light-400-solid: hsl(230deg 30% 90%); --react-ck-color-neutral-light-500-solid: hsl(230deg 10% 80%); --react-ck-color-neutral-light-600-solid: hsl(230deg 5% 70%); --react-ck-color-neutral-dark-100: hsl(230deg 5% 60%); --react-ck-color-neutral-dark-200: hsl(230deg 5% 50%); --react-ck-color-neutral-dark-300: hsl(230deg 5% 40%); --react-ck-color-neutral-dark-400: hsl(230deg 15% 25%); --react-ck-color-neutral-dark-500: hsl(230deg 25% 15%); --react-ck-color-status-positive-light: #E1FCF0; --react-ck-color-status-positive: #00D891; --react-ck-color-status-positive-dark: #276749; --react-ck-color-status-average-light: #FFEDD5; --react-ck-color-status-average: #F59E0B; --react-ck-color-status-average-dark: #9b5c2c; --react-ck-color-status-negative-light: #FFF0F0; --react-ck-color-status-negative: #EF4444; --react-ck-color-status-negative-dark: #b71010; --react-ck-color-status-info-light: #BFDBFE; --react-ck-color-status-info: #3B82F6; --react-ck-color-status-info-dark: #0950c3; --react-ck-color-overlay-light: rgba(255,255,255, .4); --react-ck-color-overlay-dark: rgba(0,0,0,.2); --react-ck-color-focus: #2684FFB2; --react-ck-color-misc-1: #F28B82; --react-ck-color-misc-2: #FF8EA2; --react-ck-color-misc-3: #7EC9FF; --react-ck-color-misc-4: #BABAFD; --react-ck-color-misc-5: #90d585; --react-ck-font-family: system-ui, sans-serif; --react-ck-font-base-size: 14px; --react-ck-spacing-base: 8px; --react-ck-spacing-border: 1px;"
   >
     <div
-      class="main_content"
+      class="root skin_default variation_default"
     >
       <div
-        class="input_wrapper"
+        class="main_content"
       >
-        FormField
+        <div
+          class="input_wrapper"
+        >
+          FormField
+        </div>
       </div>
     </div>
   </div>
diff --git a/packages/components/base/src/form-field/specs/index.snapshot.test.tsx b/packages/components/base/src/form-field/specs/index.snapshot.test.tsx
@@ -1,10 +1,15 @@
 import React from "react";
 import { FormField } from "../index";
 import { render } from "@testing-library/react";
+import { Manager } from "@react-ck/manager";
 
 describe("snapshot FormField", () => {
   it("renders correctly", () => {
-    const tree = render(<FormField>FormField</FormField>).asFragment();
+    const tree = render(
+      <Manager>
+        <FormField>FormField</FormField>
+      </Manager>,
+    ).asFragment();
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/packages/components/base/src/form-field/specs/index.unit.test.tsx b/packages/components/base/src/form-field/specs/index.unit.test.tsx
@@ -2,11 +2,16 @@ import React from "react";
 import { FormField } from "../index";
 import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
+import { Manager } from "@react-ck/manager";
 
 describe("unit FormField", () => {
   it("renders correctly", async () => {
     const content = "FormField";
-    render(<FormField>{content}</FormField>);
+    render(
+      <Manager>
+        <FormField>{content}</FormField>
+      </Manager>,
+    );
     const find = await screen.findByText(content);
     expect(find).toBeInTheDocument();
   });
diff --git a/packages/components/base/src/select/specs/index.unit.test.tsx b/packages/components/base/src/select/specs/index.unit.test.tsx
@@ -3,7 +3,7 @@ import { Select } from "../index";
 import { render, screen, fireEvent } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import { mockResizeObserver } from "./mocks";
-// eslint-disable-next-line workspaces/require-dependency -- testing purposes only
+
 import { Manager } from "@react-ck/manager/src";
 
 /**
diff --git a/packages/components/base/src/skeleton/SkeletonTable.tsx b/packages/components/base/src/skeleton/SkeletonTable.tsx
@@ -1,8 +1,9 @@
-import React from "react";
+import React, { useMemo } from "react";
 import classNames from "classnames";
 import { Skeleton } from "./Skeleton";
 import { Table, type TableProps } from "../table";
 import { Card } from "../card";
+import { useManagerContext } from "@react-ck/manager";
 
 /**
  * Props for configuring the SkeletonTable component
@@ -23,20 +24,31 @@ export const SkeletonTable = ({
   columns = 4,
   className,
   ...otherProps
-}: Readonly<SkeletonTableProps>): React.ReactElement => (
-  <Card>
-    <Table className={classNames(className)} {...otherProps}>
+}: Readonly<SkeletonTableProps>): React.ReactElement => {
+  const { generateUniqueId } = useManagerContext();
+
+  const content = useMemo(
+    () => (
       <Table.TBody>
         {Array.from({ length: rows }).map(() => (
-          <Table.Tr key={`skeleton-row-${crypto.randomUUID()}`}>
+          <Table.Tr key={`skeleton-row-${generateUniqueId()}`}>
             {Array.from({ length: columns }).map(() => (
-              <Table.Td key={`skeleton-cell-${crypto.randomUUID()}`}>
+              <Table.Td key={`skeleton-cell-${generateUniqueId()}`}>
                 <Skeleton variation="text" />
               </Table.Td>
             ))}
           </Table.Tr>
         ))}
       </Table.TBody>
-    </Table>
-  </Card>
-);
+    ),
+    [columns, generateUniqueId, rows],
+  );
+
+  return (
+    <Card>
+      <Table className={classNames(className)} {...otherProps}>
+        {content}
+      </Table>
+    </Card>
+  );
+};
diff --git a/packages/components/base/src/snackbar/Snackbar.tsx b/packages/components/base/src/snackbar/Snackbar.tsx
@@ -1,5 +1,4 @@
 import React, { useCallback, useMemo, useRef, useState } from "react";
-import { generateId } from "./utils";
 import { Layer } from "@react-ck/layers";
 import { SnackbarItem } from "./SnackbarItem";
 import styles from "./styles/index.module.scss";
@@ -11,6 +10,7 @@ import {
   type Item,
   type AddOptions,
 } from "@react-ck/snackbar-provider";
+import { useManagerContext } from "@react-ck/manager";
 
 const durationMap = new Map<NonNullable<AddOptions["duration"]>, number>([
   ["short", 3000],
@@ -38,9 +38,11 @@ export const Snackbar = ({
 }: Readonly<SnackbarProps>): React.ReactElement => {
   const timeoutMap = useRef<Record<string, ReturnType<typeof setTimeout>>>({});
 
+  const { generateUniqueId } = useManagerContext();
+
   const [items, setItems] = useState<Item[]>(
     initialItems?.map((elementCreator) => {
-      const id = generateId();
+      const id = generateUniqueId();
       const element = elementCreator(id);
 
       return {
@@ -64,7 +66,7 @@ export const Snackbar = ({
 
   const add = useCallback<SnackbarContextProps["add"]>(
     (elementCreator, options) => {
-      const id = generateId();
+      const id = generateUniqueId();
       const element = elementCreator(id);
 
       setItems((v) => [
@@ -84,7 +86,7 @@ export const Snackbar = ({
 
       return id;
     },
-    [remove],
+    [remove, generateUniqueId],
   );
 
   const contextValue = useMemo(
diff --git a/packages/components/base/src/snackbar/specs/index.unit.test.tsx b/packages/components/base/src/snackbar/specs/index.unit.test.tsx
@@ -3,7 +3,7 @@ import { render, screen, waitFor, act } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import { Snackbar } from "../index";
 import { useSnackbar } from "@react-ck/snackbar-provider";
-// eslint-disable-next-line workspaces/require-dependency -- testing purposes only
+
 import { Manager } from "@react-ck/manager/src";
 
 // Test component that uses the snackbar context
diff --git a/packages/components/base/src/snackbar/specs/utils.unit.test.ts b/packages/components/base/src/snackbar/specs/utils.unit.test.ts
diff --git a/packages/components/base/src/snackbar/utils.ts b/packages/components/base/src/snackbar/utils.ts
diff --git a/packages/components/base/src/virtualized-list/index.tsx b/packages/components/base/src/virtualized-list/index.tsx
@@ -1,16 +1,17 @@
 import React, { useMemo, useRef } from "react";
 import { VirtualizedListItem, type VirtualizedListItemProps } from "./VirtualizedListItem";
+import { useManagerContext } from "@react-ck/manager";
 
 const DefaultWrapper: React.FC<React.PropsWithChildren> = ({ children }) => children;
 
 const keyMap = new Map<React.ReactNode, string>();
 
-function generateStableKey(item: React.ReactNode): string {
+function generateStableKey(item: React.ReactNode, generateUniqueId: () => string): string {
   const currentKey = keyMap.get(item);
 
   if (currentKey) return currentKey;
 
-  const key = Math.random().toString(36).slice(2, 15);
+  const key = generateUniqueId();
   keyMap.set(item, key);
   return key;
 }
@@ -41,15 +42,17 @@ export const VirtualizedList: React.FC<Readonly<VirtualizedListProps>> = ({
   Wrapper = DefaultWrapper,
   ...props
 }) => {
+  const { generateUniqueId } = useManagerContext();
+
   const observerRootRef = useRef<HTMLDivElement>(null);
 
   const itemsWithKey = useMemo(
     () =>
       items.map((item) => ({
         item,
-        key: generateStableKey(item),
+        key: generateStableKey(item, generateUniqueId),
       })),
-    [items],
+    [items, generateUniqueId],
   );
 
   return (
diff --git a/packages/providers/manager/src/Manager.tsx b/packages/providers/manager/src/Manager.tsx
@@ -1,6 +1,7 @@
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import { ThemeProvider, type ThemeProviderProps } from "@react-ck/theme";
 import { LayersProvider, type LayersProviderProps } from "@react-ck/layers";
+import { ManagerContext, ManagerContextProps } from "./context";
 
 /** Props for the Manager component  */
 export interface ManagerProps {
@@ -11,10 +12,15 @@ export interface ManagerProps {
   usePortal?: LayersProviderProps["usePortal"];
   /** CSS class to apply in layer elements, use for for applying scoped generic styles such as font-family */
   className?: LayersProviderProps["className"];
+  /** Unique id generator function */
+  generateUniqueId?: ManagerContextProps["generateUniqueId"];
   /** Content slot */
   children: React.ReactNode;
 }
 
+const defaultgenerateUniqueId = (): string =>
+  `rck-${Math.random().toString(36).slice(2, 15)}-${Date.now().toString(36)}`;
+
 /**
  * Manager component for handling themes and layers.
  * @param props - {@link ManagerProps}
@@ -25,16 +31,24 @@ export const Manager = ({
   children,
   usePortal = true,
   className,
+  generateUniqueId = defaultgenerateUniqueId,
 }: Readonly<ManagerProps>): React.ReactElement => {
   const [layerRootElement, setLayerRootElement] = useState<HTMLElement>(
     theme?.target ?? document.body,
   );
 
+  const contextValue = useMemo<ManagerContextProps>(
+    () => ({ generateUniqueId }),
+    [generateUniqueId],
+  );
+
   return (
     <ThemeProvider {...theme} className={className} onThemeRootChange={setLayerRootElement}>
-      <LayersProvider usePortal={usePortal} className={className} rootElement={layerRootElement}>
-        {children}
-      </LayersProvider>
+      <ManagerContext.Provider value={contextValue}>
+        <LayersProvider usePortal={usePortal} className={className} rootElement={layerRootElement}>
+          {children}
+        </LayersProvider>
+      </ManagerContext.Provider>
     </ThemeProvider>
   );
 };
diff --git a/packages/providers/manager/src/context.ts b/packages/providers/manager/src/context.ts
@@ -0,0 +1,12 @@
+import React, { useContext } from "react";
+
+export interface ManagerContextProps {
+  generateUniqueId: () => string;
+}
+export const ManagerContext = React.createContext<ManagerContextProps>({
+  generateUniqueId: () => {
+    throw new Error("ManagerContext is not set");
+  },
+});
+
+export const useManagerContext = (): ManagerContextProps => useContext(ManagerContext);
diff --git a/packages/providers/manager/src/index.ts b/packages/providers/manager/src/index.ts
@@ -0,0 +1,2 @@
+export * from "./context";
+export * from "./Manager";
