create-plasmic-app 0.0.133 → 0.0.135

package/cpa-out/nextjs-app-codegen-js/components/plasmic/create_plasmic_app/PlasmicRandomDynamicPageButton.jsx

@@ -0,0 +1,159 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-nocheck
+/* 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
+"use client";
+import * as React from "react";
+import { useRouter } from "next/navigation";
+import {
+  classNames,
+  createPlasmicElementProxy,
+  deriveRenderOpts
+} from "@plasmicapp/react-web";
+import { useDataEnv } from "@plasmicapp/host";
+import Button from "../../Button"; // plasmic-import: TQcvW_pSKi3/component
+import { _useStyleTokens } from "./PlasmicStyleTokensProvider"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/styleTokensProvider
+import "@plasmicapp/react-web/lib/plasmic.css";
+import sty from "./PlasmicRandomDynamicPageButton.module.css"; // plasmic-import: Q23H1_1M_P/css
+
+createPlasmicElementProxy;
+
+export const PlasmicRandomDynamicPageButton__VariantProps = new Array();
+
+export const PlasmicRandomDynamicPageButton__ArgProps = new Array();
+
+const $$ = {};
+
+function useNextRouter() {
+  try {
+    return useRouter();
+  } catch {}
+  return undefined;
+}
+
+function PlasmicRandomDynamicPageButton__RenderFunc(props) {
+  const { variants, overrides, forNode } = props;
+  const args = React.useMemo(
+    () =>
+      Object.assign(
+        {},
+        Object.fromEntries(
+          Object.entries(props.args).filter(([_, v]) => v !== undefined)
+        )
+      ),
+    [props.args]
+  );
+  const $props = {
+    ...args,
+    ...variants
+  };
+  const __nextRouter = useNextRouter();
+  const $ctx = useDataEnv?.() || {};
+  const refsRef = React.useRef({});
+  const $refs = refsRef.current;
+  const styleTokensClassNames = _useStyleTokens();
+  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: `/dynamic/${(() => {
+                  try {
+                    return Math.random().toString(36).slice(2);
+                  } catch (e) {
+                    if (
+                      e instanceof TypeError ||
+                      e?.plasmicType === "PlasmicUndefinedDataError"
+                    ) {
+                      return "value";
+                    }
+                    throw e;
+                  }
+                })()}`
+              };
+              return (({ destination }) => {
+                if (
+                  typeof destination === "string" &&
+                  destination.startsWith("#")
+                ) {
+                  document
+                    .getElementById(destination.substr(1))
+                    .scrollIntoView({ behavior: "smooth" });
+                } else {
+                  __nextRouter?.push(destination);
+                }
+              })?.apply(null, [actionArgs]);
+            })()
+          : undefined;
+        if (
+          $steps["goToDynamicPage"] != null &&
+          typeof $steps["goToDynamicPage"] === "object" &&
+          typeof $steps["goToDynamicPage"].then === "function"
+        ) {
+          $steps["goToDynamicPage"] = await $steps["goToDynamicPage"];
+        }
+      }}
+      submitsForm={true}
+    >
+      {"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/nextjs-app-codegen-js/components/plasmic/create_plasmic_app/PlasmicStyleTokensProvider.jsx

@@ -0,0 +1,15 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-nocheck
+// This code is auto-generated by Plasmic; please do not edit!
+// Plasmic Project: 47tFXWjN2C4NyHFGGpaYQ3
+import { createUseStyleTokens } from "@plasmicapp/react-web";
+import { _useGlobalVariants } from "./plasmic"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectModule
+import projectcss from "./plasmic.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss
+
+const data = {
+  base: `${projectcss.plasmic_tokens}`,
+  varianted: []
+};
+
+export const _useStyleTokens = createUseStyleTokens(data, _useGlobalVariants);

package/cpa-out/nextjs-app-codegen-js/components/plasmic/create_plasmic_app/icons/PlasmicIcon__CheckSvg.jsx

@@ -0,0 +1,39 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-nocheck
+/* 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/nextjs-app-codegen-js/components/plasmic/create_plasmic_app/icons/PlasmicIcon__Icon.jsx

@@ -0,0 +1,37 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-nocheck
+/* 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/nextjs-app-codegen-js/components/plasmic/create_plasmic_app/plasmic.jsx

@@ -0,0 +1,11 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-nocheck
+// This code is auto-generated by Plasmic; please do not edit!
+// Plasmic Project: 47tFXWjN2C4NyHFGGpaYQ3
+import { createUseGlobalVariants } from "@plasmicapp/react-web";
+import { useScreenVariants as useScreenVariantsscBjPxgdxdzbv } from "./PlasmicGlobalVariant__Screen"; // plasmic-import: SCBjPXGDXDZBV/globalVariant
+
+export const _useGlobalVariants = createUseGlobalVariants({
+  screen: useScreenVariantsscBjPxgdxdzbv
+});

package/cpa-out/nextjs-app-codegen-js/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "nextjs-app-codegen-js",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@plasmicapp/cli": "^0.1.359",
+    "@plasmicapp/react-web": "^0.2.422",
+    "next": "14.2.35",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "eslint": "^8",
+    "eslint-config-next": "14.2.35"
+  }
+}

package/cpa-out/nextjs-app-codegen-js/plasmic.json

@@ -0,0 +1,148 @@
+{
+  "platform": "nextjs",
+  "code": {
+    "lang": "js",
+    "scheme": "blackbox",
+    "reactRuntime": "classic"
+  },
+  "style": {
+    "scheme": "css-modules",
+    "defaultStyleCssFilePath": "plasmic/plasmic__default_style.module.css"
+  },
+  "images": {
+    "scheme": "public-files",
+    "publicDir": "../public",
+    "publicUrlPrefix": "/"
+  },
+  "tokens": {
+    "scheme": "theo",
+    "tokensFilePath": "plasmic-tokens.theo.json"
+  },
+  "srcDir": "components",
+  "defaultPlasmicDir": "./plasmic",
+  "projects": [
+    {
+      "projectId": "47tFXWjN2C4NyHFGGpaYQ3",
+      "projectApiToken": "7BRFratDxPLMGZHnd2grV5QP6mlHcZ1AK3BJSIeh7xzUlHgWh25XpgXvUaKAqHXFMXQQuzpADqboibF6nqNWQ",
+      "projectName": "create-plasmic-app",
+      "version": "latest",
+      "cssFilePath": "plasmic/create_plasmic_app/plasmic.module.css",
+      "components": [
+        {
+          "id": "6uuAAE1jiCew",
+          "name": "Homepage",
+          "type": "managed",
+          "projectId": "47tFXWjN2C4NyHFGGpaYQ3",
+          "renderModuleFilePath": "plasmic/create_plasmic_app/PlasmicHomepage.jsx",
+          "importSpec": {
+            "modulePath": "../app/page.jsx"
+          },
+          "cssFilePath": "plasmic/create_plasmic_app/PlasmicHomepage.module.css",
+          "scheme": "blackbox",
+          "componentType": "page",
+          "path": "/",
+          "rsc": {
+            "serverModulePath": "plasmic/create_plasmic_app/PlasmicHomepageServer.jsx",
+            "clientModulePath": "../app/page-client.jsx"
+          }
+        },
+        {
+          "id": "AO44A-w7hh",
+          "name": "DynamicPage",
+          "type": "managed",
+          "projectId": "47tFXWjN2C4NyHFGGpaYQ3",
+          "renderModuleFilePath": "plasmic/create_plasmic_app/PlasmicDynamicPage.jsx",
+          "importSpec": {
+            "modulePath": "../app/dynamic/[slug]/page.jsx"
+          },
+          "cssFilePath": "plasmic/create_plasmic_app/PlasmicDynamicPage.module.css",
+          "scheme": "blackbox",
+          "componentType": "page",
+          "path": "/dynamic/[slug]",
+          "rsc": {
+            "serverModulePath": "plasmic/create_plasmic_app/PlasmicDynamicPageServer.jsx",
+            "clientModulePath": "../app/dynamic/[slug]/page-client.jsx"
+          }
+        },
+        {
+          "id": "TQcvW_pSKi3",
+          "name": "Button",
+          "type": "managed",
+          "projectId": "47tFXWjN2C4NyHFGGpaYQ3",
+          "renderModuleFilePath": "plasmic/create_plasmic_app/PlasmicButton.jsx",
+          "importSpec": {
+            "modulePath": "Button.jsx"
+          },
+          "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.jsx",
+          "importSpec": {
+            "modulePath": "RandomDynamicPageButton.jsx"
+          },
+          "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.jsx"
+        },
+        {
+          "id": "6PNxx3YMyDQ",
+          "name": "IconIcon",
+          "moduleFilePath": "plasmic/create_plasmic_app/icons/PlasmicIcon__Icon.jsx"
+        }
+      ],
+      "images": [],
+      "indirect": false,
+      "globalContextsFilePath": "",
+      "splitsProviderFilePath": "",
+      "styleTokensProviderFilePath": "plasmic/create_plasmic_app/PlasmicStyleTokensProvider.jsx",
+      "dataTokensFilePath": "",
+      "projectModuleFilePath": "plasmic/create_plasmic_app/plasmic.jsx",
+      "codeComponents": [
+        {
+          "id": "P6aGdYWZ2R",
+          "name": "PlasmicHead",
+          "displayName": "hostless-plasmic-head",
+          "componentImportPath": "@plasmicapp/react-web"
+        },
+        {
+          "id": "8G2A-uTjGa",
+          "name": "Fetcher",
+          "displayName": "plasmic-data-source-fetcher",
+          "componentImportPath": "@plasmicapp/react-web/lib/data-sources"
+        }
+      ],
+      "customFunctions": []
+    }
+  ],
+  "globalVariants": {
+    "variantGroups": [
+      {
+        "id": "SCBjPXGDXDZBV",
+        "name": "Screen",
+        "projectId": "47tFXWjN2C4NyHFGGpaYQ3",
+        "contextFilePath": "plasmic/create_plasmic_app/PlasmicGlobalVariant__Screen.jsx"
+      }
+    ]
+  },
+  "wrapPagesWithGlobalContexts": true,
+  "preserveJsImportExtensions": false,
+  "nextjsConfig": {
+    "pagesDir": "../app"
+  },
+  "cliVersion": "0.1.359",
+  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.359/dist/plasmic.schema.json"
+}

package/cpa-out/nextjs-app-codegen-ts/app/dynamic/[slug]/page-client.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import * as React from "react";
+import {
+  PlasmicDynamicPage,
+  DefaultDynamicPageProps
+} from "../../../components/plasmic/create_plasmic_app/PlasmicDynamicPage"; // plasmic-import: AO44A-w7hh/render
+
+export function ClientDynamicPage(props: DefaultDynamicPageProps) {
+  return <PlasmicDynamicPage {...props} />;
+}

package/cpa-out/nextjs-app-codegen-ts/app/dynamic/[slug]/page.tsx

@@ -0,0 +1,57 @@
+// This is a skeleton starter React page generated by Plasmic.
+// This file is owned by you, feel free to edit as you see fit.
+import * as React from "react";
+import { PageParamsProvider as PageParamsProvider__ } from "@plasmicapp/host";
+
+import {
+  PlasmicDynamicPageServer,
+  makeAppRouterPageCtx,
+  generateDynamicMetadata,
+  DynamicPageServerSkeletonProps
+} from "../../../components/plasmic/create_plasmic_app/PlasmicDynamicPageServer";
+
+import type { Metadata, ResolvingMetadata } from "next";
+
+export async function generateMetadata(
+  { params, searchParams }: DynamicPageServerSkeletonProps,
+  parent: ResolvingMetadata
+): Promise<Metadata> {
+  const ctx = await makeAppRouterPageCtx({ params, searchParams });
+  const metadata = generateDynamicMetadata({}, ctx);
+
+  return { ...(await parent), ...metadata } as unknown as Metadata;
+}
+
+async function DynamicPage({
+  params,
+  searchParams
+}: DynamicPageServerSkeletonProps) {
+  // 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, PlasmicDynamicPage is wrapped by your project's global
+  // variant context providers. These wrappers may be moved to
+  // Next.js Custom App component
+  // (https://nextjs.org/docs/advanced-features/custom-app).
+
+  return (
+    <PageParamsProvider__
+      route="/dynamic/[slug]"
+      params={await params}
+      query={await searchParams}
+    >
+      <PlasmicDynamicPageServer />
+    </PageParamsProvider__>
+  );
+}
+
+export default DynamicPage;

package/cpa-out/nextjs-app-codegen-ts/app/layout.tsx

@@ -0,0 +1,19 @@
+import '@/app/globals.css'
+import { PlasmicRootProvider } from "@plasmicapp/react-web";
+import Link from "next/link";
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body>
+        <PlasmicRootProvider Link={Link}>
+          {children}
+        </PlasmicRootProvider>
+      </body>
+    </html>
+  );
+}

package/cpa-out/nextjs-app-codegen-ts/app/page-client.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import * as React from "react";
+import {
+  PlasmicHomepage,
+  DefaultHomepageProps
+} from "../components/plasmic/create_plasmic_app/PlasmicHomepage"; // plasmic-import: 6uuAAE1jiCew/render
+
+export function ClientHomepage(props: DefaultHomepageProps) {
+  return <PlasmicHomepage {...props} />;
+}

package/cpa-out/nextjs-app-codegen-ts/app/page.tsx

@@ -0,0 +1,54 @@
+// This is a skeleton starter React page generated by Plasmic.
+// This file is owned by you, feel free to edit as you see fit.
+import * as React from "react";
+import { PageParamsProvider as PageParamsProvider__ } from "@plasmicapp/host";
+
+import {
+  PlasmicHomepageServer,
+  makeAppRouterPageCtx,
+  generateDynamicMetadata,
+  HomepageServerSkeletonProps
+} from "../components/plasmic/create_plasmic_app/PlasmicHomepageServer";
+
+import type { Metadata, ResolvingMetadata } from "next";
+
+export async function generateMetadata(
+  { params, searchParams }: HomepageServerSkeletonProps,
+  parent: ResolvingMetadata
+): Promise<Metadata> {
+  const ctx = await makeAppRouterPageCtx({ params, searchParams });
+  const metadata = generateDynamicMetadata({}, ctx);
+
+  return { ...(await parent), ...metadata } as unknown as Metadata;
+}
+
+async function Homepage({ params, searchParams }: HomepageServerSkeletonProps) {
+  // Use PlasmicHomepage 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 PlasmicHomepage 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, PlasmicHomepage is wrapped by your project's global
+  // variant context providers. These wrappers may be moved to
+  // Next.js Custom App component
+  // (https://nextjs.org/docs/advanced-features/custom-app).
+
+  return (
+    <PageParamsProvider__
+      route="/"
+      params={await params}
+      query={await searchParams}
+    >
+      <PlasmicHomepageServer />
+    </PageParamsProvider__>
+  );
+}
+
+export default Homepage;

package/cpa-out/nextjs-app-codegen-ts/app/plasmic-host/page.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { PlasmicCanvasHost, registerComponent } from '@plasmicapp/react-web/lib/host';
+
+// You can register any code components that you want to use here; see
+// https://docs.plasmic.app/learn/code-components-ref/
+// And configure your Plasmic project to use the host url pointing at
+// the /plasmic-host page of your nextjs app (for example,
+// http://localhost:3000/plasmic-host).  See
+// https://docs.plasmic.app/learn/app-hosting/#set-a-plasmic-project-to-use-your-app-host
+
+// registerComponent(...)
+
+export default function PlasmicHost() {
+  return <PlasmicCanvasHost />;
+}

package/cpa-out/nextjs-app-codegen-ts/components/Button.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import {
+  PlasmicButton,
+  DefaultButtonProps
+} from "./plasmic/create_plasmic_app/PlasmicButton";
+
+import {
+  ButtonRef,
+  HtmlAnchorOnlyProps,
+  HtmlButtonOnlyProps
+} from "@plasmicapp/react-web";
+
+export 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} />;
+}
+
+export 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" });