@scality/core-ui 0.166.0 → 0.167.0

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

package/src/lib/components/multiselect/MultiSelect.component.tsx

@@ -1,158 +0,0 @@
-import styled from 'styled-components';
-import { spacing } from '../../spacing';
-import { fontSize, fontWeight } from '../../style/theme';
-import { getThemePropSelector } from '../../utils';
-import { Icon } from '../icon/Icon.component';
-import { Button } from './../button/Button.component';
-import { Checkbox } from './../checkbox/Checkbox.component';
-import { Select } from './../select/Select.component';
-
-export type ItemProps = {
-  selected?: boolean;
-  label: string;
-  description?: string;
-  onSelect?: (arg0: any, arg1: any) => void;
-  //on checkbox click
-  onItemRemove?: (arg0: any, arg1: any) => void;
-};
-export type OptionProps = {
-  label: string;
-  value: string | number;
-};
-export type SearchProps = {
-  placeholder?: string;
-  options: Array<OptionProps>;
-  //The options displayed in search suggestion
-  onSelect: (arg0: any) => void;
-  //on option click
-  onAdd?: (arg0: any) => void;
-  selectedOption: any;
-};
-type MultiSelectProps = {
-  title?: string;
-  items: Array<ItemProps>;
-  search?: SearchProps;
-  onItemRemove?: (arg0: any, arg1: any) => void; //on item remove button click
-};
-const MultiSelectContainer = styled.div`
-  color: ${getThemePropSelector('textPrimary')};
-`;
-const MultiSelectTitle = styled.h3`
-  padding: ${spacing.r16} 0;
-  margin: 0;
-  font-weight: ${fontWeight.bold};
-  font-size: ${fontSize.large};
-`;
-const MultiSelectItemContainer = styled.div`
-  margin: ${spacing.r4} 0;
-  padding: ${spacing.r8} 0;
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid gray;
-  &:last-child {
-    border: none;
-  }
-`;
-const MultiSelectSearchContainer = styled.div`
-  display: flex;
-  align-items: center;
-  .sc-select-container {
-    width: 100%;
-  }
-  .sc-button {
-    margin: 0 ${spacing.r8};
-  }
-`;
-const MultiSelectItemLeft = styled.div`
-  .sc-checkbox,
-  .sc-button {
-    margin: 0 ${spacing.r8};
-  }
-`;
-const MultiSelectItemCenter = styled.div`
-  display: flex;
-  flex-grow: 1;
-  align-items: center;
-  justify-content: space-between;
-`;
-const MultiSelectItemRight = styled.div`
-  padding: 0 ${spacing.r16};
-`;
-const MultiSelectItemLabel = styled.span`
-  font-size: ${fontSize.large};
-`;
-const MultiSelectItemDescription = styled.span``;
-
-function MultiSelectItem(props: ItemProps) {
-  const { selected, label, description, onItemRemove, onSelect } = props;
-  return (
-    <MultiSelectItemContainer className="sc-multi-select-item">
-      <MultiSelectItemLeft className="sc-multi-select-item-left">
-        {typeof selected === 'boolean' && onSelect && (
-          <Checkbox
-            checked={selected}
-            onChange={(event) => onSelect(label, event)}
-          />
-        )}
-      </MultiSelectItemLeft>
-      <MultiSelectItemCenter className="sc-multi-select-item-center">
-        <MultiSelectItemLabel className="sc-multi-select-item-label">
-          {label}
-        </MultiSelectItemLabel>
-        {description && (
-          <MultiSelectItemDescription className="sc-multi-select-item-description">
-            {description}
-          </MultiSelectItemDescription>
-        )}
-      </MultiSelectItemCenter>
-      <MultiSelectItemRight className="sc-multi-select-item-right">
-        {onItemRemove && (
-          <Button
-            inverted={true}
-            variant="buttonDelete"
-            onClick={(event) => onItemRemove(label, event)}
-            icon={<Icon name="Delete" />}
-          />
-        )}
-      </MultiSelectItemRight>
-    </MultiSelectItemContainer>
-  );
-}
-
-function MultiSelectSearch(props: SearchProps) {
-  const { selectedOption, onSelect, onAdd, ...rest } = props;
-  return (
-    <MultiSelectSearchContainer className="sc-multi-select-list-search">
-      <Select
-        // @ts-ignore
-        onChange={onSelect}
-        value={selectedOption}
-        {...rest}
-      />
-      {onAdd && <Button onClick={onAdd} icon={<Icon name="Create-add" />} />}
-    </MultiSelectSearchContainer>
-  );
-}
-
-function MultiSelectList({
-  title = '',
-  items = [],
-  search,
-  onItemRemove,
-}: MultiSelectProps) {
-  return (
-    <MultiSelectContainer className="sc-multi-select-list">
-      {title && <MultiSelectTitle>{title}</MultiSelectTitle>}
-      {search && <MultiSelectSearch {...search} />}
-      {items.map((item, index) => (
-        <MultiSelectItem
-          key={`sc-multi-select-item-${index}`}
-          onItemRemove={onItemRemove}
-          {...item}
-        />
-      ))}
-    </MultiSelectContainer>
-  );
-}
-
-export const MultiSelect = MultiSelectList;

package/src/lib/components/select/Select.component.tsx

@@ -1,98 +0,0 @@
-import ReactSelect from 'react-select';
-import styled from 'styled-components';
-
-import { fontSize, fontWeight, gray, zIndex } from '../../style/theme';
-import { getThemePropSelector } from '../../utils';
-export type Item = {
-  label: string;
-  value: string | number;
-};
-type Items = Array<Item>;
-type Props = {
-  id?: any;
-  options: Items;
-  formatOptionLabel?: (arg0: any) => JSX.Element;
-};
-const SelectContainer = styled.div`
-  font-size: ${fontSize.base};
-  .sc-select__control {
-    background-color: ${getThemePropSelector('backgroundLevel1')};
-    border-radius: 4px;
-    border: 1px solid ${getThemePropSelector('border')};
-    height: auto;
-
-    .sc-select__placeholder,
-    .sc-select__single-value {
-      color: ${getThemePropSelector('textSecondary')};
-    }
-    &.sc-select__control--is-focused {
-      border-color: ${getThemePropSelector('selectedActive')};
-      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
-        0 0 0 1px rgba(0, 126, 255, 0.1);
-      outline: none;
-    }
-    .sc-select__indicator {
-      color: ${getThemePropSelector('textSecondary')};
-      &.sc-select__dropdown-indicator:hover {
-        color: ${getThemePropSelector('selectedActive')};
-      }
-      &.sc-select__clear-indicator:hover {
-        color: ${gray};
-      }
-    }
-    .sc-select__multi-value__remove {
-      border-radius: 0;
-      color: ${getThemePropSelector('textSecondary')};
-      background-color: ${getThemePropSelector('backgroundLevel4')};
-      &:hover {
-        color: ${gray};
-      }
-    }
-    .sc-select__multi-value__label {
-      border-radius: 0;
-      color: ${getThemePropSelector('selectedActive')};
-      background-color: ${getThemePropSelector('backgroundLevel4')};
-      vertical-align: initial;
-    }
-  }
-  .sc-select__menu {
-    background-color: ${getThemePropSelector('backgroundLevel1')};
-    color: ${getThemePropSelector('textSecondary')};
-    border: 1px solid ${getThemePropSelector('selectedActive')};
-    box-sizing: border-box;
-    overflow: hidden;
-    z-index: ${zIndex.dropdown};
-    .sc-select__option {
-      &.sc-select__option--is-focused {
-        background-color: ${getThemePropSelector('backgroundLevel1')};
-      }
-      &.sc-select__option--is-selected {
-        background-color: ${getThemePropSelector('backgroundLevel1')};
-        color: ${getThemePropSelector('selectedActive')};
-        font-weight: ${fontWeight.bold};
-      }
-    }
-  }
-`;
-
-const defaultFormatOptionLabel = ({ label, ...rest }) => (
-  <div className="sc-select-option-label" {...rest}>
-    {label}
-  </div>
-);
-
-function SelectBox({ options, formatOptionLabel, ...rest }: Props) {
-  return (
-    <SelectContainer className="sc-select-container">
-      <ReactSelect
-        className="sc-select"
-        classNamePrefix="sc-select"
-        options={options}
-        formatOptionLabel={formatOptionLabel || defaultFormatOptionLabel}
-        {...rest}
-      />
-    </SelectContainer>
-  );
-}
-
-export const Select = SelectBox;

package/src/lib/components/spacedbox/SpacedBox.ts

@@ -1,116 +0,0 @@
-import styled from 'styled-components';
-import { spacing } from '../../style/theme';
-type SpacingValue = 0 | 1 | 2 | 4 | 8 | 12 | 14 | 16 | 20 | 24 | 28 | 32;
-export type Props = {
-  m?: SpacingValue;
-  mt?: SpacingValue;
-  mr?: SpacingValue;
-  mb?: SpacingValue;
-  ml?: SpacingValue;
-  mx?: SpacingValue;
-  my?: SpacingValue;
-  p?: SpacingValue;
-  pt?: SpacingValue;
-  pr?: SpacingValue;
-  pb?: SpacingValue;
-  pl?: SpacingValue;
-  px?: SpacingValue;
-  py?: SpacingValue;
-};
-type PropsName =
-  | 'm'
-  | 'mt'
-  | 'mr'
-  | 'mb'
-  | 'ml'
-  | 'mx'
-  | 'my'
-  | 'p'
-  | 'pt'
-  | 'pr'
-  | 'pb'
-  | 'pl'
-  | 'px'
-  | 'py';
-type CSSField =
-  | 'margin'
-  | 'margin-top'
-  | 'margin-right'
-  | 'margin-bottom'
-  | 'margin-left'
-  | 'padding'
-  | 'padding-top'
-  | 'padding-right'
-  | 'padding-bottom'
-  | 'padding-left';
-const validValue = [0, 1, 2, 4, 8, 12, 14, 16, 20, 24, 28, 32];
-
-const createSpacingFn =
-  (propsName: PropsName, spacingFields: Array<CSSField>) => (props: Props) => {
-    if (!props[propsName] && props[propsName] !== 0) {
-      return null;
-    }
-
-    //@ts-ignore -- this is ensured below
-    let value: SpacingValue = 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: CSSField) => `${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 };