@webstudio-is/image 0.1.0 → 0.2.0

package/src/__generated__/image.props.json

@@ -0,0 +1,575 @@
+{
+  "slot": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "style": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "title": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "alt": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "crossOrigin": {
+    "defaultValue": null,
+    "options": ["\"\"", "anonymous", "use-credentials"],
+    "required": false,
+    "type": "radio"
+  },
+  "decoding": {
+    "defaultValue": "async",
+    "options": ["async", "auto", "sync"],
+    "required": false,
+    "type": "radio"
+  },
+  "height": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "loading": {
+    "defaultValue": "lazy",
+    "options": ["eager", "lazy"],
+    "required": false,
+    "type": "radio"
+  },
+  "referrerPolicy": {
+    "defaultValue": null,
+    "options": [
+      "\"\"",
+      "no-referrer",
+      "no-referrer-when-downgrade",
+      "origin",
+      "origin-when-cross-origin",
+      "same-origin",
+      "strict-origin",
+      "strict-origin-when-cross-origin",
+      "unsafe-url"
+    ],
+    "required": false,
+    "type": "select"
+  },
+  "sizes": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "src": {
+    "defaultValue": "",
+    "required": false,
+    "type": "text"
+  },
+  "srcSet": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "useMap": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "width": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "defaultChecked": {
+    "defaultValue": null,
+    "required": false,
+    "type": "boolean"
+  },
+  "defaultValue": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "suppressContentEditableWarning": {
+    "defaultValue": null,
+    "required": false,
+    "type": "boolean"
+  },
+  "suppressHydrationWarning": {
+    "defaultValue": null,
+    "required": false,
+    "type": "boolean"
+  },
+  "accessKey": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "className": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "contentEditable": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "contextMenu": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "dir": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "draggable": {
+    "defaultValue": null,
+    "required": false,
+    "type": "boolean"
+  },
+  "hidden": {
+    "defaultValue": null,
+    "required": false,
+    "type": "boolean"
+  },
+  "id": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "lang": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "placeholder": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "spellCheck": {
+    "defaultValue": null,
+    "required": false,
+    "type": "boolean"
+  },
+  "tabIndex": {
+    "defaultValue": null,
+    "required": false,
+    "type": "number"
+  },
+  "translate": {
+    "defaultValue": null,
+    "options": ["yes", "no"],
+    "required": false,
+    "type": "radio"
+  },
+  "radioGroup": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "role": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "about": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "datatype": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "inlist": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "prefix": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "property": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "resource": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "typeof": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "vocab": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "autoCapitalize": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "autoCorrect": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "autoSave": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "color": {
+    "defaultValue": null,
+    "required": false,
+    "type": "color"
+  },
+  "itemProp": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "itemScope": {
+    "defaultValue": null,
+    "required": false,
+    "type": "boolean"
+  },
+  "itemType": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "itemID": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "itemRef": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "results": {
+    "defaultValue": null,
+    "required": false,
+    "type": "number"
+  },
+  "security": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "unselectable": {
+    "defaultValue": null,
+    "options": ["on", "off"],
+    "required": false,
+    "type": "radio"
+  },
+  "inputMode": {
+    "defaultValue": null,
+    "options": [
+      "text",
+      "none",
+      "search",
+      "tel",
+      "url",
+      "email",
+      "numeric",
+      "decimal"
+    ],
+    "required": false,
+    "type": "select"
+  },
+  "is": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "aria-activedescendant": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "aria-atomic": {
+    "defaultValue": null,
+    "required": false,
+    "type": "boolean"
+  },
+  "aria-autocomplete": {
+    "defaultValue": null,
+    "options": ["list", "none", "inline", "both"],
+    "required": false,
+    "type": "radio"
+  },
+  "aria-busy": {
+    "defaultValue": null,
+    "required": false,
+    "type": "boolean"
+  },
+  "aria-checked": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "aria-colcount": {
+    "defaultValue": null,
+    "required": false,
+    "type": "number"
+  },
+  "aria-colindex": {
+    "defaultValue": null,
+    "required": false,
+    "type": "number"
+  },
+  "aria-colspan": {
+    "defaultValue": null,
+    "required": false,
+    "type": "number"
+  },
+  "aria-controls": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "aria-current": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "aria-describedby": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "aria-details": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "aria-disabled": {
+    "defaultValue": null,
+    "required": false,
+    "type": "boolean"
+  },
+  "aria-dropeffect": {
+    "defaultValue": null,
+    "options": ["link", "none", "copy", "execute", "move", "popup"],
+    "required": false,
+    "type": "select"
+  },
+  "aria-errormessage": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "aria-expanded": {
+    "defaultValue": null,
+    "required": false,
+    "type": "boolean"
+  },
+  "aria-flowto": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "aria-grabbed": {
+    "defaultValue": null,
+    "required": false,
+    "type": "boolean"
+  },
+  "aria-haspopup": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "aria-hidden": {
+    "defaultValue": null,
+    "required": false,
+    "type": "boolean"
+  },
+  "aria-invalid": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "aria-keyshortcuts": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "aria-label": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "aria-labelledby": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "aria-level": {
+    "defaultValue": null,
+    "required": false,
+    "type": "number"
+  },
+  "aria-live": {
+    "defaultValue": null,
+    "options": ["off", "assertive", "polite"],
+    "required": false,
+    "type": "radio"
+  },
+  "aria-modal": {
+    "defaultValue": null,
+    "required": false,
+    "type": "boolean"
+  },
+  "aria-multiline": {
+    "defaultValue": null,
+    "required": false,
+    "type": "boolean"
+  },
+  "aria-multiselectable": {
+    "defaultValue": null,
+    "required": false,
+    "type": "boolean"
+  },
+  "aria-orientation": {
+    "defaultValue": null,
+    "options": ["horizontal", "vertical"],
+    "required": false,
+    "type": "radio"
+  },
+  "aria-owns": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "aria-placeholder": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "aria-posinset": {
+    "defaultValue": null,
+    "required": false,
+    "type": "number"
+  },
+  "aria-pressed": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "aria-readonly": {
+    "defaultValue": null,
+    "required": false,
+    "type": "boolean"
+  },
+  "aria-relevant": {
+    "defaultValue": null,
+    "options": [
+      "text",
+      "additions",
+      "additions removals",
+      "additions text",
+      "all",
+      "removals",
+      "removals additions",
+      "removals text",
+      "text additions",
+      "text removals"
+    ],
+    "required": false,
+    "type": "select"
+  },
+  "aria-required": {
+    "defaultValue": null,
+    "required": false,
+    "type": "boolean"
+  },
+  "aria-roledescription": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "aria-rowcount": {
+    "defaultValue": null,
+    "required": false,
+    "type": "number"
+  },
+  "aria-rowindex": {
+    "defaultValue": null,
+    "required": false,
+    "type": "number"
+  },
+  "aria-rowspan": {
+    "defaultValue": null,
+    "required": false,
+    "type": "number"
+  },
+  "aria-selected": {
+    "defaultValue": null,
+    "required": false,
+    "type": "boolean"
+  },
+  "aria-setsize": {
+    "defaultValue": null,
+    "required": false,
+    "type": "number"
+  },
+  "aria-sort": {
+    "defaultValue": null,
+    "options": ["none", "ascending", "descending", "other"],
+    "required": false,
+    "type": "radio"
+  },
+  "aria-valuemax": {
+    "defaultValue": null,
+    "required": false,
+    "type": "number"
+  },
+  "aria-valuemin": {
+    "defaultValue": null,
+    "required": false,
+    "type": "number"
+  },
+  "aria-valuenow": {
+    "defaultValue": null,
+    "required": false,
+    "type": "number"
+  },
+  "aria-valuetext": {
+    "defaultValue": null,
+    "required": false,
+    "type": "text"
+  },
+  "quality": {
+    "defaultValue": null,
+    "required": false,
+    "type": "number"
+  },
+  "loader": {
+    "defaultValue": null,
+    "required": true,
+    "type": "text"
+  },
+  "optimize": {
+    "defaultValue": true,
+    "required": false,
+    "type": "boolean"
+  }
+}

package/src/image-dev.stories.tsx

@@ -0,0 +1,128 @@
+// Story for image development, see https://github.com/webstudio-is/webstudio-designer/issues/387
+
+import React, { type ComponentProps, type HTMLAttributes } from "react";
+import type { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Image as ImagePrimitive, loaders } from "./";
+
+// to not allow include local assets everywhere, just enable it for this file
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import localLogoImage from "../storybook-assets/logo.webp";
+
+export default {
+  title: "Components/ImageDev",
+} as ComponentMeta<typeof ImagePrimitive>;
+
+type ImageProps = ComponentProps<typeof ImagePrimitive>;
+
+/**
+ * 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
+  : localLogoImage;
+
+const imageLoader = USE_CLOUDFLARE_IMAGE_TRANSFORM
+  ? loaders.cloudflareImageLoader({ resizeOrigin: "https://webstudio.is" })
+  : loaders.localImageLoader();
+
+const ImageBase: ComponentStory<
+  React.ForwardRefExoticComponent<
+    Omit<ImageProps, "loader"> & { style?: HTMLAttributes<"img">["style"] }
+  >
+> = (args) => {
+  const style = {
+    maxWidth: "100%",
+    display: "block",
+    ...args.style,
+  };
+
+  return (
+    <ImagePrimitive
+      {...args}
+      optimize={true}
+      loader={imageLoader}
+      style={style}
+    />
+  );
+};
+
+/**
+ * Load images depending on image width and device per pixel ratio.
+ **/
+export const FixedWidthImage: ComponentStory<React.FunctionComponent> = () => (
+  <ImageBase src={imageSrc} width="300" height="400" />
+);
+
+/**
+ * Preserve ratio using object-fit: cover. Load images depending on image width and device per pixel ratio.
+ **/
+export const FixedWidthImageCover: ComponentStory<
+  React.FunctionComponent
+> = () => (
+  <ImageBase
+    src={imageSrc}
+    width="300"
+    height="400"
+    style={{ objectFit: "cover" }}
+  />
+);
+
+/**
+ * Load images depending on the viewport width.
+ **/
+export const UnknownWidthImage: ComponentStory<
+  React.FunctionComponent
+> = () => <ImageBase src={imageSrc} />;
+
+/**
+ * Fit width of the parent container, has own aspect-ratio and object-fit=cover.
+ * Load images depending on the viewport width.
+ **/
+export const AspectRatioImage: ComponentStory<React.FunctionComponent> = () => (
+  <div style={{ width: "50%" }}>
+    <ImageBase
+      src={imageSrc}
+      style={{ aspectRatio: "2/1", objectFit: "cover", width: "100%" }}
+    />
+  </div>
+);
+
+/**
+ * Fill width and height of the relative parent container, object-fit=cover. Load images depending on the viewport width.
+ **/
+export const FillParentImage: ComponentStory<React.FunctionComponent> = () => (
+  <div style={{ width: "50%", aspectRatio: "2/1", position: "relative" }}>
+    <ImageBase
+      src={imageSrc}
+      style={{
+        objectFit: "cover",
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+      }}
+    />
+  </div>
+);
+
+/**
+ * "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 const HeroImage: ComponentStory<React.FunctionComponent> = () => (
+  <ImageBase
+    src={imageSrc}
+    sizes="100vw"
+    style={{
+      aspectRatio: "3/1",
+      objectFit: "cover",
+      width: "100%",
+    }}
+  />
+);