@scality/core-ui 0.115.0

package/stories/multiselect.stories.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { MultiSelect } from '../src/lib/components/multiselect/MultiSelect.component';
+import { action } from '@storybook/addon-actions';
+import { Wrapper, Title } from './common';
+const items = [
+  {
+    selected: true,
+    isFavorite: true,
+    label: 'AWS',
+    description: 'Amazon',
+    onSelect: action('onSelect clicked'),
+    onFavoriteClick: action('onFavoriteClick clicked'),
+  },
+  {
+    selected: false,
+    isFavorite: false,
+    label: 'WM',
+    description: 'Walmart',
+    onSelect: action('onSelect clicked'),
+    onFavoriteClick: action('onFavoriteClick clicked'),
+  },
+];
+const itemsWithoutFavourite = [
+  {
+    selected: true,
+    label: 'AWS',
+    description: 'Amazon',
+    onSelect: action('onSelect clicked'),
+  },
+  {
+    selected: false,
+    label: 'WM',
+    description: 'Walmart',
+    onSelect: action('onSelect clicked'),
+  },
+];
+const itemsWithoutCheckboxFavourite = [
+  {
+    label: 'AWS',
+    description: 'Amazon',
+  },
+  {
+    label: 'WM',
+    description: 'Walmart',
+  },
+];
+const options = [
+  {
+    label: 'Azure',
+    value: 'Azure',
+  },
+  {
+    label: 'S3',
+    value: 'S3',
+  },
+];
+const search = {
+  placeholder: 'Select location to add',
+  options: options,
+  onSelect: action('onSelect clicked'),
+  onAdd: action('onAdd clicked'),
+  selectedOption: null,
+};
+export default {
+  title: 'Components/Deprecated/Selector/MultiSelect',
+  component: MultiSelect,
+};
+export const Default = {
+  render: ({}) => {
+    return (
+      <Wrapper>
+        <Title>MultiSelect List</Title>
+        <div className="storybook-mutiselect-container">
+          <MultiSelect
+            title="Destination Locations"
+            items={items}
+            search={search}
+            onItemRemove={action('onItemRemove clicked')}
+          />
+        </div>
+        <Title>MultiSelect List without search</Title>
+        <div className="storybook-mutiselect-container">
+          <MultiSelect
+            title="Destination Locations"
+            items={items}
+            onItemRemove={action('onItemRemove clicked')}
+          />
+        </div>
+        <Title>MultiSelect List without Favourite</Title>
+        <div className="storybook-mutiselect-container">
+          <MultiSelect
+            title="Destination Locations"
+            items={itemsWithoutFavourite}
+            search={search}
+            onItemRemove={action('onItemRemove clicked')}
+          />
+        </div>
+        <Title>MultiSelect List without Favourite and Selectbox</Title>
+        <div className="storybook-mutiselect-container">
+          <MultiSelect
+            title="Destination Locations"
+            items={itemsWithoutCheckboxFavourite}
+            search={search}
+            onItemRemove={action('onItemRemove clicked')}
+          />
+        </div>
+        <Title>
+          MultiSelect List without Remove Button, Favourite and Selectbox
+        </Title>
+        <div className="storybook-mutiselect-container">
+          <MultiSelect
+            title="Destination Locations"
+            items={itemsWithoutCheckboxFavourite}
+            search={search}
+          />
+        </div>
+        <Title>
+          MultiSelect List without Title, Remove Button, Favourite and Selectbox
+        </Title>
+        <div className="storybook-mutiselect-container">
+          <MultiSelect items={itemsWithoutCheckboxFavourite} search={search} />
+        </div>
+      </Wrapper>
+    );
+  },
+};

package/stories/navbar.stories.tsx

@@ -0,0 +1,156 @@
+import React from 'react';
+import { Navbar } from '../src/lib/components/navbar/Navbar.component';
+import { action } from '@storybook/addon-actions';
+import { Link } from '../src/lib/components/text/Text.component';
+import { Stack } from '../src/lib/spacing';
+
+const tabs = [
+  {
+    selected: true,
+    title: 'Groups',
+    link: <a href="/groups">Groups</a>,
+    onClick: action('Groups clicked'),
+  },
+  {
+    selected: false,
+    title: 'Users',
+    onClick: action('Users clicked'),
+  },
+  {
+    selected: false,
+    title: 'Policies',
+    onClick: action('Policies clicked'),
+  },
+  {
+    selected: false,
+    title: 'Buckets',
+    onClick: action('Buckets clicked'),
+  },
+  {
+    selected: false,
+    title: 'Workflows',
+    onClick: action('Workflows clicked'),
+  },
+];
+const linkTabs = [
+  {
+    link: <a href="/groups">Groups</a>,
+    selected: true,
+  },
+  {
+    link: <a href="/users">Users</a>,
+  },
+  {
+    link: <a href="/policies">Policies</a>,
+  },
+  {
+    link: <a href="/buckets">Buckets</a>,
+  },
+  {
+    link: <a href="/workflows">Workflows</a>,
+  },
+];
+const rightActions = [
+  {
+    type: 'dropdown',
+    text: 'FR',
+    icon: <i className="fas fa-globe" />,
+    items: [
+      {
+        label: 'English',
+        name: 'EN',
+        onClick: action('English selected'),
+      },
+    ],
+  },
+  {
+    type: 'dropdown',
+    icon: <i className="fas fa-th" />,
+    items: [
+      {
+        label: 'Hyperdrive UI',
+        onClick: action('Hyperdrive UI clicked'),
+      },
+    ],
+  },
+  {
+    type: 'dropdown',
+    icon: <i className="fas fa-question-circle" />,
+    items: [
+      {
+        label: 'About',
+        onClick: action('About clicked'),
+      },
+      {
+        label: 'Documentation',
+        onClick: action('Documentation clicked'),
+      },
+      {
+        label: 'Onboarding',
+        onClick: action('Onboarding clicked'),
+      },
+    ],
+  },
+  {
+    type: 'custom',
+    render: () => (
+      <Stack>
+        <i className="fas fa-exclamation-circle" />{' '}
+        <Link>New version available</Link>
+      </Stack>
+    ),
+  },
+  {
+    type: 'button',
+    icon: <i className="fas fa-sun" />,
+    onClick: action('Theme toggle clicked'),
+  },
+  {
+    type: 'dropdown',
+    text: 'Carlito',
+    icon: <i className="fas fa-user" />,
+    items: [
+      {
+        label: 'Log out',
+        onClick: action('Logout clicked'),
+      },
+    ],
+  },
+];
+
+export default {
+  title: 'Components/Navigation/Navbar',
+  component: Navbar,
+  args: {
+    productName: 'Hardware UI',
+    rightActions,
+    tabs,
+  },
+};
+
+export const BasicNavbar = {};
+
+export const NavbarWithToggle = {
+  args: {
+    onToggleClick: action('toggle clicked'),
+  },
+};
+
+export const NavbarWithCustomizedLogo = {
+  args: {
+    logo: <i className="fas fa-ring" />,
+  },
+};
+
+export const NavbarWithOnlyTabs = {
+  args: {
+    rightActions: [rightActions[4]],
+  },
+};
+
+export const NavbarWithOnlyLinkTabs = {
+  args: {
+    rightActions: [rightActions[4]],
+    tabs: linkTabs,
+  },
+};

package/stories/notifications.stories.tsx

@@ -0,0 +1,199 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { Notifications } from '../src/lib/components/notifications/Notifications.component';
+import { Props } from '../src/lib/components/notifications/Notification.component';
+import { Wrapper } from './common';
+
+const trNotifications: Array<Props> = [
+  {
+    uid: '1',
+    title: 'Hi',
+    message: 'I am Carlito. I live at TOP_RIGHT',
+    variant: 'base',
+    // 'data-cy': 'Carlito_notification',
+  },
+  {
+    uid: '2',
+    title: 'Hi',
+    message: 'I am Patrick. I live at TOP_RIGHT',
+    // 'data-cy': 'Patrick_notification',
+  },
+];
+const tlNotifications: Array<Props> = [
+  {
+    uid: '3',
+    title: 'Hi',
+    message: 'I am Jordi. I live at TOP_LEFT',
+    variant: 'danger',
+  },
+  {
+    uid: '4',
+    title: 'Hi',
+    message: 'I am Guidllaume. I live at TOP_LEFT',
+    variant: 'healthy',
+    dismissAfter: 10000,
+  },
+];
+const blNotifications: Array<Props> = [
+  {
+    uid: '5',
+    title: 'Hi',
+    message: 'I am Teddy. I live at BOTTOM_LEFT',
+    variant: 'warning',
+  },
+  {
+    uid: '6',
+    title: 'Hi',
+    message: 'I am Yanjin. I live at BOTTOM_LEFT',
+    variant: 'healthy',
+    dismissAfter: 10000,
+  },
+];
+const brNotifications: Array<Props> = [
+  {
+    uid: '7',
+    title: 'Hi',
+    message: 'I am Charles. I live at BOTTOM_RIGHT',
+    variant: 'danger',
+  },
+  {
+    uid: '8',
+    title: 'Hi',
+    message: 'I am Claude. I live at BOTTOM_RIGHT',
+    variant: 'warning',
+  },
+];
+export default {
+  title: 'Components/Feedback/Notifications',
+  component: Notifications,
+  decorators: [(story) => <Wrapper>{story()}</Wrapper>],
+};
+
+const basic: Props = {
+  uid: '1',
+  title: 'Notification Title',
+};
+
+export const Basic = {
+  args: {
+    notifications: [basic],
+  },
+};
+
+export const WithMessage = {
+  args: {
+    notifications: [
+      {
+        uid: '1',
+        title: 'HI!',
+        message: 'This is a notifiaction with a message',
+      },
+    ],
+  },
+};
+
+export const WithTimer = {
+  args: {
+    notifications: [
+      {
+        uid: '1',
+        title: 'Hi !',
+        variant: 'success',
+        message: 'This is a notification with a timer',
+        dismissAfter: 10000,
+      },
+    ],
+  },
+  parameters: {
+    docs: {
+      canvas: {
+        withToolbar: true,
+      },
+    },
+  },
+};
+
+export const DifferentPosition = {
+  ...Basic,
+  args: {
+    notifications: [
+      {
+        uid: '1',
+        title: 'Hi',
+        message: 'This is a notification living in the Top Left corner',
+      },
+    ],
+    position: 'tl',
+  },
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: 'none',
+      },
+    },
+  },
+};
+
+export const MultipleNotificationsWithVariants = {
+  args: {
+    notifications: [
+      {
+        uid: '0',
+        title: 'Hi !',
+        message: "This is notification doesn't have a background",
+      },
+      {
+        uid: '1',
+        title: 'Hi !',
+        message: 'This is a base variant notification',
+        variant: 'base',
+      },
+      {
+        uid: '2',
+        title: 'Hi !',
+        message: 'This is a warning variant notification',
+        variant: 'warning',
+      },
+      {
+        uid: '3',
+        title: 'Hi !',
+        message: 'This is a danger variant notification',
+        variant: 'danger',
+      },
+      {
+        uid: '4',
+        title: 'Hi !',
+        message: 'This is a healthy variant notification',
+        variant: 'healthy',
+      },
+    ],
+  },
+};
+
+export const Default = {
+  render: ({}) => {
+    return (
+      <Wrapper>
+        <Notifications
+          notifications={trNotifications}
+          onDismiss={action('onDismiss')}
+        />
+        <Notifications
+          position="tl"
+          notifications={tlNotifications}
+          onDismiss={action('onDismiss')}
+        />
+        <Notifications
+          position="bl"
+          notifications={blNotifications}
+          onDismiss={action('onDismiss')}
+        />
+        <Notifications
+          position="br"
+          notifications={brNotifications}
+          onDismiss={action('onDismiss')}
+        />
+      </Wrapper>
+    );
+  },
+};

package/stories/prettybytes.stories.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { PrettyBytes } from '../src/lib/components/prettybytes/PrettyBytes.component';
+import { Wrapper, Title } from './common';
+import { getThemePropSelector } from '../src/lib/utils';
+import styled from 'styled-components';
+export default {
+  title: 'Components/PrettyBytes',
+  component: PrettyBytes,
+};
+const BytesWrapper = styled.div`
+  color: ${getThemePropSelector('textPrimary')};
+  display: flex;
+  div {
+    margin-right: 20px;
+  }
+`;
+
+const generatePrettyBytes = (decimals: number, unit?: 'iB' | 'B') =>
+  [1024, 12783, 99, 1000].map((bytes, index) => (
+    <div key={index}>
+      <div>
+        {bytes}
+        <br />
+        ---
+      </div>
+      {Array.from(new Array(9)).map((_, index) => (
+        <div key={index}>
+          <PrettyBytes
+            decimals={decimals}
+            bytes={Math.pow(bytes, index + 1)}
+            unit={unit || 'iB'}
+          />
+        </div>
+      ))}
+    </div>
+  ));
+
+export const Default = {
+  render: ({}) => (
+    <Wrapper>
+      <Title>Pretty Bytes</Title>
+      <BytesWrapper>{generatePrettyBytes(0)}</BytesWrapper>
+      <Title>Pretty Bytes with decimals</Title>
+      <BytesWrapper>{generatePrettyBytes(2)}</BytesWrapper>
+      <Title>Pretty Bytes with Decimal Base</Title>
+      <BytesWrapper>
+        <BytesWrapper>{generatePrettyBytes(2, 'B')}</BytesWrapper>
+      </BytesWrapper>
+    </Wrapper>
+  ),
+};

package/stories/progressbar.stories.tsx

@@ -0,0 +1,174 @@
+import React from 'react';
+import { ProgressBar } from '../src/lib/components/progressbar/ProgressBar.component';
+import { Wrapper, Title } from './common';
+export default {
+  title: 'Components/Progress & loading/ProgressBar',
+  component: ProgressBar,
+  decorators: [(story) => <div style={{ width: '260px' }}>{story()}</div>],
+  args: {
+    percentage: 50,
+    buildinLabel: '50%',
+    backgroundColor: '#87929D',
+  },
+  argTypes: {
+    color: {
+      control: {
+        type: 'color',
+      },
+    },
+    backgroundColor: {
+      control: {
+        type: 'color',
+      },
+    },
+  },
+};
+
+export const Basic = {};
+
+const sizes = ['smaller', 'small', 'base', 'large', 'larger'];
+export const Scale = {
+  render: (args) => {
+    return sizes.map((size) => {
+      return (
+        <div style={{ padding: '2rem' }}>
+          <ProgressBar size={size} topLeftLabel={size} {...args} />
+        </div>
+      );
+    });
+  },
+};
+
+export const WithInfos = {
+  args: {
+    topLeftLabel: 'Usage',
+    topRightLabel: '50%',
+    bottomLeftLabel: '5.17TB STORED - 13TB USED',
+    bottomRightLabel: '12.9TB FREE - 25.83TB TOTAL',
+  },
+};
+
+export const WithAnimation = {
+  args: {
+    isAnimation: true,
+  },
+};
+
+export const DiffrentColors = {
+  render: (args) => (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        height: '10rem',
+        justifyContent: 'space-between',
+      }}
+    >
+      <ProgressBar color="#2f67ac" {...args} />
+      <ProgressBar
+        color="#ff5722"
+        {...args}
+        percentage={70}
+        buildinLabel="70%"
+      />
+      <ProgressBar
+        color="#982803"
+        {...args}
+        percentage={90}
+        buildinLabel="90%"
+      />
+    </div>
+  ),
+};
+
+export const Default = {
+  render: ({}) => {
+    return (
+      <Wrapper>
+        <div
+          style={{
+            width: '260px',
+          }}
+        >
+          <Title>Smaller</Title>
+          <ProgressBar
+            size="smaller"
+            percentage={50}
+            topLeftLabel="50%"
+            topRightLabel="100GB Total"
+            bottomLeftLabel="50GB Used"
+            bottomRightLabel="50GB Free"
+            buildinLabel="50%"
+            backgroundColor="#87929D"
+          />
+
+          <Title>Base</Title>
+          <ProgressBar
+            size="base"
+            percentage={50}
+            topLeftLabel="Usage"
+            topRightLabel="50%"
+            bottomLeftLabel="5.17TB STORED - 13TB USED"
+            bottomRightLabel="12.9TB FREE - 25.83TB TOTAL"
+            buildinLabel="50%"
+          />
+
+          <Title>Large with animation</Title>
+          <ProgressBar
+            size="large"
+            percentage={50}
+            topLeftLabel="50%"
+            topRightLabel="100GB Total"
+            bottomLeftLabel="50GB Used"
+            bottomRightLabel="50GB Free"
+            buildinLabel="50%"
+            backgroundColor="#87929D"
+            isAnimation={true}
+          />
+
+          <Title>Larger</Title>
+          <ProgressBar
+            size="larger"
+            percentage={50}
+            topLeftLabel="50%"
+            topRightLabel="100GB Total"
+            bottomLeftLabel="50GB Used"
+            bottomRightLabel="50GB Free"
+            buildinLabel="50%"
+            backgroundColor="#87929D"
+          />
+
+          <Title>Different colors</Title>
+          <ProgressBar
+            size="smaller"
+            color="#2f67ac"
+            percentage={50}
+            topLeftLabel="50%"
+            topRightLabel="100GB Total"
+            bottomLeftLabel="50GB Used"
+            bottomRightLabel="50GB Free"
+            buildinLabel="50%"
+            backgroundColor="#87929D"
+          />
+          <ProgressBar
+            size="smaller"
+            color="#ff5722"
+            percentage={10}
+            topLeftLabel="10%"
+            buildinLabel="10%"
+            backgroundColor="#87929D"
+          />
+          <ProgressBar
+            size="smaller"
+            color="#982803"
+            percentage={90}
+            topLeftLabel="90% Used"
+            topRightLabel="100GB Total"
+            buildinLabel="90%"
+            backgroundColor="#87929D"
+          />
+        </div>
+      </Wrapper>
+    );
+  },
+};