@redacto.io/consent-sdk-react 0.0.1

package/src/RedactoNoticeConsent/useMediaQuery.ts

@@ -0,0 +1,36 @@
+import { useState, useEffect } from "react";
+
+export const useMediaQuery = (query: string): boolean => {
+  const getMatches = () =>
+    typeof window !== "undefined" ? window.matchMedia(query).matches : false;
+  const [matches, setMatches] = useState<boolean>(getMatches);
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const media = window.matchMedia(query);
+
+    // Create event listener
+    const listener = (e: MediaQueryListEvent) => {
+      setMatches(e.matches);
+    };
+
+    // Add listener (fallback for legacy browsers)
+    if (media.addEventListener) {
+      media.addEventListener("change", listener);
+    } else {
+      // @ts-ignore – deprecated fallback
+      media.addListener(listener);
+    }
+
+    // Clean up
+    return () => {
+      if (media.removeEventListener) {
+        media.removeEventListener("change", listener);
+      } else {
+        media.removeListener(listener);
+      }
+    };
+  }, [query]);
+
+  return matches;
+};

package/src/index.ts

@@ -0,0 +1 @@
+export { default as RedactoNoticeConsent } from "./RedactoNoticeConsent";

package/src/types/css.d.ts

@@ -0,0 +1,4 @@
+declare module "*.module.css" {
+  const classes: { [key: string]: string };
+  export default classes;
+}

package/src/types/images.d.ts

@@ -0,0 +1,19 @@
+declare module "*.png" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.jpg" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.jpeg" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.svg" {
+  const content: string;
+  export default content;
+}

package/tests/mocks.ts

@@ -0,0 +1,114 @@
+import type { ConsentContent } from "../src/RedactoNoticeConsent/api/types";
+import { vi } from "vitest";
+
+export const mockConsentContent: ConsentContent = {
+  code: 200,
+  status: "success",
+  detail: {
+    uuid: "notice-123",
+    name: "Privacy Notice",
+    organisation_uuid: "org-123",
+    workspace_uuid: "workspace-123",
+    collection_point_uuids: [],
+    collection_points: [],
+    active_config: {
+      uuid: "config-123",
+      notice_uuid: "notice-123",
+      organisation_uuid: "org-123",
+      workspace_uuid: "workspace-123",
+      version: 1,
+      status: "active",
+      notice_text: "We care about your privacy.",
+      additional_text: "",
+      confirm_button_text: "Accept",
+      decline_button_text: "Decline",
+      logo_url: "https://example.com/logo.png",
+      privacy_policy_url: "https://example.com/privacy",
+      sub_processors_url: "https://example.com/vendors",
+      primary_color: "#4f87ff",
+      secondary_color: "#ffffff",
+      font_preference: "Arial",
+      privacy_policy_prefix_text: "",
+      vendor_list_prefix_text: "",
+      privacy_policy_anchor_text: "Privacy Policy",
+      vendors_list_anchor_text: "Vendors List",
+      purpose_section_heading: "Manage Consent",
+      created_at: "2023-01-01T00:00:00Z",
+      updated_at: "2023-01-01T00:00:00Z",
+      deployed_at: "2023-01-01T00:00:00Z",
+      supported_languages_and_translations: {
+        es: {
+          notice_text: "Nos importa tu privacidad.",
+          additional_text: "",
+          privacy_policy_prefix_text: "",
+          vendor_list_prefix_text: "",
+          privacy_policy_anchor_text: "Política de Privacidad",
+          vendors_list_anchor_text: "Lista de Proveedores",
+          confirm_button_text: "Aceptar",
+          decline_button_text: "Rechazar",
+          purpose_section_heading: "Gestionar Consentimiento",
+          purposes: {
+            "purpose-1": "Marketing",
+            "purpose-1-description": "Usamos datos para marketing.",
+          },
+          data_elements: {
+            "element-1": "Email",
+            "element-2": "Phone",
+          },
+        },
+      },
+      purposes: [
+        {
+          uuid: "purpose-1",
+          name: "Marketing",
+          description: "We use data for marketing purposes.",
+          industries: "Marketing",
+          data_elements: [
+            {
+              uuid: "element-1",
+              name: "Email",
+              required: false,
+              description: null,
+              industries: null,
+              enabled: true,
+            },
+            {
+              uuid: "element-2",
+              name: "Phone",
+              required: true,
+              description: null,
+              industries: null,
+              enabled: true,
+            },
+          ],
+        },
+      ],
+      default_language: "en",
+    },
+    created_at: "2023-01-01T00:00:00Z",
+    updated_at: "2023-01-01T00:00:00Z",
+  },
+} as const;
+
+export const defaultProps = {
+  noticeId: "notice-123",
+  accessToken: "mock-token",
+  refreshToken: "mock-refresh-token",
+  language: "en",
+  blockUI: false,
+  onAccept: vi.fn(),
+  onDecline: vi.fn(),
+  onError: vi.fn(),
+  settings: {
+    borderRadius: "8px",
+    backgroundColor: "#ffffff",
+    headingColor: "#101828",
+    textColor: "#344054",
+    button: {
+      accept: { backgroundColor: "#4f87ff", textColor: "#ffffff" },
+      decline: { backgroundColor: "#ffffff", textColor: "#000000" },
+      language: { backgroundColor: "#ffffff", textColor: "#344054" },
+    },
+    link: { color: "#4f87ff" },
+  },
+} as const;

package/tests/setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2019",
+    "module": "ESNext",
+    "declaration": true,
+    "strict": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "plugins": [
+      {
+        "name": "typescript-plugin-css-modules"
+      }
+    ]
+  },
+  "include": ["src"]
+}

package/tsup.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: {
+    index: "src/index.ts",
+  },
+  format: ["esm", "cjs"],
+  dts: true,
+  external: ["react", "react-dom", "jwt-decode"],
+  clean: true,
+  loader: {
+    ".png": "dataurl",
+    ".jpg": "dataurl",
+    ".svg": "dataurl",
+  },
+});

package/vitest.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    environment: "jsdom",
+    globals: true,
+    setupFiles: ["./tests/setup.ts"],
+    coverage: {
+      provider: "v8",
+      reporter: ["text", "html"],
+      reportsDirectory: "./coverage",
+      clean: false, // Prevent cleaning coverage folder before tests
+      cleanOnRerun: false, // Prevent cleaning coverage folder after tests
+    },
+  },
+});