@scality/core-ui 0.166.0 → 0.167.0

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

package/stories/areachart.stories.tsx

@@ -1,120 +0,0 @@
-import { AreaChart } from '../src/lib/components/areachart/AreaChart.component';
-import { area_charts } from './data/areachart';
-import { Wrapper } from './common';
-const xAxis_area_chart = {
-  field: 'time',
-  type: 'temporal',
-  timeUnit: 'yearmonthdatehoursminutes',
-  title: 'time',
-  axis: null,
-};
-const yAxis_area_chart = [
-  {
-    field: 'Bandwidth',
-    type: 'quantitative',
-    color: '#968BFF',
-    axis: {
-      title: null,
-      ticks: false,
-      labels: false,
-    },
-  },
-  {
-    field: 'Bandwidth',
-    type: 'quantitative',
-    color: '#F6B288',
-    axis: {
-      title: null,
-      ticks: false,
-      labels: false,
-    },
-  },
-];
-const color_area_chart = {
-  field: 'Average',
-  type: 'nominal',
-  legend: {
-    direction: 'horizontal',
-    orient: 'bottom',
-    title: null,
-    labelFontSize: 15,
-    columnPadding: 50,
-    symbolStrokeWidth: 5,
-  },
-  domain: ['AvgIn', 'AvgOut'],
-  scale: {
-    range: ['#968BFF', '#F6B288'],
-  },
-};
-const area = {
-  transform: [
-    {
-      filter: "datum.Average==='AvgOut'",
-    },
-  ],
-  mark: {
-    opacity: 0.3,
-    type: 'area',
-  },
-  encoding: {
-    x: {
-      field: 'time',
-      type: 'temporal',
-      timeUnit: 'yearmonthdatehoursminutes',
-      title: 'time',
-      axis: null,
-    },
-    y: {
-      field: 'Bandwidth',
-      type: 'quantitative',
-    },
-    y2: {
-      value: 0,
-    },
-  },
-};
-const area2 = {
-  transform: [
-    {
-      filter: "datum.Average==='AvgIn'",
-    },
-  ],
-  mark: {
-    opacity: 0.3,
-    type: 'area',
-  },
-  encoding: {
-    x: {
-      field: 'time',
-      type: 'temporal',
-      timeUnit: 'yearmonthdatehoursminutes',
-      title: 'time',
-      axis: null,
-    },
-    y: {
-      field: 'Bandwidth',
-      type: 'quantitative',
-    },
-    y2: {
-      value: 0,
-    },
-  },
-};
-const areas = [area, area2];
-const id_area_chart = 'vis_area_chart';
-export default {
-  title: 'Components/Data Display/Charts/Area Chart',
-  component: AreaChart,
-};
-
-export const Default = {
-  args: {
-    id: id_area_chart,
-    data: area_charts,
-    xAxis: xAxis_area_chart,
-    yAxis: yAxis_area_chart,
-    color: color_area_chart,
-    areas,
-    width: 800,
-  },
-};

package/stories/chips.stories.tsx

@@ -1,107 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import React from 'react';
-import { Chips } from '../src/lib/components/chips/Chips.component';
-import { Icon } from '../src/lib/components/icon/Icon.component';
-import { Wrapper } from './common';
-import { iconArgType } from './controls';
-
-export default {
-  title: 'Components/Deprecated/Chips',
-  component: Chips,
-  decorators: [
-    (story) => (
-      <Wrapper
-        style={{ minHeight: '10vh', padding: '3rem' }}
-        className="storybook-chips"
-      >
-        {story()}
-      </Wrapper>
-    ),
-  ],
-  argTypes: {
-    icon: iconArgType,
-  },
-};
-
-const Template = {
-  render: ({ variant, text, icon, ...args }) => {
-    return (
-      <>
-        {variant.map((status) => {
-          return (
-            <Chips
-              key={status}
-              variant={status}
-              icon={icon && <Icon name={icon}></Icon>}
-              text={text}
-              {...args}
-            />
-          );
-        })}
-      </>
-    );
-  },
-  args: {
-    variant: [
-      'infoPrimary',
-      'statusHealthy',
-      'statusWarning',
-      'statusCritical',
-    ],
-    text: 'Basic Chip',
-  },
-};
-
-export const Playground = {
-  render: ({ icon, text, ...args }) => {
-    return (
-      <Chips icon={icon && <Icon name={icon}></Icon>} text={text} {...args} />
-    );
-  },
-  args: {
-    text: 'Playground',
-  },
-};
-
-export const BasicChips = {
-  ...Template,
-};
-
-export const ClickableChips = {
-  ...Template,
-  args: {
-    ...Template.args,
-    text: 'Clickable Chip',
-    icon: 'Check',
-    onClick: action('Clickable Chip'),
-  },
-};
-
-export const DeletableChips = {
-  ...Template,
-  args: {
-    ...Template.args,
-    icon: 'Delete',
-    onRemove: action('Deletable Chip'),
-    text: 'Deletable',
-  },
-};
-
-export const DifferentsSizeChips = {
-  render: (args) => {
-    return (
-      <>
-        <Chips text="Smaller" size="smaller" {...args} />
-        <Chips text="Small" size="small" {...args} />
-        <Chips text="Base" size="base" {...args} />
-        <Chips text="Large" size="large" {...args} />
-        <Chips text="Larger" size="larger" {...args} />
-      </>
-    );
-  },
-  args: {
-    variant: 'statusHealthy',
-    icon: <i className="fas fa-star" />,
-    onClick: action('Clickable Chip'),
-  },
-};

package/stories/cloudprogressbar.stories.tsx

@@ -1,93 +0,0 @@
-import React from 'react';
-import { CloudProgressBar } from '../src/lib/components/cloudprogressbar/CloudProgressBar.component';
-import { Wrapper, Title, SubTitle } from './common';
-export default {
-  title: 'Components/Deprecated/CloudProgressBar',
-  component: CloudProgressBar,
-  decorators: [
-    (story) => (
-      <Wrapper style={{ minHeight: '10vh', padding: '3rem' }}>
-        {story()}
-      </Wrapper>
-    ),
-  ],
-  render: ({ containerSize, percentage, borderSize, ...args }) => (
-    <div
-      style={{
-        width: containerSize,
-        margin: '20px 0 20px 0',
-      }}
-    >
-      <CloudProgressBar
-        percentage={percentage}
-        borderSize={borderSize}
-        {...args}
-      >
-        <div
-          style={{
-            position: 'absolute',
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%,-50%)',
-          }}
-        >
-          <Title>{percentage}%</Title>
-          <SubTitle>of the quotas has been reached.</SubTitle>
-        </div>
-      </CloudProgressBar>
-    </div>
-  ),
-  args: {
-    containerSize: '300px',
-    percentage: 30,
-    borderSize: '1.5px',
-    cloudColor: 'yellow',
-    progressCloudColor: 'blue',
-  },
-  argTypes: {
-    containerSize: {
-      description: 'The container width determines the cloud size',
-    },
-    cloudColor: {
-      control: {
-        type: 'color',
-      },
-    },
-    progressCloudColor: {
-      control: {
-        type: 'color',
-      },
-    },
-  },
-};
-export const Default = {};
-
-export const DifferentSize = {
-  args: {
-    containerSize: '400px',
-    percentage: 50,
-    borderSize: '1.5px',
-    cloudColor: '#ccc',
-    progressCloudColor: '#000',
-  },
-};
-
-export const DifferentColor = {
-  args: {
-    containerSize: '500px',
-    percentage: 80,
-    borderSize: '2px',
-    cloudColor: '#3d383a',
-    progressCloudColor: '#83d136',
-  },
-};
-
-export const HugeSize = {
-  args: {
-    containerSize: '700px',
-    percentage: 70,
-    borderSize: '2.5px',
-    cloudColor: '#BDFFB0',
-    progressCloudColor: '#A3FFCB',
-  },
-};

package/stories/collapsiblepanel.stories.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-import { action } from '@storybook/addon-actions';
-import { Wrapper } from './common';
-import { CollapsiblePanel } from '../src/lib/components/collapsiblepanel/CollapsiblePanel.component';
-const items = [<i className="fas fa-carrot" />, 'banana', 'apple', 'grape'];
-export default {
-  title: 'Components/Deprecated/Navigation/CollapsiblePanel',
-  component: CollapsiblePanel,
-  decorators: [
-    (story) => (
-      <Wrapper style={{ minHeight: '30vh', padding: '3rem' }}>
-        {story()}
-      </Wrapper>
-    ),
-  ],
-  args: {
-    headerItems: items,
-    children: 'orange',
-  },
-};
-
-export const Collapsed = {
-  args: {
-    expanded: false,
-    onHeaderClick: action('Expand panel'),
-  },
-};
-
-export const Expanded = {
-  args: {
-    expanded: true,
-    onHeaderClick: action('Collapse panel'),
-  },
-};
-// export const Default = {
-//   render: ({}) => {
-//     return (
-//       <Wrapper className="storybook-collapsiblepanel">
-//         <Title>Collapsed</Title>
-//         <CollapsiblePanel
-//           expanded={false}
-//           headerItems={items}
-//           onHeaderClick={action('Expand panel')}
-//           children="orange"
-//         />
-
-//         <Title>Expanded</Title>
-//         <CollapsiblePanel
-//           headerItems={items}
-//           expanded={true}
-//           onHeaderClick={action('Colapse panel')}
-//           children="orange"
-//         />
-//       </Wrapper>
-//     );
-//   },
-// };