@scality/core-ui 0.165.0 → 0.167.0

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>
-//     );
-//   },
-// };

package/stories/data/areachart.ts

@@ -1,122 +0,0 @@
-export const area_charts = [
-  {
-    time: '2019-10-01 00:00:00',
-    Average: 'AvgIn',
-    Bandwidth: 1.4,
-  },
-  {
-    time: '2019-10-01 00:00:00',
-    Average: 'AvgOut',
-    Bandwidth: 1.2,
-  },
-  {
-    time: '2019-10-01 00:15:00',
-    Average: 'AvgIn',
-    Bandwidth: 0.8,
-  },
-  {
-    time: '2019-10-01 00:15:00',
-    Average: 'AvgOut',
-    Bandwidth: 1.2,
-  },
-  {
-    time: '2019-10-01 00:30:00',
-    Average: 'AvgIn',
-    Bandwidth: 0.7,
-  },
-  {
-    time: '2019-10-01 00:30:00',
-    Average: 'AvgOut',
-    Bandwidth: 2.1,
-  },
-  {
-    time: '2019-10-01 00:45:00',
-    Average: 'AvgIn',
-    Bandwidth: 0.8,
-  },
-  {
-    time: '2019-10-01 00:45:00',
-    Average: 'AvgOut',
-    Bandwidth: 0.9,
-  },
-  {
-    time: '2019-10-01 01:00:00',
-    Average: 'AvgIn',
-    Bandwidth: 1.3,
-  },
-  {
-    time: '2019-10-01 01:00:00',
-    Average: 'AvgOut',
-    Bandwidth: 0.8,
-  },
-  {
-    time: '2019-10-01 01:15:00',
-    Average: 'AvgIn',
-    Bandwidth: 0.8,
-  },
-  {
-    time: '2019-10-01 01:15:00',
-    Average: 'AvgOut',
-    Bandwidth: 2,
-  },
-  {
-    time: '2019-10-01 01:30:00',
-    Average: 'AvgIn',
-    Bandwidth: 0.7,
-  },
-  {
-    time: '2019-10-01 01:30:00',
-    Average: 'AvgOut',
-    Bandwidth: 0.2,
-  },
-  {
-    time: '2019-10-01 01:45:00',
-    Average: 'AvgIn',
-    Bandwidth: 0.8,
-  },
-  {
-    time: '2019-10-01 01:45:00',
-    Average: 'AvgOut',
-    Bandwidth: 0.9,
-  },
-  {
-    time: '2019-10-01 02:00:00',
-    Average: 'AvgIn',
-    Bandwidth: 1.4,
-  },
-  {
-    time: '2019-10-01 02:00:00',
-    Average: 'AvgOut',
-    Bandwidth: 1.2,
-  },
-  {
-    time: '2019-10-01 02:15:00',
-    Average: 'AvgIn',
-    Bandwidth: 0.8,
-  },
-  {
-    time: '2019-10-01 02:15:00',
-    Average: 'AvgOut',
-    Bandwidth: 1.2,
-  },
-  {
-    time: '2019-10-01 02:30:00',
-    Average: 'AvgIn',
-    Bandwidth: 0.7,
-  },
-  {
-    time: '2019-10-01 02:30:00',
-    Average: 'AvgOut',
-    Bandwidth: 2.1,
-  },
-  {
-    time: '2019-10-01 02:45:00',
-    Average: 'AvgIn',
-    Bandwidth: 0.8,
-  },
-  {
-    time: '2019-10-01 02:45:00',
-    Average: 'AvgOut',
-    Bandwidth: 0.9,
-  },
-];

package/stories/data/sparklinechart.ts

@@ -1,164 +0,0 @@
-export const data = [
-  {
-    date: '2019-10-10 00:00:00',
-    y: 33,
-    symbol: 'Operation per sec',
-  },
-  {
-    date: '2019-10-10 01:00:00',
-    y: 100,
-    symbol: 'Operation per sec',
-  },
-  {
-    date: '2019-10-10 02:00:00',
-    y: 103,
-    symbol: 'Operation per sec',
-  },
-  {
-    date: '2019-10-10 03:00:00',
-    y: 350,
-    symbol: 'Operation per sec',
-  },
-  {
-    date: '2019-10-10 04:00:00',
-    y: 225,
-    symbol: 'Operation per sec',
-  },
-  {
-    date: '2019-10-10 05:00:00',
-    y: 124,
-    symbol: 'Operation per sec',
-  },
-  {
-    date: '2019-10-10 06:00:00',
-    y: 248,
-    symbol: 'Operation per sec',
-  },
-  {
-    date: '2019-10-10 07:00:00',
-    y: 99,
-    symbol: 'Operation per sec',
-  },
-];
-export const multiLineData = [
-  {
-    date: '2019-10-10 00:00:00',
-    y: 33,
-    symbol: 'CPU',
-  },
-  {
-    date: '2019-10-10 01:00:00',
-    y: 100,
-    symbol: 'CPU',
-  },
-  {
-    date: '2019-10-10 02:00:00',
-    y: 103,
-    symbol: 'CPU',
-  },
-  {
-    date: '2019-10-10 03:00:00',
-    y: 350,
-    symbol: 'CPU',
-  },
-  {
-    date: '2019-10-10 04:00:00',
-    y: 225,
-    symbol: 'CPU',
-  },
-  {
-    date: '2019-10-10 05:00:00',
-    y: 124,
-    symbol: 'CPU',
-  },
-  {
-    date: '2019-10-10 06:00:00',
-    y: 248,
-    symbol: 'CPU',
-  },
-  {
-    date: '2019-10-10 07:00:00',
-    y: 99,
-    symbol: 'CPU',
-  },
-  {
-    date: '2019-10-10 00:00:00',
-    y: 33,
-    symbol: 'Load',
-  },
-  {
-    date: '2019-10-10 01:00:00',
-    y: 100,
-    symbol: 'Load',
-  },
-  {
-    date: '2019-10-10 02:00:00',
-    y: 103,
-    symbol: 'Load',
-  },
-  {
-    date: '2019-10-10 03:00:00',
-    y: 350,
-    symbol: 'Load',
-  },
-  {
-    date: '2019-10-10 04:00:00',
-    y: 225,
-    symbol: 'Load',
-  },
-  {
-    date: '2019-10-10 05:00:00',
-    y: 124,
-    symbol: 'Load',
-  },
-  {
-    date: '2019-10-10 06:00:00',
-    y: 248,
-    symbol: 'Load',
-  },
-  {
-    date: '2019-10-10 07:00:00',
-    y: 99,
-    symbol: 'Load',
-  },
-  {
-    date: '2019-10-10 00:00:00',
-    y: 33,
-    symbol: 'Memory',
-  },
-  {
-    date: '2019-10-10 01:00:00',
-    y: 100,
-    symbol: 'Memory',
-  },
-  {
-    date: '2019-10-10 02:00:00',
-    y: 103,
-    symbol: 'Memory',
-  },
-  {
-    date: '2019-10-10 03:00:00',
-    y: 350,
-    symbol: 'Memory',
-  },
-  {
-    date: '2019-10-10 04:00:00',
-    y: 225,
-    symbol: 'Memory',
-  },
-  {
-    date: '2019-10-10 05:00:00',
-    y: 124,
-    symbol: 'Memory',
-  },
-  {
-    date: '2019-10-10 06:00:00',
-    y: 248,
-    symbol: 'Memory',
-  },
-  {
-    date: '2019-10-10 07:00:00',
-    y: 99,
-    symbol: 'Memory',
-  },
-];