@ndlib/component-library 1.0.26 → 1.0.28

package/dist/components/elements/Alerts/index.js

@@ -32,7 +32,7 @@ export const Alerts = (_a) => {
     return (_jsx(Box, Object.assign({}, rest, { children: alerts.map((alert, i) => {
             const { type, description } = alert;
             return (_jsx(Alert, { type: type, description: description, "data-nosnippet": true, sx: Object.assign({ mt: i ? '4px' : 0 }, alertStyles), dismiss: () => {
-                    dismiss(alert.uuid);
+                    dismiss(alert.id);
                 } }, i));
         }) })));
 };

package/dist/components/elements/ConsentBanner/ConsentBanner.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ConsentBanner } from './consentBanner';
+declare global {
+    interface Window {
+        clarity?: unknown;
+    }
+}
+declare const meta: Meta<typeof ConsentBanner>;
+export default meta;
+type Story = StoryObj<typeof ConsentBanner>;
+export declare const EEA_Shows: Story;
+export declare const NonEEA_Hides: Story;
+export declare const AcceptFlow: Story;
+export declare const DenyFlow: Story;
+export declare const AutoDetect_FetchMock: Story;

package/dist/components/elements/ConsentBanner/ConsentBanner.stories.js

@@ -0,0 +1,109 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ConsentBanner } from './consentBanner';
+function clearConsent() {
+    try {
+        localStorage.removeItem('clarityConsent');
+        document.cookie = 'clarityConsent=; Max-Age=0; path=/';
+    }
+    catch (_a) {
+    }
+}
+function cleanupClarityScripts() {
+    document
+        .querySelectorAll('script[src*="clarity.ms"]')
+        .forEach((s) => { var _a; return (_a = s.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(s); });
+    if (window.clarity) {
+        delete window.clarity;
+    }
+}
+const meta = {
+    title: 'Components/ConsentBanner',
+    component: ConsentBanner,
+    argTypes: {
+        clarityProjectId: { control: 'text' },
+        countryCode: { control: 'text' },
+        autoDetect: { control: 'boolean' },
+        geoEndpoint: { control: 'text' },
+        storageKey: { control: 'text' },
+    },
+    decorators: [
+        (Story) => {
+            clearConsent();
+            cleanupClarityScripts();
+            const containerStyle = {
+                minHeight: 180,
+                border: '1px dashed #ccc',
+                padding: 16,
+                position: 'relative',
+            };
+            return (_jsxs("div", Object.assign({ style: containerStyle }, { children: [_jsx("p", Object.assign({ style: { marginTop: 0 } }, { children: "The banner (if shown) is fixed to the bottom of the viewport." })), _jsx(Story, {})] })));
+        },
+    ],
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+export const EEA_Shows = {
+    name: 'EEA (DE) → Banner shows',
+    args: {
+        clarityProjectId: 'CLARITY_PROJECT_ID',
+        countryCode: 'DE',
+        autoDetect: false,
+    },
+};
+export const NonEEA_Hides = {
+    name: 'Non-EEA (US) → No banner',
+    args: {
+        clarityProjectId: 'CLARITY_PROJECT_ID',
+        countryCode: 'US',
+        autoDetect: false,
+    },
+};
+export const AcceptFlow = {
+    name: 'Accept flow (DE)',
+    args: {
+        clarityProjectId: 'CLARITY_PROJECT_ID',
+        countryCode: 'DE',
+    },
+};
+export const DenyFlow = {
+    name: 'Deny flow (DE)',
+    args: {
+        clarityProjectId: 'CLARITY_PROJECT_ID',
+        countryCode: 'DE',
+    },
+};
+export const AutoDetect_FetchMock = {
+    name: 'Auto-detect (fetch override → DE)',
+    args: {
+        clarityProjectId: 'CLARITY_PROJECT_ID',
+        autoDetect: true,
+        geoEndpoint: '/api/geo',
+    },
+    decorators: [
+        (Story) => {
+            const g = global;
+            const originalFetch = g.fetch;
+            g.fetch = () => __awaiter(void 0, void 0, void 0, function* () {
+                return ({
+                    text: () => __awaiter(void 0, void 0, void 0, function* () { return 'DE'; }),
+                });
+            });
+            const node = _jsx(Story, {});
+            queueMicrotask(() => {
+                g.fetch = originalFetch;
+            });
+            return node;
+        },
+    ],
+};

package/dist/components/elements/ConsentBanner/ConsentBanner.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/elements/ConsentBanner/ConsentBanner.test.js

@@ -0,0 +1,68 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ConsentBanner } from './consentBanner';
+function cleanupClarityScripts() {
+    document
+        .querySelectorAll('script[src*="clarity.ms"]')
+        .forEach((s) => { var _a; return (_a = s.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(s); });
+}
+function resetConsent() {
+    try {
+        localStorage.removeItem('clarityConsent');
+    }
+    catch (_a) { }
+    document.cookie = 'clarityConsent=; Max-Age=0; path=/';
+    cleanupClarityScripts();
+    if (window.clarity)
+        delete window.clarity;
+}
+beforeEach(() => {
+    resetConsent();
+});
+describe('ConsentBanner', () => {
+    test('shows banner for EEA country (DE) when no prior decision', () => {
+        render(_jsx(ConsentBanner, { clarityProjectId: "PID", countryCode: "DE", autoDetect: false }));
+        expect(screen.getByRole('dialog', { name: /consent for analytics/i })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: /accept/i })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: /deny/i })).toBeInTheDocument();
+    });
+    test('does not show banner for non-EEA country (US)', () => {
+        render(_jsx(ConsentBanner, { clarityProjectId: "PID", countryCode: "US", autoDetect: false }));
+        expect(screen.queryByRole('dialog', { name: /consent for analytics/i })).not.toBeInTheDocument();
+    });
+    test('clicking Deny stores decision and hides banner (no script injected)', () => __awaiter(void 0, void 0, void 0, function* () {
+        const user = userEvent.setup();
+        render(_jsx(ConsentBanner, { clarityProjectId: "PID", countryCode: "DE" }));
+        const deny = yield screen.findByRole('button', { name: /deny/i });
+        yield user.click(deny);
+        yield waitFor(() => expect(screen.queryByRole('dialog', { name: /consent for analytics/i })).not.toBeInTheDocument());
+        expect(localStorage.getItem('clarityConsent')).toBe('false');
+        expect(document.querySelector('script[src*="clarity.ms"]')).not.toBeInTheDocument();
+    }));
+    test('autoDetect fetch → banner shows for mocked DE (runner-agnostic)', () => __awaiter(void 0, void 0, void 0, function* () {
+        const originalFetch = globalThis.fetch;
+        globalThis.fetch = () => __awaiter(void 0, void 0, void 0, function* () {
+            return ({
+                text: () => __awaiter(void 0, void 0, void 0, function* () { return 'DE'; }),
+            });
+        });
+        try {
+            render(_jsx(ConsentBanner, { clarityProjectId: "PID", autoDetect: true }));
+            yield waitFor(() => expect(screen.getByRole('dialog', { name: /consent for analytics/i })).toBeInTheDocument());
+        }
+        finally {
+            ;
+            globalThis.fetch = originalFetch;
+        }
+    }));
+});

package/dist/components/elements/ConsentBanner/consentBanner.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+type ConsentBannerProps = {
+    clarityProjectId: string;
+    countryCode?: string | null;
+    autoDetect?: boolean;
+    geoEndpoint?: string;
+    storageKey?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    onConsentChange?: (consented: boolean) => void;
+};
+export declare const ConsentBanner: React.FC<ConsentBannerProps>;
+export default ConsentBanner;

package/dist/components/elements/ConsentBanner/consentBanner.js

@@ -0,0 +1,201 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+const EEA_UK_CH = new Set([
+    'AT',
+    'BE',
+    'BG',
+    'HR',
+    'CY',
+    'CZ',
+    'DK',
+    'EE',
+    'FI',
+    'FR',
+    'DE',
+    'GR',
+    'HU',
+    'IS',
+    'IE',
+    'IT',
+    'LV',
+    'LI',
+    'LT',
+    'LU',
+    'MT',
+    'NL',
+    'NO',
+    'PL',
+    'PT',
+    'RO',
+    'SK',
+    'SI',
+    'ES',
+    'SE',
+    'GB',
+    'CH',
+]);
+const isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
+function getStoredDecision(key) {
+    var _a, _b, _c;
+    if (!isBrowser)
+        return null;
+    try {
+        const v = (_c = (_a = localStorage.getItem(key)) !== null && _a !== void 0 ? _a : (_b = document.cookie.match(new RegExp(`${key}=([^;]+)`))) === null || _b === void 0 ? void 0 : _b[1]) !== null && _c !== void 0 ? _c : null;
+        if (v === 'true')
+            return true;
+        if (v === 'false')
+            return false;
+        return null;
+    }
+    catch (_d) {
+        return null;
+    }
+}
+function setStoredDecision(key, val) {
+    if (!isBrowser)
+        return;
+    try {
+        localStorage.setItem(key, String(val));
+    }
+    catch (_a) {
+    }
+    try {
+        const days = 180;
+        const expires = new Date(Date.now() + days * 864e5).toUTCString();
+        document.cookie = `${key}=${val}; path=/; SameSite=Lax; expires=${expires}`;
+    }
+    catch (_b) {
+    }
+}
+function loadClarity(clarityProjectId) {
+    if (!isBrowser)
+        return;
+    const w = window;
+    if (typeof w.clarity === 'function')
+        return;
+    w.clarity = (...args) => {
+        w.clarity.q = w.clarity.q || [];
+        w.clarity.q.push(args);
+    };
+    const t = document.createElement('script');
+    t.async = true;
+    t.src = `https://www.clarity.ms/tag/${clarityProjectId}`;
+    const scripts = document.getElementsByTagName('script');
+    const y = scripts && scripts.length ? scripts[0] : null;
+    if (y && y.parentNode) {
+        y.parentNode.insertBefore(t, y);
+    }
+    else if (document.head) {
+        document.head.appendChild(t);
+    }
+    else if (document.body) {
+        document.body.appendChild(t);
+    }
+    else {
+        document.documentElement.appendChild(t);
+    }
+}
+export const ConsentBanner = ({ clarityProjectId, countryCode = null, autoDetect = false, geoEndpoint, storageKey = 'clarityConsent', className, style, onConsentChange, }) => {
+    const [shouldShow, setShouldShow] = React.useState(false);
+    const [resolvedCountry, setResolvedCountry] = React.useState(countryCode);
+    React.useEffect(() => {
+        if (!isBrowser)
+            return;
+        const prior = getStoredDecision(storageKey);
+        if (prior === true) {
+            try {
+                loadClarity(clarityProjectId);
+            }
+            catch (_a) {
+            }
+        }
+    }, [clarityProjectId, storageKey]);
+    React.useEffect(() => {
+        if (countryCode) {
+            setResolvedCountry(countryCode.toUpperCase());
+            return;
+        }
+        if (!autoDetect || !isBrowser)
+            return;
+        const endpoint = geoEndpoint || 'https://ipapi.co/country/';
+        let cancelled = false;
+        (() => __awaiter(void 0, void 0, void 0, function* () {
+            try {
+                const res = yield fetch(endpoint, { credentials: 'omit' });
+                const text = (yield res.text()).trim().slice(0, 2).toUpperCase();
+                if (!cancelled && /^[A-Z]{2}$/.test(text)) {
+                    setResolvedCountry(text);
+                }
+            }
+            catch (_a) {
+            }
+        }))();
+        return () => {
+            cancelled = true;
+        };
+    }, [autoDetect, geoEndpoint, countryCode]);
+    React.useEffect(() => {
+        if (!isBrowser)
+            return;
+        const prior = getStoredDecision(storageKey);
+        if (prior !== null) {
+            setShouldShow(false);
+            return;
+        }
+        if (!resolvedCountry) {
+            setShouldShow(false);
+            return;
+        }
+        setShouldShow(EEA_UK_CH.has(resolvedCountry));
+    }, [resolvedCountry, storageKey]);
+    const handleAccept = () => {
+        setStoredDecision(storageKey, true);
+        setShouldShow(false);
+        onConsentChange === null || onConsentChange === void 0 ? void 0 : onConsentChange(true);
+        try {
+            loadClarity(clarityProjectId);
+        }
+        catch (_a) {
+        }
+    };
+    const handleDeny = () => {
+        setStoredDecision(storageKey, false);
+        setShouldShow(false);
+        onConsentChange === null || onConsentChange === void 0 ? void 0 : onConsentChange(false);
+    };
+    if (!shouldShow)
+        return null;
+    return (_jsxs("div", Object.assign({ role: "dialog", "aria-live": "polite", "aria-label": "Consent for analytics", className: className, style: Object.assign({ position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 99999, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '0.75rem', padding: '0.9rem 1rem', background: 'rgba(17, 24, 39, 0.98)', color: 'white', boxShadow: '0 -6px 24px rgba(0,0,0,0.25)', flexWrap: 'wrap' }, style) }, { children: [_jsx("p", Object.assign({ style: {
+                    fontFamily: 'Arial, sans-serif',
+                    textAlign: 'center',
+                    margin: 0,
+                    lineHeight: 1.4,
+                    flex: '1 1 420px',
+                } }, { children: "We use Microsoft Clarity to improve our site. Do you consent to analytics cookies?" })), _jsxs("div", Object.assign({ style: { display: 'flex', gap: '0.5rem', flexShrink: 0 } }, { children: [_jsx("button", Object.assign({ onClick: handleDeny, type: "button", style: {
+                            border: '1px solid rgba(255,255,255,0.65)',
+                            background: 'transparent',
+                            color: 'white',
+                            padding: '0.6rem 0.9rem',
+                            borderRadius: 8,
+                            cursor: 'pointer',
+                            fontWeight: 600,
+                        } }, { children: "Deny" })), _jsx("button", Object.assign({ onClick: handleAccept, type: "button", style: {
+                            border: 'none',
+                            background: 'white',
+                            color: '#111827',
+                            padding: '0.6rem 0.9rem',
+                            borderRadius: 8,
+                            cursor: 'pointer',
+                            fontWeight: 700,
+                        } }, { children: "Accept" }))] }))] })));
+};
+export default ConsentBanner;

package/dist/components/providers/alerts.d.ts

@@ -15,7 +15,7 @@ export declare enum ALERT_DOMAIN {
     CATALOGUE_CLASSIC_HCC = "catalogueClassicHCC"
 }
 export type AlertProperties = {
-    uuid: string;
+    id: string;
     title: string;
     type: ALERT_TYPE;
     description: string;

package/dist/components/providers/alerts.js

@@ -41,6 +41,7 @@ const composeGraphqlQuery = ({ startTime, endTime, }) => {
           sort: ["type:desc", "startTime:asc"]
         ) {
           data {
+            id
             attributes {
               title
               description
@@ -53,8 +54,8 @@ const composeGraphqlQuery = ({ startTime, endTime, }) => {
       }
     `,
         variables: {
-            startTime: startTime,
-            endTime: endTime,
+            startTime,
+            endTime,
         },
     });
 };
@@ -63,22 +64,16 @@ const useAlertsQuery = ({ domain = ALERT_DOMAIN.LIBRARY, endpoint = DEFAULT_ENDP
     const [alerts, setAlerts] = useState([]);
     useEffect(() => {
         const fetchData = () => __awaiter(void 0, void 0, void 0, function* () {
-            var _a, _b, _c, _d, _e;
+            var _a, _b;
             try {
-                const myHeaders = new Headers();
-                myHeaders.append('Content-Type', 'application/json');
                 const response = yield fetch(endpoint, {
                     method: 'POST',
-                    headers: myHeaders,
-                    body: composeGraphqlQuery({
-                        startTime,
-                        endTime,
-                    }),
-                    redirect: 'follow',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: composeGraphqlQuery({ startTime, endTime }),
                 });
                 const json = yield response.json();
                 if ((_b = (_a = json === null || json === void 0 ? void 0 : json.data) === null || _a === void 0 ? void 0 : _a.alerts) === null || _b === void 0 ? void 0 : _b.data) {
-                    const results = (_e = (_d = (_c = json === null || json === void 0 ? void 0 : json.data) === null || _c === void 0 ? void 0 : _c.alerts) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.map((a) => a === null || a === void 0 ? void 0 : a.attributes);
+                    const results = json.data.alerts.data.map((a) => (Object.assign({ id: a.id }, a.attributes)));
                     setAlerts(results);
                 }
             }
@@ -110,23 +105,20 @@ export const AlertsProvider = ({ domain = ALERT_DOMAIN.LIBRARY, endpoint, startT
     const [dismissedAlerts, setDismissedAlerts] = useState(storedDismissedAlerts ? JSON.parse(storedDismissedAlerts) : []);
     const dismiss = (id) => {
         if (!dismissedAlerts.includes(id)) {
-            const newDismissed = dismissedAlerts.concat([id]);
+            const newDismissed = [...dismissedAlerts, id];
             storage.setItem(DISMISSED_ALERTS_STORAGE_KEY, JSON.stringify(newDismissed));
             setDismissedAlerts(newDismissed);
         }
     };
     const filteredAlerts = alerts
-        .filter((alert) => !dismissedAlerts.includes(alert.uuid))
+        .filter((alert) => !dismissedAlerts.includes(alert.id))
         .filter((alert) => { var _a; return (_a = alert === null || alert === void 0 ? void 0 : alert.domains) === null || _a === void 0 ? void 0 : _a.includes(domain); });
-    return (_jsx(AlertsContext.Provider, Object.assign({ value: {
-            alerts: filteredAlerts,
-            dismiss,
-        } }, { children: children })));
+    return (_jsx(AlertsContext.Provider, Object.assign({ value: { alerts: filteredAlerts, dismiss } }, { children: children })));
 };
-export const useAlerts = (pageAlerts) => {
+export const useAlerts = (pageAlerts = []) => {
     const { alerts: allAlerts, dismiss } = React.useContext(AlertsContext);
-    const alerts = pageAlerts && (pageAlerts === null || pageAlerts === void 0 ? void 0 : pageAlerts.length) > 0
-        ? allAlerts.filter((alert) => alert.global || pageAlerts.includes(alert.uuid))
+    const alerts = pageAlerts.length > 0
+        ? allAlerts.filter((alert) => alert.global || pageAlerts.includes(alert.id))
         : allAlerts.filter((alert) => alert.global);
     return {
         alerts,

package/dist/components/providers/alerts.test.js

@@ -18,7 +18,7 @@ describe('AlertsProvider and useAlerts', () => {
     });
     const mockAlerts = [
         {
-            uuid: '1',
+            id: '1',
             domains: ['library'],
             startTime: '2020-09-06T04:00:00.000Z',
             endTime: '2020-09-09T04:00:00.000Z',
@@ -28,7 +28,7 @@ describe('AlertsProvider and useAlerts', () => {
             global: true,
         },
         {
-            uuid: '2',
+            id: '2',
             title: 'Test Alert 2',
             type: 'Warning',
             description: 'Issue with Primo',
@@ -36,7 +36,7 @@ describe('AlertsProvider and useAlerts', () => {
             global: false,
         },
         {
-            uuid: '3',
+            id: '3',
             domains: ['library'],
             startTime: '2020-09-06T04:00:00.000Z',
             endTime: '2020-09-09T04:00:00.000Z',
@@ -61,7 +61,7 @@ describe('AlertsProvider and useAlerts', () => {
         });
         const TestComponent = () => {
             const { alerts } = useAlerts();
-            return (_jsx("div", { children: alerts.map((alert) => (_jsx("div", { children: alert.title }, alert.uuid))) }));
+            return (_jsx("div", { children: alerts.map((alert) => (_jsx("div", { children: alert.title }, alert.id))) }));
         };
         render(_jsx(AlertsProvider, { children: _jsx(TestComponent, {}) }));
         yield waitFor(() => {
@@ -77,7 +77,7 @@ describe('AlertsProvider and useAlerts', () => {
             const { alerts } = useAlerts();
             return (_jsx("div", { children: alerts.length === 0
                     ? 'No Alerts'
-                    : alerts.map((alert) => _jsx("div", { children: alert.title }, alert.uuid)) }));
+                    : alerts.map((alert) => _jsx("div", { children: alert.title }, alert.id)) }));
         };
         render(_jsx(AlertsProvider, { children: _jsx(TestComponent, {}) }));
         yield waitFor(() => {
@@ -92,7 +92,7 @@ describe('AlertsProvider and useAlerts', () => {
             const { alerts } = useAlerts();
             return (_jsx("div", { children: alerts.length === 0
                     ? 'No Alerts'
-                    : alerts.map((alert) => _jsx("div", { children: alert.title }, alert.uuid)) }));
+                    : alerts.map((alert) => _jsx("div", { children: alert.title }, alert.id)) }));
         };
         render(_jsx(AlertsProvider, { children: _jsx(TestComponent, {}) }));
         yield waitFor(() => {
@@ -105,7 +105,7 @@ describe('AlertsProvider and useAlerts', () => {
             const { alerts } = useAlerts();
             return (_jsx("div", { children: alerts.length === 0
                     ? 'No Alerts'
-                    : alerts.map((alert) => _jsx("div", { children: alert.title }, alert.uuid)) }));
+                    : alerts.map((alert) => _jsx("div", { children: alert.title }, alert.id)) }));
         };
         render(_jsx(AlertsProvider, { children: _jsx(TestComponent, {}) }));
         yield waitFor(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndlib/component-library",
-  "version": "1.0.26",
+  "version": "1.0.28",
   "type": "module",
   "sideEffects": false,
   "files": [