@scality/core-ui 0.115.0

package/dist/spacing.d.ts

@@ -0,0 +1,44 @@
+import { HTMLAttributes, HTMLProps, ReactNode } from 'react';
+import { BoxComponentProps } from './components/box/Box';
+export declare const spacing: {
+    r1: string;
+    r2: string;
+    r4: string;
+    r8: string;
+    r10: string;
+    r12: string;
+    r14: string;
+    r16: string;
+    r20: string;
+    r24: string;
+    r28: string;
+    r32: string;
+    r36: string;
+    r40: string;
+    f1: string;
+    f2: string;
+    f4: string;
+    f8: string;
+    f10: string;
+    f12: string;
+    f14: string;
+    f16: string;
+    f20: string;
+    f24: string;
+    f28: string;
+    f32: string;
+    f36: string;
+    f40: string;
+};
+export declare const Stack: ({ gap, direction, withSeparators, children, ...rest }: {
+    gap?: "r1" | "r2" | "r4" | "r8" | "r10" | "r12" | "r14" | "r16" | "r20" | "r24" | "r28" | "r32" | "r36" | "r40" | "f1" | "f2" | "f4" | "f8" | "f10" | "f12" | "f14" | "f16" | "f20" | "f24" | "f28" | "f32" | "f36" | "f40" | undefined;
+    direction?: "vertical" | "horizontal" | undefined;
+    withSeparators?: boolean | undefined;
+    children: ReactNode[];
+} & HTMLAttributes<HTMLDivElement>) => JSX.Element;
+export declare const Wrap: ({ children, ...rest }: {
+    children: ReactNode[];
+} & Omit<HTMLProps<HTMLDivElement>, "ref" | "as"> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & import("styled-system").BordersProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+    gap?: string | number | undefined;
+}) => JSX.Element;
+//# sourceMappingURL=spacing.d.ts.map

package/dist/spacing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../src/lib/spacing.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAO,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAE9D,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BnB,CAAC;AAuBF,eAAO,MAAM,KAAK;;;;cAUN,SAAS,EAAE;kDA2BtB,CAAC;AAEF,eAAO,MAAM,IAAI;cAGF,SAAS,EAAE;;;iBASzB,CAAC"}

package/dist/spacing.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children } from 'react';
+import styled from 'styled-components';
+import { Box } from './components/box/Box';
+export const spacing = {
+    r1: '0.0625rem',
+    r2: '0.125rem',
+    r4: '0.25rem',
+    r8: '0.5rem',
+    r10: '0.625rem',
+    r12: '0.75rem',
+    r14: '0.875rem',
+    r16: '1rem',
+    r20: '1.25rem',
+    r24: '1.5rem',
+    r28: '1.75rem',
+    r32: '2rem',
+    r36: '2.25rem',
+    r40: '2.5rem',
+    f1: '1px',
+    f2: '2px',
+    f4: '4px',
+    f8: '8px',
+    f10: '10px',
+    f12: '12px',
+    f14: '14px',
+    f16: '16px',
+    f20: '20px',
+    f24: '24px',
+    f28: '28px',
+    f32: '32px',
+    f36: '36px',
+    f40: '40px',
+};
+const HSeparator = styled.div `
+  min-height: ${spacing.r40};
+  min-width: ${spacing.r2};
+  background: ${(props) => props.theme.backgroundLevel1};
+`;
+const VSeparator = styled.div `
+  height: 1px;
+  width: ${spacing.r24};
+  background: ${(props) => props.theme.border};
+`;
+const Separator = ({ type }) => {
+    return (_jsxs(_Fragment, { children: [type === 'horizontal' && _jsx(HSeparator, { children: "\u00A0" }), type === 'vertical' && _jsx(VSeparator, { children: "\u00A0" })] }));
+};
+export const Stack = ({ gap, direction, withSeparators, children, ...rest }) => {
+    gap = gap || 'r8';
+    direction = direction || 'horizontal';
+    const numberOfChildren = Children.count(children);
+    return (_jsx(Box, { display: 'flex', flexDirection: direction === 'horizontal' ? 'row' : 'column', alignItems: direction === 'horizontal' ? 'center' : 'normal', gap: spacing[gap], ...rest, children: Children.map(children, (node, nodeIndex) => {
+            return (_jsxs(_Fragment, { children: [node, withSeparators && nodeIndex + 1 !== numberOfChildren && (_jsx(Separator, { type: direction }))] }));
+        }) }));
+};
+export const Wrap = ({ children, ...rest }) => {
+    return (_jsx(Box, { display: 'flex', justifyContent: "space-between", ...rest, children: Children.map(children, (node) => {
+            return _jsx(_Fragment, { children: node });
+        }) }));
+};

package/dist/style/theme.d.ts

@@ -0,0 +1,160 @@
+export declare const hotPink = "#E40046";
+export declare const pink = "#EB4962";
+export declare const lightPink = "#F5B5BA";
+export declare const plum = "#8A1B61";
+export declare const jade = "#006F62";
+export declare const lightBeige = "#FAF7F5";
+export declare const warmRed = "#EF3340";
+export declare const turquoise = "#00B2A9";
+export declare const yellowOrange = "#F1B434";
+export declare const mediumOrange = "#FF8F1C";
+export declare const yellow = "#EFC93D";
+export declare const green = "#228F67";
+export declare const white = "#ffffff";
+export declare const black = "#000000";
+export declare const blackLight = "#313B44";
+export declare const blueDarkest = "#0F3554";
+export declare const blueDarker = "#144A75";
+export declare const blueDark = "#1F73B7";
+export declare const blue = "#337FBD";
+export declare const blueLight = "#5293C7";
+export declare const blueLighter = "#ADCCE4";
+export declare const blueLightest = "#CEE2F2";
+export declare const grayDarkest = "#2F3941";
+export declare const grayDarker = "#49545C";
+export declare const grayDark = "#68737D";
+export declare const gray = "#87929D";
+export declare const grayLight = "#C2C8CC";
+export declare const grayLighter = "#D8DCDE";
+export declare const grayLightest = "#E9EBED";
+export type CoreUITheme = {
+    statusHealthy: string;
+    statusHealthyRGB: string;
+    statusWarning: string;
+    statusWarningRGB: string;
+    statusCritical: string;
+    statusCriticalRGB: string;
+    selectedActive: string;
+    highlight: string;
+    border: string;
+    buttonPrimary: string;
+    buttonSecondary: string;
+    buttonDelete: string;
+    infoPrimary: string;
+    infoSecondary: string;
+    backgroundLevel1: string;
+    backgroundLevel2: string;
+    backgroundLevel3: string;
+    backgroundLevel4: string;
+    textPrimary: string;
+    textSecondary: string;
+    textTertiary: string;
+    textReverse: string;
+    textLink: string;
+};
+export declare const coreUIAvailableThemesNames: readonly ["darkRebrand", "artescaLight", "ring9dark"];
+export type CoreUIThemeName = (typeof coreUIAvailableThemesNames)[number];
+export declare const coreUIAvailableThemes: Record<CoreUIThemeName, CoreUITheme>;
+/**
+ * @deprecated
+ *
+ * Please use coreUIAvailableThemes instead, the label is more explicit.
+ *
+ * import { coreUIAvailableThemes } from '@scality/core-ui/dist/style/theme';
+ */
+export declare const defaultTheme: Record<"darkRebrand" | "artescaLight" | "ring9dark", CoreUITheme>;
+export declare const brand: CoreUITheme;
+export type ThemeColors = keyof CoreUITheme;
+export declare const lineColor1 = "#A14FBF";
+export declare const lineColor2 = "#BE9A40";
+export declare const lineColor3 = "#4BE4E2";
+export declare const lineColor4 = "#245A83";
+export declare const lineColor5 = "#E3FF73";
+export declare const lineColor6 = "#BE2543";
+export declare const lineColor7 = "#FD8144";
+export declare const lineColor8 = "#F6B187";
+export declare const fontSize: {
+    smaller: string;
+    small: string;
+    base: string;
+    large: string;
+    larger: string;
+    huge: string;
+    massive: string;
+};
+/**
+ * @deprecated
+ *
+ * use import { spacing } from '@scality/core-ui/dist/spacing';
+ */
+export declare const space: string[];
+export declare const fontWeight: {
+    light: string;
+    base: string;
+    semibold: string;
+    bold: string;
+};
+/**
+ * @deprecated
+ *
+ * Use spacing instead \
+ * smaller : sp4 \
+ * small : sp8 \
+ * base : sp16 \
+ * large : sp20 \
+ * larger : sp24 \
+ *
+ */
+export declare const padding: {
+    smaller: string;
+    small: string;
+    base: string;
+    large: string;
+    larger: string;
+};
+/**
+ * @deprecated
+ * use import { spacing } from '@scality/core-ui/dist/spacing';
+ *
+ */
+export declare const spacing: {
+    sp0: string;
+    sp1: string;
+    sp2: string;
+    sp4: string;
+    sp8: string;
+    sp10: string;
+    sp12: string;
+    sp14: string;
+    sp16: string;
+    sp20: string;
+    sp24: string;
+    sp28: string;
+    sp32: string;
+    sp40: string;
+};
+export declare const svgSize: {
+    smaller: string;
+    small: string;
+    base: string;
+    large: string;
+    larger: string;
+    huge: string;
+    massive: string;
+};
+export declare const zIndex: {
+    tooltip: number;
+    notification: number;
+    modal: number;
+    overlay: number;
+    dropdown: number;
+    nav: number;
+    sidebar: number;
+    scrollbarButton: number;
+    base: number;
+};
+export declare const navbarHeight = "3rem";
+export declare const navbarItemWidth = "4.286rem";
+export declare const sidebarItemHeight: string;
+export declare const sidebarWidth: string;
+//# sourceMappingURL=theme.d.ts.map

package/dist/style/theme.d.ts.map

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

package/dist/style/theme.js

@@ -0,0 +1,234 @@
+//== Colors
+export const hotPink = '#E40046';
+export const pink = '#EB4962';
+export const lightPink = '#F5B5BA';
+export const plum = '#8A1B61';
+export const jade = '#006F62';
+export const lightBeige = '#FAF7F5';
+export const warmRed = '#EF3340';
+export const turquoise = '#00B2A9';
+export const yellowOrange = '#F1B434';
+export const mediumOrange = '#FF8F1C';
+export const yellow = '#EFC93D';
+export const green = '#228F67';
+export const white = '#ffffff';
+export const black = '#000000';
+export const blackLight = '#313B44';
+export const blueDarkest = '#0F3554';
+export const blueDarker = '#144A75';
+export const blueDark = '#1F73B7';
+export const blue = '#337FBD';
+export const blueLight = '#5293C7';
+export const blueLighter = '#ADCCE4';
+export const blueLightest = '#CEE2F2';
+export const grayDarkest = '#2F3941';
+export const grayDarker = '#49545C';
+export const grayDark = '#68737D';
+export const gray = '#87929D';
+export const grayLight = '#C2C8CC';
+export const grayLighter = '#D8DCDE';
+export const grayLightest = '#E9EBED';
+export const coreUIAvailableThemesNames = [
+    'darkRebrand',
+    'artescaLight',
+    'ring9dark',
+];
+export const coreUIAvailableThemes = {
+    darkRebrand: {
+        statusHealthy: '#0AADA6',
+        statusHealthyRGB: '10,173,166',
+        statusWarning: '#F8F32B',
+        statusWarningRGB: '248,243,43',
+        statusCritical: '#E84855',
+        statusCriticalRGB: '232,72,85',
+        selectedActive: '#037AFF',
+        highlight: '#1A3C75',
+        border: '#4A4A4A',
+        buttonPrimary: '#2F4185',
+        buttonSecondary: '#595A78',
+        buttonDelete: '#3D0808',
+        infoPrimary: '#8E8EAC',
+        infoSecondary: '#333366',
+        backgroundLevel1: '#121219',
+        backgroundLevel2: '#323245',
+        backgroundLevel3: '#232331',
+        backgroundLevel4: '#1B1B27',
+        textPrimary: '#EAEAEA',
+        textSecondary: '#B5B5B5',
+        textTertiary: '#DFDFDF',
+        textReverse: '#000000',
+        textLink: '#71AEFF',
+    },
+    artescaLight: {
+        statusHealthy: '#009E93',
+        statusHealthyRGB: '43,171,81',
+        statusWarning: '#E77B00',
+        statusWarningRGB: '252,138,50',
+        statusCritical: '#C10004',
+        statusCriticalRGB: '232,72,85,1',
+        selectedActive: '#90D0FF',
+        highlight: '#E3F2FD',
+        border: '#999999',
+        buttonPrimary: '#9DA6EC',
+        buttonSecondary: '#CACFE3',
+        buttonDelete: '#FFCDD2',
+        infoPrimary: '#5C486D',
+        infoSecondary: '#EBE3F1',
+        backgroundLevel1: '#F9F9FB',
+        backgroundLevel2: '#F3F3F5',
+        backgroundLevel3: '#EAEAEC',
+        backgroundLevel4: '#FAFAF8',
+        textPrimary: '#101010',
+        textSecondary: '#515170',
+        textTertiary: '#DFDFDF', // TO CHECK
+        textReverse: '#EAEAEA',
+        textLink: '#1349C5',
+    },
+    ring9dark: {
+        statusHealthy: '#2BAB51',
+        statusHealthyRGB: '43,171,81',
+        statusWarning: '#FC8A32',
+        statusWarningRGB: '252,138,50',
+        statusCritical: '#E84855',
+        statusCriticalRGB: '232,72,85,1',
+        selectedActive: '#2196F3',
+        highlight: '#1A3C75',
+        border: '#313131',
+        buttonPrimary: '#2E67AB',
+        buttonSecondary: '#434343',
+        buttonDelete: '#8D1616',
+        infoPrimary: '#76828F',
+        infoSecondary: '#2C3238',
+        backgroundLevel1: '#151313',
+        backgroundLevel2: '#221D1D',
+        backgroundLevel3: '#1B1D1F',
+        backgroundLevel4: '#1B1B27',
+        textPrimary: '#EAEAEA',
+        textSecondary: '#A4ACB4',
+        textTertiary: '#DFDFDF',
+        textReverse: '#000000',
+        textLink: '#71AEFF',
+    },
+};
+/**
+ * @deprecated
+ *
+ * Please use coreUIAvailableThemes instead, the label is more explicit.
+ *
+ * import { coreUIAvailableThemes } from '@scality/core-ui/dist/style/theme';
+ */
+export const defaultTheme = coreUIAvailableThemes;
+// Why use this and not directly coreUIAvailableThemes.darkRebrand ?
+export const brand = coreUIAvailableThemes.darkRebrand;
+// LineChart colors
+export const lineColor1 = '#A14FBF';
+export const lineColor2 = '#BE9A40';
+export const lineColor3 = '#4BE4E2';
+export const lineColor4 = '#245A83';
+export const lineColor5 = '#E3FF73';
+export const lineColor6 = '#BE2543';
+export const lineColor7 = '#FD8144';
+export const lineColor8 = '#F6B187';
+export const fontSize = {
+    smaller: '0.71rem',
+    small: '0.85rem',
+    base: '1rem',
+    large: '1.14rem',
+    larger: '1.43rem',
+    huge: '1.57rem',
+    // no use case for the moment
+    massive: '1.71rem', // no use case for the moment
+};
+/**
+ * @deprecated
+ *
+ * use import { spacing } from '@scality/core-ui/dist/spacing';
+ */
+export const space = [
+    '0',
+    '0.071rem',
+    '0.143rem',
+    '0.286rem',
+    '0.571rem',
+    '0.71rem',
+    '0.857rem',
+    '1rem',
+    '1.143rem',
+    '1.429rem',
+    '1.714rem',
+    '2rem',
+    '2.286rem',
+    '2.857rem',
+];
+export const fontWeight = {
+    light: '400',
+    base: '400',
+    semibold: '600',
+    bold: '700',
+};
+/**
+ * @deprecated
+ *
+ * Use spacing instead \
+ * smaller : sp4 \
+ * small : sp8 \
+ * base : sp16 \
+ * large : sp20 \
+ * larger : sp24 \
+ *
+ */
+export const padding = {
+    smaller: '4px',
+    small: '8px',
+    base: '16px',
+    large: '20px',
+    larger: '24px',
+};
+/**
+ * @deprecated
+ * use import { spacing } from '@scality/core-ui/dist/spacing';
+ *
+ */
+export const spacing = {
+    sp0: space[0],
+    sp1: space[1],
+    sp2: space[2],
+    sp4: space[3],
+    sp8: space[4],
+    sp10: space[5],
+    sp12: space[6],
+    sp14: space[7],
+    sp16: space[8],
+    sp20: space[9],
+    sp24: space[10],
+    sp28: space[11],
+    sp32: space[12],
+    sp40: space[13],
+};
+// Svg size
+export const svgSize = {
+    smaller: '11px',
+    small: '14px',
+    base: '16px',
+    large: '18px',
+    larger: '22px',
+    huge: '30px',
+    massive: '40px',
+};
+export const zIndex = {
+    tooltip: 9990,
+    notification: 9000,
+    modal: 8500,
+    overlay: 8000,
+    dropdown: 7000,
+    nav: 500,
+    sidebar: 100,
+    scrollbarButton: 2,
+    base: 1,
+};
+//navbar
+export const navbarHeight = '3rem';
+export const navbarItemWidth = '4.286rem';
+//sidebar
+export const sidebarItemHeight = spacing.sp40;
+export const sidebarWidth = spacing.sp40;

package/dist/testUtils.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { QueryClient } from 'react-query';
+export declare const getWrapper: () => {
+    Wrapper: ({ children }: {
+        children: React.ReactNode;
+    }) => JSX.Element;
+    queryClient: QueryClient;
+};
+//# sourceMappingURL=testUtils.d.ts.map

package/dist/testUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../src/lib/testUtils.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAuB,MAAM,aAAa,CAAC;AAI/D,eAAO,MAAM,UAAU;;kBAEsB,MAAM,SAAS;;;CAW3D,CAAC"}

package/dist/testUtils.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { ThemeProvider } from 'styled-components';
+import { coreUIAvailableThemes } from './style/theme';
+export const getWrapper = () => {
+    const queryClient = new QueryClient();
+    const Wrapper = ({ children }) => {
+        return (_jsx(ThemeProvider, { theme: coreUIAvailableThemes.darkRebrand, children: _jsx(QueryClientProvider, { client: queryClient, children: children }) }));
+    };
+    return { Wrapper: Wrapper, queryClient: queryClient };
+};

package/dist/utils.d.ts

@@ -0,0 +1,9 @@
+/** Translates the old colors into new colors while keeping the same name.
+ * New names are also supported. */
+export declare const getThemePropSelector: (key: any) => (props: any) => any;
+/** Translates the old colors into new colors while keeping same name.
+ * New names are also supported. */
+export declare const getThemeVariantSelector: () => (props: any) => any;
+export declare const hex2RGB: (str: string) => [number, number, number];
+export declare const convertRemToPixels: (rem: number) => number;
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/lib/utils.ts"],"names":[],"mappings":"AAYA;mCACmC;AACnC,eAAO,MAAM,oBAAoB,mCAGhC,CAAC;AAEF;mCACmC;AACnC,eAAO,MAAM,uBAAuB,2BAInC,CAAC;AAEF,eAAO,MAAM,OAAO,QAAS,MAAM,KAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAc5D,CAAC;AAEF,eAAO,MAAM,kBAAkB,QAAS,MAAM,KAAG,MAahD,CAAC"}

package/dist/utils.js

@@ -0,0 +1,46 @@
+const RGB_HEX = /^#?(?:([\da-f]{3})[\da-f]?|([\da-f]{6})(?:[\da-f]{2})?)$/i;
+/** Ensure the consistency of colors between old and new colors */
+const variantMapping = {
+    healthy: 'statusHealthy',
+    success: 'statusHealthy',
+    warning: 'statusWarning',
+    danger: 'statusCritical',
+    selected: 'selectedActive',
+    base: 'infoPrimary',
+};
+/** Translates the old colors into new colors while keeping the same name.
+ * New names are also supported. */
+export const getThemePropSelector = (key) => (props) => {
+    var _a;
+    const key_ = (_a = variantMapping[key]) !== null && _a !== void 0 ? _a : key;
+    return props.theme[key_];
+};
+/** Translates the old colors into new colors while keeping same name.
+ * New names are also supported. */
+export const getThemeVariantSelector = () => (props) => {
+    var _a;
+    const theme = props.theme;
+    const key = (_a = variantMapping[props.variant]) !== null && _a !== void 0 ? _a : props.variant;
+    return theme[key];
+};
+export const hex2RGB = (str) => {
+    const [, short, long] = String(str).match(RGB_HEX) || [];
+    if (long) {
+        const value = Number.parseInt(long, 16);
+        return [value >> 16, (value >> 8) & 0xff, value & 0xff];
+    }
+    else if (short) {
+        const [r, g, b] = Array.from(short, (s) => Number.parseInt(s, 16)).map((n) => (n << 4) | n);
+        return [r, g, b];
+    }
+    throw new Error('Invalid hex string provided');
+};
+export const convertRemToPixels = (rem) => {
+    if (document.documentElement &&
+        rem &&
+        Number.isFinite(rem) &&
+        !Number.isNaN(rem)) {
+        return (rem * parseFloat(getComputedStyle(document.documentElement).fontSize) || 0);
+    }
+    return 0;
+};

package/global-setup.js

@@ -0,0 +1,3 @@
+module.exports = async () => {
+  process.env.TZ = 'UTC';
+};

package/jest.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  clearMocks: true,
+  globalSetup: './global-setup.js',
+  setupFilesAfterEnv: ['./setupTests.js'],
+  moduleNameMapper: {
+    '\\.(css|less)$': 'identity-obj-proxy',
+  },
+};