feat: Handle transform arrays (#37)

Closes CLIF-2705

Author: m-hall

.changeset/weak-cups-attack.md

@@ -0,0 +1,6 @@
+---
+"@plextv/react-lightning-plugin-css-transform": patch
+"@plextv/react-lightning-example": patch
+---
+
+Allow transforms to be given as arrays

apps/react-lightning-example/package.json

@@ -26,6 +26,7 @@
     "@plextv/react-lightning": "workspace:*",
     "@plextv/react-lightning-components": "workspace:*",
     "@plextv/react-lightning-plugin-flexbox": "workspace:*",
+    "@plextv/react-lightning-plugin-css-transform": "workspace:*",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-router-dom": "7.1.5",

apps/react-lightning-example/src/index.tsx

@@ -4,6 +4,7 @@ import {
   type RenderOptions,
   createRoot as createRootLng,
 } from '@plextv/react-lightning';
+import { plugin as cssTransformPlugin } from '@plextv/react-lightning-plugin-css-transform';
 import { plugin as flexPlugin } from '@plextv/react-lightning-plugin-flexbox';
 import { createRoot as createRootDom } from 'react-dom/client';
 import { RouterProvider, createBrowserRouter } from 'react-router-dom';
@@ -16,6 +17,7 @@ import { Page60 } from './pages/Page60';
 import { PosterPage } from './pages/PosterPage';
 import { ShaderPage } from './pages/ShaderPage';
 import { TexturePage } from './pages/TexturePage';
+import { TransformsPage } from './pages/TransformsPage';
 import { MyCustomShader } from './shaders/MyCustomShader';
 import { MyCustomTexture } from './shaders/MyCustomTexture';
 import { NoiseEffect } from './shaders/NoiseEffect';
@@ -51,6 +53,10 @@ const router = createBrowserRouter([
     path: '/texture',
     element: <TexturePage />,
   },
+  {
+    path: '/transforms',
+    element: <TransformsPage />,
+  },
   {
     path: '/page60',
     element: <Page60 />,
@@ -77,7 +83,7 @@ const options: RenderOptions = {
     }),
   ],
   enableContextSpy: true,
-  plugins: [flexPlugin()],
+  plugins: [cssTransformPlugin(), flexPlugin()],
   effects: {
     Noise: NoiseEffect,
     StaticAlpha: StaticAlphaEffect,

apps/react-lightning-example/src/pages/TransformsPage.tsx

@@ -0,0 +1,56 @@
+import { Column, Row } from '@plextv/react-lightning-components';
+import { useCallback, useState } from 'react';
+import Button from '../components/Button';
+
+const img =
+  'https://images.plex.tv/photo?size=large-720&scale=2&url=https://image.tmdb.org/t/p/original/65firYWt2FoK18KuYxnmHmVaEsL.jpg';
+
+export const TransformsPage = () => {
+  const [scale, setScale] = useState(1);
+  const [rotation, setRotation] = useState(0);
+
+  const scaleUp = useCallback(() => {
+    setScale((state) => state * 1.25);
+  }, []);
+  const scaleDown = useCallback(() => {
+    setScale((state) => state * 0.8);
+  }, []);
+  const rotateLeft = useCallback(() => {
+    setRotation((state) => state + 15);
+  }, []);
+  const rotateRight = useCallback(() => {
+    setRotation((state) => state - 15);
+  }, []);
+
+  return (
+    <Column
+      focusable
+      style={{
+        gap: 20,
+        zIndex: 10,
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: 1920,
+        height: 1080,
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <Row>
+        <Button onPress={scaleUp}>Scale Up</Button>
+        <Button onPress={scaleDown}>Scale Down</Button>
+        <Button onPress={rotateLeft}>Rotate Left</Button>
+        <Button onPress={rotateRight}>Rotate Right</Button>
+      </Row>
+      <lng-image
+        src={img}
+        style={{
+          width: 720,
+          zIndex: -1,
+          transform: [{ scale }, { rotate: `${rotation}deg` }],
+        }}
+      />
+    </Column>
+  );
+};

packages/plugin-css-transform/src/utils/convertCSSTransformToLightning.ts

@@ -96,6 +96,7 @@ export function convertCSSTransformToLightning(
       transformResult.scaleY = getValue(transformValue, 1, Number.parseFloat);
       break;
     case 'rotate':
+    case 'rotation':
       transformResult.rotation = getValue(
         transformValue,
         0,

packages/plugin-css-transform/src/utils/parseTransform.ts

@@ -3,13 +3,42 @@ import { convertCSSTransformToLightning } from './convertCSSTransformToLightning
 
 const transformPartRegex = /(\w+)\(([^)]+)\)/g;
 
-export function parseTransform(transform?: string): Transform {
+export function parseTransform(
+  transform?: string | object | Array<object | string>,
+): Transform {
   if (!transform) {
     return {};
   }
 
+  if (Array.isArray(transform)) {
+    const transforms = {};
+
+    for (const t of transform) {
+      Object.assign(transforms, parseTransform(t));
+    }
+
+    return transforms;
+  }
+
   if (typeof transform === 'object') {
-    return transform;
+    const safeTransform: Transform = {};
+    const originalTranform = transform as Record<
+      string,
+      string | number | number[]
+    >;
+
+    for (const t of Object.keys(originalTranform)) {
+      if (!originalTranform[t]) {
+        continue;
+      }
+
+      Object.assign(
+        safeTransform,
+        convertCSSTransformToLightning(t, originalTranform[t]),
+      );
+    }
+
+    return safeTransform;
   }
 
   const transformParts = transform.match(transformPartRegex);