@databiosphere/findable-ui 21.4.0 → 23.0.0

package/lib/components/common/Section/components/SectionTitle/sectionTitle.stories.d.ts

@@ -1,5 +1,13 @@
-import { ComponentMeta } from "@storybook/react";
-import { SectionTitle } from "./sectionTitle";
-declare const _default: ComponentMeta<typeof SectionTitle>;
-export default _default;
-export declare const SectionTitleStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./sectionTitle").SectionTitleProps>;
+import { StoryObj } from "@storybook/react";
+declare const meta: {
+    argTypes: {
+        title: {
+            control: "text";
+        };
+    };
+    component: ({ className, title, }: import("./sectionTitle").SectionTitleProps) => JSX.Element;
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const SectionTitleStory: Story;

package/lib/components/common/Section/components/SectionTitle/sectionTitle.stories.js

@@ -1,14 +1,14 @@
-import React from "react";
 import { SectionTitle } from "./sectionTitle";
-export default {
+const meta = {
     argTypes: {
         title: { control: "text" },
     },
     component: SectionTitle,
     title: "Components/SectionContent/Title",
 };
-const SectionTitleTemplate = (args) => (React.createElement(SectionTitle, { ...args }));
-export const SectionTitleStory = SectionTitleTemplate.bind({});
-SectionTitleStory.args = {
-    title: "Analysis Portals",
+export default meta;
+export const SectionTitleStory = {
+    args: {
+        title: "Analysis Portals",
+    },
 };

package/lib/components/common/Socials/socials.stories.d.ts

@@ -1,6 +1,14 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react";
 import { Socials } from "./socials";
-declare const _default: Meta<typeof Socials>;
-export default _default;
+declare const meta: {
+    argTypes: {
+        socials: {
+            control: "object";
+        };
+    };
+    component: import("react").ForwardRefExoticComponent<import("./socials").SocialsProps & import("react").RefAttributes<HTMLDivElement>>;
+    title: string;
+};
+export default meta;
 type Story = StoryObj<typeof Socials>;
 export declare const SocialsStory: Story;

package/lib/components/common/Socials/socials.stories.js

@@ -6,13 +6,14 @@ import { SlackIcon } from "../CustomIcon/components/SlackIcon/slackIcon";
 import { XIcon } from "../CustomIcon/components/XIcon/xIcon";
 import { YouTubeIcon } from "../CustomIcon/components/YouTubeIcon/youTubeIcon";
 import { Socials } from "./socials";
-export default {
+const meta = {
     argTypes: {
         socials: { control: "object" },
     },
     component: Socials,
     title: "Components/Navigation/SocialLinks",
 };
+export default meta;
 export const SocialsStory = {
     args: {
         socials: [

package/lib/components/common/StaticImage/staticImage.stories.d.ts

@@ -1,5 +1,22 @@
-import { ComponentMeta } from "@storybook/react";
-import { StaticImage } from "./staticImage";
-declare const _default: ComponentMeta<typeof StaticImage>;
-export default _default;
-export declare const StaticImageStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./staticImage").StaticImageProps>;
+import { StoryObj } from "@storybook/react";
+declare const meta: {
+    argTypes: {
+        alt: {
+            control: "text";
+        };
+        height: {
+            control: "number";
+        };
+        src: {
+            control: "text";
+        };
+        width: {
+            control: "number";
+        };
+    };
+    component: ({ alt, height, src, width, }: import("./staticImage").StaticImageProps) => JSX.Element;
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const StaticImageStory: Story;

package/lib/components/common/StaticImage/staticImage.stories.js

@@ -1,7 +1,6 @@
-import React from "react";
 import logo from "../../../images/logo.svg";
 import { StaticImage } from "./staticImage";
-export default {
+const meta = {
     argTypes: {
         alt: { control: "text" },
         height: { control: "number" },
@@ -11,10 +10,11 @@ export default {
     component: StaticImage,
     title: "Components/Common/Image/StaticImage",
 };
-const StaticImageTemplate = (args) => (React.createElement(StaticImage, { ...args }));
-export const StaticImageStory = StaticImageTemplate.bind({});
-StaticImageStory.args = {
-    alt: "Data Explorer",
-    height: 40,
-    src: logo,
+export default meta;
+export const StaticImageStory = {
+    args: {
+        alt: "Data Explorer",
+        height: 40,
+        src: logo.src,
+    },
 };

package/lib/components/common/StatusIcon/statusIcon.stories.d.ts

@@ -1,5 +1,19 @@
-import { ComponentMeta } from "@storybook/react";
-import { StatusIcon } from "./statusIcon";
-declare const _default: ComponentMeta<typeof StatusIcon>;
-export default _default;
-export declare const StatusIconStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./statusIcon").StatusIconProps>;
+import { StoryObj } from "@storybook/react";
+declare const meta: {
+    argTypes: {
+        StatusIcon: {
+            control: {
+                disable: true;
+            };
+        };
+        priority: {
+            control: "select";
+            options: string[];
+        };
+    };
+    component: ({ priority, StatusIcon, }: import("./statusIcon").StatusIconProps) => JSX.Element;
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const StatusIconStory: Story;

package/lib/components/common/StatusIcon/statusIcon.stories.js

@@ -1,7 +1,6 @@
-import React from "react";
 import { SearchOffIcon } from "../CustomIcon/components/SearchOffIcon/searchOffIcon";
 import { PRIORITY, StatusIcon } from "./statusIcon";
-export default {
+const meta = {
     argTypes: {
         StatusIcon: { control: { disable: true } },
         priority: { control: "select", options: Array.from(Object.keys(PRIORITY)) },
@@ -9,9 +8,10 @@ export default {
     component: StatusIcon,
     title: "Components/Common/Alert/StatusIcon",
 };
-const StatusIconTemplate = (args) => (React.createElement(StatusIcon, { ...args }));
-export const StatusIconStory = StatusIconTemplate.bind({});
-StatusIconStory.args = {
-    StatusIcon: SearchOffIcon,
-    priority: PRIORITY.LOW,
+export default meta;
+export const StatusIconStory = {
+    args: {
+        StatusIcon: SearchOffIcon,
+        priority: PRIORITY.LOW,
+    },
 };

package/lib/components/common/Tag/tag.stories.d.ts

@@ -1,5 +1,15 @@
-import { ComponentMeta } from "@storybook/react";
-import { Tag } from "./tag";
-declare const _default: ComponentMeta<typeof Tag>;
-export default _default;
-export declare const WarningTagStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./tag").TagProps>;
+import { StoryObj } from "@storybook/react";
+declare const meta: {
+    argTypes: {
+        children: {
+            control: {
+                disabled: boolean;
+            };
+        };
+    };
+    component: ({ children, className }: import("./tag").TagProps) => JSX.Element;
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const WarningTagStory: Story;

package/lib/components/common/Tag/tag.stories.js

@@ -1,15 +1,17 @@
 import React from "react";
 import { Tag } from "./tag";
 import { TagWarning } from "./tag.styles";
-export default {
+const meta = {
     argTypes: {
         children: { control: { disabled: true } },
     },
     component: Tag,
     title: "Components/Common/Alert/Tag",
 };
-const WarningTagTemplate = (args) => (React.createElement(TagWarning, { ...args }, args.children));
-export const WarningTagStory = WarningTagTemplate.bind({});
-WarningTagStory.args = {
-    children: "Please note",
+export default meta;
+export const WarningTagStory = {
+    args: {
+        children: "Please note",
+    },
+    render: (args) => React.createElement(TagWarning, { ...args }, args.children),
 };

package/lib/components/common/ToggleButtonGroup/toggleButtonGroup.stories.d.ts

@@ -1,5 +1,18 @@
-import { ComponentMeta } from "@storybook/react";
-import { ToggleButtonGroup } from "./toggleButtonGroup";
-declare const _default: ComponentMeta<typeof ToggleButtonGroup>;
-export default _default;
-export declare const ToggleButtonGroupStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./toggleButtonGroup").ToggleButtonGroupProps>;
+import { StoryObj } from "@storybook/react";
+declare const meta: {
+    argTypes: {
+        toggleButtons: {
+            table: {
+                disable: true;
+            };
+        };
+    };
+    component: ({ toggleButtons, ...props }: import("./toggleButtonGroup").ToggleButtonGroupProps) => JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const ToggleButtonGroupStory: Story;

package/lib/components/common/ToggleButtonGroup/toggleButtonGroup.stories.js

@@ -1,6 +1,5 @@
-import React from "react";
 import { ToggleButtonGroup } from "./toggleButtonGroup";
-export default {
+const meta = {
     argTypes: {
         toggleButtons: { table: { disable: true } },
     },
@@ -10,23 +9,24 @@ export default {
     },
     title: "Components/Common/ButtonGroup",
 };
-const ToggleButtonGroupTemplate = (args) => React.createElement(ToggleButtonGroup, { ...args });
-export const ToggleButtonGroupStory = ToggleButtonGroupTemplate.bind({});
-ToggleButtonGroupStory.args = {
-    toggleButtons: [
-        {
-            label: "Exact Match (243)",
-            onToggle: () => {
-                // onToggle function
+export default meta;
+export const ToggleButtonGroupStory = {
+    args: {
+        toggleButtons: [
+            {
+                label: "Exact Match (243)",
+                onToggle: () => {
+                    // onToggle function
+                },
+                value: "exact-match",
             },
-            value: "exact-match",
-        },
-        {
-            label: "Related (33)",
-            onToggle: () => {
-                // onToggle function
+            {
+                label: "Related (33)",
+                onToggle: () => {
+                    // onToggle function
+                },
+                value: "related-match",
             },
-            value: "related-match",
-        },
-    ],
+        ],
+    },
 };

package/lib/providers/layoutDimensions/constants.d.ts

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

package/lib/providers/layoutDimensions/constants.js

@@ -0,0 +1,4 @@
+export const DEFAULT_LAYOUT_DIMENSIONS = {
+    footer: { height: 0 },
+    header: { height: 0 },
+};

package/lib/providers/layoutDimensions/context.d.ts

@@ -0,0 +1,2 @@
+import { LayoutDimensionsContextProps } from "./types";
+export declare const LayoutDimensionsContext: import("react").Context<LayoutDimensionsContextProps>;

package/lib/providers/layoutDimensions/context.js

@@ -0,0 +1,7 @@
+import { createContext } from "react";
+import { DEFAULT_LAYOUT_DIMENSIONS } from "./constants";
+export const LayoutDimensionsContext = createContext({
+    dimensions: DEFAULT_LAYOUT_DIMENSIONS,
+    footerRef: null,
+    headerRef: null,
+});

package/lib/providers/layoutDimensions/hook.d.ts

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

package/lib/providers/layoutDimensions/hook.js

@@ -0,0 +1,5 @@
+import { useContext } from "react";
+import { LayoutDimensionsContext } from "./context";
+export const useLayoutDimensions = () => {
+    return useContext(LayoutDimensionsContext);
+};

package/lib/providers/layoutDimensions/provider.d.ts

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

package/lib/providers/layoutDimensions/provider.js

@@ -0,0 +1,14 @@
+import React, { useRef } from "react";
+import { getBorderBoxSizeHeight, useResizeObserver, } from "../../hooks/useResizeObserver";
+import { LayoutDimensionsContext } from "./context";
+export const LayoutDimensionsProvider = ({ children, }) => {
+    const footerRef = useRef(null);
+    const headerRef = useRef(null);
+    const footerRect = useResizeObserver(footerRef, getBorderBoxSizeHeight);
+    const headerRect = useResizeObserver(headerRef, getBorderBoxSizeHeight);
+    const dimensions = {
+        footer: { height: footerRect?.height ?? 0 },
+        header: { height: headerRect?.height ?? 0 },
+    };
+    return (React.createElement(LayoutDimensionsContext.Provider, { value: { dimensions, footerRef, headerRef } }, children));
+};

package/lib/providers/layoutDimensions/types.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode, RefObject } from "react";
+import { ElementRect } from "../../hooks/useResizeObserver";
+export interface LayoutDimensions {
+    footer: Pick<ElementRect, "height">;
+    header: Pick<ElementRect, "height">;
+}
+export interface LayoutDimensionsContextProps {
+    dimensions: LayoutDimensions;
+    footerRef: RefObject<HTMLElement> | null;
+    headerRef: RefObject<HTMLElement> | null;
+}
+export interface LayoutDimensionsProviderProps {
+    children: ReactNode | ReactNode[];
+}

package/lib/providers/layoutDimensions/types.js

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

package/lib/styles/common/mui/tab.d.ts

@@ -0,0 +1,7 @@
+import { TabProps } from "@mui/material";
+type TabPropsOptions = {
+    ICON_POSITION: typeof ICON_POSITION;
+};
+declare const ICON_POSITION: Record<string, TabProps["iconPosition"]>;
+export declare const TAB_PROPS: TabPropsOptions;
+export {};

package/lib/styles/common/mui/tab.js

@@ -0,0 +1,9 @@
+const ICON_POSITION = {
+    BOTTOM: "bottom",
+    END: "end",
+    START: "start",
+    TOP: "top",
+};
+export const TAB_PROPS = {
+    ICON_POSITION,
+};

package/lib/styles/common/mui/tabs.d.ts

@@ -0,0 +1,9 @@
+import { TabsProps } from "@mui/material";
+type TabsPropsOptions = {
+    INDICATOR_COLOR: typeof INDICATOR_COLOR;
+    ORIENTATION: typeof ORIENTATION;
+};
+declare const INDICATOR_COLOR: Record<string, TabsProps["indicatorColor"]>;
+declare const ORIENTATION: Record<string, TabsProps["orientation"]>;
+export declare const TABS_PROPS: TabsPropsOptions;
+export {};

package/lib/styles/common/mui/tabs.js

@@ -0,0 +1,11 @@
+const INDICATOR_COLOR = {
+    PRIMARY: "primary",
+    TRANSPARENT: "transparent",
+};
+const ORIENTATION = {
+    VERTICAL: "vertical",
+};
+export const TABS_PROPS = {
+    INDICATOR_COLOR,
+    ORIENTATION,
+};

package/lib/styles/common/mui/typography.d.ts

@@ -1,3 +1,9 @@
 import { TypographyOwnProps } from "@mui/material";
-export declare const COLOR: Record<string, TypographyOwnProps["color"]>;
-export declare const VARIANT: Record<string, TypographyOwnProps["variant"]>;
+type TypographyPropsOptions = {
+    COLOR: typeof COLOR;
+    VARIANT: typeof VARIANT;
+};
+declare const COLOR: Record<string, TypographyOwnProps["color"]>;
+declare const VARIANT: Record<string, TypographyOwnProps["variant"]>;
+export declare const TYPOGRAPHY_PROPS: TypographyPropsOptions;
+export {};

package/lib/styles/common/mui/typography.js

@@ -1,10 +1,17 @@
-export const COLOR = {
+const COLOR = {
     INHERIT: "inherit",
     INK_LIGHT: "ink.light",
     INK_MAIN: "ink.main",
 };
-export const VARIANT = {
+const VARIANT = {
     INHERIT: "inherit",
     TEXT_BODY_400: "text-body-400",
+    TEXT_BODY_400_2_LINES: "text-body-400-2lines",
+    TEXT_BODY_SMALL_400: "text-body-small-400",
+    TEXT_HEADING_LARGE: "text-heading-large",
     TEXT_HEADING_SMALL: "text-heading-small",
 };
+export const TYPOGRAPHY_PROPS = {
+    COLOR,
+    VARIANT,
+};

package/lib/views/DataDictionaryView/dataDictionaryView.d.ts

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

package/lib/views/DataDictionaryView/dataDictionaryView.js

@@ -0,0 +1,5 @@
+import React from "react";
+import { DataDictionary } from "../../components/DataDictionary/dataDictionary";
+export const DataDictionaryView = ({ className, }) => {
+    return React.createElement(DataDictionary, { className: className });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "21.4.0",
+  "version": "23.0.0",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
@@ -26,15 +26,15 @@
     "@commitlint/config-conventional": "^17.4.2",
     "@mui/types": "^7.2.18",
     "@next/eslint-plugin-next": "^14.1.0",
-    "@storybook/addon-actions": "^7.6.17",
-    "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-interactions": "^7.6.17",
-    "@storybook/addon-links": "^7.6.17",
-    "@storybook/addon-mdx-gfm": "^7.6.17",
-    "@storybook/nextjs": "^7.6.17",
-    "@storybook/react": "^7.6.17",
-    "@storybook/testing-library": "^0.2.2",
-    "@storybook/types": "^7.6.17",
+    "@storybook/addon-actions": "^8.6.4",
+    "@storybook/addon-essentials": "^8.6.4",
+    "@storybook/addon-interactions": "^8.6.4",
+    "@storybook/addon-links": "^8.6.4",
+    "@storybook/addon-mdx-gfm": "^8.6.4",
+    "@storybook/nextjs": "^8.6.4",
+    "@storybook/react": "^8.6.4",
+    "@storybook/test": "^8.6.4",
+    "@storybook/types": "^8.6.4",
     "@testing-library/react": "^16.0.1",
     "@types/jest": "^29.4.0",
     "@types/react": "^18.3.5",
@@ -60,7 +60,7 @@
     "jest-fetch-mock": "^3.0.3",
     "prettier": "^2.8.3",
     "prettier-plugin-organize-imports": "^3.2.2",
-    "storybook": "^7.6.17",
+    "storybook": "^8.6.4",
     "ts-jest": "^29.2.5",
     "typescript": "^5.5.4"
   },
@@ -72,7 +72,7 @@
     "@tanstack/react-table": "^8.19.2",
     "@tanstack/react-virtual": "^3.0.0-beta.59",
     "copy-to-clipboard": "3.3.1",
-    "isomorphic-dompurify": "0.24.0",
+    "isomorphic-dompurify": "^2.22.0",
     "ky": "^1.7.2",
     "next": "^14.1.0",
     "next-auth": "^4.24.7",
@@ -83,7 +83,7 @@
     "react-idle-timer": "^5.7.2",
     "react-window": "1.8.9",
     "uuid": "8.3.2",
-    "validate.js": "^0.13.1"
+    "yup": "^1.6.1"
   },
   "engines": {
     "node": "20.10.0"

package/src/common/selectors.ts

@@ -1,3 +1,6 @@
-export const BODY = "body";
-
-export const SIDEBAR_POSITIONER = "sidebar-positioner";
+export enum SELECTOR {
+  BODY = "body",
+  FOOTER = "footer",
+  HEADER = "header",
+  SIDEBAR_POSITIONER = "sidebar-positioner",
+}

package/src/components/DataDictionary/components/Entities/constants.ts

@@ -0,0 +1,10 @@
+import { Grid2Props } from "@mui/material";
+
+export const ENTITIES_ROW_GAP = 8;
+
+export const GRID2_PROPS: Grid2Props = {
+  container: true,
+  direction: "column",
+  flexWrap: "nowrap",
+  rowGap: ENTITIES_ROW_GAP,
+};

package/src/components/DataDictionary/components/Entities/entities.tsx

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

package/src/components/DataDictionary/components/Entities/types.ts

@@ -0,0 +1,7 @@
+import { Class } from "../../../../common/entities";
+import { LayoutSpacing } from "../../hooks/UseLayoutSpacing/types";
+
+export interface ClassesProps {
+  classes: Class[];
+  spacing?: LayoutSpacing;
+}

package/src/components/DataDictionary/components/Entity/constants.ts

@@ -0,0 +1,7 @@
+import { Grid2Props } from "@mui/material";
+
+export const GRID2_PROPS: Grid2Props = {
+  container: true,
+  direction: "column",
+  flexWrap: "nowrap",
+};

package/src/components/DataDictionary/components/Entity/entity.styles.ts

@@ -0,0 +1,12 @@
+import styled from "@emotion/styled";
+import { Typography } from "@mui/material";
+import { LayoutSpacing } from "../../hooks/UseLayoutSpacing/types";
+import { ENTITIES_ROW_GAP } from "../Entities/constants";
+
+export const StyledTypography = styled(Typography)<Partial<LayoutSpacing>>`
+  scroll-margin-top: ${({ top = 0 }) => top + ENTITIES_ROW_GAP}px;
+
+  &:hover a {
+    opacity: 1;
+  }
+` as typeof Typography;

package/src/components/DataDictionary/components/Entity/entity.tsx

@@ -0,0 +1,38 @@
+import { Grid2, Typography } from "@mui/material";
+import React from "react";
+import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
+import { AnchorLink } from "../../../common/AnchorLink/anchorLink";
+import { useTable } from "../Table/hook";
+import { Table } from "../Table/table";
+import { GRID2_PROPS } from "./constants";
+import { StyledTypography } from "./entity.styles";
+import { EntityProps } from "./types";
+
+export const Entity = ({
+  class: classData,
+  spacing,
+}: EntityProps): JSX.Element => {
+  const table = useTable(classData.attributes);
+  return (
+    <Grid2 {...GRID2_PROPS} rowGap={4}>
+      <Grid2 {...GRID2_PROPS} rowGap={1}>
+        <StyledTypography
+          component="h3"
+          id={classData.key}
+          variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_SMALL}
+          {...spacing}
+        >
+          {classData.label} <AnchorLink anchorLink={classData.key} />
+        </StyledTypography>
+        <Typography
+          color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
+          component="div"
+          variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400_2_LINES}
+        >
+          {classData.description}
+        </Typography>
+      </Grid2>
+      <Table table={table} />
+    </Grid2>
+  );
+};