create-plasmic-app 0.0.133 → 0.0.135

package/cpa-out/nextjs-app-codegen-ts/components/plasmic/create_plasmic_app/PlasmicStyleTokensProvider.tsx

@@ -0,0 +1,19 @@
+/* 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-ts/components/plasmic/create_plasmic_app/icons/PlasmicIcon__CheckSvg.tsx

@@ -0,0 +1,44 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-nocheck
+/* prettier-ignore-start */
+import React from "react";
+import { classNames } from "@plasmicapp/react-web";
+
+export type CheckSvgIconProps = React.ComponentProps<"svg"> & {
+  title?: string;
+};
+
+export function CheckSvgIcon(props: CheckSvgIconProps) {
+  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-ts/components/plasmic/create_plasmic_app/icons/PlasmicIcon__Icon.tsx

@@ -0,0 +1,41 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-nocheck
+/* prettier-ignore-start */
+import React from "react";
+import { classNames } from "@plasmicapp/react-web";
+
+export type IconIconProps = React.ComponentProps<"svg"> & {
+  title?: string;
+};
+
+export function IconIcon(props: IconIconProps) {
+  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-ts/components/plasmic/create_plasmic_app/plasmic.tsx

@@ -0,0 +1,14 @@
+/* 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-ts/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "nextjs-app-codegen-ts",
+  "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": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.35",
+    "typescript": "^5"
+  }
+}

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

@@ -0,0 +1,148 @@
+{
+  "platform": "nextjs",
+  "code": {
+    "lang": "ts",
+    "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.tsx",
+          "importSpec": {
+            "modulePath": "../app/page.tsx"
+          },
+          "cssFilePath": "plasmic/create_plasmic_app/PlasmicHomepage.module.css",
+          "scheme": "blackbox",
+          "componentType": "page",
+          "path": "/",
+          "rsc": {
+            "serverModulePath": "plasmic/create_plasmic_app/PlasmicHomepageServer.tsx",
+            "clientModulePath": "../app/page-client.tsx"
+          }
+        },
+        {
+          "id": "AO44A-w7hh",
+          "name": "DynamicPage",
+          "type": "managed",
+          "projectId": "47tFXWjN2C4NyHFGGpaYQ3",
+          "renderModuleFilePath": "plasmic/create_plasmic_app/PlasmicDynamicPage.tsx",
+          "importSpec": {
+            "modulePath": "../app/dynamic/[slug]/page.tsx"
+          },
+          "cssFilePath": "plasmic/create_plasmic_app/PlasmicDynamicPage.module.css",
+          "scheme": "blackbox",
+          "componentType": "page",
+          "path": "/dynamic/[slug]",
+          "rsc": {
+            "serverModulePath": "plasmic/create_plasmic_app/PlasmicDynamicPageServer.tsx",
+            "clientModulePath": "../app/dynamic/[slug]/page-client.tsx"
+          }
+        },
+        {
+          "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"
+        }
+      ],
+      "images": [],
+      "indirect": false,
+      "globalContextsFilePath": "",
+      "splitsProviderFilePath": "",
+      "styleTokensProviderFilePath": "plasmic/create_plasmic_app/PlasmicStyleTokensProvider.tsx",
+      "dataTokensFilePath": "",
+      "projectModuleFilePath": "plasmic/create_plasmic_app/plasmic.tsx",
+      "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.tsx"
+      }
+    ]
+  },
+  "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/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/cpa-out/nextjs-app-loader-js/app/[[...catchall]]/page.jsx

@@ -0,0 +1,80 @@
+import { PLASMIC } from "@/plasmic-init";
+import { ClientPlasmicRootProvider } from "@/plasmic-init-client";
+import { PlasmicComponent } from "@plasmicapp/loader-nextjs";
+import { notFound } from "next/navigation";
+
+// Use revalidate if you want incremental static regeneration
+export const revalidate = 60;
+
+export async function generateStaticParams() {
+  const pageModules = await PLASMIC.fetchPages();
+  return pageModules.map((mod) => {
+    const catchall =
+      mod.path === "/" ? undefined : mod.path.substring(1).split("/");
+    return {
+      catchall,
+    };
+  });
+}
+
+export async function generateMetadata(
+  { params },
+  parent
+) {
+  const { componentData } = await getPlasmicData(params);
+
+  if (!componentData) {
+    return parent;
+  }
+  const pageMeta = componentData.entryCompMetas[0];
+  const metadata = await PLASMIC.unstable__generateMetadata(componentData, {
+    params: pageMeta.params ?? {},
+    query: {},
+  });
+
+  return { ...(await parent), ...metadata };
+}
+
+export default async function PlasmicLoaderPage({
+  params,
+}) {
+  const { pagePath, componentData } = await getPlasmicData(params);
+
+  if (!componentData) {
+    notFound();
+  }
+  const pageMeta = componentData.entryCompMetas[0];
+  const prefetchedQueryData = await PLASMIC.unstable__getServerQueriesData(
+    componentData,
+    {
+      pagePath,
+      params: pageMeta.params,
+      query: {},
+    }
+  );
+
+  return (
+    <ClientPlasmicRootProvider
+      prefetchedData={componentData}
+      prefetchedQueryData={prefetchedQueryData}
+      pageParams={pageMeta.params}
+      pageRoute={pageMeta.path}
+    >
+      <PlasmicComponent component={pageMeta.displayName} />
+    </ClientPlasmicRootProvider>
+  );
+}
+
+async function getPlasmicData(
+  params
+) {
+  const catchall = (await params).catchall;
+  const pagePath = catchall ? `/${catchall.join("/")}` : "/";
+
+  const componentData = await PLASMIC.maybeFetchComponentData(pagePath);
+
+  if (!componentData || componentData.entryCompMetas.length === 0) {
+    return { pagePath };
+  }
+  return { pagePath, componentData };
+}

package/cpa-out/nextjs-app-loader-js/app/layout.js

@@ -0,0 +1,28 @@
+import localFont from "next/font/local";
+import "./globals.css";
+
+const geistSans = localFont({
+  src: "./fonts/GeistVF.woff",
+  variable: "--font-geist-sans",
+  weight: "100 900",
+});
+const geistMono = localFont({
+  src: "./fonts/GeistMonoVF.woff",
+  variable: "--font-geist-mono",
+  weight: "100 900",
+});
+
+export const metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body className={`${geistSans.variable} ${geistMono.variable}`}>
+        {children}
+      </body>
+    </html>
+  );
+}

package/cpa-out/nextjs-app-loader-js/app/plasmic-host/page.jsx

@@ -0,0 +1,6 @@
+import { PlasmicCanvasHost } from "@plasmicapp/loader-nextjs";
+import "@/plasmic-init-client";
+
+export default function PlasmicHost() {
+  return <PlasmicCanvasHost />;
+}

package/cpa-out/nextjs-app-loader-js/plasmic-init-client.jsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { PlasmicRootProvider } from "@plasmicapp/loader-nextjs";
+import { PLASMIC } from "@/plasmic-init";
+
+// 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
+
+// PLASMIC.registerComponent(...);
+
+/**
+ * ClientPlasmicRootProvider is a Client Component that passes in the loader for you.
+ *
+ * Why? Props passed from Server to Client Components must be serializable.
+ * https://nextjs.org/docs/app/getting-started/server-and-client-components#passing-data-from-server-to-client-components
+ * However, PlasmicRootProvider requires a loader, but the loader is NOT serializable.
+ *
+ * In a Server Component like app/<your-path>/path.tsx, rendering the following would not work:
+ *
+ * ```tsx
+ * import { PLASMIC } from "@/plasmic-init";
+ * import { PlasmicRootProvider } from "plasmicapp/loader-nextjs";
+ * export default function MyPage() {
+ *   const prefetchedData = await PLASMIC.fetchComponentData("YourPage");
+ *   return (
+ *     <PlasmicRootProvider
+ *       loader={PLASMIC} // ERROR: loader is not serializable
+ *       prefetchedData={prefetchedData}
+ *     >
+ *       {yourContent()}
+ *     </PlasmicRootProvider>;
+ *   );
+ * }
+ * ```
+ *
+ * Therefore, we define ClientPlasmicRootProvider as a Client Component (this file is marked "use client").
+ * ClientPlasmicRootProvider wraps the PlasmicRootProvider and passes in the loader for you,
+ * while allowing your Server Component to pass in prefetched data and other serializable props:
+ *
+ * ```tsx
+ * import { PLASMIC } from "@/plasmic-init";
+ * import { ClientPlasmicRootProvider } from "@/plasmic-init-client"; // changed
+ * export default function MyPage() {
+ *   const prefetchedData = await PLASMIC.fetchComponentData("YourPage");
+ *   return (
+ *     <ClientPlasmicRootProvider // don't pass in loader
+ *       prefetchedData={prefetchedData}
+ *     >
+ *       {yourContent()}
+ *     </ClientPlasmicRootProvider>;
+ *   );
+ * }
+ * ```
+ */
+export function ClientPlasmicRootProvider(
+  props
+) {
+  return (
+    <PlasmicRootProvider loader={PLASMIC} {...props}></PlasmicRootProvider>
+  );
+}

package/cpa-out/nextjs-app-loader-js/plasmic-init.js

@@ -1,4 +1,5 @@
-import { initPlasmicLoader } from "@plasmicapp/loader-nextjs";
+import { initPlasmicLoader } from "@plasmicapp/loader-nextjs/react-server-conditional";
+import * as NextNavigation from "next/navigation";
 
 export const PLASMIC = initPlasmicLoader({
   projects: [
@@ -13,13 +14,7 @@ export const PLASMIC = initPlasmicLoader({
   // project, allowing you to see your designs without publishing.  Please
   // only use this for development, as this is significantly slower.
   preview: false,
-});
-
-// 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
 
-// PLASMIC.registerComponent(...);
+  // Needed for Next.js app router support.
+  nextNavigation: NextNavigation,
+});

package/cpa-out/nextjs-app-loader-ts/app/[[...catchall]]/page.tsx

@@ -0,0 +1,85 @@
+import { PLASMIC } from "@/plasmic-init";
+import { ClientPlasmicRootProvider } from "@/plasmic-init-client";
+import { ComponentRenderData,PlasmicComponent } from "@plasmicapp/loader-nextjs";
+import { Metadata, ResolvingMetadata } from "next";
+import { notFound } from "next/navigation";
+
+// Use revalidate if you want incremental static regeneration
+export const revalidate = 60;
+interface Params {
+      catchall: string[] | undefined;
+    }
+export async function generateStaticParams(): Promise<Params[]> {
+  const pageModules = await PLASMIC.fetchPages();
+  return pageModules.map((mod) => {
+    const catchall =
+      mod.path === "/" ? undefined : mod.path.substring(1).split("/");
+    return {
+      catchall,
+    };
+  });
+}
+interface LoaderPageProps {
+      params: Promise<Params>;
+    }
+export async function generateMetadata(
+  { params }: LoaderPageProps,
+  parent: ResolvingMetadata
+): Promise<Metadata> {
+  const { componentData } = await getPlasmicData(params);
+
+  if (!componentData) {
+    return parent as Promise<Metadata>;
+  }
+  const pageMeta = componentData.entryCompMetas[0];
+  const metadata = await PLASMIC.unstable__generateMetadata(componentData, {
+    params: pageMeta.params ?? {},
+    query: {},
+  });
+
+  return { ...(await parent), ...metadata };
+}
+
+export default async function PlasmicLoaderPage({
+  params,
+}: LoaderPageProps) {
+  const { pagePath, componentData } = await getPlasmicData(params);
+
+  if (!componentData) {
+    notFound();
+  }
+  const pageMeta = componentData.entryCompMetas[0];
+  const prefetchedQueryData = await PLASMIC.unstable__getServerQueriesData(
+    componentData,
+    {
+      pagePath,
+      params: pageMeta.params,
+      query: {},
+    }
+  );
+
+  return (
+    <ClientPlasmicRootProvider
+      prefetchedData={componentData}
+      prefetchedQueryData={prefetchedQueryData}
+      pageParams={pageMeta.params}
+      pageRoute={pageMeta.path}
+    >
+      <PlasmicComponent component={pageMeta.displayName} />
+    </ClientPlasmicRootProvider>
+  );
+}
+
+async function getPlasmicData(
+  params: Promise<Params>
+): Promise<{ pagePath: string; componentData?: ComponentRenderData }> {
+  const catchall = (await params).catchall;
+  const pagePath = catchall ? `/${catchall.join("/")}` : "/";
+
+  const componentData = await PLASMIC.maybeFetchComponentData(pagePath);
+
+  if (!componentData || componentData.entryCompMetas.length === 0) {
+    return { pagePath };
+  }
+  return { pagePath, componentData };
+}

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

@@ -0,0 +1,33 @@
+import type { Metadata } from "next";
+import localFont from "next/font/local";
+import "./globals.css";
+
+const geistSans = localFont({
+  src: "./fonts/GeistVF.woff",
+  variable: "--font-geist-sans",
+  weight: "100 900",
+});
+const geistMono = localFont({
+  src: "./fonts/GeistMonoVF.woff",
+  variable: "--font-geist-mono",
+  weight: "100 900",
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={`${geistSans.variable} ${geistMono.variable}`}>
+        {children}
+      </body>
+    </html>
+  );
+}

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

@@ -0,0 +1,6 @@
+import { PlasmicCanvasHost } from "@plasmicapp/loader-nextjs";
+import "@/plasmic-init-client";
+
+export default function PlasmicHost() {
+  return <PlasmicCanvasHost />;
+}