@databiosphere/findable-ui 21.4.0 → 23.0.0

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

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

package/src/components/DataDictionary/components/Layout/components/EntitiesLayout/entitiesLayout.styles.ts

@@ -0,0 +1,22 @@
+import styled from "@emotion/styled";
+import { mediaTabletDown } from "../../../../../../styles/common/mixins/breakpoints";
+import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
+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")<LayoutSpacing>`
+  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/src/components/DataDictionary/components/Layout/components/EntitiesLayout/entitiesLayout.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { Layout } from "./entitiesLayout.styles";
+import { EntitiesLayoutProps } from "./types";
+
+export const EntitiesLayout = ({
+  children,
+  ...props
+}: EntitiesLayoutProps): JSX.Element => {
+  return <Layout {...props}>{children}</Layout>;
+};

package/src/components/DataDictionary/components/Layout/components/EntitiesLayout/types.ts

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

package/src/components/DataDictionary/components/Layout/components/OutlineLayout/outlineLayout.styles.ts

@@ -0,0 +1,31 @@
+import styled from "@emotion/styled";
+import { mediaTabletDown } from "../../../../../../styles/common/mixins/breakpoints";
+import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
+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")<LayoutSpacing>`
+  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/src/components/DataDictionary/components/Layout/components/OutlineLayout/outlineLayout.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { Layout, LayoutScroller } from "./outlineLayout.styles";
+import { OutlineLayoutProps } from "./types";
+
+export const OutlineLayout = ({
+  children,
+  ...props
+}: OutlineLayoutProps): JSX.Element => {
+  return (
+    <Layout {...props}>
+      <LayoutScroller>{children}</LayoutScroller>
+    </Layout>
+  );
+};

package/src/components/DataDictionary/components/Layout/components/OutlineLayout/types.ts

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

package/src/components/DataDictionary/components/Layout/components/TitleLayout/titleLayout.styles.ts

@@ -0,0 +1,18 @@
+import styled from "@emotion/styled";
+import { mediaTabletDown } from "../../../../../../styles/common/mixins/breakpoints";
+import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
+
+export const Layout = styled("div")<LayoutSpacing>`
+  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/src/components/DataDictionary/components/Layout/components/TitleLayout/titleLayout.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { Layout } from "./titleLayout.styles";
+import { TitleLayoutProps } from "./types";
+
+export const TitleLayout = ({
+  children,
+  ...props
+}: TitleLayoutProps): JSX.Element => {
+  return <Layout {...props}>{children}</Layout>;
+};

package/src/components/DataDictionary/components/Layout/components/TitleLayout/types.ts

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

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

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

package/src/components/DataDictionary/components/Outline/components/ContentsTab/constants.ts

@@ -0,0 +1,7 @@
+import { ContentsTabProps } from "../../../../../Layout/components/Outline/components/ContentsTab/types";
+
+export const TAB_PROPS: ContentsTabProps = {
+  icon: undefined,
+  label: "Entity Type",
+  value: "",
+};

package/src/components/DataDictionary/components/Outline/components/ContentsTab/contentsTab.styles.ts

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

package/src/components/DataDictionary/components/Outline/components/ContentsTab/contentsTab.tsx

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

package/src/components/DataDictionary/components/Outline/outline.styles.ts

@@ -0,0 +1,24 @@
+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/src/components/DataDictionary/components/Outline/outline.tsx

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

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

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

package/src/components/DataDictionary/components/Outline/utils.ts

@@ -0,0 +1,18 @@
+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 function buildClassesOutline(classes: Class[]): OutlineItem[] {
+  return classes.map(({ key, name }) => {
+    return {
+      depth: 2,
+      disabled: false,
+      hash: key,
+      value: name,
+    };
+  });
+}

package/src/components/DataDictionary/components/Table/columns/columnDef.ts

@@ -0,0 +1,47 @@
+import { CellContext, ColumnDef } from "@tanstack/react-table";
+import { Attribute } from "../../../../../common/entities";
+import { BasicCell } from "../components/BasicCell/basicCell";
+import { COLUMN_IDENTIFIER } from "./columnIdentifier";
+import { AttributeValue } from "./types";
+
+const COLUMN_DEF_DESCRIPTION: ColumnDef<Attribute, AttributeValue> = {
+  accessorFn: (row) => row.description,
+  cell: (props: CellContext<Attribute, AttributeValue>) =>
+    BasicCell({ ...props }),
+  header: "Description",
+  id: COLUMN_IDENTIFIER.DESCRIPTION,
+  meta: { width: { max: "2fr", min: "480px" } },
+};
+
+const COLUMN_DEF_KEY: ColumnDef<Attribute, AttributeValue> = {
+  accessorFn: (row) => row.key,
+  cell: (props: CellContext<Attribute, AttributeValue>) =>
+    BasicCell({ ...props }),
+  header: "Key",
+  id: COLUMN_IDENTIFIER.KEY,
+  meta: { width: { max: "1fr", min: "180px" } },
+};
+
+const COLUMN_DEF_LABEL: ColumnDef<Attribute, AttributeValue> = {
+  accessorFn: (row) => row.label,
+  cell: (props: CellContext<Attribute, AttributeValue>) =>
+    BasicCell({ ...props }),
+  header: "Label",
+  id: COLUMN_IDENTIFIER.LABEL,
+  meta: { width: { max: "1fr", min: "200px" } },
+};
+
+export const COLUMN_DEF: Record<
+  keyof typeof COLUMN_IDENTIFIER,
+  ColumnDef<Attribute, AttributeValue>
+> = {
+  DESCRIPTION: COLUMN_DEF_DESCRIPTION,
+  KEY: COLUMN_DEF_KEY,
+  LABEL: COLUMN_DEF_LABEL,
+};
+
+export const COLUMN_DEFS: ColumnDef<Attribute, AttributeValue>[] = [
+  COLUMN_DEF.LABEL,
+  COLUMN_DEF.KEY,
+  COLUMN_DEF.DESCRIPTION,
+];

package/src/components/DataDictionary/components/Table/columns/columnIdentifier.ts

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

package/src/components/DataDictionary/components/Table/columns/types.ts

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

package/src/components/DataDictionary/components/Table/components/BasicCell/basicCell.tsx

@@ -0,0 +1,12 @@
+import { Typography } from "@mui/material";
+import React from "react";
+import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
+import { BasicCellProps } from "./types";
+
+export const BasicCell = ({ getValue }: BasicCellProps): JSX.Element => {
+  return (
+    <Typography variant={TYPOGRAPHY_PROPS.VARIANT.INHERIT}>
+      {getValue()}
+    </Typography>
+  );
+};

package/src/components/DataDictionary/components/Table/components/BasicCell/types.ts

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

package/src/components/DataDictionary/components/Table/hook.ts

@@ -0,0 +1,13 @@
+import { Table, useReactTable } from "@tanstack/react-table";
+import { Attribute } from "../../../../common/entities";
+import { COLUMN_DEFS } from "./columns/columnDef";
+import { useTableOptions } from "./options/hook";
+
+export const useTable = (data: Attribute[]): Table<Attribute> => {
+  const tableOptions = useTableOptions();
+  return useReactTable<Attribute>({
+    ...tableOptions,
+    columns: COLUMN_DEFS,
+    data,
+  });
+};

package/src/components/DataDictionary/components/Table/options/core/constants.ts

@@ -0,0 +1,12 @@
+import { CoreOptions, getCoreRowModel } from "@tanstack/react-table";
+import { Attribute } from "../../../../../../common/entities";
+import { ROW_POSITION } from "../../../../../Table/features/RowPosition/constants";
+import { ROW_PREVIEW } from "../../../../../Table/features/RowPreview/constants";
+
+export const CORE_OPTIONS: Pick<
+  CoreOptions<Attribute>,
+  "_features" | "getCoreRowModel"
+> = {
+  _features: [ROW_POSITION, ROW_PREVIEW],
+  getCoreRowModel: getCoreRowModel(),
+};

package/src/components/DataDictionary/components/Table/options/hook.ts

@@ -0,0 +1,14 @@
+import { TableOptions } from "@tanstack/react-table";
+import { Attribute } from "../../../../../common/entities";
+import { CORE_OPTIONS } from "./core/constants";
+import { SORTING_OPTIONS } from "./sorting/constants";
+
+export const useTableOptions = (): Omit<
+  TableOptions<Attribute>,
+  "columns" | "data"
+> => {
+  return {
+    ...CORE_OPTIONS,
+    ...SORTING_OPTIONS,
+  };
+};

package/src/components/DataDictionary/components/Table/options/sorting/constants.ts

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

package/src/components/DataDictionary/components/Table/table.styles.ts

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

package/src/components/DataDictionary/components/Table/table.tsx

@@ -0,0 +1,35 @@
+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";
+import { TableProps } from "./types";
+
+export const Table = ({ table }: TableProps): JSX.Element => {
+  return (
+    <StyledRoundedPaper variant="table">
+      <GridPaper>
+        <TableContainer>
+          <GridTable
+            gridTemplateColumns={getColumnTrackSizing(
+              table.getVisibleFlatColumns()
+            )}
+          >
+            <TableHead
+              rowDirection={ROW_DIRECTION.DEFAULT}
+              tableInstance={table}
+            />
+            <TableBody
+              rowDirection={ROW_DIRECTION.DEFAULT}
+              tableInstance={table}
+            />
+          </GridTable>
+        </TableContainer>
+      </GridPaper>
+    </StyledRoundedPaper>
+  );
+};

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

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

package/src/components/DataDictionary/components/Title/title.styles.ts

@@ -0,0 +1,18 @@
+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/src/components/DataDictionary/components/Title/title.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { TitleProps } from "../../../common/Title/title";
+import { StyledTitle } from "./title.styles";
+
+export const Title = ({
+  title = "Data Dictionary",
+  ...props
+}: TitleProps): JSX.Element => <StyledTitle title={title} {...props} />;

package/src/components/DataDictionary/dataDictionary.styles.ts

@@ -0,0 +1,22 @@
+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/src/components/DataDictionary/dataDictionary.tsx

@@ -0,0 +1,38 @@
+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";
+import { DataDictionaryProps } from "./types";
+
+export const DataDictionary = ({
+  className,
+  EntitiesLayout = DefaultEntitiesLayout,
+  Outline = DefaultOutline,
+  OutlineLayout = DefaultOutlineLayout,
+  Title = DefaultTitle,
+  TitleLayout = DefaultTitleLayout,
+}: DataDictionaryProps): JSX.Element => {
+  const { classes } = useDataDictionary();
+  const { spacing } = useLayoutSpacing();
+  const outline = useMemo(() => buildClassesOutline(classes), [classes]);
+  return (
+    <View className={className}>
+      <TitleLayout {...spacing}>
+        <Title />
+      </TitleLayout>
+      <OutlineLayout {...spacing}>
+        <Outline outline={outline} />
+      </OutlineLayout>
+      <EntitiesLayout {...spacing}>
+        <Entities classes={classes} spacing={spacing} />
+      </EntitiesLayout>
+    </View>
+  );
+};

package/src/components/DataDictionary/hooks/UseDataDictionary/hook.ts

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

package/src/components/DataDictionary/hooks/UseDataDictionary/types.ts

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

package/src/components/DataDictionary/hooks/UseLayoutSpacing/hook.ts

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

package/src/components/DataDictionary/hooks/UseLayoutSpacing/types.ts

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

package/src/components/DataDictionary/types.ts

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