@databiosphere/findable-ui 32.1.1 → 34.0.0

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

@@ -0,0 +1,40 @@
+import { RowData } from "@tanstack/react-table";
+import { Attribute, Class } from "../../../../common/entities";
+import { ClassMeta } from "./types";
+
+/**
+ * Builds class meta data from classes.
+ * Metadata is used to display class title and description above each "grouped" table.
+ * @param classes - Class entities.
+ * @returns Class meta data.
+ */
+export const buildClassMeta = <T extends RowData = Attribute>(
+  classes: Class<T>[]
+): ClassMeta => {
+  return Object.fromEntries(
+    classes.map(({ description, name, title }) => [
+      name,
+      { description, title },
+    ])
+  );
+};
+
+/**
+ * Builds table data from classes.
+ * RowData contains attributes of a class and a classKey property `Class["name"]` to identify the class the row belongs to.
+ * `classKey` is used to group rows by class.
+ * @param classes - Class entities.
+ * @returns Table data.
+ */
+export const buildTableData = <T extends RowData = Attribute>(
+  classes: Class<T>[]
+): T[] => {
+  return classes
+    .map(({ attributes, name: classKey }) =>
+      attributes.map((attribute) => ({
+        ...(attribute as unknown as Attribute),
+        classKey,
+      }))
+    )
+    .flat() as T[];
+};

package/src/components/DataDictionary/dataDictionary.tsx

@@ -1,12 +1,13 @@
 import { RowData } from "@tanstack/react-table";
-import React, { useMemo } from "react";
+import React from "react";
 import { Attribute } from "../../common/entities";
 import { Entities } from "./components/Entities/entities";
+import { Filters } from "./components/Filters/filters";
 import { EntitiesLayout as DefaultEntitiesLayout } from "./components/Layout/components/EntitiesLayout/entitiesLayout";
+import { FiltersLayout as DefaultFiltersLayout } from "./components/Layout/components/FiltersLayout/filtersLayout";
 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";
@@ -16,24 +17,27 @@ import { DataDictionaryProps } from "./types";
 export const DataDictionary = <T extends RowData = Attribute>({
   className,
   EntitiesLayout = DefaultEntitiesLayout,
+  FiltersLayout = DefaultFiltersLayout,
   Outline = DefaultOutline,
   OutlineLayout = DefaultOutlineLayout,
   Title = DefaultTitle,
   TitleLayout = DefaultTitleLayout,
 }: DataDictionaryProps): JSX.Element => {
-  const { classes, columnDefs } = useDataDictionary<T>();
+  const { outline, table, title } = useDataDictionary<T>();
   const { spacing } = useLayoutSpacing();
-  const outline = useMemo(() => buildClassesOutline(classes), [classes]);
   return (
     <View className={className}>
       <TitleLayout {...spacing}>
-        <Title />
+        <Title title={title} />
       </TitleLayout>
       <OutlineLayout {...spacing}>
         <Outline outline={outline} />
       </OutlineLayout>
+      <FiltersLayout {...spacing}>
+        <Filters table={table} />
+      </FiltersLayout>
       <EntitiesLayout {...spacing}>
-        <Entities classes={classes} columnDefs={columnDefs} spacing={spacing} />
+        <Entities spacing={spacing} table={table} />
       </EntitiesLayout>
     </View>
   );

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

@@ -2,6 +2,8 @@ import { RowData } from "@tanstack/react-table";
 import { useMemo } from "react";
 import { Attribute, DataDictionaryConfig } from "../../../../common/entities";
 import { useConfig } from "../../../../hooks/useConfig";
+import { buildClassesOutline } from "../../components/Outline/utils";
+import { useTable } from "../../components/Table/hook";
 import { UseDataDictionary } from "./types";
 
 export const useDataDictionary = <
@@ -11,13 +13,26 @@ export const useDataDictionary = <
     config: { dataDictionaries: dataDictionaryConfigs },
   } = useConfig();
 
+  // Get dictionary config.
   const dataDictionaryConfig = dataDictionaryConfigs?.[0] as
     | DataDictionaryConfig<T>
     | undefined; // TODO: Handle multiple data dictionaries
 
-  return useMemo(() => {
-    const classes = dataDictionaryConfig?.dataDictionary?.classes || [];
-    const columnDefs = dataDictionaryConfig?.columnDefs || [];
-    return { classes, columnDefs };
+  // Get configured dictionary classes, column definitions and table options.
+  const { classes, columnDefs, tableOptions, title } = useMemo(() => {
+    return {
+      classes: dataDictionaryConfig?.dataDictionary?.classes || [],
+      columnDefs: dataDictionaryConfig?.columnDefs || [],
+      tableOptions: dataDictionaryConfig?.tableOptions || {},
+      title: dataDictionaryConfig?.dataDictionary?.title || "",
+    };
   }, [dataDictionaryConfig]);
+
+  // Build table instance.
+  const table = useTable<T>(classes, columnDefs, tableOptions);
+
+  // Build outline.
+  const outline = buildClassesOutline<T>(table);
+
+  return { outline, table, title };
 };

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

@@ -1,7 +1,9 @@
-import { ColumnDef, RowData } from "@tanstack/react-table";
-import { Attribute, Class } from "../../../../common/entities";
+import { RowData, Table } from "@tanstack/react-table";
+import { Attribute } from "../../../../common/entities";
+import { OutlineItem } from "../../../Layout/components/Outline/types";
 
 export interface UseDataDictionary<T extends RowData = Attribute> {
-  classes: Class<T>[];
-  columnDefs: ColumnDef<T, T[keyof T]>[];
+  outline: OutlineItem[];
+  table: Table<T>;
+  title: string;
 }

package/src/components/DataDictionary/types.ts

@@ -3,6 +3,7 @@ import { BaseComponentProps } from "../types";
 
 export interface DataDictionaryProps extends BaseComponentProps {
   EntitiesLayout?: ElementType;
+  FiltersLayout?: ElementType;
   Outline?: ElementType;
   OutlineLayout?: ElementType;
   Title?: ElementType;

package/src/components/Detail/components/Table/components/TableBody/tableBody.tsx

@@ -1,5 +1,5 @@
 import { TableBody as MTableBody } from "@mui/material";
-import { RowData, Table } from "@tanstack/react-table";
+import { Row, RowData, Table } from "@tanstack/react-table";
 import React from "react";
 import { ROW_DIRECTION } from "../../../../../Table/common/entities";
 import { TableView } from "../../table";
@@ -8,21 +8,32 @@ import { TableRows } from "../TableRows/tableRows";
 
 export interface TableBodyProps<T extends RowData> {
   rowDirection: ROW_DIRECTION;
+  /**
+   * Optional override for the rows rendered by <TableBody>.
+   * - Omit to show the table’s full leaf-level row model.
+   * - Pass `group.subRows` (or any other subset) to display a “mini-table” for a single group e.g. the rows that belong to one Data-Dictionary entity.
+   */
+  rows?: Row<T>[];
   tableInstance: Table<T>;
   tableView?: TableView;
 }
 
 export const TableBody = <T extends RowData>({
   rowDirection,
+  rows,
   tableInstance,
   tableView,
 }: TableBodyProps<T>): JSX.Element => {
   return (
     <MTableBody>
       {rowDirection === ROW_DIRECTION.DEFAULT ? (
-        <TableRows tableInstance={tableInstance} tableView={tableView} />
+        <TableRows
+          rows={rows}
+          tableInstance={tableInstance}
+          tableView={tableView}
+        />
       ) : (
-        <CollapsableRows tableInstance={tableInstance} />
+        <CollapsableRows rows={rows} tableInstance={tableInstance} />
       )}
     </MTableBody>
   );

package/src/components/Detail/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.tsx

@@ -1,4 +1,4 @@
-import { RowData, Table } from "@tanstack/react-table";
+import { Row, RowData, Table } from "@tanstack/react-table";
 import React, { Fragment } from "react";
 import { isCollapsableRowDisabled } from "../../../../../../../Table/common/utils";
 import { CollapsableCell } from "../../../../../../../Table/components/TableCell/components/CollapsableCell/collapsableCell";
@@ -6,10 +6,17 @@ import { TableRow } from "../../../../../../../Table/components/TableRow/tableRo
 import { useCollapsableRows } from "../../../../../../../Table/components/TableRows/components/CollapsableRows/hook";
 
 export interface CollapsableRowsProps<T extends RowData> {
+  /**
+   * Optional override for the rows rendered by <CollapsableRows>.
+   * - Omit to show the table’s full leaf-level row model.
+   * - Pass `group.subRows` (or any other subset) to display a “mini-table” for a single group e.g. the rows that belong to one Data-Dictionary entity.
+   */
+  rows?: Row<T>[];
   tableInstance: Table<T>;
 }
 
 export const CollapsableRows = <T extends RowData>({
+  rows: leafOrSubRows,
   tableInstance,
 }: CollapsableRowsProps<T>): JSX.Element => {
   const { getRowModel } = tableInstance;
@@ -17,7 +24,7 @@ export const CollapsableRows = <T extends RowData>({
   useCollapsableRows(tableInstance);
   return (
     <Fragment>
-      {rows.map((row) => {
+      {(leafOrSubRows || rows).map((row) => {
         if (row.depth > 0) return null; // Hide sub rows.
         return (
           <TableRow key={row.id} isPreview={row.getIsPreview()}>

package/src/components/Detail/components/Table/components/TableRows/tableRows.tsx

@@ -1,5 +1,5 @@
 import { TableCell } from "@mui/material";
-import { flexRender, RowData, Table } from "@tanstack/react-table";
+import { flexRender, Row, RowData, Table } from "@tanstack/react-table";
 import React, { Fragment } from "react";
 import {
   getTableCellAlign,
@@ -9,11 +9,18 @@ import { TableRow } from "../../../../../Table/components/TableRow/tableRow.styl
 import { TableView } from "../../table";
 
 export interface TableRowsProps<T extends RowData> {
+  /**
+   * Optional override for the rows rendered by <TableRows>.
+   * - Omit to show the table’s full leaf-level row model.
+   * - Pass `group.subRows` (or any other subset) to display a “mini-table” for a single group e.g. the rows that belong to one Data-Dictionary entity.
+   */
+  rows?: Row<T>[];
   tableInstance: Table<T>;
   tableView?: TableView;
 }
 
 export const TableRows = <T extends RowData>({
+  rows: leafOrSubRows,
   tableInstance,
   tableView,
 }: TableRowsProps<T>): JSX.Element => {
@@ -23,7 +30,7 @@ export const TableRows = <T extends RowData>({
   const { size: tableCellSize = "medium" } = tableCell || {};
   return (
     <Fragment>
-      {rows.map((row) => {
+      {(leafOrSubRows || rows).map((row) => {
         return (
           <TableRow
             key={row.id}

package/src/components/Filter/components/FilterList/filterList.styles.ts

@@ -1,7 +1,38 @@
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { List as MList } from "@mui/material";
+import {
+  listItemButtonClasses,
+  listItemTextClasses,
+  List as MList,
+} from "@mui/material";
+import { PALETTE } from "../../../../styles/common/constants/palette";
 import { LIST_MARGIN } from "../../common/constants";
 
+export const MuiListItemButtonRoot = css`
+  .${listItemButtonClasses.root} {
+    gap: 8px;
+    padding: 10px 16px;
+
+    &.Mui-disabled {
+      color: ${PALETTE.SMOKE_MAIN};
+      opacity: 1;
+    }
+  }
+`;
+
+export const MuiListItemTextRoot = css`
+  .${listItemTextClasses.root} {
+    align-items: center;
+    display: grid;
+    gap: 8px;
+    grid-template-columns: 1fr auto;
+
+    > span {
+      min-width: 0; /* required; flexbox child min-width property is "auto" by default making overflow-wrap ineffectual */
+    }
+  }
+`;
+
 export const List = styled(MList)`
   && {
     overflow-wrap: break-word;
@@ -20,20 +51,8 @@ export const List = styled(MList)`
   }
 
   // List item
-  .MuiListItemButton-root {
-    gap: 8px;
-    padding: 10px 16px;
-  }
+  ${MuiListItemButtonRoot}
 
   // List item text
-  .MuiListItemText-root {
-    align-items: center;
-    display: grid;
-    gap: 8px;
-    grid-template-columns: 1fr auto;
-
-    > span {
-      min-width: 0; /* required; flexbox child min-width property is "auto" by default making overflow-wrap ineffectual */
-    }
-  }
+  ${MuiListItemTextRoot}
 `;

package/src/components/Layout/components/Header/header.styles.ts

@@ -4,6 +4,11 @@ import { AppBar as MAppBar } from "@mui/material";
 import { smokeMain } from "../../../../styles/common/mixins/colors";
 import { HEADER_HEIGHT } from "./common/constants";
 
+// See https://github.com/emotion-js/emotion/issues/1105.
+// See https://github.com/emotion-js/emotion/releases/tag/%40emotion%2Fcache%4011.10.2.
+const ignoreSsrWarning =
+  "/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */";
+
 export const AppBar = styled(MAppBar)`
   border-bottom: 1px solid ${smokeMain};
 
@@ -34,7 +39,7 @@ export const Left = styled.div`
   justify-content: flex-start;
 
   .MuiButton-navPrimary {
-    &:first-of-type {
+    &:first-child:not(style)${ignoreSsrWarning} { {
       margin-left: 24px;
     }
   }

package/src/components/Table/common/utils.ts

@@ -84,6 +84,22 @@ export function buildCategoryViews<T extends RowData>(
   return categoryViews;
 }
 
+/**
+ * Returns the header for a column as a string.
+ * @param column - Column.
+ * @returns column header.
+ */
+export function getColumnHeader<T extends RowData>(column: Column<T>): string {
+  const { columnDef, id = "" } = column;
+  const { header, meta } = columnDef;
+
+  // Return header if it is a string.
+  if (typeof header === "string") return header;
+
+  // Return header from meta or id.
+  return meta?.header || id;
+}
+
 /**
  * Format data to TSV string.
  * @param data - Table data.

package/src/components/Table/components/TableFeatures/ColumnFilter/columnFilter.styles.ts

@@ -0,0 +1,23 @@
+import styled from "@emotion/styled";
+import { Menu, menuClasses, paperClasses } from "@mui/material";
+import { MAX_LIST_HEIGHT_PX } from "../../../../Filter/common/constants";
+import {
+  MuiListItemButtonRoot,
+  MuiListItemTextRoot,
+} from "../../../../Filter/components/FilterList/filterList.styles";
+
+export const StyledMenu = styled(Menu)`
+  .${paperClasses.root} {
+    margin: 4px 0;
+    width: 288px;
+
+    .${menuClasses.list} {
+      max-height: ${MAX_LIST_HEIGHT_PX}px;
+      overflow-wrap: break-word;
+
+      ${MuiListItemButtonRoot}
+
+      ${MuiListItemTextRoot}
+    }
+  }
+`;

package/src/components/Table/components/TableFeatures/ColumnFilter/columnFilter.tsx

@@ -0,0 +1,98 @@
+import {
+  Checkbox,
+  ListItemButton,
+  ListItemText,
+  Button as MButton,
+  Typography,
+} from "@mui/material";
+import { RowData } from "@tanstack/react-table";
+import React, { Fragment } from "react";
+import { SVG_ICON_PROPS } from "../../../../../styles/common/mui/svgIcon";
+import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
+import { CheckedIcon } from "../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
+import { UncheckedIcon } from "../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
+import { DropDownIcon } from "../../../../common/Form/components/Select/components/DropDownIcon/dropDownIcon";
+import { useMenu } from "../../../../common/Menu/hooks/useMenu";
+import { getColumnHeader } from "../../../common/utils";
+import { getSortedFacetedValues } from "../../../featureOptions/facetedColumn/utils";
+import { StyledMenu } from "./columnFilter.styles";
+import { MENU_PROPS } from "./constants";
+import { ColumnFilterProps } from "./types";
+import { updater } from "./utils";
+
+/**
+ *  Column filter component with supported filter functions:
+ *  - `arrIncludesSome`
+ */
+
+export const ColumnFilter = <T extends RowData>({
+  Button = MButton,
+  className,
+  column,
+  ...props /* MuiMenuProps */
+}: ColumnFilterProps<T>): JSX.Element => {
+  const { anchorEl, onClose, onOpen, open } = useMenu();
+  const facetedUniqueValues = column.getFacetedUniqueValues();
+  const sortedValues = getSortedFacetedValues(facetedUniqueValues);
+  const filterValue = (column.getFilterValue() || []) as unknown[];
+  return (
+    <Fragment>
+      <Button
+        key={column.id}
+        endIcon={<DropDownIcon color={SVG_ICON_PROPS.COLOR.INK_LIGHT} />}
+        onClick={onOpen}
+      >
+        {getColumnHeader(column)}
+      </Button>
+      <StyledMenu
+        {...MENU_PROPS}
+        {...props}
+        className={className}
+        anchorEl={anchorEl}
+        onClose={onClose}
+        open={open}
+      >
+        {sortedValues.map(([value, occurrence]) => (
+          <ListItemButton
+            key={String(value)}
+            selected={filterValue.includes(value)}
+            onClick={() => column.setFilterValue(updater(value))}
+          >
+            <Checkbox
+              checked={filterValue.includes(value)}
+              checkedIcon={<CheckedIcon />}
+              icon={<UncheckedIcon />}
+            />
+            <ListItemText
+              disableTypography
+              primary={<span>{String(value)}</span>}
+              secondary={
+                <Typography
+                  color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
+                  variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_SMALL_400}
+                >
+                  {occurrence}
+                </Typography>
+              }
+            />
+          </ListItemButton>
+        ))}
+        <ListItemButton
+          disabled={!column.getIsFiltered()}
+          onClick={() => column.setFilterValue(undefined)}
+        >
+          <Typography
+            color={
+              column.getIsFiltered()
+                ? TYPOGRAPHY_PROPS.COLOR.PRIMARY
+                : TYPOGRAPHY_PROPS.COLOR.INHERIT
+            }
+            variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_500}
+          >
+            Clear All
+          </Typography>
+        </ListItemButton>
+      </StyledMenu>
+    </Fragment>
+  );
+};

package/src/components/Table/components/TableFeatures/ColumnFilter/constants.ts

@@ -0,0 +1,16 @@
+import { MenuProps } from "@mui/material";
+
+export const MENU_PROPS: Omit<MenuProps, "anchorEl" | "onClose" | "open"> = {
+  anchorOrigin: {
+    horizontal: "right",
+    vertical: "bottom",
+  },
+  marginThreshold: 8,
+  slotProps: {
+    paper: { variant: "menu" },
+  },
+  transformOrigin: {
+    horizontal: "right",
+    vertical: "top",
+  },
+};

package/src/components/Table/components/TableFeatures/ColumnFilter/types.ts

@@ -0,0 +1,10 @@
+import { Button, MenuProps } from "@mui/material";
+import { Column, RowData } from "@tanstack/react-table";
+import { BaseComponentProps } from "../../../../types";
+
+export interface ColumnFilterProps<T extends RowData>
+  extends BaseComponentProps,
+    Omit<MenuProps, "anchorEl" | "onClose" | "open"> {
+  Button?: typeof Button;
+  column: Column<T>;
+}

package/src/components/Table/components/TableFeatures/ColumnFilter/utils.ts

@@ -0,0 +1,27 @@
+/**
+ * Returns an updater function for column filter.
+ * @param value - Value.
+ * @returns An updater function that returns the new filter value.
+ */
+export function updater(
+  value: unknown
+): (old: unknown[] | undefined) => unknown[] | undefined {
+  return (old: unknown[] | undefined) => {
+    // If no old value, return new value.
+    if (!old) return [value];
+
+    // If value already exists, remove it.
+    if (old.includes(value)) {
+      // Filter out the value.
+      const next = old.filter((v) => v !== value);
+
+      // If no values remain, return undefined.
+      if (next.length === 0) return undefined;
+
+      return next;
+    }
+
+    // Otherwise, add the value.
+    return [...old, value];
+  };
+}

package/src/components/Table/featureOptions/facetedColumn/utils.ts

@@ -0,0 +1,14 @@
+import { COLLATOR_CASE_INSENSITIVE } from "../../../../common/constants";
+
+/**
+ * Sorts Map entries by key.
+ * @param facetedValues - Map of faceted values.
+ * @returns Sorted array of [key, value] entries.
+ */
+export function getSortedFacetedValues(
+  facetedValues: Map<unknown, number>
+): [unknown, number][] {
+  return [...facetedValues].sort((a, b) =>
+    COLLATOR_CASE_INSENSITIVE.compare(String(a), String(b))
+  );
+}

package/src/components/common/ButtonGroup/constants.ts

@@ -0,0 +1,13 @@
+import { ButtonGroupProps } from "@mui/material";
+import { BUTTON_GROUP_PROPS as MUI_BUTTON_GROUP_PROPS } from "../../../styles/common/mui/buttonGroup";
+
+export const BUTTON_GROUP_PROPS: Record<string, Partial<ButtonGroupProps>> = {
+  PRIMARY_CONTAINED: {
+    color: MUI_BUTTON_GROUP_PROPS.COLOR.PRIMARY,
+    variant: MUI_BUTTON_GROUP_PROPS.VARIANT.CONTAINED,
+  },
+  SECONDARY_OUTLINED: {
+    color: MUI_BUTTON_GROUP_PROPS.COLOR.SECONDARY,
+    variant: MUI_BUTTON_GROUP_PROPS.VARIANT.OUTLINED,
+  },
+};

package/src/mocks/@storybook/addon-actions.ts

@@ -0,0 +1,10 @@
+import { jest } from "@jest/globals";
+
+/**
+ * Mock for Storybook's @storybook/addon-actions function.
+ * The mock keeps the same function signature as the real Storybook action,
+ * does not trigger any Storybook logic, and simply returns a Jest mock function
+ * for use in tests.
+ * @returns A Jest mock function.
+ */
+export const action = (): jest.Mock => jest.fn();

package/src/styles/common/mui/buttonGroup.ts

@@ -0,0 +1,46 @@
+import { buttonGroupClasses, ButtonGroupProps } from "@mui/material";
+
+type ButtonGroupPropsOptions = {
+  CLASSES: typeof CLASSES;
+  COLOR: typeof COLOR;
+  SIZE: typeof SIZE;
+  VARIANT: typeof VARIANT;
+};
+
+const CLASSES: Record<string, ButtonGroupProps["classes"]> = {
+  COLOR_PRIMARY: buttonGroupClasses.colorPrimary,
+  COLOR_SECONDARY: buttonGroupClasses.colorSecondary,
+  CONTAINED: buttonGroupClasses.contained,
+  GROUPED: buttonGroupClasses.grouped,
+  OUTLINED: buttonGroupClasses.outlined,
+  ROOT: buttonGroupClasses.root,
+};
+
+const COLOR: Record<string, ButtonGroupProps["color"]> = {
+  ERROR: "error",
+  INFO: "info",
+  INHERIT: "inherit",
+  PRIMARY: "primary",
+  SECONDARY: "secondary",
+  SUCCESS: "success",
+  WARNING: "warning",
+};
+
+const SIZE: Record<string, ButtonGroupProps["size"]> = {
+  LARGE: "large",
+  MEDIUM: "medium",
+  SMALL: "small",
+};
+
+const VARIANT: Record<string, ButtonGroupProps["variant"]> = {
+  CONTAINED: "contained",
+  OUTLINED: "outlined",
+  TEXT: "text",
+};
+
+export const BUTTON_GROUP_PROPS: ButtonGroupPropsOptions = {
+  CLASSES,
+  COLOR,
+  SIZE,
+  VARIANT,
+};

package/src/styles/common/mui/typography.ts

@@ -10,12 +10,14 @@ const COLOR: Record<string, TypographyOwnProps["color"]> = {
   INHERIT: "inherit",
   INK_LIGHT: "ink.light",
   INK_MAIN: "ink.main",
+  PRIMARY: "primary",
 };
 
 const VARIANT: Record<string, TypographyOwnProps["variant"]> = {
   INHERIT: "inherit",
   TEXT_BODY_400: "text-body-400",
   TEXT_BODY_400_2_LINES: "text-body-400-2lines",
+  TEXT_BODY_500: "text-body-500",
   TEXT_BODY_SMALL_400: "text-body-small-400",
   TEXT_HEADING_LARGE: "text-heading-large",
   TEXT_HEADING_SMALL: "text-heading-small",

package/src/tests/mui/constants.ts

@@ -1,5 +1,6 @@
 export const MUI_CLASSES = {
   ACTIVE: "Mui-active",
   COMPLETED: "Mui-completed",
+  DISABLED: "Mui-disabled",
   SELECTED: "Mui-selected",
 };