chore: review

Author: pascalsaussier-edifice

apps/docs/.storybook/main.ts

@@ -1,5 +1,5 @@
 import type { StorybookConfig } from '@storybook/react-vite';
-import { dirname, join, resolve } from 'path';
+import { dirname, resolve } from 'path';
 import { fileURLToPath } from 'url';
 
 const config: StorybookConfig = {

packages/react/src/components/Flex/Flex.tsx

@@ -39,11 +39,16 @@ const Flex = forwardRef<HTMLElement, FlexProps>(
       className,
     );
 
-    // Cast needed for polymorphic component pattern - props are typed via FlexProps
-    const Element = Component as React.FC<Record<string, unknown>>;
+    // Polymorphic component: ElementType resolves props to `never` in JSX.
+    // External API is typed via FlexProps, so the internal cast is safe.
+    const Element = Component as React.ElementType;
 
     return (
-      <Element ref={ref} className={classes} {...restProps}>
+      <Element
+        ref={ref as React.Ref<unknown>}
+        className={classes}
+        {...restProps}
+      >
         {children}
       </Element>
     );

packages/react/src/components/Grid/Grid.tsx

@@ -67,8 +67,9 @@ export const Column = ({
   as,
   ...restProps
 }: GridColProps) => {
-  // Cast needed for polymorphic component pattern - props are typed via GridColProps
-  const Component = (as || 'div') as React.FC<Record<string, unknown>>;
+  // Polymorphic component: ElementType resolves props to `never` in JSX.
+  // External API is typed via GridColProps, so the internal cast is safe.
+  const Component = (as || 'div') as React.ElementType;
   const classes = clsx(
     {
       [`g-col-${sm}`]: sm,

packages/react/src/modules/multimedia/ImageEditor/components/ImageEditor.tsx

@@ -55,37 +55,12 @@ const ImageEditor = ({
   >(undefined);
   // Whether we are saving or not
   const [isSaving, setSaving] = useState(false);
-  // Store the alt text modofied by the input text
+  // Store the alt text modified by the input text
   const [altText, setAltText] = useState(altTextParam ?? '');
-  // Store the legend text modofied by the input text
+  // Store the legend text modified by the input text
   const [legend, setLegend] = useState(legendParam ?? '');
   // Whether the image has been edited or the text has been changed
   const [dirty, setDirty] = useState<boolean>(false);
-  // PIXI app ref for cleanup
-  const appRef = useRef<PIXI.Application | null>(null);
-
-  // Callback ref: initializes PIXI when the container is mounted in the DOM
-  const containerRef = useCallback((node: HTMLDivElement | null) => {
-    if (node && !appRef.current) {
-      const app = new PIXI.Application();
-      appRef.current = app;
-      app
-        .init({
-          backgroundAlpha: 0,
-          resolution: 1,
-          preserveDrawingBuffer: true,
-        })
-        .then(() => {
-          node.appendChild(app.canvas);
-          setApplication(app);
-        });
-    }
-    if (!node && appRef.current) {
-      appRef.current.destroy(true);
-      appRef.current = null;
-    }
-  }, []);
-
   // Load Image Editor action
   const {
     toBlob,
@@ -103,6 +78,42 @@ const ImageEditor = ({
   } = useImageEditor({
     imageSrc,
   });
+
+  // PIXI app ref for cleanup
+  const appRef = useRef<PIXI.Application | null>(null);
+
+  // Callback ref: initializes PIXI when the container is mounted in the DOM
+  const containerRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      if (node && !appRef.current) {
+        const app = new PIXI.Application();
+        appRef.current = app;
+        app
+          .init({
+            backgroundAlpha: 0,
+            resolution: 1,
+            preserveDrawingBuffer: true,
+          })
+          .then(() => {
+            // Guard against unmount during async init
+            if (appRef.current !== app) return;
+            node.appendChild(app.canvas);
+            setApplication(app);
+          })
+          .catch(() => {
+            // Init failed — clean up if still referenced
+            if (appRef.current === app) {
+              appRef.current = null;
+            }
+          });
+      }
+      if (!node && appRef.current) {
+        appRef.current.destroy(true);
+        appRef.current = null;
+      }
+    },
+    [setApplication],
+  );
   // A function to remove all opened controllers and backup changes if needed
   const stopAll = () => {
     stopBlur();
@@ -181,7 +192,7 @@ const ImageEditor = ({
               ref={containerRef}
               className="d-flex justify-content-center w-100"
             />
-            {!!loading && (
+            {loading && (
               <div className="position-absolute top-0 start-0 bottom-0 end-0 m-10 d-flex align-items-center justify-content-center bg-black opacity-25">
                 <LoadingScreen />
               </div>

packages/react/src/modules/multimedia/ImageEditor/effects/blur.ts

@@ -62,17 +62,17 @@ function drawBlurListener(
       // Search for sprite
       const child = application.stage.getChildByName(spriteName);
       const scale = getApplicationScale(application);
-      if (child === undefined || child === null) return;
+      if (!child) return;
       // Create a sprite by copying texture and apply blurFilter
       const newSprite = new PIXI.Sprite((child as PIXI.Sprite).texture);
       // Apply blur filter to the new sprite, quality for big image (fix lag issue)
 
       newSprite.filters = [
-        new PIXI.BlurFilter(
-          8, // PIXI Default value for strength of the blur effect
-          (Math.min(Math.round(4 * scale)), 4), // Quality of the blur effect depending on the scale (4 is the PIXI default value)
-          Math.min(scale, 1), // Resolution of the blur effect depending on the scale
-        ),
+        new PIXI.BlurFilter({
+          strength: 8,
+          quality: Math.min(Math.round(4 * scale), 4),
+          resolution: Math.min(scale, 1),
+        }),
       ];
       newSprite.width = (child as PIXI.Sprite).width;
       newSprite.height = (child as PIXI.Sprite).height;

packages/react/src/modules/multimedia/ImageEditor/effects/crop.ts

@@ -59,7 +59,7 @@ function drawBackground(
   const sprite = application.stage.getChildByName(
     spriteName,
   ) as PIXI.Sprite | null;
-  if (sprite === null || sprite === undefined) return;
+  if (!sprite) return;
   const spriteBounds = sprite.getBounds();
   // Clone the stage
   const stageTexture = application.renderer.generateTexture(application.stage);
@@ -156,13 +156,13 @@ function refreshCorners(application: PIXI.Application): void {
     CROP_MASK_NAME,
     true,
   ) as PIXI.Graphics | null;
-  if (mask === undefined || mask === null) return;
+  if (!mask) return;
   CORNERS.forEach((cornerType) => {
     const corner = application.stage.getChildByName(
       getCornerName(cornerType),
       true,
     );
-    if (corner === undefined || corner === null) return;
+    if (!corner) return;
     const position = computeCornerPosition(cornerType, {
       height: mask.height,
       width: mask.width,
@@ -206,14 +206,7 @@ function drawCorner(
   const sprite = application.stage.getChildByName(
     spriteName,
   ) as PIXI.Sprite | null;
-  if (
-    sprite === null ||
-    sprite === undefined ||
-    background === null ||
-    background === undefined ||
-    mask === undefined ||
-    mask === null
-  ) {
+  if (!sprite || !background || !mask) {
     return;
   }
   // Compute corner position
@@ -234,27 +227,28 @@ function drawCorner(
   corner.interactive = true;
   // Add mouse event move => on corner move redraw mask
   let enable = false;
-  application.stage.on('pointermove', (event: PIXI.FederatedMouseEvent) => {
-    if (enable === false) return;
+  const handlePointerMove = (event: PIXI.FederatedMouseEvent) => {
+    if (!enable) return;
     const localPosition = background.toLocal(event.global);
     corner.position.x = localPosition.x;
     corner.position.y = localPosition.y;
     moveMask(application, cornerType, localPosition);
-  });
+  };
+  application.stage.on('pointermove', handlePointerMove);
   // Add mouse down event => on pointer down start moving mask
   const handlePointerDown = () => {
     enable = true;
   };
   corner.on('pointerdown', handlePointerDown);
-  // Add mouse up event => on pointer down stop moving mask
+  // Add mouse up event => on pointer up stop moving mask
   const handlePointerUp = () => {
     enable = false;
   };
   globalThis.addEventListener('pointerup', handlePointerUp);
-  // Remove listeners when corner destroyed
+  // Remove all listeners when corner destroyed
   corner.once('destroyed', () => {
-    // cancel listener
     corner.off('pointerdown');
+    application.stage.off('pointermove', handlePointerMove);
     globalThis.removeEventListener('pointerup', handlePointerUp);
   });
   // Add corner
@@ -277,7 +271,7 @@ function moveMask(
     CROP_MASK_NAME,
     true,
   ) as PIXI.Graphics | null;
-  if (mask === undefined || mask === null) return;
+  if (!mask) return;
   const right = mask.position.x + mask.width;
   const bottom = mask.position.y + mask.height;
   switch (cornerType) {
@@ -354,8 +348,8 @@ export function save(application: PIXI.Application): PIXI.Sprite | undefined {
     CROP_MASK_NAME,
     true,
   ) as PIXI.Graphics | null;
-  // Stop if mask does not exists
-  if (mask === undefined || mask === null) return;
+  // Stop if mask does not exist
+  if (!mask) return;
   // Remove controls before cloning stage
   stop(application);
   // Clone stage

packages/react/src/modules/multimedia/ImageEditor/effects/misc.ts

@@ -60,6 +60,7 @@ export function updateImageFromBlob(
   image.src = imageUrl;
   return new Promise<PIXI.Sprite | null>((resolve) => {
     image.onload = async () => {
+      URL.revokeObjectURL(imageUrl);
       await updateImage(application, {
         spriteName,
         imgDatasource: image,
@@ -170,7 +171,7 @@ export function autoResize(
   sprite: PIXI.Sprite,
 ): void {
   // Get parent html object
-  const parent = application.view.parentNode as HTMLElement | undefined;
+  const parent = application.canvas.parentNode as HTMLElement | undefined;
   const maxMobileWidth = window.innerWidth - MODAL_HORIZONTAL_PADDING;
   const parentWidth = Math.max(parent?.offsetWidth ?? 0, MIN_WIDTH);
   const newSize = constraintSize(
@@ -193,9 +194,9 @@ export function autoResize(
   const { height: newHeight, width: newWidth } = newSize;
 
   // Anchor the sprite to the middle (for rotation)
-  if (application.view?.style) {
-    application.view.style.width = `${newWidth}px`;
-    application.view.style.height = `${newHeight}px`;
+  if (application.canvas?.style) {
+    application.canvas.style.width = `${newWidth}px`;
+    application.canvas.style.height = `${newHeight}px`;
   }
 }
 
@@ -243,8 +244,8 @@ export function constraintSize(
  */
 export function saveAsBlob(application: PIXI.Application): Promise<Blob> {
   return new Promise<Blob>((resolve, reject) => {
-    if (application?.view?.toBlob) {
-      application.view.toBlob(
+    if (application?.canvas?.toBlob) {
+      application.canvas.toBlob(
         (blob) => {
           blob ? resolve(blob) : reject('EXTRACT_FAILED');
         },
@@ -265,7 +266,7 @@ export function saveAsBlob(application: PIXI.Application): Promise<Blob> {
 export function saveAsDataURL(
   application: PIXI.Application,
 ): string | undefined {
-  return application.view.toDataURL?.();
+  return application.canvas.toDataURL?.();
 }
 
 /**
@@ -275,17 +276,18 @@ export function saveAsDataURL(
  * @returns The scale percentage.
  */
 export function getApplicationScale(application: PIXI.Application) {
-  if (application.view.getBoundingClientRect) {
+  if (application.canvas.getBoundingClientRect) {
     return (
-      application.view.getBoundingClientRect()!.width / application.view.width
+      application.canvas.getBoundingClientRect()!.width /
+      application.canvas.width
     );
   }
   return 1;
 }
 
 export function toBlob(application: PIXI.Application) {
   return new Promise<Blob>((resolve, reject) => {
-    application.view.toBlob?.(
+    application.canvas.toBlob?.(
       (blob) => {
         if (blob) {
           resolve(blob);

packages/react/src/modules/multimedia/ImageEditor/effects/resize.ts

@@ -94,7 +94,7 @@ function resizeContainer(
     spriteName,
     true,
   ) as PIXI.Sprite | null;
-  if (sprite === undefined || sprite === null) return;
+  if (!sprite) return;
   // Check whether sprite has been rotated
   const isRotated = sprite.rotation % Math.PI !== 0;
   // If sprite is rotated a multiple of 90°=>width and height are swapped
@@ -172,13 +172,7 @@ function drawCorner(
     CONTROL_NAME,
     true,
   ) as PIXI.Graphics | null;
-  if (
-    sprite === null ||
-    sprite === undefined ||
-    container === null ||
-    container === undefined
-  )
-    return;
+  if (!sprite || !container) return;
   // Compute position of the container
   const position = computeCornerPosition(cornerType, container);
   // Draw and add the corner
@@ -192,32 +186,33 @@ function drawCorner(
   // Add listener to redraw container while moving corner
   corner.interactive = true;
   let enable = false;
-  application.stage.on('pointermove', (event: PIXI.FederatedMouseEvent) => {
-    if (enable === false) return;
+  const handlePointerMove = (event: PIXI.FederatedMouseEvent) => {
+    if (!enable) return;
     const localPosition = application.stage.toLocal(event.global);
     resizeContainer(application, {
       cornerType,
       position: localPosition,
       container,
       spriteName,
     });
-  });
+  };
+  application.stage.on('pointermove', handlePointerMove);
+  // Enable tracking on pointerdown
+  const handlePointerDown = () => {
+    enable = true;
+  };
+  corner.on('pointerdown', handlePointerDown);
   // stop tracking on pointer up
   const handlePointerUp = () => {
     enable = false;
   };
   globalThis.addEventListener('pointerup', handlePointerUp);
-  // stop listening pointerup when corner is destroyed
+  // Remove all listeners when corner is destroyed
   corner.once('destroyed', () => {
-    // cancel listener
     corner.off('pointerdown');
+    application.stage.off('pointermove', handlePointerMove);
     globalThis.removeEventListener('pointerup', handlePointerUp);
   });
-  // Enable tracking on pointerdown
-  const handlePointerDown = () => {
-    enable = true;
-  };
-  corner.on('pointerdown', handlePointerDown);
   // add to sprite
   container.addChild(corner);
 }
@@ -238,7 +233,7 @@ function drawContainer(
     spriteName,
     true,
   ) as PIXI.Sprite | null;
-  if (sprite === null || sprite === undefined) return;
+  if (!sprite) return;
   // Clone the stage
   const stageTexture = application.renderer.generateTexture(application.stage);
   const clonedStage = new PIXI.Sprite(stageTexture);