npm - @fragmentsx/figma-converter - Versions diffs - 0.0.1 - Mend

@fragmentsx/figma-converter 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (63) hide show

package/package.json +31 -0
package/playground/index.html +12 -0
package/playground/node_modules/.bin/tsc +17 -0
package/playground/node_modules/.bin/tsserver +17 -0
package/playground/node_modules/.bin/vite +17 -0
package/playground/package.json +25 -0
package/playground/src/123.json +527 -0
package/playground/src/App.tsx +534 -0
package/playground/src/doc.json +4024 -0
package/playground/src/main.tsx +4 -0
package/playground/tsconfig.json +12 -0
package/playground/vite.config.ts +59 -0
package/src/__tests__/fixtures/simple-frame.json +70 -0
package/src/__tests__/fixtures/with-effects.json +19 -0
package/src/__tests__/fixtures/with-image.json +16 -0
package/src/__tests__/integration.test.ts +113 -0
package/src/__tests__/validation.test.ts +108 -0
package/src/converter.test.ts +206 -0
package/src/converter.ts +165 -0
package/src/diff/__tests__/buildBreakpointFrame.test.ts +43 -0
package/src/diff/__tests__/computeDelta.test.ts +33 -0
package/src/diff/__tests__/matchNodes.test.ts +52 -0
package/src/diff/buildBreakpointFrame.ts +99 -0
package/src/diff/computeDelta.ts +40 -0
package/src/diff/index.ts +3 -0
package/src/diff/matchNodes.ts +46 -0
package/src/images/__tests__/collectImages.test.ts +30 -0
package/src/images/collectImages.ts +29 -0
package/src/index.ts +16 -0
package/src/mappers/__tests__/borderRadius.test.ts +28 -0
package/src/mappers/__tests__/layout.test.ts +71 -0
package/src/mappers/__tests__/nodeMapper.test.ts +394 -0
package/src/mappers/__tests__/position.test.ts +67 -0
package/src/mappers/__tests__/size.test.ts +69 -0
package/src/mappers/borderRadius.ts +18 -0
package/src/mappers/index.ts +5 -0
package/src/mappers/layout.ts +58 -0
package/src/mappers/nodeMapper.ts +330 -0
package/src/mappers/position.ts +71 -0
package/src/mappers/size.ts +39 -0
package/src/styles/__tests__/border.test.ts +19 -0
package/src/styles/__tests__/effects.test.ts +60 -0
package/src/styles/__tests__/gradientFallback.test.ts +96 -0
package/src/styles/__tests__/paint.test.ts +126 -0
package/src/styles/border.ts +40 -0
package/src/styles/effects.ts +40 -0
package/src/styles/gradientFallback.ts +113 -0
package/src/styles/index.ts +3 -0
package/src/styles/paint.ts +164 -0
package/src/text/__tests__/textToHtml.test.ts +66 -0
package/src/text/textToHtml.ts +83 -0
package/src/types/figma.ts +127 -0
package/src/types/index.ts +2 -0
package/src/types/result.ts +115 -0
package/src/utils/__tests__/color.test.ts +15 -0
package/src/utils/__tests__/id.test.ts +20 -0
package/src/utils/color.ts +20 -0
package/src/utils/id.ts +9 -0
package/src/utils/index.ts +2 -0
package/src/validation.ts +94 -0
package/tsconfig.json +15 -0
package/vite.config.ts +26 -0
package/vitest.config.ts +14 -0

package/playground/src/App.tsx ADDED Viewed

@@ -0,0 +1,534 @@
+import { useState, useMemo } from "react";
+import { convertFigmaToFragment } from "@fragmentsx/figma-converter";
+import type { ConversionResult } from "@fragmentsx/figma-converter";
+import { createTestFragmentsClient } from "@fragmentsx/client-core";
+import { Instance } from "@fragmentsx/render-react";
+const FRAGMENT_ID = 1;
+type Tab =
+  | "render"
+  | "info"
+  | "document"
+  | "imageRefs"
+  | "svgRefs"
+  | "cssChunks"
+  | "warnings";
+export function App() {
+  const [jsonInput, setJsonInput] = useState("");
+  const [result, setResult] = useState<ConversionResult | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [renderKey, setRenderKey] = useState(0);
+  const [tab, setTab] = useState<Tab>("render");
+  const globalManager = useMemo(() => {
+    if (!result) return null;
+    const gm = createTestFragmentsClient({
+      fragments: { [FRAGMENT_ID]: result.document as any },
+    });
+    gm.$load.loadFragment(FRAGMENT_ID);
+    // Инжектируем cssChunks в <head>
+    const styleId = "figma-converter-playground-css-chunks";
+    const existing = document.getElementById(styleId);
+    if (existing) existing.remove();
+    if (result.cssChunks.length > 0) {
+      const style = document.createElement("style");
+      style.id = styleId;
+      style.textContent = result.cssChunks.map((c) => c.content).join("\n");
+      document.head.appendChild(style);
+    }
+    return gm;
+  }, [result, renderKey]);
+  const handleConvert = () => {
+    setError(null);
+    try {
+      const parsed = JSON.parse(jsonInput);
+      const frames = Array.isArray(parsed)
+        ? parsed.map((f: any) => ({
+            node: f.node || f,
+            width: (f.node || f).width,
+          }))
+        : [{ node: parsed, width: parsed.width }];
+      const conversionResult = convertFigmaToFragment(frames);
+      setResult(conversionResult);
+      setRenderKey((k) => k + 1);
+      setTab("render");
+    } catch (e: any) {
+      setError(e.message);
+      setResult(null);
+    }
+  };
+  const handleLoadSample = async () => {
+    try {
+      const res = await fetch("/src/doc.json");
+      const json = await res.text();
+      setJsonInput(json);
+    } catch {
+      setError("Не удалось загрузить doc.json");
+    }
+  };
+  const handleFetchFromPlugin = async () => {
+    try {
+      const res = await fetch("/api/doc");
+      if (res.status === 404) {
+        setError("Нет данных — нажмите '→ Playground' в Figma-плагине");
+        return;
+      }
+      const json = await res.text();
+      setJsonInput(json);
+    } catch {
+      setError("Не удалось получить данные из плагина");
+    }
+  };
+  return (
+    <div style={styles.root}>
+      <header style={styles.header}>
+        Converter Playground
+        {result && (
+          <span style={styles.headerStats}>
+            {" "}
+            — images: {result.imageRefs.length}, svgs: {result.svgRefs.length},
+            fonts: {result.fonts.length}, warnings: {result.warnings.length}
+          </span>
+        )}
+      </header>
+      <div style={styles.main}>
+        {/* Левая панель — ввод */}
+        <div style={styles.left}>
+          <textarea
+            style={styles.textarea}
+            value={jsonInput}
+            onChange={(e) => setJsonInput(e.target.value)}
+            placeholder="Вставьте FigmaNode JSON..."
+            spellCheck={false}
+          />
+          <div style={styles.buttons}>
+            <button style={styles.button} onClick={handleConvert}>
+              Конвертировать
+            </button>
+            <button
+              style={{ ...styles.button, background: "#555" }}
+              onClick={handleLoadSample}
+            >
+              doc.json
+            </button>
+            <button
+              style={{ ...styles.button, background: "#2e7d32" }}
+              onClick={handleFetchFromPlugin}
+            >
+              Из плагина
+            </button>
+          </div>
+          {error && <div style={styles.error}>{error}</div>}
+        </div>
+        {/* Правая панель — результат */}
+        <div style={styles.right}>
+          {result ? (
+            <>
+              <div style={styles.tabs}>
+                {(
+                  [
+                    "render",
+                    "info",
+                    "document",
+                    "imageRefs",
+                    "svgRefs",
+                    "cssChunks",
+                    "warnings",
+                  ] as Tab[]
+                ).map((t) => (
+                  <button
+                    key={t}
+                    style={tab === t ? styles.tabActive : styles.tab}
+                    onClick={() => setTab(t)}
+                  >
+                    {t}
+                    {t === "imageRefs" && ` (${result.imageRefs.length})`}
+                    {t === "svgRefs" && ` (${result.svgRefs.length})`}
+                    {t === "warnings" && ` (${result.warnings.length})`}
+                    {t === "cssChunks" && ` (${result.cssChunks.length})`}
+                  </button>
+                ))}
+              </div>
+              <div
+                style={
+                  tab === "render" ? styles.tabContentRender : styles.tabContent
+                }
+              >
+                {tab === "render" && globalManager && (
+                  <Instance
+                    fragmentId={String(FRAGMENT_ID)}
+                    globalManager={globalManager}
+                  />
+                )}
+                {tab === "info" && <InfoTab result={result} />}
+                {tab === "document" && <JsonView data={result.document} />}
+                {tab === "imageRefs" && <ImageRefsTab result={result} />}
+                {tab === "svgRefs" && <SvgRefsTab result={result} />}
+                {tab === "cssChunks" && <CssChunksTab result={result} />}
+                {tab === "warnings" && <WarningsTab result={result} />}
+              </div>
+            </>
+          ) : (
+            <div style={styles.placeholder}>
+              Вставьте JSON и нажмите "Конвертировать"
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+function InfoTab({ result }: { result: ConversionResult }) {
+  const doc = result.document;
+  const primaryFrame = doc.children[0];
+  function countNodes(node: any): number {
+    let count = 1;
+    if (node.children) {
+      for (const child of node.children) count += countNodes(child);
+    }
+    return count;
+  }
+  const totalNodes = countNodes(doc);
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
+      <Section title="Документ">
+        <Row label="Fragment ID" value={doc._id} />
+        <Row label="Всего нод" value={totalNodes} />
+        <Row label="Breakpoints" value={doc.children.length} />
+        {primaryFrame && (
+          <>
+            <Row
+              label="Primary frame"
+              value={`${primaryFrame.width} x ${primaryFrame.height}`}
+            />
+            <Row
+              label="Primary children"
+              value={primaryFrame.children?.length ?? 0}
+            />
+          </>
+        )}
+      </Section>
+      <Section title="Ресурсы">
+        <Row
+          label="Растровые картинки (imageRefs)"
+          value={result.imageRefs.length}
+        />
+        <Row label="Векторы → SVG (svgRefs)" value={result.svgRefs.length} />
+        <Row label="CSS chunks" value={result.cssChunks.length} />
+        <Row label="Шрифты" value={result.fonts.length} />
+      </Section>
+      {result.fonts.length > 0 && (
+        <Section title="Шрифты">
+          {result.fonts.map((f, i) => (
+            <Row key={i} label={f.family} value={f.style} />
+          ))}
+        </Section>
+      )}
+      <Section title="Предупреждения">
+        <Row label="Количество" value={result.warnings.length} />
+      </Section>
+    </div>
+  );
+}
+function ImageRefsTab({ result }: { result: ConversionResult }) {
+  if (result.imageRefs.length === 0)
+    return <Empty text="Нет растровых изображений" />;
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+      {result.imageRefs.map((ref, i) => (
+        <div key={i} style={styles.card}>
+          <div style={styles.cardTitle}>Image #{i + 1}</div>
+          <Row label="Figma imageHash" value={ref.figmaImageHash} />
+          <Row label="Fragment nodeId" value={ref.nodeId} />
+          <Row label="paintIndex" value={ref.paintIndex} />
+          <div style={styles.pipelineNote}>
+            Pipeline: figma.getImageByHash("{ref.figmaImageHash}") → upload →
+            paint.image.src
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+function SvgRefsTab({ result }: { result: ConversionResult }) {
+  if (result.svgRefs.length === 0) return <Empty text="Нет векторов" />;
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+      {result.svgRefs.map((ref, i) => (
+        <div key={i} style={styles.card}>
+          <div style={styles.cardTitle}>SVG #{i + 1}</div>
+          <Row label="Figma nodeId" value={ref.figmaNodeId} />
+          <Row label="Fragment nodeId" value={ref.nodeId} />
+          <div style={styles.pipelineNote}>
+            Pipeline: node.exportAsync(SVG) → upload .svg → paint.image.src
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+function CssChunksTab({ result }: { result: ConversionResult }) {
+  if (result.cssChunks.length === 0) return <Empty text="Нет CSS chunks" />;
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+      {result.cssChunks.map((chunk, i) => (
+        <div key={i} style={styles.card}>
+          <div style={styles.cardTitle}>{chunk.name}</div>
+          <pre style={styles.pre}>{chunk.content}</pre>
+        </div>
+      ))}
+    </div>
+  );
+}
+function WarningsTab({ result }: { result: ConversionResult }) {
+  if (result.warnings.length === 0) return <Empty text="Нет предупреждений" />;
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
+      {result.warnings.map((w, i) => (
+        <div key={i} style={styles.warning}>
+          <strong>
+            {w.nodeType}:{w.nodeId}
+          </strong>{" "}
+          — {w.field}: {w.message}
+        </div>
+      ))}
+    </div>
+  );
+}
+function JsonView({ data }: { data: any }) {
+  return <pre style={styles.pre}>{JSON.stringify(data, null, 2)}</pre>;
+}
+function Section({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div style={styles.section}>
+      <div style={styles.sectionTitle}>{title}</div>
+      {children}
+    </div>
+  );
+}
+function Row({ label, value }: { label: string; value: any }) {
+  return (
+    <div style={styles.row}>
+      <span style={styles.rowLabel}>{label}</span>
+      <span style={styles.rowValue}>{String(value)}</span>
+    </div>
+  );
+}
+function Empty({ text }: { text: string }) {
+  return <div style={styles.placeholder}>{text}</div>;
+}
+const styles: Record<string, React.CSSProperties> = {
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    height: "100vh",
+    fontFamily: "system-ui, sans-serif",
+    margin: 0,
+    background: "#f8f9fa",
+  },
+  header: {
+    background: "#1a1a2e",
+    color: "#fff",
+    padding: "12px 20px",
+    fontSize: "16px",
+    fontWeight: 600,
+    flexShrink: 0,
+  },
+  headerStats: {
+    fontWeight: 400,
+    fontSize: "13px",
+    opacity: 0.7,
+  },
+  main: {
+    display: "flex",
+    flex: 1,
+    overflow: "hidden",
+  },
+  left: {
+    width: "40%",
+    display: "flex",
+    flexDirection: "column",
+    padding: "12px",
+    gap: "8px",
+    borderRight: "1px solid #ddd",
+  },
+  textarea: {
+    flex: 1,
+    minHeight: "200px",
+    fontFamily: "monospace",
+    fontSize: "12px",
+    padding: "8px",
+    border: "1px solid #ccc",
+    borderRadius: "6px",
+    resize: "none",
+    background: "#fff",
+  },
+  buttons: {
+    display: "flex",
+    gap: "8px",
+  },
+  button: {
+    background: "#1a1a2e",
+    color: "#fff",
+    border: "none",
+    borderRadius: "6px",
+    padding: "10px 16px",
+    cursor: "pointer",
+    fontSize: "13px",
+    fontWeight: 600,
+    flex: 1,
+  },
+  error: {
+    background: "#fee",
+    color: "#c00",
+    padding: "8px",
+    borderRadius: "6px",
+    fontSize: "13px",
+  },
+  right: {
+    width: "60%",
+    background: "#fff",
+    overflow: "auto",
+    display: "flex",
+    flexDirection: "column",
+  },
+  tabs: {
+    display: "flex",
+    borderBottom: "1px solid #ddd",
+    flexShrink: 0,
+    overflowX: "auto",
+  },
+  tab: {
+    padding: "8px 14px",
+    fontSize: "12px",
+    fontWeight: 500,
+    border: "none",
+    background: "transparent",
+    cursor: "pointer",
+    color: "#666",
+    borderBottom: "2px solid transparent",
+    whiteSpace: "nowrap",
+  },
+  tabActive: {
+    padding: "8px 14px",
+    fontSize: "12px",
+    fontWeight: 600,
+    border: "none",
+    background: "transparent",
+    cursor: "pointer",
+    color: "#1a1a2e",
+    borderBottom: "2px solid #1a1a2e",
+    whiteSpace: "nowrap",
+  },
+  tabContent: {
+    flex: 1,
+    overflow: "auto",
+    padding: "12px",
+  },
+  tabContentRender: {
+    flex: 1,
+    overflow: "auto",
+    position: "relative",
+  },
+  section: {
+    background: "#f5f5f5",
+    borderRadius: "8px",
+    padding: "12px",
+  },
+  sectionTitle: {
+    fontSize: "13px",
+    fontWeight: 600,
+    marginBottom: "8px",
+    color: "#333",
+  },
+  row: {
+    display: "flex",
+    justifyContent: "space-between",
+    padding: "3px 0",
+    fontSize: "12px",
+  },
+  rowLabel: {
+    color: "#666",
+  },
+  rowValue: {
+    fontFamily: "monospace",
+    color: "#333",
+    fontWeight: 500,
+  },
+  card: {
+    background: "#f9f9f9",
+    border: "1px solid #eee",
+    borderRadius: "8px",
+    padding: "12px",
+  },
+  cardTitle: {
+    fontSize: "13px",
+    fontWeight: 600,
+    marginBottom: "6px",
+  },
+  pipelineNote: {
+    marginTop: "8px",
+    padding: "6px 8px",
+    background: "#eef6ff",
+    borderRadius: "4px",
+    fontSize: "11px",
+    fontFamily: "monospace",
+    color: "#1565c0",
+  },
+  pre: {
+    margin: 0,
+    fontSize: "11px",
+    fontFamily: "monospace",
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-all",
+    lineHeight: 1.5,
+  },
+  warning: {
+    background: "#fff8e1",
+    padding: "6px 8px",
+    borderRadius: "4px",
+    fontSize: "12px",
+    borderLeft: "3px solid #f9a825",
+  },
+  placeholder: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    height: "100%",
+    color: "#999",
+    fontSize: "14px",
+  },
+};