@databiosphere/findable-ui 46.1.3 → 48.1.0

package/src/providers/services/wasPop/provider.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useCallback, useRef } from "react";
+import { JSX, ReactNode, useCallback, useRef } from "react";
 import { NextHistoryState } from "../../../services/beforePopState/types";
 import { useOnPopState } from "../../../services/beforePopState/useOnPopState";
 import { WasPopContext } from "./context";
@@ -21,7 +21,7 @@ export function WasPopProvider({
 }: {
   children: ReactNode;
 }): JSX.Element {
-  const popRef = useRef<NextHistoryState | undefined>();
+  const popRef = useRef<NextHistoryState | undefined>(undefined);
 
   // Pop callback.
   const onBeforePopState = useCallback((state: NextHistoryState) => {

package/src/providers/systemStatus.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, ReactNode, useEffect, useMemo } from "react";
+import { createContext, JSX, ReactNode, useEffect, useMemo } from "react";
 import { fetchSystemStatusFromURL } from "../entity/api/service";
 import { useAsync } from "../hooks/useAsync";
 import { useCatalog } from "../hooks/useCatalog";
@@ -41,7 +41,7 @@ export interface SystemStatus {
  * System status context.
  */
 export const SystemStatusContext = createContext<SystemStatus>(
-  DEFAULT_SYSTEM_STATUS
+  DEFAULT_SYSTEM_STATUS,
 );
 
 export interface SystemStatusProps {
@@ -59,7 +59,7 @@ export function SystemStatusProvider<R>({
   // Build system status URL.
   const url = useMemo(
     () => getSystemStatusURL(apiPath, catalog),
-    [apiPath, catalog]
+    [apiPath, catalog],
   );
 
   // System status (raw) response.
@@ -103,7 +103,7 @@ export function SystemStatusProvider<R>({
  */
 function getSystemStatusURL(
   path: string | undefined,
-  catalog: string | undefined
+  catalog: string | undefined,
 ): string | undefined {
   if (!path || !catalog) return;
   const url = new URL(path);

package/src/storybook/controls/constants.ts

@@ -1,4 +1,4 @@
-import { ArgTypes } from "@storybook/react";
+import type { ArgTypes } from "@storybook/nextjs-vite";
 import { CONTROL_TYPE } from "./types";
 
 export const CONTROL_CONFIG_MAP: Record<

package/src/storybook/controls/utils.ts

@@ -1,4 +1,4 @@
-import { Args, ArgTypes } from "@storybook/react";
+import type { Args, ArgTypes } from "@storybook/nextjs-vite";
 import { CONTROL_CONFIG_MAP } from "./constants";
 import { CONTROL_TYPE } from "./types";
 
@@ -10,9 +10,9 @@ import { CONTROL_TYPE } from "./types";
  */
 export function configureControls<TArg = Args>(
   keys: (keyof TArg)[],
-  controlType: CONTROL_TYPE
+  controlType: CONTROL_TYPE,
 ): Partial<ArgTypes<TArg>> {
   return Object.fromEntries(
-    keys.map((key) => [key, { control: CONTROL_CONFIG_MAP[controlType] }])
+    keys.map((key) => [key, { control: CONTROL_CONFIG_MAP[controlType] }]),
   ) as Partial<ArgTypes<TArg>>;
 }

package/src/storybook/decorators.tsx

@@ -1,6 +1,6 @@
 import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
 import { CssBaseline, ThemeProvider } from "@mui/material";
-import { Preview } from "@storybook/react";
+import { Preview } from "@storybook/nextjs-vite";
 import React from "react";
 import { createAppTheme } from "../theme/theme";
 

package/src/storybook/parameters.ts

@@ -1,4 +1,4 @@
-import { Preview } from "@storybook/react";
+import { Preview } from "@storybook/nextjs-vite";
 
 export const parameters: Preview["parameters"] = {
   actions: { argTypesRegex: "^on[A-Z].*" },

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

@@ -7,7 +7,7 @@ import { ThemeProps } from "../../../theme/types";
  * @returns Typography styles.
  */
 export function typographyToCSS(
-  variant: keyof ThemeProps["theme"]["typography"]
+  variant: keyof ThemeProps["theme"]["typography"],
 ) {
   return (props: ThemeProps): SerializedStyles => {
     return css(props.theme.typography[variant]);

package/src/tests/utils.ts

@@ -7,7 +7,7 @@ import { escapeRegExp } from "../common/utils";
  * @returns The button element.
  */
 export function getButton<T extends HTMLElement = HTMLElement>(
-  name: string | RegExp
+  name: string | RegExp,
 ): T {
   return screen.getByRole("button", { name });
 }
@@ -18,7 +18,7 @@ export function getButton<T extends HTMLElement = HTMLElement>(
  * @returns The input element.
  */
 export function getLabelText<T extends HTMLElement = HTMLElement>(
-  text: string
+  text: string,
 ): T {
   return screen.getByLabelText(text);
 }
@@ -47,7 +47,7 @@ export function getRole<T extends HTMLElement = HTMLElement>(role: string): T {
  * @returns The element.
  */
 export function getText<T extends HTMLElement = HTMLElement>(
-  text: string | RegExp
+  text: string | RegExp,
 ): T {
   return screen.getByText(text);
 }

package/src/theme/common/breakpoints.ts

@@ -7,7 +7,7 @@ import { ThemeOptions } from "@mui/material";
  * @returns Breakpoint configuration object with values for xs, sm, md, lg breakpoints.
  */
 export const breakpoints = (
-  themeOptions: ThemeOptions
+  themeOptions: ThemeOptions,
 ): ThemeOptions["breakpoints"] => ({
   values: {
     lg: 1440,

package/src/theme/common/fontStyles.ts

@@ -7,7 +7,7 @@ import { ThemeOptions, TypographyVariantsOptions } from "@mui/material";
  * @returns Object containing fontFamily (custom or default "Inter").
  */
 export const fontStyles = (
-  themeOptions: ThemeOptions
+  themeOptions: ThemeOptions,
 ): Pick<TypographyVariantsOptions, "fontFamily"> => {
   const typography = themeOptions.typography || {};
 

package/src/theme/theme.ts

@@ -39,7 +39,7 @@ export function createAppTheme(customOptions: ThemeOptions = {}): Theme {
         spacing: 4,
         typography: typography(baseTheme),
       },
-      options
-    )
+      options,
+    ),
   );
 }

package/src/utils/database.ts

@@ -30,7 +30,7 @@ export const database = (<T>(): DatabaseReturn<T> => {
       const entityDetailById = entityDetailByEntityListType.get(entityListType);
       if (!entityDetailById) {
         throw new Error(
-          "No database entry for entityListType: " + entityListType
+          "No database entry for entityListType: " + entityListType,
         );
       }
       return entityDetailById.get(entityId);
@@ -39,7 +39,7 @@ export const database = (<T>(): DatabaseReturn<T> => {
       const { getId } = getEntityConfigFromConfig(entityListType);
       if (!getId) {
         throw new Error(
-          "No getId function configured for entity: " + entityListType
+          "No getId function configured for entity: " + entityListType,
         );
       }
 

package/src/utils/fetchQueryParams.ts

@@ -16,7 +16,7 @@ export interface SearchParams {
 export const fetchQueryParams = (
   filters: Filters,
   catalog: string,
-  searchParams: SearchParams | undefined
+  searchParams: SearchParams | undefined,
 ): URLSearchParams => {
   // Build request params.
   return new URLSearchParams({

package/src/utils/mdx/files/mapMDXSlugByFilePaths.ts

@@ -20,7 +20,7 @@ function isMdxFile(fileName: string): boolean {
 export function mapMDXSlugByFilePaths(
   docsDirectory: string,
   dirPath = docsDirectory,
-  slugByFilePaths: Map<string, string[]> = new Map()
+  slugByFilePaths: Map<string, string[]> = new Map(),
 ): Map<string, string[]> {
   const dirents = fs.readdirSync(dirPath, { withFileTypes: true });
   return dirents.reduce((acc, dirent) => {
@@ -40,7 +40,7 @@ export function mapMDXSlugByFilePaths(
       mapMDXSlugByFilePaths(
         docsDirectory,
         path.resolve(dirPath, dirent.name),
-        acc
+        acc,
       );
     }
     return acc;

package/src/utils/mdx/frontmatter/validateMatter.ts

@@ -7,7 +7,7 @@ import { FrontmatterProps } from "./types";
  * @returns Frontmatter.
  */
 export function validateMatter<F extends object>(
-  data: matter.GrayMatterFile<string>["data"]
+  data: matter.GrayMatterFile<string>["data"],
 ): FrontmatterProps<F> | undefined {
   if (
     "title" in data &&

package/src/utils/mdx/plugins/rehypeSlug.ts

@@ -1,20 +1,24 @@
 import { Plugin } from "unified";
 import { visit } from "unist-util-visit";
-import { getHeadingTextValue } from "./remarkHeadings";
-import { generateUniqueId, slugifyHeading } from "./utils";
+import { generateUniqueId, isTextNode, slugifyHeading } from "./utils";
+import type { Root, Element, ElementContent } from "hast";
+import type { VFile } from "vfile";
 
 /**
  * Rehype plugin to generate an ID for each heading in MDX content.
  * @returns plugin to generate an ID for each heading in MDX content.
  */
-export function rehypeSlug(): Plugin {
-  return (tree) => {
+export const rehypeSlug: Plugin = () => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Required by unified, but not used.
+  return (tree: Root, file: VFile) => {
     const setOfIds = new Set<string>();
-    visit(tree, "element", (node) => {
+    visit(tree, "element", (node: Element) => {
       if (/^h[1-6]$/.test(node.tagName)) {
         const headingText = getHeadingTextValue(node.children);
         const headingSlug = slugifyHeading(headingText);
         const id = generateUniqueId(setOfIds, headingSlug);
+        // Defensive nullish check for node.properties.
+        node.properties = node.properties ?? {};
         // Add the ID to the heading element.
         node.properties.id = id;
         node.properties.style = "position: relative;";
@@ -27,10 +31,34 @@ export function rehypeSlug(): Plugin {
               value: id,
             },
           ],
+          children: [],
           name: "AnchorLink",
           type: "mdxJsxFlowElement",
         });
       }
     });
   };
+};
+
+/**
+ * Returns the value of the heading.
+ * @param children - Phrasing content.
+ * @param value - List of heading text values.
+ * @returns heading text value.
+ */
+export function getHeadingTextValue(
+  children: ElementContent[],
+  value: string[] = [],
+): string {
+  for (const child of children) {
+    if (isTextNode(child)) {
+      value.push(child.value);
+    }
+    if ("children" in child && Array.isArray(child.children)) {
+      // Recurse into nested children, accumulating text into the shared `value` array.
+      // The return value is ignored here because accumulation happens via in-place mutation.
+      getHeadingTextValue(child.children, value);
+    }
+  }
+  return value.join("");
 }

package/src/utils/mdx/plugins/remarkHeadings.ts

@@ -2,7 +2,7 @@ import { Heading, PhrasingContent, Root } from "mdast";
 import { Plugin } from "unified";
 import { visit } from "unist-util-visit";
 import { OutlineItem } from "../../../components/Layout/components/Outline/types";
-import { generateUniqueId, slugifyHeading } from "./utils";
+import { generateUniqueId, isTextNode, slugifyHeading } from "./utils";
 
 interface Options {
   depth?: { max?: number; min?: number };
@@ -19,15 +19,14 @@ interface Options {
  * @param options.outline - Outline items.
  * @returns plugin to generate an outline from MDX content.
  */
-export function remarkHeadings({
+export const remarkHeadings: Plugin<[Options]> = ({
   depth: { max = 3, min = 2 } = {},
   outline,
-}: Options): Plugin {
+}: Options) => {
   return (tree: Root): void => {
     const setOfIds = new Set<string>();
-    visit(tree, "heading", (node) => {
-      const heading = node as Heading;
-      const { children, depth } = heading;
+    visit(tree, "heading", (node: Heading) => {
+      const { children, depth } = node;
 
       if (depth < min || depth > max) return;
 
@@ -41,7 +40,7 @@ export function remarkHeadings({
       });
     });
   };
-}
+};
 
 /**
  * Returns the value of the heading.
@@ -51,13 +50,13 @@ export function remarkHeadings({
  */
 export function getHeadingTextValue(
   children: PhrasingContent[],
-  value: string[] = []
+  value: string[] = [],
 ): string {
   for (const child of children) {
-    if ("value" in child) {
+    if (isTextNode(child)) {
       value.push(child.value);
     }
-    if ("children" in child) {
+    if ("children" in child && Array.isArray(child.children)) {
       // Recurse into nested children, accumulating text into the shared `value` array.
       // The return value is ignored here because accumulation happens via in-place mutation.
       getHeadingTextValue(child.children, value);

package/src/utils/mdx/plugins/types.ts

@@ -0,0 +1,4 @@
+export type TextNode = {
+  type: "text";
+  value: string;
+};

package/src/utils/mdx/plugins/utils.ts

@@ -1,4 +1,5 @@
 import slugify from "slugify";
+import { TextNode } from "./types";
 
 /**
  * Returns node ID, ensuring uniqueness.
@@ -17,6 +18,17 @@ export function generateUniqueId(setOfIds: Set<string>, slug: string): string {
   return id;
 }
 
+/**
+ * Returns true if the node is a text node.
+ * @param node - Node.
+ * @returns true if the node is a text node.
+ */
+export function isTextNode<N extends { type: string; value?: string }>(
+  node: N,
+): node is N & TextNode {
+  return node.type === "text" && typeof node.value === "string";
+}
+
 /**
  * Slugify the heading text to generate an ID.
  * @param headingText - Heading text.

package/src/utils/mdx/staticGeneration/staticPaths.ts

@@ -9,10 +9,10 @@ import { resolveRelativeDirs } from "../files/resolveRelativeDirs";
  * @returns Array of path objects suitable for `getStaticPaths`.
  */
 export function buildStaticPaths(
-  relativeDirs: string[]
+  relativeDirs: string[],
 ): GetStaticPathsResult["paths"] {
   const slugByFilePaths = mapMDXSlugByFilePaths(
-    resolveRelativeDirs(relativeDirs)
+    resolveRelativeDirs(relativeDirs),
   );
   return [...slugByFilePaths].map(([, slug]) => ({ params: { slug } }));
 }

package/src/utils/mdx/staticGeneration/staticProps.ts

@@ -1,4 +1,3 @@
-import { SerializeOptions } from "next-mdx-remote/dist/types";
 import { serialize } from "next-mdx-remote/serialize";
 import { GetStaticPropsResult } from "next/types";
 import remarkGfm from "remark-gfm";
@@ -14,10 +13,10 @@ export async function buildStaticProps<F extends object, P extends object>(
   fileName: string | undefined,
   slug: string[] | undefined,
   frontmatterFn = (
-    frontmatter: FrontmatterProps<F> | undefined
+    frontmatter: FrontmatterProps<F> | undefined,
   ): FrontmatterProps<F> | undefined => frontmatter,
-  serializeOptions: SerializeOptions = {},
-  otherProps: P = {} as P
+  serializeOptions: Parameters<typeof serialize>[1] = {},
+  otherProps: P = {} as P,
 ): Promise<
   GetStaticPropsResult<StaticProps<FrontmatterProps<F>, P>> | undefined
 > {

package/src/utils/mdx/staticGeneration/types.ts

@@ -12,5 +12,5 @@ interface BaseStaticProps<F extends object> {
 
 export type StaticProps<
   F extends object,
-  P extends object
+  P extends object,
 > = BaseStaticProps<F> & P;

package/src/utils/mdx/staticGeneration/utils.ts

@@ -9,7 +9,7 @@ import { resolveRelativeDirs } from "../files/resolveRelativeDirs";
  */
 export function buildMDXFilePath(
   dirs: string[],
-  slug: string[] | undefined
+  slug: string[] | undefined,
 ): string | undefined {
   if (!slug) return;
   return resolveRelativeDirs(dirs.concat(slug)).concat(".mdx");
@@ -23,7 +23,7 @@ export function buildMDXFilePath(
  */
 export function buildMDXSlug(
   props: GetStaticPropsContext,
-  section?: string
+  section?: string,
 ): string[] | undefined {
   const slug = props.params?.slug;
   if (!slug || typeof slug === "string") return;

package/src/utils/parseJsonQueryParam.ts

@@ -13,7 +13,7 @@
  */
 export function parseJsonQueryParam<T = unknown>(
   param: string | string[] | undefined,
-  defaultValue?: T
+  defaultValue?: T,
 ): T | undefined {
   // Handle non-string parameters.
   if (typeof param !== "string") return defaultValue;

package/src/utils/replaceParameters.ts

@@ -14,7 +14,7 @@ export function replaceParameters(str: string, parameter: Parameter): string {
       const regex = new RegExp(`\\{${parameterKey}}`, "g");
       return acc.replace(regex, parameterValue);
     },
-    str
+    str,
   );
   if (/\{\w+}/.test(result)) {
     throw new Error(`URL still contains path parameters: ${result}`);

package/src/utils/stateToUrlQuery.ts

@@ -14,7 +14,7 @@ import { NextRouter } from "next/router";
  * @returns A query object compatible with NextRouter.
  */
 export function stateToUrlQuery<
-  S extends Record<string, string | unknown[] | undefined>
+  S extends Record<string, string | unknown[] | undefined>,
 >(state: S): NextRouter["query"] {
   const query: NextRouter["query"] = {};
 

package/src/utils/url.ts

@@ -10,7 +10,7 @@ export const convertUrlParams = (params: Record<string, string>): string => {
   // Delete any key which value is undefined. So the result string will not transform { key: undefined } into
   // 'key=undefined'
   Object.keys(params).forEach(
-    (key) => validParams[key] === undefined && delete validParams[key]
+    (key) => validParams[key] === undefined && delete validParams[key],
   );
   if (isSSR()) {
     // check if the operation is being executed on server side

package/src/viewModelBuilders/common/utils.ts

@@ -8,7 +8,7 @@ import { CategoryKeyLabel } from "./entities";
  */
 export function mapCategoryKeyLabel(
   CATEGORY_KEY: Record<string, string>,
-  CATEGORY_LABEL: Record<string, string>
+  CATEGORY_LABEL: Record<string, string>,
 ): CategoryKeyLabel {
   const categoryKeyLabel: CategoryKeyLabel = new Map();
   for (const [key, categoryKey] of Object.entries(CATEGORY_KEY)) {

package/src/views/ContentView/contentView.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
 import image from "images/logo.svg";
 import React from "react";
 import { NavBarHero } from "../../components/Layout/components/Nav/components/NavBarHero/navBarHero";

package/src/views/ContentView/contentView.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import { JSX, ReactNode } from "react";
 import { LayoutStyle } from "../../components/Layout/components/ContentLayout/common/entities";
 import { ContentLayout } from "../../components/Layout/components/ContentLayout/contentLayout";
 import { BaseComponentProps } from "../../components/types";

package/src/views/DataDictionaryView/dataDictionaryView.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { JSX } from "react";
 import { DataDictionary } from "../../components/DataDictionary/dataDictionary";
 import { useStateSyncManager } from "../../hooks/stateSyncManager/hook";
 import { DataDictionaryContext } from "../../providers/dataDictionary/context";

package/src/views/DataDictionaryView/utils.ts

@@ -13,7 +13,7 @@ import { DataDictionaryState } from "../../providers/dataDictionaryState/types";
  */
 export function buildStateSyncManagerContext(
   dataDictionaryState: DataDictionaryState,
-  dictionary: string
+  dictionary: string,
 ): StateSyncManagerContext {
   return {
     command: dataDictionaryState.meta?.command,

package/src/views/EntityDetailView/entityDetailView.tsx

@@ -1,6 +1,6 @@
 import Head from "next/head";
 import { useRouter } from "next/router";
-import React, { Fragment } from "react";
+import { JSX, Fragment } from "react";
 import { PARAMS_INDEX_UUID } from "../../common/constants";
 import { Tab, Tabs, TabValue } from "../../components/common/Tabs/tabs";
 import { ComponentCreator } from "../../components/ComponentCreator/ComponentCreator";
@@ -30,7 +30,7 @@ function getTabs(entity: EntityConfig): Tab[] {
       iconPosition,
       label,
       value: route,
-    })
+    }),
   );
 }
 

package/src/views/EntityExportMethodView/entityExportMethodView.tsx

@@ -1,6 +1,6 @@
 import { useRouter } from "next/router";
 import type { ParsedUrlQuery } from "querystring";
-import React from "react";
+import { JSX } from "react";
 import { EntityDetailViewProps } from "views/EntityDetailView/entityDetailView";
 import { PARAMS_INDEX_EXPORT_METHOD } from "../../common/constants";
 import { ComponentCreator } from "../../components/ComponentCreator/ComponentCreator";
@@ -11,7 +11,7 @@ import { useFetchEntity } from "../../hooks/useFetchEntity";
 import { useUpdateURLCatalogParams } from "../../hooks/useUpdateURLCatalogParam";
 
 export const EntityExportMethodView = (
-  props: EntityDetailViewProps
+  props: EntityDetailViewProps,
 ): JSX.Element => {
   // Update the catalog param if necessary.
   useUpdateURLCatalogParams();
@@ -53,7 +53,7 @@ export const EntityExportMethodView = (
  */
 function getExportMethodConfig(
   exportMethods: ExportMethodConfig[],
-  query: ParsedUrlQuery
+  query: ParsedUrlQuery,
 ): ExportMethodConfig | undefined {
   // Determine the selected export method from the URL.
   const exportMethodRoute = query.params?.[PARAMS_INDEX_EXPORT_METHOD];

package/src/views/EntityExportView/entityExportView.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { JSX } from "react";
 import { EntityDetailViewProps } from "views/EntityDetailView/entityDetailView";
 import { ComponentCreator } from "../../components/ComponentCreator/ComponentCreator";
 import { BackPageView } from "../../components/Layout/components/BackPage/backPageView";

package/src/views/ExploreView/exploreView.tsx

@@ -1,5 +1,5 @@
 import { Stack } from "@mui/material";
-import React, { useEffect, useMemo } from "react";
+import { JSX, useEffect, useMemo } from "react";
 import { AzulEntitiesStaticResponse } from "../../apis/azul/common/entities";
 import { track } from "../../common/analytics/analytics";
 import { EVENT_NAME, EVENT_PARAM } from "../../common/analytics/entities";
@@ -48,7 +48,7 @@ export const ExploreView = (props: ExploreViewProps): JSX.Element => {
   const { entityListType } = props;
   const categoryFilters = useMemo(
     () => buildCategoryFilters(categoryViews, categoryGroups),
-    [categoryGroups, categoryViews]
+    [categoryGroups, categoryViews],
   );
   const {
     enabled: filterSortEnabled,
@@ -83,7 +83,7 @@ export const ExploreView = (props: ExploreViewProps): JSX.Element => {
     selected: boolean,
     categorySection?: string,
     viewKind?: VIEW_KIND,
-    searchTerm?: string
+    searchTerm?: string,
   ): void => {
     const dispatchType =
       categoryKey === SELECT_CATEGORY_KEY.SAVED_FILTERS
@@ -182,7 +182,7 @@ export const ExploreView = (props: ExploreViewProps): JSX.Element => {
  */
 function buildCategoryFilters(
   categoryViews: CategoryView[],
-  categoryGroups?: CategoryGroup[]
+  categoryGroups?: CategoryGroup[],
 ): CategoryFilter[] {
   if (!categoryGroups) {
     return [{ categoryViews }];

package/src/views/ExploreView/hooks/UseUpdateFilterSort/hook.ts

@@ -13,7 +13,7 @@ export const useUpdateFilterSort = (): UseUpdateFilterSort => {
 
   const onFilterSortChange = useCallback(
     (filterSort: FILTER_SORT) => exploreDispatch(updateFilterSort(filterSort)),
-    [exploreDispatch]
+    [exploreDispatch],
   );
 
   return { enabled, filterSort, onFilterSortChange };

package/src/views/ExploreView/utils.ts

@@ -15,7 +15,7 @@ import { ExploreView } from "./exploreView";
  */
 export function buildStateSyncManagerContext(
   exploreState: ExploreState,
-  pageProps: ComponentProps<typeof ExploreView>
+  pageProps: ComponentProps<typeof ExploreView>,
 ): StateSyncManagerContext {
   return {
     command: exploreState.meta?.command,

package/src/views/ExportMethodView/exportMethodView.tsx

@@ -1,5 +1,5 @@
 import { useRouter } from "next/router";
-import React from "react";
+import { JSX } from "react";
 import { ComponentCreator } from "../../components/ComponentCreator/ComponentCreator";
 import { BackPageView } from "../../components/Layout/components/BackPage/backPageView";
 import { ExportMethodConfig } from "../../config/entities";
@@ -36,7 +36,7 @@ export const ExportMethodView = (): JSX.Element => {
  */
 function getExportMethodConfig(
   exportMethods: ExportMethodConfig[],
-  pathname: string
+  pathname: string,
 ): ExportMethodConfig | undefined {
   return exportMethods.find(({ route }) => route === pathname);
 }

package/src/views/ExportView/exportView.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { JSX } from "react";
 import { AzulEntityStaticResponse } from "../../apis/azul/common/entities";
 import { ComponentCreator } from "../../components/ComponentCreator/ComponentCreator";
 import { BackPageView } from "../../components/Layout/components/BackPage/backPageView";