@databiosphere/findable-ui 21.4.0 → 23.0.0

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/components/Title/title.d.ts

@@ -0,0 +1,2 @@
+import { TitleProps } from "../../../common/Title/title";
+export declare const Title: ({ title, ...props }: TitleProps) => JSX.Element;

package/lib/components/DataDictionary/components/Title/title.js

@@ -0,0 +1,3 @@
+import React from "react";
+import { StyledTitle } from "./title.styles";
+export const Title = ({ title = "Data Dictionary", ...props }) => React.createElement(StyledTitle, { title: title, ...props });

package/lib/components/DataDictionary/components/Title/title.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const StyledTitle: import("@emotion/styled").StyledComponent<import("../../../common/Title/title").TitleProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/DataDictionary/components/Title/title.styles.js

@@ -0,0 +1,17 @@
+import styled from "@emotion/styled";
+import { mediaTabletDown } from "../../../../styles/common/mixins/breakpoints";
+import { Title } from "../../../common/Title/title";
+export const StyledTitle = styled(Title) `
+  & {
+    font-size: 34px;
+    grid-column: 1 / -1;
+    letter-spacing: normal;
+    line-height: 42px;
+    margin: 24px 0 8px;
+
+    ${mediaTabletDown} {
+      font-size: 26px;
+      line-height: 34px;
+    }
+  }
+`;

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

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

package/lib/components/DataDictionary/dataDictionary.js

@@ -0,0 +1,23 @@
+import React, { useMemo } from "react";
+import { Entities } from "./components/Entities/entities";
+import { EntitiesLayout as DefaultEntitiesLayout } from "./components/Layout/components/EntitiesLayout/entitiesLayout";
+import { OutlineLayout as DefaultOutlineLayout } from "./components/Layout/components/OutlineLayout/outlineLayout";
+import { TitleLayout as DefaultTitleLayout } from "./components/Layout/components/TitleLayout/titleLayout";
+import { Outline as DefaultOutline } from "./components/Outline/outline";
+import { buildClassesOutline } from "./components/Outline/utils";
+import { Title as DefaultTitle } from "./components/Title/title";
+import { View } from "./dataDictionary.styles";
+import { useDataDictionary } from "./hooks/UseDataDictionary/hook";
+import { useLayoutSpacing } from "./hooks/UseLayoutSpacing/hook";
+export const DataDictionary = ({ className, EntitiesLayout = DefaultEntitiesLayout, Outline = DefaultOutline, OutlineLayout = DefaultOutlineLayout, Title = DefaultTitle, TitleLayout = DefaultTitleLayout, }) => {
+    const { classes } = useDataDictionary();
+    const { spacing } = useLayoutSpacing();
+    const outline = useMemo(() => buildClassesOutline(classes), [classes]);
+    return (React.createElement(View, { className: className },
+        React.createElement(TitleLayout, { ...spacing },
+            React.createElement(Title, null)),
+        React.createElement(OutlineLayout, { ...spacing },
+            React.createElement(Outline, { outline: outline })),
+        React.createElement(EntitiesLayout, { ...spacing },
+            React.createElement(Entities, { classes: classes, spacing: spacing }))));
+};

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

@@ -0,0 +1,5 @@
+export declare const grid: import("@emotion/react").SerializedStyles;
+export declare const View: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -0,0 +1,20 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { mediaTabletDown } from "../../styles/common/mixins/breakpoints";
+export const grid = css `
+  column-gap: 24px;
+  display: grid;
+  grid-template-columns: 242px 1fr;
+`;
+export const View = styled("div") `
+  ${grid};
+  flex: 1;
+  margin: 0 auto;
+  max-width: min(calc(100vw - 48px), 1392px);
+  position: relative;
+
+  ${mediaTabletDown} {
+    grid-template-columns: 1fr;
+    max-width: calc(100vw - 32px);
+  }
+`;

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,6 @@
+import { useMemo } from "react";
+import { useConfig } from "../../../../hooks/useConfig";
+export const useDataDictionary = () => {
+    const { config: { dataDictionary: { classes = [] } = {} }, } = useConfig();
+    return useMemo(() => ({ classes }), [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/DataDictionary/hooks/UseLayoutSpacing/hook.d.ts

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

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

@@ -0,0 +1,10 @@
+import { useLayoutDimensions } from "../../../../providers/layoutDimensions/hook";
+export const useLayoutSpacing = () => {
+    const { dimensions } = useLayoutDimensions();
+    return {
+        spacing: {
+            bottom: dimensions.footer.height,
+            top: dimensions.header.height,
+        },
+    };
+};

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

@@ -0,0 +1,7 @@
+export interface LayoutSpacing {
+    bottom: number;
+    top: number;
+}
+export interface UseLayoutSpacing {
+    spacing: LayoutSpacing;
+}

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

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

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

@@ -0,0 +1,9 @@
+import { ElementType } from "react";
+import { BaseComponentProps } from "../types";
+export interface DataDictionaryProps extends BaseComponentProps {
+    EntitiesLayout?: ElementType;
+    Outline?: ElementType;
+    OutlineLayout?: ElementType;
+    Title?: ElementType;
+    TitleLayout?: ElementType;
+}

package/lib/components/DataDictionary/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/Error/error.js

@@ -2,8 +2,8 @@ import { Divider, Typography } from "@mui/material";
 import Link from "next/link";
 import React from "react";
 import { useExploreState } from "../../hooks/useExploreState";
-import { useLayoutState } from "../../hooks/useLayoutState";
 import { ExploreActionKind } from "../../providers/exploreState";
+import { useLayoutDimensions } from "../../providers/layoutDimensions/hook";
 import { ButtonPrimary } from "../common/Button/components/ButtonPrimary/buttonPrimary";
 import { AlertIcon } from "../common/CustomIcon/components/AlertIcon/alertIcon";
 import { Grid } from "../common/Grid/grid";
@@ -17,7 +17,7 @@ const ErrorMessage = ({ detail, title, }) => (React.createElement(Content, null,
         React.createElement(ErrorCode, null, detail))));
 export const Error = ({ errorMessage, onReset, requestUrlMessage, rootPath, }) => {
     const { exploreDispatch } = useExploreState();
-    const { layoutState: { headerHeight }, } = useLayoutState();
+    const { dimensions } = useLayoutDimensions();
     const handleToHomePageClicked = () => {
         onReset?.();
         exploreDispatch({
@@ -25,7 +25,7 @@ export const Error = ({ errorMessage, onReset, requestUrlMessage, rootPath, }) =
             type: ExploreActionKind.ResetState,
         });
     };
-    return (React.createElement(ErrorLayout, { offset: headerHeight },
+    return (React.createElement(ErrorLayout, { offset: dimensions.header.height },
         React.createElement(CustomError, null,
             React.createElement(ErrorSection, null,
                 React.createElement(StatusIcon, { priority: PRIORITY.HIGH, StatusIcon: AlertIcon }),

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,
 };

package/lib/components/Filter/components/FilterLabel/filterLabel.stories.d.ts

@@ -1,5 +1,31 @@
-import { ComponentMeta } from "@storybook/react";
-import { FilterLabel } from "./filterLabel";
-declare const _default: ComponentMeta<typeof FilterLabel>;
-export default _default;
-export declare const FilterLabelStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./filterLabel").FilterLabelProps>;
+import { StoryObj } from "@storybook/react";
+import React from "react";
+declare const meta: {
+    argTypes: {
+        count: {
+            control: "number";
+        };
+        disabled: {
+            control: "boolean";
+        };
+        isOpen: {
+            control: "boolean";
+        };
+        label: {
+            control: "text";
+        };
+    };
+    component: ({ annotation, count, disabled, isOpen, label, onClick, }: import("./filterLabel").FilterLabelProps) => JSX.Element;
+    decorators: ((Story: import("@storybook/core/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        annotation?: import("../../../../common/entities").DataDictionaryAnnotation | undefined;
+        count?: number | undefined;
+        disabled?: boolean | undefined;
+        isOpen: boolean;
+        label: string;
+        onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    }>) => JSX.Element)[];
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const FilterLabelStory: Story;

package/lib/components/Filter/components/FilterLabel/filterLabel.stories.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { FilterLabel } from "./filterLabel";
-export default {
+const meta = {
     argTypes: {
         count: { control: "number" },
         disabled: { control: "boolean" },
@@ -14,11 +14,13 @@ export default {
     ],
     title: "Components/Filter/FilterLabel",
 };
-const FilterLabelTemplate = (args) => (React.createElement(FilterLabel, { ...args }));
-export const FilterLabelStory = FilterLabelTemplate.bind({});
-FilterLabelStory.args = {
-    count: 123,
-    disabled: false,
-    isOpen: false,
-    label: "Label",
+export default meta;
+export const FilterLabelStory = {
+    args: {
+        count: 123,
+        disabled: false,
+        isOpen: false,
+        label: "Label",
+        onClick: () => { },
+    },
 };

package/lib/components/Filter/components/FilterMenu/filterMenu.stories.d.ts

@@ -1,5 +1,38 @@
-import { ComponentMeta } from "@storybook/react";
-import { FilterMenu } from "./filterMenu";
-declare const _default: ComponentMeta<typeof FilterMenu>;
-export default _default;
-export declare const FilterMenuStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./filterMenu").FilterMenuProps>;
+import { StoryObj } from "@storybook/react";
+declare const meta: {
+    argTypes: {
+        categoryKey: {
+            control: {
+                disable: true;
+            };
+        };
+        menuWidth: {
+            control: "number";
+        };
+        onFilter: {
+            control: {
+                disable: true;
+            };
+        };
+        values: {
+            control: {
+                disable: true;
+            };
+        };
+    };
+    component: ({ categoryKey, categoryLabel, categorySection, isFilterDrawer, menuWidth, onCloseFilter, onFilter, values, }: import("./filterMenu").FilterMenuProps) => JSX.Element;
+    decorators: ((Story: import("@storybook/core/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        categoryKey: import("../../../../common/entities").CategoryKey;
+        categoryLabel: string;
+        categorySection?: string | undefined;
+        isFilterDrawer: boolean;
+        menuWidth?: number | undefined;
+        onCloseFilter: () => void;
+        onFilter: import("../../../../hooks/useCategoryFilter").OnFilterFn;
+        values: import("../../../../common/entities").SelectCategoryValueView[];
+    }>) => JSX.Element)[];
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const FilterMenuStory: Story;