@scality/core-ui 0.166.0 → 0.168.0

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 };

package/src/lib/components/cloudprogressbar/CloudProgressBar.component.tsx

@@ -1,105 +0,0 @@
-import styled, { css, keyframes } from 'styled-components';
-import { coreUIAvailableThemes } from '../../style/theme';
-export type CloudProgressBarProps = {
-  percentage: number;
-  borderSize: string;
-  cloudColor?: string;
-  progressCloudColor?: string;
-  children: JSX.Element;
-};
-
-const keyFrameCloud = (props) => {
-  return keyframes`
-    from {
-      height:100%
-    } 
-    to {
-      height:${100 - props.percentage}%
-    }`;
-};
-
-const Container = styled.div`
-  ${(props) => {
-    return css`
-      text-align: center;
-      position: relative;
-    `;
-  }}
-`;
-const ContainerProgress = styled.div<{ percentage: number }>`
-  ${(props) => {
-    return css`
-      animation-duration: 1s;
-      animation-fill-mode: both;
-      animation-name: ${keyFrameCloud};
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      overflow: hidden;
-    `;
-  }}
-`;
-
-const Cloud = ({ strokeColor, borderSize }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 15 72 42"
-    enableBackground="new 0 0 72 72"
-  >
-    <g>
-      <path
-        fill="none"
-        stroke={strokeColor}
-        strokeWidth={borderSize}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeMiterlimit="10"
-        d="M15.9,30.3c0,0.4-0.4,0.8-0.8,0.8C10,31.6,6,36.7,6,42.9c0,6.6,4.5,11.9,10.2,11.9h38.7C61,54.8,66,49.1,66,42.2c0-6.6-4.6-12.1-10.4-12.5c-0.4,0-0.8-0.3-0.9-0.8c-1.3-6.7-7.3-11.7-14.3-11.7c-4.6,0-8.7,2.1-11.3,5.4C28.8,23,28.3,23.1,28,23c-1-0.4-2.1-0.6-3.3-0.6C20.1,22.3,16.3,25.8,15.9,30.3z"
-      />
-    </g>
-  </svg>
-);
-
-const CloudProgress = ({ strokeColor, percentage, borderSize }) => (
-  <ContainerProgress percentage={percentage}>
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 15 72 42"
-      enableBackground="new 0 0 72 72"
-    >
-      <g>
-        <path
-          fill="none"
-          stroke={strokeColor}
-          strokeWidth={borderSize}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeMiterlimit="10"
-          d="M15.9,30.3c0,0.4-0.4,0.8-0.8,0.8C10,31.6,6,36.7,6,42.9c0,6.6,4.5,11.9,10.2,11.9h38.7C61,54.8,66,49.1,66,42.2c0-6.6-4.6-12.1-10.4-12.5c-0.4,0-0.8-0.3-0.9-0.8c-1.3-6.7-7.3-11.7-14.3-11.7c-4.6,0-8.7,2.1-11.3,5.4C28.8,23,28.3,23.1,28,23c-1-0.4-2.1-0.6-3.3-0.6C20.1,22.3,16.3,25.8,15.9,30.3z"
-        />
-      </g>
-    </svg>
-  </ContainerProgress>
-);
-
-const CloudProgressBar = ({
-  percentage = 0,
-  borderSize = '2px',
-  cloudColor = coreUIAvailableThemes.darkRebrand.statusHealthy,
-  progressCloudColor = coreUIAvailableThemes.darkRebrand.backgroundLevel1,
-  children,
-}: CloudProgressBarProps) => (
-  <Container className="sc-cloudprogressbar">
-    <Cloud strokeColor={progressCloudColor} borderSize={borderSize} />
-    <CloudProgress
-      strokeColor={cloudColor}
-      percentage={percentage}
-      borderSize={borderSize}
-    />
-
-    {children}
-  </Container>
-);
-
-export { CloudProgressBar };

package/src/lib/components/collapsiblepanel/CollapsiblePanel.component.tsx

@@ -1,77 +0,0 @@
-import styled from 'styled-components';
-import { spacing } from '../../spacing';
-import { fontSize } from '../../style/theme';
-import { Icon } from '../icon/Icon.component';
-type Props = {
-  expanded: boolean;
-  onHeaderClick: (arg0: any) => void;
-  children: React.ReactNode;
-  headerItems: Array<JSX.Element>;
-};
-const ARROW = {
-  colapsed: 'fas fa-angle-down',
-  expanded: 'fas fa-angle-up',
-};
-const HeaderText = styled.div`
-  display: flex;
-  align-items: center;
-  flex-grow: 1;
-`;
-const HeaderItem = styled.div`
-  margin-right: ${spacing.r16};
-  display: flex;
-  flex-grow: 1;
-`;
-const HeaderIcon = styled.div`
-  font-size: ${fontSize.larger};
-  margin: 0 ${spacing.r16};
-`;
-const CollapsiblePanelContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  border-radius: 4px;
-  background-color: ${(props) => props.theme.backgroundLevel1};
-  color: ${(props) => props.theme.textPrimary};
-`;
-const HeaderContainer = styled.div`
-  display: flex;
-  cursor: pointer;
-  padding: ${spacing.r16};
-`;
-const ExpandedContainer = styled.div`
-  padding: ${spacing.r16};
-  color: ${(props) => props.theme.textPrimary};
-  background-color: ${(props) => props.theme.backgroundLevel1};
-`;
-
-function CollapsiblePanel({
-  expanded = false,
-  onHeaderClick,
-  children,
-  headerItems = [],
-}: Props) {
-  return (
-    <CollapsiblePanelContainer className="sc-collapsiblepanel">
-      <HeaderContainer
-        onClick={onHeaderClick}
-        className="sc-collapsiblepanel-header"
-      >
-        <HeaderText>
-          {headerItems.map((item, index) => (
-            <HeaderItem key={index}>{item}</HeaderItem>
-          ))}
-        </HeaderText>
-        <HeaderIcon>
-          <Icon name={expanded ? 'Dropdown-up' : 'Dropdown-down'} />
-        </HeaderIcon>
-      </HeaderContainer>
-      {expanded && (
-        <ExpandedContainer className="sc-collapsiblepanel-content">
-          {children}
-        </ExpandedContainer>
-      )}
-    </CollapsiblePanelContainer>
-  );
-}
-
-export { CollapsiblePanel };

package/src/lib/components/linechart/LineChart.component.tsx

@@ -1,152 +0,0 @@
-// @ts-nocheck
-import { $PropertyType } from 'utility-types';
-import { VegaChart } from '../vegachart/VegaChart.component';
-import type { Encoding, Field } from 'vega-lite';
-type Props = {
-  id: string;
-  data: Array<Record<string, any>>;
-  xAxis: Record<string, any>;
-  yAxis: Array<Record<string, any>>;
-  color?: Record<string, any>;
-  tooltip?: boolean;
-  lineConfig?: Record<string, any>;
-  width?: number;
-  height?: number;
-  displayTrendLine?: boolean;
-  strokeDashEncodingConfig?: $PropertyType<Encoding<Field>, 'strokeDash'>;
-  opacityEncodingConfig?: $PropertyType<Encoding<Field>, 'opacity'>;
-  tooltipConfig?: $PropertyType<Encoding<Field>, 'tooltip'>;
-  tooltipTheme?: 'light' | 'dark' | 'custom';
-};
-
-function LineChart({
-  id,
-  data,
-  xAxis,
-  yAxis,
-  color,
-  tooltip = false,
-  lineConfig,
-  height = 300,
-  width = 1000,
-  displayTrendLine = false,
-  strokeDashEncodingConfig,
-  opacityEncodingConfig,
-  tooltipConfig,
-  tooltipTheme,
-  ...rest
-}: Props) {
-  // hardcode the trendline configuration for tooltip
-  const trendline = {
-    mark: 'rule',
-    selection: {
-      index: {
-        type: 'single',
-        on: 'mousemove',
-        encodings: ['x'],
-        nearest: true,
-      },
-    },
-    encoding: {
-      color: {
-        condition: {
-          selection: {
-            not: 'index',
-          },
-          value: 'transparent',
-        },
-      },
-    },
-  };
-
-  /*
-   ** strokeDash encoding allows to define a field in data items that defines the line stroke dash property
-   ** this would allow to get same color lines but having some dashed and some plains
-   ** https://vega.github.io/vega-lite/docs/line.html#multi-series-line-chart-with-varying-dashes
-   */
-
-  /*
-   ** opacity Encoding allows to define rules for each line's opacity
-   */
-  const lines = yAxis.map((y) => ({
-    mark: {
-      type: 'line',
-      ...lineConfig,
-    },
-    encoding: {
-      y,
-      strokeDash: strokeDashEncodingConfig,
-      opacity: opacityEncodingConfig,
-    },
-  }));
-  const currentTimeTrendline = {
-    mark: {
-      type: 'rule',
-      style: 'ruleCurrentTime',
-      color: 'white',
-      opacity: 0.2,
-    },
-    encoding: {
-      x: {
-        value: width / 2,
-      },
-      y: {
-        value: height,
-      },
-      y2: {
-        value: 0,
-      },
-    },
-  };
-  const topTrendline = {
-    mark: {
-      type: 'rule',
-      style: 'ruleTop',
-      color: 'orange',
-      opacity: 0.2,
-    },
-    encoding: {
-      y: {
-        aggregate: 'max',
-        field: 'capacity',
-        type: 'quantitative',
-      },
-      x: {
-        value: 0,
-      },
-      x2: {
-        value: width,
-      },
-    },
-  };
-  const spec = {
-    data: {
-      values: data,
-    },
-    encoding: {
-      x: xAxis,
-      color,
-      // To disable tooltips for a particular single view specification, you can set the "tooltip" property of a mark definition block to null.
-      tooltip: tooltip ? [xAxis, ...yAxis] : null,
-    },
-    height,
-    width,
-    layer: [...lines],
-    ...rest,
-  };
-
-  if (tooltip) {
-    spec.layer.push(tooltipConfig || trendline);
-  }
-
-  if (displayTrendLine) {
-    spec.layer.push(currentTimeTrendline);
-    spec.layer.push(topTrendline);
-  }
-
-  return (
-    <VegaChart id={id} spec={spec} theme={tooltipTheme || 'light'}></VegaChart>
-  );
-}
-
-export { LineChart };