@scality/core-ui 0.166.0 → 0.167.0

package/dist/components/spacedbox/SpacedBox.js

@@ -1,64 +0,0 @@
-import styled from 'styled-components';
-import { spacing } from '../../style/theme';
-const validValue = [0, 1, 2, 4, 8, 12, 14, 16, 20, 24, 28, 32];
-const createSpacingFn = (propsName, spacingFields) => (props) => {
-    if (!props[propsName] && props[propsName] !== 0) {
-        return null;
-    }
-    //@ts-ignore -- this is ensured below
-    let value = props[propsName];
-    if (!validValue.includes(value)) {
-        console.warn(`'${propsName}' props should be a number in this list: ` +
-            '0, 1, 2, 4, 8, 12, 14, 16, 20, 24, 28, 32');
-        return null;
-    }
-    const result = spacingFields
-        .map((param) => `${param}: ${spacing[`sp${value}`]}`)
-        .join(';');
-    return result;
-};
-const m = createSpacingFn('m', ['margin']);
-const mt = createSpacingFn('mt', ['margin-top']);
-const mr = createSpacingFn('mr', ['margin-right']);
-const mb = createSpacingFn('mb', ['margin-bottom']);
-const ml = createSpacingFn('ml', ['margin-left']);
-const mx = createSpacingFn('mx', ['margin-left', 'margin-right']);
-const my = createSpacingFn('my', ['margin-top', 'margin-bottom']);
-const p = createSpacingFn('p', ['padding']);
-const pt = createSpacingFn('pt', ['padding-top']);
-const pr = createSpacingFn('pr', ['padding-right']);
-const pb = createSpacingFn('pb', ['padding-bottom']);
-const pl = createSpacingFn('pl', ['padding-left']);
-const px = createSpacingFn('px', ['padding-left', 'padding-right']);
-const py = createSpacingFn('py', ['padding-top', 'padding-bottom']);
-/**
- * @deprecated
- * Please use Box with import { Box } from '@scality/core-ui/dist/next';
- *
- * Most common use cases:
- *
- * `<SpacedBox m={14}><Component /></SpacedBox>`
- *
- * `<SpacedBox as={SpanComponent}><Component /></SpacedBox>`
- *
- * Props : m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py
- *
- * Values: 0, 1, 2, 4, 8, 12, 14, 16, 20, 24, 28, 32
- */
-const SpacedBox = styled.div `
-  ${m};
-  ${mt};
-  ${mr};
-  ${mb};
-  ${ml};
-  ${mx};
-  ${my};
-  ${p};
-  ${pt};
-  ${pr};
-  ${pb};
-  ${pl};
-  ${px};
-  ${py};
-`;
-export { SpacedBox };

package/dist/components/sparkline/SparkLine.component.d.ts

@@ -1,18 +0,0 @@
-type Props = {
-    id: string;
-    title?: string;
-    width?: number;
-    height?: number;
-    data: Array<Record<string, any>>;
-    xAxis: Record<string, any>;
-    yAxis: Record<string, any>;
-    row: Record<string, any>;
-    lineConfig?: Record<string, any>;
-    sparkLineColor?: string;
-    upTrendColor?: string;
-    bottomTrendColor?: string;
-};
-declare function SparkLine({ id, title, width, height, data, xAxis, yAxis, row, lineConfig, sparkLineColor, upTrendColor, bottomTrendColor, }: Props): import("react/jsx-runtime").JSX.Element;
-export declare const Sparkline: typeof SparkLine;
-export {};
-//# sourceMappingURL=SparkLine.component.d.ts.map

package/dist/components/sparkline/SparkLine.component.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SparkLine.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/sparkline/SparkLine.component.tsx"],"names":[],"mappings":"AAEA,KAAK,KAAK,GAAG;IACX,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3B,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,iBAAS,SAAS,CAAC,EACjB,EAAE,EACF,KAAK,EACL,KAAW,EACX,MAAW,EACX,IAAI,EACJ,KAAK,EACL,KAAK,EACL,GAAG,EACH,UAAU,EACV,cAAc,EACd,YAA2B,EAC3B,gBAAwB,GACzB,EAAE,KAAK,2CA+IP;AAED,eAAO,MAAM,SAAS,kBAAY,CAAC"}

package/dist/components/sparkline/SparkLine.component.js

@@ -1,148 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { VegaChart } from '../vegachart/VegaChart.component';
-import { yellowOrange, green } from '../../style/theme';
-function SparkLine({ id, title, width = 300, height = 80, data, xAxis, yAxis, row, lineConfig, sparkLineColor, upTrendColor = yellowOrange, bottomTrendColor = green, }) {
-    const spec = {
-        title: {
-            text: title,
-        },
-        data: {
-            values: data,
-        },
-        facet: {
-            row,
-        },
-        spec: {
-            width,
-            height,
-            layer: [
-                // display the sparkline chart
-                {
-                    mark: {
-                        type: 'line',
-                        ...lineConfig,
-                    },
-                    encoding: {
-                        x: xAxis,
-                        y: yAxis,
-                        color: {
-                            value: sparkLineColor,
-                        },
-                    },
-                }, // display the label to specify the max/min data
-                {
-                    mark: {
-                        type: 'text',
-                        style: 'labelMin',
-                        align: 'bottom',
-                        dy: height / 2,
-                        dx: width / 2 + 10,
-                    },
-                    encoding: {
-                        text: {
-                            aggregate: 'min',
-                            field: 'y',
-                            type: 'quantitative',
-                        },
-                    },
-                },
-                {
-                    mark: {
-                        type: 'text',
-                        style: 'labelMax',
-                        align: 'top',
-                        dy: -(height / 2),
-                        dx: width / 2 + 10,
-                    },
-                    encoding: {
-                        text: {
-                            aggregate: 'max',
-                            field: 'y',
-                            type: 'quantitative',
-                        },
-                    },
-                }, // display the up and bottom trend line
-                {
-                    mark: {
-                        type: 'rule',
-                        style: 'ruleMaxEnd',
-                        color: upTrendColor,
-                    },
-                    encoding: {
-                        y: {
-                            aggregate: 'max',
-                            field: 'y',
-                            type: 'quantitative',
-                        },
-                        x: {
-                            value: width - 15,
-                        },
-                        x2: {
-                            value: width,
-                        },
-                    },
-                },
-                {
-                    mark: {
-                        type: 'rule',
-                        style: 'ruleMaxStart',
-                        color: upTrendColor,
-                        opacity: 0.1,
-                    },
-                    encoding: {
-                        y: {
-                            aggregate: 'max',
-                            field: 'y',
-                            type: 'quantitative',
-                        },
-                        x: {
-                            value: 0,
-                        },
-                        x2: {
-                            value: width - 15,
-                        },
-                    },
-                },
-                {
-                    mark: {
-                        type: 'rule',
-                        style: 'ruleMinEnd',
-                        color: bottomTrendColor,
-                    },
-                    encoding: {
-                        y: {
-                            value: height,
-                        },
-                        x: {
-                            value: width - 15,
-                        },
-                        x2: {
-                            value: width,
-                        },
-                    },
-                },
-                {
-                    mark: {
-                        type: 'rule',
-                        style: 'ruleMinStart',
-                        color: bottomTrendColor,
-                        opacity: 0.1,
-                    },
-                    encoding: {
-                        y: {
-                            value: height,
-                        },
-                        x: {
-                            value: 0,
-                        },
-                        x2: {
-                            value: width - 15,
-                        },
-                    },
-                },
-            ],
-        },
-    };
-    return _jsx(VegaChart, { className: "sc-sparkline", id: id, spec: spec });
-}
-export const Sparkline = SparkLine;

package/dist/components/vegachart/VegaChart.component.d.ts

@@ -1,13 +0,0 @@
-export declare const TOP = "top";
-export declare const BOTTOM = "bottom";
-type Position = typeof TOP | typeof BOTTOM;
-type Props = {
-    id: string;
-    spec: Record<string, any>;
-    tooltipPosition?: Position;
-    theme?: 'light' | 'dark' | 'custom';
-    className?: string;
-};
-declare function VegaChart({ id, spec, tooltipPosition, theme, }: Props): import("react/jsx-runtime").JSX.Element;
-export { VegaChart };
-//# sourceMappingURL=VegaChart.component.d.ts.map

package/dist/components/vegachart/VegaChart.component.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"VegaChart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/vegachart/VegaChart.component.tsx"],"names":[],"mappings":"AAKA,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,EAAE,EAAE,MAAM,CAAC;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,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA0BF,iBAAS,SAAS,CAAC,EACjB,EAAE,EACF,IAAI,EACJ,eAAwB,EACxB,KAAgB,GACjB,EAAE,KAAK,2CAkGP;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

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

@@ -1,120 +0,0 @@
-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/plopfile.js

@@ -1,38 +0,0 @@
-module.exports = function (plop) {
-  plop.addHelper('lowerCase', (text) => text.toLowerCase());
-  plop.addHelper('properCase', (text) =>
-    text.replace(/\w\S*/g, function (txt) {
-      return txt.charAt(0).toUpperCase() + txt.substr(1);
-    }),
-  );
-
-  plop.setGenerator('component', {
-    description: 'Add a react component',
-    prompts: [
-      {
-        type: 'input',
-        name: 'name',
-        message: 'Component name please (ex: layout, breadcrumbs, menuItem)!',
-      },
-    ],
-    actions: [
-      {
-        type: 'add',
-        path:
-          'src/lib/components/{{lowerCase name}}/{{properCase name}}.component.js',
-        templateFile: 'plop-templates/component.hbs',
-      },
-      {
-        type: 'add',
-        path:
-          'src/lib/components/{{lowerCase name}}/{{properCase name}}.component.test.js',
-        templateFile: 'plop-templates/component.test.hbs',
-      },
-      {
-        type: 'add',
-        path: 'stories/{{lowerCase name}}.stories.js',
-        templateFile: 'plop-templates/stories.hbs',
-      },
-    ],
-  });
-};

package/src/lib/components/areachart/AreaChart.component.tsx

@@ -1,49 +0,0 @@
-import { VegaChart } from '../vegachart/VegaChart.component';
-
-type Props = {
-  id: string;
-  data: Array<Record<string, any>>;
-  xAxis: Record<string, any>;
-  yAxis: Array<Record<string, any>>;
-  color?: Record<string, any>;
-  areas: Array<Record<string, any>>;
-  width?: number;
-  height?: number;
-};
-
-function AreaChart({
-  id,
-  data,
-  xAxis,
-  yAxis,
-  color,
-  height = 300,
-  width = 1000,
-  areas = [],
-  ...rest
-}: Props) {
-  const lines = yAxis.map((y) => ({
-    mark: {
-      type: 'line',
-    },
-    encoding: {
-      y,
-    },
-  }));
-  const spec = {
-    data: {
-      values: data,
-    },
-    encoding: {
-      x: xAxis,
-      color,
-    },
-    layer: [...lines, ...areas],
-    height,
-    width,
-    ...rest,
-  };
-  return <VegaChart className="sc-areachart" id={id} spec={spec}></VegaChart>;
-}
-
-export { AreaChart };

package/src/lib/components/chips/Chips.component.tsx

@@ -1,169 +0,0 @@
-import { lighten } from 'polished';
-import styled, { css } from 'styled-components';
-import { fontSize, grayLight, white } from '../../style/theme';
-import { Button } from '../button/Button.component';
-import { Size } from '../constants';
-
-import { Icon } from '../icon/Icon.component';
-type Props = {
-  text: string;
-  variant?:
-    | 'statusHealthy'
-    | 'statusWarning'
-    | 'statusCritical'
-    | 'infoPrimary'
-    | 'infoSecondary';
-  icon?: JSX.Element;
-  onClick?: (arg0: any) => void;
-  onRemove?: (arg0: any) => void;
-  size?: Size;
-};
-const ChipsContainer = styled.div<{
-  size?: string;
-  variant?: any;
-  icon?: JSX.Element;
-}>`
-  display: inline-flex;
-  .sc-chips-remove {
-    padding-right: 10px;
-    color: ${white};
-    &:hover {
-      color: ${grayLight};
-    }
-  }
-  ${(props) => {
-    switch (props.size) {
-      case 'smaller':
-        return css`
-          border-radius: 10px;
-          .sc-chips-icon {
-            border-radius: 10px;
-            padding: 5px;
-          }
-        `;
-
-      case 'small':
-        return css`
-          border-radius: 12px;
-          .sc-chips-icon {
-            border-radius: 12px;
-            padding: 6px;
-          }
-        `;
-
-      case 'large':
-        return css`
-          border-radius: 14px;
-          .sc-chips-icon {
-            border-radius: 14px;
-            padding: 6px;
-          }
-        `;
-
-      case 'larger':
-        return css`
-          border-radius: 17px;
-          .sc-chips-icon {
-            border-radius: 17px;
-            padding: 7px;
-          }
-        `;
-
-      default:
-        return css`
-          border-radius: 12px;
-          .sc-chips-icon {
-            border-radius: 12px;
-            padding: 6px;
-          }
-        `;
-    }
-  }}
-  ${(props) => {
-    const brand = props.theme;
-    return css`
-      color: ${brand.textReverse};
-    `;
-  }}
-
-  ${(props) => {
-    const brand = props.theme;
-    const brandLight = lighten(0.1, brand[props.variant]).toString();
-    return props.onClick
-      ? css`
-          background-color: ${brand[props.variant]};
-          font-size: ${fontSize[props.size || 'base']};
-          &:hover {
-            cursor: pointer;
-            background-color: ${brandLight};
-          }
-          &:active {
-            background-color: ${brand[props.variant]};
-          }
-        `
-      : css`
-          background-color: ${brand[props.variant]};
-          font-size: ${fontSize[props.size || 'base']};
-        `;
-  }}
-`;
-export const ChipsIcon = styled.span<{
-  variant: any;
-  text: string;
-  size: Size;
-}>`
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  background-color: ${(props) =>
-    lighten(0.15, props.theme[props.variant]).toString()};
-`;
-export const ChipsText = styled.span<{ icon: any; isRemovable: boolean }>`
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  padding: ${(props) => (props.icon || props.isRemovable ? '5px' : '5px 10px')};
-`;
-
-const Chips = ({
-  text = '',
-  variant = 'infoPrimary',
-  icon = undefined,
-  onClick,
-  onRemove,
-  size = 'base',
-}: Props) => (
-  <ChipsContainer
-    className="sc-chips"
-    onClick={onClick}
-    variant={variant}
-    icon={icon}
-    size={size}
-  >
-    {icon && (
-      <ChipsIcon
-        className="sc-chips-icon"
-        text={text}
-        variant={variant}
-        size={size}
-      >
-        {icon}
-      </ChipsIcon>
-    )}
-    <ChipsText className="sc-chips-text" icon={icon} isRemovable={!!onRemove}>
-      {text}
-    </ChipsText>
-    {onRemove && (
-      <Button
-        // @ts-ignore
-        className="sc-chips-remove"
-        size={size}
-        inverted={true}
-        icon={<Icon name="Close" />}
-        onClick={onRemove}
-      />
-    )}
-  </ChipsContainer>
-);
-
-export { Chips };