fix(manager-react-components): update filters components css

ref: MANAGER-15088 Signed-off-by: Alex Boungnaseng <[email protected]>
ovh · Dec 13, 2024 · be962b0 · be962b0
1 parent 8bec787
commit be962b0
Show file tree

Hide file tree

Showing 7 changed files with 125 additions and 158 deletions.
diff --git a/packages/manager-react-components/src/components/datagrid/datagrid-cursor.stories.tsx b/packages/manager-react-components/src/components/datagrid/datagrid-cursor.stories.tsx
@@ -2,75 +2,19 @@ import React, { useState } from 'react';
 import { ColumnSort } from '@tanstack/react-table';
 import { ODS_BUTTON_VARIANT } from '@ovhcloud/ods-components';
 import { withRouter } from 'storybook-addon-react-router-v6';
-<<<<<<< HEAD
-=======
-import { applyFilters, FilterCategories } from '@ovh-ux/manager-core-api';
->>>>>>> 2f9eca4b15 (feat(generator): update v6 listing filter)
 import { useSearchParams } from 'react-router-dom';
-import DataGridTextCell from './text-cell.component';
 import { Datagrid } from './datagrid.component';
 import { useColumnFilters } from '../filters';
-<<<<<<< HEAD
-import { columsTmp, columsFilters } from './datagrid.stories';
+import { columsTmp, columsFilters } from './datagrid.mock';
 import { ActionMenu } from '../navigation';
-=======
->>>>>>> 2f9eca4b15 (feat(generator): update v6 listing filter)
 
 interface Item {
   label: string;
   price: number;
   actions: React.ReactElement;
 }
 
-<<<<<<< HEAD
 const DatagridStory = (args) => {
-=======
-const columsTmp = [
-  {
-    id: 'label',
-    cell: (item: Item) => {
-      return <DataGridTextCell>{item.label}</DataGridTextCell>;
-    },
-    label: 'Label',
-  },
-  {
-    id: 'price',
-    cell: (item: Item) => {
-      return <DataGridTextCell>{item.price} €</DataGridTextCell>;
-    },
-    label: 'Price',
-  },
-];
-
-const columsFilters = [
-  {
-    id: 'label',
-    cell: (item: Item) => {
-      return <DataGridTextCell>{item.label}</DataGridTextCell>;
-    },
-    label: 'Label',
-    comparator: FilterCategories.String,
-  },
-  {
-    id: 'price',
-    cell: (item: Item) => {
-      return <DataGridTextCell>{item.price} €</DataGridTextCell>;
-    },
-    label: 'Price',
-    comparator: FilterCategories.String,
-  },
-];
-
-const DatagridStory = ({
-  items,
-  isSortable,
-  columns = columsTmp,
-}: {
-  items: Item[];
-  isSortable: boolean;
-  columns?: any;
-}) => {
->>>>>>> 2f9eca4b15 (feat(generator): update v6 listing filter)
   const [sorting, setSorting] = useState<ColumnSort>();
   const [data, setData] = useState(args.items);
   const [searchParams] = useSearchParams();

diff --git a/packages/manager-react-components/src/components/datagrid/datagrid.component.tsx b/packages/manager-react-components/src/components/datagrid/datagrid.component.tsx
@@ -184,7 +184,7 @@ export const Datagrid = <T,>({
       {isFilterable && (
         <>
           {columnsFilters.length > 0 && (
-            <div className="flex flex-row-reverse pb-[5px]">
+            <div className="flex flex-row-reverse py-[24px]">
               <div id="datagrid-filter-popover-trigger">
                 <OdsButton
                   slot="datagrid-filter-popover-trigger"
@@ -211,7 +211,7 @@ export const Datagrid = <T,>({
             </div>
           )}
           {filters?.filters.length > 0 && (
-            <div id="datagrid-filter-list" className="my-5">
+            <div id="datagrid-filter-list" className="mb-[24px]">
               <FilterList
                 filters={filters.filters}
                 onRemoveFilter={filters.remove}

diff --git a/packages/manager-react-components/src/components/datagrid/datagrid.mock.tsx b/packages/manager-react-components/src/components/datagrid/datagrid.mock.tsx
@@ -0,0 +1,43 @@
+import { FilterCategories } from '@ovh-ux/manager-core-api';
+import { DataGridTextCell } from './text-cell.component';
+
+export interface Item {
+  label: string;
+  price: number;
+}
+
+export const columsTmp = [
+  {
+    id: 'label',
+    cell: (item: Item) => {
+      return <DataGridTextCell>{item.label}</DataGridTextCell>;
+    },
+    label: 'Label',
+  },
+  {
+    id: 'price',
+    cell: (item: Item) => {
+      return <DataGridTextCell>{item.price} €</DataGridTextCell>;
+    },
+    label: 'Price',
+  },
+];
+
+export const columsFilters = [
+  {
+    id: 'label',
+    cell: (item: Item) => {
+      return <DataGridTextCell>{item.label}</DataGridTextCell>;
+    },
+    label: 'Label',
+    comparator: FilterCategories.String,
+  },
+  {
+    id: 'price',
+    cell: (item: Item) => {
+      return <DataGridTextCell>{item.price} €</DataGridTextCell>;
+    },
+    label: 'Price',
+    comparator: FilterCategories.String,
+  },
+];
diff --git a/packages/manager-react-components/src/components/datagrid/datagrid.stories.tsx b/packages/manager-react-components/src/components/datagrid/datagrid.stories.tsx
@@ -1,52 +1,11 @@
 import React from 'react';
 import { withRouter } from 'storybook-addon-react-router-v6';
 import { useSearchParams } from 'react-router-dom';
-import { FilterCategories, applyFilters } from '@ovh-ux/manager-core-api';
+import { applyFilters } from '@ovh-ux/manager-core-api';
 import { Datagrid } from './datagrid.component';
-import { DataGridTextCell } from './text-cell.component';
 import { useDatagridSearchParams } from './useDatagridSearchParams';
 import { useColumnFilters } from '../filters';
-
-interface Item {
-  label: string;
-  price: number;
-}
-
-const columsTmp = [
-  {
-    id: 'label',
-    cell: (item: Item) => {
-      return <DataGridTextCell>{item.label}</DataGridTextCell>;
-    },
-    label: 'Label',
-  },
-  {
-    id: 'price',
-    cell: (item: Item) => {
-      return <DataGridTextCell>{item.price} €</DataGridTextCell>;
-    },
-    label: 'Price',
-  },
-];
-
-const columsFilters = [
-  {
-    id: 'label',
-    cell: (item: Item) => {
-      return <DataGridTextCell>{item.label}</DataGridTextCell>;
-    },
-    label: 'Label',
-    comparator: FilterCategories.String,
-  },
-  {
-    id: 'price',
-    cell: (item: Item) => {
-      return <DataGridTextCell>{item.price} €</DataGridTextCell>;
-    },
-    label: 'Price',
-    comparator: FilterCategories.String,
-  },
-];
+import { columsTmp, columsFilters, Item } from './datagrid.mock';
 
 function sortItems(
   itemList: Item[],

diff --git a/packages/manager-react-components/src/components/datagrid/documentation.mdx b/packages/manager-react-components/src/components/datagrid/documentation.mdx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta, Canvas, Source } from '@storybook/blocks';
 
 <Meta title="Components/Datagrid Cursor/Documentation" />
 
@@ -34,18 +34,73 @@ Why Use TanStack Table?
 
 ---
 
-#### API V6
+#### Filters
 
-##### usage with Iceberg
+##### How to use It
 
-We provide a custom hook `useResourcesIcebergV6`
+1 - In your columns definition, fill `type` or `comparator` attributes
 
-##### usage without Iceberg
+- `type`comparator is a `FilterTypeCategories`
 
-We provide a custom hook `useResourcesV6`
+- `comparator`is a `string` of `FilterCategories`, if you fill this attribute, it override the `type` attributes
 
-#### API V2
+<Source
+  code={`
+    export const colums = [
+        {
+            id: 'label',
+            cell: (item: Item) => {
+                return <DataGridTextCell>{item.label}</DataGridTextCell>;
+            },
+            label: 'Label',
+            type: FilterTypeCategories.String
+        },
+        {
+            id: 'price',
+            cell: (item: Item) => {
+                return <DataGridTextCell>{item.price} €</DataGridTextCell>;
+            },
+            label: 'Price',
+            comparator: FilterCategories.String,
+        },
+    ];
+    `}
+  language="javascript"
+/>
 
-##### usage **_ONLY_** with Iceberg
+2 - In the datagrid component, pass `filters` object
 
-We provide a custom hook `useResourcesIcebergV2`
+<Source
+  code={`
+import { useResourcesV6, useResourcesIcebergV6 } from '@ovh-ux/manager-react-components';
+
+const { filters } = useResourcesIcebergV6({ ... });
+const { filters } = useResourcesV6({ ... });
+
+<Datagrid
+    {...}
+    filters={filters}
+/>
+    `}
+
+language="javascript"
+/>
+
+If you are using a custom hook
+
+<Source
+  code={`
+import { useColumnFilters } from '@ovh-ux/manager-react-components';
+
+const { filters, addFilter, removeFilter } = useColumnFilters();
+
+<Datagrid
+    {...}
+    filters={{filters: filters, add: addFilter, remove: removeFilter}}
+/>
+    `}
+
+language="javascript"
+/>
+
+---
diff --git a/packages/manager-react-components/src/components/filters/filter-list.component.tsx b/packages/manager-react-components/src/components/filters/filter-list.component.tsx
@@ -22,7 +22,7 @@ export function FilterList({
     <>
       {filters?.map((filter, key) => (
         <OdsTag
-          className="m-3"
+          className="mr-3"
           color={ODS_TAG_COLOR.information}
           size="lg"
           key={key}