@scality/core-ui 0.121.0 → 0.123.0

package/stories/Checkbox/checkbox.stories.tsx

@@ -0,0 +1,173 @@
+import { action } from '@storybook/addon-actions';
+import { Meta, StoryObj } from '@storybook/react';
+import React, { ComponentProps, useEffect, useRef } from 'react';
+import {
+  Checkbox,
+  Props,
+} from '../../src/lib/components/checkbox/Checkbox.component';
+import { Column } from '../../src/lib/components/tablev2/Tablev2.component';
+import { Box, Input, Table } from '../../src/lib/next';
+import { Form, FormGroup, FormSection } from '../../src/lib';
+
+type CheckboxStory = StoryObj<Props>;
+
+const meta: Meta<Props> = {
+  title: 'Components/Inputs/Checkbox',
+  component: Checkbox,
+  args: {
+    label: 'interested ?',
+    onChange: action('Checkbox clicked'),
+  },
+  argTypes: {
+    onChange: {
+      description:
+        'Function to be called when the checkbox is clicked, optional',
+    },
+    label: { control: 'text', description: 'Label of the checkbox, optional' },
+    checked: {
+      control: 'boolean',
+      description: 'Control if the checkbox is checked, optional',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Control if the checkbox is disabled, optional',
+    },
+    value: { control: 'text' },
+  },
+};
+
+export default meta;
+
+export const Playground: CheckboxStory = {};
+
+export const ChoiceCheckbox: CheckboxStory = {
+  render: () => {
+    return (
+      <>
+        What are you interested in ?
+        <Checkbox label="Sport" />
+        <Checkbox label="Music" />
+        <Checkbox label="Drawing" />
+      </>
+    );
+  },
+};
+
+export const OptionCheckbox: CheckboxStory = {
+  render: () => {
+    return (
+      <Form layout={{ kind: 'tab' }}>
+        <FormSection>
+          <FormGroup
+            id="check"
+            label="Enable this option ?"
+            content={<Checkbox />}
+          ></FormGroup>
+        </FormSection>
+      </Form>
+    );
+  },
+};
+
+export const IndeterminateCheckbox: StoryObj<
+  ComponentProps<typeof Checkbox> & { 'data-cy': string }
+> = {
+  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: StoryObj<
+  ComponentProps<typeof Checkbox> & { 'data-cy': string }
+> = {
+  args: {
+    checked: true,
+    'data-cy': 'checked_checkbox',
+  },
+};
+
+export const UncheckedCheckbox: CheckboxStory = {
+  args: {
+    checked: false,
+  },
+};
+
+export const DisabledCheckboxes: CheckboxStory = {
+  render: () => {
+    return (
+      <>
+        <Checkbox disabled checked label="Disabled & checked " />
+        <Checkbox disabled label="Disabled & unchecked" />
+      </>
+    );
+  },
+};
+
+export const DisabledCheckedCheckbox: CheckboxStory = {
+  args: {
+    checked: true,
+    disabled: true,
+  },
+};
+export const DisabledUncheckedCheckbox: CheckboxStory = {
+  args: {
+    checked: false,
+    disabled: true,
+  },
+};
+
+export const IndeterminateUseCase = {
+  render: ({}) => {
+    const data = [
+      {
+        name: 'test 1',
+        volume: 1,
+        capacity: '1Gi',
+      },
+      {
+        name: 'test 2',
+        volume: 1,
+        capacity: '1Gi',
+      },
+      {
+        name: 'test 2',
+        volume: 1,
+        capacity: '1Gi',
+      },
+    ];
+
+    const columns: Column<(typeof data)[number]>[] = [
+      {
+        Header: 'Name',
+        accessor: 'name',
+      },
+      {
+        Header: 'Volume',
+        accessor: 'volume',
+      },
+      {
+        Header: 'Capacity',
+        accessor: 'capacity',
+      },
+    ];
+
+    return (
+      <Box width="500px" height="200px">
+        <Table columns={columns} data={data} defaultSortingKey={'health'}>
+          <Table.MultiSelectableContent
+            onMultiSelectionChanged={action('Selection changed')}
+          />
+        </Table>
+      </Box>
+    );
+  },
+};

package/stories/Hooks/useMutationsHandler.mdx

@@ -0,0 +1,121 @@
+# useMutationsHandler
+
+The `useMutationsHandler` hook is a powerful utility designed to manage and handle the results of multiple mutations using `react-query`.
+It provides a unified way to handle success and error states, display toast notifications,
+and manage side effects after mutation completions.
+
+## Usage
+
+```jsx
+import { useMutationsHandler } from '@scality/core-ui';
+import { Button } from '@scality/core-ui/dist/next';
+import { useMutation } from 'react-query';
+
+function useMainMutation() {
+  return useMutation({
+    mutationFn: () => {
+      return Promise.resolve('mainMutation');
+    },
+  });
+}
+
+function useDependantMutation() {
+  return useMutation({
+    mutationFn: () => {
+      return Promise.resolve('dependantMutation');
+    },
+  });
+}
+
+export const ExampleComponent = () => {
+  const useMainM = useMainMutation();
+  const useDependantM = useDependantMutation();
+  const { mutate: mainMutate } = useMainM;
+  const { mutate: dependantMutate } = useDependantM;
+
+  const mainMutation = {
+    mutation: useMainM,
+    name: 'mainMutation',
+  };
+
+  const dependantMutations = [
+    {
+      mutation: useDependantM,
+      name: 'depandantMutation',
+    },
+  ];
+
+  useMutationsHandler({
+    mainMutation,
+    dependantMutations,
+    messageDescriptionBuilder: (mutations) => {
+      const mutationsStatus = mutations.map(({ status }) => status);
+      const mutationsAllSuccess = mutationsStatus.every(
+        (status) => status === 'success',
+      );
+
+      if (mutationsAllSuccess) {
+        return `All mutations were successful`;
+      } else {
+        return `Some mutations failed`;
+      }
+    },
+    onAllMutationsSuccess: () => {
+      // do something after success of all mutations
+    },
+  });
+
+  const handleClick = () => {
+    mainMutate(null, {
+      onSuccess: () => dependantMutate(),
+    });
+  };
+
+  return (
+    <Button label={'Click me'} onClick={() => handleClick()} type="button" />
+  );
+};
+```
+
+## Props
+
+### `mainMutation`
+
+- Type: MutationConfig
+- Description: The primary mutation that needs to be executed and monitored
+
+For more information on useMutation, see [here](https://tanstack.com/query/latest/docs/framework/react/reference/useMutation)
+
+### `messageDescriptionBuilder`
+
+- Type: () => React Node
+- Description: Define the element that will be rendered inside the toast
+
+### `dependentMutations`
+
+- Type: MutationConfig[]
+- Description: The secondary mutations that need to be executed and monitored after the success of the main mutation
+- Optional
+
+### `toastProps`
+
+- Type: Pick<
+  ToastContextState,
+  'style' | 'autoDismiss' | 'position' | 'duration' | 'withProgressBar'
+  >
+- Description: Props from the `Toast` component, allow the customization of the toast displayed by `useMutationsHandler`
+- Optional
+
+For more information on toastProps, see [here](?path=/docs/components-feedback-toast--stories)
+
+### onMainMutationSuccess
+
+- Type: () => void
+- Description: The callback to call after the main mutation succeeded
+- Optional
+
+### onAllMutationsSuccess
+
+- Type: () => void
+- Description: The callback to call after all the mutations succeeded
+- Optional

package/stories/attachment.stories.tsx

@@ -0,0 +1,78 @@
+import { action } from '@storybook/addon-actions';
+import React from 'react';
+import {
+  AttachmentProvider,
+  AttachmentTable,
+} from '../src/lib/organisms/attachments/AttachmentTable';
+
+import { Box } from '../src/lib/next';
+import { useTheme } from 'styled-components';
+
+export default {
+  title: 'Components/AttachmentTable',
+  component: AttachmentTable,
+};
+
+export const Playground = {
+  render: () => {
+    const theme = useTheme();
+    return (
+      <Box
+        style={{ height: '100%', backgroundColor: theme.backgroundLevel4 }}
+        p={'2rem'}
+      >
+        <AttachmentProvider>
+          <AttachmentTable
+            entityName={{ plural: 'users', singular: 'user' }}
+            filteredEntities={{
+              status: 'success',
+              data: {
+                number: 1,
+                entities: [{ name: 'User A', id: 'test', type: 'USER' }],
+              },
+            }}
+            initialAttachmentOperations={[]}
+            onEntitySearchChange={action('onEntitySearchChange')}
+            searchEntityPlaceholder="Search user by name"
+            initiallyAttachedEntities={[
+              { name: 'User A', id: 'test', type: 'USER' },
+            ]}
+            initiallyAttachedEntitiesStatus={'success'}
+            onAttachmentsOperationsChanged={() => {
+              console.log('changed');
+            }}
+          />
+        </AttachmentProvider>
+      </Box>
+    );
+  },
+};
+
+export const FailToLoad = {
+  render: () => {
+    const theme = useTheme();
+    return (
+      <Box
+        style={{ height: '100%', backgroundColor: theme.backgroundLevel4 }}
+        p={'2rem'}
+      >
+        <AttachmentProvider>
+          <AttachmentTable
+            entityName={{ plural: 'users', singular: 'user' }}
+            filteredEntities={{
+              status: 'error',
+            }}
+            initialAttachmentOperations={[]}
+            onEntitySearchChange={action('onEntitySearchChange')}
+            searchEntityPlaceholder="Search user by name"
+            initiallyAttachedEntities={[]}
+            initiallyAttachedEntitiesStatus={'error'}
+            onAttachmentsOperationsChanged={() => {
+              console.log('changed');
+            }}
+          />
+        </AttachmentProvider>
+      </Box>
+    );
+  },
+};

package/stories/common.tsx

@@ -1,12 +1,18 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { getThemePropSelector } from '../src/lib/utils';
 const StyledWrapper = styled.div`
-  padding: 3rem;
-  height: 100%;
-  background-color: ${(props) => props.theme.backgroundLevel1};
-  color: ${(props) => props.theme.textPrimary};
-  box-sizing: border-box;
+  ${(props) => {
+    const { style, theme } = props;
+    return css`
+      padding: 3rem;
+      height: 100%;
+      background-color: ${theme[style?.backgroundColor || 'backgroundLevel3']};
+      color: ${theme.textPrimary};
+      box-sizing: border-box;
+      overflow: scroll;
+    `;
+  }}
 `;
 const StyledTitle = styled.h3`
   color: ${getThemePropSelector('textPrimary')};

package/stories/emptystate.stories.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
 import { EmptyState } from '../src/lib/components/emptystate/Emptystate.component';
-import { Wrapper } from './common';
+
 export default {
   title: 'Components/Data Display/EmptyState',
   component: EmptyState,

package/stories/form.stories.tsx

@@ -236,9 +236,7 @@ export const AllRequiredPageForm = {
 export const TabForm = {
   ...PageForm,
   args: {
-    layout: {
-      kind: 'tab',
-    },
+    kind: 'tab',
   },
 };
 

package/stories/modal.stories.tsx

@@ -1,4 +1,3 @@
-import React, { useState } from 'react';
 import { Modal } from '../src/lib/components/modal/Modal.component';
 import { action } from '@storybook/addon-actions';
 import { Wrapper } from './common';
@@ -164,7 +163,6 @@ export const WithinTable = {
           <Table.SingleSelectableContent
             rowHeight="h32"
             separationLineVariant="backgroundLevel3"
-            backgroundVariant="backgroundLevel1"
           />
         </Table>
       </div>

package/stories/tablev2.stories.tsx

@@ -5,7 +5,7 @@ import {
   EmptyCell,
   Table,
 } from '../src/lib/components/tablev2/Tablev2.component';
-import { Wrapper, Title } from './common';
+import { Title } from './common';
 import {
   BrowserRouter,
   BrowserRouter as Router,
@@ -65,51 +65,49 @@ type Entry = {
   health: string;
 };
 
+const columns: Column<Entry>[] = [
+  {
+    Header: 'First Name',
+    accessor: 'firstName',
+    cellStyle: {
+      textAlign: 'left',
+    },
+    Cell: ({ value }) => {
+      if (value) return <>{value}</>;
+      return <EmptyCell />;
+    },
+  },
+  {
+    Header: 'Last Name',
+    accessor: 'lastName',
+    cellStyle: {
+      textAlign: 'left',
+    },
+    // disable the sorting on this column
+    disableSortBy: true,
+  },
+  {
+    Header: 'Age',
+    accessor: 'age',
+    cellStyle: {
+      width: '50px',
+      textAlign: 'left',
+    },
+  },
+  {
+    Header: 'Health',
+    accessor: 'health',
+    sortType: 'health',
+    cellStyle: {
+      textAlign: 'left',
+    },
+  },
+];
+const getRowId = (row: Entry, relativeIndex: number) => {
+  return row.lastName + ' ' + row.firstName;
+};
 export const SimpleContentTable = {
   render: ({}) => {
-    const columns: Column<Entry>[] = [
-      {
-        Header: 'First Name',
-        accessor: 'firstName',
-        cellStyle: {
-          textAlign: 'left',
-        },
-        Cell: ({ value }) => {
-          if (value) return <>{value}</>;
-          return <EmptyCell />;
-        },
-      },
-      {
-        Header: 'Last Name',
-        accessor: 'lastName',
-        cellStyle: {
-          textAlign: 'left',
-        },
-        // disable the sorting on this column
-        disableSortBy: true,
-      },
-      {
-        Header: 'Age',
-        accessor: 'age',
-        cellStyle: {
-          width: '50px',
-          textAlign: 'left',
-        },
-      },
-      {
-        Header: 'Health',
-        accessor: 'health',
-        sortType: 'health',
-        cellStyle: {
-          textAlign: 'left',
-        },
-      },
-    ];
-
-    const getRowId = (row: Entry, relativeIndex: number) => {
-      return row.lastName + ' ' + row.firstName;
-    };
-
     const TableWithQueryParams = ({}) => {
       const location = useLocation();
       return (
@@ -148,7 +146,7 @@ export const SimpleContentTable = {
     };
 
     return (
-      <Wrapper>
+      <>
         <Title>Non Selectable Table</Title>
         <div
           style={{
@@ -230,6 +228,7 @@ export const SimpleContentTable = {
             data={data}
             defaultSortingKey={'health'}
             getRowId={getRowId}
+            status="loading"
           >
             <Table.MultiSelectableContent
               rowHeight="h40"
@@ -241,7 +240,7 @@ export const SimpleContentTable = {
             />
           </Table>
         </div>
-      </Wrapper>
+      </>
     );
   },
 };
@@ -320,7 +319,7 @@ export const asyncTable = {
     ];
 
     return (
-      <Wrapper>
+      <>
         <Title>async cell Table</Title>
         <div
           style={{
@@ -347,7 +346,7 @@ export const asyncTable = {
             </Table>
           </BrowserRouter>
         </div>
-      </Wrapper>
+      </>
     );
   },
 };
@@ -384,7 +383,7 @@ export const OnBottomCallback = {
     };
 
     return (
-      <Wrapper>
+      <>
         <Title>async cell Table</Title>
         <div
           style={{
@@ -406,7 +405,7 @@ export const OnBottomCallback = {
             />
           </Table>
         </div>
-      </Wrapper>
+      </>
     );
   },
 };
@@ -492,7 +491,7 @@ export const MultiTable = {
     };
 
     return (
-      <Wrapper>
+      <>
         <Title>Several Multiselect</Title>
         <Flex justifyContent="center" gap="2rem">
           <Box width="500px" height="200px">
@@ -546,7 +545,87 @@ export const MultiTable = {
             </Table>
           </Box>
         </Flex>
-      </Wrapper>
+      </>
+    );
+  },
+};
+
+export const EmptyTable = {
+  render: (args) => {
+    const { background } = args;
+    return (
+      <Table columns={columns} data={[]} defaultSortingKey={'firstName'}>
+        <Table.SingleSelectableContent
+          rowHeight="h40"
+          separationLineVariant={background}
+          backgroundVariant="backgroundLevel1"
+          onRowSelected={action('Table Row Clicked')}
+        />
+      </Table>
+    );
+  },
+  argTypes: {
+    background: {
+      control: {
+        type: 'select',
+        description: 'Background color',
+        defaultValue: 'backgroundLevel3',
+      },
+      options: [
+        'backgroundLevel1',
+        'backgroundLevel2',
+        'backgroundLevel3',
+        'backgroundLevel4',
+      ],
+    },
+  },
+};
+
+export const LoadingTable = {
+  render: ({}) => {
+    return (
+      <Box width="500px" height="200px">
+        <Table
+          columns={columns}
+          data={data}
+          defaultSortingKey={'health'}
+          getRowId={getRowId}
+          status="loading"
+        >
+          <Table.SingleSelectableContent
+            rowHeight="h40"
+            separationLineVariant="backgroundLevel3"
+            backgroundVariant="backgroundLevel1"
+          />
+        </Table>
+      </Box>
+    );
+  },
+};
+
+export const ErrorTable = {
+  render: ({}) => {
+    return (
+      <Box width="50rem" height="200px">
+        <Table
+          columns={columns}
+          data={data}
+          defaultSortingKey={'health'}
+          getRowId={getRowId}
+          status="error"
+          entityName={{
+            en: { singular: 'user', plural: 'users' },
+            fr: { singular: 'utilisateur', plural: 'utilisateurs' },
+          }}
+        >
+          <Table.SingleSelectableContent
+            rowHeight="h40"
+            separationLineVariant="backgroundLevel4"
+            backgroundVariant="backgroundLevel1"
+            locale="en"
+          />
+        </Table>
+      </Box>
     );
   },
 };