@uxf/data-grid 11.74.0 → 11.74.2

package/_story-utils/schema.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.schema = void 0;
+exports.schema = {
+    name: "test",
+    columns: [
+        { name: "id", type: "id", label: "Id", sort: true, config: { width: 50, isHidden: true } },
+        { name: "text", type: "string", label: "Text", sort: true },
+        { name: "bool", type: "boolean", label: "Boolean" },
+        { name: "mail", type: "email", label: "E-mail" },
+        { name: "tel", type: "phone", label: "Phone" },
+        { name: "link", type: "url", label: "Link" },
+        { name: "day", type: "date", label: "Date" },
+        { name: "dayAndTime", type: "datetime", label: "Datetime" },
+        { name: "uuid", type: "uuid", label: "UUID" },
+        { name: "chip", type: "chip", label: "Chip" },
+        { name: "chips", type: "chips", label: "Chips" },
+        { name: "money", type: "money", label: "Money" },
+        { name: "toOne", type: "toOne", label: "ToOne" },
+        { name: "toMany", type: "toMany", label: "To many" },
+        { name: "hidden", type: "hidden", label: "Hidden", hidden: true },
+    ],
+    filters: [
+        { name: "text", type: "string", label: "Text" },
+        { name: "bool", type: "checkbox", label: "Boolean" },
+        { name: "interval", type: "interval", label: "Number interval" },
+        { name: "mail", type: "string", label: "E-mail" },
+        { name: "date", type: "date", label: "Date" },
+        { name: "datetime", type: "datetime", label: "Datetime" },
+        { name: "tel", type: "string", label: "Phone" },
+        { name: "link", type: "string", label: "Link" },
+        {
+            name: "select",
+            type: "select",
+            label: "Select",
+            options: [
+                { id: 1, label: "A" },
+                { id: 2, label: "B" },
+            ],
+        },
+        {
+            name: "multiSelect",
+            label: "Multi select",
+            type: "multiSelect",
+            options: [
+                { label: "Option 1", id: "option-1" },
+                { label: "Option 2", id: "option-2" },
+                { label: "Option 3", id: "option-3" },
+                { label: "Option 4", id: "option-4" },
+            ],
+        },
+        {
+            name: "entitySelect",
+            label: "Entity select",
+            type: "entitySelect",
+            autocomplete: "user",
+        },
+        {
+            name: "entityMultiSelect",
+            label: "Entity multi select",
+            type: "entityMultiSelect",
+            autocomplete: "user",
+        },
+    ],
+    tabs: [
+        { name: "all", label: "All" },
+        {
+            name: "only-odd-ids",
+            label: "Only odd ids blablabla",
+            s: { name: "id", dir: "desc" },
+        },
+    ],
+    s: { name: "id", dir: "asc" },
+    perPage: 10,
+    fullText: true,
+};

package/body-cell/body-cell-boolean.d.ts

@@ -0,0 +1,2 @@
+import { BodyCellComponent } from "../types";
+export declare const BodyCellBoolean: BodyCellComponent<boolean | null>;

package/body-cell/body-cell-boolean.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BodyCellBoolean = void 0;
+const noop_1 = require("@uxf/core/utils/noop");
+const checkbox_1 = require("@uxf/ui/checkbox");
+const react_1 = __importDefault(require("react"));
+const BodyCellBoolean = (props) => {
+    if (typeof props.value !== "boolean") {
+        return null;
+    }
+    // TODO @vejvis: implement onChange
+    return (react_1.default.createElement("div", { className: "uxf-data-grid__body-cell--boolean" },
+        react_1.default.createElement(checkbox_1.Checkbox, { isDisabled: true, name: props.column.name, onChange: noop_1.noop, value: props.value })));
+};
+exports.BodyCellBoolean = BodyCellBoolean;

package/body-cell/body-cell-chip.d.ts

@@ -0,0 +1,12 @@
+import { ChipColors } from "@uxf/ui/chip/theme";
+import React from "react";
+type Item = {
+    id: number;
+    label: string;
+    color?: keyof ChipColors | null;
+};
+interface Props {
+    value: Item | Item[] | null;
+}
+export declare function BodyCellChip(props: Props): React.JSX.Element | null;
+export {};

package/body-cell/body-cell-chip.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BodyCellChip = BodyCellChip;
+const chip_1 = require("@uxf/ui/chip");
+const react_1 = __importDefault(require("react"));
+function BodyCellChip(props) {
+    var _a;
+    if (typeof props.value !== "object" || props.value === null) {
+        return null;
+    }
+    if (Array.isArray(props.value)) {
+        return (react_1.default.createElement("div", { className: "uxf-data-grid__body-cell--chips" }, props.value.map((item) => {
+            var _a;
+            return (react_1.default.createElement(chip_1.Chip, { color: (_a = item.color) !== null && _a !== void 0 ? _a : "default", key: item.id }, item.label));
+        })));
+    }
+    return (react_1.default.createElement(chip_1.Chip, { color: (_a = props.value.color) !== null && _a !== void 0 ? _a : "default", key: props.value.id }, props.value.label));
+}

package/body-cell/body-cell-date.d.ts

@@ -0,0 +1,2 @@
+import { BodyCellComponent } from "../types";
+export declare const BodyCellDate: BodyCellComponent<string | null>;

package/body-cell/body-cell-date.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BodyCellDate = void 0;
+const dayjs_1 = __importDefault(require("dayjs"));
+const react_1 = __importDefault(require("react"));
+const BodyCellDate = (props) => {
+    if (typeof props.value !== "string") {
+        return null;
+    }
+    return react_1.default.createElement("span", null, (0, dayjs_1.default)(props.value).format("l"));
+};
+exports.BodyCellDate = BodyCellDate;

package/body-cell/body-cell-datetime.d.ts

@@ -0,0 +1,2 @@
+import { BodyCellComponent } from "../types";
+export declare const BodyCellDateTime: BodyCellComponent<string | null>;

package/body-cell/body-cell-datetime.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BodyCellDateTime = void 0;
+const dayjs_1 = __importDefault(require("dayjs"));
+const react_1 = __importDefault(require("react"));
+const BodyCellDateTime = (props) => {
+    if (typeof props.value !== "string") {
+        return null;
+    }
+    return react_1.default.createElement("span", null, (0, dayjs_1.default)(props.value).format("l LTS"));
+};
+exports.BodyCellDateTime = BodyCellDateTime;

package/body-cell/body-cell-default.d.ts

@@ -0,0 +1,2 @@
+import { BodyCellComponent } from "../types";
+export declare const BodyCellDefault: BodyCellComponent<any>;

package/body-cell/body-cell-default.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BodyCellDefault = void 0;
+const react_1 = __importDefault(require("react"));
+const BodyCellDefault = (props) => {
+    if (typeof props.value === "number") {
+        return react_1.default.createElement("span", null, props.value);
+    }
+    if (typeof props.value === "string") {
+        return react_1.default.createElement("span", null, props.value);
+    }
+    return null;
+};
+exports.BodyCellDefault = BodyCellDefault;

package/body-cell/body-cell-email.d.ts

@@ -0,0 +1,2 @@
+import { BodyCellComponent } from "../types";
+export declare const BodyCellEmail: BodyCellComponent<string | null>;

package/body-cell/body-cell-email.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BodyCellEmail = void 0;
+const text_link_1 = require("@uxf/ui/text-link");
+const react_1 = __importDefault(require("react"));
+const BodyCellEmail = (props) => {
+    if (typeof props.value !== "string") {
+        return null;
+    }
+    return (react_1.default.createElement("span", null,
+        react_1.default.createElement(text_link_1.TextLink, { href: `mailto:${props.value}` }, props.value)));
+};
+exports.BodyCellEmail = BodyCellEmail;

package/body-cell/body-cell-money.d.ts

@@ -0,0 +1,8 @@
+import type { BodyCellProps } from "@uxf/data-grid";
+import type { Money } from "@uxf/localize";
+import React from "react";
+interface Props extends BodyCellProps<Money | null> {
+    value: Money | null;
+}
+export declare function BodyCellMoney(props: Props): React.JSX.Element | null;
+export {};

package/body-cell/body-cell-money.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BodyCellMoney = BodyCellMoney;
+const cs_1 = __importDefault(require("@uxf/localize/locale/cs"));
+const format_money_1 = require("@uxf/localize/src/format-money/format-money");
+const react_1 = __importDefault(require("react"));
+function BodyCellMoney(props) {
+    if (typeof props.value !== "object" || props.value === null) {
+        return null;
+    }
+    return react_1.default.createElement("span", null, (0, format_money_1.createFormatMoney)({ cs: cs_1.default })("cs", props.value));
+}

package/body-cell/body-cell-phone.d.ts

@@ -0,0 +1,2 @@
+import { BodyCellComponent } from "../types";
+export declare const BodyCellPhone: BodyCellComponent<string | null>;

package/body-cell/body-cell-phone.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BodyCellPhone = void 0;
+const text_link_1 = require("@uxf/ui/text-link");
+const react_1 = __importDefault(require("react"));
+const BodyCellPhone = (props) => {
+    if (typeof props.value !== "string") {
+        return null;
+    }
+    return (react_1.default.createElement("span", null,
+        react_1.default.createElement(text_link_1.TextLink, { href: `tel:${props.value}` }, props.value)));
+};
+exports.BodyCellPhone = BodyCellPhone;

package/body-cell/body-cell-to-many.d.ts

@@ -0,0 +1,2 @@
+import { BodyCellComponent } from "../types";
+export declare const BodyCellToMany: BodyCellComponent<any>;

package/body-cell/body-cell-to-many.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BodyCellToMany = void 0;
+const react_1 = __importDefault(require("react"));
+const BodyCellToMany = (props) => {
+    if (typeof props.value !== "object" || props.value === null) {
+        return null;
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null, Object.values(props.value)
+        .map((v) => { var _a; return (_a = v === null || v === void 0 ? void 0 : v.label) !== null && _a !== void 0 ? _a : null; })
+        .filter(Boolean)
+        .join(", ")));
+};
+exports.BodyCellToMany = BodyCellToMany;

package/body-cell/body-cell-to-one.d.ts

@@ -0,0 +1,2 @@
+import { BodyCellComponent } from "../types";
+export declare const BodyCellToOne: BodyCellComponent<any>;

package/body-cell/body-cell-to-one.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BodyCellToOne = void 0;
+const react_1 = __importDefault(require("react"));
+const BodyCellToOne = (props) => {
+    if (typeof props.value !== "object" || props.value === null) {
+        return null;
+    }
+    return react_1.default.createElement("span", null, props.value.label);
+};
+exports.BodyCellToOne = BodyCellToOne;

package/body-cell/body-cell-url.d.ts

@@ -0,0 +1,2 @@
+import { BodyCellComponent } from "../types";
+export declare const BodyCellUrl: BodyCellComponent<string | null>;

package/body-cell/body-cell-url.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BodyCellUrl = void 0;
+const text_link_1 = require("@uxf/ui/text-link");
+const react_1 = __importDefault(require("react"));
+const BodyCellUrl = (props) => {
+    if (typeof props.value !== "string") {
+        return null;
+    }
+    return (react_1.default.createElement("span", null,
+        react_1.default.createElement(text_link_1.TextLink, { href: props.value, rel: "noreferrer noopener", target: "_blank" }, props.value)));
+};
+exports.BodyCellUrl = BodyCellUrl;

package/body-cell/index.d.ts

@@ -0,0 +1,2 @@
+import { BodyCellComponents } from "../types";
+export declare const BodyCells: BodyCellComponents;

package/body-cell/index.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BodyCells = void 0;
+const body_cell_boolean_1 = require("./body-cell-boolean");
+const body_cell_chip_1 = require("./body-cell-chip");
+const body_cell_date_1 = require("./body-cell-date");
+const body_cell_datetime_1 = require("./body-cell-datetime");
+const body_cell_default_1 = require("./body-cell-default");
+const body_cell_email_1 = require("./body-cell-email");
+const body_cell_money_1 = require("./body-cell-money");
+const body_cell_phone_1 = require("./body-cell-phone");
+const body_cell_to_many_1 = require("./body-cell-to-many");
+const body_cell_to_one_1 = require("./body-cell-to-one");
+const body_cell_url_1 = require("./body-cell-url");
+exports.BodyCells = {
+    boolean: body_cell_boolean_1.BodyCellBoolean,
+    chip: body_cell_chip_1.BodyCellChip,
+    chips: body_cell_chip_1.BodyCellChip,
+    date: body_cell_date_1.BodyCellDate,
+    datetime: body_cell_datetime_1.BodyCellDateTime,
+    email: body_cell_email_1.BodyCellEmail,
+    id: body_cell_default_1.BodyCellDefault,
+    integer: body_cell_default_1.BodyCellDefault,
+    money: body_cell_money_1.BodyCellMoney,
+    phone: body_cell_phone_1.BodyCellPhone,
+    string: body_cell_default_1.BodyCellDefault,
+    toMany: body_cell_to_many_1.BodyCellToMany,
+    toOne: body_cell_to_one_1.BodyCellToOne,
+    url: body_cell_url_1.BodyCellUrl,
+    uuid: body_cell_default_1.BodyCellDefault,
+    // default
+    default: body_cell_default_1.BodyCellDefault,
+};

package/components.d.ts

@@ -0,0 +1,97 @@
+import * as dataGridStories from "./data-grid.stories";
+import * as dataGridCustomExampleStories from "./data-grid-custom-example.stories";
+import * as dataGridV2Stories from "./data-grid-v2.stories";
+import * as exportButtonStories from "./export-button/export-button.stories";
+import * as filterListStories from "./filter-list/filter-list.stories";
+import * as filtersStories from "./filters/filters.stories";
+import * as filtersButtonStories from "./filters-button/filters-button.stories";
+import * as fulltextInputStories from "./fulltext-input/fulltext-input.stories";
+import * as hiddenColumnsStories from "./hidden-columns/hidden-columns.stories";
+import * as hiddenColumnsButtonStories from "./hidden-columns-button/hidden-columns-button.stories";
+import * as paginationStories from "./pagination/pagination.stories";
+import * as rowCountsStories from "./row-counts/row-counts.stories";
+import * as rowsPerPageSelectStories from "./rows-per-page-select/rows-per-page-select.stories";
+import * as selectedRowsToolbarStories from "./selected-rows-toolbar/selected-rows-toolbar.stories";
+import * as tableStories from "./table/table.stories";
+import * as tableV2Stories from "./table-v2/table-v2.stories";
+import * as toolbarControlStories from "./toolbar-control/toolbar-control.stories";
+import * as toolbarCustomsStories from "./toolbar-customs/toolbar-customs.stories";
+import * as toolbarTabsStories from "./toolbar-tabs/toolbar-tabs.stories";
+export declare const components: {
+    readonly "data-grid": {
+        readonly title: "DataGrid";
+        readonly stories: typeof dataGridStories;
+    };
+    readonly "data-grid-custom-example": {
+        readonly title: "DataGridCustomExample";
+        readonly stories: typeof dataGridCustomExampleStories;
+    };
+    readonly "data-grid-v2": {
+        readonly title: "DataGridV2";
+        readonly stories: typeof dataGridV2Stories;
+    };
+    readonly "export-button": {
+        readonly title: "ExportButton";
+        readonly stories: typeof exportButtonStories;
+    };
+    readonly "filter-list": {
+        readonly title: "FilterList";
+        readonly stories: typeof filterListStories;
+    };
+    readonly filters: {
+        readonly title: "Filters";
+        readonly stories: typeof filtersStories;
+    };
+    readonly "filters-button": {
+        readonly title: "FiltersButton";
+        readonly stories: typeof filtersButtonStories;
+    };
+    readonly "fulltext-input": {
+        readonly title: "FulltextInput";
+        readonly stories: typeof fulltextInputStories;
+    };
+    readonly "hidden-columns": {
+        readonly title: "HiddenColumns";
+        readonly stories: typeof hiddenColumnsStories;
+    };
+    readonly "hidden-columns-button": {
+        readonly title: "HiddenColumnsButton";
+        readonly stories: typeof hiddenColumnsButtonStories;
+    };
+    readonly pagination: {
+        readonly title: "Pagination";
+        readonly stories: typeof paginationStories;
+    };
+    readonly "row-counts": {
+        readonly title: "RowCounts";
+        readonly stories: typeof rowCountsStories;
+    };
+    readonly "rows-per-page-select": {
+        readonly title: "RowsPerPageSelect";
+        readonly stories: typeof rowsPerPageSelectStories;
+    };
+    readonly "selected-rows-toolbar": {
+        readonly title: "SelectedRowsToolbar";
+        readonly stories: typeof selectedRowsToolbarStories;
+    };
+    readonly table: {
+        readonly title: "Table";
+        readonly stories: typeof tableStories;
+    };
+    readonly "table-v2": {
+        readonly title: "TableV2";
+        readonly stories: typeof tableV2Stories;
+    };
+    readonly "toolbar-control": {
+        readonly title: "ToolbarControl";
+        readonly stories: typeof toolbarControlStories;
+    };
+    readonly "toolbar-customs": {
+        readonly title: "ToolbarCustoms";
+        readonly stories: typeof toolbarCustomsStories;
+    };
+    readonly "toolbar-tabs": {
+        readonly title: "ToolbarTabs";
+        readonly stories: typeof toolbarTabsStories;
+    };
+};

package/components.js

@@ -0,0 +1,124 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.components = void 0;
+// generated file
+const dataGridStories = __importStar(require("./data-grid.stories"));
+const dataGridCustomExampleStories = __importStar(require("./data-grid-custom-example.stories"));
+const dataGridV2Stories = __importStar(require("./data-grid-v2.stories"));
+const exportButtonStories = __importStar(require("./export-button/export-button.stories"));
+const filterListStories = __importStar(require("./filter-list/filter-list.stories"));
+const filtersStories = __importStar(require("./filters/filters.stories"));
+const filtersButtonStories = __importStar(require("./filters-button/filters-button.stories"));
+const fulltextInputStories = __importStar(require("./fulltext-input/fulltext-input.stories"));
+const hiddenColumnsStories = __importStar(require("./hidden-columns/hidden-columns.stories"));
+const hiddenColumnsButtonStories = __importStar(require("./hidden-columns-button/hidden-columns-button.stories"));
+const paginationStories = __importStar(require("./pagination/pagination.stories"));
+const rowCountsStories = __importStar(require("./row-counts/row-counts.stories"));
+const rowsPerPageSelectStories = __importStar(require("./rows-per-page-select/rows-per-page-select.stories"));
+const selectedRowsToolbarStories = __importStar(require("./selected-rows-toolbar/selected-rows-toolbar.stories"));
+const tableStories = __importStar(require("./table/table.stories"));
+const tableV2Stories = __importStar(require("./table-v2/table-v2.stories"));
+const toolbarControlStories = __importStar(require("./toolbar-control/toolbar-control.stories"));
+const toolbarCustomsStories = __importStar(require("./toolbar-customs/toolbar-customs.stories"));
+const toolbarTabsStories = __importStar(require("./toolbar-tabs/toolbar-tabs.stories"));
+exports.components = {
+    "data-grid": {
+        title: "DataGrid",
+        stories: dataGridStories
+    },
+    "data-grid-custom-example": {
+        title: "DataGridCustomExample",
+        stories: dataGridCustomExampleStories
+    },
+    "data-grid-v2": {
+        title: "DataGridV2",
+        stories: dataGridV2Stories
+    },
+    "export-button": {
+        title: "ExportButton",
+        stories: exportButtonStories
+    },
+    "filter-list": {
+        title: "FilterList",
+        stories: filterListStories
+    },
+    "filters": {
+        title: "Filters",
+        stories: filtersStories
+    },
+    "filters-button": {
+        title: "FiltersButton",
+        stories: filtersButtonStories
+    },
+    "fulltext-input": {
+        title: "FulltextInput",
+        stories: fulltextInputStories
+    },
+    "hidden-columns": {
+        title: "HiddenColumns",
+        stories: hiddenColumnsStories
+    },
+    "hidden-columns-button": {
+        title: "HiddenColumnsButton",
+        stories: hiddenColumnsButtonStories
+    },
+    "pagination": {
+        title: "Pagination",
+        stories: paginationStories
+    },
+    "row-counts": {
+        title: "RowCounts",
+        stories: rowCountsStories
+    },
+    "rows-per-page-select": {
+        title: "RowsPerPageSelect",
+        stories: rowsPerPageSelectStories
+    },
+    "selected-rows-toolbar": {
+        title: "SelectedRowsToolbar",
+        stories: selectedRowsToolbarStories
+    },
+    "table": {
+        title: "Table",
+        stories: tableStories
+    },
+    "table-v2": {
+        title: "TableV2",
+        stories: tableV2Stories
+    },
+    "toolbar-control": {
+        title: "ToolbarControl",
+        stories: toolbarControlStories
+    },
+    "toolbar-customs": {
+        title: "ToolbarCustoms",
+        stories: toolbarCustomsStories
+    },
+    "toolbar-tabs": {
+        title: "ToolbarTabs",
+        stories: toolbarTabsStories
+    },
+};

package/data-grid-custom-example.stories.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function DataGrid(): React.JSX.Element;