gitscope
← marzneshin / v0.3.1 / dashboard/src/features/entity-table/stories/entity-table.stories.tsx
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/features/entity-table/stories/entity-table.stories.tsx · TypeScript
Blame Raw
 1import {
 2    EntityDataTable,
 3    DataTablePagination,
 4    TableFiltering,
 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 TableFilteringComponent = TableFiltering 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        TableFilteringComponent,
31        DataTablePaginationComponent,
32        EntityDataTableComponent
33    }
34};
35
36export default meta;
37
38
39type Story = StoryObj<typeof EntityTable>;
40
41export const BasicEntityTable: Story = {
42    args: {
43        fetchEntity: fetchEntity,
44        columnsFn: columnsFnBasicEntityTable,
45        filteredColumn: "name",
46        entityKey: "entities",
47        onCreate: () => alert("Create entity"),
48        onEdit: (entity: any) => alert(`Edit entity: ${JSON.stringify(entity)}`),
49        onOpen: (entity: any) => alert(`Open entity: ${JSON.stringify(entity)}`),
50        onDelete: (entity: any) => alert(`Delete entity: ${JSON.stringify(entity)}`),
51    }
52};
53
54export const LoadingEntityTable: Story = {
55    args: {
56        fetchEntity: fetchEntityLoading,
57        columnsFn: columnsFnBasicEntityTable,
58        filteredColumn: "name",
59        entityKey: "entities",
60        onCreate: () => alert("Create entity"),
61        onEdit: (entity: any) => alert(`Edit entity: ${JSON.stringify(entity)}`),
62        onOpen: (entity: any) => alert(`Open entity: ${JSON.stringify(entity)}`),
63        onDelete: (entity: any) => alert(`Delete entity: ${JSON.stringify(entity)}`),
64    }
65};