@scality/core-ui 0.115.0

package/stories/card.stories.tsx

@@ -0,0 +1,195 @@
+import React from 'react';
+import styled from 'styled-components';
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  CardBodyContainer,
+} from '../src/lib/components/card/Card.component';
+import { CircularProgressBar } from '../src/lib/components/circularprogressbar/CircularProgressBar.component';
+import { Text, Wrapper } from './common';
+import { brand } from '../src/lib/style/theme';
+import { action } from '@storybook/addon-actions';
+
+// RGB color in theme provoke an error, excludes from control options
+const colors = Object.keys(brand).filter((color) => !/RGB/.test(color));
+
+export default {
+  title: 'Components/Data Display/Card',
+  component: Card,
+  decorators: [
+    (story) => (
+      <Wrapper style={{ minHeight: '10vh', padding: '3rem' }}>
+        {story()}
+      </Wrapper>
+    ),
+  ],
+  argTypes: {
+    status: {
+      options: ['healthy', 'warning', 'critical'],
+    },
+    onClick: {
+      description: 'Click handler',
+    },
+    children: { table: { disable: true } },
+    headerBackgroundColor: {
+      control: { type: 'select' },
+      options: colors,
+    },
+    bodyBackgroundColor: {
+      options: colors,
+      control: { type: 'select' },
+    },
+  },
+};
+const Row = styled.div`
+  display: flex;
+  & > * {
+    margin-left: 10px;
+  }
+`;
+const defaultBody = (
+  <CircularProgressBar
+    color={brand.buttonSecondary}
+    backgroundColor={brand.textPrimary}
+    radius={30}
+    strokeWidth={5}
+    percent={60}
+  >
+    <Text
+      className="sc-circularprogressbar-text"
+      x="50%"
+      y="50%"
+      dominantBaseline="middle"
+      textAnchor="middle"
+    >
+      60%
+    </Text>
+  </CircularProgressBar>
+);
+const defaultPropsCard = {
+  width: '160px',
+  height: '140px',
+  onClick: action('Card Clicked'),
+};
+const statuses = ['healthy', 'warning', 'critical'];
+
+export const Playground = {
+  args: {
+    ...defaultPropsCard,
+    children: [
+      <CardHeader>
+        <div>RINGXcore</div>
+      </CardHeader>,
+      <CardBodyContainer>
+        <CardBody>{defaultBody}</CardBody>
+      </CardBodyContainer>,
+    ],
+    status: undefined,
+  },
+};
+
+export const NormalCards = {
+  render: (args) => {
+    return (
+      <Row>
+        {statuses.map((status) => (
+          <Card status={status} {...args} />
+        ))}
+      </Row>
+    );
+  },
+  args: {
+    ...defaultPropsCard,
+    children: [
+      <CardHeader>
+        <div>RINGXcore</div>
+      </CardHeader>,
+      <CardBodyContainer>
+        <CardBody>{defaultBody}</CardBody>
+      </CardBodyContainer>,
+    ],
+  },
+};
+
+export const DisabledCards = {
+  ...NormalCards,
+  args: {
+    ...NormalCards.args,
+    disabled: true,
+  },
+};
+
+export const ActiveCards = {
+  ...NormalCards,
+  args: {
+    ...NormalCards.args,
+    active: true,
+  },
+};
+
+export const NoOnClickProps = {
+  name: 'No onClick props',
+  ...NormalCards,
+  args: {
+    ...NormalCards.args,
+    onClick: null,
+  },
+};
+
+export const NoHeaders = {
+  args: {
+    ...defaultPropsCard,
+    children: (
+      <CardBodyContainer>
+        <CardBody>{defaultBody}</CardBody>
+      </CardBodyContainer>
+    ),
+  },
+};
+
+export const NoBody = {
+  args: {
+    ...defaultPropsCard,
+    status: 'critical',
+    children: (
+      <CardHeader>
+        <div>RINGXcore</div>
+      </CardHeader>
+    ),
+  },
+};
+
+export const NoBodyWithAutoHeight = {
+  ...NoBody,
+  args: {
+    ...NoBody.args,
+    height: 'auto',
+  },
+};
+
+export const MultipleBodies = {
+  args: {
+    ...defaultPropsCard,
+    status: 'critical',
+    children: [
+      <CardHeader>
+        <div>RINGXcore</div>
+      </CardHeader>,
+      <CardBodyContainer>
+        <CardBody>{defaultBody}</CardBody>
+        <CardBody>{defaultBody}</CardBody>
+      </CardBodyContainer>,
+    ],
+  },
+};
+
+export const CustomizedCards = {
+  args: {
+    ...NormalCards.args,
+    headerBackgroundColor: 'buttonPrimary',
+    bodyBackgroundColor: 'infoSecondary',
+    status: undefined,
+    height: '200px',
+  },
+};

package/stories/checkbox.stories.tsx

@@ -0,0 +1,63 @@
+import React, { useEffect, useRef } from 'react';
+import { action } from '@storybook/addon-actions';
+import { Checkbox } from '../src/lib/components/checkbox/Checkbox.component';
+import { Wrapper } from './common';
+export default {
+  title: 'Components/Inputs/Checkbox',
+  component: Checkbox,
+  decorators: [
+    (story) => (
+      <Wrapper style={{ minHeight: '10vh', padding: '3rem' }}>
+        {story()}
+      </Wrapper>
+    ),
+  ],
+  args: {
+    label: 'interrested ?',
+    onChange: action('Checkbox clicked'),
+  },
+};
+
+export const DefaultCheckbox = {};
+
+export const IndeterminateCheckbox = {
+  render: (args) => {
+    const checkboxRef = useRef<HTMLInputElement>(null);
+    useEffect(() => {
+      if (checkboxRef.current) {
+        checkboxRef.current.indeterminate = true;
+      }
+    }, [checkboxRef]);
+    return <Checkbox ref={checkboxRef} {...args} />;
+  },
+  args: {
+    'data-cy': 'checked_checkbox',
+  },
+};
+
+export const CheckedCheckbox = {
+  args: {
+    checked: true,
+    'data-cy': 'checked_checkbox',
+  },
+};
+
+export const UncheckedCheckbox = {
+  args: {
+    checked: false,
+  },
+};
+
+export const DisabledCheckedCheckbox = {
+  args: {
+    checked: true,
+    disabled: true,
+  },
+};
+
+export const DisabledUncheckedCheckbox = {
+  args: {
+    checked: false,
+    disabled: true,
+  },
+};

package/stories/chips.stories.tsx

@@ -0,0 +1,107 @@
+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/circularprogressbar.stories.tsx

@@ -0,0 +1,136 @@
+import React from 'react';
+import { CircularProgressBar } from '../src/lib/components/circularprogressbar/CircularProgressBar.component';
+import { Wrapper, Text } from './common';
+export default {
+  title: 'Components/Progress & loading/CircularProgressBar',
+  component: CircularProgressBar,
+  decorators: [
+    (story) => (
+      <Wrapper style={{ minHeight: '10vh', padding: '3rem' }}>
+        {story()}
+      </Wrapper>
+    ),
+  ],
+  argTypes: {
+    color: {
+      control: {
+        type: 'color',
+      },
+    },
+    backgroundColor: {
+      control: {
+        type: 'color',
+      },
+    },
+    children: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    title: 'Total Capacity',
+    radius: 70,
+    percent: 60,
+    children: (
+      <Text
+        className="sc-circularprogressbar-text"
+        x="50%"
+        y="50%"
+        dominantBaseline="middle"
+        textAnchor="middle"
+      >
+        60% used
+      </Text>
+    ),
+  },
+};
+
+export const WithCustonColor = {
+  args: {
+    title: 'Total Capacity',
+    color: '#00ff43',
+    radius: 50,
+    percent: 90,
+    children: [
+      <Text
+        className="sc-circularprogressbar-text"
+        x="50%"
+        y="45%"
+        dominantBaseline="middle"
+        textAnchor="middle"
+        style={{
+          fontSize: '15px',
+          fontWeight: '700',
+        }}
+      >
+        4.9 PB
+      </Text>,
+      <Text
+        className="sc-circularprogressbar-text"
+        x="50%"
+        y="60%"
+        dominantBaseline="middle"
+        textAnchor="middle"
+      >
+        used
+      </Text>,
+    ],
+  },
+};
+
+/*
+export const Default = {
+  render: ({}) => {
+    return (
+      <Wrapper>
+        <Title>With Default Color</Title>
+        <CircularProgressBar title="Total Capacity" radius={70} percent={60}>
+          <Text
+            className="sc-circularprogressbar-text"
+            x="50%"
+            y="50%"
+            dominantBaseline="middle"
+            textAnchor="middle"
+          >
+            60% used
+          </Text>
+        </CircularProgressBar>
+        <Title>With Custom Color</Title>
+        <CircularProgressBar
+          color="#00ff43"
+          title="Total Capacity"
+          radius={50}
+          percent={90}
+        >
+          <Text
+            className="sc-circularprogressbar-text"
+            x="50%"
+            y="45%"
+            dominantBaseline="middle"
+            textAnchor="middle"
+            style={{
+              fontSize: '15px',
+              fontWeight: '700',
+            }}
+          >
+            4.9 PB
+          </Text>
+          <Text
+            className="sc-circularprogressbar-text"
+            x="50%"
+            y="60%"
+            dominantBaseline="middle"
+            textAnchor="middle"
+          >
+            used
+          </Text>
+        </CircularProgressBar>
+      </Wrapper>
+    );
+  },
+};
+*/

package/stories/cloudprogressbar.stories.tsx

@@ -0,0 +1,93 @@
+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

@@ -0,0 +1,57 @@
+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/color.mdx

@@ -0,0 +1,43 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';
+import { CopyButton } from '../src/lib/components/buttonv2/CopyButton.component.tsx';
+import { coreUIAvailableThemes } from '../src/lib/style/theme';
+
+<Meta title="Style/Colors" />
+
+# Colors
+
+## Artesca Dark
+
+<ColorPalette>
+  {
+    Object.entries(coreUIAvailableThemes.darkRebrand).map(([key, value]) => {
+    if (!/RGB/.test(key)) return <ColorItem title={key} colors={[value]}/>;
+    })
+
+}
+
+</ColorPalette>
+
+## Artesca Light
+
+<ColorPalette>
+  {
+    Object.entries(coreUIAvailableThemes.artescaLight).map(([key, value]) => {
+    if (!/RGB/.test(key)) return <ColorItem title={key} colors={[value]}/>;
+    })
+
+}
+
+</ColorPalette>
+
+## Ring Dark
+
+<ColorPalette>
+  {
+    Object.entries(coreUIAvailableThemes.ring9dark).map(([key, value]) => {
+    if (!/RGB/.test(key)) return <ColorItem title={key} colors={[value]}/>;
+    })
+
+}
+
+</ColorPalette>