@scality/core-ui 0.135.0 → 0.137.0

package/src/lib/components/tablev2/TableCommon.tsx

@@ -44,14 +44,14 @@ export const VirtualizedRows = <
   listRef,
   itemKey,
 }: VirtualizedRowsType<DATA_ROW>) => (
-  <AutoSizer>
-    {({ height, width }) => {
+  <AutoSizer disableWidth>
+    {({ height }) => {
       return (
         <List
-          height={height}
+          height={height - 1}
           itemCount={rows.length} // how many items we are going to render
           itemSize={convertRemToPixels(tableRowHeight[rowHeight])} // height of each row in pixel
-          width={width}
+          width={'100%'}
           itemKey={itemKey}
           itemData={rows}
           ref={listRef}
@@ -81,7 +81,7 @@ export const VirtualizedRows = <
 );
 
 export const useTableScrollbar = () => {
-  const [hasScrollbar, setHasScrollbar] = useState(false);
+  const { hasScrollbar, setHasScrollbar } = useTableContext();
   const [scrollBarWidth, setScrollBarWidth] = useState(0);
 
   const handleScrollbarWidth = useCallback((node) => {

package/src/lib/components/tablev2/Tablestyle.tsx

@@ -42,7 +42,7 @@ export const TableHeader = styled.div<{
 `;
 
 type HeadRowType = {
-  hasScrollBar: boolean;
+  hasScrollBar?: boolean;
   scrollBarWidth: number;
   rowHeight: TableHeightKeyType;
   separationLineVariant: TableVariantType;

package/src/lib/components/tablev2/Tablev2.component.tsx

@@ -105,6 +105,10 @@ type TableContextType<
     en: { singular: string; plural: string };
     fr?: { singular: string; plural: string };
   };
+  syncScrollListener: ((event: Event) => void) | null;
+  setSyncScrollListener: (listener: (event: Event) => void) => void;
+  setHasScrollbar: React.Dispatch<React.SetStateAction<boolean>>;
+  hasScrollbar?: boolean;
 };
 const TableContext = React.createContext<TableContextType | null>(null);
 
@@ -215,6 +219,12 @@ function Table<
 
   const [rowHeight, setRowHeight] = React.useState<TableHeightKeyType>('h40');
 
+  const [syncScrollListener, setSyncScrollListener] = React.useState<
+    ((event: Event) => void) | null
+  >(null);
+
+  const [hasScrollbar, setHasScrollbar] = React.useState<boolean>(false);
+
   const {
     headerGroups,
     rows,
@@ -310,6 +320,10 @@ function Table<
     toggleAllRowsSelected,
     status,
     entityName,
+    syncScrollListener,
+    setSyncScrollListener,
+    setHasScrollbar,
+    hasScrollbar,
   };
   return (
     <TableContext.Provider

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/AttachmentConfirmationModal.tsx

@@ -10,7 +10,11 @@ import { Icon, LargerText, Modal, SecondaryText, Stack, Wrap } from '../..';
 type AttachmentStatus = 'Waiting for confirmation' | 'Error' | 'Success';
 
 //The entity is the "thing" you want to attach to the resource, sorry about the naming :(
-export function AttachmentConfirmationModal<ENTITY_TYPE, RESOURCE_TYPE>({
+export function AttachmentConfirmationModal<
+  ENTITY_TYPE,
+  RESOURCE_TYPE,
+  ENTITY extends Record<string, unknown> = Record<string, unknown>,
+>({
   attachmentOperations,
   getAttachmentMutationOptions,
   resourceType,
@@ -21,7 +25,7 @@ export function AttachmentConfirmationModal<ENTITY_TYPE, RESOURCE_TYPE>({
   onCancel,
   onExit,
 }: {
-  attachmentOperations: AttachmentOperation<ENTITY_TYPE>[];
+  attachmentOperations: AttachmentOperation<ENTITY_TYPE, ENTITY>[];
   getAttachmentMutationOptions: () => UseMutationOptions<
     unknown,
     unknown,
@@ -30,6 +34,7 @@ export function AttachmentConfirmationModal<ENTITY_TYPE, RESOURCE_TYPE>({
       type: ENTITY_TYPE;
       entityName: string;
       id: string;
+      completeEntity?: ENTITY;
     }
   >;
   resourceName: string;
@@ -39,8 +44,8 @@ export function AttachmentConfirmationModal<ENTITY_TYPE, RESOURCE_TYPE>({
   cancelButtonDisabled?: boolean;
   onCancel?: () => void;
   onExit?: (
-    successfullOperations: AttachmentOperation<ENTITY_TYPE>[],
-    failedOperations: AttachmentOperation<ENTITY_TYPE>[],
+    successfullOperations: AttachmentOperation<ENTITY_TYPE, ENTITY>[],
+    failedOperations: AttachmentOperation<ENTITY_TYPE, ENTITY>[],
   ) => void;
 }) {
   const history = useHistory();
@@ -70,12 +75,13 @@ export function AttachmentConfirmationModal<ENTITY_TYPE, RESOURCE_TYPE>({
     entityName: string;
     id: string;
   }[] = attachmentOperations.map(
-    (attachmentOperation: AttachmentOperation<ENTITY_TYPE>) => {
+    (attachmentOperation: AttachmentOperation<ENTITY_TYPE, ENTITY>) => {
       return {
         action: attachmentOperation.action,
         type: attachmentOperation.entity.type,
         entityName: attachmentOperation.entity.name,
         id: attachmentOperation.entity.id,
+        completeEntity: attachmentOperation.entity.completeEntity,
       };
     },
   );

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

@@ -38,27 +38,36 @@ type AttachableEntityWithPendingStatus<ENTITY_TYPE> = {
   isPending?: boolean;
 } & AttachableEntity<ENTITY_TYPE>;
 
-export type AttachmentTableProps<ENTITY_TYPE> = {
-  initiallyAttachedEntities: AttachableEntity<ENTITY_TYPE>[];
+export type AttachmentTableProps<
+  ENTITY_TYPE,
+  ENTITY extends Record<string, unknown> = Record<string, unknown>,
+> = {
+  initiallyAttachedEntities: AttachableEntity<ENTITY_TYPE, ENTITY>[];
   initiallyAttachedEntitiesStatus: 'idle' | 'loading' | 'success' | 'error';
-  initialAttachmentOperations: AttachmentOperation<ENTITY_TYPE>[];
+  initialAttachmentOperations: AttachmentOperation<ENTITY_TYPE, ENTITY>[];
   entityName: { plural: string; singular: string };
   getNameQuery?: (
-    entity: AttachableEntity<ENTITY_TYPE>,
+    entity: AttachableEntity<ENTITY_TYPE, ENTITY>,
   ) => UseQueryOptions<unknown, unknown, string>;
   searchEntityPlaceholder: string;
   onAttachmentsOperationsChanged: (
-    attachmentOperations: AttachmentOperation<ENTITY_TYPE>[],
+    attachmentOperations: AttachmentOperation<ENTITY_TYPE, ENTITY>[],
   ) => void;
   filteredEntities:
     | { status: 'idle' }
     | {
         status: 'loading' | 'error';
-        data?: { number: number; entities: AttachableEntity<ENTITY_TYPE>[] };
+        data?: {
+          number: number;
+          entities: AttachableEntity<ENTITY_TYPE, ENTITY>[];
+        };
       }
     | {
         status: 'success';
-        data: { number: number; entities: AttachableEntity<ENTITY_TYPE>[] };
+        data: {
+          number: number;
+          entities: AttachableEntity<ENTITY_TYPE, ENTITY>[];
+        };
       };
   onEntitySearchChange: (search?: string) => void;
 };
@@ -131,31 +140,34 @@ const PrivateAttachmentContext = createContext<{
   setResetAttachementTable: Dispatch<
     SetStateAction<
       (
-        initiallyAttachedEntities: AttachableEntity<any>[], //Deliberately using any here because we can't use generics
-        initialAttachmentOperations: AttachmentOperation<any>[],
+        initiallyAttachedEntities: AttachableEntity<any, any>[], //Deliberately using any here because we can't use generics
+        initialAttachmentOperations: AttachmentOperation<any, any>[],
       ) => void
     >
   >;
 } | null>(null);
 const AttachmentContext = createContext<{
   resetAttachmentTable: (
-    initiallyAttachedEntities: AttachableEntity<any>[], //Deliberately using any here because we can't use generics
-    initialAttachmentOperations: AttachmentOperation<any>[],
+    initiallyAttachedEntities: AttachableEntity<any, any>[], //Deliberately using any here because we can't use generics
+    initialAttachmentOperations: AttachmentOperation<any, any>[],
   ) => void;
 } | null>(null);
 
-export const AttachmentProvider = <ENTITY_TYPE extends unknown>({
+export const AttachmentProvider = <
+  ENTITY_TYPE extends unknown,
+  ENTITY extends Record<string, unknown> = Record<string, unknown>,
+>({
   children,
 }: PropsWithChildren<{}>) => {
   const [resetAttachmentTable, setResetAttachementTable] = useState<
     (
-      initiallyAttachedEntities: AttachableEntity<ENTITY_TYPE>[],
-      initialAttachmentOperations: AttachmentOperation<ENTITY_TYPE>[],
+      initiallyAttachedEntities: AttachableEntity<ENTITY_TYPE, ENTITY>[],
+      initialAttachmentOperations: AttachmentOperation<ENTITY_TYPE, ENTITY>[],
     ) => void
   >(
     (
-      _: AttachableEntity<ENTITY_TYPE>[],
-      __: AttachmentOperation<ENTITY_TYPE>[],
+      _: AttachableEntity<ENTITY_TYPE, ENTITY>[],
+      __: AttachmentOperation<ENTITY_TYPE, ENTITY>[],
     ) => {},
   );
   return (
@@ -177,7 +189,10 @@ export const useAttachmentOperations = () => {
   return ctx;
 };
 
-export const AttachmentTable = <ENTITY_TYPE,>({
+export const AttachmentTable = <
+  ENTITY_TYPE,
+  ENTITY extends Record<string, unknown> = Record<string, unknown>,
+>({
   initiallyAttachedEntities,
   initiallyAttachedEntitiesStatus,
   initialAttachmentOperations,
@@ -187,7 +202,7 @@ export const AttachmentTable = <ENTITY_TYPE,>({
   getNameQuery,
   filteredEntities,
   onEntitySearchChange,
-}: AttachmentTableProps<ENTITY_TYPE>) => {
+}: AttachmentTableProps<ENTITY_TYPE, ENTITY>) => {
   const privateAttachmentContext = useContext(PrivateAttachmentContext);
   const exposedAttachmentContext = useContext(AttachmentContext);
 
@@ -198,8 +213,11 @@ export const AttachmentTable = <ENTITY_TYPE,>({
   //Desired attached entities and onAttachmentsOperationsChanged handling
   const convertInitiallyAttachedEntitiesToDesiredAttachedEntities = useCallback(
     (
-      initiallyAttachedEntities: AttachableEntity<ENTITY_TYPE>[],
-      operations: AttachmentOperation<ENTITY_TYPE>[] = initialAttachmentOperations,
+      initiallyAttachedEntities: AttachableEntity<ENTITY_TYPE, ENTITY>[],
+      operations: AttachmentOperation<
+        ENTITY_TYPE,
+        ENTITY
+      >[] = initialAttachmentOperations,
     ) => {
       return initiallyAttachedEntities
         .filter(
@@ -216,7 +234,9 @@ export const AttachmentTable = <ENTITY_TYPE,>({
   );
   const convertInitiallyAttachementOperationsToDesiredAttachedEntities =
     useCallback(
-      (initialAttachmentOperations: AttachmentOperation<ENTITY_TYPE>[]) => {
+      (
+        initialAttachmentOperations: AttachmentOperation<ENTITY_TYPE, ENTITY>[],
+      ) => {
         return initialAttachmentOperations
           .filter((op) => op.action !== AttachmentAction.REMOVE)
           .map((op) => ({
@@ -232,21 +252,21 @@ export const AttachmentTable = <ENTITY_TYPE,>({
       (
         state: {
           desiredAttachedEntities: AttachableEntityWithPendingStatus<ENTITY_TYPE>[];
-          attachmentsOperations: AttachmentOperation<ENTITY_TYPE>[];
+          attachmentsOperations: AttachmentOperation<ENTITY_TYPE, ENTITY>[];
         },
         action:
           | {
               action: AttachmentAction.ADD;
-              entity: AttachableEntity<ENTITY_TYPE>;
+              entity: AttachableEntity<ENTITY_TYPE, ENTITY>;
             }
           | {
               action: AttachmentAction.REMOVE;
-              entity: AttachableEntity<ENTITY_TYPE>;
+              entity: AttachableEntity<ENTITY_TYPE, ENTITY>;
             }
           | {
               action: 'RESET_DESIRED_ATTACHED_ENTITIES';
               entities: AttachableEntityWithPendingStatus<ENTITY_TYPE>[];
-              operations: AttachmentOperation<ENTITY_TYPE>[];
+              operations: AttachmentOperation<ENTITY_TYPE, ENTITY>[];
             },
       ) => {
         switch (action.action) {
@@ -401,8 +421,8 @@ export const AttachmentTable = <ENTITY_TYPE,>({
   useEffect(() => {
     privateAttachmentContext.setResetAttachementTable(() => {
       return (
-        newlyAttachedEntities: AttachableEntity<ENTITY_TYPE>[],
-        newAttachmentOperations: AttachmentOperation<ENTITY_TYPE>[],
+        newlyAttachedEntities: AttachableEntity<ENTITY_TYPE, ENTITY>[],
+        newAttachmentOperations: AttachmentOperation<ENTITY_TYPE, ENTITY>[],
       ) => {
         dispatch({
           action: 'RESET_DESIRED_ATTACHED_ENTITIES',
@@ -429,7 +449,11 @@ export const AttachmentTable = <ENTITY_TYPE,>({
   const searchInputRef = useRef<HTMLInputElement | null>(null);
 
   const onSelectedItemChange = useCallback(
-    (onChangeParams: UseComboboxStateChange<AttachableEntity<ENTITY_TYPE>>) => {
+    (
+      onChangeParams: UseComboboxStateChange<
+        AttachableEntity<ENTITY_TYPE, ENTITY>
+      >,
+    ) => {
       if (onChangeParams.selectedItem) {
         dispatch({
           action: AttachmentAction.ADD,
@@ -478,7 +502,7 @@ export const AttachmentTable = <ENTITY_TYPE,>({
             row: { original: entity },
           }: {
             value: string;
-            row: { original: AttachableEntity<ENTITY_TYPE> };
+            row: { original: AttachableEntity<ENTITY_TYPE, ENTITY> };
           }) => {
             const { data: asyncName, status } = useQuery({
               ...(getNameQuery
@@ -594,7 +618,6 @@ export const AttachmentTable = <ENTITY_TYPE,>({
                 onBlur={() => {
                   setSearchInputIsFocused(false);
                 }}
-                disableToggle
                 disabled={filteredEntities.status === 'error'}
               />
               <Loader />
@@ -616,7 +639,6 @@ export const AttachmentTable = <ENTITY_TYPE,>({
             onBlur={() => {
               setSearchInputIsFocused(false);
             }}
-            disableToggle
             searchInputIsFocused={searchInputIsFocused}
           />
         )}

package/src/lib/organisms/attachments/AttachmentTypes.ts

@@ -1,8 +1,12 @@
-export type AttachableEntity<ENTITY_TYPE> = {
+export type AttachableEntity<
+  ENTITY_TYPE,
+  ENTITY extends Record<string, unknown> = Record<string, unknown>,
+> = {
   name: string;
   id: string;
   type: ENTITY_TYPE;
   disableDetach?: boolean;
+  completeEntity?: ENTITY;
 };
 
 export enum AttachmentAction {
@@ -10,7 +14,10 @@ export enum AttachmentAction {
   REMOVE,
 }
 
-export type AttachmentOperation<ENTITY_TYPE> = {
+export type AttachmentOperation<
+  ENTITY_TYPE,
+  ENTITY extends Record<string, unknown> = Record<string, unknown>,
+> = {
   action: AttachmentAction;
-  entity: AttachableEntity<ENTITY_TYPE>;
+  entity: AttachableEntity<ENTITY_TYPE, ENTITY>;
 };

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} />