@databiosphere/findable-ui 22.0.0 → 24.0.0

package/src/providers/layoutDimensions/provider.tsx

@@ -0,0 +1,29 @@
+import React, { useRef } from "react";
+import {
+  getBorderBoxSizeHeight,
+  useResizeObserver,
+} from "../../hooks/useResizeObserver";
+import { LayoutDimensionsContext } from "./context";
+import { LayoutDimensions, LayoutDimensionsProviderProps } from "./types";
+
+export const LayoutDimensionsProvider = ({
+  children,
+}: LayoutDimensionsProviderProps): JSX.Element => {
+  const footerRef = useRef<HTMLElement>(null);
+  const headerRef = useRef<HTMLElement>(null);
+  const footerRect = useResizeObserver(footerRef, getBorderBoxSizeHeight);
+  const headerRect = useResizeObserver(headerRef, getBorderBoxSizeHeight);
+
+  const dimensions: LayoutDimensions = {
+    footer: { height: footerRect?.height ?? 0 },
+    header: { height: headerRect?.height ?? 0 },
+  };
+
+  return (
+    <LayoutDimensionsContext.Provider
+      value={{ dimensions, footerRef, headerRef }}
+    >
+      {children}
+    </LayoutDimensionsContext.Provider>
+  );
+};

package/src/providers/layoutDimensions/types.ts

@@ -0,0 +1,17 @@
+import { ReactNode, RefObject } from "react";
+import { ElementRect } from "../../hooks/useResizeObserver";
+
+export interface LayoutDimensions {
+  footer: Pick<ElementRect, "height">;
+  header: Pick<ElementRect, "height">;
+}
+
+export interface LayoutDimensionsContextProps {
+  dimensions: LayoutDimensions;
+  footerRef: RefObject<HTMLElement> | null;
+  headerRef: RefObject<HTMLElement> | null;
+}
+
+export interface LayoutDimensionsProviderProps {
+  children: ReactNode | ReactNode[];
+}

package/src/storybook/controls/constants.ts

@@ -0,0 +1,12 @@
+import { ArgTypes } from "@storybook/react";
+import { CONTROL_TYPE } from "./types";
+
+export const CONTROL_CONFIG_MAP: Record<
+  CONTROL_TYPE,
+  ArgTypes[keyof ArgTypes]["control"]
+> = {
+  [CONTROL_TYPE.BOOLEAN]: { type: "boolean" },
+  [CONTROL_TYPE.DISABLED]: false,
+};
+
+export const MUI_CONTROLS = ["classes", "className", "ref", "sx"] as const;

package/src/storybook/controls/types.ts

@@ -0,0 +1,4 @@
+export enum CONTROL_TYPE {
+  BOOLEAN = "boolean",
+  DISABLED = "disabled",
+}

package/src/storybook/controls/utils.ts

@@ -0,0 +1,18 @@
+import { Args, ArgTypes } from "@storybook/react";
+import { CONTROL_CONFIG_MAP } from "./constants";
+import { CONTROL_TYPE } from "./types";
+
+/**
+ * Configures controls for specified keys with the given control type.
+ * @param keys - ArgType keys.
+ * @param controlType - The type of control to apply (from CONTROL_TYPE enum).
+ * @returns An object of ArgTypes with the specified control configuration.
+ */
+export function configureControls<TArg = Args>(
+  keys: (keyof TArg)[],
+  controlType: CONTROL_TYPE
+): Partial<ArgTypes<TArg>> {
+  return Object.fromEntries(
+    keys.map((key) => [key, { control: CONTROL_CONFIG_MAP[controlType] }])
+  ) as Partial<ArgTypes<TArg>>;
+}

package/src/storybook/decorators.tsx

@@ -0,0 +1,17 @@
+import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
+import { CssBaseline, ThemeProvider } from "@mui/material";
+import { Preview } from "@storybook/react";
+import React from "react";
+import { createAppTheme } from "../theme/theme";
+
+export const decorators: Preview["decorators"] = (Story, context) => {
+  const theme = createAppTheme();
+  return (
+    <EmotionThemeProvider theme={theme}>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        <Story {...context} />
+      </ThemeProvider>
+    </EmotionThemeProvider>
+  );
+};

package/src/storybook/loremIpsum.ts

@@ -0,0 +1,5 @@
+export const LOREM_IPSUM = {
+  LONG: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.",
+  SHORT:
+    "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.",
+};

package/src/storybook/parameters.ts

@@ -0,0 +1,14 @@
+import { Preview } from "@storybook/react";
+
+export const parameters: Preview["parameters"] = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    expanded: true,
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+    sort: "alpha",
+  },
+  layout: "centered",
+};

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

@@ -0,0 +1,14 @@
+import { StepperProps } from "@mui/material";
+
+type StepperPropsOptions = {
+  ORIENTATION: typeof ORIENTATION;
+};
+
+const ORIENTATION: Record<string, StepperProps["orientation"]> = {
+  HORIZONTAL: "horizontal",
+  VERTICAL: "vertical",
+};
+
+export const STEPPER_PROPS: StepperPropsOptions = {
+  ORIENTATION,
+};

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

@@ -0,0 +1,35 @@
+import { SvgIconProps } from "@mui/material";
+
+type SvgIconPropsOptions = {
+  COLOR: typeof COLOR;
+  FONT_SIZE: typeof FONT_SIZE;
+};
+
+const COLOR: Record<string, SvgIconProps["color"]> = {
+  ACTION: "action",
+  DISABLED: "disabled",
+  ERROR: "error",
+  INFO: "info",
+  INHERIT: "inherit",
+  INK_LIGHT: "inkLight",
+  INK_MAIN: "inkMain",
+  PRIMARY: "primary",
+  SECONDARY: "secondary",
+  SUCCESS: "success",
+  WARNING: "warning",
+};
+
+const FONT_SIZE: Record<string, SvgIconProps["fontSize"]> = {
+  INHERIT: "inherit",
+  LARGE: "large",
+  MEDIUM: "medium",
+  SMALL: "small",
+  XSMALL: "xsmall",
+  XXLARGE: "xxlarge",
+  XXSMALL: "xxsmall",
+};
+
+export const SVG_ICON_PROPS: SvgIconPropsOptions = {
+  COLOR,
+  FONT_SIZE,
+};

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

@@ -0,0 +1,16 @@
+import { TabProps } from "@mui/material";
+
+type TabPropsOptions = {
+  ICON_POSITION: typeof ICON_POSITION;
+};
+
+const ICON_POSITION: Record<string, TabProps["iconPosition"]> = {
+  BOTTOM: "bottom",
+  END: "end",
+  START: "start",
+  TOP: "top",
+};
+
+export const TAB_PROPS: TabPropsOptions = {
+  ICON_POSITION,
+};

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

@@ -0,0 +1,20 @@
+import { TabsProps } from "@mui/material";
+
+type TabsPropsOptions = {
+  INDICATOR_COLOR: typeof INDICATOR_COLOR;
+  ORIENTATION: typeof ORIENTATION;
+};
+
+const INDICATOR_COLOR: Record<string, TabsProps["indicatorColor"]> = {
+  PRIMARY: "primary",
+  TRANSPARENT: "transparent",
+};
+
+const ORIENTATION: Record<string, TabsProps["orientation"]> = {
+  VERTICAL: "vertical",
+};
+
+export const TABS_PROPS: TabsPropsOptions = {
+  INDICATOR_COLOR,
+  ORIENTATION,
+};

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

@@ -1,14 +1,27 @@
 import { TypographyOwnProps } from "@mui/material";
 
-export const COLOR: Record<string, TypographyOwnProps["color"]> = {
+type TypographyPropsOptions = {
+  COLOR: typeof COLOR;
+  VARIANT: typeof VARIANT;
+};
+
+const COLOR: Record<string, TypographyOwnProps["color"]> = {
   INHERIT: "inherit",
   INK_LIGHT: "ink.light",
   INK_MAIN: "ink.main",
 };
 
-export const VARIANT: Record<string, TypographyOwnProps["variant"]> = {
+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_SMALL_400: "text-body-small-400",
+  TEXT_HEADING_LARGE: "text-heading-large",
   TEXT_HEADING_SMALL: "text-heading-small",
+  TEXT_HEADING_XSMALL: "text-heading-xsmall",
+};
+
+export const TYPOGRAPHY_PROPS: TypographyPropsOptions = {
+  COLOR,
+  VARIANT,
 };

package/src/tests/mui/constants.ts

@@ -0,0 +1,4 @@
+export const MUI_CLASSES = {
+  ACTIVE: "Mui-active",
+  COMPLETED: "Mui-completed",
+};

package/src/theme/common/components.ts

@@ -1,5 +1,4 @@
 import { Components, Theme } from "@mui/material";
-import { DropDownIcon } from "../../components/common/Form/components/Select/components/DropDownIcon/dropDownIcon";
 import { CHIP_PROPS } from "../../styles/common/mui/chip";
 import { desktopUp, mobileUp, tabletUp } from "./breakpoints";
 import {
@@ -1180,9 +1179,6 @@ export const MuiRadio = (theme: Theme): Components["MuiRadio"] => {
  * MuiSelect Component
  */
 export const MuiSelect: Components["MuiSelect"] = {
-  defaultProps: {
-    IconComponent: DropDownIcon,
-  },
   styleOverrides: {
     select: {
       minHeight: "unset",

package/src/theme/common/typography.ts

@@ -20,6 +20,7 @@ const TYPOGRAPHY = {
   TEXT_HEADING_LARGE: "text-heading-large",
   TEXT_HEADING_SMALL: "text-heading-small",
   TEXT_HEADING_XLARGE: "text-heading-xlarge",
+  TEXT_HEADING_XSMALL: "text-heading-xsmall",
   TEXT_UPPERCASE_500: "text-uppercase-500",
 } as const;
 export const {
@@ -37,6 +38,7 @@ export const {
   TEXT_HEADING_LARGE,
   TEXT_HEADING_SMALL,
   TEXT_HEADING_XLARGE,
+  TEXT_HEADING_XSMALL,
   TEXT_UPPERCASE_500,
 } = TYPOGRAPHY;
 
@@ -189,6 +191,15 @@ export const textHeadingXLarge: CSSProperties = {
   },
 };
 
+/**
+ * Typography Option "text-heading-xsmall"
+ */
+export const textHeadingXSmall: CSSProperties = {
+  fontSize: 16,
+  fontWeight: 500,
+  lineHeight: "24px",
+};
+
 /**
  * Typography Option "text-uppercase-500"
  */

package/src/theme/theme.ts

@@ -55,6 +55,7 @@ export function createAppTheme(customOptions?: ThemeOptions): Theme {
         [T.TEXT_HEADING_LARGE]: T.textHeadingLarge,
         [T.TEXT_HEADING_SMALL]: T.textHeadingSmall,
         [T.TEXT_HEADING_XLARGE]: T.textHeadingXLarge,
+        [T.TEXT_HEADING_XSMALL]: T.textHeadingXSmall,
         [T.TEXT_UPPERCASE_500]: T.textUppercase500,
         fontFamily: T.fontFamily,
       },

package/src/utils/tests.ts

@@ -17,3 +17,23 @@ export function getAnchorEl(id: string): HTMLAnchorElement {
 export function getButtonById(id: string): HTMLButtonElement {
   return screen.getByTestId(id);
 }
+
+/**
+ * Returns class names of the given element.
+ * @param element - Element.
+ * @returns element class names.
+ */
+export function getClassNames(element?: Element | null): string | null {
+  if (!element) return null;
+  return element.getAttribute("class");
+}
+
+/**
+ * Returns tag name of the given element.
+ * @param element - Element.
+ * @returns element tag name.
+ */
+export function getTagName(element?: Element | null): string | null {
+  if (!element) return null;
+  return element.tagName.toLowerCase();
+}

package/tests/setup.ts

@@ -0,0 +1,6 @@
+import { setProjectAnnotations } from "@storybook/react";
+import { decorators } from "../src/storybook/decorators";
+import { parameters } from "../src/storybook/parameters";
+
+// Set project annotations once before all tests
+setProjectAnnotations({ decorators, parameters });

package/tests/stepIcon.test.tsx

@@ -0,0 +1,42 @@
+import { composeStories } from "@storybook/react";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import { STEP_ICON_TEST_ID } from "../src/components/Stepper/components/Step/components/StepIcon/constants";
+import * as stories from "../src/components/Stepper/components/Step/components/StepIcon/stories/stepIcon.stories";
+import { MUI_CLASSES } from "../src/tests/mui/constants";
+import { getClassNames, getTagName } from "../src/utils/tests";
+
+const { Active, Completed, Default } = composeStories(stories);
+
+describe("StepIcon", () => {
+  it("renders correctly", () => {
+    render(<Default testId={STEP_ICON_TEST_ID} />);
+    const stepIconEl = screen.getByTestId(STEP_ICON_TEST_ID);
+    expect(stepIconEl).not.toBeNull();
+  });
+
+  it("renders inactive step icon", () => {
+    render(<Default testId={STEP_ICON_TEST_ID} />);
+    const stepIconEl = screen.getByTestId(STEP_ICON_TEST_ID);
+    expect(stepIconEl.textContent).toEqual("1");
+    expect(getClassNames(stepIconEl)).not.toContain(MUI_CLASSES.ACTIVE);
+    expect(getClassNames(stepIconEl)).not.toContain(MUI_CLASSES.COMPLETED);
+  });
+
+  it("renders active step icon", () => {
+    render(<Active testId={STEP_ICON_TEST_ID} />);
+    const stepIconEl = screen.getByTestId(STEP_ICON_TEST_ID);
+    expect(stepIconEl.textContent).toEqual("1");
+    expect(getClassNames(stepIconEl)).toContain(MUI_CLASSES.ACTIVE);
+    expect(getClassNames(stepIconEl)).not.toContain(MUI_CLASSES.COMPLETED);
+  });
+
+  it("renders completed step icon", () => {
+    render(<Completed testId={STEP_ICON_TEST_ID} />);
+    const stepIconEl = screen.getByTestId(STEP_ICON_TEST_ID);
+    expect(stepIconEl.textContent).not.toEqual("1");
+    expect(getClassNames(stepIconEl)).not.toContain(MUI_CLASSES.ACTIVE);
+    expect(getClassNames(stepIconEl)).toContain(MUI_CLASSES.COMPLETED);
+    expect(getTagName(stepIconEl.firstElementChild)).toBe("path");
+  });
+});

package/types/data-explorer-ui.d.ts

@@ -203,6 +203,7 @@ declare module "@mui/material/styles" {
     "text-heading-large": TypographyStyleOptions;
     "text-heading-small": TypographyStyleOptions;
     "text-heading-xlarge": TypographyStyleOptions;
+    "text-heading-xsmall": TypographyStyleOptions;
     "text-uppercase-500": TypographyStyleOptions;
   }
 
@@ -221,6 +222,7 @@ declare module "@mui/material/styles" {
     "text-heading-large"?: TypographyStyleOptions;
     "text-heading-small"?: TypographyStyleOptions;
     "text-heading-xlarge"?: TypographyStyleOptions;
+    "text-heading-xsmall"?: TypographyStyleOptions;
     "text-uppercase-500"?: TypographyStyleOptions;
   }
 }
@@ -253,6 +255,7 @@ declare module "@mui/material/Typography" {
     "text-heading-large": true;
     "text-heading-small": true;
     "text-heading-xlarge": true;
+    "text-heading-xsmall": true;
     "text-uppercase-500": true;
   }
 }

package/lib/components/Layout/components/Header/hooks/useMeasureHeader.d.ts

@@ -1,5 +0,0 @@
-import { RefObject } from "react";
-export interface UseMeasureHeader {
-    headerRef: RefObject<HTMLElement>;
-}
-export declare const useMeasureHeader: () => UseMeasureHeader;

package/lib/components/Layout/components/Header/hooks/useMeasureHeader.js

@@ -1,19 +0,0 @@
-import { useEffect, useRef } from "react";
-import { useLayoutState } from "../../../../../hooks/useLayoutState";
-import { getBorderBoxSizeHeight, useResizeObserver, } from "../../../../../hooks/useResizeObserver";
-import { LayoutActionKind } from "../../../../../providers/layoutState";
-export const useMeasureHeader = () => {
-    const { layoutDispatch } = useLayoutState();
-    const headerRef = useRef(null);
-    const { height } = useResizeObserver(headerRef, getBorderBoxSizeHeight) || {};
-    // Updates layout state header height.
-    useEffect(() => {
-        if (!height)
-            return;
-        layoutDispatch({
-            payload: height,
-            type: LayoutActionKind.UpdateHeaderHeight,
-        });
-    }, [height, layoutDispatch]);
-    return { headerRef };
-};

package/lib/components/Layout/components/Outline/common/constants.d.ts

@@ -1,2 +0,0 @@
-import { TabProps as MTabProps } from "@mui/material";
-export declare const DEFAULT_TAB_VALUE: MTabProps["value"];

package/lib/hooks/useLayoutState.d.ts

@@ -1,6 +0,0 @@
-import { LayoutStateContextProps } from "../providers/layoutState";
-/**
- * Returns layout state context.
- * @returns layout state context.
- */
-export declare const useLayoutState: () => LayoutStateContextProps;

package/lib/hooks/useLayoutState.js

@@ -1,9 +0,0 @@
-import { useContext } from "react";
-import { LayoutStateContext, } from "../providers/layoutState";
-/**
- * Returns layout state context.
- * @returns layout state context.
- */
-export const useLayoutState = () => {
-    return useContext(LayoutStateContext);
-};

package/lib/providers/layoutState.d.ts

@@ -1,40 +0,0 @@
-import React, { Dispatch, ReactNode } from "react";
-export declare const DEFAULT_LAYOUT_STATE: {
-    headerHeight: number;
-};
-/**
- * Layout state.
- */
-export type LayoutState = {
-    headerHeight: number;
-};
-/**
- * Model of layout state context.
- */
-export type LayoutStateContextProps = {
-    layoutDispatch: Dispatch<LayoutAction>;
-    layoutState: LayoutState;
-};
-export declare const LayoutStateContext: React.Context<LayoutStateContextProps>;
-export interface LayoutStateProps {
-    children: ReactNode | ReactNode[];
-}
-export declare function LayoutStateProvider({ children, }: LayoutStateProps): JSX.Element;
-/**
- * Layout action kind.
- */
-export declare enum LayoutActionKind {
-    UpdateHeaderHeight = "UPDATE_HEADER_HEIGHT"
-}
-/**
- * Layout action.
- */
-export type LayoutAction = UpdateHeaderHeightAction;
-/**
- * Update header height action.
- */
-type UpdateHeaderHeightAction = {
-    payload?: number;
-    type: LayoutActionKind.UpdateHeaderHeight;
-};
-export {};

package/lib/providers/layoutState.js

@@ -1,47 +0,0 @@
-import React, { createContext, useReducer } from "react";
-import { HEADER_HEIGHT } from "../components/Layout/components/Header/common/constants";
-// Default layout state.
-export const DEFAULT_LAYOUT_STATE = {
-    headerHeight: HEADER_HEIGHT + 1, // 1px for bottom border.
-};
-export const LayoutStateContext = createContext({
-    // eslint-disable-next-line @typescript-eslint/no-empty-function -- allow dummy function for default state.
-    layoutDispatch: () => { },
-    layoutState: DEFAULT_LAYOUT_STATE,
-});
-export function LayoutStateProvider({ children, }) {
-    // Layout state.
-    const [layoutState, layoutDispatch] = useReducer((s, a) => layoutReducer(s, a), DEFAULT_LAYOUT_STATE);
-    return (React.createElement(LayoutStateContext.Provider, { value: {
-            layoutDispatch,
-            layoutState,
-        } }, children));
-}
-/**
- * Layout action kind.
- */
-export var LayoutActionKind;
-(function (LayoutActionKind) {
-    LayoutActionKind["UpdateHeaderHeight"] = "UPDATE_HEADER_HEIGHT";
-})(LayoutActionKind || (LayoutActionKind = {}));
-/**
- * Layout reducer.
- * @param state - Layout state.
- * @param action - Layout action.
- * @returns layout state.
- */
-function layoutReducer(state, action) {
-    const { payload, type } = action;
-    // eslint-disable-next-line sonarjs/no-small-switch -- allow small switch.
-    switch (type) {
-        // Updates header height.
-        case LayoutActionKind.UpdateHeaderHeight: {
-            return {
-                ...state,
-                headerHeight: payload ?? state.headerHeight,
-            };
-        }
-        default:
-            return state;
-    }
-}

package/src/components/Layout/components/Header/hooks/useMeasureHeader.ts

@@ -1,28 +0,0 @@
-import { RefObject, useEffect, useRef } from "react";
-import { useLayoutState } from "../../../../../hooks/useLayoutState";
-import {
-  getBorderBoxSizeHeight,
-  useResizeObserver,
-} from "../../../../../hooks/useResizeObserver";
-import { LayoutActionKind } from "../../../../../providers/layoutState";
-
-export interface UseMeasureHeader {
-  headerRef: RefObject<HTMLElement>;
-}
-
-export const useMeasureHeader = (): UseMeasureHeader => {
-  const { layoutDispatch } = useLayoutState();
-  const headerRef = useRef<HTMLElement>(null);
-  const { height } = useResizeObserver(headerRef, getBorderBoxSizeHeight) || {};
-
-  // Updates layout state header height.
-  useEffect(() => {
-    if (!height) return;
-    layoutDispatch({
-      payload: height,
-      type: LayoutActionKind.UpdateHeaderHeight,
-    });
-  }, [height, layoutDispatch]);
-
-  return { headerRef };
-};

package/src/components/Layout/components/Outline/common/constants.ts

@@ -1,3 +0,0 @@
-import { TabProps as MTabProps } from "@mui/material";
-
-export const DEFAULT_TAB_VALUE: MTabProps["value"] = "";

package/src/hooks/useLayoutState.ts

@@ -1,13 +0,0 @@
-import { useContext } from "react";
-import {
-  LayoutStateContext,
-  LayoutStateContextProps,
-} from "../providers/layoutState";
-
-/**
- * Returns layout state context.
- * @returns layout state context.
- */
-export const useLayoutState = (): LayoutStateContextProps => {
-  return useContext(LayoutStateContext);
-};