@panneau/lists 4.1.1 → 5.0.0-alpha.1

package/README.md

@@ -0,0 +1,116 @@
+# @panneau/lists
+
+Lists of Panneau: items in a table or as cards, with columns and their displays, sorting, search, filters, pagination, selection and actions. They render the list state of [`@panneau/core`](../core) (query and selection) and fetch nothing: the caller gives the items of the query.
+
+```bash
+npm install @panneau/lists@^5.0.0-alpha.0 @panneau/core@^5.0.0-alpha.0 @panneau/ui@^5.0.0-alpha.0 react-aria-components react-intl
+```
+
+## Without a definition
+
+A product with its own API writes its columns, keeps the query in a list state, and fetches its items:
+
+```tsx
+import { useList } from '@panneau/core';
+import { ListView } from '@panneau/lists';
+import { PanneauRoot } from '@panneau/ui';
+
+function Members() {
+    const { query, list } = useList({ defaults: { perPage: 20, sort: ['name'] } });
+    const { data, isPending, error } = useMembers(query); // the product's own fetching
+
+    return (
+        <ListView
+            list={list}
+            aria-label="Members"
+            columns={[
+                { id: 'name', label: 'Name', sortable: true },
+                { id: 'email', label: 'Email', display: 'email' },
+                { id: 'role', label: 'Role', field: roleField, display: 'select' },
+                { id: 'joined_on', label: 'Joined', display: 'date', sortable: true },
+            ]}
+            items={data?.items}
+            total={data?.total}
+            isLoading={isPending}
+            error={error}
+            search
+            filters={[{ id: 'role', type: 'select', options: roles }]}
+            actions={[
+                {
+                    id: 'remove',
+                    label: 'Remove',
+                    kind: 'server',
+                    scope: ['item', 'selection'],
+                    destructive: true,
+                    confirm: true,
+                },
+            ]}
+            onAction={({ action, item, selection }) => api.run(action.id, item?.id ?? selection)}
+        />
+    );
+}
+```
+
+With every item at hand, `List` does the query in memory: `<List columns={columns} items={members} search />`.
+
+## From a definition
+
+`resolveList()` of `@panneau/core` gives the props of a resource's list:
+
+```tsx
+const { resource, list: resolved } = useResource('pages');
+const { query, list } = useList({ list: resolved });
+const { data, isFetching, error } = useResourceList('pages', query); // @panneau/data/query
+
+<ListView
+    {...resolved}
+    list={list}
+    items={data?.data}
+    total={data?.meta.total}
+    isLoading={isFetching}
+    error={error}
+    fields={resource.fields}
+    itemTitle={resource.itemTitle}
+    onAction={(event) => runAction(event)}
+/>;
+```
+
+## What a list does
+
+| Feature    | How                                                                                                                                                                          |
+| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Columns    | `item[id]` shown with a display: the column's `display`, else text. Localized values in the UI's locale. `render` for a cell of its own                                      |
+| Displays   | `text`, `textarea`, `slug`, `richtext`, `number`, `boolean`, `date`, `datetime`, `time`, `select`, `relation`, `url`, `email`, `color`, `media`                              |
+| Layouts    | `table` and `cards` (`layouts`, the first is the default). On narrow lists, table rows stack and show the label of each value                                                |
+| Sorting    | Sortable column headers (`aria-sort`), and a select for cards and phones                                                                                                     |
+| Filters    | `text`, `select`, `toggle`, `date`, `date-range` (sent as bounds: `filter[id][from]`, `filter[id][to]`), `relation`, with chips for the active filters and the search        |
+| Pagination | With `total`: the range, previous and next pages, and the page size (`perPageOptions`)                                                                                       |
+| Selection  | Checkboxes, the page, then "select all N items", which selects every item matching the query, with exceptions                                                                |
+| Actions    | `row` (buttons), `menu` (the row's menu), `toolbar` (selection and resource actions), with `confirm`, hidden by abilities ([0011](../../docs/decisions/0011-permissions.md)) |
+| States     | A spinner, an error with a retry, an empty message, and "no results" with a button that clears the filters                                                                   |
+
+An action shows the Lucide icon it names (`"icon": "send"`, through `getNamedIcon()` of `@panneau/ui`), or the icon of a built-in action (`edit`, `delete`…). Actions written in code can get icon components by id instead, which win over names: `actionIcons={{ archive: Archive }}`.
+
+Lists confirm an action when it has `confirm` (its title and message are ICU messages with `{count}`), or when some selected items don't allow it, then call `onAction` with the action, its scope, the item or the `Selection` of the protocol, the count and the skipped items. A promise shows the action as pending; when it rejects, a toast says that it failed. After a selection action, the selection is cleared.
+
+A `relation` filter keeps ids in the query (`filter[author]=7`). Its chip and picker show the labels of the items it picked, and those of ids from the URL once the relation source's `resolve()` gives them.
+
+## Plugins
+
+Displays and layouts are registry entries. Plugins of `PanneauProvider` add or replace them, and so do the `displays` and `layoutComponents` props:
+
+```tsx
+definePlugin({ id: 'my-site', displays: { 'page-slug': PageSlugDisplay } });
+```
+
+A display gets `{ value, item, column, field }`. A layout gets the items, the columns, `renderValue(item, column)`, the selection and the actions (`ListLayoutProps`).
+
+## Messages
+
+Strings go through react-intl, with English defaults. Their descriptors and their French text live in [`@panneau/intl`](../intl) (`listsMessages`), with those of the other packages: give the app's `IntlProvider` `withPanneauMessages(locale, appMessages)`, or pass `listsPlugin`, which carries them.
+
+| Export           | Content                                                               |
+| ---------------- | --------------------------------------------------------------------- |
+| `@panneau/lists` | `ListView`, `List`, displays, layouts, filter controls, `listsPlugin` |
+
+The package layout, scripts and API reports are explained in [`docs/packages.md`](../../docs/packages.md).

package/dist/List.d.ts

@@ -0,0 +1,26 @@
+import { type ListOptions } from '@panneau/core';
+import { type ListViewProps } from './ListView';
+import type { ListItem } from './types';
+export interface ListProps extends Omit<ListViewProps, 'list' | 'total' | 'items'> {
+    /** Every item: the list searches, filters, sorts and paginates them in memory. */
+    items: readonly ListItem[] | undefined;
+    /** Items per page. Defaults to 20. */
+    perPage?: number;
+    /** Default sort, as `sort` query values (`['-published_at']`). */
+    defaultSort?: string[];
+    /**
+     * Keeps the query in a router (`createHistoryRouter()`). Defaults to the router of the closest
+     * `PanneauProvider`; `null` keeps it in memory.
+     */
+    router?: ListOptions['router'];
+}
+/**
+ * A list of items held in memory, from columns and items, with or without a definition. It
+ * creates its state with `useList()` of `@panneau/core`, and applies the query to `items` itself.
+ * For items fetched page by page, create the state with `useList()`, fetch its `query`, and render
+ * `ListView`.
+ *
+ * The page size and the default sort are read once.
+ */
+export declare function List({ items, perPage, defaultSort, router, ...props }: ListProps): import("react").JSX.Element;
+//# sourceMappingURL=List.d.ts.map

package/dist/List.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../src/List.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAW,MAAM,eAAe,CAAC;AAG1D,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAE1D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,aAAa,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;IAC9E,kFAAkF;IAClF,KAAK,EAAE,SAAS,QAAQ,EAAE,GAAG,SAAS,CAAC;IACvC,sCAAsC;IACtC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;CAClC;AAED;;;;;;;GAOG;AACH,wBAAgB,IAAI,CAAC,EAAE,KAAK,EAAE,OAAY,EAAE,WAAgB,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,+BAW1F"}

package/dist/List.js

@@ -0,0 +1,38 @@
+import { ListView } from "./ListView.js";
+import { applyListQuery } from "./query.js";
+import { useList } from "@panneau/core";
+import { usePanneauIntl } from "@panneau/ui";
+import { jsx } from "react/jsx-runtime";
+//#region src/List.tsx
+/**
+* A list of items held in memory, from columns and items, with or without a definition. It
+* creates its state with `useList()` of `@panneau/core`, and applies the query to `items` itself.
+* For items fetched page by page, create the state with `useList()`, fetch its `query`, and render
+* `ListView`.
+*
+* The page size and the default sort are read once.
+*/
+function List({ items, perPage = 20, defaultSort = [], router, ...props }) {
+	const intl = usePanneauIntl();
+	const { query, list } = useList({
+		defaults: {
+			perPage,
+			sort: defaultSort
+		},
+		...router !== void 0 ? { router } : {}
+	});
+	const result = items !== void 0 ? applyListQuery(items, query, {
+		columns: props.columns,
+		locale: intl.locale
+	}) : void 0;
+	return /* @__PURE__ */ jsx(ListView, {
+		...props,
+		list,
+		items: result?.items,
+		total: result?.total
+	});
+}
+//#endregion
+export { List };
+
+//# sourceMappingURL=List.js.map

package/dist/List.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.js","names":[],"sources":["../src/List.tsx"],"sourcesContent":["import { type ListOptions, useList } from '@panneau/core';\nimport { usePanneauIntl } from '@panneau/ui';\n\nimport { ListView, type ListViewProps } from './ListView';\nimport { applyListQuery } from './query';\nimport type { ListItem } from './types';\n\nexport interface ListProps extends Omit<ListViewProps, 'list' | 'total' | 'items'> {\n    /** Every item: the list searches, filters, sorts and paginates them in memory. */\n    items: readonly ListItem[] | undefined;\n    /** Items per page. Defaults to 20. */\n    perPage?: number;\n    /** Default sort, as `sort` query values (`['-published_at']`). */\n    defaultSort?: string[];\n    /**\n     * Keeps the query in a router (`createHistoryRouter()`). Defaults to the router of the closest\n     * `PanneauProvider`; `null` keeps it in memory.\n     */\n    router?: ListOptions['router'];\n}\n\n/**\n * A list of items held in memory, from columns and items, with or without a definition. It\n * creates its state with `useList()` of `@panneau/core`, and applies the query to `items` itself.\n * For items fetched page by page, create the state with `useList()`, fetch its `query`, and render\n * `ListView`.\n *\n * The page size and the default sort are read once.\n */\nexport function List({ items, perPage = 20, defaultSort = [], router, ...props }: ListProps) {\n    const intl = usePanneauIntl();\n    const { query, list } = useList({\n        defaults: { perPage, sort: defaultSort },\n        ...(router !== undefined ? { router } : {}),\n    });\n    const result =\n        items !== undefined\n            ? applyListQuery(items, query, { columns: props.columns, locale: intl.locale })\n            : undefined;\n    return <ListView {...props} list={list} items={result?.items} total={result?.total} />;\n}\n"],"mappings":";;;;;;;;;;;;;;AA6BA,SAAgB,KAAK,EAAE,OAAO,UAAU,IAAI,cAAc,CAAA,GAAI,QAAQ,GAAG,SAAoB;CACzF,MAAM,OAAO,eAAe;CAC5B,MAAM,EAAE,OAAO,SAAS,QAAQ;EAC5B,UAAU;GAAE;GAAS,MAAM;EAAY;EACvC,GAAI,WAAW,KAAA,IAAY,EAAE,OAAO,IAAI,CAAC;CAC7C,CAAC;CACD,MAAM,SACF,UAAU,KAAA,IACJ,eAAe,OAAO,OAAO;EAAE,SAAS,MAAM;EAAS,QAAQ,KAAK;CAAO,CAAC,IAC5E,KAAA;CACV,OAAO,oBAAC,UAAD;EAAU,GAAI;EAAa;EAAM,OAAO,QAAQ;EAAO,OAAO,QAAQ;CAAM,CAAA;AACvF"}

package/dist/ListView.css

@@ -0,0 +1,101 @@
+.panneau-list-BmsDb5 {
+    container: panneau-list / inline-size;
+    display: flex;
+    flex-direction: column;
+    gap: var(--panneau-space-3);
+    min-width: 0;
+}
+
+.panneau-toolbar-Q043Ps {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: var(--panneau-space-3);
+}
+
+.panneau-toolbarStart-hzlm5k {
+    display: flex;
+    flex: 1 1 auto;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: var(--panneau-space-3);
+    min-width: 0;
+}
+
+.panneau-toolbarEnd-0mOtOR {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: var(--panneau-space-2);
+    margin-inline-start: auto;
+}
+
+/* With the table layout, the column headers sort, until the list is too narrow to show them. */
+.panneau-tableSort-w-YpFE {
+    display: none;
+}
+
+.panneau-selection-MHT4Rl {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--panneau-space-2) var(--panneau-space-3);
+    padding: var(--panneau-space-2) var(--panneau-space-3);
+    font-size: var(--panneau-font-size-sm);
+    background-color: var(--panneau-color-accent-subtle);
+    border: var(--panneau-border-width) solid var(--panneau-color-border);
+    border-radius: var(--panneau-radius-lg);
+}
+
+.panneau-selectionCount-maD7mZ {
+    font-weight: var(--panneau-font-weight-medium);
+}
+
+.panneau-selectionActions-lQgDIc {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--panneau-space-2);
+    margin-inline-start: auto;
+}
+
+.panneau-body-m0W7NQ[aria-busy='true'] {
+    opacity: 0.6;
+    transition: opacity var(--panneau-duration);
+}
+
+.panneau-state-VVBIkb {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--panneau-space-3);
+    padding: var(--panneau-space-10) var(--panneau-space-4);
+    color: var(--panneau-color-text-muted);
+    text-align: center;
+    background-color: var(--panneau-color-surface);
+    border: var(--panneau-border-width) dashed var(--panneau-color-border);
+    border-radius: var(--panneau-radius-lg);
+}
+
+.panneau-state-VVBIkb p {
+    margin: 0;
+}
+
+@container panneau-list (max-width: 40rem) {
+    .panneau-toolbarStart-hzlm5k,
+    .panneau-toolbarEnd-0mOtOR {
+        flex-basis: 100%;
+    }
+
+    .panneau-toolbarEnd-0mOtOR {
+        margin-inline-start: 0;
+    }
+
+    .panneau-tableSort-w-YpFE {
+        display: block;
+        width: 100%;
+    }
+
+    .panneau-selectionActions-lQgDIc {
+        margin-inline-start: 0;
+    }
+}

package/dist/ListView.d.ts

@@ -0,0 +1,76 @@
+import { type ReactNode } from 'react';
+import type { List } from '@panneau/core';
+import type { Field, Filter } from '@panneau/protocol';
+import { type ListActions } from './actions/actions';
+import type { ActionIcons } from './actions/icons';
+import type { DisplayEntry, FilterEntry, ListActionHandler, ListColumn, ListItem, ListLayoutEntry } from './types';
+export interface ListViewProps {
+    /** The list state of `@panneau/core` (`useList()`): query and selection. */
+    list: List;
+    /** The items of the current page. `undefined` while they load for the first time. */
+    items: readonly ListItem[] | undefined;
+    columns: readonly ListColumn[];
+    /**
+     * How many items match the query, on every page (`meta.total`). With it, the list shows
+     * pagination and offers to select every matching item. Without it, `items` is the whole list.
+     */
+    total?: number | undefined;
+    /** Shows that items are loading. Items already shown stay, dimmed. */
+    isLoading?: boolean;
+    /** An error while loading: an alert with a retry replaces the items. */
+    error?: Error | null;
+    onRetry?: () => void;
+    /** Filter controls, with chips for the active filters. */
+    filters?: readonly Filter[];
+    /** Fields of the items, for the labels and options of filters that are not columns. */
+    fields?: readonly Field[];
+    /** Shows a search field (`q`). */
+    search?: boolean;
+    /** Layouts to choose from, the first one being the default. Defaults to `['table']`. */
+    layouts?: readonly string[];
+    /** The layout, controlled. */
+    layout?: string;
+    onLayoutChange?: (layout: string) => void;
+    /** Page sizes to choose from. */
+    perPageOptions?: readonly number[];
+    /** Shows checkboxes. Defaults to whether there are selection actions. */
+    selectable?: boolean;
+    /**
+     * Actions: a list (placed by their `placement`, or by scope), or grouped by placement as
+     * `resolveList()` does. Those the user can't run (`abilities.run`) are hidden.
+     */
+    actions?: ListActions;
+    /** Runs an action, after its confirmation. */
+    onAction?: ListActionHandler;
+    /**
+     * Icons of actions by action id (`{ archive: Archive }`), for actions written in code. They
+     * win over the Lucide icon an action names (`"icon": "archive"`).
+     */
+    actionIcons?: ActionIcons;
+    /** The field that titles items, for their label (`itemTitle` of the resource). */
+    itemTitle?: string;
+    /** The label of an item, for checkboxes and actions. Defaults to its title, then its id. */
+    getItemLabel?: (item: ListItem) => string;
+    /** A link to an item, on its title. */
+    getItemHref?: (item: ListItem) => string | null;
+    /** Displays by name, over the built-in ones and those of the plugins. */
+    displays?: Readonly<Record<string, DisplayEntry>>;
+    /** Layouts by id, over the built-in ones and those of the plugins. */
+    layoutComponents?: Readonly<Record<string, ListLayoutEntry>>;
+    /** Filter controls by filter type, over the built-in ones. */
+    filterControls?: Readonly<Record<string, FilterEntry>>;
+    /** Content at the end of the toolbar, such as a button to create an item. */
+    toolbar?: ReactNode;
+    /** Shown when the list has no items, without filters or search. */
+    emptyMessage?: ReactNode;
+    /** Accessible name of the list. Defaults to "Items". */
+    'aria-label'?: string;
+    className?: string;
+}
+/**
+ * Renders the list state of `@panneau/core`: the items of the current page in a layout (table or
+ * cards), with sorting, search, filters and their chips, pagination, selection and actions. It
+ * fetches nothing: the caller gives the items of the list's query and their total.
+ */
+export declare function ListView({ list, items, columns, total, isLoading, error, onRetry, filters, fields, search, layouts: layoutsProp, layout: controlledLayout, onLayoutChange, perPageOptions, selectable: selectableProp, actions: actionsProp, onAction, actionIcons, itemTitle, getItemLabel: getItemLabelProp, getItemHref, displays, layoutComponents, filterControls, toolbar, emptyMessage, 'aria-label': ariaLabel, className, }: ListViewProps): import("react").JSX.Element;
+//# sourceMappingURL=ListView.d.ts.map

package/dist/ListView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../src/ListView.tsx"],"names":[],"mappings":"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"}