@databiosphere/findable-ui 21.4.0 → 23.0.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "21.4.0"
+  ".": "23.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,50 @@
 # Changelog
 
+## [23.0.0](https://github.com/DataBiosphere/findable-ui/compare/v22.0.0...v23.0.0) (2025-03-21)
+
+
+### ⚠ BREAKING CHANGES
+
+* create data dictionary left-hand navigation component and add dictionary layout ([#337](https://github.com/DataBiosphere/findable-ui/issues/337)) (#338)
+* layoutdimensions provider and remove layout state provider ([#348](https://github.com/DataBiosphere/findable-ui/issues/348)) (#349)
+* refactor outline component with new hook handling state and disabled outline item ([#346](https://github.com/DataBiosphere/findable-ui/issues/346)) (#347)
+* refactor selectors into an enum and add ids to header and footer ([#341](https://github.com/DataBiosphere/findable-ui/issues/341)) (#343)
+* refactor typography constants ([#339](https://github.com/DataBiosphere/findable-ui/issues/339)) (#340)
+
+### Features
+
+* create a new provider that returns header and footer dimensions ([#344](https://github.com/DataBiosphere/findable-ui/issues/344)) ([#345](https://github.com/DataBiosphere/findable-ui/issues/345)) ([7800842](https://github.com/DataBiosphere/findable-ui/commit/7800842b43b6e2edae926dcc26c842ccb592c407))
+* create data dictionary left-hand navigation component and add dictionary layout ([#337](https://github.com/DataBiosphere/findable-ui/issues/337)) ([#338](https://github.com/DataBiosphere/findable-ui/issues/338)) ([94115b3](https://github.com/DataBiosphere/findable-ui/commit/94115b3a308f150bdeba9a9e374a9dcc510f3405))
+
+
+### Bug Fixes
+
+* layoutdimensions provider and remove layout state provider ([#348](https://github.com/DataBiosphere/findable-ui/issues/348)) ([#349](https://github.com/DataBiosphere/findable-ui/issues/349)) ([77deafe](https://github.com/DataBiosphere/findable-ui/commit/77deafe915d5a6fe42667a404d2b1f062f67cabb))
+
+
+### Code Refactoring
+
+* refactor outline component with new hook handling state and disabled outline item ([#346](https://github.com/DataBiosphere/findable-ui/issues/346)) ([#347](https://github.com/DataBiosphere/findable-ui/issues/347)) ([0d8fdba](https://github.com/DataBiosphere/findable-ui/commit/0d8fdba669c47e61d5e524274b237eed55998fd6))
+* refactor selectors into an enum and add ids to header and footer ([#341](https://github.com/DataBiosphere/findable-ui/issues/341)) ([#343](https://github.com/DataBiosphere/findable-ui/issues/343)) ([71b7444](https://github.com/DataBiosphere/findable-ui/commit/71b74449330ce507f22939d7bdaf0f92af985de8))
+* refactor typography constants ([#339](https://github.com/DataBiosphere/findable-ui/issues/339)) ([#340](https://github.com/DataBiosphere/findable-ui/issues/340)) ([a5632b5](https://github.com/DataBiosphere/findable-ui/commit/a5632b50d852323a0002eae7b0524378728ff081))
+
+## [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/common/selectors.d.ts

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

package/lib/common/selectors.js

@@ -1,2 +1,7 @@
-export const BODY = "body";
-export const SIDEBAR_POSITIONER = "sidebar-positioner";
+export var SELECTOR;
+(function (SELECTOR) {
+    SELECTOR["BODY"] = "body";
+    SELECTOR["FOOTER"] = "footer";
+    SELECTOR["HEADER"] = "header";
+    SELECTOR["SIDEBAR_POSITIONER"] = "sidebar-positioner";
+})(SELECTOR || (SELECTOR = {}));

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

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

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

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

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

@@ -0,0 +1,2 @@
+import { ClassesProps } from "./types";
+export declare const Entities: ({ classes, spacing }: 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, spacing }) => {
+    return (React.createElement(Grid2, { ...GRID2_PROPS }, classes.map((classData) => (React.createElement(Entity, { key: classData.key, class: classData, spacing: spacing })))));
+};

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

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

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, spacing, }: EntityProps) => JSX.Element;

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

@@ -0,0 +1,19 @@
+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";
+export const Entity = ({ class: classData, spacing, }) => {
+    const table = useTable(classData.attributes);
+    return (React.createElement(Grid2, { ...GRID2_PROPS, rowGap: 4 },
+        React.createElement(Grid2, { ...GRID2_PROPS, rowGap: 1 },
+            React.createElement(StyledTypography, { component: "h3", id: classData.key, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_SMALL, ...spacing },
+                classData.label,
+                " ",
+                React.createElement(AnchorLink, { anchorLink: classData.key })),
+            React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400_2_LINES }, classData.description)),
+        React.createElement(Table, { table: table })));
+};

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

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

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

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

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

@@ -0,0 +1,6 @@
+import { Class } from "../../../../common/entities";
+import { LayoutSpacing } from "../../hooks/UseLayoutSpacing/types";
+export interface EntityProps {
+    class: Class;
+    spacing?: LayoutSpacing;
+}

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

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

package/lib/components/DataDictionary/components/Layout/components/EntitiesLayout/entitiesLayout.d.ts

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

package/lib/components/DataDictionary/components/Layout/components/EntitiesLayout/entitiesLayout.js

@@ -0,0 +1,5 @@
+import React from "react";
+import { Layout } from "./entitiesLayout.styles";
+export const EntitiesLayout = ({ children, ...props }) => {
+    return React.createElement(Layout, { ...props }, children);
+};

package/lib/components/DataDictionary/components/Layout/components/EntitiesLayout/entitiesLayout.styles.d.ts

@@ -0,0 +1,5 @@
+import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
+export declare const Layout: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType;
+} & LayoutSpacing, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/components/DataDictionary/components/Layout/components/EntitiesLayout/entitiesLayout.styles.js

@@ -0,0 +1,19 @@
+import styled from "@emotion/styled";
+import { mediaTabletDown } from "../../../../../../styles/common/mixins/breakpoints";
+import { LAYOUT_SPACING } from "../../constants";
+const PB = LAYOUT_SPACING.CONTENT_PADDING_BOTTOM; /* bottom padding */
+const PT = LAYOUT_SPACING.CONTENT_PADDING_TOP; /* top padding */
+const TITLE_HEIGHT = LAYOUT_SPACING.TITLE_HEIGHT; /* title height */
+export const Layout = styled("div") `
+  grid-column: 2;
+  grid-row: 1;
+  padding-bottom: ${PB}px;
+  padding-top: ${({ top }) => top + TITLE_HEIGHT + PT}px;
+  z-index: 1; /* not required, but helpful in that the entities are always on top */
+
+  ${mediaTabletDown} {
+    grid-column: 1;
+    grid-row: auto;
+    padding-top: ${PT}px;
+  }
+`;

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

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
+export interface EntitiesLayoutProps extends LayoutSpacing {
+    children: ReactNode;
+}

package/lib/components/DataDictionary/components/Layout/components/EntitiesLayout/types.js

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

package/lib/components/DataDictionary/components/Layout/components/OutlineLayout/outlineLayout.d.ts

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

package/lib/components/DataDictionary/components/Layout/components/OutlineLayout/outlineLayout.js

@@ -0,0 +1,6 @@
+import React from "react";
+import { Layout, LayoutScroller } from "./outlineLayout.styles";
+export const OutlineLayout = ({ children, ...props }) => {
+    return (React.createElement(Layout, { ...props },
+        React.createElement(LayoutScroller, null, children)));
+};

package/lib/components/DataDictionary/components/Layout/components/OutlineLayout/outlineLayout.styles.d.ts

@@ -0,0 +1,9 @@
+import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
+export declare const Layout: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType;
+} & LayoutSpacing, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const LayoutScroller: 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/components/Layout/components/OutlineLayout/outlineLayout.styles.js

@@ -0,0 +1,26 @@
+import styled from "@emotion/styled";
+import { mediaTabletDown } from "../../../../../../styles/common/mixins/breakpoints";
+import { LAYOUT_SPACING } from "../../constants";
+const PB = LAYOUT_SPACING.CONTENT_PADDING_BOTTOM; /* bottom padding */
+const PT = LAYOUT_SPACING.CONTENT_PADDING_TOP; /* top padding */
+const TITLE_HEIGHT = LAYOUT_SPACING.TITLE_HEIGHT; /* title height */
+export const Layout = styled("div") `
+  grid-column: 1;
+  grid-row: 1;
+  margin-bottom: ${({ bottom }) => -bottom}px; /* required; prevents sticky element from scrolling when footer scrolls into viewport */
+  max-height: 100vh;
+  overflow: hidden;
+  padding-bottom: ${({ bottom }) => bottom}px; /* footer height */
+  padding-top: ${({ top }) => top + TITLE_HEIGHT + PT}px;
+  position: sticky;
+  top: 0;
+
+  ${mediaTabletDown} {
+    display: none;
+  }
+`;
+export const LayoutScroller = styled("div") `
+  height: 100%;
+  overflow: auto;
+  padding-bottom: ${PB}px;
+`;

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

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
+export interface OutlineLayoutProps extends LayoutSpacing {
+    children: ReactNode;
+}

package/lib/components/DataDictionary/components/Layout/components/OutlineLayout/types.js

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

package/lib/components/DataDictionary/components/Layout/components/TitleLayout/titleLayout.d.ts

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

package/lib/components/DataDictionary/components/Layout/components/TitleLayout/titleLayout.js

@@ -0,0 +1,5 @@
+import React from "react";
+import { Layout } from "./titleLayout.styles";
+export const TitleLayout = ({ children, ...props }) => {
+    return React.createElement(Layout, { ...props }, children);
+};

package/lib/components/DataDictionary/components/Layout/components/TitleLayout/titleLayout.styles.d.ts

@@ -0,0 +1,5 @@
+import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
+export declare const Layout: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType;
+} & LayoutSpacing, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/components/DataDictionary/components/Layout/components/TitleLayout/titleLayout.styles.js

@@ -0,0 +1,16 @@
+import styled from "@emotion/styled";
+import { mediaTabletDown } from "../../../../../../styles/common/mixins/breakpoints";
+export const Layout = styled("div") `
+  grid-column: 1 / -1;
+  grid-row: 1;
+  height: fit-content;
+  padding-top: ${({ top }) => top}px; /* header height */
+  position: sticky;
+  top: 0;
+
+  ${mediaTabletDown} {
+    grid-column: 1;
+    grid-row: auto;
+    position: relative;
+  }
+`;

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

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
+export interface TitleLayoutProps extends LayoutSpacing {
+    children: ReactNode;
+}

package/lib/components/DataDictionary/components/Layout/components/TitleLayout/types.js

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

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

@@ -0,0 +1,5 @@
+export declare const LAYOUT_SPACING: {
+    CONTENT_PADDING_BOTTOM: number;
+    CONTENT_PADDING_TOP: number;
+    TITLE_HEIGHT: number;
+};

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

@@ -0,0 +1,5 @@
+export const LAYOUT_SPACING = {
+    CONTENT_PADDING_BOTTOM: 24,
+    CONTENT_PADDING_TOP: 16,
+    TITLE_HEIGHT: 74,
+};

package/lib/components/DataDictionary/components/Outline/components/ContentsTab/constants.d.ts

@@ -0,0 +1,2 @@
+import { ContentsTabProps } from "../../../../../Layout/components/Outline/components/ContentsTab/types";
+export declare const TAB_PROPS: ContentsTabProps;

package/lib/components/DataDictionary/components/Outline/components/ContentsTab/constants.js

@@ -0,0 +1,5 @@
+export const TAB_PROPS = {
+    icon: undefined,
+    label: "Entity Type",
+    value: "",
+};

package/lib/components/DataDictionary/components/Outline/components/ContentsTab/contentsTab.d.ts

@@ -0,0 +1 @@
+export declare const ContentsTab: () => JSX.Element;

package/lib/components/DataDictionary/components/Outline/components/ContentsTab/contentsTab.js

@@ -0,0 +1,6 @@
+import React from "react";
+import { TAB_PROPS } from "./constants";
+import { StyledContentsTab } from "./contentsTab.styles";
+export const ContentsTab = () => {
+    return React.createElement(StyledContentsTab, { ...TAB_PROPS });
+};

package/lib/components/DataDictionary/components/Outline/components/ContentsTab/contentsTab.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const StyledContentsTab: import("@emotion/styled").StyledComponent<import("../../../../../Layout/components/Outline/components/ContentsTab/types").ContentsTabProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/DataDictionary/components/Outline/components/ContentsTab/contentsTab.styles.js

@@ -0,0 +1,7 @@
+import styled from "@emotion/styled";
+import { ContentsTab } from "../../../../../Layout/components/Outline/components/ContentsTab/contentsTab";
+export const StyledContentsTab = styled(ContentsTab) `
+  & {
+    padding: 8px 24px;
+  }
+`;

package/lib/components/DataDictionary/components/Outline/outline.d.ts

@@ -0,0 +1,2 @@
+import { OutlineProps } from "./types";
+export declare const Outline: ({ outline, ...props }: OutlineProps) => JSX.Element;

package/lib/components/DataDictionary/components/Outline/outline.js

@@ -0,0 +1,6 @@
+import React from "react";
+import { ContentsTab } from "./components/ContentsTab/contentsTab";
+import { StyledOutline } from "./outline.styles";
+export const Outline = ({ outline, ...props /* MuiTabsProps */ }) => {
+    return React.createElement(StyledOutline, { Contents: ContentsTab, outline: outline, ...props });
+};

package/lib/components/DataDictionary/components/Outline/outline.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const StyledOutline: import("@emotion/styled").StyledComponent<import("../../../Layout/components/Outline/types").OutlineProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/DataDictionary/components/Outline/outline.styles.js

@@ -0,0 +1,19 @@
+import styled from "@emotion/styled";
+import { inkLight, inkMain, smokeDark, } from "../../../../styles/common/mixins/colors";
+import { Outline } from "../../../Layout/components/Outline/outline";
+export const StyledOutline = styled(Outline) `
+  &.MuiTabs-root {
+    .MuiTab-root {
+      color: ${inkLight};
+
+      &.Mui-selected {
+        color: ${inkMain};
+      }
+
+      &.Mui-disabled {
+        color: ${smokeDark};
+        opacity: 1;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,5 @@
+import { TabsProps } from "@mui/material";
+import { OutlineItem } from "../../../Layout/components/Outline/types";
+export interface OutlineProps extends TabsProps {
+    outline: OutlineItem[];
+}

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

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

package/lib/components/DataDictionary/components/Outline/utils.d.ts

@@ -0,0 +1,8 @@
+import { Class } from "../../../../common/entities";
+import { OutlineItem } from "../../../Layout/components/Outline/types";
+/**
+ * Returns outline items from classes.
+ * @param classes - Class entities.
+ * @returns Outline items.
+ */
+export declare function buildClassesOutline(classes: Class[]): OutlineItem[];

package/lib/components/DataDictionary/components/Outline/utils.js

@@ -0,0 +1,15 @@
+/**
+ * Returns outline items from classes.
+ * @param classes - Class entities.
+ * @returns Outline items.
+ */
+export function buildClassesOutline(classes) {
+    return classes.map(({ key, name }) => {
+        return {
+            depth: 2,
+            disabled: false,
+            hash: key,
+            value: name,
+        };
+    });
+}

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 { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
+export const BasicCell = ({ getValue }) => {
+    return (React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.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">;