@databiosphere/findable-ui 38.1.1 → 38.2.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "38.1.1"
+  ".": "38.2.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [38.2.0](https://github.com/DataBiosphere/findable-ui/compare/v38.1.1...v38.2.0) (2025-07-11)
+
+
+### Features
+
+* add 'introduction' section to data dictionary ([#566](https://github.com/DataBiosphere/findable-ui/issues/566)) ([#567](https://github.com/DataBiosphere/findable-ui/issues/567)) ([5aeb758](https://github.com/DataBiosphere/findable-ui/commit/5aeb758792532a78fa4ec71dc0f7b3ad8c80c376))
+
+
+### Bug Fixes
+
+* align range filter toggle button styles with design ([#563](https://github.com/DataBiosphere/findable-ui/issues/563)) ([#564](https://github.com/DataBiosphere/findable-ui/issues/564)) ([1cc1ffd](https://github.com/DataBiosphere/findable-ui/commit/1cc1ffd88ae3b2f436717b494e425614412cface))
+
 ## [38.1.1](https://github.com/DataBiosphere/findable-ui/compare/v38.1.0...v38.1.1) (2025-07-09)
 
 

package/lib/components/DataDictionary/components/Description/description.d.ts

@@ -0,0 +1,2 @@
+import { DescriptionProps } from "./types";
+export declare const Description: ({ description, }: DescriptionProps) => JSX.Element | null;

package/lib/components/DataDictionary/components/Description/description.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { StyledMarkdownRenderer, StyledRoundedPaper, } from "./description.styles";
+export const Description = ({ description, }) => {
+    if (!description)
+        return null;
+    return (React.createElement(StyledRoundedPaper, { elevation: 0 },
+        React.createElement(StyledMarkdownRenderer, { value: description })));
+};

package/lib/components/DataDictionary/components/Description/description.styles.d.ts

@@ -0,0 +1,10 @@
+export declare const StyledRoundedPaper: import("@emotion/styled").StyledComponent<import("../../../types").BaseComponentProps & import("@mui/material").PaperOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "style" | "className" | "classes" | "children" | "sx" | "elevation" | "square" | "variant"> & {
+    component?: React.ElementType;
+} & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const StyledMarkdownRenderer: import("@emotion/styled").StyledComponent<import("../../../MarkdownRenderer/types").MarkdownRendererProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/DataDictionary/components/Description/description.styles.js

@@ -0,0 +1,51 @@
+import styled from "@emotion/styled";
+import { PALETTE } from "../../../../styles/common/constants/palette";
+import { mediaTabletDown, mediaTabletUp, } from "../../../../styles/common/mixins/breakpoints";
+import { textHeadingSmall } from "../../../../styles/common/mixins/fonts";
+import { RoundedPaper } from "../../../common/Paper/components/RoundedPaper/roundedPaper";
+import { MarkdownRenderer } from "../../../MarkdownRenderer/markdownRenderer";
+export const StyledRoundedPaper = styled(RoundedPaper) `
+  padding: 20px;
+
+  ${mediaTabletDown} {
+    padding: 20px 16px;
+  }
+`;
+export const StyledMarkdownRenderer = styled(MarkdownRenderer) `
+  align-self: flex-start;
+
+  code {
+    all: unset;
+    font: inherit;
+    font-family: Roboto Mono, monospace;
+  }
+
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 8px 0;
+  }
+
+  h2 {
+    ${textHeadingSmall};
+    font-size: 18px;
+    line-height: 26px;
+
+    ${mediaTabletUp} {
+      font-size: 18px;
+      line-height: 26px;
+    }
+  }
+
+  hr {
+    border: none;
+    border-bottom: 1px solid ${PALETTE.SMOKE_MAIN};
+    margin: 16px 0;
+  }
+
+  p {
+    font: inherit;
+  }
+`;

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

@@ -0,0 +1,3 @@
+export interface DescriptionProps {
+    description?: string;
+}

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

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

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

@@ -4,6 +4,8 @@ import { LAYOUT_SPACING } from "../../constants";
 const PB = LAYOUT_SPACING.CONTENT_PADDING_BOTTOM; /* bottom padding */
 const PT = LAYOUT_SPACING.CONTENT_PADDING_TOP; /* top padding */
 export const Layout = styled("div") `
+  display: grid;
+  gap: 16px;
   grid-column: 2;
   grid-row: 1;
   padding-bottom: ${PB}px;

package/lib/components/DataDictionary/dataDictionary.js

@@ -1,6 +1,7 @@
 import { Fade } from "@mui/material";
 import React from "react";
 import { useLayoutSpacing } from "../../hooks/UseLayoutSpacing/hook";
+import { Description } from "./components/Description/description";
 import { Entities } from "./components/Entities/entities";
 import { ColumnFilterTags } from "./components/Filters/components/ColumnFilterTags/columnFilterTags";
 import { Filters } from "./components/Filters/filters";
@@ -17,7 +18,7 @@ import { useDataDictionaryConfig } from "./hooks/UseDataDictionaryConfig/hook";
 import { useMeasureFilters } from "./hooks/UseMeasureFilters/hook";
 export const DataDictionary = ({ className, dictionary, EntitiesLayout = DefaultEntitiesLayout, FiltersLayout = DefaultFiltersLayout, Outline = DefaultOutline, OutlineLayout = DefaultOutlineLayout, Title = DefaultTitle, TitleLayout = DefaultTitleLayout, }) => {
     // Get dictionary configuration.
-    const { classes, tableOptions, title } = useDataDictionaryConfig(dictionary);
+    const { classes, description, tableOptions, title } = useDataDictionaryConfig(dictionary);
     // Layout measurements.
     // Get header and footer dimensions.
     const { spacing } = useLayoutSpacing();
@@ -40,5 +41,6 @@ export const DataDictionary = ({ className, dictionary, EntitiesLayout = Default
                 React.createElement(ColumnFilterTags, { table: table })),
             React.createElement(Fade, { in: dimensions.height > 0 },
                 React.createElement(EntitiesLayout, { spacing: entitiesSpacing },
+                    React.createElement(Description, { description: description }),
                     React.createElement(Entities, { spacing: entitiesSpacing, table: table }))))));
 };

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

@@ -20,6 +20,7 @@ export const useDataDictionaryConfig = (dictionary) => {
         // exists above and would have thrown an error if undefined.
         return {
             classes: dataDictionaryConfig.dataDictionary.classes,
+            description: dataDictionaryConfig.dataDictionary.description,
             tableOptions: dataDictionaryConfig.tableOptions,
             title: dataDictionaryConfig.dataDictionary.title,
         };

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

@@ -2,6 +2,7 @@ import { RowData, TableOptions } from "@tanstack/react-table";
 import { Attribute, Class } from "../../../../common/entities";
 export interface UseDataDictionaryConfig<T extends RowData = Attribute> {
     classes: Class<T>[];
+    description?: string;
     tableOptions: Omit<TableOptions<T>, "data" | "getCoreRowModel">;
     title: string;
 }

package/lib/components/Filter/components/FilterRange/filterRange.styles.js

@@ -12,6 +12,7 @@ export const StyledForm = styled("form") `
 
     .MuiToggleButton-root {
       color: ${PALETTE.INK_LIGHT};
+      padding: 8px 12px;
       text-transform: capitalize;
 
       &.Mui-selected {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "38.1.1",
+  "version": "38.2.0",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",

package/src/components/DataDictionary/components/Description/description.styles.ts

@@ -0,0 +1,56 @@
+import styled from "@emotion/styled";
+import { PALETTE } from "../../../../styles/common/constants/palette";
+import {
+  mediaTabletDown,
+  mediaTabletUp,
+} from "../../../../styles/common/mixins/breakpoints";
+import { textHeadingSmall } from "../../../../styles/common/mixins/fonts";
+import { RoundedPaper } from "../../../common/Paper/components/RoundedPaper/roundedPaper";
+import { MarkdownRenderer } from "../../../MarkdownRenderer/markdownRenderer";
+
+export const StyledRoundedPaper = styled(RoundedPaper)`
+  padding: 20px;
+
+  ${mediaTabletDown} {
+    padding: 20px 16px;
+  }
+`;
+
+export const StyledMarkdownRenderer = styled(MarkdownRenderer)`
+  align-self: flex-start;
+
+  code {
+    all: unset;
+    font: inherit;
+    font-family: Roboto Mono, monospace;
+  }
+
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 8px 0;
+  }
+
+  h2 {
+    ${textHeadingSmall};
+    font-size: 18px;
+    line-height: 26px;
+
+    ${mediaTabletUp} {
+      font-size: 18px;
+      line-height: 26px;
+    }
+  }
+
+  hr {
+    border: none;
+    border-bottom: 1px solid ${PALETTE.SMOKE_MAIN};
+    margin: 16px 0;
+  }
+
+  p {
+    font: inherit;
+  }
+`;

package/src/components/DataDictionary/components/Description/description.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import {
+  StyledMarkdownRenderer,
+  StyledRoundedPaper,
+} from "./description.styles";
+import { DescriptionProps } from "./types";
+
+export const Description = ({
+  description,
+}: DescriptionProps): JSX.Element | null => {
+  if (!description) return null;
+  return (
+    <StyledRoundedPaper elevation={0}>
+      <StyledMarkdownRenderer value={description} />
+    </StyledRoundedPaper>
+  );
+};

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

@@ -0,0 +1,3 @@
+export interface DescriptionProps {
+  description?: string;
+}

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

@@ -7,6 +7,8 @@ const PB = LAYOUT_SPACING.CONTENT_PADDING_BOTTOM; /* bottom padding */
 const PT = LAYOUT_SPACING.CONTENT_PADDING_TOP; /* top padding */
 
 export const Layout = styled("div")<LayoutSpacing>`
+  display: grid;
+  gap: 16px;
   grid-column: 2;
   grid-row: 1;
   padding-bottom: ${PB}px;

package/src/components/DataDictionary/dataDictionary.tsx

@@ -3,6 +3,7 @@ import { RowData } from "@tanstack/react-table";
 import React from "react";
 import { Attribute } from "../../common/entities";
 import { useLayoutSpacing } from "../../hooks/UseLayoutSpacing/hook";
+import { Description } from "./components/Description/description";
 import { Entities } from "./components/Entities/entities";
 import { ColumnFilterTags } from "./components/Filters/components/ColumnFilterTags/columnFilterTags";
 import { Filters } from "./components/Filters/filters";
@@ -30,7 +31,7 @@ export const DataDictionary = <T extends RowData = Attribute>({
   TitleLayout = DefaultTitleLayout,
 }: DataDictionaryProps): JSX.Element => {
   // Get dictionary configuration.
-  const { classes, tableOptions, title } =
+  const { classes, description, tableOptions, title } =
     useDataDictionaryConfig<T>(dictionary);
 
   // Layout measurements.
@@ -64,6 +65,7 @@ export const DataDictionary = <T extends RowData = Attribute>({
         <Fade in={dimensions.height > 0}>
           {/* Fade in entities when filters are measured. */}
           <EntitiesLayout spacing={entitiesSpacing}>
+            <Description description={description} />
             <Entities spacing={entitiesSpacing} table={table} />
           </EntitiesLayout>
         </Fade>

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

@@ -31,6 +31,7 @@ export const useDataDictionaryConfig = <T extends RowData = Attribute>(
     // exists above and would have thrown an error if undefined.
     return {
       classes: dataDictionaryConfig!.dataDictionary.classes,
+      description: dataDictionaryConfig!.dataDictionary.description,
       tableOptions: dataDictionaryConfig!.tableOptions,
       title: dataDictionaryConfig!.dataDictionary.title,
     };

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

@@ -3,6 +3,7 @@ import { Attribute, Class } from "../../../../common/entities";
 
 export interface UseDataDictionaryConfig<T extends RowData = Attribute> {
   classes: Class<T>[];
+  description?: string;
   tableOptions: Omit<TableOptions<T>, "data" | "getCoreRowModel">;
   title: string;
 }

package/src/components/Filter/components/FilterRange/filterRange.styles.ts

@@ -13,6 +13,7 @@ export const StyledForm = styled("form")`
 
     .MuiToggleButton-root {
       color: ${PALETTE.INK_LIGHT};
+      padding: 8px 12px;
       text-transform: capitalize;
 
       &.Mui-selected {