create-plasmic-app 0.0.62 → 0.0.64

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

@@ -0,0 +1,76 @@
+{
+  "platform": "react",
+  "code": {
+    "lang": "ts",
+    "scheme": "blackbox",
+    "reactRuntime": "classic"
+  },
+  "style": {
+    "scheme": "css-modules",
+    "defaultStyleCssFilePath": "plasmic/plasmic__default_style.css"
+  },
+  "images": {
+    "scheme": "files",
+    "publicDir": "../../public",
+    "publicUrlPrefix": "/static/"
+  },
+  "tokens": {
+    "scheme": "theo",
+    "tokensFilePath": "plasmic-tokens.theo.json"
+  },
+  "srcDir": "src/components",
+  "defaultPlasmicDir": "./plasmic",
+  "projects": [
+    {
+      "projectId": "47tFXWjN2C4NyHFGGpaYQ3",
+      "projectApiToken": "7BRFratDxPLMGZHnd2grV5QP6mlHcZ1AK3BJSIeh7xzUlHgWh25XpgXvUaKAqHXFMXQQuzpADqboibF6nqNWQ",
+      "projectName": "create-plasmic-app",
+      "version": "latest",
+      "cssFilePath": "plasmic/create_plasmic_app/plasmic_create_plasmic_app.module.css",
+      "components": [
+        {
+          "id": "6uuAAE1jiCew",
+          "name": "Homepage",
+          "type": "managed",
+          "projectId": "47tFXWjN2C4NyHFGGpaYQ3",
+          "renderModuleFilePath": "plasmic/create_plasmic_app/PlasmicHomepage.tsx",
+          "importSpec": {
+            "modulePath": "Homepage.tsx"
+          },
+          "cssFilePath": "plasmic/create_plasmic_app/PlasmicHomepage.module.css",
+          "scheme": "blackbox",
+          "componentType": "page"
+        }
+      ],
+      "icons": [],
+      "images": [],
+      "indirect": false,
+      "globalContextsFilePath": "",
+      "codeComponents": [
+        {
+          "id": "P6aGdYWZ2R",
+          "name": "PlasmicHead",
+          "componentImportPath": "@plasmicapp/react-web"
+        },
+        {
+          "id": "8G2A-uTjGa",
+          "name": "Fetcher",
+          "componentImportPath": "@plasmicapp/react-web/lib/data-sources"
+        }
+      ]
+    }
+  ],
+  "globalVariants": {
+    "variantGroups": [
+      {
+        "id": "SCBjPXGDXDZBV",
+        "name": "Screen",
+        "projectId": "47tFXWjN2C4NyHFGGpaYQ3",
+        "contextFilePath": "plasmic/create_plasmic_app/PlasmicGlobalVariant__Screen.tsx"
+      }
+    ]
+  },
+  "wrapPagesWithGlobalContexts": true,
+  "cliVersion": "0.1.205",
+  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.205/dist/plasmic.schema.json"
+}

package/cpa-out/react-codegen-ts/src/App.tsx

@@ -0,0 +1,9 @@
+
+import Homepage from './components/Homepage';
+
+function App() {
+  return (<Homepage />);
+}
+
+export default App;
+  

package/cpa-out/react-codegen-ts/src/components/Homepage.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 {
+  PlasmicHomepage,
+  DefaultHomepageProps
+} from "./plasmic/create_plasmic_app/PlasmicHomepage";
+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 HomepageProps extends Omit<DefaultHomepageProps, "hideProps1"|"hideProp2"> {
+//   // etc.
+// }
+//
+// You can also stop extending from DefaultHomepageProps altogether and have
+// total control over the props for your component.
+export interface HomepageProps extends DefaultHomepageProps {}
+
+function Homepage_(props: HomepageProps, ref: HTMLElementRefOf<"div">) {
+  // 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, we are just piping all HomepageProps here, but feel free
+  // to do whatever works for you.
+
+  return <PlasmicHomepage root={{ ref }} {...props} />;
+}
+
+const Homepage = React.forwardRef(Homepage_);
+export default Homepage;

package/cpa-out/react-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicGlobalVariant__Screen.tsx

@@ -0,0 +1,30 @@
+// @ts-nocheck
+/* eslint-disable */
+/* tslint:disable */
+/* prettier-ignore-start */
+import * as React from "react";
+import * as p from "@plasmicapp/react-web";
+
+export type ScreenValue = "desktopOnly";
+export const ScreenContext = React.createContext<ScreenValue[] | undefined>(
+  "PLEASE_RENDER_INSIDE_PROVIDER" as any
+);
+
+/**
+ *  @deprecated Plasmic now uses a custom hook for Screen variants, which is
+ *  automatically included in your components. Please remove this provider
+ *  from your code.
+ */
+export function ScreenVariantProvider(props: React.PropsWithChildren) {
+  console.warn(
+    "DEPRECATED: Plasmic now uses a custom hook for Screen variants, which is automatically included in your components. Please remove this provider from your code."
+  );
+  return props.children;
+}
+
+export const useScreenVariants = p.createUseScreenVariants(true, {
+  desktopOnly: "(min-width:768px)",
+});
+
+export default ScreenContext;
+/* prettier-ignore-end */

package/cpa-out/react-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicHomepage.tsx

@@ -0,0 +1,280 @@
+// @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: 6uuAAE1jiCew
+import * as React from "react";
+
+import * as p from "@plasmicapp/react-web";
+import * as ph from "@plasmicapp/host";
+
+import {
+  hasVariant,
+  classNames,
+  wrapWithClassName,
+  createPlasmicElementProxy,
+  makeFragment,
+  MultiChoiceArg,
+  SingleBooleanChoiceArg,
+  SingleChoiceArg,
+  pick,
+  omit,
+  useTrigger,
+  StrictProps,
+  deriveRenderOpts,
+  ensureGlobalVariants
+} from "@plasmicapp/react-web";
+
+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
+import sty from "./PlasmicHomepage.module.css"; // plasmic-import: 6uuAAE1jiCew/css
+
+export type PlasmicHomepage__VariantMembers = {};
+export type PlasmicHomepage__VariantsArgs = {};
+type VariantPropType = keyof PlasmicHomepage__VariantsArgs;
+export const PlasmicHomepage__VariantProps = new Array<VariantPropType>();
+
+export type PlasmicHomepage__ArgsType = {};
+type ArgPropType = keyof PlasmicHomepage__ArgsType;
+export const PlasmicHomepage__ArgProps = new Array<ArgPropType>();
+
+export type PlasmicHomepage__OverridesType = {
+  root?: p.Flex<"div">;
+  section?: p.Flex<"section">;
+  h1?: p.Flex<"h1">;
+  text?: p.Flex<"div">;
+};
+
+export interface DefaultHomepageProps {
+  className?: string;
+}
+
+const __wrapUserFunction =
+  globalThis.__PlasmicWrapUserFunction ?? ((loc, fn) => fn());
+const __wrapUserPromise =
+  globalThis.__PlasmicWrapUserPromise ??
+  (async (loc, promise) => {
+    return await promise;
+  });
+
+function PlasmicHomepage__RenderFunc(props: {
+  variants: PlasmicHomepage__VariantsArgs;
+  args: PlasmicHomepage__ArgsType;
+  overrides: PlasmicHomepage__OverridesType;
+
+  forNode?: string;
+}) {
+  const { variants, overrides, forNode } = props;
+
+  const $ctx = ph.useDataEnv?.() || {};
+  const args = React.useMemo(() => Object.assign({}, props.args), [props.args]);
+
+  const $props = {
+    ...args,
+    ...variants
+  };
+
+  const currentUser = p.useCurrentUser?.() || {};
+
+  const [$queries, setDollarQueries] = React.useState({});
+
+  const globalVariants = ensureGlobalVariants({
+    screen: useScreenVariantsscBjPxgdxdzbv()
+  });
+
+  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
+              )}
+            >
+              {"create-plasmic-app"}
+            </h1>
+
+            <div
+              data-plasmic-name={"text"}
+              data-plasmic-override={overrides.text}
+              className={classNames(
+                projectcss.all,
+                projectcss.__wab_text,
+                sty.text
+              )}
+            >
+              {hasVariant(globalVariants, "screen", "desktopOnly") ? (
+                <React.Fragment>
+                  <React.Fragment>
+                    {
+                      "This project is used by run-cpa.ts in the create-plasmic-app repo.\n\nrun-cpa.ts runs create-plasmic-app for many combinations of args (e.g. nextjs + appDir + loader + typescript) to check for changes in generated files. Any changes to this project will result in lots of changes to the generated files. "
+                    }
+                  </React.Fragment>
+                  <span
+                    className={"plasmic_default__all plasmic_default__span"}
+                    style={{ fontWeight: 700 }}
+                  >
+                    {"Therefore, please avoid changing this project."}
+                  </span>
+                </React.Fragment>
+              ) : (
+                <React.Fragment>
+                  <React.Fragment>
+                    {
+                      "If you haven't already done so, go back and learn the basics by going through the Plasmic Levels tutorial.\n\nIt's always easier to start from examples! Add a new page using a template—do this from the list of pages in the top left (the gray + button).\n\nOr press the big blue + button to start dragging items into this page.\n\nIntegrate this project into your codebase—press the "
+                    }
+                  </React.Fragment>
+                  <span
+                    className={"plasmic_default__all plasmic_default__span"}
+                    style={{ fontWeight: 700 }}
+                  >
+                    {"Code"}
+                  </span>
+                  <React.Fragment>
+                    {
+                      " button in the top right and follow the quickstart instructions.\n\nJoin our Slack community (icon in bottom left) for help any time."
+                    }
+                  </React.Fragment>
+                </React.Fragment>
+              )}
+            </div>
+          </p.Stack>
+        </div>
+      </div>
+    </React.Fragment>
+  ) as React.ReactElement | null;
+}
+
+const PlasmicDescendants = {
+  root: ["root", "section", "h1", "text"],
+  section: ["section", "h1", "text"],
+  h1: ["h1"],
+  text: ["text"]
+} as const;
+type NodeNameType = keyof typeof PlasmicDescendants;
+type DescendantsType<T extends NodeNameType> =
+  (typeof PlasmicDescendants)[T][number];
+type NodeDefaultElementType = {
+  root: "div";
+  section: "section";
+  h1: "h1";
+  text: "div";
+};
+
+type ReservedPropsType = "variants" | "args" | "overrides";
+type NodeOverridesType<T extends NodeNameType> = Pick<
+  PlasmicHomepage__OverridesType,
+  DescendantsType<T>
+>;
+type NodeComponentProps<T extends NodeNameType> =
+  // Explicitly specify variants, args, and overrides as objects
+  {
+    variants?: PlasmicHomepage__VariantsArgs;
+    args?: PlasmicHomepage__ArgsType;
+    overrides?: NodeOverridesType<T>;
+  } & Omit<PlasmicHomepage__VariantsArgs, ReservedPropsType> & // Specify variants directly as props
+    /* Specify args directly as props*/ Omit<
+      PlasmicHomepage__ArgsType,
+      ReservedPropsType
+    > &
+    /* Specify overrides for each element directly as props*/ Omit<
+      NodeOverridesType<T>,
+      ReservedPropsType | VariantPropType | ArgPropType
+    > &
+    /* Specify props for the root element*/ Omit<
+      Partial<React.ComponentProps<NodeDefaultElementType[T]>>,
+      ReservedPropsType | VariantPropType | ArgPropType | DescendantsType<T>
+    >;
+
+function makeNodeComponent<NodeName extends NodeNameType>(nodeName: NodeName) {
+  type PropsType = NodeComponentProps<NodeName> & { key?: React.Key };
+  const func = function <T extends PropsType>(
+    props: T & StrictProps<T, PropsType>
+  ) {
+    const { variants, args, overrides } = React.useMemo(
+      () =>
+        deriveRenderOpts(props, {
+          name: nodeName,
+          descendantNames: [...PlasmicDescendants[nodeName]],
+          internalArgPropNames: PlasmicHomepage__ArgProps,
+          internalVariantPropNames: PlasmicHomepage__VariantProps
+        }),
+      [props, nodeName]
+    );
+
+    return PlasmicHomepage__RenderFunc({
+      variants,
+      args,
+      overrides,
+      forNode: nodeName
+    });
+  };
+  if (nodeName === "root") {
+    func.displayName = "PlasmicHomepage";
+  } else {
+    func.displayName = `PlasmicHomepage.${nodeName}`;
+  }
+  return func;
+}
+
+export const PlasmicHomepage = Object.assign(
+  // Top-level PlasmicHomepage renders the root element
+  makeNodeComponent("root"),
+  {
+    // Helper components rendering sub-elements
+    section: makeNodeComponent("section"),
+    h1: makeNodeComponent("h1"),
+    text: makeNodeComponent("text"),
+
+    // Metadata about props expected for PlasmicHomepage
+    internalVariantProps: PlasmicHomepage__VariantProps,
+    internalArgProps: PlasmicHomepage__ArgProps,
+
+    // Page metadata
+    pageMetadata: {
+      title: "",
+      description: "",
+      ogImageSrc: "",
+      canonical: ""
+    }
+  }
+);
+
+export default PlasmicHomepage;
+/* prettier-ignore-end */

package/cpa-out/react-codegen-ts/src/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+root.render(
+  
+    <App />
+  
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

package/cpa-out/react-codegen-ts/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

package/cpa-out/react-codegen-ts/src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

package/cpa-out/react-codegen-ts/src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

package/cpa-out/react-codegen-ts/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}

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

@@ -0,0 +1,41 @@
+{
+  "name": "react-loader-js",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@plasmicapp/cli": "^0.1.205",
+    "@plasmicapp/host": "^1.0.100",
+    "@plasmicapp/react-web": "^0.2.150",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^13.0.0",
+    "@testing-library/user-event": "^13.2.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

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

@@ -0,0 +1,76 @@
+{
+  "platform": "react",
+  "code": {
+    "lang": "js",
+    "scheme": "blackbox",
+    "reactRuntime": "classic"
+  },
+  "style": {
+    "scheme": "css-modules",
+    "defaultStyleCssFilePath": "plasmic/plasmic__default_style.css"
+  },
+  "images": {
+    "scheme": "files",
+    "publicDir": "../../public",
+    "publicUrlPrefix": "/static/"
+  },
+  "tokens": {
+    "scheme": "theo",
+    "tokensFilePath": "plasmic-tokens.theo.json"
+  },
+  "srcDir": "src/components",
+  "defaultPlasmicDir": "./plasmic",
+  "projects": [
+    {
+      "projectId": "47tFXWjN2C4NyHFGGpaYQ3",
+      "projectApiToken": "7BRFratDxPLMGZHnd2grV5QP6mlHcZ1AK3BJSIeh7xzUlHgWh25XpgXvUaKAqHXFMXQQuzpADqboibF6nqNWQ",
+      "projectName": "create-plasmic-app",
+      "version": "latest",
+      "cssFilePath": "plasmic/create_plasmic_app/plasmic_create_plasmic_app.module.css",
+      "components": [
+        {
+          "id": "6uuAAE1jiCew",
+          "name": "Homepage",
+          "type": "managed",
+          "projectId": "47tFXWjN2C4NyHFGGpaYQ3",
+          "renderModuleFilePath": "plasmic/create_plasmic_app/PlasmicHomepage.jsx",
+          "importSpec": {
+            "modulePath": "Homepage.jsx"
+          },
+          "cssFilePath": "plasmic/create_plasmic_app/PlasmicHomepage.module.css",
+          "scheme": "blackbox",
+          "componentType": "page"
+        }
+      ],
+      "icons": [],
+      "images": [],
+      "indirect": false,
+      "globalContextsFilePath": "",
+      "codeComponents": [
+        {
+          "id": "P6aGdYWZ2R",
+          "name": "PlasmicHead",
+          "componentImportPath": "@plasmicapp/react-web"
+        },
+        {
+          "id": "8G2A-uTjGa",
+          "name": "Fetcher",
+          "componentImportPath": "@plasmicapp/react-web/lib/data-sources"
+        }
+      ]
+    }
+  ],
+  "globalVariants": {
+    "variantGroups": [
+      {
+        "id": "SCBjPXGDXDZBV",
+        "name": "Screen",
+        "projectId": "47tFXWjN2C4NyHFGGpaYQ3",
+        "contextFilePath": "plasmic/create_plasmic_app/PlasmicGlobalVariant__Screen.jsx"
+      }
+    ]
+  },
+  "wrapPagesWithGlobalContexts": true,
+  "cliVersion": "0.1.205",
+  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.205/dist/plasmic.schema.json"
+}

package/cpa-out/react-loader-js/src/App.jsx

@@ -0,0 +1,9 @@
+
+import Homepage from './components/Homepage';
+
+function App() {
+  return (<Homepage />);
+}
+
+export default App;
+  

package/cpa-out/react-loader-js/src/components/Homepage.jsx

@@ -0,0 +1,26 @@
+// 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 { PlasmicHomepage } from "./plasmic/create_plasmic_app/PlasmicHomepage";
+
+function Homepage_(props, ref) {
+  // 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, we are just piping all HomepageProps here, but feel free
+  // to do whatever works for you.
+  return <PlasmicHomepage root={{ ref }} {...props} />;
+}
+
+const Homepage = React.forwardRef(Homepage_);
+
+export default Homepage;