1import {
2 EntityDataTable,
3 DataTablePagination,
4 TableSearch,
5} from "../components";
6import { EntityTable } from "../entity-table";
7import React from "react";
8import type { Meta, StoryObj } from "@storybook/react";
9import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
10
11import { columnsFnBasicEntityTable } from "./columns-fns";
12import { fetchEntity, fetchEntityLoading } from "./fetch-entities";
13
14const TableSearchComponent = TableSearch as React.FC<unknown>;
15const DataTablePaginationComponent = DataTablePagination as React.FC<unknown>;
16const EntityDataTableComponent = EntityDataTable as React.FC<unknown>;
17
18const queryClient = new QueryClient();
19
20const meta: Meta<typeof EntityTable> = {
21 title: "Features/Entity Table/Entity Table",
22 component: EntityTable,
23 decorators: [(Story) => (
24 <QueryClientProvider client={queryClient}>
25 <Story />
26 </QueryClientProvider>
27 )],
28 tags: ["autodocs"],
29 subcomponents: {
30 TableSearchComponent,
31 DataTablePaginationComponent,
32 EntityDataTableComponent
33 }
34};
35
36export default meta;
37
38
39type Story = StoryObj<typeof EntityTable>;
40
41const onEdit = (entity: any) => alert(`Edit entity: ${JSON.stringify(entity)}`)
42const onDelete = (entity: any) => alert(`Delete entity: ${JSON.stringify(entity)}`)
43const onOpen = (entity: any) => alert(`Open entity: ${JSON.stringify(entity)}`)
44
45export const BasicEntityTable: Story = {
46 args: {
47 fetchEntity: fetchEntity,
48 columns: columnsFnBasicEntityTable({ onEdit, onDelete, onOpen }),
49 primaryFilter: "name",
50 entityKey: "entities",
51 onCreate: () => alert("Create entity"),
52 onOpen: onOpen,
53 }
54};
55
56export const LoadingEntityTable: Story = {
57 args: {
58 fetchEntity: fetchEntityLoading,
59 columns: columnsFnBasicEntityTable({ onEdit, onDelete, onOpen }),
60 primaryFilter: "name",
61 entityKey: "entities",
62 onCreate: () => alert("Create entity"),
63 onOpen: onOpen,
64 }
65};