@google-psat/design-system 0.9.0-1

package/dist-types/constants.d.ts

@@ -0,0 +1,20 @@
+interface LegendData {
+    [key: string]: string | string[];
+}
+export declare const LEGEND_DESCRIPTION: LegendData;
+export declare const EMPTY_FRAME_COUNT: {
+    title: string;
+    count: number;
+    data: {
+        count: number;
+        color: string;
+    }[];
+}[];
+export declare const EMPTY_FRAME_LEGEND: {
+    label: string;
+    descriptionKey: string;
+    count: number;
+    color: string;
+    countClassName: string;
+}[];
+export {};

package/dist-types/icons/index.d.ts

@@ -0,0 +1,60 @@
+export { default as ArrowDown } from './arrow-down.svg';
+export { default as ArrowUp } from './arrow-up.svg';
+export { default as ArrowDownWhite } from './arrow-down-white.svg';
+export { default as ArrowRight } from './arrow-right.svg';
+export { default as ChevronRight } from './chevron-right.svg';
+export { default as ClearAll } from './clear-all.svg';
+export { default as CrossIcon } from './cross-icon.svg';
+export { default as Cookie } from './cookie.svg';
+export { default as CookieIcon } from './cookie-gray.svg';
+export { default as CookieIconWhite } from './cookie-white.svg';
+export { default as Copy } from './copy.svg';
+export { default as Export } from './export.svg';
+export { default as File } from './file.svg';
+export { default as FileWhite } from './file-white.svg';
+export { default as Check } from './check.svg';
+export { default as AttributionIcon } from './attribution.svg';
+export { default as AttributionIconWhite } from './attribution-white.svg';
+export { default as BounceTrackingIcon } from './bounce-tracking.svg';
+export { default as BounceTrackingIconWhite } from './bounce-tracking-white.svg';
+export { default as TopicsIcon } from './topics.svg';
+export { default as TopicsIconWhite } from './topics-white.svg';
+export { default as FingerPrintingIcon } from './fingerprinting.svg';
+export { default as FingerPrintingIconWhite } from './fingerprinting-white.svg';
+export { default as InfoIcon } from './info.svg';
+export { default as SiteBoundariesIcon } from './site-boundaries.svg';
+export { default as SiteBoundariesIconWhite } from './site-boundaries-white.svg';
+export { default as ChipsIcon } from './chips.svg';
+export { default as ChipsIconWhite } from './chips-white.svg';
+export { default as PrivateAdvertisingIcon } from './private-advertising.svg';
+export { default as PrivateAdvertisingIconWhite } from './private-advertising-white.svg';
+export { default as RelatedWebsiteSetsIcon } from './related-website-sets.svg';
+export { default as RelatedWebsiteSetsIconWhite } from './related-website-sets-white.svg';
+export { default as AntiCovertTrackingIcon } from './anti-covert-tracking.svg';
+export { default as AntiCovertTrackingIconWhite } from './anti-covert-tracking-white.svg';
+export { default as InspectIcon } from './inspect.svg';
+export { default as InspectActiveIcon } from './inspect-active.svg';
+export { default as InspectWhiteIcon } from './inspect-white.svg';
+export { default as PrivacySandboxIcon } from './privacy-sandbox.svg';
+export { default as PrivacySandboxIconWhite } from './privacy-sandbox-white.svg';
+export { default as PrivacySandboxColoredIcon } from './privacy-sandbox-colored.svg';
+export { default as Add } from './add.svg';
+export { default as Cross } from './cross.svg';
+export { default as Refresh } from './refresh-icon.svg';
+export { default as Ellipse } from './ellipse.svg';
+export { default as StopIcon } from './stop-icon.svg';
+export { default as FilterIcon } from './filter-icon.svg';
+export { default as ClearIcon } from './clear-icon.svg';
+export { default as PaddedCross } from './padded-cross.svg';
+export { default as Warning } from './warning-filled.svg';
+export { default as VisibilityOff } from './visibility-off.svg';
+export { default as PSTimelineIcon } from './ps-timeline.svg';
+export { default as InboundIcon } from './inbound-icon.svg';
+export { default as OutboundIcon } from './outbound-icon.svg';
+export { default as OutboundInboundIcon } from './outbound-inbound-icon.svg';
+export { default as OutboundInboundColoredIcon } from './outbound-inbound-colored-icon.svg';
+export { default as QuestionMark } from './question-mark.svg';
+export { default as GreenTick } from './green-tick-icon.svg';
+export { default as ChevronDown } from './chevron-down.svg';
+export { default as WarningBare } from './warning.svg';
+export { default as GroupsIcon } from './groups.svg';

package/dist-types/index.d.ts

@@ -0,0 +1,5 @@
+export * from './icons';
+export * from './theme/colors';
+export * from './components';
+export * from './utils';
+export * from './constants';

package/dist-types/test-data/cookieMockData.d.ts

@@ -0,0 +1,28 @@
+/**
+ * External dependencies.
+ */
+import { type Cookie as ParsedCookie } from 'simple-cookie';
+import { TabCookies, TabFrames } from '@google-psat/common';
+export declare const emptyAnalytics: {
+    platform: string;
+    category: string;
+    name: string;
+    domain: string;
+    description: string;
+    retention: string;
+    dataController: string;
+    gdprUrl: string;
+    wildcard: string;
+};
+export declare const uncategorized1pCookie: ParsedCookie;
+export declare const uncategorized3pCookie: ParsedCookie;
+export declare const known1pCookie: ParsedCookie;
+export declare const known3pCookie: ParsedCookie;
+export declare const known3pCookieWithValue: ParsedCookie;
+declare const data: {
+    tabCookies: TabCookies;
+    tabUrl: string;
+    tabFrames: TabFrames;
+    selectedFrame: string;
+};
+export default data;

package/dist-types/test-data/cookieStats.d.ts

@@ -0,0 +1,21 @@
+declare const _default: {
+    total: number;
+    blockedCookies: {
+        total: number;
+    };
+    firstParty: {
+        total: number;
+        functional: number;
+        marketing: number;
+        analytics: number;
+        uncategorized: number;
+    };
+    thirdParty: {
+        total: number;
+        functional: number;
+        marketing: number;
+        analytics: number;
+        uncategorized: number;
+    };
+};
+export default _default;

package/dist-types/test-data/cookieTableBody.d.ts

@@ -0,0 +1,88 @@
+/// <reference types="react" />
+declare const bodyRowData: {
+    row: {
+        'parsedCookie.name': {
+            value: () => string;
+        };
+        'parsedCookie.value': {
+            value: () => string;
+        };
+        'parsedCookie.domain': {
+            value: () => string;
+        };
+        'parsedCookie.path': {
+            value: () => string;
+        };
+        'parsedCookie.expires': {
+            value: () => string;
+        };
+        'parsedCookie.httponly': {
+            value: () => import("react").JSX.Element;
+        };
+        'parsedCookie.samesite': {
+            value: () => import("react").JSX.Element;
+        };
+        'parsedCookie.secure': {
+            value: () => import("react").JSX.Element;
+        };
+        'analytics.category': {
+            value: () => string;
+        };
+        'analytics.platform': {
+            value: () => string;
+        };
+        isFirstParty: {
+            value: () => string;
+        };
+        originalData: {
+            parsedCookie: {
+                name: string;
+                value: string;
+                expires: string;
+                path: string;
+                domain: string;
+                httponly: boolean;
+                secure: boolean;
+                samesite: string;
+            };
+            analytics: {
+                platform: string;
+                category: string;
+                name: string;
+                domain: string;
+                description: string;
+                retention: string;
+                dataController: string;
+                gdprUrl: string;
+                wildcard: string;
+            };
+            url: string;
+            headerType: string;
+            isFirstParty: boolean;
+            frameIdList: number[];
+            isCookieSet: boolean;
+            frameUrls: string;
+            highlighted: boolean;
+        };
+    };
+    columns: ({
+        header: string;
+        accessorKey: string;
+        cell: (info: import("..").InfoType) => import("..").InfoType;
+        enableHiding: boolean;
+    } | {
+        header: string;
+        accessorKey: string;
+        cell: (info: import("..").InfoType) => import("react").JSX.Element;
+        enableHiding: boolean;
+    })[];
+    index: number;
+    isRowFocused: boolean;
+    selectedKey: null;
+    getRowObjectKey: () => void;
+    onRowClick: () => void;
+    onKeyDown: () => void;
+    domainsInAllowList: Set<string>;
+    setDomainsInAllowList: () => void;
+};
+export default bodyRowData;

package/dist-types/test-data/cookieTableMockData.d.ts

@@ -0,0 +1,209 @@
+import React from 'react';
+/**
+ * Internal dependencies.
+ */
+import { InfoType } from '../components';
+export declare const originalData: {
+    parsedCookie: {
+        name: string;
+        value: string;
+        expires: string;
+        path: string;
+        domain: string;
+        httponly: boolean;
+        secure: boolean;
+        samesite: string;
+    };
+    analytics: {
+        platform: string;
+        category: string;
+        name: string;
+        domain: string;
+        description: string;
+        retention: string;
+        dataController: string;
+        gdprUrl: string;
+        wildcard: string;
+    };
+    url: string;
+    headerType: string;
+    isFirstParty: boolean;
+    frameIdList: number[];
+    isCookieSet: boolean;
+    frameUrls: string;
+    highlighted: boolean;
+}[];
+export declare const rows: {
+    'parsedCookie.name': {
+        value: () => string;
+    };
+    'parsedCookie.value': {
+        value: () => string;
+    };
+    'parsedCookie.domain': {
+        value: () => string;
+    };
+    'parsedCookie.path': {
+        value: () => string;
+    };
+    'parsedCookie.expires': {
+        value: () => string;
+    };
+    'parsedCookie.httponly': {
+        value: () => React.JSX.Element;
+    };
+    'parsedCookie.samesite': {
+        value: () => React.JSX.Element;
+    };
+    'parsedCookie.secure': {
+        value: () => React.JSX.Element;
+    };
+    'analytics.category': {
+        value: () => string;
+    };
+    'analytics.platform': {
+        value: () => string;
+    };
+    isFirstParty: {
+        value: () => string;
+    };
+    originalData: {
+        parsedCookie: {
+            name: string;
+            value: string;
+            expires: string;
+            path: string;
+            domain: string;
+            httponly: boolean;
+            secure: boolean;
+            samesite: string;
+        };
+        analytics: {
+            platform: string;
+            category: string;
+            name: string;
+            domain: string;
+            description: string;
+            retention: string;
+            dataController: string;
+            gdprUrl: string;
+            wildcard: string;
+        };
+        url: string;
+        headerType: string;
+        isFirstParty: boolean;
+        frameIdList: number[];
+        isCookieSet: boolean;
+        frameUrls: string;
+        highlighted: boolean;
+    };
+}[];
+declare const table: {
+    columns: ({
+        header: string;
+        accessorKey: string;
+        cell: (info: InfoType) => InfoType;
+        enableHiding: boolean;
+    } | {
+        header: string;
+        accessorKey: string;
+        cell: (info: InfoType) => React.JSX.Element;
+        enableHiding: boolean;
+    })[];
+    hideableColumns: ({
+        header: string;
+        accessorKey: string;
+        cell: (info: InfoType) => InfoType;
+        enableHiding: boolean;
+    } | {
+        header: string;
+        accessorKey: string;
+        cell: (info: InfoType) => React.JSX.Element;
+        enableHiding: boolean;
+    })[];
+    rows: {
+        'parsedCookie.name': {
+            value: () => string;
+        };
+        'parsedCookie.value': {
+            value: () => string;
+        };
+        'parsedCookie.domain': {
+            value: () => string;
+        };
+        'parsedCookie.path': {
+            value: () => string;
+        };
+        'parsedCookie.expires': {
+            value: () => string;
+        };
+        'parsedCookie.httponly': {
+            value: () => React.JSX.Element;
+        };
+        'parsedCookie.samesite': {
+            value: () => React.JSX.Element;
+        };
+        'parsedCookie.secure': {
+            value: () => React.JSX.Element;
+        };
+        'analytics.category': {
+            value: () => string;
+        };
+        'analytics.platform': {
+            value: () => string;
+        };
+        isFirstParty: {
+            value: () => string;
+        };
+        originalData: {
+            parsedCookie: {
+                name: string;
+                value: string;
+                expires: string;
+                path: string;
+                domain: string;
+                httponly: boolean;
+                secure: boolean;
+                samesite: string;
+            };
+            analytics: {
+                platform: string;
+                category: string;
+                name: string;
+                domain: string;
+                description: string;
+                retention: string;
+                dataController: string;
+                gdprUrl: string;
+                wildcard: string;
+            };
+            url: string;
+            headerType: string;
+            isFirstParty: boolean;
+            frameIdList: number[];
+            isCookieSet: boolean;
+            frameUrls: string;
+            highlighted: boolean;
+        };
+    }[];
+    sortKey: string;
+    sortOrder: string;
+    setSortKey: () => void;
+    setSortOrder: () => void;
+    hideColumn: () => void;
+    toggleVisibility: () => void;
+    areAllColumnsVisible: boolean;
+    showColumn: () => void;
+    isColumnHidden: () => void;
+    tableContainerRef: null;
+    onMouseDown: () => void;
+    isResizing: boolean;
+    filters: {};
+    selectedFilters: {};
+    isFiltering: boolean;
+    toggleFilterSelection: () => void;
+    resetFilters: () => void;
+    searchValue: string;
+    setSearchValue: () => void;
+};
+export default table;

package/dist-types/test-data/cookiesStatsComponents.d.ts

@@ -0,0 +1,27 @@
+declare const _default: {
+    legend: {
+        label: string;
+        count: number;
+        color: string;
+        countClassName: string;
+    }[];
+    firstParty: {
+        count: number;
+        color: string;
+    }[];
+    thirdParty: {
+        count: number;
+        color: string;
+    }[];
+    blocked: {
+        count: number;
+        color: string;
+    }[];
+    blockedCookiesLegend: {
+        label: string;
+        count: number;
+        color: string;
+        countClassName: string;
+    }[];
+};
+export default _default;

package/dist-types/theme/colors.d.ts

@@ -0,0 +1,6 @@
+export declare const COLOR_MAP: {
+    [key: string]: {
+        color: string;
+        className: string;
+    };
+};

package/dist-types/utils/index.d.ts

@@ -0,0 +1,5 @@
+export { noop } from './noop';
+export { default as prepareCookiesCount } from './prepareCookiesCount';
+export { default as prepareCookieStatsComponents } from './prepareCookieStatsComponents';
+export { default as prepareFrameStatsComponent } from './prepareFrameStatsComponent';
+export { default as prepareCookieDataMapping } from './prepareCookieDataMapping';

package/dist-types/utils/noop.d.ts

@@ -0,0 +1 @@
+export declare const noop: () => void;

package/dist-types/utils/prepareCookieDataMapping.d.ts

@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+import type { CookieStatsComponents, CookiesCount, DataMapping } from '@google-psat/common';
+/**
+ * Calcualte insights about frames to be shown on cookies landing page.
+ * @param {CookiesCount} cookieStats The calculated cookie count for each type.
+ * @param {CookieStatsComponents} cookiesStatsComponents cookies statistics of curent tab with the legend data.
+ * @param selectedItemUpdater The function to update the selected item.
+ * @returns {DataMapping[]} Mapped data array for displaying the landing header.
+ */
+export default function prepareCookieDataMapping(cookieStats: CookiesCount, cookiesStatsComponents: CookieStatsComponents, selectedItemUpdater: (title: string, accessorKey?: string) => void): DataMapping[];

package/dist-types/utils/prepareCookieStatsComponents.d.ts

@@ -0,0 +1,6 @@
+/**
+ * External dependencies.
+ */
+import type { CookieStatsComponents, CookiesCount } from '@google-psat/common';
+declare const prepareCookieStatsComponents: (cookieStats: CookiesCount) => CookieStatsComponents;
+export default prepareCookieStatsComponents;

package/dist-types/utils/prepareCookiesCount.d.ts

@@ -0,0 +1,13 @@
+/**
+ * External dependencies.
+ */
+import type { CookieData, CookiesCount } from '@google-psat/common';
+/**
+ * Categorize cookies count into 1st party and 3rd party cookies and then into functional, marketing, analytics and uncategorized.
+ * @param {{ [key: string]: CookieData }} cookies Cookies of a tab.
+ * @returns CookiesCount object with the categorized cookies count.
+ */
+declare const prepareCookiesCount: (cookies: {
+    [key: string]: CookieData;
+} | null) => CookiesCount;
+export default prepareCookiesCount;

package/dist-types/utils/prepareFrameStatsComponent.d.ts

@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import type { TabCookies, TabFrames } from '@google-psat/common';
+/**
+ * Calcualte insights about frames to be shown on cookies landing page.
+ * @param tabFrames frames in current tab.
+ * @param tabCookies cookies of curent tab.
+ * @returns object
+ */
+export default function prepareFrameStatsComponent(tabFrames: TabFrames | null, tabCookies: TabCookies | null): {
+    dataMapping: {
+        title: string;
+        count: number;
+        data: {
+            count: number;
+            color: string;
+        }[];
+    }[];
+    legend: {
+        label: string;
+        descriptionKey: string;
+        count: number;
+        color: string;
+        countClassName: string;
+    }[];
+};

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@google-psat/design-system",
+  "version": "0.9.0-1",
+  "description": "A package for presentational components that are being used in multiple packages",
+  "main": "dist/index.js",
+  "types": "dist-types/index.d.ts",
+  "source": "src/index.ts",
+  "customExports": {
+    ".": {
+      "default": "./src/index.ts"
+    }
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc-watch",
+    "build:remove": "rimraf dist dist-types tsconfig.tsbuildinfo",
+    "publish:local": "npm publish --registry=http://localhost:4873",
+    "publish:remote": "npm publish --access=public --registry=https://registry.npmjs.org",
+    "unpublish:local": "npm unpublish --registry=http://localhost:4873 --force",
+    "unpublish:remote": "npm unpublish --registry=https://registry.npmjs.org --force"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/GoogleChromeLabs/ps-analysis-tool",
+    "directory": "packages/design-system"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": {
+    "name": "Google"
+  },
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/GoogleChromeLabs/ps-analysis-tool/issues"
+  },
+  "homepage": "https://github.com/GoogleChromeLabs/ps-analysis-tool",
+  "dependencies": {
+		"@google-psat/common": "*",
+		"@google-psat/i18n": "*",
+    "p-queue": "^7.3.4",
+		"use-context-selector": "^1.4.1"
+  },
+  "devDependencies": {
+  }
+}

package/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "rootDir": "src",
+    "target": "es6",
+    "module": "commonjs",
+    "outDir": "dist",
+    "declarationDir": "dist-types",
+    "composite": true,
+    "strict": true,
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "jsx": "preserve",
+    "noImplicitAny": true,
+    "strictNullChecks": true
+  },
+  "exclude": [
+    "**/tests/**/*.ts",
+    "**/tests/**/*.tsx",
+    "**/dist/**/*",
+    "**/dist-types/**/*"
+  ],
+  "references": [
+    {
+      "path": "../common"
+    }
+  ]
+}