@scality/core-ui 0.115.0

package/dist/components/vegachart/VegaChart.component.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-nocheck
+import { useEffect, useContext, useRef } from 'react';
+import vegaEmbed from 'vega-embed';
+import { ThemeContext, createGlobalStyle } from 'styled-components';
+import { getThemePropSelector } from '../../utils';
+export const TOP = 'top';
+export const BOTTOM = 'bottom';
+/* How to theme tooltip:
+https://github.com/vega/vega-tooltip/blob/master/docs/customizing_your_tooltip.md
+*/
+const VegaTooltipTheme = createGlobalStyle `
+  #vg-tooltip-element.vg-tooltip.custom-theme {
+    padding: 8px;
+    position: fixed;
+    z-index: 1000;
+    font-family: 'Lato';
+    font-size: 12px;
+    border-radius: 3px;
+    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+    color: ${getThemePropSelector('textPrimary')};
+    background-color: ${getThemePropSelector('backgroundLevel1')};
+    border: 1px solid ${getThemePropSelector('border')};
+    // customize the title
+    h2 {
+      color: ${getThemePropSelector('textSecondary')};
+      margin-bottom: 10px;
+      font-size: 12px;
+    }
+  }
+`;
+function VegaChart({ id, spec, tooltipPosition = BOTTOM, theme = 'custom', }) {
+    const themeContext = useContext(ThemeContext);
+    const currentBackgroundColor = themeContext && themeContext.brand
+        ? themeContext.brand.backgroundLevel4
+        : themeContext.backgroundLevel4;
+    // the background color of the view
+    const currentBackgroundColor2 = themeContext && themeContext.brand
+        ? themeContext.brand.backgroundLevel1
+        : themeContext.backgroundLevel1;
+    const brandText = themeContext && themeContext.brand
+        ? themeContext.brand.textPrimary
+        : themeContext.textPrimary;
+    const themeConfig = {
+        config: {
+            background: currentBackgroundColor,
+            axis: {
+                labelColor: brandText,
+                titleColor: brandText,
+                grid: false,
+                domainColor: currentBackgroundColor2,
+            },
+            title: {
+                color: brandText,
+                font: 'Lato',
+            },
+            view: {
+                stroke: 'transparent',
+                fill: currentBackgroundColor2,
+            },
+            // the headers provide a title and labels for faceted plots.
+            header: {
+                labelColor: brandText,
+            },
+            // the label of max/min
+            text: {
+                color: brandText,
+                font: 'Lato',
+            },
+            // the up, bottom trend line and verticle line when hover
+            rule: {
+                color: brandText,
+            },
+            legend: {
+                labelColor: brandText,
+                titleColor: brandText,
+            },
+        },
+    };
+    const themedSpec = { ...spec, ...themeConfig };
+    const vegaInstance = useRef();
+    let tooltipOptions = {
+        theme: theme,
+    };
+    if (tooltipPosition === TOP) {
+        tooltipOptions = {
+            theme: theme,
+            offsetX: -85,
+            offsetY: -140,
+        };
+    }
+    useEffect(() => {
+        let isMounted = true;
+        vegaEmbed(`#${id}`, themedSpec, {
+            renderer: 'svg',
+            // Override the DEFAULT_OPTIONS https://github.com/vega/vega-tooltip/blob/master/src/defaults.ts
+            tooltip: tooltipOptions,
+            /* Determines if action links
+            ("Export as PNG/SVG", "View Source", "View Vega" (only for Vega-Lite), "Open in Vega Editor") are included with the embedded view.
+            If the value is true, all action links will be shown and none if the value is false. */
+            actions: false,
+        })
+            .then((result) => {
+            vegaInstance.current = result; // result.view contains the Vega view
+        })
+            .catch((...args) => {
+            if (isMounted) {
+                console.error(...args); // TODO: we should handle this with a retry or an error state of the component
+            }
+        });
+        return () => {
+            isMounted = false;
+            if (vegaInstance.current) {
+                vegaInstance.current.view.finalize();
+            }
+        };
+    }, [id, themedSpec, tooltipOptions, vegaInstance]);
+    return (_jsx("div", { id: id, className: "sc-vegachart", children: _jsx(VegaTooltipTheme, {}) }));
+}
+export { VegaChart };

package/dist/components/vegachartv2/SyncedCursorCharts.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export declare const SyncedCursorChartsContext: React.Context<{
+    cursorX: number;
+    setCursorX: (cursorX: number) => void;
+} | null>;
+export declare const useCursorX: () => {
+    cursorX: number;
+    setCursorX: (cursorX: number) => void;
+} | null;
+export declare function SyncedCursorCharts({ children }: {
+    children: JSX.Element;
+}): JSX.Element;
+//# sourceMappingURL=SyncedCursorCharts.d.ts.map

package/dist/components/vegachartv2/SyncedCursorCharts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SyncedCursorCharts.d.ts","sourceRoot":"","sources":["../../../src/lib/components/vegachartv2/SyncedCursorCharts.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8C,MAAM,OAAO,CAAC;AACnE,eAAO,MAAM,yBAAyB;aAC3B,MAAM;0BACO,MAAM,KAAK,IAAI;SACxB,CAAC;AAChB,eAAO,MAAM,UAAU;aACZ,MAAM;0BACO,MAAM,KAAK,IAAI;QAStC,CAAC;AACF,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAA;CAAE,eAYzE"}

package/dist/components/vegachartv2/SyncedCursorCharts.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, createContext, useContext } from 'react';
+export const SyncedCursorChartsContext = createContext(null);
+export const useCursorX = () => {
+    const contextValue = useContext(SyncedCursorChartsContext);
+    if (contextValue === null) {
+        console.error("Can't use useCursorX() outside SyncedCursorCharts");
+    }
+    return contextValue;
+};
+export function SyncedCursorCharts({ children }) {
+    const [cursorX, setCursorX] = useState(0);
+    return (_jsx(SyncedCursorChartsContext.Provider, { value: {
+            cursorX,
+            setCursorX,
+        }, children: children }));
+}

package/dist/components/vegachartv2/VegaChartV2.component.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import * as vega from 'vega';
+export declare const TOP = "top";
+export declare const BOTTOM = "bottom";
+type Position = typeof TOP | typeof BOTTOM;
+type Props = {
+    spec: Record<string, any>;
+    tooltipPosition?: Position;
+    theme?: 'light' | 'dark' | 'custom';
+    id?: string;
+    onHover?: (dataPoint: any) => void;
+    formatTooltip?: (value: any, valueToHtml: (value: any) => string, maxDepth: number) => string;
+};
+export declare const VegaChart: React.ForwardRefExoticComponent<Props & React.RefAttributes<typeof vega.View>>;
+export {};
+//# sourceMappingURL=VegaChartV2.component.d.ts.map

package/dist/components/vegachartv2/VegaChartV2.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VegaChartV2.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/vegachartv2/VegaChartV2.component.tsx"],"names":[],"mappings":"AACA,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,IAAI,MAAM,MAAM,CAAC;AAM7B,eAAO,MAAM,GAAG,QAAQ,CAAC;AACzB,eAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,KAAK,QAAQ,GAAG,OAAO,GAAG,GAAG,OAAO,MAAM,CAAC;AAC3C,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC1B,eAAe,CAAC,EAAE,QAAQ,CAAC;IAC3B,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IACpC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,GAAG,KAAK,IAAI,CAAC;IACnC,aAAa,CAAC,EAAE,CACd,KAAK,EAAE,GAAG,EACV,WAAW,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,MAAM,EACnC,QAAQ,EAAE,MAAM,KACb,MAAM,CAAC;CACb,CAAC;AA0PF,eAAO,MAAM,SAAS,gFAAsC,CAAC"}

package/dist/components/vegachartv2/VegaChartV2.component.js

@@ -0,0 +1,216 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-nocheck
+import React, { useEffect, useContext, useRef, useLayoutEffect, useMemo, } from 'react';
+import * as vega from 'vega';
+import vegaEmbed from 'vega-embed';
+import { ThemeContext, createGlobalStyle } from 'styled-components';
+import { getThemePropSelector } from '../../utils';
+import { useCursorX, SyncedCursorChartsContext } from './SyncedCursorCharts';
+import { TooltipHandlerWithPaint } from '../linetemporalchart/tooltip';
+export const TOP = 'top';
+export const BOTTOM = 'bottom';
+/* How to theme tooltip:
+https://github.com/vega/vega-tooltip/blob/master/docs/customizing_your_tooltip.md
+*/
+const VegaTooltipTheme = createGlobalStyle `
+  #vg-tooltip-element.vg-tooltip.custom-theme {
+    padding: 8px;
+    position: fixed;
+    z-index: 1000;
+    width: calc(100vw/6);
+    font-family: 'Lato';
+    font-size: 12px;
+    border-radius: 3px;
+    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+    color: ${getThemePropSelector('textPrimary')};
+    background-color: ${getThemePropSelector('backgroundLevel1')};
+    border: 1px solid ${getThemePropSelector('border')};
+    // customize the title
+    h2 {
+      color: ${getThemePropSelector('textPrimary')};
+      margin-bottom: 10px;
+      font-size: 12px;
+    }
+    table {
+      width: 100%;
+    }
+    table tr td.key {
+      color: ${getThemePropSelector('textSecondary')};
+    }
+  }
+`;
+function VegaChartInternal({ spec, tooltipPosition = BOTTOM, theme = 'custom', formatTooltip, onHover, }, ref) {
+    // $FlowFixMe
+    const { cursorX, setCursorX } = useCursorX();
+    const themeContext = useContext(ThemeContext);
+    // the background color of the view
+    const seriesBackgroundColor = themeContext && themeContext.brand
+        ? themeContext.brand.backgroundLevel1
+        : themeContext.backgroundLevel1;
+    const brandText = themeContext && themeContext.brand
+        ? themeContext.brand.textPrimary
+        : themeContext.textPrimary;
+    const themeConfig = {
+        config: {
+            background: 'transparent',
+            axis: {
+                labelColor: brandText,
+                titleColor: brandText,
+                grid: false,
+                domainColor: 'transparent',
+            },
+            title: {
+                color: brandText,
+                font: 'Lato',
+            },
+            view: {
+                stroke: 'transparent',
+                fill: seriesBackgroundColor,
+            },
+            // the headers provide a title and labels for faceted plots.
+            header: {
+                labelColor: brandText,
+            },
+            // the label of max/min
+            text: {
+                color: brandText,
+                font: 'Lato',
+            },
+        },
+    };
+    const themedSpec = { ...spec, ...themeConfig };
+    const vegaInstance = useRef();
+    const vegaDOMInstance = useRef(null);
+    let tooltipOptions = {
+        theme: theme,
+        formatTooltip: formatTooltip,
+    };
+    if (tooltipPosition === TOP) {
+        tooltipOptions = {
+            theme: theme,
+            offsetX: -85,
+            offsetY: -140,
+            formatTooltip: formatTooltip,
+        };
+    }
+    const tooltipHandler = useMemo(() => new TooltipHandlerWithPaint(tooltipOptions, onHover), [theme]);
+    /*
+    useEffect() and useEffectLayout():
+    The first effect will only render once, to initalize the chart and add the event lisener.
+     The second useEffectLayout is in charge of updating the chart when the `themedSpec` or `tooltipOptions` get updated.
+    Note it's important to useEffectLayout for the performance.
+     */
+    useEffect(() => {
+        let isMounted = true;
+        // embed(el, spec[, opt]) the el can be a DOM element or CSS selector. https://github.com/vega/vega-embed
+        vegaDOMInstance &&
+            vegaDOMInstance.current &&
+            vegaEmbed(vegaDOMInstance.current, themedSpec, {
+                renderer: 'svg',
+                // Override the DEFAULT_OPTIONS https://github.com/vega/vega-tooltip/blob/master/src/defaults.ts
+                tooltip: tooltipHandler.call,
+                /* Determines if action links
+              ("Export as PNG/SVG", "View Source", "View Vega" (only for Vega-Lite), "Open in Vega Editor") are included with the embedded view.
+              If the value is true, all action links will be shown and none if the value is false. */
+                actions: false,
+            })
+                .then((result) => {
+                vegaInstance.current = result;
+                // result.view contains the Vega view
+                // get the current state of view: result.view.getState()
+                const view = result.view;
+                if (ref) {
+                    ref.current = view;
+                }
+                if (SyncedCursorChartsContext && view) {
+                    view.addEventListener('mouseover', function (event, item) {
+                        const currentTime = item &&
+                            item.datum &&
+                            item.datum.datum &&
+                            item.datum.datum.timestamp;
+                        if (currentTime) {
+                            setCursorX(currentTime);
+                        }
+                    });
+                    /*When the mouse leaves the chart area, set the cursorX to null*/
+                    view.addEventListener('mouseleave', function (event, item) {
+                        setCursorX(0);
+                    });
+                }
+            })
+                .catch((...args) => {
+                if (isMounted) {
+                    console.error(...args); // TODO: we should handle this with a retry or an error state of the component
+                }
+            });
+        return () => {
+            isMounted = false;
+            if (vegaInstance.current) {
+                vegaInstance.current.view.finalize();
+            }
+        }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [vegaDOMInstance]);
+    useLayoutEffect(() => {
+        if (vegaInstance.current) {
+            const view = vegaInstance.current.view;
+            tooltipHandler.options.formatTooltip = formatTooltip;
+            tooltipHandler.onHover = onHover;
+            view.tooltip(tooltipHandler.call).run();
+            tooltipHandler.paint(); // to repaint the tooltip
+        }
+    }, [formatTooltip, vegaInstance, onHover]);
+    useLayoutEffect(() => {
+        if (vegaInstance.current) {
+            const view = vegaInstance.current.view;
+            let changeset = vega
+                .changeset()
+                .remove(() => true)
+                .insert(themedSpec.data.values);
+            //only the data.values changes trigger the graph's repaint
+            // For some reason source_0 is the default dataset name
+            view
+                .change('source_0', changeset)
+                .runAsync()
+                .then(() => {
+                // call resize() after the data is loaded to make sure the width is set correctly.
+                view.resize().runAsync();
+            });
+        } // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        // eslint-disable-next-line
+        JSON.stringify(themedSpec.data.values),
+        vegaInstance,
+    ]);
+    useLayoutEffect(() => {
+        if (vegaInstance.current && themedSpec.params) {
+            const view = vegaInstance.current.view;
+            // when the mouse go out, we trigger the event to set cursorX to null
+            if (!themedSpec.params.find((param) => param.name === 'cursorX').value ||
+                !cursorX) {
+                view
+                    .signal('cursorX', (themedSpec &&
+                    themedSpec.data &&
+                    themedSpec.data.values &&
+                    themedSpec.data.values[0] &&
+                    themedSpec.data.values[0].timestamp) ||
+                    Date.now())
+                    .run();
+                view.signal('isCursorDisplayed', false).run();
+            }
+            else {
+                view
+                    .signal('cursorX', themedSpec.params.find((param) => param.name === 'cursorX').value)
+                    .run();
+                view.signal('isCursorDisplayed', true).run();
+            }
+        } // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        // eslint-disable-next-line
+        JSON.stringify(themedSpec),
+        vegaInstance,
+    ]);
+    return (_jsx("div", { className: "sc-vegachart", ref: vegaDOMInstance, style: {
+            width: '100%',
+        }, children: _jsx(VegaTooltipTheme, {}) }));
+} // @ts-expect-error
+export const VegaChart = React.forwardRef(VegaChartInternal);

package/dist/hooks.d.ts

@@ -0,0 +1,2 @@
+export declare function useMemoCompare<T>(next: T, compare: (previous: T | null, next: T) => boolean): T | null;
+//# sourceMappingURL=hooks.d.ts.map

package/dist/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../src/lib/hooks.ts"],"names":[],"mappings":"AAEA,wBAAgB,cAAc,CAAC,CAAC,EAC9B,IAAI,EAAE,CAAC,EACP,OAAO,EAAE,CAAC,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,IAAI,EAAE,CAAC,KAAK,OAAO,YAqBlD"}

package/dist/hooks.js

@@ -0,0 +1,19 @@
+import { useEffect, useRef } from 'react';
+export function useMemoCompare(next, compare) {
+    // Ref for storing previous value
+    const previousRef = useRef(null);
+    const previous = previousRef.current;
+    // Pass previous and next value to compare function
+    // to determine whether to consider them equal.
+    const isEqual = compare(previous, next);
+    // If not equal update previousRef to next value.
+    // We only update if not equal so that this hook continues to return
+    // the same old value if compare keeps returning true.
+    useEffect(() => {
+        if (!isEqual) {
+            previousRef.current = next;
+        }
+    });
+    // Finally, if equal then return the previous value
+    return isEqual ? previous : next;
+}

package/dist/icons/branding.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+declare const Logo: () => JSX.Element;
+export { Logo };
+//# sourceMappingURL=branding.d.ts.map

package/dist/icons/branding.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"branding.d.ts","sourceRoot":"","sources":["../../src/lib/icons/branding.tsx"],"names":[],"mappings":";AAEA,QAAA,MAAM,IAAI,mBAkDT,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/icons/branding.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Logo = () => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "186", height: "49", viewBox: "0 0 186 49", children: [_jsx("path", { fill: "#fff", d: "M72.23 18.19c0-2.03-1.18-3.18-4.53-3.18-3.35 0-4.53 1.15-4.53 3.18v.71c0 1.68 1.09 2.21 1.9 2.47l6.98 2.57c2.27.88 4.17 2.29 4.17 5.04v3.09c0 3.09-2.27 5.75-8.61 5.75-6.43 0-8.61-2.66-8.61-5.75v-2.03c0-.53.27-.71.82-.71h2.26c.45 0 .64.18.64.71v1.68c0 2.03 1.45 3.18 4.89 3.18 3.44 0 4.89-1.15 4.89-3.18v-1.77c0-1.86-1.72-2.48-3.17-3.1l-6.43-2.38a4.98 4.98 0 0 1-3.36-4.6v-2.12c0-3.1 2-5.75 8.16-5.75 6.25 0 8.25 2.65 8.25 5.75v1.68c0 .44-.18.7-.64.7h-2.26c-.55 0-.82-.17-.82-.7zM97.04 32.16c0 3.09-1.91 5.75-8.52 5.75-6.62 0-8.52-2.66-8.52-5.75V17.75c0-3.1 1.9-5.75 8.52-5.75 6.61 0 8.52 2.65 8.52 5.75v1.85c0 .53-.18.71-.73.71h-2.17c-.55 0-.82-.18-.82-.71v-1.23c0-2.04-1.36-3.28-4.8-3.28-3.44 0-4.8 1.24-4.8 3.28v13.26c0 2.03 1.36 3.27 4.8 3.27 3.44 0 4.8-1.24 4.8-3.27v-1.77c0-.44.27-.71.82-.71h2.17c.46 0 .73.27.73.71zM125.81 34.28h9.78c.46 0 .82.18.82.71v1.68c0 .53-.36.71-.82.71h-12.96c-.45 0-.63-.27-.63-.71V12.8c0-.53.18-.8.73-.8h2.35c.45 0 .73.27.73.8zM164.58 12c.46 0 .64.18.64.71v1.68c0 .53-.09.7-.64.7h-5.98v21.58c0 .53-.27.71-.81.71h-2.36c-.45 0-.81-.27-.81-.71V15.09h-5.99c-.54 0-.63-.17-.63-.7v-1.68c0-.53.09-.71.63-.71z" }), _jsx("path", { fill: "#fff", d: "M72.23 18.19c0-2.03-1.18-3.18-4.53-3.18-3.35 0-4.53 1.15-4.53 3.18v.71c0 1.68 1.09 2.21 1.9 2.47l6.98 2.57c2.27.88 4.17 2.29 4.17 5.04v3.09c0 3.09-2.27 5.75-8.61 5.75-6.43 0-8.61-2.66-8.61-5.75v-2.03c0-.53.27-.71.82-.71h2.26c.45 0 .64.18.64.71v1.68c0 2.03 1.45 3.18 4.89 3.18 3.44 0 4.89-1.15 4.89-3.18v-1.77c0-1.86-1.72-2.48-3.17-3.1l-6.43-2.38a4.98 4.98 0 0 1-3.36-4.6v-2.12c0-3.1 2-5.75 8.16-5.75 6.25 0 8.25 2.65 8.25 5.75v1.68c0 .44-.18.7-.64.7h-2.26c-.55 0-.82-.17-.82-.7zM97.04 32.16c0 3.09-1.91 5.75-8.52 5.75-6.62 0-8.52-2.66-8.52-5.75V17.75c0-3.1 1.9-5.75 8.52-5.75 6.61 0 8.52 2.65 8.52 5.75v1.85c0 .53-.18.71-.73.71h-2.17c-.55 0-.82-.18-.82-.71v-1.23c0-2.04-1.36-3.28-4.8-3.28-3.44 0-4.8 1.24-4.8 3.28v13.26c0 2.03 1.36 3.27 4.8 3.27 3.44 0 4.8-1.24 4.8-3.27v-1.77c0-.44.27-.71.82-.71h2.17c.46 0 .73.27.73.71zM125.81 34.28h9.78c.46 0 .82.18.82.71v1.68c0 .53-.36.71-.82.71h-12.96c-.45 0-.63-.27-.63-.71V12.8c0-.53.18-.8.73-.8h2.35c.45 0 .73.27.73.8zM143.72 36.67c0 .53-.19.71-.73.71h-2.36c-.45 0-.63-.27-.63-.71V12.8c0-.53.09-.8.63-.8h2.36c.54 0 .73.27.73.8zM164.58 12c.46 0 .64.18.64.71v1.68c0 .53-.09.7-.64.7h-5.98v21.58c0 .53-.27.71-.81.71h-2.36c-.45 0-.81-.27-.81-.71V15.09h-5.99c-.54 0-.63-.17-.63-.7v-1.68c0-.53.09-.71.63-.71zM175.53 23.76l5.71-11.05c.18-.36.36-.71.82-.71h2.35c.55 0 .82.27.55.71l-7.53 14.59v9.37c0 .44-.18.71-.72.71h-2.36c-.54 0-.63-.27-.63-.71V27.3l-7.61-14.59c-.28-.44 0-.71.54-.71h2.27c.54 0 .63.27.9.71zM110.76 12c.45 0 .73.27.91.71l7.43 23.96c.18.44 0 .71-.54.71h-2.45c-.45 0-.73-.27-.82-.71l-1.72-5.75h-7.97l-1.73 5.75c-.09.44-.36.71-.81.71h-2.45c-.54 0-.72-.27-.54-.71l7.43-23.96c.18-.44.45-.71.91-.71zm-1.18 5.48l-3.17 10.61h6.25z" }), _jsx("path", { fill: "#3d9bd6", d: "M21.25 4.42v7.25h3.99V4.33l5.16 2.92 2-3.36L27.14.97A7.7 7.7 0 0 0 23.15 0c-1.36 0-2.72.35-3.89 1.06L14 3.98l1.99 3.36z" }), _jsx("path", { fill: "#007664", d: "M21.25 4.42v7.25h3.99V4.33l5.16 2.92 2-3.36L27.14.97A7.7 7.7 0 0 0 23.15 0c-1.36 0-2.72.35-3.89 1.06L14 3.98l1.99 3.36z" }), _jsx("path", { fill: "#ee4642", d: "M21.16 44.25V37h3.99v7.25l5.16-2.92 2 3.36-5.17 2.92a7.9 7.9 0 0 1-7.88 0L14 44.69l1.99-3.36z" }), _jsx("path", { fill: "#2aad8e", d: "M40.43 13.28L34 16.9l1.99 3.36 6.44-3.62v5.83h3.99v-5.92c0-1.33-.37-2.65-1.09-3.8a8.82 8.82 0 0 0-2.9-2.83L37.17 7l-1.99 3.36z" }), _jsx("path", { fill: "#d71d4f", d: "M4.99 32.84l6.43-3.63 2 3.36-6.44 3.63 5.17 2.91-2 3.36-5.25-2.92a7.6 7.6 0 0 1-2.81-2.82A7.1 7.1 0 0 1 1 32.92V27h3.99z" }), _jsx("path", { fill: "#9e2569", d: "M4.08 16.64l6.43 3.62 2-3.36-6.44-3.62 5.17-2.92-2-3.36-5.25 2.92a8.72 8.72 0 0 0-2.9 2.83A7.16 7.16 0 0 0 0 16.64v5.92h3.99z" }), _jsx("path", { fill: "#f79836", d: "M40.34 36.2L34 32.57l1.99-3.36 6.44 3.63V27h3.99v5.92c0 1.33-.37 2.57-1.09 3.81a8.69 8.69 0 0 1-2.9 2.82l-5.26 2.92-1.99-3.36z" }), _jsx("path", { fill: "#007664", d: "M24 15v8.22l7.34-4.06z" }), _jsx("path", { fill: "#9e2569", d: "M23.25 15L16 19.16l7.25 4.06z" }), _jsx("path", { fill: "#d71d4f", d: "M22.25 25.07L15 21v8.13z" }), _jsx("path", { fill: "#2aad8e", d: "M24 24.98l7.25 4.07V21z" }), _jsx("path", { fill: "#ee4642", d: "M23.16 26L16 30.07l7.16 4.15z" }), _jsx("path", { fill: "#f79836", d: "M24 26v8.22l7.25-4.15z" })] }));
+export { Logo };

package/dist/icons/scality-loading.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+declare const LoaderIcon: () => JSX.Element;
+export { LoaderIcon };
+//# sourceMappingURL=scality-loading.d.ts.map

package/dist/icons/scality-loading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scality-loading.d.ts","sourceRoot":"","sources":["../../src/lib/icons/scality-loading.tsx"],"names":[],"mappings":";AAEA,QAAA,MAAM,UAAU,mBAiHf,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/icons/scality-loading.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const LoaderIcon = () => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", viewBox: "0 0 56 56", width: "50", height: "50", children: _jsxs("g", { className: "container", children: [_jsx("path", { d: "M25.80000004768371,5.250000393390657 v8.2 H30.200000047683716 V5.1500003933906555 l5.7,3.3 l2.2,-3.8 l-5.8,-3.3 c-1.3,-0.8 -2.8,-1.1 -4.4,-1.1 c-1.5,0 -3,0.4 -4.3,1.2 l-5.8,3.3 l2.2,3.8 L25.80000004768371,5.250000393390657 z", className: "svg_3", children: _jsx("animate", { attributeName: "opacity", attributeType: "XML", values: "1; 0", begin: "0s", dur: "1s", repeatCount: "indefinite" }) }), _jsx("path", { d: "M46.60000004768372,14.650000393390656 l-7.1,4.1 l2.2,3.8 l7.1,-4.1 l0,6.6 l4.4,0 l0,-6.7 c0,-1.5 -0.4,-3 -1.2,-4.3 c-0.8,-1.3 -1.9,-2.4 -3.2,-3.2 l-5.8,-3.3 l-2.2,3.8 L46.60000004768372,14.650000393390656 z", className: "svg_5", children: _jsx("animate", { attributeName: "opacity", attributeType: "XML", values: "1; 0", begin: "0.3s", dur: "1s", repeatCount: "indefinite" }) }), _jsx("path", { d: "M46.60000004768372,41.25000039339065 L39.60000004768372,37.150000393390656 l2.2,-3.8 l7.1,4.1 l0,-6.6 l4.4,0 l0,6.7 c0,1.5 -0.4,2.9 -1.2,4.3 c-0.8,1.3 -1.9,2.4 -3.2,3.2 l-5.8,3.3 l-2.2,-3.8 L46.60000004768372,41.25000039339065 z", className: "svg_8", children: _jsx("animate", { attributeName: "opacity", attributeType: "XML", values: "1; 0", begin: "0.55s", dur: "1s", repeatCount: "indefinite" }) }), _jsx("path", { d: "M25.80000004768371,50.75000039339065 v-8.2 H30.200000047683716 v8.2 l5.7,-3.3 l2.2,3.8 l-5.7,3.3 c-1.3,0.8 -2.9,1.2 -4.4,1.2 c-1.5,0 -3,-0.4 -4.3,-1.2 l-5.8,-3.3 l2.2,-3.8 L25.80000004768371,50.75000039339065 z", className: "svg_4", children: _jsx("animate", { attributeName: "opacity", attributeType: "XML", values: "1; 0", begin: "0.75s", dur: "1s", repeatCount: "indefinite" }) }), _jsx("path", { d: "M7.2000000476837185,37.45000039339065 l7.1,-4.1 l2.2,3.8 l-7.1,4.1 l5.7,3.3 l-2.2,3.8 l-5.8,-3.3 c-1.3,-0.8 -2.4,-1.9 -3.1,-3.2 c-0.8,-1.3 -1.2,-2.8 -1.2,-4.3 l0,-6.7 l4.4,0 L7.2000000476837185,37.45000039339065 z", className: "svg_6", children: _jsx("animate", { attributeName: "opacity", attributeType: "XML", values: "1; 0", begin: "0.85s", dur: "1s", repeatCount: "indefinite" }) }), _jsx("path", { d: "M7.2000000476837185,18.550000393390654 l7.1,4.1 l2.2,-3.8 l-7.1,-4.1 l5.7,-3.3 l-2.2,-3.8 l-5.8,3.3 c-1.3,0.8 -2.4,1.9 -3.2,3.2 c-0.8,1.3 -1.2,2.8 -1.2,4.4 l0,6.7 l4.4,0 L7.2000000476837185,18.550000393390654 z", className: "svg_7", children: _jsx("animate", { attributeName: "opacity", attributeType: "XML", values: "1; 0", begin: "0.9", dur: "1s", repeatCount: "indefinite" }) }), _jsx("polygon", { points: "28.60000228881836,17.649999976158142 28.60000228881836,26.950003027915955 36.70000076293945,22.34999692440033 ", className: "svg_9" }), _jsx("polygon", { points: "27.39999771118164,17.649999976158142 19.39999771118164,22.34999692440033 27.39999771118164,26.950003027915955 ", className: "svg_10" }), _jsx("polygon", { points: "26.89999771118164,27.950003027915955 18.89999771118164,23.34999692440033 18.89999771118164,32.55000340938568 ", className: "svg_11" }), _jsx("polygon", { points: "29.200000762939453,27.950003027915955 37.20000076293945,32.55000340938568 37.20000076293945,23.450003027915955 ", className: "svg_12" }), _jsx("polygon", { points: "27.39999771118164,29.05000150203705 19.500003814697266,33.650001883506775 27.39999771118164,38.34999883174896 ", className: "svg_13" }), _jsx("polygon", { points: "28.60000228881836,29.05000150203705 28.60000228881836,38.34999883174896 36.60000228881836,33.650001883506775 ", className: "svg_14" })] }) }));
+export { LoaderIcon };

package/dist/index.css

@@ -0,0 +1,25 @@
+html,
+body {
+  font-family: 'Lato';
+  font-size: max(14px, 0.972vw);
+}
+
+/* Lato-Regular */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: normal;
+  src: local(''), url('./style/fonts/Lato-Regular.woff2') format('woff2'),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url('./style/fonts/Lato-Regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* Lato-Bold */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: bold;
+  src: local(''), url('./style/fonts/Lato-Bold.woff2') format('woff2'),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */ url('./style/fonts/Lato-Bold.woff')
+      format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}

package/dist/index.d.ts

@@ -0,0 +1,65 @@
+import '@fortawesome/fontawesome-free/css/all.css';
+import './index.css';
+export { Banner } from './components/banner/Banner.component';
+export { Breadcrumb } from './components/breadcrumb/Breadcrumb.component';
+export { Button } from './components/button/Button.component';
+export { Checkbox } from './components/checkbox/Checkbox.component';
+export { Chips } from './components/chips/Chips.component';
+export { Dropdown } from './components/dropdown/Dropdown.component';
+export { Input } from './components/input/Input.component';
+export { LOADER_SIZE } from './components/constants';
+export { Layout } from './components/layout/Layout.component';
+export { Loader } from './components/loader/Loader.component';
+export { Modal } from './components/modal/Modal.component';
+export { Navbar } from './components/navbar/Navbar.component';
+export { Notifications } from './components/notifications/Notifications.component';
+export { SearchInput } from './components/searchinput/SearchInput.component';
+export { Select } from './components/select/Select.component';
+export { Sidebar } from './components/sidebar/Sidebar.component';
+export { Steppers } from './components/steppers/Steppers.component';
+export { Toggle } from './components/toggle/Toggle.component';
+export { Tooltip } from './components/tooltip/Tooltip.component';
+export { MultiSelect } from './components/multiselect/MultiSelect.component';
+export { VegaChart } from './components/vegachart/VegaChart.component';
+export { LineChart } from './components/linechart/LineChart.component';
+export { ProgressBar } from './components/progressbar/ProgressBar.component';
+export { TextArea } from './components/textarea/TextArea.component';
+export { CloudProgressBar } from './components/cloudprogressbar/CloudProgressBar.component';
+export { Sparkline } from './components/sparkline/SparkLine.component';
+export { BarChart } from './components/barchart/BarChart.component';
+export { CircularProgressBar } from './components/circularprogressbar/CircularProgressBar.component';
+export { AreaChart } from './components/areachart/AreaChart.component';
+export { CollapsiblePanel } from './components/collapsiblepanel/CollapsiblePanel.component';
+export { LateralNavbarLayout } from './components/lateralnavbarlayout/LateralNavbarLayout.component';
+export { GlobalHealthBar } from './components/globalhealthbar/GlobalHealthBar.component';
+export { ConstrainedText } from './components/constrainedtext/Constrainedtext.component';
+export { EmptyState } from './components/emptystate/Emptystate.component';
+export { EmptyTable } from './components/emptytable/Emptytable.component';
+export { ScrollbarWrapper } from './components/scrollbarwrapper/ScrollbarWrapper.component';
+export { ErrorPage401 } from './components/error-pages/ErrorPage401.component';
+export { ErrorPage404 } from './components/error-pages/ErrorPage404.component';
+export { ErrorPage500 } from './components/error-pages/ErrorPage500.component';
+export { ErrorPageAuth } from './components/error-pages/ErrorPageAuth.component';
+export { TextBadge } from './components/textbadge/TextBadge.component';
+export { SpacedBox } from './components/spacedbox/SpacedBox';
+export { Layout as Layout2 } from './components/layout/v2';
+export { TwoPanelLayout } from './components/layout/v2/panels';
+export { AppContainer } from './components/layout/v2/AppContainer';
+export { BasicText, SecondaryText, LargerText, EmphaseText, StatusText, LargeText, SmallerText, ChartTitleText, Text, Link, } from './components/text/Text.component';
+export { Card } from './components/card/Card.component';
+export { PrettyBytes } from './components/prettybytes/PrettyBytes.component';
+export { Icon } from './components/icon/Icon.component';
+export { StatusWrapper } from './components/statuswrapper/Statuswrapper.component';
+export { Stack, Wrap, spacing } from './spacing';
+export { Form, FormSection, FormGroup } from './components/form/Form.component';
+export { FormattedDateTime } from './components/date/FormattedDateTime';
+export { getDateDaysDiff } from './components/date/dateDiffer';
+export { IconHelp } from './components/IconHelper';
+export { Dropzone } from './components/dropzone/Dropzone';
+export { Toast } from './components/toast/Toast.component';
+export { ToastProvider, useToast } from './components/toast/ToastProvider';
+export { useMutationsHandler } from './components/toast/useMutationsHandler';
+export { Stepper } from './components/steppers/Stepper.component';
+export { InfoMessage } from './components/infomessage/InfoMessage.component';
+export { InputList } from './components/inputlist/InputList.component';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -0,0 +1,64 @@
+import '@fortawesome/fontawesome-free/css/all.css';
+import './index.css';
+export { Banner } from './components/banner/Banner.component';
+export { Breadcrumb } from './components/breadcrumb/Breadcrumb.component';
+export { Button } from './components/button/Button.component';
+export { Checkbox } from './components/checkbox/Checkbox.component';
+export { Chips } from './components/chips/Chips.component';
+export { Dropdown } from './components/dropdown/Dropdown.component';
+export { Input } from './components/input/Input.component';
+export { LOADER_SIZE } from './components/constants';
+export { Layout } from './components/layout/Layout.component';
+export { Loader } from './components/loader/Loader.component';
+export { Modal } from './components/modal/Modal.component';
+export { Navbar } from './components/navbar/Navbar.component';
+export { Notifications } from './components/notifications/Notifications.component';
+export { SearchInput } from './components/searchinput/SearchInput.component';
+export { Select } from './components/select/Select.component';
+export { Sidebar } from './components/sidebar/Sidebar.component';
+export { Steppers } from './components/steppers/Steppers.component';
+export { Toggle } from './components/toggle/Toggle.component';
+export { Tooltip } from './components/tooltip/Tooltip.component';
+export { MultiSelect } from './components/multiselect/MultiSelect.component';
+export { VegaChart } from './components/vegachart/VegaChart.component';
+export { LineChart } from './components/linechart/LineChart.component';
+export { ProgressBar } from './components/progressbar/ProgressBar.component';
+export { TextArea } from './components/textarea/TextArea.component';
+export { CloudProgressBar } from './components/cloudprogressbar/CloudProgressBar.component';
+export { Sparkline } from './components/sparkline/SparkLine.component';
+export { BarChart } from './components/barchart/BarChart.component';
+export { CircularProgressBar } from './components/circularprogressbar/CircularProgressBar.component';
+export { AreaChart } from './components/areachart/AreaChart.component';
+export { CollapsiblePanel } from './components/collapsiblepanel/CollapsiblePanel.component';
+export { LateralNavbarLayout } from './components/lateralnavbarlayout/LateralNavbarLayout.component';
+export { GlobalHealthBar } from './components/globalhealthbar/GlobalHealthBar.component';
+export { ConstrainedText } from './components/constrainedtext/Constrainedtext.component';
+export { EmptyState } from './components/emptystate/Emptystate.component';
+export { EmptyTable } from './components/emptytable/Emptytable.component';
+export { ScrollbarWrapper } from './components/scrollbarwrapper/ScrollbarWrapper.component';
+export { ErrorPage401 } from './components/error-pages/ErrorPage401.component';
+export { ErrorPage404 } from './components/error-pages/ErrorPage404.component';
+export { ErrorPage500 } from './components/error-pages/ErrorPage500.component';
+export { ErrorPageAuth } from './components/error-pages/ErrorPageAuth.component';
+export { TextBadge } from './components/textbadge/TextBadge.component';
+export { SpacedBox } from './components/spacedbox/SpacedBox';
+export { Layout as Layout2 } from './components/layout/v2';
+export { TwoPanelLayout } from './components/layout/v2/panels';
+export { AppContainer } from './components/layout/v2/AppContainer';
+export { BasicText, SecondaryText, LargerText, EmphaseText, StatusText, LargeText, SmallerText, ChartTitleText, Text, Link, } from './components/text/Text.component';
+export { Card } from './components/card/Card.component';
+export { PrettyBytes } from './components/prettybytes/PrettyBytes.component';
+export { Icon } from './components/icon/Icon.component';
+export { StatusWrapper } from './components/statuswrapper/Statuswrapper.component';
+export { Stack, Wrap, spacing } from './spacing';
+export { Form, FormSection, FormGroup } from './components/form/Form.component';
+export { FormattedDateTime } from './components/date/FormattedDateTime';
+export { getDateDaysDiff } from './components/date/dateDiffer';
+export { IconHelp } from './components/IconHelper';
+export { Dropzone } from './components/dropzone/Dropzone';
+export { Toast } from './components/toast/Toast.component';
+export { ToastProvider, useToast } from './components/toast/ToastProvider';
+export { useMutationsHandler } from './components/toast/useMutationsHandler';
+export { Stepper } from './components/steppers/Stepper.component';
+export { InfoMessage } from './components/infomessage/InfoMessage.component';
+export { InputList } from './components/inputlist/InputList.component';