diff --git a/.changeset/red-pots-worry.md b/.changeset/red-pots-worry.md new file mode 100644 index 0000000..edc0e0a --- /dev/null +++ b/.changeset/red-pots-worry.md @@ -0,0 +1,5 @@ +--- +"@openfun/cunningham-react": minor +--- + +Add DataList component diff --git a/packages/react/src/components/DataGrid/DataList.spec.tsx b/packages/react/src/components/DataGrid/DataList.spec.tsx new file mode 100644 index 0000000..ef59a41 --- /dev/null +++ b/packages/react/src/components/DataGrid/DataList.spec.tsx @@ -0,0 +1,36 @@ +import { render, screen } from "@testing-library/react"; +import React from "react"; +import { faker } from "@faker-js/faker"; +import { getAllByRole, queryAllByRole } from "@testing-library/dom"; +import { expect } from "vitest"; +import { CunninghamProvider } from ":/components/Provider"; +import { DataList } from ":/components/DataGrid/DataList"; + +describe("", () => { + it("should render a DataList", async () => { + const rows = Array.from(Array(3)).map((_value, index) => ({ + id: `list key for element ${index}`, + firstName: faker.name.firstName(), + lastName: faker.name.lastName(), + })); + render( + + + + ); + + const table = screen.getByRole("table"); + expect(queryAllByRole(table, "columnheader")).toEqual([]); + + rows.forEach((row) => { + const element = screen.getByTestId(row.id); + const tds = getAllByRole(element, "cell"); + expect(tds.length).toBe(2); + expect(tds[0].textContent).toEqual(row.firstName); + expect(tds[1].textContent).toEqual(row.lastName); + }); + }); +}); diff --git a/packages/react/src/components/DataGrid/DataList.tsx b/packages/react/src/components/DataGrid/DataList.tsx new file mode 100644 index 0000000..bf11551 --- /dev/null +++ b/packages/react/src/components/DataGrid/DataList.tsx @@ -0,0 +1,6 @@ +import React from "react"; +import { BaseProps, DataGrid } from ":/components/DataGrid/index"; + +export const DataList = ({ rows, ...props }: BaseProps) => { + return ; +}; diff --git a/packages/react/src/components/DataGrid/index.stories.mdx b/packages/react/src/components/DataGrid/index.stories.mdx index e3e93a9..3b145e0 100644 --- a/packages/react/src/components/DataGrid/index.stories.mdx +++ b/packages/react/src/components/DataGrid/index.stories.mdx @@ -1,6 +1,7 @@ import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'; import { DataGrid } from './index'; import { SimpleDataGrid } from './SimpleDataGrid'; +import { DataList } from './DataList'; @@ -26,6 +27,27 @@ The `rows` props is an array of objects that describe the rows of the table. Eac We will explore the possibilities that those props provide through the following examples. +## DataList + + + +This component is a wrapper around the more complicated DataGrid component. It is made to be used for simple lists of elements that don't need pagination nor sorting. Also, it doesn't display any header. + +Here a quick usage example + + + + + +### Props + + + ## SimpleDataGrid { ); }; + +export const DataListOnly = () => { + const database = useMemo( + () => + Array.from(Array(5)).map((_value, index) => ({ + id: `list key for element ${index}`, + title: faker.random.word(), + date: faker.date.past(1).toISOString(), + action: ( + + ), + })), + [] + ); + const columns = [{ field: "title" }, { field: "date" }, { field: "action" }]; + + return ( + + + + ); +}; diff --git a/packages/react/src/components/DataGrid/index.tsx b/packages/react/src/components/DataGrid/index.tsx index 652bfd2..bc2467e 100644 --- a/packages/react/src/components/DataGrid/index.tsx +++ b/packages/react/src/components/DataGrid/index.tsx @@ -1,4 +1,3 @@ -// import { Button } from "components/Button"; import React, { useMemo } from "react"; import classNames from "classnames"; import { @@ -49,6 +48,7 @@ interface Props extends BaseProps { onSortModelChange?: (newSortModel: SortModel) => void; /** Options for the underlying tanstack table. */ tableOptions?: TableOptions; + displayHeader?: boolean; } export const DataGrid = ({ @@ -62,6 +62,7 @@ export const DataGrid = ({ onRowSelectionChange, rowSelection, tableOptions, + displayHeader = true, }: Props) => { const { t } = useCunningham(); const headlessColumns = useHeadlessColumns({ columns, enableRowSelection }); @@ -147,50 +148,51 @@ export const DataGrid = ({ <> - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => { - return ( - - ); - })} - - ))} + {displayHeader && + table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => { + return ( + + ); + })} + + ))} {table.getRowModel().rows.map((row) => ( diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index f090e08..ccd98ce 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -3,6 +3,7 @@ import "./index.scss"; export * from "./components/Button"; export * from "./components/DataGrid"; export * from "./components/DataGrid/SimpleDataGrid"; +export * from "./components/DataGrid/DataList"; export * from "./components/Forms/Field"; export * from "./components/Forms/Input"; export * from "./components/Loader";
- {header.isPlaceholder ? null : ( -
- {flexRender( - header.column.columnDef.header, - header.getContext() - )} - {header.column.getIsSorted() === "asc" && ( - - arrow_drop_up - - )} - {header.column.getIsSorted() === "desc" && ( - - arrow_drop_down - - )} - {!header.column.getIsSorted() && ( - - )} -
- )} -
+ {header.isPlaceholder ? null : ( +
+ {flexRender( + header.column.columnDef.header, + header.getContext() + )} + {header.column.getIsSorted() === "asc" && ( + + arrow_drop_up + + )} + {header.column.getIsSorted() === "desc" && ( + + arrow_drop_down + + )} + {!header.column.getIsSorted() && ( + + )} +
+ )} +