@scality/core-ui 0.135.0 → 0.136.0

package/src/lib/components/tablev2/useSyncedScroll.ts

@@ -1,17 +1,15 @@
-import { useEffect, useState, useCallback } from 'react';
+import { useEffect, useState, useCallback, useRef } from 'react';
 import { Row } from 'react-table';
 import { FixedSizeList } from 'react-window';
+import { useTableContext } from './Tablev2.component';
 
 export default function useSyncedScroll<
   DATA_ROW extends Record<string, unknown> = Record<string, unknown>,
 >(): {
   headerRef: (element: HTMLDivElement) => void;
-  bodyRef: (tableBody: FixedSizeList<Row<DATA_ROW>[]>) => void;
+  bodyRef: React.RefObject<FixedSizeList<Row<DATA_ROW>[]>>;
 } {
-  const [listener, setListener] =
-    useState<((event: Event) => void) | null>(null);
-  const [tableBody, setTableBody] =
-    useState<FixedSizeList<Row<DATA_ROW>[]> | null>(null);
+  const { syncScrollListener, setSyncScrollListener } = useTableContext();
 
   const headerRef = useCallback(
     (element: HTMLDivElement) => {
@@ -24,41 +22,41 @@ export default function useSyncedScroll<
             });
           }
         };
-        if (!listener) {
-          setListener(() => {
+        if (!syncScrollListener) {
+          setSyncScrollListener(() => {
             return callback;
           });
         }
       }
     },
-    [listener],
+    [syncScrollListener],
   );
 
-  const bodyRef = useCallback((tableBody: FixedSizeList<Row<DATA_ROW>[]>) => {
-    setTableBody(tableBody);
-  }, []);
+  const bodyRef = useRef<FixedSizeList<Row<DATA_ROW>[]> | null>(null);
 
   useEffect(() => {
-    if (tableBody && listener) {
+    if (bodyRef.current && syncScrollListener) {
       /*
       We intentionally use _outerRef prop here despite the fact that it is 
       internal use only and not typed, as it is the only way for us to access to the scrollable element
       */
       //@ts-expect-error
-      (tableBody._outerRef as HTMLDivElement).addEventListener(
+      (bodyRef.current._outerRef as HTMLDivElement).addEventListener(
         'scroll',
-        listener,
+        syncScrollListener,
       );
-
-      return () => {
-        //@ts-expect-error
-        if (tableBody && tableBody._outerRef) {
-          //@ts-expect-error
-          tableBody._outerRef.removeEventListener('scroll', listener);
-        }
-      };
     }
-  }, [tableBody, listener]);
+    return () => {
+      //@ts-expect-error
+      if (bodyRef.current && bodyRef.current._outerRef) {
+        //@ts-expect-error
+        bodyRef.current._outerRef.removeEventListener(
+          'scroll',
+          syncScrollListener,
+        );
+      }
+    };
+  }, [bodyRef.current, syncScrollListener]);
 
   return { headerRef, bodyRef };
 }

package/src/lib/components/tabsv2/StyledTabs.ts

@@ -58,7 +58,7 @@ export const TabItem = styled.div<{
 `;
 export const TabsContainer = styled.div<{
   tabLineColor?: string;
-  separatorColor: string;
+  separatorColor?: string;
 }>`
   height: 100%;
   width: 100%;

package/src/lib/components/tabsv2/Tabsv2.component.tsx

@@ -185,8 +185,8 @@ function Tabs({
   });
   return (
     <TabsContext.Provider value={true}>
-      {/*@ts-expect-error containerType is not yet a valid prop for react */}
       <TabsContainer
+        // @ts-expect-error containerType is not yet a valid prop for react
         style={{ containerType: 'size' }}
         className={['sc-tabs', className].join(' ')}
         tabLineColor={tabLineColor}

package/src/lib/components/toggle/Toggle.component.tsx

@@ -1,12 +1,11 @@
 import { ChangeEvent, InputHTMLAttributes, useRef } from 'react';
 import styled, { css } from 'styled-components';
 
-import { spacing } from '../../style/theme';
 import { LABEL_PREFIX, useFieldContext } from '../form/Form.component';
-import { Stack } from '../../spacing';
+import { Stack, spacing } from '../../spacing';
 import { Text } from '../text/Text.component';
 
-type Props = InputHTMLAttributes<HTMLInputElement> & {
+export type Props = InputHTMLAttributes<HTMLInputElement> & {
   toggle: boolean;
   onChange: (e: ChangeEvent<HTMLInputElement>) => void;
   label?: string;
@@ -20,8 +19,7 @@ const ToggleContainer = styled.span<{ disabled?: boolean }>`
 `;
 const Switch = styled.label<{ disabled?: boolean }>`
   position: relative;
-  width: ${spacing.sp24};
-  height: ${spacing.sp14};
+  width: ${spacing.r24};
   align-self: center;
   ${(props) => {
     return css`
@@ -39,23 +37,22 @@ const Slider = styled.div<{ toggle?: boolean }>`
   width: 100%;
   height: 1rem;
   background-color: ${(props) => props.theme.backgroundLevel1};
-  border: ${spacing.sp1} solid
+  border: ${spacing.r1} solid
     ${(props) => props.theme[props.toggle ? 'selectedActive' : 'infoPrimary']};
-  border-radius: ${spacing.sp8};
+  border-radius: ${spacing.r8};
   transition: 0.4s;
-  -moz-transform: rotate(0.02deg);
+
   &:before {
     border-radius: 100%;
     position: absolute;
     content: '';
-    height: ${spacing.sp10};
-    width: ${spacing.sp10};
+    height: ${spacing.r10};
+    width: ${spacing.r10};
     left: 3px;
     top: 3.5px;
     background-color: ${(props) =>
       props.theme[props.toggle ? 'textSecondary' : 'textPrimary']};
     transition: 0.4s;
-    -moz-transform: rotate(0.02deg);
   }
 `;
 const ToggleInput = styled.input`
@@ -63,7 +60,7 @@ const ToggleInput = styled.input`
     background-color: ${(props) => props.theme.selectedActive};
   }
   &:checked + ${Slider}:before {
-    transform: translateX(${spacing.sp10});
+    transform: translateX(${spacing.r10});
   }
   display: none;
 `;

package/src/lib/components/toggle/Toggle.test.tsx

@@ -0,0 +1,56 @@
+import { render, screen } from '@testing-library/react';
+import React, { useState } from 'react';
+import { Props, Toggle } from './Toggle.component';
+import userEvent from '@testing-library/user-event';
+
+describe('Toggle', () => {
+  const selectors = {
+    toggle: () => screen.getByRole('checkbox'),
+    label: (text: string | RegExp) => screen.getByText(text),
+  };
+  const RenderToggle = (props: Omit<Props, 'onChange' | 'toggle'>) => {
+    const [toggle, setToggle] = useState<boolean>(false);
+    const handleClick = () => {
+      setToggle(!toggle);
+    };
+    return <Toggle {...props} toggle={toggle} onChange={handleClick} />;
+  };
+
+  it('should render the Toggle component with label', () => {
+    render(<RenderToggle label="Test" />);
+    const toggle = selectors.toggle();
+    expect(toggle).toBeInTheDocument();
+    const label = selectors.label(/Test/);
+    expect(label).toBeInTheDocument();
+  });
+
+  it('should toggle the switch on click on checkbox or label', () => {
+    render(<RenderToggle label="Test"></RenderToggle>);
+    const toggle = selectors.toggle();
+    userEvent.click(toggle);
+    expect(toggle).toBeChecked();
+    const label = selectors.label('Test');
+    userEvent.click(label);
+    expect(toggle).not.toBeChecked();
+  });
+
+  it('should toggle the switch when pressing the space key or enter key', () => {
+    render(<RenderToggle />);
+    const toggle = selectors.toggle();
+    userEvent.tab();
+    userEvent.keyboard('{space}');
+    expect(toggle).toBeChecked();
+    userEvent.keyboard('{enter}');
+    expect(toggle).not.toBeChecked();
+  });
+
+  it('should not toggle the switch when disabled', () => {
+    render(<RenderToggle disabled={true} />);
+    const toggle = selectors.toggle();
+    // toBeDisabled is not working for some reason
+    userEvent.tab();
+    expect(toggle).not.toHaveFocus();
+    userEvent.click(toggle);
+    expect(toggle).not.toBeChecked();
+  });
+});

package/src/lib/organisms/attachments/AttachmentTable.tsx

@@ -594,7 +594,6 @@ export const AttachmentTable = <ENTITY_TYPE,>({
                 onBlur={() => {
                   setSearchInputIsFocused(false);
                 }}
-                disableToggle
                 disabled={filteredEntities.status === 'error'}
               />
               <Loader />
@@ -616,7 +615,6 @@ export const AttachmentTable = <ENTITY_TYPE,>({
             onBlur={() => {
               setSearchInputIsFocused(false);
             }}
-            disableToggle
             searchInputIsFocused={searchInputIsFocused}
           />
         )}

package/stories/SearchInput/searchinput.guideline.mdx

@@ -0,0 +1,20 @@
+import {
+  Meta,
+  Story,
+  Canvas,
+  Primary,
+  Controls,
+  Unstyled,
+  Source,
+} from '@storybook/blocks';
+import { SearchInput } from '../../src/lib/components/searchinput/SearchInput.component';
+
+import * as Stories from './searchinput.stories';
+
+<Meta name="Guideline" of={Stories} />
+
+# Search Input
+
+<Story of={Stories.Debounce} />
+<Controls of={Stories.Debounce} />
+<Source of={Stories.Debounce} />

package/stories/{searchinput.stories.tsx → SearchInput/searchinput.stories.tsx}

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { action } from '@storybook/addon-actions';
-import { SearchInput } from '../src/lib/components/searchinput/SearchInput.component';
-import { Wrapper, Title } from './common';
+import { SearchInput } from '../../src/lib/components/searchinput/SearchInput.component';
+import { Wrapper, Title } from '../common';
 export default {
   title: 'Components/Inputs/SearchInput',
   component: SearchInput,
@@ -21,7 +21,7 @@ export const Default = {
             placeholder="Search server..."
             onChange={action('on input change')}
             onReset={action('on input reset')}
-            disableToggle={false}
+            autoComplete="off"
           />
         </div>
         <Title>Disabled</Title>
@@ -36,7 +36,6 @@ export const Default = {
             placeholder="Search server..."
             onChange={action('on input change')}
             onReset={action('on input reset')}
-            disableToggle={true}
           />
         </div>
         <Title>Search Input filled</Title>
@@ -49,7 +48,6 @@ export const Default = {
             value="carlito"
             onChange={action('on input change')}
             onReset={action('on input reset')}
-            disableToggle={false}
             data-cy="carlito_searchinput"
           />
         </div>
@@ -64,7 +62,6 @@ export const Default = {
             placeholder="Search and Filter…"
             onChange={action('on input change')}
             onReset={action('on input reset')}
-            disableToggle={true}
           />
         </div>
         <Title>Disable the default toggle undefined onReset action</Title>
@@ -77,7 +74,6 @@ export const Default = {
             value=""
             placeholder="Search and Filter…"
             onChange={action('on input change')}
-            disableToggle={true}
           />
         </div>
       </Wrapper>
@@ -88,19 +84,16 @@ export const Debounce = {
   render: (args) => {
     const [value, setValue] = useState('');
     return (
-      <Wrapper>
-        <SearchInput
-          placeholder="Search"
-          value={value}
-          disableToggle
-          onReset={action('on input reset')}
-          onChange={(e) => {
-            setValue(e.target.value);
-            action('debounce')(`${e.target} changed`);
-          }}
-          {...args}
-        />
-      </Wrapper>
+      <SearchInput
+        placeholder="Search"
+        value={value}
+        onReset={action('on input reset')}
+        onChange={(e) => {
+          setValue(e.target.value);
+          action('debounce')(`${e.target} changed`);
+        }}
+        {...args}
+      />
     );
   },
 };

package/stories/Select/selectv2.stories.tsx

@@ -5,14 +5,15 @@ 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';
+import { useArgs } from '@storybook/preview-api';
 
 type SelectStory = StoryObj<typeof Select>;
 const meta: Meta<typeof Select> = {
   title: 'Components/Inputs/Select',
   component: Select,
-  decorators: [
-    (story) => <Wrapper style={{ minHeight: '15rem' }}>{story()}</Wrapper>,
-  ],
+  // decorators: [
+  //   (story) => <Wrapper style={{ minHeight: '15rem' }}>{story()}</Wrapper>,
+  // ],
 };
 
 export default meta;
@@ -37,7 +38,7 @@ const generateOptions = (n = 10) =>
 
 const optionsWithSearchBar = generateOptions(25);
 const optionsWithoutSearchBar = generateOptions(7);
-const defaultOptions = generateOptions(4);
+const defaultOptions = generateOptions(5);
 const thousandsOfOptions = generateOptions(1000);
 const optionsWithDisabledWithoutMessage = optionsWithSearchBar.map(
   (option, index) => {
@@ -78,7 +79,6 @@ export const WithoutOptions: SelectStory = {
 export const DisabledSelect: SelectStory = {
   args: {
     disabled: true,
-    defaultValue: defaultOptions[0].props.value,
     children: defaultOptions,
   },
 };
@@ -167,3 +167,21 @@ export const NotEnoughPlaceAtTheBottom: SelectStory = {
     children: optionsWithSearchBar,
   },
 };
+
+export const WithDefaultValue: SelectStory = {
+  render: (args) => {
+    const [{ value }, updateArgs] = useArgs();
+    return (
+      <Select
+        {...args}
+        onChange={(value) => updateArgs({ value })}
+        value={value}
+      ></Select>
+    );
+  },
+  args: {
+    value: defaultOptions[0].props.value,
+    placeholder: 'Select an option',
+    children: defaultOptions,
+  },
+};

package/stories/Toggle/toggle.guideline.mdx

@@ -0,0 +1,20 @@
+import {
+  Meta,
+  Story,
+  Canvas,
+  Primary,
+  Controls,
+  Unstyled,
+  Source,
+} from '@storybook/blocks';
+
+import * as Stories from './toggle.stories';
+
+<Meta name="Guideline" of={Stories} />
+
+<Primary>
+  <Stories.Playground />
+</Primary>
+<Controls />
+
+<Source />

package/stories/{toggle.stories.tsx → Toggle/toggle.stories.tsx}

@@ -1,22 +1,29 @@
 import React, { useState } from 'react';
-import { Toggle } from '../src/lib/components/toggle/Toggle.component';
-import { Wrapper } from './common';
+import {
+  Props,
+  Toggle,
+} from '../../src/lib/components/toggle/Toggle.component';
 import { useArgs } from '@storybook/preview-api';
-export default {
+import { Meta, StoryObj } from '@storybook/react';
+
+type Story = StoryObj<Props>;
+const meta: Meta = {
   title: 'Components/Inputs/Toggle',
   component: Toggle,
   args: {
     name: 'toggle',
   },
 };
-export const Playground = {
+export default meta;
+
+export const Playground: Story = {
   render: (args) => {
-    const [{ toggle }, updateArgs] = useArgs();
+    const [{ toggle }, updateArgs] = useArgs<{ toggle: boolean }>();
     return (
       <Toggle
-        toggle={toggle}
-        onChange={() => updateArgs({ toggle: !toggle })}
         {...args}
+        onChange={() => updateArgs({ toggle: !toggle })}
+        toggle={toggle}
       />
     );
   },
@@ -24,18 +31,18 @@ export const Playground = {
     label: 'Playground',
   },
 };
-export const LabelledToggle = {
+export const LabelledToggle: Story = {
   render: (args) => {
     const [toggle, setToggle] = useState(false);
     return (
-      <Toggle toggle={toggle} onChange={() => setToggle(!toggle)} {...args} />
+      <Toggle {...args} toggle={toggle} onChange={() => setToggle(!toggle)} />
     );
   },
   args: {
     label: 'Airplane mode',
   },
 };
-export const DisabledToggle = {
+export const DisabledToggle: Story = {
   ...Playground,
   args: {
     label: 'Disabled Toggle',