docs: Add stories using GraphQL

package.json

@@ -72,6 +72,8 @@
     "eslint-plugin-storybook": "^9.1.4",
     "eslint-plugin-testing-library": "^7.6.8",
     "fishery": "^2.3.1",
+    "graphql": "^16.11.0",
+    "graphql-request": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^30.1.3",
     "jest-environment-jsdom": "^30.1.2",

src/components/TableToolsTable/TableToolsTable.stories.js

@@ -1,8 +1,12 @@
 import React, { useCallback, useEffect } from 'react';
 import propTypes from 'prop-types';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { gql, request } from 'graphql-request';
 
 import defaultStoryMeta from '~/support/defaultStoryMeta';
+import mswGraphQlHandlers from '~/support/api/graphql';
+import mswRestHandlers from '~/support/api/rest';
+
 import columns from '~/support/factories/columns';
 import filters, {
   customNumberFilterType,
@@ -16,10 +20,12 @@ import CustomEmptyState from '~/support/components/CustomEmptyState';
 import DetailsRow from '~/support/components/DetailsRow';
 import DedicatedAction from '~/support/components/DedicatedAction';
 import { actions, rowActionResolver } from '~/support/constants';
-import { selectedItemIds } from '~/support/api';
-
+// TODO fix preselection
+// import { selectedItemIds } from '~/support/api';
+const selectedItemIds = [];
 import { TableToolsTable, TableStateProvider } from '~/components';
 import { useFullTableState, useStateCallbacks } from '~/hooks';
+import { useQueryWithUtilities } from '~/utilities';
 
 const queryClient = new QueryClient();
 
@@ -208,6 +214,124 @@ export const Common = {
   ],
   render: (args) => <CommonExample {...args} />,
 };
+const GET_TRACKS_QUERY = gql`
+  query GetTracks($sort: String) {
+    tracks(sort: $sort) {
+      id
+    }
+  }
+`;
+
+const GraphQLExample = ({
+  debug,
+  columns,
+  filters,
+  filtered,
+  enableDefaultFilter,
+  defaultFilter,
+  sortable,
+  initialSort,
+  enableInitialSort,
+  manageColumns,
+  enableRowActions,
+  enableActions,
+  dedicatedAction,
+  customEmptyRows,
+  customEmptyState,
+  enableExport,
+  enableDetails,
+  enableBulkSelect,
+  enablePreselection,
+  enableSimpleBulkSelect,
+}) => {
+  const fetchFn = useCallback(async (params) => {
+    console.log('params gql', params);
+    return await request('http://local.com/graphql', GET_TRACKS_QUERY, params);
+  }, []);
+
+  const {
+    loading,
+    result: { data, meta: { total } = {} } = {},
+    error,
+    exporter,
+    itemIdsInTable,
+    itemIdsOnPage,
+  } = useQueryWithUtilities({
+    fetchFn,
+    useTableState: true,
+  });
+
+  return (
+    <TableToolsTable
+      loading={loading}
+      items={data}
+      total={total}
+      error={error}
+      columns={
+        sortable
+          ? columns
+          : columns.map((column) => ({ ...column, sortable: undefined }))
+      }
+      {...(filters && filtered
+        ? {
+            filters: {
+              filterConfig: [...filters, customNumberFilter],
+              customFilterTypes: {
+                number: customNumberFilterType,
+              },
+              ...(enableDefaultFilter ? { activeFilters: defaultFilter } : {}),
+            },
+          }
+        : {})}
+      options={{
+        ...defaultOptions,
+        debug,
+        manageColumns,
+        ...(enableInitialSort ? { sortBy: initialSort } : {}),
+        ...(enableRowActions
+          ? {
+              actionResolver: rowActionResolver,
+            }
+          : {}),
+        ...(enableActions ? { actions } : {}),
+        ...(dedicatedAction ? { dedicatedAction: DedicatedAction } : {}),
+        ...(customEmptyRows ? { emptyRows: emptyRows(columns?.length) } : {}),
+        ...(customEmptyState ? { EmptyState: CustomEmptyState } : {}),
+        ...(enableExport ? { exporter } : {}),
+        ...(enableDetails ? { detailsComponent: DetailsRow } : {}),
+        ...(enableBulkSelect
+          ? {
+              ...(enablePreselection ? { selected: selectedItemIds } : {}),
+              onSelect,
+              itemIdsInTable,
+              itemIdsOnPage,
+            }
+          : {}),
+        ...(enableSimpleBulkSelect ? { onSelect: true } : {}),
+      }}
+    />
+  );
+};
+
+GraphQLExample.propTypes = argProps;
+
+export const GraphQL = {
+  parameters: {
+    msw: {
+      handlers: [...mswGraphQlHandlers, ...mswRestHandlers],
+    },
+  },
+  decorators: [
+    (Story) => (
+      <QueryClientProvider client={queryClient}>
+        <TableStateProvider>
+          <Story />
+        </TableStateProvider>
+      </QueryClientProvider>
+    ),
+  ],
+  render: (args) => <GraphQLExample {...args} />,
+};
 
 const WithTableTreeExample = ({
   debug,

src/support/api/backend/index.js

@@ -0,0 +1,22 @@
+const { DatabaseSync } = require('node:sqlite');
+const database = new DatabaseSync(':memory:');
+
+const initialise = () => {
+  database.exec(`
+    CREATE TABLE data(
+      key INTEGER PRIMARY KEY,
+      value TEXT
+    ) STRICT
+  `);
+};
+
+const query = (sql) => {
+  const dbQuery = database.prepare('SELECT * FROM data ORDER BY key');
+
+  console.log(dbQuery.all());
+};
+
+export default {
+  initialise,
+  query,
+};

src/support/api/graphql/index.js

@@ -0,0 +1,17 @@
+import { graphql, HttpResponse } from 'msw';
+
+const api = graphql.link('http://local.com/graphql');
+
+export default [
+  api.query('GetTracks', ({ variables, ...rest }) => {
+    console.log('gql rest', variables, rest);
+    return HttpResponse.json({
+      data: {
+        user: {
+          id: variables.id,
+          name: 'John Maverick',
+        },
+      },
+    });
+  }),
+];

src/support/api.js → src/support/api/rest/handlers.js

@@ -36,10 +36,9 @@ const queriedItems = (itemsToQuery) => {
     const totalItems = itemsToQuery.slice(0, total);
     const query = buildQuery(filters, sort);
     const items = query.length ? jsonquery(totalItems, query) : totalItems;
-    const actualLimit = limit === 'max' ? items.length : limit;
     const data = items.slice(
       parseInt(offset),
-      parseInt(offset) + parseInt(actualLimit),
+      parseInt(offset) + parseInt(limit),
     );
 
     return {

src/support/mswHandler.js → src/support/api/rest/index.js

@@ -5,7 +5,7 @@ import {
   apiTreehandler,
   apiGenresHandler,
   apiSelectionHandler,
-} from './api';
+} from './handlers';
 
 const DEFAULT_DELAY = 500;
 

src/support/defaultStoryMeta.js

@@ -7,12 +7,12 @@ import {
   PanelMainBody,
 } from '@patternfly/react-core';
 
-import mswHandlers from './mswHandler';
+import mswRestHandlers from './api/rest';
 
 const meta = {
   parameters: {
     msw: {
-      handlers: mswHandlers,
+      handlers: mswRestHandlers,
     },
   },
   decorators: [