Don't misuse render prop pattern

Author: axelboc

apps/demo/package.json

@@ -26,7 +26,7 @@
     "wouter": "3.3.5"
   },
   "devDependencies": {
-    "@esrf/eslint-config": "1.0.3",
+    "@esrf/eslint-config": "1.0.4",
     "@types/node": "^22.12.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",

apps/storybook/package.json

@@ -28,7 +28,7 @@
     "three": "0.172.0"
   },
   "devDependencies": {
-    "@esrf/eslint-config": "1.0.3",
+    "@esrf/eslint-config": "1.0.4",
     "@storybook/addon-docs": "8.5.0",
     "@storybook/addon-essentials": "8.5.0",
     "@storybook/addon-links": "8.5.0",

apps/storybook/src/Toolbar.stories.tsx

@@ -80,14 +80,14 @@ export const Default = {
 
           <ToggleBtn
             label="Grid"
-            icon={MdGridOn}
+            Icon={MdGridOn}
             value={showGrid}
             onToggle={toggleGrid}
           />
           <ToggleBtn
             label="Test"
             iconOnly
-            icon={FiTarget}
+            Icon={FiTarget}
             value={withTest}
             onToggle={toggleTest}
           />

package.json

@@ -40,7 +40,7 @@
     "postversion": "git push && git push --tags"
   },
   "devDependencies": {
-    "@esrf/eslint-config": "1.0.3",
+    "@esrf/eslint-config": "1.0.4",
     "@simonsmith/cypress-image-snapshot": "9.1.0",
     "@testing-library/cypress": "10.0.2",
     "@types/node": "^22.12.0",

packages/app/package.json

@@ -64,7 +64,7 @@
     "zustand": "5.0.3"
   },
   "devDependencies": {
-    "@esrf/eslint-config": "1.0.3",
+    "@esrf/eslint-config": "1.0.4",
     "@h5web/shared": "workspace:*",
     "@rollup/plugin-alias": "5.1.0",
     "@testing-library/dom": "10.4.0",

packages/app/src/breadcrumbs/BreadcrumbsBar.tsx

@@ -43,7 +43,7 @@ function BreadcrumbsBar(props: Props) {
     <div className={styles.bar}>
       <ToggleBtn
         label="Toggle sidebar"
-        icon={FiSidebar}
+        Icon={FiSidebar}
         iconOnly
         value={isSidebarOpen}
         onToggle={onToggleSidebar}
@@ -71,7 +71,7 @@ function BreadcrumbsBar(props: Props) {
 
       {document.fullscreenEnabled && (
         <Btn
-          icon={isFullscreen ? FiMinimize : FiMaximize}
+          Icon={isFullscreen ? FiMinimize : FiMaximize}
           iconOnly
           label="Go full screen"
           onClick={() => {

packages/app/src/vis-packs/VisBoundary.tsx

@@ -18,11 +18,10 @@ function VisBoundary(props: Props) {
 
   return (
     <ErrorBoundary
-      resetKeys={[resetKey]}
-      // eslint-disable-next-line react/no-unstable-nested-components
       fallbackRender={(args) => (
         <ErrorFallback className={visualizerStyles.vis} {...args} />
       )}
+      resetKeys={[resetKey]}
       onError={() => valuesStore.evictErrors()}
     >
       <Suspense fallback={<ValueLoader isSlice={isSlice} />}>

packages/app/src/vis-packs/core/complex/ComplexLineToolbar.tsx

@@ -73,7 +73,7 @@ function ComplexLineToolbar(props: Props) {
 
       <ToggleBtn
         label="Grid"
-        icon={MdGridOn}
+        Icon={MdGridOn}
         value={showGrid}
         onToggle={toggleGrid}
       />

packages/app/src/vis-packs/core/complex/ComplexToolbar.tsx

@@ -79,13 +79,13 @@ function ComplexToolbar(props: Props) {
 
       <ToggleBtn
         label="Keep ratio"
-        icon={MdAspectRatio}
+        Icon={MdAspectRatio}
         value={keepRatio}
         onToggle={toggleKeepRatio}
       />
       <ToggleBtn
         label="Grid"
-        icon={MdGridOn}
+        Icon={MdGridOn}
         value={showGrid}
         onToggle={toggleGrid}
       />

packages/app/src/vis-packs/core/heatmap/HeatmapToolbar.tsx

@@ -79,28 +79,28 @@ function HeatmapToolbar(props: Props) {
       <ToggleBtn
         label="X"
         aria-label="Flip X"
-        icon={MdSwapHoriz}
+        Icon={MdSwapHoriz}
         value={flipXAxis}
         onToggle={toggleXAxisFlip}
       />
       <ToggleBtn
         label="Y"
         aria-label="Flip Y"
-        icon={MdSwapVert}
+        Icon={MdSwapVert}
         value={flipYAxis}
         onToggle={toggleYAxisFlip}
       />
 
       <ToggleBtn
         label="Keep ratio"
-        icon={MdAspectRatio}
+        Icon={MdAspectRatio}
         value={keepRatio}
         onToggle={toggleKeepRatio}
       />
 
       <ToggleBtn
         label="Grid"
-        icon={MdGridOn}
+        Icon={MdGridOn}
         value={showGrid}
         onToggle={toggleGrid}
       />

packages/app/src/vis-packs/core/line/ErrorsIcon.tsx

@@ -0,0 +1,14 @@
+import { type IconBaseProps } from 'react-icons';
+import { FiItalic } from 'react-icons/fi';
+
+function ErrorsIcon(props: IconBaseProps) {
+  return (
+    <FiItalic
+      transform="skewX(20)"
+      style={{ marginLeft: '-0.25em', marginRight: '0.0625rem' }}
+      {...props}
+    />
+  );
+}
+
+export default ErrorsIcon;

packages/app/src/vis-packs/core/line/LineToolbar.tsx

@@ -10,11 +10,11 @@ import {
 } from '@h5web/lib';
 import { type Domain, type ExportEntry } from '@h5web/shared/vis-models';
 import { AXIS_SCALE_TYPES } from '@h5web/shared/vis-utils';
-import { FiItalic } from 'react-icons/fi';
 import { MdGridOn } from 'react-icons/md';
 
 import { INTERACTIONS_WITH_AXIAL_ZOOM } from '../utils';
 import { type LineConfig } from './config';
+import ErrorsIcon from './ErrorsIcon';
 
 interface Props {
   dataDomain: Domain;
@@ -69,22 +69,15 @@ function LineToolbar(props: Props) {
 
       <ToggleBtn
         label="Errors"
-        // eslint-disable-next-line react/no-unstable-nested-components
-        icon={(iconProps) => (
-          <FiItalic
-            transform="skewX(20)"
-            style={{ marginLeft: '-0.25em', marginRight: '0.0625rem' }}
-            {...iconProps}
-          />
-        )}
+        Icon={ErrorsIcon}
         value={!disableErrors && showErrors}
         onToggle={toggleErrors}
         disabled={disableErrors}
       />
 
       <ToggleBtn
         label="Grid"
-        icon={MdGridOn}
+        Icon={MdGridOn}
         value={showGrid}
         onToggle={toggleGrid}
       />

packages/app/src/vis-packs/core/matrix/MatrixToolbar.tsx

@@ -43,7 +43,7 @@ function MatrixToolbar(props: Props) {
 
       <ToggleBtn
         label="Freeze indices"
-        icon={FiAnchor}
+        Icon={FiAnchor}
         value={sticky}
         onToggle={toggleSticky}
       />

packages/app/src/vis-packs/core/raw/RawToolbar.tsx

@@ -18,7 +18,7 @@ function RawToolbar(props: Props) {
     <Toolbar>
       <ToggleBtn
         label="Fit image"
-        icon={MdOutlineFitScreen}
+        Icon={MdOutlineFitScreen}
         value={fitImage}
         disabled={!isImage}
         onToggle={toggleFitImage}

packages/app/src/vis-packs/core/rgb/RgbToolbar.tsx

@@ -53,28 +53,28 @@ function RgbToolbar(props: Props) {
       <ToggleBtn
         label="X"
         aria-label="Flip X"
-        icon={MdSwapHoriz}
+        Icon={MdSwapHoriz}
         value={flipXAxis}
         onToggle={toggleXAxisFlip}
       />
       <ToggleBtn
         label="Y"
         aria-label="Flip Y"
-        icon={MdSwapVert}
+        Icon={MdSwapVert}
         value={flipYAxis}
         onToggle={toggleYAxisFlip}
       />
 
       <ToggleBtn
         label="Keep ratio"
-        icon={MdAspectRatio}
+        Icon={MdAspectRatio}
         value={keepRatio}
         onToggle={toggleKeepRatio}
       />
 
       <ToggleBtn
         label="Grid"
-        icon={MdGridOn}
+        Icon={MdGridOn}
         value={showGrid}
         onToggle={toggleGrid}
       />

packages/app/src/vis-packs/core/scatter/ScatterToolbar.tsx

@@ -81,7 +81,7 @@ function ScatterToolbar(props: Props) {
 
       <ToggleBtn
         label="Grid"
-        icon={MdGridOn}
+        Icon={MdGridOn}
         value={showGrid}
         onToggle={toggleGrid}
       />

packages/h5wasm/package.json

@@ -51,7 +51,7 @@
     "nanoid": "5.0.9"
   },
   "devDependencies": {
-    "@esrf/eslint-config": "1.0.3",
+    "@esrf/eslint-config": "1.0.4",
     "@h5web/app": "workspace:*",
     "@h5web/shared": "workspace:*",
     "@rollup/plugin-alias": "5.1.0",

packages/lib/package.json

@@ -75,7 +75,7 @@
     "zustand": "5.0.3"
   },
   "devDependencies": {
-    "@esrf/eslint-config": "1.0.3",
+    "@esrf/eslint-config": "1.0.4",
     "@h5web/shared": "workspace:*",
     "@react-three/fiber": "8.17.12",
     "@rollup/plugin-alias": "5.1.0",

packages/lib/src/toolbar/OverflowMenu.tsx

@@ -58,7 +58,7 @@ function OverflowMenu(props: PropsWithChildren<Props>) {
         ref={refs.setReference}
         id={referenceId}
         label="More controls"
-        icon={FiMenu}
+        Icon={FiMenu}
         iconOnly
         aria-haspopup="dialog"
         aria-expanded={isOpen}

packages/lib/src/toolbar/controls/Btn.tsx

@@ -1,16 +1,11 @@
-import {
-  type ComponentType,
-  forwardRef,
-  type HTMLAttributes,
-  type SVGAttributes,
-} from 'react';
+import { type ComponentType, forwardRef, type HTMLAttributes } from 'react';
 import { MdArrowDropDown } from 'react-icons/md';
 
 import styles from '../Toolbar.module.css';
 
 interface Props extends HTMLAttributes<HTMLButtonElement> {
   label: string;
-  icon?: ComponentType<SVGAttributes<SVGElement>>;
+  Icon?: ComponentType<{ className: string }>;
   iconOnly?: boolean;
   small?: boolean;
   raised?: boolean;
@@ -21,7 +16,7 @@ interface Props extends HTMLAttributes<HTMLButtonElement> {
 const Btn = forwardRef<HTMLButtonElement, Props>((props, ref) => {
   const {
     label,
-    icon: Icon,
+    Icon,
     iconOnly,
     small,
     raised,

packages/lib/src/toolbar/controls/CellWidthInput.tsx

@@ -63,7 +63,7 @@ function CellWidthInput(props: Props) {
 
       <Btn
         label="Reset"
-        icon={FiRotateCw}
+        Icon={FiRotateCw}
         iconOnly
         small
         disabled={!hasValue}

packages/lib/src/toolbar/controls/ColorMapSelector/ColorMapSelector.tsx

@@ -34,7 +34,7 @@ function ColorMapSelector(props: Props) {
       <ToggleBtn
         small
         label="Invert"
-        icon={FiShuffle}
+        Icon={FiShuffle}
         value={invert}
         onToggle={onInversionChange}
       />

packages/lib/src/toolbar/controls/DomainWidget/DomainWidget.tsx

@@ -99,7 +99,7 @@ function DomainWidget(props: Props) {
           label="Edit domain"
           aria-expanded={hovered || isEditing}
           aria-controls={POPUP_ID}
-          icon={FiEdit3}
+          Icon={FiEdit3}
           value={isEditing}
           disabled={disabled}
           onToggle={() => toggleEditing(!isEditing)}

packages/lib/src/toolbar/controls/ExportMenu.tsx

@@ -47,7 +47,7 @@ function ExportMenu(props: Props) {
         ref={refs.setReference}
         id={referenceId}
         label={`Export${isSlice ? ' slice' : ''}`}
-        icon={FiDownload}
+        Icon={FiDownload}
         withArrow
         disabled={entries.length === 0}
         aria-haspopup="menu"

packages/lib/src/toolbar/controls/InteractionHelp.tsx

@@ -47,7 +47,7 @@ function InteractionHelp(props: Props) {
         ref={refs.setReference}
         id={referenceId}
         label="Show help"
-        icon={FiHelpCircle}
+        Icon={FiHelpCircle}
         iconOnly
         aria-haspopup="dialog"
         aria-expanded={isOpen}

packages/shared/package.json

@@ -54,7 +54,7 @@
     }
   },
   "devDependencies": {
-    "@esrf/eslint-config": "1.0.3",
+    "@esrf/eslint-config": "1.0.4",
     "@types/d3-array": "~3.2.1",
     "@types/d3-format": "~3.0.4",
     "@types/ndarray": "~1.0.14",