@scality/core-ui 0.166.0 → 0.168.0

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

package/src/lib/components/sparkline/SparkLine.component.tsx

@@ -1,176 +0,0 @@
-import { VegaChart } from '../vegachart/VegaChart.component';
-import { yellowOrange, green } from '../../style/theme';
-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;
-};
-
-function SparkLine({
-  id,
-  title,
-  width = 300,
-  height = 80,
-  data,
-  xAxis,
-  yAxis,
-  row,
-  lineConfig,
-  sparkLineColor,
-  upTrendColor = yellowOrange,
-  bottomTrendColor = green,
-}: Props) {
-  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 <VegaChart className="sc-sparkline" id={id} spec={spec}></VegaChart>;
-}
-
-export const Sparkline = SparkLine;

package/src/lib/components/vegachart/VegaChart.component.tsx

@@ -1,146 +0,0 @@
-// @ts-nocheck
-import { useEffect, useContext, useRef } from 'react';
-import vegaEmbed, { Result } from 'vega-embed';
-import { ThemeContext, createGlobalStyle } from 'styled-components';
-import { getThemePropSelector } from '../../utils';
-export const TOP = 'top';
-export 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;
-};
-
-/* 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',
-}: Props) {
-  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<Result>();
-  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 (
-    <div id={id} className="sc-vegachart">
-      <VegaTooltipTheme />
-    </div>
-  );
-}
-
-export { VegaChart };