@webstudio-is/react-sdk 0.7.2 → 0.7.3

package/lib/component-utils/image.test.js

@@ -1,132 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const image_1 = require("./image");
-describe("Image optimizations applied", () => {
-    test("width is number, create pixel density descriptor 'x'", () => {
-        const imgAttr = (0, image_1.getImageAttributes)({
-            optimize: true,
-            width: 100,
-            src: "https://webstudio.is/logo.webp",
-            srcSet: undefined,
-            sizes: undefined,
-            quality: 100,
-        });
-        expect(imgAttr).toMatchInlineSnapshot(`
-      Object {
-        "sizes": undefined,
-        "src": "/cdn-cgi/image/width=256,quality=100,format=auto/https://webstudio.is/logo.webp",
-        "srcSet": "/cdn-cgi/image/width=128,quality=100,format=auto/https://webstudio.is/logo.webp 1x, /cdn-cgi/image/width=256,quality=100,format=auto/https://webstudio.is/logo.webp 2x",
-      }
-    `);
-    });
-    test("width is undefined, create 'w' descriptor and sizes prop", () => {
-        const imgAttr = (0, image_1.getImageAttributes)({
-            optimize: true,
-            width: undefined,
-            src: "https://webstudio.is/logo.webp",
-            srcSet: undefined,
-            sizes: undefined,
-            quality: 90,
-        });
-        expect(imgAttr).toMatchInlineSnapshot(`
-      Object {
-        "sizes": "(min-width: 1280px) 50vw, 100vw",
-        "src": "/cdn-cgi/image/width=3840,quality=90,format=auto/https://webstudio.is/logo.webp",
-        "srcSet": "/cdn-cgi/image/width=384,quality=90,format=auto/https://webstudio.is/logo.webp 384w, /cdn-cgi/image/width=640,quality=90,format=auto/https://webstudio.is/logo.webp 640w, /cdn-cgi/image/width=750,quality=90,format=auto/https://webstudio.is/logo.webp 750w, /cdn-cgi/image/width=828,quality=90,format=auto/https://webstudio.is/logo.webp 828w, /cdn-cgi/image/width=1080,quality=90,format=auto/https://webstudio.is/logo.webp 1080w, /cdn-cgi/image/width=1200,quality=90,format=auto/https://webstudio.is/logo.webp 1200w, /cdn-cgi/image/width=1920,quality=90,format=auto/https://webstudio.is/logo.webp 1920w, /cdn-cgi/image/width=2048,quality=90,format=auto/https://webstudio.is/logo.webp 2048w, /cdn-cgi/image/width=3840,quality=90,format=auto/https://webstudio.is/logo.webp 3840w",
-      }
-    `);
-    });
-    test("width is undefined and size defined, creates 'w' descriptor and use input sizes props", () => {
-        const imgAttr = (0, image_1.getImageAttributes)({
-            optimize: true,
-            width: undefined,
-            src: "https://webstudio.is/logo.webp",
-            srcSet: undefined,
-            sizes: "100vw",
-            quality: 70,
-        });
-        expect(imgAttr).toMatchInlineSnapshot(`
-      Object {
-        "sizes": "100vw",
-        "src": "/cdn-cgi/image/width=3840,quality=70,format=auto/https://webstudio.is/logo.webp",
-        "srcSet": "/cdn-cgi/image/width=640,quality=70,format=auto/https://webstudio.is/logo.webp 640w, /cdn-cgi/image/width=750,quality=70,format=auto/https://webstudio.is/logo.webp 750w, /cdn-cgi/image/width=828,quality=70,format=auto/https://webstudio.is/logo.webp 828w, /cdn-cgi/image/width=1080,quality=70,format=auto/https://webstudio.is/logo.webp 1080w, /cdn-cgi/image/width=1200,quality=70,format=auto/https://webstudio.is/logo.webp 1200w, /cdn-cgi/image/width=1920,quality=70,format=auto/https://webstudio.is/logo.webp 1920w, /cdn-cgi/image/width=2048,quality=70,format=auto/https://webstudio.is/logo.webp 2048w, /cdn-cgi/image/width=3840,quality=70,format=auto/https://webstudio.is/logo.webp 3840w",
-      }
-    `);
-    });
-    test("custom loader", () => {
-        const imgAttr = (0, image_1.getImageAttributes)({
-            optimize: true,
-            width: undefined,
-            src: "https://webstudio.is/logo.webp",
-            srcSet: undefined,
-            sizes: "100vw",
-            quality: 70,
-            loader: ({ width, src, quality }) => `${new URL(src).pathname}?w=${width}&q=${quality}`,
-        });
-        expect(imgAttr).toMatchInlineSnapshot(`
-      Object {
-        "sizes": "100vw",
-        "src": "/logo.webp?w=3840&q=70",
-        "srcSet": "/logo.webp?w=640&q=70 640w, /logo.webp?w=750&q=70 750w, /logo.webp?w=828&q=70 828w, /logo.webp?w=1080&q=70 1080w, /logo.webp?w=1200&q=70 1200w, /logo.webp?w=1920&q=70 1920w, /logo.webp?w=2048&q=70 2048w, /logo.webp?w=3840&q=70 3840w",
-      }
-    `);
-    });
-});
-describe("Image optimizations not applied", () => {
-    test("optimize is false", () => {
-        const imgAttr = (0, image_1.getImageAttributes)({
-            optimize: false,
-            width: 100,
-            src: "https://webstudio.is/logo.webp",
-            srcSet: undefined,
-            sizes: undefined,
-            quality: 100,
-        });
-        expect(imgAttr).toMatchInlineSnapshot(`
-      Object {
-        "sizes": undefined,
-        "src": "https://webstudio.is/logo.webp",
-        "srcSet": undefined,
-      }
-    `);
-    });
-    test("srcSet is defined", () => {
-        const imgAttr = (0, image_1.getImageAttributes)({
-            optimize: true,
-            width: 100,
-            src: "https://webstudio.is/logo.webp",
-            srcSet: "user-defined-srcset",
-            sizes: undefined,
-            quality: 100,
-        });
-        expect(imgAttr).toMatchInlineSnapshot(`
-      Object {
-        "sizes": undefined,
-        "src": "https://webstudio.is/logo.webp",
-        "srcSet": "user-defined-srcset",
-      }
-    `);
-    });
-    test("src is empty", () => {
-        const imgAttr = (0, image_1.getImageAttributes)({
-            optimize: true,
-            width: 100,
-            src: "",
-            srcSet: undefined,
-            sizes: undefined,
-            quality: 100,
-        });
-        expect(imgAttr).toMatchInlineSnapshot(`null`);
-    });
-    test("src is undefined", () => {
-        const imgAttr = (0, image_1.getImageAttributes)({
-            optimize: true,
-            width: 100,
-            src: undefined,
-            srcSet: undefined,
-            sizes: undefined,
-            quality: 100,
-        });
-        expect(imgAttr).toMatchInlineSnapshot(`null`);
-    });
-});

package/lib/components/image-dev.stories.d.ts

@@ -1,36 +0,0 @@
-import React from "react";
-import type { ComponentMeta, ComponentStory } from "@storybook/react";
-import { type ImageLoader } from "../component-utils/image";
-declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Pick<React.ClassAttributes<HTMLImageElement> & React.ImgHTMLAttributes<HTMLImageElement> & {
-    quality?: number | undefined;
-    loader?: ImageLoader | undefined;
-    optimize?: boolean | undefined;
-}, "key" | "quality" | "loader" | keyof React.ImgHTMLAttributes<HTMLImageElement> | "optimize"> & React.RefAttributes<HTMLImageElement>>>;
-export default _default;
-/**
- * Load images depending on image width and device per pixel ratio.
- **/
-export declare const FixedWidthImage: ComponentStory<React.FunctionComponent>;
-/**
- * Preserve ratio using object-fit: cover. Load images depending on image width and device per pixel ratio.
- **/
-export declare const FixedWidthImageCover: ComponentStory<React.FunctionComponent>;
-/**
- * Load images depending on the viewport width.
- **/
-export declare const UnknownWidthImage: ComponentStory<React.FunctionComponent>;
-/**
- * Fit width of the parent container, has own aspect-ratio and object-fit=cover.
- * Load images depending on the viewport width.
- **/
-export declare const AspectRatioImage: ComponentStory<React.FunctionComponent>;
-/**
- * Fill width and height of the relative parent container, object-fit=cover. Load images depending on the viewport width.
- **/
-export declare const FillParentImage: ComponentStory<React.FunctionComponent>;
-/**
- * "sizes" attribute explicitly equal to 100vw allowing to skip the default behavior.
- * See DEFAULT_SIZES in the Image component. Load images depending on the viewport width.
- **/
-export declare const HeroImage: ComponentStory<React.FunctionComponent>;
-//# sourceMappingURL=image-dev.stories.d.ts.map

package/lib/components/image-dev.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"image-dev.stories.d.ts","sourceRoot":"","sources":["../../src/components/image-dev.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAItE,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,0BAA0B,CAAC;;;;;;AAO5D,wBAE0C;AAgF1C;;IAEI;AACJ,eAAO,MAAM,eAAe,EAAE,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAEnE,CAAC;AAEF;;IAEI;AACJ,eAAO,MAAM,oBAAoB,EAAE,cAAc,CAC/C,KAAK,CAAC,iBAAiB,CAQxB,CAAC;AAEF;;IAEI;AACJ,eAAO,MAAM,iBAAiB,EAAE,cAAc,CAC5C,KAAK,CAAC,iBAAiB,CACa,CAAC;AAEvC;;;IAGI;AACJ,eAAO,MAAM,gBAAgB,EAAE,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAOpE,CAAC;AAEF;;IAEI;AACJ,eAAO,MAAM,eAAe,EAAE,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAYnE,CAAC;AAEF;;;IAGI;AACJ,eAAO,MAAM,SAAS,EAAE,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAU7D,CAAC"}

package/lib/components/image-dev.stories.js

@@ -1,102 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HeroImage = exports.FillParentImage = exports.AspectRatioImage = exports.UnknownWidthImage = exports.FixedWidthImageCover = exports.FixedWidthImage = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const warn_once_1 = __importDefault(require("warn-once"));
-const image_1 = require("./image");
-const image_ws_1 = __importDefault(require("./image.ws"));
-// to not allow include local assets everywhere, just enable it for this file
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-const logo_webp_1 = __importDefault(require("../../storybook-assets/logo.webp"));
-exports.default = {
-    title: "Components/ImageDev",
-};
-/**
- * In case you need to test img with real cloudflare trasforms
- * set  USE_CLOUDFLARE_IMAGE_TRANSFORM = true
- **/
-const USE_CLOUDFLARE_IMAGE_TRANSFORM = false;
-// For cloudflare image transform testing, logo should be the most consistent image on the site
-const REMOTE_SELF_DOMAIN_IMAGE = "https://webstudio.is/logo.webp";
-const imageSrc = USE_CLOUDFLARE_IMAGE_TRANSFORM
-    ? REMOTE_SELF_DOMAIN_IMAGE
-    : logo_webp_1.default;
-// In case of REMOTE_DEBUG
-const cloudflareImageLoader = ({ width, src, quality }) => {
-    // No image transformation in development
-    const resizeOrigin = "https://webstudio.is";
-    const pathParams = [
-        `width=${width}`,
-        quality != null && `quality=${quality}`,
-        "format=auto",
-    ].filter(Boolean);
-    const pathname = `/cdn-cgi/image/${pathParams.join(",")}/${src}`;
-    const url = new URL(pathname, resizeOrigin);
-    return url.href;
-};
-const localImageLoader = ({ width, src, quality }) => {
-    // Just emulate like we really resize the image
-    const params = new URLSearchParams();
-    params.set("width", `${width}`);
-    params.set("quality", `${quality}`);
-    return `${src}?${params.toString()}`;
-};
-const imageLoader = USE_CLOUDFLARE_IMAGE_TRANSFORM
-    ? cloudflareImageLoader
-    : localImageLoader;
-const ImageBase = (args) => {
-    (0, warn_once_1.default)(!(image_ws_1.default.defaultStyle?.maxWidth?.value === 100 &&
-        image_ws_1.default.defaultStyle?.maxWidth?.unit === "%"), "We expect that the image default style has maxWidth: 100%");
-    (0, warn_once_1.default)(image_ws_1.default.defaultStyle?.display?.value !== "block", "We expect that the image default style has display: block");
-    const style = {
-        maxWidth: "100%",
-        display: "block",
-        ...args.style,
-    };
-    return ((0, jsx_runtime_1.jsx)(image_1.Image, { ...args, optimize: true, loader: imageLoader, style: style }));
-};
-/**
- * Load images depending on image width and device per pixel ratio.
- **/
-const FixedWidthImage = () => ((0, jsx_runtime_1.jsx)(ImageBase, { src: imageSrc, width: "300", height: "400" }));
-exports.FixedWidthImage = FixedWidthImage;
-/**
- * Preserve ratio using object-fit: cover. Load images depending on image width and device per pixel ratio.
- **/
-const FixedWidthImageCover = () => ((0, jsx_runtime_1.jsx)(ImageBase, { src: imageSrc, width: "300", height: "400", style: { objectFit: "cover" } }));
-exports.FixedWidthImageCover = FixedWidthImageCover;
-/**
- * Load images depending on the viewport width.
- **/
-const UnknownWidthImage = () => (0, jsx_runtime_1.jsx)(ImageBase, { src: imageSrc });
-exports.UnknownWidthImage = UnknownWidthImage;
-/**
- * Fit width of the parent container, has own aspect-ratio and object-fit=cover.
- * Load images depending on the viewport width.
- **/
-const AspectRatioImage = () => ((0, jsx_runtime_1.jsx)("div", { style: { width: "50%" }, children: (0, jsx_runtime_1.jsx)(ImageBase, { src: imageSrc, style: { aspectRatio: "2/1", objectFit: "cover", width: "100%" } }) }));
-exports.AspectRatioImage = AspectRatioImage;
-/**
- * Fill width and height of the relative parent container, object-fit=cover. Load images depending on the viewport width.
- **/
-const FillParentImage = () => ((0, jsx_runtime_1.jsx)("div", { style: { width: "50%", aspectRatio: "2/1", position: "relative" }, children: (0, jsx_runtime_1.jsx)(ImageBase, { src: imageSrc, style: {
-            objectFit: "cover",
-            position: "absolute",
-            width: "100%",
-            height: "100%",
-        } }) }));
-exports.FillParentImage = FillParentImage;
-/**
- * "sizes" attribute explicitly equal to 100vw allowing to skip the default behavior.
- * See DEFAULT_SIZES in the Image component. Load images depending on the viewport width.
- **/
-const HeroImage = () => ((0, jsx_runtime_1.jsx)(ImageBase, { src: imageSrc, sizes: "100vw", style: {
-        aspectRatio: "3/1",
-        objectFit: "cover",
-        width: "100%",
-    } }));
-exports.HeroImage = HeroImage;