@gooddata/sdk-ui-metric-component 0.0.0-stage → 11.65.0-alpha.4

package/esm/shared/theme/index.d.ts

@@ -0,0 +1,416 @@
+import { type CSSObject } from "tss-react";
+declare function useTheme(): {
+    fonts: {
+        main: string;
+        placeholder: string;
+    };
+    globals: {
+        font: string;
+        colors: {
+            title: string;
+            subtitle: string;
+            description: string;
+            defaultWhite: string;
+            defaultText: string;
+            defaultGreyedText: string;
+            defaultStateBlank: string;
+            defaultBorder: string;
+            defaultBorderDarker: string;
+            dropdownButton: string;
+            dropdownButtonHover: string;
+            dropdownButtonMoreHover: string;
+            dropdownHeaderBackground: string;
+            editorBackground: string;
+            editableRowHover: string;
+            line: string;
+            placeholder: string;
+            white: string;
+            border: string;
+            link: string;
+            maqlKeyword: string;
+            metric: string;
+            fact: string;
+            attribute: string;
+            dataset: string;
+            parameter: string;
+            comment: string;
+            value: string;
+            active: string;
+            negative: string;
+            negativeBackground: string;
+            warning: string;
+        };
+        spinner: CSSObject;
+        normalItemStyle: {
+            fontWeight: number;
+            fontSize: number;
+            padding: string;
+            background: string;
+            borderRadius: number;
+            outline: number;
+            height: number;
+            lineHeight: string;
+            display: string;
+        };
+        smallItemStyle: {
+            fontSize: number;
+            fontWeight: number;
+            lineHeight: string;
+            height: string;
+        };
+        metricList: {
+            itemSize: number;
+            padding: number;
+        };
+        community: {
+            color: string;
+            background: string;
+        };
+    };
+    tabs: {
+        colors: {
+            border: string;
+            active: string;
+            divider: string;
+            dirty: string;
+            background: string;
+            negative: string;
+            separator: string;
+            normal: string;
+            create: string;
+            hover: string;
+            placeholder: string;
+            arrow: string;
+            disabled: string;
+        };
+        sizes: {
+            arrowButtonWidth: number;
+            controlsDividerWidth: number;
+            controlsDividerMargin: number;
+            buttonMargin: number;
+            flag: number;
+            space: number;
+            tabsPadding: number;
+            tabLastDivider: number;
+            tabBorderRadius: number;
+        };
+        lineHeight: {
+            close: number;
+            title: number;
+        };
+        fontSize: {
+            title: number;
+        };
+    };
+    preview: {
+        colors: {
+            text: string;
+            default: string;
+            create: string;
+            hover: string;
+        };
+    };
+    minimize: {
+        boxShadow: string;
+        colors: {
+            editing: string;
+            count: string;
+            border: string;
+            divider: string;
+            background: string;
+        };
+        sizes: {
+            borderRadius: number;
+            gap: number;
+            countsMinWidth: number;
+            button: number;
+        };
+        lineHeight: {
+            text: number;
+        };
+        fontSize: {
+            text: number;
+        };
+    };
+};
+export type DefaultTheme = ReturnType<typeof useTheme>;
+export declare const makeStyles: <Params = void, RuleNameSubsetReferencableInNestedSelectors extends string = never>(params?: {
+    name?: string | Record<string, unknown> | undefined;
+    uniqId?: string | undefined;
+} | undefined) => <RuleName extends string>(cssObjectByRuleNameOrGetCssObjectByRuleName: Record<RuleName, CSSObject> | ((theme: {
+    fonts: {
+        main: string;
+        placeholder: string;
+    };
+    globals: {
+        font: string;
+        colors: {
+            title: string;
+            subtitle: string;
+            description: string;
+            defaultWhite: string;
+            defaultText: string;
+            defaultGreyedText: string;
+            defaultStateBlank: string;
+            defaultBorder: string;
+            defaultBorderDarker: string;
+            dropdownButton: string;
+            dropdownButtonHover: string;
+            dropdownButtonMoreHover: string;
+            dropdownHeaderBackground: string;
+            editorBackground: string;
+            editableRowHover: string;
+            line: string;
+            placeholder: string;
+            white: string;
+            border: string;
+            link: string;
+            maqlKeyword: string;
+            metric: string;
+            fact: string;
+            attribute: string;
+            dataset: string;
+            parameter: string;
+            comment: string;
+            value: string;
+            active: string;
+            negative: string;
+            negativeBackground: string;
+            warning: string;
+        };
+        spinner: CSSObject;
+        normalItemStyle: {
+            fontWeight: number;
+            fontSize: number;
+            padding: string;
+            background: string;
+            borderRadius: number;
+            outline: number;
+            height: number;
+            lineHeight: string;
+            display: string;
+        };
+        smallItemStyle: {
+            fontSize: number;
+            fontWeight: number;
+            lineHeight: string;
+            height: string;
+        };
+        metricList: {
+            itemSize: number;
+            padding: number;
+        };
+        community: {
+            color: string;
+            background: string;
+        };
+    };
+    tabs: {
+        colors: {
+            border: string;
+            active: string;
+            divider: string;
+            dirty: string;
+            background: string;
+            negative: string;
+            separator: string;
+            normal: string;
+            create: string;
+            hover: string;
+            placeholder: string;
+            arrow: string;
+            disabled: string;
+        };
+        sizes: {
+            arrowButtonWidth: number;
+            controlsDividerWidth: number;
+            controlsDividerMargin: number;
+            buttonMargin: number;
+            flag: number;
+            space: number;
+            tabsPadding: number;
+            tabLastDivider: number;
+            tabBorderRadius: number;
+        };
+        lineHeight: {
+            close: number;
+            title: number;
+        };
+        fontSize: {
+            title: number;
+        };
+    };
+    preview: {
+        colors: {
+            text: string;
+            default: string;
+            create: string;
+            hover: string;
+        };
+    };
+    minimize: {
+        boxShadow: string;
+        colors: {
+            editing: string;
+            count: string;
+            border: string;
+            divider: string;
+            background: string;
+        };
+        sizes: {
+            borderRadius: number;
+            gap: number;
+            countsMinWidth: number;
+            button: number;
+        };
+        lineHeight: {
+            text: number;
+        };
+        fontSize: {
+            text: number;
+        };
+    };
+}, params: Params, classes: Record<RuleNameSubsetReferencableInNestedSelectors, string>) => Record<RuleName | RuleNameSubsetReferencableInNestedSelectors, CSSObject>)) => (params: Params, muiStyleOverridesParams?: {
+    props: Record<string, unknown>;
+    ownerState?: Record<string, unknown>;
+} | undefined) => {
+    classes: Record<RuleName, string>;
+    theme: {
+        fonts: {
+            main: string;
+            placeholder: string;
+        };
+        globals: {
+            font: string;
+            colors: {
+                title: string;
+                subtitle: string;
+                description: string;
+                defaultWhite: string;
+                defaultText: string;
+                defaultGreyedText: string;
+                defaultStateBlank: string;
+                defaultBorder: string;
+                defaultBorderDarker: string;
+                dropdownButton: string;
+                dropdownButtonHover: string;
+                dropdownButtonMoreHover: string;
+                dropdownHeaderBackground: string;
+                editorBackground: string;
+                editableRowHover: string;
+                line: string;
+                placeholder: string;
+                white: string;
+                border: string;
+                link: string;
+                maqlKeyword: string;
+                metric: string;
+                fact: string;
+                attribute: string;
+                dataset: string;
+                parameter: string;
+                comment: string;
+                value: string;
+                active: string;
+                negative: string;
+                negativeBackground: string;
+                warning: string;
+            };
+            spinner: CSSObject;
+            normalItemStyle: {
+                fontWeight: number;
+                fontSize: number;
+                padding: string;
+                background: string;
+                borderRadius: number;
+                outline: number;
+                height: number;
+                lineHeight: string;
+                display: string;
+            };
+            smallItemStyle: {
+                fontSize: number;
+                fontWeight: number;
+                lineHeight: string;
+                height: string;
+            };
+            metricList: {
+                itemSize: number;
+                padding: number;
+            };
+            community: {
+                color: string;
+                background: string;
+            };
+        };
+        tabs: {
+            colors: {
+                border: string;
+                active: string;
+                divider: string;
+                dirty: string;
+                background: string;
+                negative: string;
+                separator: string;
+                normal: string;
+                create: string;
+                hover: string;
+                placeholder: string;
+                arrow: string;
+                disabled: string;
+            };
+            sizes: {
+                arrowButtonWidth: number;
+                controlsDividerWidth: number;
+                controlsDividerMargin: number;
+                buttonMargin: number;
+                flag: number;
+                space: number;
+                tabsPadding: number;
+                tabLastDivider: number;
+                tabBorderRadius: number;
+            };
+            lineHeight: {
+                close: number;
+                title: number;
+            };
+            fontSize: {
+                title: number;
+            };
+        };
+        preview: {
+            colors: {
+                text: string;
+                default: string;
+                create: string;
+                hover: string;
+            };
+        };
+        minimize: {
+            boxShadow: string;
+            colors: {
+                editing: string;
+                count: string;
+                border: string;
+                divider: string;
+                background: string;
+            };
+            sizes: {
+                borderRadius: number;
+                gap: number;
+                countsMinWidth: number;
+                button: number;
+            };
+            lineHeight: {
+                text: number;
+            };
+            fontSize: {
+                text: number;
+            };
+        };
+    };
+    css: import("tss-react").Css;
+    cx: import("tss-react").Cx;
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

package/esm/shared/theme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shared/theme/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAoB,MAAM,WAAW,CAAC;AAE7D,iBAAS,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAuJL,gBAAgB;YAChB,oBAAoB;YACpB,qBAAqB;YACrB,YAAY;YACZ,IAAI;YACJ,KAAK;YACL,WAAW;YACX,cAAc;YACd,eAAe;;;YAGf,KAAK;YACL,KAAK;;;YAGL,KAAK;;;;;;;;;;;;;;;;;;;;;YAcL,YAAY;YACZ,GAAG;YACH,cAAc;YACd,MAAM;;;YAGN,IAAI;;;YAGJ,IAAI;;;EAWf;AAED,MAAM,MAAM,YAAY,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AACvD,eAAO,MAAQ,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YApDb,gBAAgB;YAChB,oBAAoB;YACpB,qBAAqB;YACrB,YAAY;YACZ,IAAI;YACJ,KAAK;YACL,WAAW;YACX,cAAc;YACd,eAAe;;;YAGf,KAAK;YACL,KAAK;;;YAGL,KAAK;;;;;;;;;;;;;;;;;;;;;YAcL,YAAY;YACZ,GAAG;YACH,cAAc;YACd,MAAM;;;YAGN,IAAI;;;YAGJ,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAc4C,CAAC"}

package/esm/shared/theme/index.js

@@ -0,0 +1,193 @@
+// (C) 2021-2026 GoodData Corporation
+import { createMakeStyles } from "tss-react";
+function useTheme() {
+    const defaultWhite = "#FFFFFF";
+    const defaultText = "#464e56";
+    const defaultBorder = "#dde4eb";
+    const defaultBorderDarker = "#CCD8E2";
+    const defaultSeparator = "#DEE4EA";
+    const defaultStateBlank = "#94a1ad";
+    const defaultGreyedText = "#6a737d";
+    const editorBackground = "#fcfcfd";
+    const description = "#6a737d";
+    const line = "#e3eaf0";
+    const dropdownButton = "#94a1ad";
+    const dropdownButtonHover = "#464e56";
+    const dropdownButtonMoreHover = "#dadfe6";
+    const dropdownHeaderBackground = "#EBEFF4";
+    const editableRowHover = "#d5dfe7";
+    const placeholder = "#94a1ad";
+    const maqlKeyword = "#7364cf";
+    const metric = "#00A67D";
+    const fact = "#00A67D";
+    const attribute = "#DB7900";
+    const dataset = "#952F8E";
+    const parameter = "#94A1AD";
+    const comment = "#94A1AD";
+    const value = "#D95791";
+    const active = "#05A2D2";
+    const dirty = "#4FB0DD";
+    const tabContrast = "#14B2E2";
+    const negative = "#e54d42";
+    const warning = "#e17b1a";
+    const title = "#96A1AC";
+    const minimizedEditingTitle = "#6a737d";
+    const subtitle = "#687581";
+    const communityColor = "#14B2E2";
+    const communityBackground = "rgba(20,178,226,0.3)";
+    const disabled = "#B0BECA";
+    const createHover = "#129CC6";
+    const negativeBackground = "#fff3f2";
+    const spinner = {
+        position: "absolute",
+        left: 0,
+        top: 0,
+        right: 0,
+        bottom: 0,
+    };
+    const fonts = {
+        main: `gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;`,
+        placeholder: "monospace",
+    };
+    const normalItemStyle = {
+        fontWeight: 700,
+        fontSize: 20,
+        padding: "3px 4px",
+        background: "transparent",
+        borderRadius: 0,
+        outline: 0,
+        height: 32,
+        lineHeight: "26px",
+        display: "block",
+    };
+    const smallItemStyle = {
+        fontSize: 14,
+        fontWeight: 400,
+        lineHeight: "21px",
+        height: "auto",
+    };
+    const metricList = {
+        itemSize: 43,
+        padding: 15,
+    };
+    const community = {
+        color: communityColor,
+        background: communityBackground,
+    };
+    const globals = {
+        font: fonts.main,
+        colors: {
+            title,
+            subtitle,
+            description,
+            defaultWhite,
+            defaultText,
+            defaultGreyedText,
+            defaultStateBlank,
+            defaultBorder,
+            defaultBorderDarker,
+            dropdownButton,
+            dropdownButtonHover,
+            dropdownButtonMoreHover,
+            dropdownHeaderBackground,
+            editorBackground,
+            editableRowHover,
+            line,
+            placeholder,
+            white: `var(--gd-palette-complementary-0, ${defaultWhite})`,
+            border: `var(--gd-palette-complementary-3, ${defaultBorder})`,
+            link: "var(--gd-palette-complementary-7)",
+            //tokens
+            maqlKeyword,
+            metric,
+            fact,
+            attribute,
+            dataset,
+            parameter,
+            comment,
+            value,
+            active,
+            negative,
+            negativeBackground,
+            warning,
+        },
+        spinner,
+        normalItemStyle,
+        smallItemStyle,
+        metricList,
+        community,
+    };
+    const preview = {
+        colors: {
+            text: defaultText,
+            default: defaultStateBlank,
+            create: tabContrast,
+            hover: createHover,
+        },
+    };
+    const tabs = {
+        colors: {
+            border: defaultBorderDarker,
+            active: active,
+            divider: line,
+            dirty: dirty,
+            background: defaultWhite,
+            negative: negative,
+            separator: defaultSeparator,
+            normal: subtitle,
+            create: tabContrast,
+            hover: createHover,
+            placeholder,
+            arrow: defaultStateBlank,
+            disabled,
+        },
+        sizes: {
+            arrowButtonWidth: 30,
+            controlsDividerWidth: 1,
+            controlsDividerMargin: 6,
+            buttonMargin: 8,
+            flag: 5,
+            space: 8,
+            tabsPadding: 5,
+            tabLastDivider: 3,
+            tabBorderRadius: 4,
+        },
+        lineHeight: {
+            close: 12,
+            title: 23,
+        },
+        fontSize: {
+            title: 12,
+        },
+    };
+    const minimize = {
+        boxShadow: `0px 2px 10px rgba(0, 0, 0, 0.1)`,
+        colors: {
+            editing: minimizedEditingTitle,
+            count: subtitle,
+            border: defaultBorderDarker,
+            divider: line,
+            background: defaultWhite,
+        },
+        sizes: {
+            borderRadius: 4,
+            gap: 9,
+            countsMinWidth: 60,
+            button: 24,
+        },
+        lineHeight: {
+            text: 23,
+        },
+        fontSize: {
+            text: 12,
+        },
+    };
+    return {
+        fonts,
+        globals,
+        tabs,
+        preview,
+        minimize,
+    };
+}
+export const { makeStyles } = createMakeStyles({ useTheme });

package/esm/tests/render.test.utils.d.ts

@@ -0,0 +1,9 @@
+import { type ReactElement } from "react";
+export declare function mountWithIntlApp(node: ReactElement): unknown;
+export declare function mountWithIntlComponentInCustomContainer(node: ReactElement): {
+    container: HTMLElement;
+};
+export declare function mountWithIntlComponent(node: ReactElement): {
+    container: HTMLElement;
+};
+//# sourceMappingURL=render.test.utils.d.ts.map

package/esm/tests/render.test.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.test.utils.d.ts","sourceRoot":"","sources":["../../src/tests/render.test.utils.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAQ1C,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAM5D;AACD,wBAAgB,uCAAuC,CAAC,IAAI,EAAE,YAAY,GAAG;IACzE,SAAS,EAAE,WAAW,CAAC;CAC1B,CAYA;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,YAAY,GAAG;IAAE,SAAS,EAAE,WAAW,CAAA;CAAE,CAMrF"}

package/esm/tests/render.test.utils.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from "@testing-library/react";
+import { IntlProvider } from "react-intl";
+import { IntlWrapper } from "../translations/IntlWrapper.js";
+import { DEFAULT_LANGUAGE, DEFAULT_MESSAGES } from "../translations/translations.js";
+export function mountWithIntlApp(node) {
+    return render(_jsx(IntlProvider, { messages: DEFAULT_MESSAGES[DEFAULT_LANGUAGE], locale: DEFAULT_LANGUAGE, children: node }));
+}
+export function mountWithIntlComponentInCustomContainer(node) {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    return render(_jsx(IntlProvider, { locale: DEFAULT_LANGUAGE, defaultLocale: DEFAULT_LANGUAGE, messages: {}, children: _jsx(IntlWrapper, { locale: DEFAULT_LANGUAGE, children: node }) }), {
+        container,
+    });
+}
+export function mountWithIntlComponent(node) {
+    return render(_jsx(IntlProvider, { locale: DEFAULT_LANGUAGE, defaultLocale: DEFAULT_LANGUAGE, messages: {}, children: _jsx(IntlWrapper, { locale: DEFAULT_LANGUAGE, children: node }) }));
+}

package/esm/translations/IntlWrapper.d.ts

@@ -0,0 +1,9 @@
+import { type PropsWithChildren } from "react";
+export interface ITranslations {
+    [key: string]: string;
+}
+export interface IIntlWrapperProps {
+    locale?: string;
+}
+export declare function IntlWrapper({ locale, children }: PropsWithChildren<IIntlWrapperProps>): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=IntlWrapper.d.ts.map

package/esm/translations/IntlWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IntlWrapper.d.ts","sourceRoot":"","sources":["../../src/translations/IntlWrapper.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAQ/C,MAAM,WAAW,aAAa;IAC1B,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,iBAAiB;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,WAAW,CAAC,EAAE,MAAyB,EAAE,QAAQ,EAAE,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,kDAWxG"}

package/esm/translations/IntlWrapper.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IntlProvider } from "react-intl";
+import { resolveLocale, useResolveMessages } from "@gooddata/sdk-ui";
+import { DEFAULT_LANGUAGE, DEFAULT_MESSAGES, resolveMessages } from "./translations.js";
+export function IntlWrapper({ locale = DEFAULT_LANGUAGE, children }) {
+    const messages = useResolveMessages(resolveLocale(locale), resolveMessages, DEFAULT_MESSAGES);
+    if (!messages[locale]) {
+        return null;
+    }
+    return (_jsx(IntlProvider, { locale: locale, messages: messages[locale], children: children }));
+}