@databiosphere/findable-ui 21.4.0 → 22.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "21.4.0",
+  "version": "22.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/components/DataDictionary/components/Entities/constants.ts

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

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 }: ClassesProps): JSX.Element => {
+  return (
+    <Grid2 {...GRID2_PROPS}>
+      {classes.map((classData) => (
+        <Entity key={classData.key} class={classData} />
+      ))}
+    </Grid2>
+  );
+};

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

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

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.tsx

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

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

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

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,8 @@
+import { Typography } from "@mui/material";
+import React from "react";
+import { VARIANT } from "../../../../../../styles/common/mui/typography";
+import { BasicCellProps } from "./types";
+
+export const BasicCell = ({ getValue }: BasicCellProps): JSX.Element => {
+  return <Typography variant={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/dataDictionary.styles.ts

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

package/src/components/DataDictionary/dataDictionary.tsx

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

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

@@ -0,0 +1,9 @@
+import { useConfig } from "../../../../hooks/useConfig";
+import { UseDataDictionary } from "./types";
+
+export const useDataDictionary = (): UseDataDictionary => {
+  const {
+    config: { dataDictionary: { classes = [] } = {} },
+  } = useConfig();
+  return { 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/Detail/detail.stories.tsx

@@ -1,17 +1,25 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 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" },
@@ -24,39 +32,36 @@ export default {
     layout: "fullscreen",
   },
   title: "Views/EntityDetailView",
-} as ComponentMeta<typeof Detail>;
+} satisfies Meta<typeof Detail>;
 
-const DetailTemplate: ComponentStory<typeof Detail> = (args) => (
-  <Detail {...args} />
-);
+export default meta;
 
-export const DetailStory = DetailTemplate.bind({});
-DetailStory.args = {
-  isDetailOverview: true,
-  mainColumn: (
-    <>
-      <DescriptionStory
-        projectDescription={DescriptionStory.args?.projectDescription || "None"}
-      />
-      <ContactsStory {...ContactsStory.args} />
-      <PublicationsStory {...PublicationsStory.args} />
-      <ContributorsStory {...ContributorsStory.args} />
-      <CollaboratingOrganizationsStory
-        {...CollaboratingOrganizationsStory.args}
-      />
-      <DataCuratorsStory {...DataCuratorsStory.args} />
-      {/*<CitationStory {...CitationStory.args} />*/}
-      <SupplementaryLinksStory {...SupplementaryLinksStory.args} />
-      <DataReleasePolicyStory />
-    </>
-  ),
-  sideColumn: (
-    <>
-      <DetailsStory
-        keyValuePairs={DetailsStory.args?.keyValuePairs}
-        title={DetailsStory.args?.title ?? ""}
-      />
-    </>
-  ),
-  top: <></>,
+type Story = StoryObj<typeof meta>;
+
+export const DetailStory: Story = {
+  args: {
+    isDetailOverview: true,
+    mainColumn: (
+      <>
+        <Description
+          projectDescription={
+            DescriptionStory.args.projectDescription || "None"
+          }
+        />
+        <Contacts {...ContactsStory.args} />
+        <Publications {...PublicationsStory.args} />
+        <Contributors {...ContributorsStory.args} />
+        <CollaboratingOrganizations {...CollaboratingOrganizationsStory.args} />
+        <DataCurators {...DataCuratorsStory.args} />
+        <SupplementaryLinks {...SupplementaryLinksStory.args} />
+        <DataReleasePolicy />
+      </>
+    ),
+    sideColumn: (
+      <>
+        <Details {...DetailsStory.args} />
+      </>
+    ),
+    top: <></>,
+  },
 };

package/src/components/Export/components/ExportMethod/exportMethod.stories.tsx

@@ -1,8 +1,7 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { ExportMethod } from "./exportMethod";
 
-export default {
+const meta = {
   argTypes: {
     buttonLabel: { control: "text" },
     description: { control: "text" },
@@ -11,16 +10,17 @@ export default {
   },
   component: ExportMethod,
   title: "Components/Section/Export/ExportMethod",
-} as ComponentMeta<typeof ExportMethod>;
+} satisfies Meta<typeof ExportMethod>;
 
-const ExportMethodTemplate: ComponentStory<typeof ExportMethod> = (args) => (
-  <ExportMethod {...args} />
-);
+export default meta;
 
-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)",
+type Story = StoryObj<typeof meta>;
+
+export const ExportMethodStory: Story = {
+  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/src/components/Filter/components/Filter/filter.stories.tsx

@@ -1,8 +1,8 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { Filter } from "./filter";
 
-export default {
+const meta = {
   argTypes: {
     tags: { control: { disable: true } },
   },
@@ -15,37 +15,38 @@ export default {
     ),
   ],
   title: "Components/Filter/Filter",
-} as ComponentMeta<typeof Filter>;
+} satisfies Meta<typeof Filter>;
 
-const FilterTemplate: ComponentStory<typeof Filter> = (args) => (
-  <Filter {...args} />
-);
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
 const onFilter = (): void => {
   // 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: Story = {
+  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/src/components/Filter/components/FilterLabel/filterLabel.stories.tsx

@@ -1,8 +1,8 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { FilterLabel } from "./filterLabel";
 
-export default {
+const meta = {
   argTypes: {
     count: { control: "number" },
     disabled: { control: "boolean" },
@@ -18,16 +18,18 @@ export default {
     ),
   ],
   title: "Components/Filter/FilterLabel",
-} as ComponentMeta<typeof FilterLabel>;
+} satisfies Meta<typeof FilterLabel>;
 
-const FilterLabelTemplate: ComponentStory<typeof FilterLabel> = (args) => (
-  <FilterLabel {...args} />
-);
+export default meta;
 
-export const FilterLabelStory = FilterLabelTemplate.bind({});
-FilterLabelStory.args = {
-  count: 123,
-  disabled: false,
-  isOpen: false,
-  label: "Label",
+type Story = StoryObj<typeof meta>;
+
+export const FilterLabelStory: Story = {
+  args: {
+    count: 123,
+    disabled: false,
+    isOpen: false,
+    label: "Label",
+    onClick: () => {},
+  },
 };