@centreon/ui 24.4.13 → 24.4.14

package/src/Listing/index.stories.tsx

@@ -1,8 +1,7 @@
-/* eslint-disable no-alert */
 /* eslint-disable react/prop-types */
-import { useState } from 'react';
+import { React, useState } from 'react';
 
-import { Meta, StoryObj } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { equals, prop } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
@@ -13,11 +12,11 @@ import { ListingVariant } from '@centreon/ui-context';
 
 import { ListingProps } from '..';
 
-import { Column, ColumnType, SortOrder } from './models';
+import { Column, ColumnType } from './models';
 
 import Listing from '.';
 
-const meta: Meta<typeof Listing> = {
+export default {
   argTypes: {
     checkable: { control: 'boolean' },
     currentPage: { control: 'number' },
@@ -27,15 +26,11 @@ const meta: Meta<typeof Listing> = {
   },
   component: Listing,
   title: 'Listing'
-};
-export default meta;
-
-type Story = StoryObj<typeof Listing>;
+} as ComponentMeta<typeof Listing>;
 
 const useStyles = makeStyles()((theme) => ({
   listing: {
-    backgroundColor: theme.palette.background.default,
-    height: '100vh'
+    backgroundColor: theme.palette.background.default
   }
 }));
 
@@ -53,12 +48,6 @@ const ComponentColumn = ({ row, isSelected }): JSX.Element => (
   </>
 );
 
-const ButtonColumn = ({ row }): JSX.Element => (
-  <Button size="small" onClick={() => alert(JSON.stringify(row))}>
-    Click to reveal details about {row.name}
-  </Button>
-);
-
 const defaultColumns = [
   {
     getFormattedString: ({ name }): string => name,
@@ -142,7 +131,7 @@ const predefinedRowsSelection = [
   }
 ];
 
-const StoryTemplate = ({
+const Story = ({
   columns = defaultColumns,
   checkable = true,
   viewerModeConfiguration,
@@ -164,7 +153,7 @@ const StoryTemplate = ({
         limit={listing.length}
         predefinedRowsSelection={predefinedRowsSelection}
         rowColorConditions={rowColorConditions}
-        rows={props.rows ?? listing}
+        rows={listing}
         selectedRows={selected}
         totalRows={listing.length}
         viewerModeConfiguration={viewerModeConfiguration}
@@ -175,35 +164,31 @@ const StoryTemplate = ({
   );
 };
 
-export const normal = (): JSX.Element => <StoryTemplate />;
+export const normal = (): JSX.Element => <Story />;
 
 export const WithSpecifiedViewMode = (): JSX.Element => {
-  const [listingVariant, setListingVariant] = useState(ListingVariant.extended);
-  const newListingVariant = equals(listingVariant, ListingVariant.compact)
+  const [viewMode, setViewMode] = useState(ListingVariant.extended);
+  const newViewMode = equals(viewMode, ListingVariant.compact)
     ? ListingVariant.extended
     : ListingVariant.compact;
 
   return (
-    <StoryTemplate
-      listingVariant={listingVariant}
+    <Story
+      viewMode={viewMode}
       viewerModeConfiguration={{
-        onClick: () => setListingVariant(newListingVariant),
-        title: listingVariant
+        onClick: () => setViewMode(newViewMode),
+        title: viewMode
       }}
     />
   );
 };
 
 export const loadingWithNoData = (): JSX.Element => {
-  return <StoryTemplate loading rows={[]} totalRows={0} />;
+  return <Story loading rows={[]} totalRows={0} />;
 };
 
 export const loadingWithData = (): JSX.Element => {
-  return <StoryTemplate loading />;
-};
-
-export const asEmptyState = (): JSX.Element => {
-  return <StoryTemplate rows={[]} />;
+  return <Story loading />;
 };
 
 const actions = (
@@ -212,16 +197,12 @@ const actions = (
   </Button>
 );
 
-export const withActions = (): JSX.Element => (
-  <StoryTemplate actions={actions} />
-);
+export const withActions = (): JSX.Element => <Story actions={actions} />;
 
-export const withoutCheckboxes = (): JSX.Element => (
-  <StoryTemplate checkable={false} />
-);
+export const withoutCheckboxes = (): JSX.Element => <Story checkable={false} />;
 
 export const withShortLabelColumns = (): JSX.Element => (
-  <StoryTemplate columns={columnsWithShortLabel} />
+  <Story columns={columnsWithShortLabel} />
 );
 
 const editableColumns = [
@@ -229,14 +210,12 @@ const editableColumns = [
     getFormattedString: ({ name }): string => name,
     id: 'name',
     label: 'Name',
-    sortable: true,
     type: ColumnType.string
   },
   {
     getFormattedString: ({ description }): string => description,
     id: 'description',
     label: 'Description',
-    sortable: true,
     type: ColumnType.string
   },
   {
@@ -264,134 +243,40 @@ const ListingWithEditableColumns = (): JSX.Element => {
     setSelectedColumnIds(defaultColumnIds);
   };
 
-  const [sortedRows, setSortedRows] = useState(listing);
-  const [sortParams, setSortParams] = useState({
-    sortField: editableColumns[0].id,
-    sortOrder: 'desc'
-  });
-
-  const onSort = (params: {
-    sortField: string;
-    sortOrder: SortOrder;
-  }): void => {
-    const rows = [...sortedRows];
-    rows.sort((a, b) =>
-      params.sortOrder === 'desc'
-        ? a[params.sortField]?.localeCompare(b[params.sortField])
-        : b[params.sortField]?.localeCompare(a[params.sortField])
-    );
-    setSortedRows(rows);
-    setSortParams(params);
-  };
-
   return (
-    <StoryTemplate
+    <Story
       columnConfiguration={{
         selectedColumnIds,
         sortable: true
       }}
       columns={editableColumns}
-      rows={sortedRows}
-      sortField={sortParams.sortField}
-      sortOrder={sortParams.sortOrder as SortOrder}
       onResetColumns={resetColumns}
       onSelectColumns={setSelectedColumnIds}
-      onSort={onSort}
     />
   );
 };
 
-export const withEditableAndSortableColumns = (): JSX.Element => (
+export const withEditableColumns = (): JSX.Element => (
   <ListingWithEditableColumns />
 );
 
-export const PlaygroundListing: Story = {
-  args: {
-    checkable: true,
-    columns: editableColumns,
-    currentPage: 1,
-    disableRowCheckCondition: (row): boolean => row.disableCheckbox,
-    disableRowCondition: (row): boolean => row.disableRow,
-    limit: 10,
-    loading: false,
-    predefinedRowsSelection,
-    rowColorConditions,
-    rows: listing,
-    totalRows: 10
-  }
-};
-
-const listingWithSubItems = [...tenElements].map((_, index) => ({
-  active: false,
-  description: `Entity ${index}`,
-  disableCheckbox: false,
-  disableRow: false,
-  id: index,
-  name: `E${index}`,
-  selected: false,
-  subItems:
-    index % 2 === 0
-      ? [...tenElements].map((__, subIndex) => ({
-          active: false,
-          description: `Sub item ${subIndex + (index + 10) * 10} description`,
-          disableCheckbox: false,
-          disableRow: false,
-          id: subIndex + (index + 10) * 10,
-          name: `Sub Item ${subIndex + (index + 10) * 10}`,
-          selected: false
-        }))
-      : undefined
-}));
-
-const columnsWithSubItems = [
-  {
-    getFormattedString: ({ name }): string => name,
-    id: 'name',
-    label: 'Name',
-    type: ColumnType.string
-  },
-  {
-    getFormattedString: ({ description }): string => description,
-    id: 'description',
-    label: 'Description',
-    type: ColumnType.string
-  },
-  {
-    Component: ButtonColumn,
-    displaySubItemsCaret: true,
-    id: '#',
-    label: 'Custom',
-    type: ColumnType.component,
-    width: '350px'
-  }
-];
-
-const TemplateSubItems = (args): JSX.Element => {
-  const { classes } = useStyles();
-
-  return (
-    <div className={classes.listing}>
-      <Listing {...args} />
-    </div>
-  );
-};
+const TemplateListing: ComponentStory<typeof Listing> = (args) => (
+  <Listing
+    {...args}
+    columns={editableColumns}
+    disableRowCheckCondition={(row): boolean => row.disableCheckbox}
+    disableRowCondition={(row): boolean => row.disableRow}
+    predefinedRowsSelection={predefinedRowsSelection}
+    rowColorConditions={rowColorConditions}
+    rows={listing}
+  />
+);
 
-export const ListingWithSubItems = {
-  args: {
-    checkable: true,
-    columns: columnsWithSubItems,
-    currentPage: 1,
-    limit: 10,
-    loading: false,
-    rows: listingWithSubItems,
-    subItems: {
-      canCheckSubItems: false,
-      enable: true,
-      getRowProperty: () => 'subItems',
-      labelCollapse: 'Collapse',
-      labelExpand: 'Expand'
-    },
-    totalRows: 10
-  },
-  render: TemplateSubItems
+export const PlaygroundListing = TemplateListing.bind({});
+PlaygroundListing.args = {
+  checkable: true,
+  currentPage: 1,
+  limit: 10,
+  loading: false,
+  totalRows: 10
 };

package/src/Listing/index.test.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 
 import { prop } from 'ramda';
 
-import { render, fireEvent, within } from '../../test/testRenderer';
+import { render, fireEvent, within } from '../testRenderer';
 
 import { ColumnType } from './models';
 import { labelAddColumns } from './translatedLabels';