@soyio/soyio-widget 2.18.0 → 2.20.0

package/README.md

@@ -24,6 +24,7 @@
 - [Auth Request](#auth-request)
 - [Appearance](#appearance)
 - [TypeScript](#typescript)
+- [JSON Schema Validation](#json-schema-validation)
 - [Server Side Rendering (SSR)](#server-side-rendering-ssr)
 
 
@@ -181,6 +182,12 @@ The `PrivacyCenterBox` lets you embed the Privacy Center inside your page. You c
       maxFileSize: 5 * 1024 * 1024, // 5MB
     },
 
+    // Redec operation options (optional unless "redec" is in enabledRights)
+    redecOperationIds: [
+      { id: "op_update", label: "Update" },
+      { id: "op_rectification", label: "Rectification" },
+    ],
+
     // Common options
     onEvent: (event) => console.log(event),
     onReady: () => console.log("PrivacyCenterBox is ready"), // Optional
@@ -207,6 +214,7 @@ The `PrivacyCenterBox` lets you embed the Privacy Center inside your page. You c
 - `fileRequisites`: Optional object to configure file upload constraints.
   - `allowedExtensions`: Array of allowed file extensions (e.g. `['pdf', 'jpg']`). Default: `['pdf', 'png', 'jpeg', 'jpg']`.
   - `maxFileSize`: Maximum file size in bytes. Default: `5 * 1024 * 1024` (5MB).
+- `redecOperationIds`: Optional array of `{ id, label }` values for the Redec operation select. Required if `redec` right is included in `enabledRights` param.
 - `isSandbox`: Whether to use the sandbox environment. Defaults to `false`.
 - `appearance`: Customize the iframe appearance. See Appearance section below.
 - `onEvent`: Callback that receives events from the iframe.
@@ -523,6 +531,7 @@ interface Config {
   };
   iconRules?: Record<string, { weight?: IconWeight; size?: number }>;
   mainPageColumns?: 1 | 2 | 3 | 4;
+  brandTheme?: 'default' | 'dark' | 'light';
 }
 ```
 
@@ -534,6 +543,7 @@ interface Config {
 | `icon.size` | Global default icon size in pixels | `24` |
 | `iconRules` | Per-component icon style overrides | `{}` |
 | `mainPageColumns` | Number of columns in the main page feature cards grid (1-4) | `2` |
+| `brandTheme` | Theme variant for branded elements like the footer (`default`, `dark`, `light`) | `"default"` |
 
 #### Icons
 
@@ -828,6 +838,15 @@ The step indicator shows progress through multi-step forms.
 - `.Chip--red` - Red chip variant.
 - `.Chip--amber` - Amber chip variant.
 
+##### Consent Components
+
+The following rules are specific to the **Consent Box** widget and allow customization of consent-related UI elements:
+
+- `.CategoryTag` - Data use category identifier (e.g., "Compartir datos con terceros"). Appears above category descriptions in expanded consent views.
+- `.Badge` - Optional/required label badge appearing on consent items.
+
+> **Note:** These consent-specific rules are only available in the `ConsentBox` widget and will have no effect in other widgets like `PrivacyCenterBox`.
+
 ### Example Configuration
 
 ```javascript
@@ -909,6 +928,79 @@ To use the `SoyioTypes` in your project, import it directly from the `@soyio/soy
 import type { SoyioTypes } from "@soyio/soyio-widget";
 ```
 
+## JSON Schema Validation
+
+The package includes JSON Schemas for validating configuration objects. This is useful for:
+- **IDE Autocomplete**: Get IntelliSense in your editor when writing configurations
+- **Runtime Validation**: Validate user-provided configurations before passing to the widget
+- **Documentation**: Use schemas to generate API documentation
+
+### Available Schemas
+
+#### Appearance Schema
+Validates appearance customization objects (theme, variables, rules, config):
+
+```javascript
+// Import the schema
+import appearanceSchema from "@soyio/soyio-widget/schemas/appearance";
+
+// Use with a validator like Ajv
+import Ajv from "ajv";
+const ajv = new Ajv();
+const validate = ajv.compile(appearanceSchema);
+
+const appearance = {
+  theme: "night",
+  variables: {
+    colorPrimary: "#007bff",
+    borderRadius: "8px"
+  }
+};
+
+if (validate(appearance)) {
+  console.log("✅ Valid appearance config");
+} else {
+  console.error("❌ Invalid:", validate.errors);
+}
+```
+
+#### Config Schema
+Validates complete widget configuration including Privacy Center and Consent Box options:
+
+```javascript
+import configSchema from "@soyio/soyio-widget/schemas/config";
+
+const validate = ajv.compile(configSchema);
+const config = {
+  companyId: "com_example",
+  appearance: { /* ... */ },
+  onEvent: (event) => console.log(event)
+};
+
+if (validate(config)) {
+  const privacyCenter = new PrivacyCenterBox(config);
+  privacyCenter.mount("#container");
+}
+```
+
+### Using Schemas with Monaco Editor
+
+Perfect for building configuration editors:
+
+```javascript
+import * as monaco from "monaco-editor";
+import configSchema from "@soyio/soyio-widget/schemas/config";
+
+monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+  validate: true,
+  schemas: [{
+    uri: "https://soyio.id/widget-config.json",
+    fileMatch: ["*"],
+    schema: configSchema
+  }]
+});
+```
+
 ## Server Side Rendering (SSR)
 
 This package is not directly compatible with SSR because of `post-robot`, but there are workarounds that allow you to use it without disrupting the build process. Below are examples on popular SSR frameworks.
@@ -1040,6 +1132,20 @@ VITE_CONSENT_URL=http://localhost:5173
 VITE_CONSENT_TEMPLATE_ID=constpl_test
 ```
 
+To test DSR rights in the Privacy Center tab, add these parameters to the JSON config in the editor:
+
+```json
+{
+  "enabledRights": ["arsop", "redec"],
+  "redecOperationIds": [
+    { "id": "op_update", "label": "Update" },
+    { "id": "op_rectification", "label": "Rectification" }
+  ]
+}
+```
+
+`redecOperationIds` is required when `redec` is included in `enabledRights`.
+
 ### Presets Management
 
 The smoke test includes preset management functionality that allows you to save, load, and share widget configurations:

package/dist/index.d.ts

@@ -1,3 +1,8 @@
+import { default as appearanceSchema } from './schemas/appearance.schema.json';
+import { default as configSchema } from './schemas/config.schema.json';
+
+export { appearanceSchema }
+
 declare type AuthRequestConfig = {
     request: 'authentication_request';
     configProps: AuthRequestProps;
@@ -21,12 +26,14 @@ declare type BaseConfig = {
 
 declare abstract class BaseIframeBox<T extends BaseConfig> {
     protected iframe: HTMLIFrameElement | null;
+    protected wrapper: HTMLDivElement | null;
     protected skeleton: ISkeletonView | null;
     protected readonly options: T;
-    protected readonly appearance: SoyioAppearance | null;
+    protected appearance: SoyioAppearance | null;
     protected readonly tooltipManager: _TooltipManager;
     readonly defaultIframeCSSConfig: IframeCSSConfig;
     protected Skeleton: SkeletonConstructor | null;
+    private isIframeReady;
     private readonly defaultUniqueId;
     abstract readonly defaultIframePrefix: string;
     constructor(options: T);
@@ -40,10 +47,17 @@ declare abstract class BaseIframeBox<T extends BaseConfig> {
     protected setupListeners(): Promise<void>;
     mount(selector: string): Promise<this>;
     unmount(): void;
+    /**
+     * Update the appearance of the widget without remounting.
+     * This sends the new appearance config to the already-mounted iframe.
+     */
+    updateAppearance(appearance: SoyioAppearance): Promise<void>;
 }
 
 declare const CLOSED_EVENT = "WIDGET_CLOSED";
 
+export { configSchema }
+
 export declare class ConsentBox extends BaseIframeBox<ConsentConfig> {
     readonly defaultIframePrefix = "consent-box";
     readonly defaultIframeCSSConfig: IframeCSSConfig;
@@ -236,6 +250,7 @@ export declare class PrivacyCenterBox extends BaseIframeBox<PrivacyCenterConfig>
     protected readonly _uniqueIdentifier = "privacy-center";
     readonly defaultIframeCSSConfig: IframeCSSConfig;
     get uniqueIdentifier(): string;
+    protected handleIframeReady(): Promise<void>;
     iframeUrl(): string;
 }
 
@@ -244,10 +259,12 @@ declare type PrivacyCenterConfig = BaseConfig & {
     enabledRights?: PrivacyCenterRight[];
     dataSubjects?: DataSubject[];
     requestReference?: string;
+    demo?: boolean;
     fileRequisites?: {
         allowedExtensions?: string[];
         maxFileSize?: number;
     };
+    redecOperationIds?: RedecOperationId[];
 } & ({
     companyId: `com_${string}`;
     sessionToken?: never;
@@ -260,6 +277,11 @@ declare type PrivacyCenterRight = 'arsop' | 'redec';
 
 declare type PrivacyManagerFeature = 'DataSubjectRequest' | 'ConsentManagement' | 'RequestTracking';
 
+declare type RedecOperationId = {
+    id: string;
+    label: string;
+};
+
 declare type Request_2 = 'disclosure' | 'signature' | 'authentication';
 
 declare type RequestConfig = DisclosureRequestConfig | SignatureRequestConfig | AuthRequestConfig;
@@ -277,7 +299,7 @@ declare type SignatureRequestConfig = {
     developmentUrl?: string;
 };
 
-declare type SkeletonConstructor = new (id: string) => ISkeletonView;
+declare type SkeletonConstructor = new (id: string, theme?: SoyioTheme) => ISkeletonView;
 
 declare interface SoyioAppearance {
     theme?: SoyioTheme;
@@ -318,6 +340,14 @@ declare interface SoyioAppearanceConfig {
      * @default 2
      */
     mainPageColumns?: 1 | 2 | 3 | 4;
+    /**
+     * Theme variant for branded elements like the footer.
+     * - 'default': Standard Soyio brand colors (purple/indigo)
+     * - 'dark': Dark mode with gray tones
+     * - 'light': Mono color light version
+     * @default 'default'
+     */
+    brandTheme?: 'default' | 'dark' | 'light';
 }
 
 declare interface SoyioAppearanceVariables {
@@ -356,6 +386,7 @@ declare interface SoyioAppearanceVariables {
     colorDanger?: string;
     colorDangerBg?: string;
     colorOverlay?: string;
+    dataUseIconColor?: string;
 }
 
 declare type SoyioBaseRule = '.MainContainer' | '.Button' | '.Checkbox' | '.CheckboxInput' | '.CheckboxLabel' | '.Input' | '.Label' | '.HintIcon' | '.Title' | '.StepTitle' | '.Link' | '.Card' | '.CardTitle' | '.Select' | '.Loader' | '.TextArea' | '.ErrorMessage' | '.Description' | '.Switch' | '.SwitchRoot' | '.SwitchThumb' | '.SwitchIcon' | '.Alert' | '.AlertIcon' | '.AlertContent' | '.Radio' | '.RadioButton' | '.RadioIndicator' | '.RadioLabel' | '.Chip' | '.Dialog' | '.DialogOverlay' | '.DialogContent' | '.DialogTitle' | '.DialogDescription' | '.Combobox' | '.NinInput' | '.TrackingCodeInput' | '.TrackingCodeInputCell' | '.TrackingCodeInputSeparator' | '.RadioCard' | '.RadioCardButton' | '.RadioCardIndicator' | '.RadioCardTitle' | '.StepIndicatorContainer' | '.StepIndicator' | '.StepIndicatorLine' | '.StepIndicatorIcon' | '.StepIndicatorDot' | '.StepIndicatorNumber' | '.TooltipContent';
@@ -379,6 +410,11 @@ declare interface SoyioIconConfig {
      * @default 24
      */
     size?: number;
+    /**
+     * Override variant for data use icons in consent management.
+     * If not set, uses the company's configured iconVariant.
+     */
+    dataUseVariant?: 'duotone' | 'outline' | 'solid';
 }
 
 declare type SoyioPseudoClass = ':hover' | ':focus' | ':active' | ':disabled' | ':autofill' | ':focus-visible';