frontend: Implement MFM transform functions (#23)

frontend/src/components/mfm/MfmFunction.tsx

@@ -1,34 +1,63 @@
-import { MfmFn, MfmNode } from "mfm-js";
+import { MfmFn } from "mfm-js";
+import type { CSSProperties } from "react";
 
 import { CustomEmojiMapper } from "./Mfm";
 import MfmRenderer from "./MfmRenderer";
 
+function parseFloatWithDefault(value: string | true | undefined, defaultValue: string): string {
+  if (typeof value !== "string" || !/^\d+(:?\.\d+)?$/.test(value)) {
+    return defaultValue;
+  }
+  return value;
+}
+
 export default function MfmFunction(
   { props, children, customEmojiMapper }: MfmFn & { customEmojiMapper?: CustomEmojiMapper },
 ) {
+  let className;
+  let style: CSSProperties | undefined;
   switch (props.name) {
     case "x2":
-      return <MfmFnZoom scale={2} nodes={children} customEmojiMapper={customEmojiMapper} />;
+      className = "text-[2em]";
+      break;
     case "x3":
-      return <MfmFnZoom scale={3} nodes={children} customEmojiMapper={customEmojiMapper} />;
+      className = "text-[3em]";
+      break;
     case "x4":
-      return <MfmFnZoom scale={4} nodes={children} customEmojiMapper={customEmojiMapper} />;
-    default:
-      return <MfmRenderer nodes={children} customEmojiMapper={customEmojiMapper} />;
+      className = "text-[4em]";
+      break;
+    case "flip":
+      className = "inline-block -scale-x-100";
+      break;
+    case "scale": {
+      const x = parseFloatWithDefault(props.args.x, "1");
+      const y = parseFloatWithDefault(props.args.y, "1");
+      className = "inline-block";
+      style = { transform: `scale(${x}, ${y})` };
+      break;
+    }
+    case "position": {
+      const x = parseFloatWithDefault(props.args.x, "0");
+      const y = parseFloatWithDefault(props.args.y, "0");
+      className = "inline-block";
+      style = { transform: `translate(${x}em, ${y}em)` };
+      break;
+    }
+    case "rotate": {
+      const degrees = parseFloatWithDefault(props.args.deg, "90");
+      className = "inline-block";
+      style = { transform: `rotate(${degrees}deg)` };
+      break;
+    }
+  }
+
+  if (!className && !style) {
+    return <MfmRenderer nodes={children} customEmojiMapper={customEmojiMapper} />;
   }
-}
 
-function MfmFnZoom(
-  { scale, nodes, customEmojiMapper }: {
-    scale: number;
-    nodes: MfmNode[];
-    customEmojiMapper?: CustomEmojiMapper;
-  },
-) {
-  const classNameMap = ["", "", "text-[2em]", "text-[3em]", "text-[4em]"];
   return (
-    <span className={classNameMap[scale]}>
-      <MfmRenderer nodes={nodes} customEmojiMapper={customEmojiMapper} />
+    <span className={className} style={style}>
+      <MfmRenderer nodes={children} customEmojiMapper={customEmojiMapper} />
     </span>
   );
 }

frontend/src/stories/Mfm.stories.ts

@@ -3,6 +3,7 @@ import React from "react";
 
 import Mfm from "@/components/mfm/Mfm";
 
+import transformsTestdata from "./assets/mfm-transforms.json";
 import plachta from "./assets/plachta.png";
 import recruitSimulatorTestdata from "./assets/recruit.json";
 import sendMoney from "./assets/send-money.png";
@@ -67,6 +68,10 @@ export const EmojiZoom: Story = {
   },
 };
 
+export const Transforms: Story = {
+  args: transformsTestdata,
+};
+
 export const RecruitSimulator: Story = {
   args: recruitSimulatorTestdata,
 };

frontend/src/stories/assets/mfm-transforms.json

@@ -0,0 +1 @@
+{"content": "$[position.x=2.25 $[rotate.deg=45 🟦]$[scale.y=1.4 🟦]$[rotate.deg=45 🟦]]\n$[x2 $[rotate.deg=45 🟦]$[position.y=0.3 🟦]$[rotate.deg=45 🟦]]"}