@webstudio-is/react-sdk 0.57.0 → 0.59.0

package/src/components/link-block.ws.tsx

@@ -1,7 +1,7 @@
 import { BoxLinkIcon } from "@webstudio-is/icons";
 import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 import { props } from "./__generated__/link-block.props";
-import { propsMeta as linkPropsMeta } from "./link.ws";
+import { meta as linkMeta, propsMeta as linkPropsMeta } from "./link.ws";
 import type { defaultTag } from "./link-block";
 import type { Style } from "@webstudio-is/css-data";
 import { a } from "../css/normalize";
@@ -21,6 +21,7 @@ export const meta: WsComponentMeta = {
   type: "container",
   label: "Link Block",
   Icon: BoxLinkIcon,
+  states: linkMeta.states,
   presetStyle,
 };
 

package/src/components/link.tsx

@@ -19,10 +19,14 @@ export const Link = forwardRef<HTMLAnchorElement, Props>((props, ref) => {
 
   const { assetBaseUrl } = getParams();
 
-  let url: string | undefined;
+  let url = "#";
+
   switch (href?.type) {
     case "page":
       url = href.page.path;
+      if (href.hash !== undefined) {
+        url += `#${href.hash}`;
+      }
       break;
     case "asset":
       url = `${assetBaseUrl}${href.asset.name}`;

package/src/components/link.ws.tsx

@@ -26,6 +26,7 @@ export const meta: WsComponentMeta = {
   label: "Link Text",
   Icon: LinkIcon,
   presetStyle,
+  states: [{ selector: "[aria-current=page]", label: "Current page" }],
   children: ["Link text you can edit"],
 };
 

package/src/index.ts

@@ -13,5 +13,6 @@ export {
 export {
   type WsComponentPropsMeta,
   type WsComponentMeta,
+  type ComponentState,
   componentCategories,
 } from "./components/component-meta";

package/src/props.test.ts

@@ -56,6 +56,22 @@ describe("resolveUrlProp", () => {
     value: page1.id,
   };
 
+  const instnaceIdProp: Prop = {
+    type: "string",
+    id: unique(),
+    instanceId: unique(),
+    name: "id",
+    value: unique(),
+  };
+
+  const pageSectionProp: Prop = {
+    type: "page",
+    id: unique(),
+    instanceId,
+    name: unique(),
+    value: { pageId: page1.id, instanceId: instnaceIdProp.instanceId },
+  };
+
   const pageByPathProp: Prop = {
     type: "string",
     id: unique(),
@@ -73,7 +89,17 @@ describe("resolveUrlProp", () => {
   };
 
   const props: PropsByInstanceId = new Map([
-    [instanceId, [pageByIdProp, pageByPathProp, arbitraryUrlProp, assetProp]],
+    [
+      instanceId,
+      [
+        pageByIdProp,
+        pageByPathProp,
+        arbitraryUrlProp,
+        assetProp,
+        pageSectionProp,
+      ],
+    ],
+    [instnaceIdProp.instanceId, [instnaceIdProp]],
   ]);
 
   const pages: Pages = new Map([
@@ -116,6 +142,15 @@ describe("resolveUrlProp", () => {
     });
   });
 
+  test("section on a page", () => {
+    expect(resolveUrlProp(instanceId, pageSectionProp.name, stores)).toEqual({
+      type: "page",
+      page: page1,
+      instanceId: instnaceIdProp.instanceId,
+      hash: instnaceIdProp.value,
+    });
+  });
+
   test("arbitrary url", () => {
     expect(resolveUrlProp(instanceId, arbitraryUrlProp.name, stores)).toEqual({
       type: "string",

package/src/props.ts

@@ -32,7 +32,7 @@ export const useInstanceProps = (instanceId: Instance["id"]) => {
   const instancePropsObject: Record<Prop["name"], Prop["value"]> = {};
   if (instanceProps) {
     for (const prop of instanceProps) {
-      if (prop.type !== "asset") {
+      if (prop.type !== "asset" && prop.type !== "page") {
         instancePropsObject[prop.name] = prop.value;
       }
     }
@@ -74,7 +74,12 @@ export const resolveUrlProp = (
     assets,
   }: { props: PropsByInstanceId; pages: Pages; assets: Assets }
 ):
-  | { type: "page"; page: Page }
+  | {
+      type: "page";
+      page: Page;
+      instanceId?: Instance["id"];
+      hash?: string;
+    }
   | { type: "asset"; asset: Asset }
   | { type: "string"; url: string }
   | undefined => {
@@ -88,8 +93,30 @@ export const resolveUrlProp = (
     }
 
     if (prop.type === "page") {
-      const page = pages.get(prop.value);
-      return page && { type: "page", page };
+      if (typeof prop.value === "string") {
+        const page = pages.get(prop.value);
+        return page && { type: "page", page };
+      }
+
+      const { instanceId, pageId } = prop.value;
+
+      const page = pages.get(pageId);
+
+      if (page === undefined) {
+        return;
+      }
+
+      const idProp = props.get(instanceId)?.find((prop) => prop.name === "id");
+
+      return {
+        type: "page",
+        page,
+        instanceId,
+        hash:
+          idProp === undefined || idProp.type !== "string"
+            ? undefined
+            : idProp.value,
+      };
     }
 
     if (prop.type === "string") {
@@ -115,7 +142,7 @@ export const resolveUrlProp = (
 export const usePropUrl = (instanceId: Instance["id"], name: string) => {
   const { propsByInstanceIdStore, pagesStore, assetsStore } =
     useContext(ReactSdkContext);
-  const pageStore = useMemo(
+  const store = useMemo(
     () =>
       computed(
         [propsByInstanceIdStore, pagesStore, assetsStore],
@@ -124,7 +151,7 @@ export const usePropUrl = (instanceId: Instance["id"], name: string) => {
       ),
     [propsByInstanceIdStore, pagesStore, assetsStore, instanceId, name]
   );
-  return useStore(pageStore);
+  return useStore(store);
 };
 
 export const getInstanceIdFromComponentProps = (