open-mui-extensions

A collection of reusable utilities and components designed to extend Material-UI (MUI) in React projects using TypeScript. This library offers styled components, utility functions, and custom React components that simplify common patterns like responsive design, virtualized tables, and confirmation dialogs.

Installation

npm install @thestartupfactory/open-mui-extensions

Features

Styling Utilities

This package includes styled MUI components to enhance the design and usability of your React applications, for example:

import { SmallText } from 'your-package-name';

<SmallText>Sample small text content</SmallText>;

Reusable components

This library also exports fully functional React components designed to handle complex UI interactions, like:

• InfiniteTable: A virtualized table with infinite scrolling, sortable columns, and integration with React Query for data fetching. Ideal for rendering large datasets efficiently.

import { InfiniteTable } from 'your-package-name';

const fetchData = async (page: number, pageSize: number, sorting: any) => {
  // Fetch data logic
};

const columns = [
  /* your column definitions */
];

<InfiniteTable
  columnDefs={columns}
  fetchData={fetchData}
  queryKey="my-table-data"
/>;

• ConfirmDialog: A customizable confirmation dialog with action buttons. Useful for asking users to confirm important actions like deletions.

import { ConfirmDialog } from 'your-package-name';

<ConfirmDialog
  open={open}
  text="Are you sure you want to proceed?"
  onConfirm={handleConfirm}
  onClose={handleClose}
  title="Confirmation"
/>;

Example

import React, { useState } from 'react';
import { ConfirmDialog } from 'your-package-name';

const MyComponent = () => {
  const [open, setOpen] = useState(false);

  const handleConfirm = () => {
    console.log('Confirmed!');
    setOpen(false);
  };

  return (
    <>
      <button onClick={() => setOpen(true)}>Delete</button>
      <ConfirmDialog
        open={open}
        text="Are you sure you want to delete this item?"
        onConfirm={handleConfirm}
        onClose={() => setOpen(false)}
        actionText="Delete"
        cancelText="Cancel"
      />
    </>
  );
};

export default MyComponent;

Additional Utilities

This package includes more components, for a full list of available utilities, refer to the source code.

Troubleshooting

When utilizing hooks from this library, such as useInfiniteTableQuery, which import and use hooks from @tanstack/react-query, you may encounter the following error:

Error
No QueryClient set, use QueryClientProvider to set one
Call Stack
 Object.useQueryClient
  vendor.js:139213:11
 Object.useBaseQuery
  vendor.js:139552:43
 useInfiniteQuery
  vendor.js:139623:23
 useInfiniteTableQuery
  vendor.js:154332:113
 useFetchContainers
  main.js:8933:110
 ContainerList
  main.js:8676:17
 renderWithHooks
  vendor.js:275884:18
 mountIndeterminateComponent
  vendor.js:279648:13
 beginWork
  vendor.js:281161:16
 HTMLUnknownElement.callCallback
  vendor.js:263743:14

While not a perfect solution there are two workarounds that can be used to solve this, and both involve setting the path for @tanstack/react-query to ensure it uses the node_modules.

Why You Need to Adjust Your Configuration

The issue often arises due to how the @tanstack/react-query package is resolved in your project, combined with the way webpack builds libraries that use @tanstack/react-query hooks. To ensure that your application consistently recognizes the correct version of the library from your node_modules, you may need to adjust your configuration settings. This can help avoid conflicts, particularly in monorepo setups or when multiple versions of a library might be in use.

Webpack config

You can modify your webpack.config.js to explicitly define the path to @tanstack/react-query. This helps ensure that your application uses the correct version of the package, preventing version mismatches. Here's how to do it:

const { composePlugins } = require('@nx/webpack');
const path = require('path');

module.exports = composePlugins(
  (config, { options, context }) => {
    // ... other config settings

    if (options.isServer) {
      config.externals = ['@tanstack/react-query', ...config.externals];
    }

    const reactQuery = path.resolve(require.resolve('@tanstack/react-query'));

    config.resolve.alias['@tanstack/react-query'] = reactQuery;

    return config;
  },
);

What This Does:

Externals Setting: In server builds, this prevents @tanstack/react-query from being bundled, allowing it to be resolved directly from node_modules.

Alias Definition: This explicitly tells Webpack to use the specified path for @tanstack/react-query, ensuring that the correct version is referenced.

Tsconfig

Another approach is to set up the correct path resolution in your tsconfig.json. This ensures that TypeScript recognizes the package correctly, which can help eliminate related issues:

{
  "compilerOptions": {
    "paths": {
      "@tanstack/react-query": ["./node_modules/@tanstack/react-query"],
    }
  },
}

What This Does: By defining the path, TypeScript will resolve @tanstack/react-query to the correct directory in your node_modules. This can prevent import errors and ensure your application compiles without issues.

Conclusion

By implementing these changes, you can effectively resolve issues related to the QueryClient setup in your project. This ensures that the correct version of @tanstack/react-query is utilized, enabling your hooks to function as intended. If you continue to experience problems, double-check that you have properly wrapped your application in a QueryClientProvider.