@c15t/react 0.0.1-rc.10

package/dist/components/consent-manager-dialog/__tests__/styles.spec.cjs

@@ -0,0 +1,223 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = function(module) {
+        var getter = module && module.__esModule ? function() {
+            return module['default'];
+        } : function() {
+            return module;
+        };
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __webpack_require__.d = function(exports1, definition) {
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = function(obj, prop) {
+        return Object.prototype.hasOwnProperty.call(obj, prop);
+    };
+})();
+var __webpack_exports__ = {};
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_vitest_namespaceObject = require("vitest");
+const external_consent_manager_dialog_cjs_namespaceObject = require("../consent-manager-dialog.cjs");
+const external_utils_cjs_namespaceObject = require("./utils.cjs");
+var external_utils_cjs_default = /*#__PURE__*/ __webpack_require__.n(external_utils_cjs_namespaceObject);
+const ALL_COMPONENTS = [
+    {
+        testId: 'consent-manager-dialog-root',
+        themeKey: 'dialog.root',
+        styles: 'custom-dialog-root'
+    },
+    {
+        testId: 'consent-manager-dialog-overlay',
+        themeKey: 'dialog.overlay',
+        styles: 'custom-dialog-overlay'
+    },
+    {
+        testId: 'consent-manager-dialog-header',
+        themeKey: 'dialog.header',
+        styles: 'custom-dialog-header'
+    },
+    {
+        testId: 'consent-manager-dialog-title',
+        themeKey: 'dialog.title',
+        styles: 'custom-dialog-title'
+    },
+    {
+        testId: "consent-manager-dialog-description",
+        themeKey: "dialog.description",
+        styles: "custom-dialog-description"
+    },
+    {
+        testId: 'consent-manager-dialog-content',
+        themeKey: 'dialog.content',
+        styles: 'custom-dialog-content'
+    },
+    {
+        testId: 'consent-manager-dialog-footer',
+        themeKey: 'dialog.footer',
+        styles: 'custom-dialog-footer'
+    }
+];
+(0, external_vitest_namespaceObject.test)('Theme prop applies string classnames to all components', async ()=>{
+    const test = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_consent_manager_dialog_cjs_namespaceObject.ConsentManagerDialog, {
+        open: true,
+        scrollLock: true,
+        theme: ALL_COMPONENTS.reduce((acc, { themeKey, styles })=>{
+            acc[themeKey] = styles;
+            return acc;
+        }, {})
+    });
+    await external_utils_cjs_default()({
+        component: test,
+        testCases: ALL_COMPONENTS.map(({ testId, styles })=>({
+                testId,
+                styles
+            }))
+    });
+});
+(0, external_vitest_namespaceObject.test)('Theme prop supports object format with className and style for all components', async ()=>{
+    const style = {
+        backgroundColor: '#ffffff',
+        padding: '20px',
+        border: '1px solid #000000'
+    };
+    const testCases = ALL_COMPONENTS.map(({ testId, themeKey, styles })=>({
+            testId,
+            themeKey,
+            className: styles,
+            style
+        }));
+    const test = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_consent_manager_dialog_cjs_namespaceObject.ConsentManagerDialog, {
+        open: true,
+        scrollLock: true,
+        theme: testCases.reduce((acc, { themeKey, className, style })=>{
+            acc[themeKey] = {
+                className,
+                style
+            };
+            return acc;
+        }, {})
+    });
+    await external_utils_cjs_default()({
+        component: test,
+        testCases: testCases.map(({ testId, className, style })=>({
+                testId,
+                styles: {
+                    className,
+                    style
+                }
+            }))
+    });
+});
+(0, external_vitest_namespaceObject.test)('No style prop removes default styles but keeps custom classNames', async ()=>{
+    const test = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_consent_manager_dialog_cjs_namespaceObject.ConsentManagerDialog, {
+        scrollLock: true,
+        noStyle: true,
+        open: true,
+        theme: ALL_COMPONENTS.reduce((acc, { themeKey, styles })=>{
+            acc[themeKey] = styles;
+            return acc;
+        }, {})
+    });
+    await external_utils_cjs_default()({
+        component: test,
+        testCases: ALL_COMPONENTS.map(({ testId, styles })=>({
+                testId,
+                styles
+            })),
+        noStyle: true
+    });
+});
+(0, external_vitest_namespaceObject.test)('Theme prop handles mixed format (string and object) correctly', async ()=>{
+    const mixedTheme = {
+        'dialog.root': {
+            className: 'custom-dialog-root',
+            style: {
+                backgroundColor: 'rgb(255, 255, 255)',
+                padding: '16px'
+            }
+        },
+        'dialog.overlay': 'custom-dialog-overlay'
+    };
+    const test = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_consent_manager_dialog_cjs_namespaceObject.ConsentManagerDialog, {
+        scrollLock: true,
+        theme: mixedTheme,
+        open: true
+    });
+    await external_utils_cjs_default()({
+        component: test,
+        testCases: [
+            {
+                testId: 'consent-manager-dialog-root',
+                styles: {
+                    className: 'custom-dialog-root',
+                    style: {
+                        backgroundColor: 'rgb(255, 255, 255)',
+                        padding: '16px'
+                    }
+                }
+            },
+            {
+                testId: 'consent-manager-dialog-overlay',
+                styles: 'custom-dialog-overlay'
+            }
+        ]
+    });
+});
+(0, external_vitest_namespaceObject.test)('Theme prop handles edge cases gracefully', async ()=>{
+    const edgeCaseTheme = {
+        'dialog.root': '',
+        'dialog.overlay': '',
+        'dialog.content': {
+            className: '',
+            style: {
+                margin: '0',
+                padding: '0'
+            }
+        }
+    };
+    const test = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_consent_manager_dialog_cjs_namespaceObject.ConsentManagerDialog, {
+        scrollLock: true,
+        open: true,
+        theme: edgeCaseTheme
+    });
+    await external_utils_cjs_default()({
+        component: test,
+        testCases: [
+            {
+                testId: 'consent-manager-dialog-root',
+                styles: ''
+            },
+            {
+                testId: 'consent-manager-dialog-overlay',
+                styles: ''
+            },
+            {
+                testId: 'consent-manager-dialog-content',
+                styles: {
+                    className: '',
+                    style: {
+                        margin: '0',
+                        padding: '0'
+                    }
+                }
+            }
+        ]
+    });
+});
+var __webpack_export_target__ = exports;
+for(var __webpack_i__ in __webpack_exports__)__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__];
+if (__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, '__esModule', {
+    value: true
+});

package/dist/components/consent-manager-dialog/__tests__/styles.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=styles.spec.d.ts.map

package/dist/components/consent-manager-dialog/__tests__/styles.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.spec.d.ts","sourceRoot":"","sources":["../../../../src/components/consent-manager-dialog/__tests__/styles.spec.tsx"],"names":[],"mappings":""}

package/dist/components/consent-manager-dialog/__tests__/styles.spec.js

@@ -0,0 +1,188 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE_vitest__ from "vitest";
+import * as __WEBPACK_EXTERNAL_MODULE__consent_manager_dialog_js_fdf416e1__ from "../consent-manager-dialog.js";
+import * as __WEBPACK_EXTERNAL_MODULE__utils_js_d88b7fe1__ from "./utils.js";
+const ALL_COMPONENTS = [
+    {
+        testId: 'consent-manager-dialog-root',
+        themeKey: 'dialog.root',
+        styles: 'custom-dialog-root'
+    },
+    {
+        testId: 'consent-manager-dialog-overlay',
+        themeKey: 'dialog.overlay',
+        styles: 'custom-dialog-overlay'
+    },
+    {
+        testId: 'consent-manager-dialog-header',
+        themeKey: 'dialog.header',
+        styles: 'custom-dialog-header'
+    },
+    {
+        testId: 'consent-manager-dialog-title',
+        themeKey: 'dialog.title',
+        styles: 'custom-dialog-title'
+    },
+    {
+        testId: "consent-manager-dialog-description",
+        themeKey: "dialog.description",
+        styles: "custom-dialog-description"
+    },
+    {
+        testId: 'consent-manager-dialog-content',
+        themeKey: 'dialog.content',
+        styles: 'custom-dialog-content'
+    },
+    {
+        testId: 'consent-manager-dialog-footer',
+        themeKey: 'dialog.footer',
+        styles: 'custom-dialog-footer'
+    }
+];
+(0, __WEBPACK_EXTERNAL_MODULE_vitest__.test)('Theme prop applies string classnames to all components', async ()=>{
+    const test = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__consent_manager_dialog_js_fdf416e1__.ConsentManagerDialog, {
+        open: true,
+        scrollLock: true,
+        theme: ALL_COMPONENTS.reduce((acc, { themeKey, styles })=>{
+            acc[themeKey] = styles;
+            return acc;
+        }, {})
+    });
+    await (0, __WEBPACK_EXTERNAL_MODULE__utils_js_d88b7fe1__["default"])({
+        component: test,
+        testCases: ALL_COMPONENTS.map(({ testId, styles })=>({
+                testId,
+                styles
+            }))
+    });
+});
+(0, __WEBPACK_EXTERNAL_MODULE_vitest__.test)('Theme prop supports object format with className and style for all components', async ()=>{
+    const style = {
+        backgroundColor: '#ffffff',
+        padding: '20px',
+        border: '1px solid #000000'
+    };
+    const testCases = ALL_COMPONENTS.map(({ testId, themeKey, styles })=>({
+            testId,
+            themeKey,
+            className: styles,
+            style
+        }));
+    const test = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__consent_manager_dialog_js_fdf416e1__.ConsentManagerDialog, {
+        open: true,
+        scrollLock: true,
+        theme: testCases.reduce((acc, { themeKey, className, style })=>{
+            acc[themeKey] = {
+                className,
+                style
+            };
+            return acc;
+        }, {})
+    });
+    await (0, __WEBPACK_EXTERNAL_MODULE__utils_js_d88b7fe1__["default"])({
+        component: test,
+        testCases: testCases.map(({ testId, className, style })=>({
+                testId,
+                styles: {
+                    className,
+                    style
+                }
+            }))
+    });
+});
+(0, __WEBPACK_EXTERNAL_MODULE_vitest__.test)('No style prop removes default styles but keeps custom classNames', async ()=>{
+    const test = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__consent_manager_dialog_js_fdf416e1__.ConsentManagerDialog, {
+        scrollLock: true,
+        noStyle: true,
+        open: true,
+        theme: ALL_COMPONENTS.reduce((acc, { themeKey, styles })=>{
+            acc[themeKey] = styles;
+            return acc;
+        }, {})
+    });
+    await (0, __WEBPACK_EXTERNAL_MODULE__utils_js_d88b7fe1__["default"])({
+        component: test,
+        testCases: ALL_COMPONENTS.map(({ testId, styles })=>({
+                testId,
+                styles
+            })),
+        noStyle: true
+    });
+});
+(0, __WEBPACK_EXTERNAL_MODULE_vitest__.test)('Theme prop handles mixed format (string and object) correctly', async ()=>{
+    const mixedTheme = {
+        'dialog.root': {
+            className: 'custom-dialog-root',
+            style: {
+                backgroundColor: 'rgb(255, 255, 255)',
+                padding: '16px'
+            }
+        },
+        'dialog.overlay': 'custom-dialog-overlay'
+    };
+    const test = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__consent_manager_dialog_js_fdf416e1__.ConsentManagerDialog, {
+        scrollLock: true,
+        theme: mixedTheme,
+        open: true
+    });
+    await (0, __WEBPACK_EXTERNAL_MODULE__utils_js_d88b7fe1__["default"])({
+        component: test,
+        testCases: [
+            {
+                testId: 'consent-manager-dialog-root',
+                styles: {
+                    className: 'custom-dialog-root',
+                    style: {
+                        backgroundColor: 'rgb(255, 255, 255)',
+                        padding: '16px'
+                    }
+                }
+            },
+            {
+                testId: 'consent-manager-dialog-overlay',
+                styles: 'custom-dialog-overlay'
+            }
+        ]
+    });
+});
+(0, __WEBPACK_EXTERNAL_MODULE_vitest__.test)('Theme prop handles edge cases gracefully', async ()=>{
+    const edgeCaseTheme = {
+        'dialog.root': '',
+        'dialog.overlay': '',
+        'dialog.content': {
+            className: '',
+            style: {
+                margin: '0',
+                padding: '0'
+            }
+        }
+    };
+    const test = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__consent_manager_dialog_js_fdf416e1__.ConsentManagerDialog, {
+        scrollLock: true,
+        open: true,
+        theme: edgeCaseTheme
+    });
+    await (0, __WEBPACK_EXTERNAL_MODULE__utils_js_d88b7fe1__["default"])({
+        component: test,
+        testCases: [
+            {
+                testId: 'consent-manager-dialog-root',
+                styles: ''
+            },
+            {
+                testId: 'consent-manager-dialog-overlay',
+                styles: ''
+            },
+            {
+                testId: 'consent-manager-dialog-content',
+                styles: {
+                    className: '',
+                    style: {
+                        margin: '0',
+                        padding: '0'
+                    }
+                }
+            }
+        ]
+    });
+});

package/dist/components/consent-manager-dialog/__tests__/utils.cjs

@@ -0,0 +1,68 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = function(exports1, definition) {
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = function(obj, prop) {
+        return Object.prototype.hasOwnProperty.call(obj, prop);
+    };
+})();
+(()=>{
+    __webpack_require__.r = function(exports1) {
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    default: ()=>utils_rslib_entry_
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_vitest_namespaceObject = require("vitest");
+const external_vitest_browser_react_namespaceObject = require("vitest-browser-react");
+const consent_manager_provider_cjs_namespaceObject = require("../../../providers/consent-manager-provider.cjs");
+async function testComponentStyles({ component, testCases, noStyle = false }) {
+    const { getByTestId } = (0, external_vitest_browser_react_namespaceObject.render)(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(consent_manager_provider_cjs_namespaceObject.ConsentManagerProvider, {
+        noStyle: noStyle,
+        children: component
+    }));
+    for (const { testId, styles } of testCases){
+        const element = getByTestId(testId);
+        if ('string' == typeof styles || styles?.className) {
+            const classNames = 'string' == typeof styles ? styles : styles?.className;
+            if (classNames) await external_vitest_namespaceObject.expect.element(element).toHaveClass(classNames, {
+                exact: noStyle
+            });
+        }
+        if ('object' == typeof styles && styles?.style) {
+            const styleEntries = Object.entries(styles.style).map(([key, value])=>{
+                const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+                return [
+                    cssKey,
+                    value
+                ];
+            });
+            await new Promise((resolve)=>setTimeout(resolve, 100));
+            for (const [property, value] of styleEntries)await external_vitest_namespaceObject.expect.element(element).toHaveStyle({
+                [property]: value
+            });
+        }
+    }
+}
+const utils_rslib_entry_ = testComponentStyles;
+var __webpack_export_target__ = exports;
+for(var __webpack_i__ in __webpack_exports__)__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__];
+if (__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, '__esModule', {
+    value: true
+});

package/dist/components/consent-manager-dialog/__tests__/utils.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import type { ThemeValue } from '../../../types/theme';
+interface ComponentStyles {
+    component: ReactNode;
+    testCases: {
+        testId: string;
+        styles: string | ThemeValue;
+    }[];
+    noStyle?: boolean;
+}
+declare function testComponentStyles({ component, testCases, noStyle, }: ComponentStyles): Promise<void>;
+export default testComponentStyles;
+//# sourceMappingURL=utils.d.ts.map

package/dist/components/consent-manager-dialog/__tests__/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/consent-manager-dialog/__tests__/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,UAAU,eAAe;IACxB,SAAS,EAAE,SAAS,CAAC;IACrB,SAAS,EAAE;QACV,MAAM,EAAE,MAAM,CAAC;QACf,MAAM,EAAE,MAAM,GAAG,UAAU,CAAC;KAC5B,EAAE,CAAC;IACJ,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,iBAAe,mBAAmB,CAAC,EAClC,SAAS,EACT,SAAS,EACT,OAAe,GACf,EAAE,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,CA0CjC;AAED,eAAe,mBAAmB,CAAC"}

package/dist/components/consent-manager-dialog/__tests__/utils.js

@@ -0,0 +1,34 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE_vitest__ from "vitest";
+import * as __WEBPACK_EXTERNAL_MODULE_vitest_browser_react_6a851916__ from "vitest-browser-react";
+import * as __WEBPACK_EXTERNAL_MODULE__providers_consent_manager_provider_js_47c65d87__ from "../../../providers/consent-manager-provider.js";
+async function testComponentStyles({ component, testCases, noStyle = false }) {
+    const { getByTestId } = (0, __WEBPACK_EXTERNAL_MODULE_vitest_browser_react_6a851916__.render)(/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__providers_consent_manager_provider_js_47c65d87__.ConsentManagerProvider, {
+        noStyle: noStyle,
+        children: component
+    }));
+    for (const { testId, styles } of testCases){
+        const element = getByTestId(testId);
+        if ('string' == typeof styles || styles?.className) {
+            const classNames = 'string' == typeof styles ? styles : styles?.className;
+            if (classNames) await __WEBPACK_EXTERNAL_MODULE_vitest__.expect.element(element).toHaveClass(classNames, {
+                exact: noStyle
+            });
+        }
+        if ('object' == typeof styles && styles?.style) {
+            const styleEntries = Object.entries(styles.style).map(([key, value])=>{
+                const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+                return [
+                    cssKey,
+                    value
+                ];
+            });
+            await new Promise((resolve)=>setTimeout(resolve, 100));
+            for (const [property, value] of styleEntries)await __WEBPACK_EXTERNAL_MODULE_vitest__.expect.element(element).toHaveStyle({
+                [property]: value
+            });
+        }
+    }
+}
+const utils_rslib_entry_ = testComponentStyles;
+export { utils_rslib_entry_ as default };