@webstudio-is/sdk-components-react 0.70.0 → 0.72.0

package/src/link.tsx

@@ -7,14 +7,9 @@ import {
 
 export const defaultTag = "a";
 
-// @todo props that come from remix link, shouldn't be here at all
-// - prefetch should be only on remix component and it already is
-// - props meta should be generated from Remix link
-// - changing this requires update in app/canvas/custom-components/link.tsx
-type Props = Omit<ComponentProps<"a">, "href" | "target"> & {
-  href?: string;
+type Props = Omit<ComponentProps<"a">, "target"> & {
+  // override (string & {}) in target to generate keywords
   target?: "_self" | "_blank" | "_parent" | "_top";
-  prefetch?: "none" | "intent" | "render";
 };
 
 export const Link = forwardRef<HTMLAnchorElement, Props>((props, ref) => {

package/src/link.ws.tsx

@@ -60,5 +60,5 @@ export const propsMeta: WsComponentPropsMeta = {
       required: false,
     },
   },
-  initialProps: ["href", "target", "prefetch"],
+  initialProps: ["href", "target"],
 };

package/src/metas.ts

@@ -31,3 +31,7 @@ export { meta as RadioButtonField } from "./radio-button-field.ws";
 export { meta as RadioButton } from "./radio-button.ws";
 export { meta as CheckboxField } from "./checkbox-field.ws";
 export { meta as Checkbox } from "./checkbox.ws";
+export { meta as Vimeo } from "./vimeo.ws";
+export { meta as VimeoPreviewImage } from "./vimeo-preview-image.ws";
+export { meta as VimeoPlayButton } from "./vimeo-play-button.ws";
+export { meta as VimeoSpinner } from "./vimeo-spinner.ws";

package/src/props.ts

@@ -31,3 +31,7 @@ export { propsMeta as RadioButtonField } from "./radio-button-field.ws";
 export { propsMeta as RadioButton } from "./radio-button.ws";
 export { propsMeta as CheckboxField } from "./checkbox-field.ws";
 export { propsMeta as Checkbox } from "./checkbox.ws";
+export { propsMeta as Vimeo } from "./vimeo.ws";
+export { propsMeta as VimeoPreviewImage } from "./vimeo-preview-image.ws";
+export { propsMeta as VimeoPlayButton } from "./vimeo-play-button.ws";
+export { propsMeta as VimeoSpinner } from "./vimeo-spinner.ws";

package/src/rich-text-link.ws.tsx

@@ -2,21 +2,13 @@ import type {
   WsComponentMeta,
   WsComponentPropsMeta,
 } from "@webstudio-is/react-sdk";
-import { props } from "./__generated__/rich-text-link.props";
 import { meta as linkMeta, propsMeta as linkPropsMeta } from "./link.ws";
 
-const { category, ...linkMetaRest } = linkMeta;
-
 export const meta: WsComponentMeta = {
-  ...linkMetaRest,
+  ...linkMeta,
+  category: "hidden",
   type: "rich-text-child",
   template: [],
 };
 
-export const propsMeta: WsComponentPropsMeta = {
-  initialProps: linkPropsMeta.initialProps,
-  props: {
-    ...props,
-    href: linkPropsMeta.props.href,
-  },
-};
+export const propsMeta: WsComponentPropsMeta = linkPropsMeta;

package/src/vimeo-play-button.stories.tsx

@@ -0,0 +1,17 @@
+import type { ComponentStory, ComponentMeta } from "@storybook/react";
+import { VimeoPlayButton as VimeoPlayButtonPrimitive } from "./vimeo-play-button";
+
+export default {
+  title: "Components/Vimeo Preview Image",
+  component: VimeoPlayButtonPrimitive,
+} as ComponentMeta<typeof VimeoPlayButtonPrimitive>;
+
+const Template: ComponentStory<typeof VimeoPlayButtonPrimitive> = (args) => (
+  <VimeoPlayButtonPrimitive
+    {...args}
+    style={{ minHeight: 20, outline: "1px solid black" }}
+  />
+);
+
+export const VimeoPlayButton = Template.bind({});
+VimeoPlayButton.args = {};

package/src/vimeo-play-button.tsx

@@ -0,0 +1,24 @@
+import {
+  forwardRef,
+  type ElementRef,
+  type ComponentProps,
+  useContext,
+} from "react";
+import { VimeoContext } from "./vimeo";
+import { Button, defaultTag } from "./button";
+
+export { defaultTag };
+
+type Props = ComponentProps<typeof Button>;
+
+export const VimeoPlayButton = forwardRef<ElementRef<typeof defaultTag>, Props>(
+  (props, ref) => {
+    const vimeoContext = useContext(VimeoContext);
+    if (vimeoContext.status !== "initial") {
+      return null;
+    }
+    return <Button {...props} onClick={vimeoContext.onInitPlayer} ref={ref} />;
+  }
+);
+
+VimeoPlayButton.displayName = "VimeoPlayButton";

package/src/vimeo-play-button.ws.ts

@@ -0,0 +1,29 @@
+import {
+  defaultStates,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+} from "@webstudio-is/react-sdk";
+import { props } from "./__generated__/vimeo-play-button.props";
+import { ButtonElementIcon } from "@webstudio-is/icons/svg";
+import { button } from "@webstudio-is/react-sdk/css-normalize";
+import { defaultTag } from "./vimeo-play-button";
+
+const presetStyle = {
+  button,
+} satisfies PresetStyle<typeof defaultTag>;
+
+export const meta: WsComponentMeta = {
+  category: "hidden",
+  type: "container",
+  invalidAncestors: ["Button"],
+  requiredAncestors: ["Vimeo"],
+  label: "Play Button",
+  icon: ButtonElementIcon,
+  presetStyle,
+  states: defaultStates,
+};
+
+export const propsMeta: WsComponentPropsMeta = {
+  props,
+};

package/src/vimeo-preview-image.stories.tsx

@@ -0,0 +1,17 @@
+import type { ComponentStory, ComponentMeta } from "@storybook/react";
+import { VimeoPreviewImage as VimeoPreviewImagePrimitive } from "./vimeo-preview-image";
+
+export default {
+  title: "Components/Vimeo Preview Image",
+  component: VimeoPreviewImagePrimitive,
+} as ComponentMeta<typeof VimeoPreviewImagePrimitive>;
+
+const Template: ComponentStory<typeof VimeoPreviewImagePrimitive> = (args) => (
+  <VimeoPreviewImagePrimitive
+    {...args}
+    style={{ minHeight: 20, outline: "1px solid black" }}
+  />
+);
+
+export const VimeoPreviewImage = Template.bind({});
+VimeoPreviewImage.args = {};

package/src/vimeo-preview-image.tsx

@@ -0,0 +1,30 @@
+import {
+  forwardRef,
+  type ElementRef,
+  type ComponentProps,
+  useContext,
+} from "react";
+import { Image, defaultTag } from "./image";
+import { VimeoContext } from "./vimeo";
+
+// Generated using https://png-pixel.com/
+const base64Preview = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkOAMAANIAzr59FiYAAAAASUVORK5CYII=`;
+
+type Props = ComponentProps<typeof Image>;
+
+export const VimeoPreviewImage = forwardRef<
+  ElementRef<typeof defaultTag>,
+  Props
+>(({ src, ...rest }, ref) => {
+  const vimeoContext = useContext(VimeoContext);
+
+  return (
+    <Image
+      {...rest}
+      src={String(vimeoContext.previewImageUrl ?? src ?? base64Preview)}
+      ref={ref}
+    />
+  );
+});
+
+VimeoPreviewImage.displayName = "VimeoPreviewImage";

package/src/vimeo-preview-image.ws.ts

@@ -0,0 +1,22 @@
+import {
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+} from "@webstudio-is/react-sdk";
+import {
+  propsOverrides as imagePropsOverrides,
+  propsMeta as imagePropsMeta,
+  meta as imageMeta,
+} from "./image.ws";
+import { props } from "./__generated__/vimeo-preview-image.props";
+
+export const meta: WsComponentMeta = {
+  ...imageMeta,
+  category: "hidden",
+  label: "Preview Image",
+  requiredAncestors: ["Vimeo"],
+};
+
+export const propsMeta: WsComponentPropsMeta = {
+  props: { ...props, ...imagePropsOverrides },
+  initialProps: imagePropsMeta.initialProps,
+};

package/src/vimeo-spinner.stories.tsx

@@ -0,0 +1,17 @@
+import type { ComponentStory, ComponentMeta } from "@storybook/react";
+import { VimeoSpinner as VimeoSpinnerPrimitive } from "./vimeo-spinner";
+
+export default {
+  title: "Components/Vimeo Preview Image",
+  component: VimeoSpinnerPrimitive,
+} as ComponentMeta<typeof VimeoSpinnerPrimitive>;
+
+const Template: ComponentStory<typeof VimeoSpinnerPrimitive> = (args) => (
+  <VimeoSpinnerPrimitive
+    {...args}
+    style={{ minHeight: 20, outline: "1px solid black" }}
+  />
+);
+
+export const VimeoSpinner = Template.bind({});
+VimeoSpinner.args = {};

package/src/vimeo-spinner.tsx

@@ -0,0 +1,25 @@
+import {
+  forwardRef,
+  type ElementRef,
+  type ComponentProps,
+  useContext,
+} from "react";
+import { VimeoContext } from "./vimeo";
+
+const defaultTag = "div";
+
+type Props = ComponentProps<typeof defaultTag>;
+
+export const VimeoSpinner = forwardRef<ElementRef<typeof defaultTag>, Props>(
+  (props, ref) => {
+    const vimeoContext = useContext(VimeoContext);
+
+    if (vimeoContext.status !== "initialized") {
+      return null;
+    }
+
+    return <div {...props} ref={ref} />;
+  }
+);
+
+VimeoSpinner.displayName = "VimeoSpinner";

package/src/vimeo-spinner.ws.ts

@@ -0,0 +1,27 @@
+import {
+  defaultStates,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+} from "@webstudio-is/react-sdk";
+import { props } from "./__generated__/vimeo-spinner.props";
+import { div } from "@webstudio-is/react-sdk/css-normalize";
+import { BoxIcon } from "@webstudio-is/icons/svg";
+
+const presetStyle = {
+  div,
+} satisfies PresetStyle<"div">;
+
+export const meta: WsComponentMeta = {
+  type: "container",
+  icon: BoxIcon,
+  states: defaultStates,
+  presetStyle,
+  category: "hidden",
+  label: "Spinner",
+  requiredAncestors: ["Vimeo"],
+};
+
+export const propsMeta: WsComponentPropsMeta = {
+  props,
+};

package/src/vimeo.stories.tsx

@@ -0,0 +1,17 @@
+import type { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Vimeo as VimeoPrimitive } from "./vimeo";
+
+export default {
+  title: "Components/Vimeo",
+  component: VimeoPrimitive,
+} as ComponentMeta<typeof VimeoPrimitive>;
+
+const Template: ComponentStory<typeof VimeoPrimitive> = (args) => (
+  <VimeoPrimitive
+    {...args}
+    style={{ minHeight: 20, outline: "1px solid black" }}
+  />
+);
+
+export const Vimeo = Template.bind({});
+Vimeo.args = {};