@multiplatform.one/components 5.0.26 → 6.0.0

package/src/images/SvgUri/SvgUri.spec.tsx

@@ -0,0 +1,146 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it, vi } from "vitest";
+import { SvgUri } from "./index";
+
+describe("SvgUri", () => {
+  it("is defined and exportable", () => {
+    expect(SvgUri).toBeDefined();
+    expect(typeof SvgUri).toBe("function");
+  });
+
+  it("returns null for null uri", () => {
+    const { container } = renderWithProviders(<SvgUri uri={null} />);
+    expect(container.querySelector("div > div")).toBeNull();
+  });
+
+  it("returns null for empty string uri", () => {
+    const { container } = renderWithProviders(<SvgUri uri="" />);
+    expect(container.querySelector("div > div")).toBeNull();
+  });
+
+  it("renders a container div for a valid uri", () => {
+    const { container } = renderWithProviders(
+      <SvgUri uri="https://example.com/icon.svg" width={100} height={100} />,
+    );
+    const div = container.querySelector("div > div");
+    expect(div).toBeInTheDocument();
+  });
+
+  it("renders fallback on error", async () => {
+    const fallback = <span data-testid="fallback">Error</span>;
+    vi.spyOn(globalThis, "fetch").mockRejectedValueOnce(new Error("Network error"));
+
+    const { findByTestId } = renderWithProviders(
+      <SvgUri uri="https://example.com/broken.svg" fallback={fallback} />,
+    );
+
+    const fallbackEl = await findByTestId("fallback");
+    expect(fallbackEl).toBeInTheDocument();
+  });
+
+  it("calls onError when fetch fails", async () => {
+    const onError = vi.fn();
+    vi.spyOn(globalThis, "fetch").mockRejectedValueOnce(new Error("Network error"));
+
+    renderWithProviders(<SvgUri uri="https://example.com/broken.svg" onError={onError} />);
+
+    await vi.waitFor(() => {
+      expect(onError).toHaveBeenCalled();
+    });
+  });
+
+  it("fetches and renders SVG content", async () => {
+    const svgContent =
+      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><circle cx="12" cy="12" r="10"/></svg>';
+    vi.spyOn(globalThis, "fetch").mockResolvedValueOnce(
+      new Response(svgContent, { status: 200, headers: { "Content-Type": "image/svg+xml" } }),
+    );
+
+    const onLoad = vi.fn();
+    const { container } = renderWithProviders(
+      <SvgUri uri="https://example.com/icon.svg" onLoad={onLoad} />,
+    );
+
+    await vi.waitFor(() => {
+      expect(onLoad).toHaveBeenCalled();
+    });
+
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+    expect(container.querySelector("circle")).toBeInTheDocument();
+  });
+
+  it("strips script tags from fetched SVG for security", async () => {
+    const maliciousSvg =
+      '<svg xmlns="http://www.w3.org/2000/svg"><script>alert("xss")</script><rect width="10" height="10"/></svg>';
+    vi.spyOn(globalThis, "fetch").mockResolvedValueOnce(
+      new Response(maliciousSvg, { status: 200 }),
+    );
+
+    const onLoad = vi.fn();
+    const { container } = renderWithProviders(
+      <SvgUri uri="https://example.com/evil.svg" onLoad={onLoad} />,
+    );
+
+    await vi.waitFor(() => {
+      expect(onLoad).toHaveBeenCalled();
+    });
+
+    expect(container.querySelector("script")).toBeNull();
+    expect(container.querySelector("rect")).toBeInTheDocument();
+  });
+
+  it("applies width and height to the rendered SVG", async () => {
+    const svgContent =
+      '<svg xmlns="http://www.w3.org/2000/svg"><rect width="10" height="10"/></svg>';
+    vi.spyOn(globalThis, "fetch").mockResolvedValueOnce(new Response(svgContent, { status: 200 }));
+
+    const onLoad = vi.fn();
+    const { container } = renderWithProviders(
+      <SvgUri uri="https://example.com/icon.svg" width={48} height={48} onLoad={onLoad} />,
+    );
+
+    await vi.waitFor(() => {
+      expect(onLoad).toHaveBeenCalled();
+    });
+
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+    expect(svg?.getAttribute("width")).toBe("48");
+    expect(svg?.getAttribute("height")).toBe("48");
+  });
+
+  it("sets accessibility attributes on the rendered SVG", async () => {
+    const svgContent =
+      '<svg xmlns="http://www.w3.org/2000/svg"><rect width="10" height="10"/></svg>';
+    vi.spyOn(globalThis, "fetch").mockResolvedValueOnce(new Response(svgContent, { status: 200 }));
+
+    const onLoad = vi.fn();
+    const { container } = renderWithProviders(
+      <SvgUri uri="https://example.com/icon.svg" accessibilityLabel="Test icon" onLoad={onLoad} />,
+    );
+
+    await vi.waitFor(() => {
+      expect(onLoad).toHaveBeenCalled();
+    });
+
+    const svg = container.querySelector("svg");
+    expect(svg?.getAttribute("role")).toBe("img");
+    expect(svg?.getAttribute("aria-label")).toBe("Test icon");
+  });
+
+  it("handles data:image/svg+xml URIs", async () => {
+    const onLoad = vi.fn();
+    const dataUri =
+      "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='10' height='10'/%3E%3C/svg%3E";
+
+    const { container } = renderWithProviders(<SvgUri uri={dataUri} onLoad={onLoad} />);
+
+    await vi.waitFor(() => {
+      expect(onLoad).toHaveBeenCalled();
+    });
+
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+});

package/src/images/SvgUri/SvgUri.stories.tsx

@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { YStack } from "tamagui";
+import { SvgUri } from "./index";
+
+const meta: Meta<typeof SvgUri> = {
+  title: "Components/SvgUri",
+  component: SvgUri,
+  tags: ["!test"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A component for loading and displaying SVG images from remote URLs with validation.",
+      },
+    },
+  },
+  argTypes: {
+    uri: {
+      control: "text",
+      description: "URL of the SVG image",
+    },
+    width: {
+      control: "number",
+      description: "Width of the SVG",
+    },
+    height: {
+      control: "number",
+      description: "Height of the SVG",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SvgUri>;
+
+export const Basic: Story = {
+  name: "Main",
+  render: () => (
+    <SvgUri
+      uri="https://raw.githubusercontent.com/simple-icons/simple-icons/develop/icons/react.svg"
+      width={100}
+      height={100}
+    />
+  ),
+};
+
+export const DifferentSizes = () => (
+  <YStack gap="$4">
+    <SvgUri
+      uri="https://raw.githubusercontent.com/simple-icons/simple-icons/develop/icons/typescript.svg"
+      width={50}
+      height={50}
+    />
+    <SvgUri
+      uri="https://raw.githubusercontent.com/simple-icons/simple-icons/develop/icons/typescript.svg"
+      width={100}
+      height={100}
+    />
+    <SvgUri
+      uri="https://raw.githubusercontent.com/simple-icons/simple-icons/develop/icons/typescript.svg"
+      width={150}
+      height={150}
+    />
+  </YStack>
+);
+
+export const MultipleSvgs = () => (
+  <YStack gap="$4">
+    <SvgUri
+      uri="https://raw.githubusercontent.com/simple-icons/simple-icons/develop/icons/github.svg"
+      width={80}
+      height={80}
+    />
+    <SvgUri
+      uri="https://raw.githubusercontent.com/simple-icons/simple-icons/develop/icons/gitlab.svg"
+      width={80}
+      height={80}
+    />
+    <SvgUri
+      uri="https://raw.githubusercontent.com/simple-icons/simple-icons/develop/icons/bitbucket.svg"
+      width={80}
+      height={80}
+    />
+  </YStack>
+);
+
+export const InvalidUri: Story = {
+  render: () => (
+    <YStack gap="$4">
+      <SvgUri uri="not-a-valid-url" width={100} height={100} />
+      <SvgUri uri="" width={100} height={100} />
+    </YStack>
+  ),
+};
+
+export const CustomDimensions: Story = {
+  render: () => (
+    <SvgUri
+      uri="https://raw.githubusercontent.com/simple-icons/simple-icons/develop/icons/javascript.svg"
+      width={200}
+      height={100}
+    />
+  ),
+};

package/src/images/SvgUri/index.native.ts

@@ -1,4 +1,6 @@
 import { SvgUri as RNSvgUri } from "react-native-svg";
 import { styled } from "tamagui";
 
-export const SvgUri = styled(RNSvgUri, { uri: null });
+export const SvgUri = styled(RNSvgUri, { name: "SvgUri", uri: null });
+
+export type SvgUriProps = React.ComponentProps<typeof SvgUri>;

package/src/images/SvgUri/index.tsx

@@ -1,32 +1,106 @@
-/**
- * File: /src/images/SvgUri/index.tsx
- * Project: @multiplatform.one/components
- * File Created: 10-10-2023 06:39:34
- * Author: Clay Risser
- * -----
- * BitSpur (c) Copyright 2021 - 2024
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import type { UriProps } from "react-native-svg";
-import type { StackProps } from "tamagui";
-
-const logger = console;
-
-export type SvgUriProps = StackProps & UriProps;
-
-export function SvgUri(_props: SvgUriProps) {
-  logger.error("use SimpleImage instead of SvgUri");
-  return <>{}</>;
+import { useEffect, useRef, useState } from "react";
+
+export function SvgUri({
+  uri,
+  width,
+  height,
+  preserveAspectRatio,
+  onError,
+  onLoad,
+  fallback,
+  accessibilityLabel,
+  ...props
+}: SvgUriProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [error, setError] = useState(false);
+  const [loaded, setLoaded] = useState(false);
+
+  useEffect(() => {
+    if (!uri) {
+      setLoaded(false);
+      return;
+    }
+
+    const controller = new AbortController();
+
+    (uri.startsWith("data:")
+      ? Promise.resolve(decodeDataUri(uri))
+      : fetch(uri, { signal: controller.signal }).then((res) => {
+          if (!res.ok) throw new Error(`Failed to fetch SVG: ${res.status}`);
+          return res.text();
+        })
+    )
+      .then((text) => {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(text, "image/svg+xml");
+        const svgEl = doc.querySelector("svg");
+        if (!svgEl) throw new Error("No SVG element found in response");
+
+        for (const script of Array.from(svgEl.querySelectorAll("script"))) {
+          script.remove();
+        }
+        svgEl.removeAttribute("onload");
+        svgEl.removeAttribute("onerror");
+
+        if (width != null) svgEl.setAttribute("width", String(width));
+        if (height != null) svgEl.setAttribute("height", String(height));
+        if (preserveAspectRatio) svgEl.setAttribute("preserveAspectRatio", preserveAspectRatio);
+        if (accessibilityLabel) {
+          svgEl.setAttribute("role", "img");
+          svgEl.setAttribute("aria-label", accessibilityLabel);
+        }
+
+        if (containerRef.current) {
+          containerRef.current.innerHTML = svgEl.outerHTML;
+        }
+
+        setError(false);
+        setLoaded(true);
+        onLoad?.();
+      })
+      .catch((err) => {
+        if (err.name === "AbortError") return;
+        setError(true);
+        onError?.(err);
+      });
+
+    return () => controller.abort();
+  }, [uri, width, height, preserveAspectRatio, accessibilityLabel]);
+
+  if (!uri) return null;
+  if (error) return fallback ?? null;
+
+  return (
+    <div
+      ref={containerRef}
+      style={{
+        display: "inline-block",
+        width: width != null ? width : undefined,
+        height: height != null ? height : undefined,
+        lineHeight: 0,
+      }}
+    />
+  );
 }
+
+function decodeDataUri(uri: string): string {
+  const commaIndex = uri.indexOf(",");
+  if (commaIndex === -1) return "";
+  const meta = uri.slice(0, commaIndex);
+  const data = uri.slice(commaIndex + 1);
+  if (meta.includes("base64")) {
+    return atob(data);
+  }
+  return decodeURIComponent(data);
+}
+
+export type SvgUriProps = {
+  uri: string | null;
+  width?: number | string;
+  height?: number | string;
+  preserveAspectRatio?: string;
+  accessibilityLabel?: string;
+  onError?: (error: Error) => void;
+  onLoad?: () => void;
+  fallback?: React.JSX.Element;
+};

package/src/images/images.spec.tsx

@@ -0,0 +1,52 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Image } from "./Image/index";
+import { Svg } from "./Svg/index";
+import { Svg as NativeSvg } from "./Svg/index.native";
+import { SvgUri } from "./SvgUri/index";
+import * as Images from "./index";
+
+describe("Images Module", () => {
+  it("should export Image", () => {
+    expect(Image).toBeDefined();
+  });
+  it("should render Image correctly", () => {
+    const { container } = renderWithProviders(<Image source={{ uri: "test-uri" }} />);
+    expect(container).toBeDefined();
+  });
+  it("should export Svg", () => {
+    expect(Svg).toBeDefined();
+  });
+  it("should render Svg correctly", () => {
+    const { container } = renderWithProviders(<Svg />);
+    expect(container).toBeDefined();
+  });
+  it("should export SvgUri", () => {
+    expect(SvgUri).toBeDefined();
+  });
+  it("should render SvgUri correctly", () => {
+    const { container } = renderWithProviders(<SvgUri uri="test-uri" />);
+    expect(container).toBeDefined();
+  });
+  it("should export all components from index", () => {
+    expect(Images.Image).toBeDefined();
+    expect(Images.Svg).toBeDefined();
+    expect(Images.SvgUri).toBeDefined();
+  });
+  it("should render SimpleImage from index correctly", () => {
+    const { container } = renderWithProviders(<Images.Image source={{ uri: "test-uri" }} />);
+    expect(container).toBeDefined();
+  });
+  it("should render Svg from index correctly", () => {
+    const { container } = renderWithProviders(<Images.Svg />);
+    expect(container).toBeDefined();
+  });
+  it("should render SvgUri from index correctly", () => {
+    const { container } = renderWithProviders(<Images.SvgUri uri="test-uri" />);
+    expect(container).toBeDefined();
+  });
+  it("renders correctly", () => {
+    const { getByTestId } = renderWithProviders(<NativeSvg testID="svg-component" />);
+    const svgComponent = getByTestId("svg-component");
+    expect(svgComponent).toBeTruthy();
+  });
+});

package/src/images/index.ts

@@ -1,24 +1,3 @@
-/*
- * File: /src/images/index.ts
- * Project: @multiplatform.one/components
- * File Created: 10-01-2025 21:02:36
- * Author: Clay Risser
- * -----
- * BitSpur (c) Copyright 2021 - 2025
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export * from "./SimpleImage/index";
+export * from "./Image/index";
 export * from "./Svg/index";
 export * from "./SvgUri/index";

package/src/index.ts

@@ -1,38 +1,48 @@
-/*
- * File: /src/index.ts
- * Project: @multiplatform.one/components
- * File Created: 10-01-2025 21:02:36
- * Author: Clay Risser
- * -----
- * BitSpur (c) Copyright 2021 - 2025
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export * from "./ErrorBoundary";
+export * from "./Badge";
+export * from "./Carousel";
+export * from "./Chip";
+export * from "./DotIndicator";
+export * from "./Skeleton";
+export * from "./Wheel";
+export * from "./ErrorBoundary/index";
 export * from "./code/index";
-export * from "./forms/index";
-export * from "./helpers";
+// Forms are now in @multiplatform.one/forms package
+// Table components are now in @multiplatform.one/table package
 export * from "./hooks/index";
+export * from "./icons/index";
 export * from "./images/index";
 export * from "./layouts/index";
-export * from "./mdx/index";
-export * from "./organize/index";
-export * from "./panels/index";
-export * from "./table/index";
-export * from "./tints";
+// MDX components are now in @multiplatform.one/markdown package
+export * from "./surfaces";
+export * from "./views/index";
+export { unwrapText } from "./utils/unwrapText";
+export { Pagination } from "./Pagination";
+export type { PaginationProps } from "./Pagination";
+export { Tooltip } from "./Tooltip";
+export type {
+  TooltipProps,
+  TooltipContentProps,
+  TooltipArrowProps,
+  TooltipTextProps,
+} from "./Tooltip";
 export * from "tamagui";
 
-// TODO: use another name so it doesn't conflict with tamagui
-export { Form, useFormContext } from "./forms";
-export type { FormProps } from "./forms";
+export type { ImageProps } from "./images/Image";
+export { Image } from "./images/Image";
+
+// ---------------------------------------------------------------------------
+// Tamagui shorthand type augmentation
+//
+// Adds shorthand prop types (bg, ai, jc, p, m, etc.) to all Tamagui
+// components for every consumer of @multiplatform.one/components.
+//
+// We intentionally augment with ONLY the shorthands rather than a full
+// createTamagui config to avoid triggering TamaDefer resolution changes
+// that break styled() component types across workspace boundaries.
+// ---------------------------------------------------------------------------
+import type { shorthands as _shorthands } from "@tamagui/shorthands";
+declare module "@tamagui/web" {
+  interface TamaguiCustomConfig {
+    shorthands: typeof _shorthands;
+  }
+}