@scality/core-ui 0.115.0

package/stories/Select/selectv2.stories.tsx

@@ -0,0 +1,169 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { Icon } from '../../src/lib/components/icon/Icon.component';
+import { Modal } from '../../src/lib/components/modal/Modal.component';
+import { Select } from '../../src/lib/components/selectv2/Selectv2.component';
+import { Wrapper } from '../common';
+import { Meta, StoryObj } from '@storybook/react';
+
+type SelectStory = StoryObj<typeof Select>;
+const meta: Meta<typeof Select> = {
+  title: 'Components/Inputs/Select',
+  component: Select,
+  decorators: [
+    (story) => <Wrapper style={{ minHeight: '15rem' }}>{story()}</Wrapper>,
+  ],
+};
+
+export default meta;
+const sizes = ['1/3', '1/2', '2/3', '1'] as const;
+
+const SelectWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  min-height: 20rem;
+  height: 100%;
+  justify-content: space-between;
+`;
+
+const generateOptions = (n = 10) =>
+  Array.from(new Array(n), (_, index) => (
+    <Select.Option
+      key={index}
+      value={`Option${index + 1}`}
+      icon={index % 5 === 0 ? <Icon name={'Check'} /> : null}
+    >{`Option ${index + 1}`}</Select.Option>
+  ));
+
+const optionsWithSearchBar = generateOptions(25);
+const optionsWithoutSearchBar = generateOptions(7);
+const defaultOptions = generateOptions(4);
+const thousandsOfOptions = generateOptions(1000);
+const optionsWithDisabledWithoutMessage = optionsWithSearchBar.map(
+  (option, index) => {
+    if (index % 3 === 0) {
+      return React.cloneElement(option, {
+        disabled: true,
+      });
+    }
+    return option;
+  },
+);
+const optionsWithDisabledWithMessage = optionsWithDisabledWithoutMessage.map(
+  (option, index) => {
+    if (index % 3 === 0) {
+      return React.cloneElement(option, {
+        disabled: true,
+        disabledReason: "This option can't be selected for some reason",
+      });
+    }
+    return option;
+  },
+);
+
+export const Playground: SelectStory = {
+  args: {
+    children: defaultOptions,
+    placeholder: 'Playground',
+  },
+};
+
+export const WithoutOptions: SelectStory = {
+  args: {
+    children: [],
+    placeholder: 'No options',
+  },
+};
+
+export const DisabledSelect: SelectStory = {
+  args: {
+    disabled: true,
+    defaultValue: defaultOptions[0].props.value,
+    children: defaultOptions,
+  },
+};
+
+export const WithScrollbar: SelectStory = {
+  name: 'More than 4 items',
+  args: {
+    children: optionsWithoutSearchBar,
+  },
+};
+
+export const WithSearchBar: SelectStory = {
+  args: {
+    children: optionsWithSearchBar,
+  },
+};
+
+export const LotsOfOptions: SelectStory = {
+  args: {
+    children: thousandsOfOptions,
+  },
+};
+export const WithDisabledOptionsWithoutMessage: SelectStory = {
+  name: 'Options disabled',
+  args: {
+    children: optionsWithDisabledWithoutMessage,
+  },
+};
+
+export const WithDisabledOptionsWithMessage: SelectStory = {
+  name: 'Options disabled with message',
+  args: {
+    children: optionsWithDisabledWithMessage,
+  },
+};
+
+export const DifferentSizes: SelectStory = {
+  name: 'Sizes',
+  render: (args) => (
+    <SelectWrapper>
+      {sizes.map((size) => (
+        <Select key={size} size={size} {...args}></Select>
+      ))}
+    </SelectWrapper>
+  ),
+  args: {
+    children: defaultOptions,
+  },
+};
+
+export const InsideModal: SelectStory = {
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+      <>
+        <button onClick={() => setIsOpen(true)}>Open modal</button>
+
+        {isOpen && (
+          <Modal isOpen title="select" close={() => setIsOpen(false)}>
+            <Select menuPosition="fixed" {...args}></Select>
+          </Modal>
+        )}
+      </>
+    );
+  },
+  args: {
+    children: optionsWithoutSearchBar,
+  },
+};
+
+export const NotEnoughPlaceAtTheBottom: SelectStory = {
+  name: 'Menu open at the top',
+  render: (args) => (
+    <div
+      style={{
+        display: 'flex',
+        minHeight: '12rem',
+        height: '100%',
+        alignItems: 'flex-end',
+      }}
+    >
+      <Select {...args}></Select>
+    </div>
+  ),
+  args: {
+    children: optionsWithSearchBar,
+  },
+};

package/stories/areachart.stories.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+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/banner.stories.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { Banner } from '../src/lib/components/banner/Banner.component';
+import { Icon } from '../src/lib/components/icon/Icon.component';
+import { Wrapper } from './common';
+import { iconArgType } from './controls';
+
+export default {
+  title: 'Components/Feedback/Banner',
+  component: Banner,
+  decorators: [(story) => <Wrapper>{story()}</Wrapper>],
+  args: {
+    icon: 'Exclamation-triangle',
+  },
+  argTypes: {
+    icon: iconArgType,
+  },
+};
+
+export const Playground = {
+  render: ({ icon, variant, children, ...args }) => {
+    return (
+      <Banner
+        icon={icon && <Icon name={icon}></Icon>}
+        variant={variant}
+        children={children}
+        {...args}
+      ></Banner>
+    );
+  },
+  args: {
+    variant: 'base',
+    children: 'Some text explaining what happened',
+  },
+  argTypes: {
+    variant: { control: { disable: false } },
+    title: { control: { disable: false } },
+    children: { control: { disable: false } },
+    icon: { control: { disable: false } },
+  },
+};
+
+export const Default = {
+  ...Playground,
+  args: {
+    children: 'There is an alert',
+    variant: 'base',
+    icon: undefined,
+  },
+};
+
+export const SuccessBanner = {
+  ...Playground,
+  args: {
+    variant: 'success',
+    title: 'Success',
+    children: 'There is a success',
+  },
+};
+
+export const WarningBanner = {
+  ...Playground,
+  args: {
+    variant: 'warning',
+    title: 'Warning',
+    children: 'There is a warning',
+  },
+};
+export const ErrorBanner = {
+  ...Playground,
+  args: {
+    variant: 'danger',
+    title: 'Error',
+    children: 'There is an error',
+  },
+};

package/stories/barchart.stories.tsx

@@ -0,0 +1,148 @@
+import React from 'react';
+import { BarChart } from '../src/lib/components/barchart/BarChart.component';
+import { Wrapper } from './common';
+import {
+  verticalStackedData,
+  horizontalStackedData,
+  barchartData,
+} from './data/barchart';
+import { SyncedCursorCharts } from '../src/lib/components/vegachartv2/SyncedCursorCharts';
+
+import { Component } from '@storybook/blocks';
+
+const width = 800;
+// the size control the size of each small item of the bar
+
+const barConfig = {
+  cornerRadius: 8,
+  size: 12,
+};
+// props for vertical stacked bar chart
+const idVerticalStacked = 'vis_vertical_stacked';
+
+// props for vertical stacked bar chart
+
+const verticalStackedBarChartArgs = {
+  id: 'vis_vertical_stacked',
+  xAxis: {
+    field: 'xlabel',
+    type: 'ordinal',
+    title: null,
+    axis: {
+      labelAngle: 0,
+    },
+    sort: {
+      order: 'ascending',
+    },
+  },
+  yAxis: {
+    aggregate: 'count',
+    field: '*',
+    title: null,
+    type: 'quantitative',
+    scale: {
+      padding: 1,
+    },
+  },
+  color: {
+    field: 'status',
+    type: 'nominal',
+    legend: {
+      direction: 'horizontal',
+      orient: 'top',
+      title: null,
+      symbolType: 'circle',
+      columnPadding: 50,
+    },
+    scale: {
+      domain: ['2XX', '401', '404', '4XX', '503', '5XX'],
+      range: ['#4BE4E2', '#E45834', '#FEFA52', '#968BFF', '#BE2543', '#DC90F1'],
+    },
+  },
+  data: verticalStackedData,
+  barConfig,
+};
+
+// props for horizontal stacked bar chart
+const horizontalStackedChartArgs = {
+  id: 'vis_horizontal_stacked',
+  xAxis: {
+    aggregate: 'sum',
+    field: 'yield',
+    type: 'quantitative',
+  },
+  yAxis: {
+    field: 'variety',
+    type: 'nominal',
+  },
+  color: {
+    field: 'site',
+    type: 'nominal',
+  },
+  data: horizontalStackedData,
+};
+
+// props for vertical bar chart props
+const verticalBarChartArgs = {
+  id: 'vis_vertical',
+  xAxis: {
+    field: 'a',
+    type: 'ordinal',
+  },
+  yAxis: {
+    field: 'b',
+    type: 'quantitative',
+  },
+  data: barchartData,
+};
+
+//props for horizontal bar chart
+const horizontalBarChartArgs = {
+  id: 'vis_horizontal',
+  xAxis: {
+    field: 'b',
+    type: 'quantitative',
+  },
+  yAxis: {
+    field: 'a',
+    type: 'ordinal',
+  },
+  data: barchartData,
+};
+
+export default {
+  title: 'Components/Data Display/Charts/BarChart',
+  component: BarChart,
+  decorators: [
+    (story: Component) => (
+      <Wrapper
+        style={{ minHeight: '30vh', padding: '3rem', backgroundColor: 'white' }}
+      >
+        <SyncedCursorCharts>{story()}</SyncedCursorCharts>
+      </Wrapper>
+    ),
+  ],
+  argTypes: {
+    data: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+
+export const verticalStackedChart = {
+  args: { ...verticalStackedBarChartArgs },
+};
+
+export const horizontalStackedchart = {
+  args: { ...horizontalStackedChartArgs },
+};
+
+export const verticalBarChart = {
+  args: { ...verticalBarChartArgs },
+};
+
+export const horizontalBarChart = {
+  args: { ...horizontalBarChartArgs },
+};

package/stories/box.stories.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box } from '../src/lib/components/box/Box';
+
+const info = {
+  title: 'Components/Styling/Box',
+  component: Box,
+  decorators: [(story) => <HighlightBorder>{story()}</HighlightBorder>],
+};
+
+export default info;
+
+const HighlightBorder = styled.div`
+  border: 1px solid red;
+  div,
+  span,
+  p {
+    border: 1px solid blue;
+  }
+`;
+
+export const margin = {
+  render: ({}) => {
+    return (
+      <>
+        <Box m={0}>Props m 0 = 0</Box>
+        <Box m={1}>Props m 1 = 0.071rem </Box>
+        <Box m={2}>Props m 2 = 0.143rem </Box>
+        <Box m={3}>Props m 3 = 0.286rem </Box>
+        <Box m={4}>Props m 4 = 0.571rem </Box>
+        <Box m={5}>Props m 5 = 0.71rem</Box>
+        <Box m={6}>Props m 6 = 0.857rem</Box>
+        <Box m={7}>Props m 7 = 1rem</Box>
+        <Box m={8}>Props m 8 = 1.143rem</Box>
+        <Box m={9}>Props m 9 = 1.429rem</Box>
+        <Box m={10}>Props m 10 = 1.714rem</Box>
+        <Box m={11}>Props m 11 = 2rem</Box>
+        <Box m={12}>Props m 12 = 2.286rem</Box>
+        <Box m={13}>Props m 13 = 2.857rem</Box>
+        <Box m={14}>Props m 14 = 14px</Box>
+      </>
+    );
+  },
+};
+export const font = {
+  render: ({}) => {
+    return (
+      <>
+        <Box fontSize="smaller">Smaller font</Box>
+        <Box fontSize="small">Small font</Box>
+        <Box fontSize="base">Base font</Box>
+        <Box fontSize="large">large font</Box>
+        <Box fontSize="larger">larger font</Box>
+        <Box fontSize="huge">huge font</Box>
+        <Box fontSize="massive">massive font</Box>
+      </>
+    );
+  },
+};
+export const position = {
+  render: ({}) => {
+    return (
+      <HighlightBorder>
+        <Box display="flex" justifyContent="space-between" fontSize="smaller">
+          <Box fontSize="base">Left</Box>
+          <Box fontSize="base">Justify Content space between</Box>
+          <Box fontSize="base">Right</Box>
+        </Box>
+        <Box
+          display="flex"
+          justifyContent="space-between"
+          alignItems="center"
+          height="100px"
+          fontSize="smaller"
+        >
+          <Box display="flex" height="50px" fontSize="base">
+            Left
+          </Box>
+          <Box display="flex" height="50px" fontSize="base">
+            Justify Content space between
+          </Box>
+          <Box display="flex" height="50px" fontSize="base">
+            Right
+          </Box>
+        </Box>
+        <Box display="flex" gap={6} height="100px" fontSize="smaller">
+          <Box display="flex" height="50px" fontSize="base">
+            Left
+          </Box>
+          <Box display="flex" height="50px" fontSize="base">
+            Gap 6
+          </Box>
+          <Box display="flex" height="50px" fontSize="base">
+            Right
+          </Box>
+        </Box>
+      </HighlightBorder>
+    );
+  },
+};
+export const colors = {
+  render: ({}) => {
+    return (
+      <HighlightBorder>
+        <Box color="red">red</Box>
+        <Box bg="backgroundLevel2" color="textPrimary">
+          textPrimary with background color at backgroundLevel2
+        </Box>
+        <Box color="textSecondary">textSecondary</Box>
+        <Box color="textLink">textLink</Box>
+      </HighlightBorder>
+    );
+  },
+};

package/stories/breadcrumb.stories.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Breadcrumb } from '../src/lib/components/breadcrumb/Breadcrumb.component';
+import { Wrapper } from './common';
+export default {
+  title: 'Components/Navigation/Breadcrumb',
+  component: Breadcrumb,
+  decorators: [
+    (story) => <Wrapper style={{ minHeigth: '10vh' }}>{story()}</Wrapper>,
+  ],
+  argTypes: {
+    paths: {
+      control: false,
+    },
+  },
+};
+export const Default = {
+  args: {
+    paths: [
+      <a href="home">home</a>,
+      <a href="cluster">cluster_1</a>,
+      <a href="node" title={'node'}>
+        node
+      </a>,
+      <label>volumes</label>,
+    ],
+  },
+};
+export const longNameBreadCrumb = {
+  args: {
+    paths: [
+      <a href="home">home</a>,
+      <a href="cluster">cluster_1</a>,
+      <a
+        href="node"
+        title={'node_longlonglonglonglonglonglonglonglonglonglong'}
+      >
+        node_longlonglonglonglonglonglonglonglonglonglong
+      </a>,
+      <label>volumes</label>,
+    ],
+  },
+};