@c15t/react 0.0.1-rc.3

package/dist/consent-manager-widget/__tests__/styles.spec.cjs

@@ -0,0 +1,228 @@
+"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_index_cjs_namespaceObject = require("../../index.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-widget-root',
+        themeKey: 'consent-manager-widget.root',
+        styles: 'custom-root'
+    },
+    {
+        testId: 'consent-manager-widget-footer',
+        themeKey: 'consent-manager-widget.footer',
+        styles: 'custom-footer'
+    },
+    {
+        testId: 'consent-manager-widget-footer-sub-group',
+        themeKey: 'consent-manager-widget.footer.sub-group',
+        styles: 'custom-footer-sub-group'
+    },
+    {
+        testId: 'consent-manager-widget-reject-button',
+        themeKey: 'consent-manager-widget.footer.reject-button',
+        styles: 'custom-reject-button'
+    },
+    {
+        testId: 'consent-manager-widget-footer-accept-button',
+        themeKey: 'consent-manager-widget.footer.accept-button',
+        styles: 'custom-accept-button'
+    },
+    {
+        testId: 'consent-manager-widget-footer-save-button',
+        themeKey: 'consent-manager-widget.footer.save-button',
+        styles: 'custom-save-button'
+    },
+    {
+        testId: 'consent-manager-widget-accordion-trigger-marketing',
+        themeKey: 'consent-manager-widget.accordion.trigger',
+        styles: 'custom-accordion-trigger'
+    },
+    {
+        testId: 'consent-manager-widget-accordion-trigger-inner-marketing',
+        themeKey: 'consent-manager-widget.accordion.trigger-inner',
+        styles: 'custom-accordion-trigger-inner'
+    },
+    {
+        testId: 'consent-manager-widget-accordion-content-marketing',
+        themeKey: 'consent-manager-widget.accordion.content',
+        styles: 'custom-accordion-content'
+    },
+    {
+        testId: 'consent-manager-widget-switch-marketing',
+        themeKey: 'consent-manager-widget.switch',
+        styles: 'custom-switch'
+    }
+];
+(0, external_vitest_namespaceObject.test)('Theme prop applies string classnames to all components', async ()=>{
+    const test = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.ConsentManagerWidget, {
+        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_index_cjs_namespaceObject.ConsentManagerWidget, {
+        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_index_cjs_namespaceObject.ConsentManagerWidget, {
+        noStyle: 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 = {
+        'consent-manager-widget.root': {
+            className: 'custom-root',
+            style: {
+                backgroundColor: 'rgb(255, 255, 255)',
+                padding: '16px'
+            }
+        },
+        'consent-manager-widget.accordion.trigger': 'custom-accordion-trigger'
+    };
+    const test = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.ConsentManagerWidget, {
+        theme: mixedTheme
+    });
+    await external_utils_cjs_default()({
+        component: test,
+        testCases: [
+            {
+                testId: 'consent-manager-widget-root',
+                styles: {
+                    className: 'custom-root',
+                    style: {
+                        backgroundColor: 'rgb(255, 255, 255)',
+                        padding: '16px'
+                    }
+                }
+            },
+            {
+                testId: 'consent-manager-widget-accordion-trigger-marketing',
+                styles: 'custom-accordion-trigger'
+            }
+        ]
+    });
+});
+(0, external_vitest_namespaceObject.test)('Theme prop handles edge cases gracefully', async ()=>{
+    const edgeCaseTheme = {
+        'consent-manager-widget.root': '',
+        'consent-manager-widget.accordion': '',
+        'consent-manager-widget.footer': {
+            className: '',
+            style: {
+                margin: '0',
+                padding: '0'
+            }
+        }
+    };
+    const test = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.ConsentManagerWidget, {
+        theme: edgeCaseTheme
+    });
+    await external_utils_cjs_default()({
+        component: test,
+        testCases: [
+            {
+                testId: 'consent-manager-widget-root',
+                styles: ''
+            },
+            {
+                testId: 'consent-manager-widget-accordion',
+                styles: ''
+            },
+            {
+                testId: 'consent-manager-widget-footer',
+                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/consent-manager-widget/__tests__/styles.spec.d.ts

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

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

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

package/dist/consent-manager-widget/__tests__/styles.spec.js

@@ -0,0 +1,193 @@
+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__index_js_cbfda0f6__ from "../../index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__utils_js_d88b7fe1__ from "./utils.js";
+const ALL_COMPONENTS = [
+    {
+        testId: 'consent-manager-widget-root',
+        themeKey: 'consent-manager-widget.root',
+        styles: 'custom-root'
+    },
+    {
+        testId: 'consent-manager-widget-footer',
+        themeKey: 'consent-manager-widget.footer',
+        styles: 'custom-footer'
+    },
+    {
+        testId: 'consent-manager-widget-footer-sub-group',
+        themeKey: 'consent-manager-widget.footer.sub-group',
+        styles: 'custom-footer-sub-group'
+    },
+    {
+        testId: 'consent-manager-widget-reject-button',
+        themeKey: 'consent-manager-widget.footer.reject-button',
+        styles: 'custom-reject-button'
+    },
+    {
+        testId: 'consent-manager-widget-footer-accept-button',
+        themeKey: 'consent-manager-widget.footer.accept-button',
+        styles: 'custom-accept-button'
+    },
+    {
+        testId: 'consent-manager-widget-footer-save-button',
+        themeKey: 'consent-manager-widget.footer.save-button',
+        styles: 'custom-save-button'
+    },
+    {
+        testId: 'consent-manager-widget-accordion-trigger-marketing',
+        themeKey: 'consent-manager-widget.accordion.trigger',
+        styles: 'custom-accordion-trigger'
+    },
+    {
+        testId: 'consent-manager-widget-accordion-trigger-inner-marketing',
+        themeKey: 'consent-manager-widget.accordion.trigger-inner',
+        styles: 'custom-accordion-trigger-inner'
+    },
+    {
+        testId: 'consent-manager-widget-accordion-content-marketing',
+        themeKey: 'consent-manager-widget.accordion.content',
+        styles: 'custom-accordion-content'
+    },
+    {
+        testId: 'consent-manager-widget-switch-marketing',
+        themeKey: 'consent-manager-widget.switch',
+        styles: 'custom-switch'
+    }
+];
+(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__index_js_cbfda0f6__.ConsentManagerWidget, {
+        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__index_js_cbfda0f6__.ConsentManagerWidget, {
+        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__index_js_cbfda0f6__.ConsentManagerWidget, {
+        noStyle: 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 = {
+        'consent-manager-widget.root': {
+            className: 'custom-root',
+            style: {
+                backgroundColor: 'rgb(255, 255, 255)',
+                padding: '16px'
+            }
+        },
+        'consent-manager-widget.accordion.trigger': 'custom-accordion-trigger'
+    };
+    const test = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__index_js_cbfda0f6__.ConsentManagerWidget, {
+        theme: mixedTheme
+    });
+    await (0, __WEBPACK_EXTERNAL_MODULE__utils_js_d88b7fe1__["default"])({
+        component: test,
+        testCases: [
+            {
+                testId: 'consent-manager-widget-root',
+                styles: {
+                    className: 'custom-root',
+                    style: {
+                        backgroundColor: 'rgb(255, 255, 255)',
+                        padding: '16px'
+                    }
+                }
+            },
+            {
+                testId: 'consent-manager-widget-accordion-trigger-marketing',
+                styles: 'custom-accordion-trigger'
+            }
+        ]
+    });
+});
+(0, __WEBPACK_EXTERNAL_MODULE_vitest__.test)('Theme prop handles edge cases gracefully', async ()=>{
+    const edgeCaseTheme = {
+        'consent-manager-widget.root': '',
+        'consent-manager-widget.accordion': '',
+        'consent-manager-widget.footer': {
+            className: '',
+            style: {
+                margin: '0',
+                padding: '0'
+            }
+        }
+    };
+    const test = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__index_js_cbfda0f6__.ConsentManagerWidget, {
+        theme: edgeCaseTheme
+    });
+    await (0, __WEBPACK_EXTERNAL_MODULE__utils_js_d88b7fe1__["default"])({
+        component: test,
+        testCases: [
+            {
+                testId: 'consent-manager-widget-root',
+                styles: ''
+            },
+            {
+                testId: 'consent-manager-widget-accordion',
+                styles: ''
+            },
+            {
+                testId: 'consent-manager-widget-footer',
+                styles: {
+                    className: '',
+                    style: {
+                        margin: '0',
+                        padding: '0'
+                    }
+                }
+            }
+        ]
+    });
+});

package/dist/consent-manager-widget/__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 external_index_cjs_namespaceObject = require("../../index.cjs");
+async function testComponentStyles({ component, testCases, noStyle = false }) {
+    const { getByTestId } = (0, external_vitest_browser_react_namespaceObject.render)(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_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/consent-manager-widget/__tests__/utils.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import type { ThemeValue } from '../../theme/types/style-types';
+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/consent-manager-widget/__tests__/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/consent-manager-widget/__tests__/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAEhE,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,CAyCjC;AAED,eAAe,mBAAmB,CAAC"}

package/dist/consent-manager-widget/__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__index_js_cbfda0f6__ from "../../index.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__index_js_cbfda0f6__.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 };