create-plasmic-app 0.0.66 → 0.0.68

package/cpa-out/react-loader-js/src/components/plasmic/create_plasmic_app/PlasmicDynamicPage.jsx

@@ -0,0 +1,166 @@
+// @ts-nocheck
+/* eslint-disable */
+/* tslint:disable */
+/* prettier-ignore-start */
+/** @jsxRuntime classic */
+/** @jsx createPlasmicElementProxy */
+/** @jsxFrag React.Fragment */
+// This class is auto-generated by Plasmic; please do not edit!
+// Plasmic Project: 47tFXWjN2C4NyHFGGpaYQ3
+// Component: AO44A-w7hh
+import * as React from "react";
+import * as p from "@plasmicapp/react-web";
+import * as ph from "@plasmicapp/react-web/lib/host";
+import {
+  classNames,
+  createPlasmicElementProxy,
+  deriveRenderOpts
+} from "@plasmicapp/react-web";
+import RandomDynamicPageButton from "../../RandomDynamicPageButton"; // plasmic-import: Q23H1_1M_P/component
+import "@plasmicapp/react-web/lib/plasmic.css";
+import projectcss from "./plasmic_create_plasmic_app.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss
+import sty from "./PlasmicDynamicPage.module.css"; // plasmic-import: AO44A-w7hh/css
+
+export const PlasmicDynamicPage__VariantProps = new Array();
+
+export const PlasmicDynamicPage__ArgProps = new Array();
+
+const __wrapUserFunction =
+  globalThis.__PlasmicWrapUserFunction ?? ((loc, fn) => fn());
+
+const __wrapUserPromise =
+  globalThis.__PlasmicWrapUserPromise ??
+  (async (loc, promise) => {
+    return await promise;
+  });
+
+function PlasmicDynamicPage__RenderFunc(props) {
+  const { variants, overrides, forNode } = props;
+  const $ctx = ph.useDataEnv?.() || {};
+  const args = React.useMemo(() => Object.assign({}, props.args), [props.args]);
+  const $props = {
+    ...args,
+    ...variants
+  };
+  const refsRef = React.useRef({});
+  const $refs = refsRef.current;
+  const currentUser = p.useCurrentUser?.() || {};
+  const [$queries, setDollarQueries] = React.useState({});
+  return (
+    <React.Fragment>
+      <div className={projectcss.plasmic_page_wrapper}>
+        <div
+          data-plasmic-name={"root"}
+          data-plasmic-override={overrides.root}
+          data-plasmic-root={true}
+          data-plasmic-for-node={forNode}
+          className={classNames(
+            projectcss.all,
+            projectcss.root_reset,
+            projectcss.plasmic_default_styles,
+            projectcss.plasmic_mixins,
+            sty.root
+          )}
+        >
+          <p.Stack
+            as={"section"}
+            data-plasmic-name={"section"}
+            data-plasmic-override={overrides.section}
+            hasGap={true}
+            className={classNames(projectcss.all, sty.section)}
+          >
+            <h1
+              data-plasmic-name={"h1"}
+              data-plasmic-override={overrides.h1}
+              className={classNames(
+                projectcss.all,
+                projectcss.h1,
+                projectcss.__wab_text,
+                sty.h1
+              )}
+            >
+              {(() => {
+                try {
+                  return $ctx.params.slug;
+                } catch (e) {
+                  if (e instanceof TypeError) {
+                    return "Page 1";
+                  }
+                  throw e;
+                }
+              })()}
+            </h1>
+
+            <RandomDynamicPageButton
+              data-plasmic-name={"randomDynamicPageButton"}
+              data-plasmic-override={overrides.randomDynamicPageButton}
+              className={classNames(
+                "__wab_instance",
+                sty.randomDynamicPageButton
+              )}
+            />
+          </p.Stack>
+        </div>
+      </div>
+    </React.Fragment>
+  );
+}
+
+const PlasmicDescendants = {
+  root: ["root", "section", "h1", "randomDynamicPageButton"],
+  section: ["section", "h1", "randomDynamicPageButton"],
+  h1: ["h1"],
+  randomDynamicPageButton: ["randomDynamicPageButton"]
+};
+
+function makeNodeComponent(nodeName) {
+  const func = function (props) {
+    const { variants, args, overrides } = React.useMemo(
+      () =>
+        deriveRenderOpts(props, {
+          name: nodeName,
+          descendantNames: [...PlasmicDescendants[nodeName]],
+          internalArgPropNames: PlasmicDynamicPage__ArgProps,
+          internalVariantPropNames: PlasmicDynamicPage__VariantProps
+        }),
+      [props, nodeName]
+    );
+
+    return PlasmicDynamicPage__RenderFunc({
+      variants,
+      args,
+      overrides,
+      forNode: nodeName
+    });
+  };
+  if (nodeName === "root") {
+    func.displayName = "PlasmicDynamicPage";
+  } else {
+    func.displayName = `PlasmicDynamicPage.${nodeName}`;
+  }
+  return func;
+}
+
+export const PlasmicDynamicPage = Object.assign(
+  // Top-level PlasmicDynamicPage renders the root element
+  makeNodeComponent("root"),
+  {
+    // Helper components rendering sub-elements
+    section: makeNodeComponent("section"),
+    h1: makeNodeComponent("h1"),
+    randomDynamicPageButton: makeNodeComponent("randomDynamicPageButton"),
+    // Metadata about props expected for PlasmicDynamicPage
+    internalVariantProps: PlasmicDynamicPage__VariantProps,
+    internalArgProps: PlasmicDynamicPage__ArgProps,
+    // Page metadata
+    pageMetadata: {
+      title: "",
+      description: "",
+      ogImageSrc: "",
+      canonical: ""
+    }
+  }
+);
+
+export default PlasmicDynamicPage;
+/* prettier-ignore-end */

package/cpa-out/react-loader-js/src/components/plasmic/create_plasmic_app/PlasmicHomepage.jsx

@@ -10,7 +10,7 @@
 // Component: 6uuAAE1jiCew
 import * as React from "react";
 import * as p from "@plasmicapp/react-web";
-import * as ph from "@plasmicapp/host";
+import * as ph from "@plasmicapp/react-web/lib/host";
 import {
   hasVariant,
   classNames,
@@ -18,6 +18,7 @@ import {
   deriveRenderOpts,
   ensureGlobalVariants
 } from "@plasmicapp/react-web";
+import RandomDynamicPageButton from "../../RandomDynamicPageButton"; // plasmic-import: Q23H1_1M_P/component
 import { useScreenVariants as useScreenVariantsscBjPxgdxdzbv } from "./PlasmicGlobalVariant__Screen"; // plasmic-import: SCBjPXGDXDZBV/globalVariant
 import "@plasmicapp/react-web/lib/plasmic.css";
 import projectcss from "./plasmic_create_plasmic_app.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss
@@ -44,6 +45,8 @@ function PlasmicHomepage__RenderFunc(props) {
     ...args,
     ...variants
   };
+  const refsRef = React.useRef({});
+  const $refs = refsRef.current;
   const currentUser = p.useCurrentUser?.() || {};
   const [$queries, setDollarQueries] = React.useState({});
   const globalVariants = ensureGlobalVariants({
@@ -129,6 +132,15 @@ function PlasmicHomepage__RenderFunc(props) {
                 </React.Fragment>
               )}
             </div>
+
+            <RandomDynamicPageButton
+              data-plasmic-name={"randomDynamicPageButton"}
+              data-plasmic-override={overrides.randomDynamicPageButton}
+              className={classNames(
+                "__wab_instance",
+                sty.randomDynamicPageButton
+              )}
+            />
           </p.Stack>
         </div>
       </div>
@@ -137,10 +149,11 @@ function PlasmicHomepage__RenderFunc(props) {
 }
 
 const PlasmicDescendants = {
-  root: ["root", "section", "h1", "text"],
-  section: ["section", "h1", "text"],
+  root: ["root", "section", "h1", "text", "randomDynamicPageButton"],
+  section: ["section", "h1", "text", "randomDynamicPageButton"],
   h1: ["h1"],
-  text: ["text"]
+  text: ["text"],
+  randomDynamicPageButton: ["randomDynamicPageButton"]
 };
 
 function makeNodeComponent(nodeName) {
@@ -179,6 +192,7 @@ export const PlasmicHomepage = Object.assign(
     section: makeNodeComponent("section"),
     h1: makeNodeComponent("h1"),
     text: makeNodeComponent("text"),
+    randomDynamicPageButton: makeNodeComponent("randomDynamicPageButton"),
     // Metadata about props expected for PlasmicHomepage
     internalVariantProps: PlasmicHomepage__VariantProps,
     internalArgProps: PlasmicHomepage__ArgProps,

package/cpa-out/react-loader-js/src/components/plasmic/create_plasmic_app/PlasmicRandomDynamicPageButton.jsx

@@ -0,0 +1,161 @@
+// @ts-nocheck
+/* eslint-disable */
+/* tslint:disable */
+/* prettier-ignore-start */
+/** @jsxRuntime classic */
+/** @jsx createPlasmicElementProxy */
+/** @jsxFrag React.Fragment */
+// This class is auto-generated by Plasmic; please do not edit!
+// Plasmic Project: 47tFXWjN2C4NyHFGGpaYQ3
+// Component: Q23H1_1M_P
+import * as React from "react";
+import * as p from "@plasmicapp/react-web";
+import * as ph from "@plasmicapp/react-web/lib/host";
+import {
+  classNames,
+  createPlasmicElementProxy,
+  deriveRenderOpts
+} from "@plasmicapp/react-web";
+import Button from "../../Button"; // plasmic-import: TQcvW_pSKi3/component
+import "@plasmicapp/react-web/lib/plasmic.css";
+import sty from "./PlasmicRandomDynamicPageButton.module.css"; // plasmic-import: Q23H1_1M_P/css
+
+export const PlasmicRandomDynamicPageButton__VariantProps = new Array();
+
+export const PlasmicRandomDynamicPageButton__ArgProps = new Array();
+
+const __wrapUserFunction =
+  globalThis.__PlasmicWrapUserFunction ?? ((loc, fn) => fn());
+
+const __wrapUserPromise =
+  globalThis.__PlasmicWrapUserPromise ??
+  (async (loc, promise) => {
+    return await promise;
+  });
+
+function PlasmicRandomDynamicPageButton__RenderFunc(props) {
+  const { variants, overrides, forNode } = props;
+  const $ctx = ph.useDataEnv?.() || {};
+  const args = React.useMemo(() => Object.assign({}, props.args), [props.args]);
+  const $props = {
+    ...args,
+    ...variants
+  };
+  const refsRef = React.useRef({});
+  const $refs = refsRef.current;
+  const currentUser = p.useCurrentUser?.() || {};
+  const [$queries, setDollarQueries] = React.useState({});
+  return (
+    <Button
+      data-plasmic-name={"root"}
+      data-plasmic-override={overrides.root}
+      data-plasmic-root={true}
+      data-plasmic-for-node={forNode}
+      className={classNames("__wab_instance", sty.root)}
+      onClick={async event => {
+        const $steps = {};
+        $steps["goToDynamicPage"] = true
+          ? (() => {
+              const actionArgs = {
+                destination: __wrapUserFunction(
+                  {
+                    type: "InteractionArgLoc",
+                    actionName: "navigation",
+                    interactionUuid: "9Y3jL0zxjA",
+                    componentUuid: "Q23H1_1M_P",
+                    argName: "destination"
+                  },
+                  () =>
+                    `/dynamic/${(() => {
+                      try {
+                        return Math.random().toString(36).slice(2);
+                      } catch (e) {
+                        if (e instanceof TypeError) {
+                          return "value";
+                        }
+                        throw e;
+                      }
+                    })()}`
+                )
+              };
+              return __wrapUserFunction(
+                {
+                  type: "InteractionLoc",
+                  actionName: "navigation",
+                  interactionUuid: "9Y3jL0zxjA",
+                  componentUuid: "Q23H1_1M_P"
+                },
+                () =>
+                  (({ destination }) => {
+                    location.assign(destination);
+                  })?.apply(null, [actionArgs]),
+                actionArgs
+              );
+            })()
+          : undefined;
+        if (
+          typeof $steps["goToDynamicPage"] === "object" &&
+          typeof $steps["goToDynamicPage"].then === "function"
+        ) {
+          $steps["goToDynamicPage"] = await __wrapUserPromise(
+            {
+              type: "InteractionLoc",
+              actionName: "navigation",
+              interactionUuid: "9Y3jL0zxjA",
+              componentUuid: "Q23H1_1M_P"
+            },
+            $steps["goToDynamicPage"]
+          );
+        }
+      }}
+    >
+      {"Random Dynamic Page"}
+    </Button>
+  );
+}
+
+const PlasmicDescendants = {
+  root: ["root"]
+};
+
+function makeNodeComponent(nodeName) {
+  const func = function (props) {
+    const { variants, args, overrides } = React.useMemo(
+      () =>
+        deriveRenderOpts(props, {
+          name: nodeName,
+          descendantNames: [...PlasmicDescendants[nodeName]],
+          internalArgPropNames: PlasmicRandomDynamicPageButton__ArgProps,
+          internalVariantPropNames: PlasmicRandomDynamicPageButton__VariantProps
+        }),
+      [props, nodeName]
+    );
+
+    return PlasmicRandomDynamicPageButton__RenderFunc({
+      variants,
+      args,
+      overrides,
+      forNode: nodeName
+    });
+  };
+  if (nodeName === "root") {
+    func.displayName = "PlasmicRandomDynamicPageButton";
+  } else {
+    func.displayName = `PlasmicRandomDynamicPageButton.${nodeName}`;
+  }
+  return func;
+}
+
+export const PlasmicRandomDynamicPageButton = Object.assign(
+  // Top-level PlasmicRandomDynamicPageButton renders the root element
+  makeNodeComponent("root"),
+  {
+    // Helper components rendering sub-elements
+    // Metadata about props expected for PlasmicRandomDynamicPageButton
+    internalVariantProps: PlasmicRandomDynamicPageButton__VariantProps,
+    internalArgProps: PlasmicRandomDynamicPageButton__ArgProps
+  }
+);
+
+export default PlasmicRandomDynamicPageButton;
+/* prettier-ignore-end */

package/cpa-out/react-loader-js/src/components/plasmic/create_plasmic_app/icons/PlasmicIcon__Checksvg.jsx

@@ -0,0 +1,39 @@
+// @ts-nocheck
+/* eslint-disable */
+/* tslint:disable */
+/* prettier-ignore-start */
+import React from "react";
+import { classNames } from "@plasmicapp/react-web";
+
+export function ChecksvgIcon(props) {
+  const { className, style, title, ...restProps } = props;
+  return (
+    <svg
+      xmlns={"http://www.w3.org/2000/svg"}
+      fill={"none"}
+      viewBox={"0 0 24 24"}
+      height={"1em"}
+      width={"1em"}
+      style={{
+        fill: "currentcolor",
+        ...(style || {}),
+      }}
+      className={classNames("plasmic-default__svg", className)}
+      {...restProps}
+    >
+      {title && <title>{title}</title>}
+
+      <path
+        fillRule={"evenodd"}
+        clipRule={"evenodd"}
+        d={
+          "M18.416 5.876a.75.75 0 01.208 1.04L11.42 17.721a1.75 1.75 0 01-2.871.06l-3.156-4.34a.75.75 0 111.214-.882l3.155 4.339a.25.25 0 00.41-.009l7.204-10.805a.75.75 0 011.04-.208z"
+        }
+        fill={"currentColor"}
+      ></path>
+    </svg>
+  );
+}
+
+export default ChecksvgIcon;
+/* prettier-ignore-end */

package/cpa-out/react-loader-js/src/components/plasmic/create_plasmic_app/icons/PlasmicIcon__Icon.jsx

@@ -0,0 +1,37 @@
+// @ts-nocheck
+/* eslint-disable */
+/* tslint:disable */
+/* prettier-ignore-start */
+import React from "react";
+import { classNames } from "@plasmicapp/react-web";
+
+export function IconIcon(props) {
+  const { className, style, title, ...restProps } = props;
+  return (
+    <svg
+      xmlns={"http://www.w3.org/2000/svg"}
+      stroke={"currentColor"}
+      fill={"currentColor"}
+      strokeWidth={"0"}
+      viewBox={"0 0 16 16"}
+      height={"1em"}
+      width={"1em"}
+      className={classNames("plasmic-default__svg", className)}
+      style={style}
+      {...restProps}
+    >
+      {title && <title>{title}</title>}
+
+      <path
+        fillRule={"evenodd"}
+        d={
+          "M1 8a.5.5 0 01.5-.5h11.793l-3.147-3.146a.5.5 0 01.708-.708l4 4a.5.5 0 010 .708l-4 4a.5.5 0 01-.708-.708L13.293 8.5H1.5A.5.5 0 011 8z"
+        }
+        stroke={"none"}
+      ></path>
+    </svg>
+  );
+}
+
+export default IconIcon;
+/* prettier-ignore-end */

package/cpa-out/react-loader-ts/package.json

@@ -3,9 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@plasmicapp/cli": "^0.1.205",
-    "@plasmicapp/host": "^1.0.100",
-    "@plasmicapp/react-web": "^0.2.150",
+    "@plasmicapp/cli": "^0.1.231",
+    "@plasmicapp/react-web": "^0.2.174",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",

package/cpa-out/react-loader-ts/plasmic.json

@@ -40,9 +40,60 @@
           "cssFilePath": "plasmic/create_plasmic_app/PlasmicHomepage.module.css",
           "scheme": "blackbox",
           "componentType": "page"
+        },
+        {
+          "id": "AO44A-w7hh",
+          "name": "DynamicPage",
+          "type": "managed",
+          "projectId": "47tFXWjN2C4NyHFGGpaYQ3",
+          "renderModuleFilePath": "plasmic/create_plasmic_app/PlasmicDynamicPage.tsx",
+          "importSpec": {
+            "modulePath": "DynamicPage.tsx"
+          },
+          "cssFilePath": "plasmic/create_plasmic_app/PlasmicDynamicPage.module.css",
+          "scheme": "blackbox",
+          "componentType": "page"
+        },
+        {
+          "id": "TQcvW_pSKi3",
+          "name": "Button",
+          "type": "managed",
+          "projectId": "47tFXWjN2C4NyHFGGpaYQ3",
+          "renderModuleFilePath": "plasmic/create_plasmic_app/PlasmicButton.tsx",
+          "importSpec": {
+            "modulePath": "Button.tsx"
+          },
+          "cssFilePath": "plasmic/create_plasmic_app/PlasmicButton.module.css",
+          "scheme": "blackbox",
+          "componentType": "component",
+          "plumeType": "button"
+        },
+        {
+          "id": "Q23H1_1M_P",
+          "name": "RandomDynamicPageButton",
+          "type": "managed",
+          "projectId": "47tFXWjN2C4NyHFGGpaYQ3",
+          "renderModuleFilePath": "plasmic/create_plasmic_app/PlasmicRandomDynamicPageButton.tsx",
+          "importSpec": {
+            "modulePath": "RandomDynamicPageButton.tsx"
+          },
+          "cssFilePath": "plasmic/create_plasmic_app/PlasmicRandomDynamicPageButton.module.css",
+          "scheme": "blackbox",
+          "componentType": "component"
+        }
+      ],
+      "icons": [
+        {
+          "id": "gj-_D7n31Ho",
+          "name": "ChecksvgIcon",
+          "moduleFilePath": "plasmic/create_plasmic_app/icons/PlasmicIcon__Checksvg.tsx"
+        },
+        {
+          "id": "6PNxx3YMyDQ",
+          "name": "IconIcon",
+          "moduleFilePath": "plasmic/create_plasmic_app/icons/PlasmicIcon__Icon.tsx"
         }
       ],
-      "icons": [],
       "images": [],
       "indirect": false,
       "globalContextsFilePath": "",
@@ -71,6 +122,6 @@
     ]
   },
   "wrapPagesWithGlobalContexts": true,
-  "cliVersion": "0.1.205",
-  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.205/dist/plasmic.schema.json"
+  "cliVersion": "0.1.231",
+  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.231/dist/plasmic.schema.json"
 }

package/cpa-out/react-loader-ts/src/components/Button.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import {
+  PlasmicButton,
+  DefaultButtonProps
+} from "./plasmic/create_plasmic_app/PlasmicButton";
+import {
+  ButtonRef,
+  HtmlAnchorOnlyProps,
+  HtmlButtonOnlyProps
+} from "@plasmicapp/react-web";
+
+interface ButtonProps extends DefaultButtonProps {
+  // Feel free to add any additional props that this component should receive
+}
+function Button_(props: ButtonProps, ref: ButtonRef) {
+  const { plasmicProps } = PlasmicButton.useBehavior<ButtonProps>(props, ref);
+  return <PlasmicButton {...plasmicProps} />;
+}
+
+type ButtonComponentType = {
+  (
+    props: Omit<ButtonProps, HtmlAnchorOnlyProps> & {
+      ref?: React.Ref<HTMLButtonElement>;
+    }
+  ): React.ReactElement;
+  (
+    props: Omit<ButtonProps, HtmlButtonOnlyProps> & {
+      ref?: React.Ref<HTMLAnchorElement>;
+    }
+  ): React.ReactElement;
+};
+const Button = React.forwardRef(Button_) as any as ButtonComponentType;
+
+export default Object.assign(Button, {
+  __plumeType: "button"
+});

package/cpa-out/react-loader-ts/src/components/DynamicPage.tsx

@@ -0,0 +1,45 @@
+// This is a skeleton starter React component generated by Plasmic.
+// This file is owned by you, feel free to edit as you see fit.
+import * as React from "react";
+import {
+  PlasmicDynamicPage,
+  DefaultDynamicPageProps
+} from "./plasmic/create_plasmic_app/PlasmicDynamicPage";
+import { HTMLElementRefOf } from "@plasmicapp/react-web";
+
+// Your component props start with props for variants and slots you defined
+// in Plasmic, but you can add more here, like event handlers that you can
+// attach to named nodes in your component.
+//
+// If you don't want to expose certain variants or slots as a prop, you can use
+// Omit to hide them:
+//
+// interface DynamicPageProps extends Omit<DefaultDynamicPageProps, "hideProps1"|"hideProp2"> {
+//   // etc.
+// }
+//
+// You can also stop extending from DefaultDynamicPageProps altogether and have
+// total control over the props for your component.
+export interface DynamicPageProps extends DefaultDynamicPageProps {}
+
+function DynamicPage_(props: DynamicPageProps, ref: HTMLElementRefOf<"div">) {
+  // Use PlasmicDynamicPage to render this component as it was
+  // designed in Plasmic, by activating the appropriate variants,
+  // attaching the appropriate event handlers, etc.  You
+  // can also install whatever React hooks you need here to manage state or
+  // fetch data.
+  //
+  // Props you can pass into PlasmicDynamicPage are:
+  // 1. Variants you want to activate,
+  // 2. Contents for slots you want to fill,
+  // 3. Overrides for any named node in the component to attach behavior and data,
+  // 4. Props to set on the root node.
+  //
+  // By default, we are just piping all DynamicPageProps here, but feel free
+  // to do whatever works for you.
+
+  return <PlasmicDynamicPage root={{ ref }} {...props} />;
+}
+
+const DynamicPage = React.forwardRef(DynamicPage_);
+export default DynamicPage;

package/cpa-out/react-loader-ts/src/components/RandomDynamicPageButton.tsx

@@ -0,0 +1,44 @@
+// This is a skeleton starter React component generated by Plasmic.
+// This file is owned by you, feel free to edit as you see fit.
+import * as React from "react";
+import {
+  PlasmicRandomDynamicPageButton,
+  DefaultRandomDynamicPageButtonProps
+} from "./plasmic/create_plasmic_app/PlasmicRandomDynamicPageButton";
+
+// Your component props start with props for variants and slots you defined
+// in Plasmic, but you can add more here, like event handlers that you can
+// attach to named nodes in your component.
+//
+// If you don't want to expose certain variants or slots as a prop, you can use
+// Omit to hide them:
+//
+// interface RandomDynamicPageButtonProps extends Omit<DefaultRandomDynamicPageButtonProps, "hideProps1"|"hideProp2"> {
+//   // etc.
+// }
+//
+// You can also stop extending from DefaultRandomDynamicPageButtonProps altogether and have
+// total control over the props for your component.
+export interface RandomDynamicPageButtonProps
+  extends DefaultRandomDynamicPageButtonProps {}
+
+function RandomDynamicPageButton(props: RandomDynamicPageButtonProps) {
+  // Use PlasmicRandomDynamicPageButton to render this component as it was
+  // designed in Plasmic, by activating the appropriate variants,
+  // attaching the appropriate event handlers, etc.  You
+  // can also install whatever React hooks you need here to manage state or
+  // fetch data.
+  //
+  // Props you can pass into PlasmicRandomDynamicPageButton are:
+  // 1. Variants you want to activate,
+  // 2. Contents for slots you want to fill,
+  // 3. Overrides for any named node in the component to attach behavior and data,
+  // 4. Props to set on the root node.
+  //
+  // By default, we are just piping all RandomDynamicPageButtonProps here, but feel free
+  // to do whatever works for you.
+
+  return <PlasmicRandomDynamicPageButton {...props} />;
+}
+
+export default RandomDynamicPageButton;