@databiosphere/findable-ui 21.4.0 → 22.0.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "21.4.0"
+  ".": "22.0.0"
 }

package/.storybook/main.ts

@@ -1,8 +1,12 @@
+import { StorybookConfig } from "@storybook/nextjs";
 import * as path from "path";
 
 const toPath = (filePath: string) => path.join(process.cwd(), filePath);
 
-export default {
+const config: StorybookConfig = {
+  core: {
+    disableTelemetry: true,
+  },
   stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: [
     "@storybook/addon-links",
@@ -44,3 +48,5 @@ export default {
     autodocs: true,
   },
 };
+
+export default config;

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## [22.0.0](https://github.com/DataBiosphere/findable-ui/compare/v21.4.0...v22.0.0) (2025-03-14)
+
+
+### ⚠ BREAKING CHANGES
+
+* upgrade dependencies to resolve vulnerabilities ([#326](https://github.com/DataBiosphere/findable-ui/issues/326)) (#327)
+
+### Features
+
+* create data dictionary table component ([#334](https://github.com/DataBiosphere/findable-ui/issues/334)) ([#335](https://github.com/DataBiosphere/findable-ui/issues/335)) ([b5c99a6](https://github.com/DataBiosphere/findable-ui/commit/b5c99a63ce016ba7f1a26275652f1460fe022e9b))
+
+
+### Bug Fixes
+
+* add 'rel' attribute to viewsupport component props ([#328](https://github.com/DataBiosphere/findable-ui/issues/328)) ([#329](https://github.com/DataBiosphere/findable-ui/issues/329)) ([98ccf03](https://github.com/DataBiosphere/findable-ui/commit/98ccf03037e7a14f95dc290025e2ed64adcc060d))
+* upgrade dependencies to resolve vulnerabilities ([#326](https://github.com/DataBiosphere/findable-ui/issues/326)) ([#327](https://github.com/DataBiosphere/findable-ui/issues/327)) ([196ee53](https://github.com/DataBiosphere/findable-ui/commit/196ee53d40c1dd9180f8eee92951c23ed135257e))
+
 ## [21.4.0](https://github.com/DataBiosphere/findable-ui/compare/v21.3.0...v21.4.0) (2025-02-28)
 
 

package/lib/components/DataDictionary/components/Entities/constants.d.ts

@@ -0,0 +1,2 @@
+import { Grid2Props } from "@mui/material";
+export declare const GRID2_PROPS: Grid2Props;

package/lib/components/DataDictionary/components/Entities/constants.js

@@ -0,0 +1,6 @@
+export const GRID2_PROPS = {
+    container: true,
+    direction: "column",
+    flexWrap: "nowrap",
+    rowGap: 8,
+};

package/lib/components/DataDictionary/components/Entities/entities.d.ts

@@ -0,0 +1,2 @@
+import { ClassesProps } from "./types";
+export declare const Entities: ({ classes }: ClassesProps) => JSX.Element;

package/lib/components/DataDictionary/components/Entities/entities.js

@@ -0,0 +1,7 @@
+import { Grid2 } from "@mui/material";
+import React from "react";
+import { Entity } from "../Entity/entity";
+import { GRID2_PROPS } from "./constants";
+export const Entities = ({ classes }) => {
+    return (React.createElement(Grid2, { ...GRID2_PROPS }, classes.map((classData) => (React.createElement(Entity, { key: classData.key, class: classData })))));
+};

package/lib/components/DataDictionary/components/Entities/types.d.ts

@@ -0,0 +1,4 @@
+import { Class } from "../../../../common/entities";
+export interface ClassesProps {
+    classes: Class[];
+}

package/lib/components/DataDictionary/components/Entities/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/DataDictionary/components/Entity/constants.d.ts

@@ -0,0 +1,2 @@
+import { Grid2Props } from "@mui/material";
+export declare const GRID2_PROPS: Grid2Props;

package/lib/components/DataDictionary/components/Entity/constants.js

@@ -0,0 +1,5 @@
+export const GRID2_PROPS = {
+    container: true,
+    direction: "column",
+    flexWrap: "nowrap",
+};

package/lib/components/DataDictionary/components/Entity/entity.d.ts

@@ -0,0 +1,2 @@
+import { EntityProps } from "./types";
+export declare const Entity: ({ class: classData }: EntityProps) => JSX.Element;

package/lib/components/DataDictionary/components/Entity/entity.js

@@ -0,0 +1,14 @@
+import { Grid2, Typography } from "@mui/material";
+import React from "react";
+import { COLOR, VARIANT } from "../../../../styles/common/mui/typography";
+import { useTable } from "../Table/hook";
+import { Table } from "../Table/table";
+import { GRID2_PROPS } from "./constants";
+export const Entity = ({ class: classData }) => {
+    const table = useTable(classData.attributes);
+    return (React.createElement(Grid2, { ...GRID2_PROPS, rowGap: 4 },
+        React.createElement(Grid2, { ...GRID2_PROPS, rowGap: 1 },
+            React.createElement(Typography, { component: "h3", variant: VARIANT.TEXT_HEADING_SMALL }, classData.label),
+            React.createElement(Typography, { color: COLOR.INK_LIGHT, component: "div", variant: VARIANT.TEXT_BODY_400_2_LINES }, classData.description)),
+        React.createElement(Table, { table: table })));
+};

package/lib/components/DataDictionary/components/Entity/types.d.ts

@@ -0,0 +1,4 @@
+import { Class } from "../../../../common/entities";
+export interface EntityProps {
+    class: Class;
+}

package/lib/components/DataDictionary/components/Entity/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/DataDictionary/components/Table/columns/columnDef.d.ts

@@ -0,0 +1,6 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { Attribute } from "../../../../../common/entities";
+import { COLUMN_IDENTIFIER } from "./columnIdentifier";
+import { AttributeValue } from "./types";
+export declare const COLUMN_DEF: Record<keyof typeof COLUMN_IDENTIFIER, ColumnDef<Attribute, AttributeValue>>;
+export declare const COLUMN_DEFS: ColumnDef<Attribute, AttributeValue>[];

package/lib/components/DataDictionary/components/Table/columns/columnDef.js

@@ -0,0 +1,33 @@
+import { BasicCell } from "../components/BasicCell/basicCell";
+import { COLUMN_IDENTIFIER } from "./columnIdentifier";
+const COLUMN_DEF_DESCRIPTION = {
+    accessorFn: (row) => row.description,
+    cell: (props) => BasicCell({ ...props }),
+    header: "Description",
+    id: COLUMN_IDENTIFIER.DESCRIPTION,
+    meta: { width: { max: "2fr", min: "480px" } },
+};
+const COLUMN_DEF_KEY = {
+    accessorFn: (row) => row.key,
+    cell: (props) => BasicCell({ ...props }),
+    header: "Key",
+    id: COLUMN_IDENTIFIER.KEY,
+    meta: { width: { max: "1fr", min: "180px" } },
+};
+const COLUMN_DEF_LABEL = {
+    accessorFn: (row) => row.label,
+    cell: (props) => BasicCell({ ...props }),
+    header: "Label",
+    id: COLUMN_IDENTIFIER.LABEL,
+    meta: { width: { max: "1fr", min: "200px" } },
+};
+export const COLUMN_DEF = {
+    DESCRIPTION: COLUMN_DEF_DESCRIPTION,
+    KEY: COLUMN_DEF_KEY,
+    LABEL: COLUMN_DEF_LABEL,
+};
+export const COLUMN_DEFS = [
+    COLUMN_DEF.LABEL,
+    COLUMN_DEF.KEY,
+    COLUMN_DEF.DESCRIPTION,
+];

package/lib/components/DataDictionary/components/Table/columns/columnIdentifier.d.ts

@@ -0,0 +1,5 @@
+export declare const COLUMN_IDENTIFIER: {
+    readonly DESCRIPTION: "description";
+    readonly KEY: "key";
+    readonly LABEL: "label";
+};

package/lib/components/DataDictionary/components/Table/columns/columnIdentifier.js

@@ -0,0 +1,5 @@
+export const COLUMN_IDENTIFIER = {
+    DESCRIPTION: "description",
+    KEY: "key",
+    LABEL: "label",
+};

package/lib/components/DataDictionary/components/Table/columns/types.d.ts

@@ -0,0 +1,2 @@
+import { Attribute } from "../../../../../common/entities";
+export type AttributeValue = Attribute[keyof Attribute];

package/lib/components/DataDictionary/components/Table/columns/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/DataDictionary/components/Table/components/BasicCell/basicCell.d.ts

@@ -0,0 +1,2 @@
+import { BasicCellProps } from "./types";
+export declare const BasicCell: ({ getValue }: BasicCellProps) => JSX.Element;

package/lib/components/DataDictionary/components/Table/components/BasicCell/basicCell.js

@@ -0,0 +1,6 @@
+import { Typography } from "@mui/material";
+import React from "react";
+import { VARIANT } from "../../../../../../styles/common/mui/typography";
+export const BasicCell = ({ getValue }) => {
+    return React.createElement(Typography, { variant: VARIANT.INHERIT }, getValue());
+};

package/lib/components/DataDictionary/components/Table/components/BasicCell/types.d.ts

@@ -0,0 +1,4 @@
+import { CellContext } from "@tanstack/react-table";
+import { Attribute } from "../../../../../../common/entities";
+import { AttributeValue } from "../../columns/types";
+export type BasicCellProps = CellContext<Attribute, AttributeValue>;

package/lib/components/DataDictionary/components/Table/components/BasicCell/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/DataDictionary/components/Table/hook.d.ts

@@ -0,0 +1,3 @@
+import { Table } from "@tanstack/react-table";
+import { Attribute } from "../../../../common/entities";
+export declare const useTable: (data: Attribute[]) => Table<Attribute>;

package/lib/components/DataDictionary/components/Table/hook.js

@@ -0,0 +1,11 @@
+import { useReactTable } from "@tanstack/react-table";
+import { COLUMN_DEFS } from "./columns/columnDef";
+import { useTableOptions } from "./options/hook";
+export const useTable = (data) => {
+    const tableOptions = useTableOptions();
+    return useReactTable({
+        ...tableOptions,
+        columns: COLUMN_DEFS,
+        data,
+    });
+};

package/lib/components/DataDictionary/components/Table/options/core/constants.d.ts

@@ -0,0 +1,3 @@
+import { CoreOptions } from "@tanstack/react-table";
+import { Attribute } from "../../../../../../common/entities";
+export declare const CORE_OPTIONS: Pick<CoreOptions<Attribute>, "_features" | "getCoreRowModel">;

package/lib/components/DataDictionary/components/Table/options/core/constants.js

@@ -0,0 +1,7 @@
+import { getCoreRowModel } from "@tanstack/react-table";
+import { ROW_POSITION } from "../../../../../Table/features/RowPosition/constants";
+import { ROW_PREVIEW } from "../../../../../Table/features/RowPreview/constants";
+export const CORE_OPTIONS = {
+    _features: [ROW_POSITION, ROW_PREVIEW],
+    getCoreRowModel: getCoreRowModel(),
+};

package/lib/components/DataDictionary/components/Table/options/hook.d.ts

@@ -0,0 +1,3 @@
+import { TableOptions } from "@tanstack/react-table";
+import { Attribute } from "../../../../../common/entities";
+export declare const useTableOptions: () => Omit<TableOptions<Attribute>, "columns" | "data">;

package/lib/components/DataDictionary/components/Table/options/hook.js

@@ -0,0 +1,8 @@
+import { CORE_OPTIONS } from "./core/constants";
+import { SORTING_OPTIONS } from "./sorting/constants";
+export const useTableOptions = () => {
+    return {
+        ...CORE_OPTIONS,
+        ...SORTING_OPTIONS,
+    };
+};

package/lib/components/DataDictionary/components/Table/options/sorting/constants.d.ts

@@ -0,0 +1,3 @@
+import { SortingOptions } from "@tanstack/react-table";
+import { Attribute } from "../../../../../../common/entities";
+export declare const SORTING_OPTIONS: Pick<SortingOptions<Attribute>, "enableSorting">;

package/lib/components/DataDictionary/components/Table/options/sorting/constants.js

@@ -0,0 +1,3 @@
+export const SORTING_OPTIONS = {
+    enableSorting: false,
+};

package/lib/components/DataDictionary/components/Table/table.d.ts

@@ -0,0 +1,2 @@
+import { TableProps } from "./types";
+export declare const Table: ({ table }: TableProps) => JSX.Element;

package/lib/components/DataDictionary/components/Table/table.js

@@ -0,0 +1,17 @@
+import { TableContainer } from "@mui/material";
+import React from "react";
+import { TableBody } from "../../../Detail/components/Table/components/TableBody/tableBody";
+import { ROW_DIRECTION } from "../../../Table/common/entities";
+import { TableHead } from "../../../Table/components/TableHead/tableHead";
+import { GridTable } from "../../../Table/table.styles";
+import { getColumnTrackSizing } from "../../../TableCreator/options/columnTrackSizing/utils";
+import { GridPaper } from "../../../common/Paper/paper.styles";
+import { StyledRoundedPaper } from "./table.styles";
+export const Table = ({ table }) => {
+    return (React.createElement(StyledRoundedPaper, { variant: "table" },
+        React.createElement(GridPaper, null,
+            React.createElement(TableContainer, null,
+                React.createElement(GridTable, { gridTemplateColumns: getColumnTrackSizing(table.getVisibleFlatColumns()) },
+                    React.createElement(TableHead, { rowDirection: ROW_DIRECTION.DEFAULT, tableInstance: table }),
+                    React.createElement(TableBody, { rowDirection: ROW_DIRECTION.DEFAULT, tableInstance: table }))))));
+};

package/lib/components/DataDictionary/components/Table/table.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const StyledRoundedPaper: import("@emotion/styled").StyledComponent<import("../../../common/Paper/paper").PaperProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/DataDictionary/components/Table/table.styles.js

@@ -0,0 +1,5 @@
+import styled from "@emotion/styled";
+import { RoundedPaper } from "../../../common/Paper/paper.styles";
+export const StyledRoundedPaper = styled(RoundedPaper) `
+  box-shadow: none;
+`;

package/lib/components/DataDictionary/components/Table/types.d.ts

@@ -0,0 +1,5 @@
+import { Table } from "@tanstack/react-table";
+import { Attribute } from "../../../../common/entities";
+export interface TableProps {
+    table: Table<Attribute>;
+}

package/lib/components/DataDictionary/components/Table/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/DataDictionary/dataDictionary.d.ts

@@ -0,0 +1,2 @@
+import { BaseComponentProps } from "../types";
+export declare const DataDictionary: ({ className, }: BaseComponentProps) => JSX.Element;

package/lib/components/DataDictionary/dataDictionary.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { Entities } from "./components/Entities/entities";
+import { View } from "./dataDictionary.styles";
+import { useDataDictionary } from "./hooks/UseDataDictionary/hook";
+export const DataDictionary = ({ className, }) => {
+    const { classes } = useDataDictionary();
+    return (React.createElement(View, { className: className },
+        React.createElement(Entities, { classes: classes })));
+};

package/lib/components/DataDictionary/dataDictionary.styles.d.ts

@@ -0,0 +1 @@
+export declare const View: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/components/DataDictionary/dataDictionary.styles.js

@@ -0,0 +1,7 @@
+import { styled } from "@mui/material";
+export const View = styled("div") `
+  flex: 1;
+  margin: 0 auto;
+  max-width: calc(100vw - 48px);
+  padding: 24px 0;
+`;

package/lib/components/DataDictionary/hooks/UseDataDictionary/hook.d.ts

@@ -0,0 +1,2 @@
+import { UseDataDictionary } from "./types";
+export declare const useDataDictionary: () => UseDataDictionary;

package/lib/components/DataDictionary/hooks/UseDataDictionary/hook.js

@@ -0,0 +1,5 @@
+import { useConfig } from "../../../../hooks/useConfig";
+export const useDataDictionary = () => {
+    const { config: { dataDictionary: { classes = [] } = {} }, } = useConfig();
+    return { classes };
+};

package/lib/components/DataDictionary/hooks/UseDataDictionary/types.d.ts

@@ -0,0 +1,4 @@
+import { Class } from "../../../../common/entities";
+export interface UseDataDictionary {
+    classes: Class[];
+}

package/lib/components/DataDictionary/hooks/UseDataDictionary/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/Detail/detail.stories.d.ts

@@ -1,5 +1,36 @@
-import { ComponentMeta } from "@storybook/react";
-import { Detail } from "./detail";
-declare const _default: ComponentMeta<typeof Detail>;
-export default _default;
-export declare const DetailStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./detail").DetailProps>;
+import { StoryObj } from "@storybook/react";
+declare const meta: {
+    argTypes: {
+        Tabs: {
+            table: {
+                disable: true;
+            };
+        };
+        isDetailOverview: {
+            control: "boolean";
+        };
+        mainColumn: {
+            table: {
+                disable: true;
+            };
+        };
+        sideColumn: {
+            table: {
+                disable: true;
+            };
+        };
+        top: {
+            table: {
+                disable: true;
+            };
+        };
+    };
+    component: ({ isDetailOverview, mainColumn, sideColumn, Tabs, top, }: import("./detail").DetailProps) => JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const DetailStory: Story;

package/lib/components/Detail/detail.stories.js

@@ -1,15 +1,23 @@
 import React from "react";
+import { CollaboratingOrganizations } from "../Project/components/CollaboratingOrganizations/collaboratingOrganizations";
 import { CollaboratingOrganizationsStory } from "../Project/components/CollaboratingOrganizations/collaboratingOrganizations.stories";
+import { Contacts } from "../Project/components/Contacts/contacts";
 import { ContactsStory } from "../Project/components/Contacts/contacts.stories";
+import { Contributors } from "../Project/components/Contributors/contributors";
 import { ContributorsStory } from "../Project/components/Contributors/contributors.stories";
+import { DataCurators } from "../Project/components/DataCurators/dataCurators";
 import { DataCuratorsStory } from "../Project/components/DataCurators/dataCurators.stories";
-import { DataReleasePolicyStory } from "../Project/components/DataReleasePolicy/dataReleasePolicy.stories";
+import { DataReleasePolicy } from "../Project/components/DataReleasePolicy/dataReleasePolicy";
+import { Description } from "../Project/components/Description/description";
 import { DescriptionStory } from "../Project/components/Description/description.stories";
+import { Details } from "../Project/components/Details/details";
 import { DetailsStory } from "../Project/components/Details/details.stories";
+import { Publications } from "../Project/components/Publications/publications";
 import { PublicationsStory } from "../Project/components/Publications/publications.stories";
+import { SupplementaryLinks } from "../Project/components/SupplementaryLinks/supplementaryLinks";
 import { SupplementaryLinksStory } from "../Project/components/SupplementaryLinks/supplementaryLinks.stories";
 import { Detail } from "./detail";
-export default {
+const meta = {
     argTypes: {
         Tabs: { table: { disable: true } },
         isDetailOverview: { control: "boolean" },
@@ -23,20 +31,21 @@ export default {
     },
     title: "Views/EntityDetailView",
 };
-const DetailTemplate = (args) => (React.createElement(Detail, { ...args }));
-export const DetailStory = DetailTemplate.bind({});
-DetailStory.args = {
-    isDetailOverview: true,
-    mainColumn: (React.createElement(React.Fragment, null,
-        React.createElement(DescriptionStory, { projectDescription: DescriptionStory.args?.projectDescription || "None" }),
-        React.createElement(ContactsStory, { ...ContactsStory.args }),
-        React.createElement(PublicationsStory, { ...PublicationsStory.args }),
-        React.createElement(ContributorsStory, { ...ContributorsStory.args }),
-        React.createElement(CollaboratingOrganizationsStory, { ...CollaboratingOrganizationsStory.args }),
-        React.createElement(DataCuratorsStory, { ...DataCuratorsStory.args }),
-        React.createElement(SupplementaryLinksStory, { ...SupplementaryLinksStory.args }),
-        React.createElement(DataReleasePolicyStory, null))),
-    sideColumn: (React.createElement(React.Fragment, null,
-        React.createElement(DetailsStory, { keyValuePairs: DetailsStory.args?.keyValuePairs, title: DetailsStory.args?.title ?? "" }))),
-    top: React.createElement(React.Fragment, null),
+export default meta;
+export const DetailStory = {
+    args: {
+        isDetailOverview: true,
+        mainColumn: (React.createElement(React.Fragment, null,
+            React.createElement(Description, { projectDescription: DescriptionStory.args.projectDescription || "None" }),
+            React.createElement(Contacts, { ...ContactsStory.args }),
+            React.createElement(Publications, { ...PublicationsStory.args }),
+            React.createElement(Contributors, { ...ContributorsStory.args }),
+            React.createElement(CollaboratingOrganizations, { ...CollaboratingOrganizationsStory.args }),
+            React.createElement(DataCurators, { ...DataCuratorsStory.args }),
+            React.createElement(SupplementaryLinks, { ...SupplementaryLinksStory.args }),
+            React.createElement(DataReleasePolicy, null))),
+        sideColumn: (React.createElement(React.Fragment, null,
+            React.createElement(Details, { ...DetailsStory.args }))),
+        top: React.createElement(React.Fragment, null),
+    },
 };

package/lib/components/Export/components/ExportMethod/exportMethod.stories.d.ts

@@ -1,5 +1,22 @@
-import { ComponentMeta } from "@storybook/react";
-import { ExportMethod } from "./exportMethod";
-declare const _default: ComponentMeta<typeof ExportMethod>;
-export default _default;
-export declare const ExportMethodStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./exportMethod").ExportMethodProps>;
+import { StoryObj } from "@storybook/react";
+declare const meta: {
+    argTypes: {
+        buttonLabel: {
+            control: "text";
+        };
+        description: {
+            control: "text";
+        };
+        route: {
+            control: "text";
+        };
+        title: {
+            control: "text";
+        };
+    };
+    component: ({ buttonLabel, description, footnote, isAccessible, route, title, trackingId, }: import("./exportMethod").ExportMethodProps) => JSX.Element;
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const ExportMethodStory: Story;

package/lib/components/Export/components/ExportMethod/exportMethod.stories.js

@@ -1,6 +1,5 @@
-import React from "react";
 import { ExportMethod } from "./exportMethod";
-export default {
+const meta = {
     argTypes: {
         buttonLabel: { control: "text" },
         description: { control: "text" },
@@ -10,11 +9,12 @@ export default {
     component: ExportMethod,
     title: "Components/Section/Export/ExportMethod",
 };
-const ExportMethodTemplate = (args) => (React.createElement(ExportMethod, { ...args }));
-export const ExportMethodStory = ExportMethodTemplate.bind({});
-ExportMethodStory.args = {
-    buttonLabel: "Request curl Command",
-    description: "Obtain a curl command for downloading the selected data.",
-    route: "/request-curl-command",
-    title: "Download Study Data and Metadata (Curl Command)",
+export default meta;
+export const ExportMethodStory = {
+    args: {
+        buttonLabel: "Request curl Command",
+        description: "Obtain a curl command for downloading the selected data.",
+        route: "/request-curl-command",
+        title: "Download Study Data and Metadata (Curl Command)",
+    },
 };

package/lib/components/Filter/components/Filter/filter.stories.d.ts

@@ -1,5 +1,25 @@
-import { ComponentMeta } from "@storybook/react";
-import { Filter } from "./filter";
-declare const _default: ComponentMeta<typeof Filter>;
-export default _default;
-export declare const FilterStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./filter").FilterProps>;
+import { StoryObj } from "@storybook/react";
+import React from "react";
+declare const meta: {
+    argTypes: {
+        tags: {
+            control: {
+                disable: true;
+            };
+        };
+    };
+    component: ({ categorySection, categoryView, closeAncestor, isFilterDrawer, onFilter, tags, trackFilterOpened, }: import("./filter").FilterProps) => JSX.Element;
+    decorators: ((Story: import("@storybook/core/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        categorySection?: string | undefined;
+        categoryView: import("../../../../common/entities").SelectCategoryView;
+        closeAncestor?: (() => void) | undefined;
+        isFilterDrawer: boolean;
+        onFilter: import("../../../../hooks/useCategoryFilter").OnFilterFn;
+        tags?: React.ReactNode;
+        trackFilterOpened?: import("../../../../config/entities").TrackFilterOpenedFunction | undefined;
+    }>) => JSX.Element)[];
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const FilterStory: Story;

package/lib/components/Filter/components/Filter/filter.stories.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { Filter } from "./filter";
-export default {
+const meta = {
     argTypes: {
         tags: { control: { disable: true } },
     },
@@ -11,31 +11,32 @@ export default {
     ],
     title: "Components/Filter/Filter",
 };
-const FilterTemplate = (args) => (React.createElement(Filter, { ...args }));
+export default meta;
 const onFilter = () => {
     // onFilter function
 };
-export const FilterStory = FilterTemplate.bind({});
-FilterStory.args = {
-    categoryView: {
-        isDisabled: false,
-        key: "genusSpecies",
-        label: "Genus Species",
-        values: [
-            {
-                count: 12,
-                key: "homoSapiens",
-                label: "Homo sapiens",
-                selected: false,
-            },
-            {
-                count: 6,
-                key: "musMusculus",
-                label: "Mus musculus",
-                selected: false,
-            },
-        ],
+export const FilterStory = {
+    args: {
+        categoryView: {
+            isDisabled: false,
+            key: "genusSpecies",
+            label: "Genus Species",
+            values: [
+                {
+                    count: 12,
+                    key: "homoSapiens",
+                    label: "Homo sapiens",
+                    selected: false,
+                },
+                {
+                    count: 6,
+                    key: "musMusculus",
+                    label: "Mus musculus",
+                    selected: false,
+                },
+            ],
+        },
+        isFilterDrawer: false,
+        onFilter,
     },
-    isFilterDrawer: false,
-    onFilter,
 };