create-plasmic-app 0.0.151 → 0.0.152

package/cpa-out/react-codegen-js/src/components/plasmic/create_plasmic_app/PlasmicButton.module.css

@@ -0,0 +1,468 @@
+.root {
+  display: flex;
+  position: relative;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  background: #232320;
+  cursor: pointer;
+  transition-property: background;
+  transition-duration: 0.1s;
+  column-gap: 8px;
+  -webkit-transition-property: background;
+  -webkit-transition-duration: 0.1s;
+  border-radius: 6px;
+  padding: 12px 20px;
+  border-width: 0px;
+}
+.rootshowStartIcon {
+  padding-left: 16px;
+}
+.rootshowEndIcon {
+  padding-right: 16px;
+}
+.rootisDisabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.rootshape_rounded {
+  padding-left: 20px;
+  padding-right: 20px;
+  min-width: 100px;
+  border-radius: 999px;
+}
+.rootshape_round {
+  border-radius: 50%;
+  padding: 12px;
+}
+.rootshape_sharp {
+  border-radius: 0px;
+}
+.rootsize_compact {
+  padding: 6px 16px;
+}
+.rootsize_minimal {
+  padding: 0px;
+}
+.rootcolor_blue {
+  background: #0091ff;
+}
+.rootcolor_green {
+  background: #30a46c;
+}
+.rootcolor_yellow {
+  background: #f5d90a;
+}
+.rootcolor_red {
+  background: #e54d2e;
+}
+.rootcolor_sand {
+  background: #717069;
+}
+.rootcolor_white {
+  background: #ffffff;
+}
+.rootcolor_softBlue {
+  background: #edf6ff;
+}
+.rootcolor_softGreen {
+  background: #e9f9ee;
+}
+.rootcolor_softYellow {
+  background: #fffbd1;
+}
+.rootcolor_softRed {
+  background: #fff0ee;
+}
+.rootcolor_softSand {
+  background: #eeeeec;
+}
+.rootcolor_clear {
+  background: #ffffff00;
+}
+.rootcolor_link {
+  background: #ffffff00;
+}
+.rootshape_rounded_showStartIcon {
+  padding-left: 16px;
+}
+.rootshowEndIcon_shape_rounded {
+  padding-right: 16px;
+}
+.rootshape_round_size_compact {
+  padding: 6px;
+}
+.root___focusVisibleWithin {
+  box-shadow: 0px 0px 0px 3px #96c7f2;
+  outline: none;
+}
+.root:focus-within:focus-within {
+  box-shadow: 0px 0px 0px 3px #96c7f2;
+  outline: none;
+}
+.root:hover:hover {
+  background: #282826;
+}
+.root:active:active {
+  background: #2e2e2b;
+}
+.rootcolor_blue:hover:hover {
+  background: #369eff;
+}
+.rootcolor_blue:active:active {
+  background: #52a9ff;
+}
+.rootcolor_green:hover:hover {
+  background: #3cb179;
+}
+.rootcolor_green:active:active {
+  background: #4cc38a;
+}
+.rootcolor_yellow:hover:hover {
+  background: #ffef5c;
+}
+.rootcolor_yellow:active:active {
+  background: #f0c000;
+}
+.rootcolor_red:hover:hover {
+  background: #ec5e41;
+}
+.rootcolor_red:active:active {
+  background: #f16a50;
+}
+.rootcolor_sand:hover:hover {
+  background: #7f7e77;
+}
+.rootcolor_sand:active:active {
+  background: #a1a09a;
+}
+.rootcolor_white:hover:hover {
+  background: #ffef5c;
+}
+.rootcolor_white:active:active {
+  background: #f0c000;
+}
+.rootcolor_softBlue:hover:hover {
+  background: #e1f0ff;
+}
+.rootcolor_softBlue:active:active {
+  background: #cee7fe;
+}
+.rootcolor_softGreen:active:active {
+  background: #ccebd7;
+}
+.rootcolor_softGreen:hover:hover {
+  background: #ddf3e4;
+}
+.rootcolor_softYellow:active:active {
+  background: #fef2a4;
+}
+.rootcolor_softYellow:hover:hover {
+  background: #fff8bb;
+}
+.rootcolor_softRed:active:active {
+  background: #fdd8d3;
+}
+.rootcolor_softRed:hover:hover {
+  background: #ffe6e2;
+}
+.rootcolor_softSand:hover:hover {
+  background: #e9e9e6;
+}
+.rootcolor_softSand:active:active {
+  background: #e3e3e0;
+}
+.rootcolor_clear:hover:hover {
+  background: #e9e9e6;
+}
+.rootcolor_clear:active:active {
+  background: #e3e3e0;
+}
+.rootcolor_link:hover:hover {
+  background: #ffffff00;
+}
+.rootcolor_link:active:active {
+  background: #ffffff00;
+}
+.startIconContainer {
+  display: flex;
+  position: relative;
+  flex-direction: row;
+  align-items: stretch;
+  justify-content: flex-start;
+}
+.startIconContainershowStartIcon {
+  display: flex;
+}
+.slotTargetStartIcon {
+  color: #ededec;
+}
+.slotTargetStartIconcolor_yellow {
+  color: #35290f;
+}
+.slotTargetStartIconcolor_white {
+  color: #35290f;
+}
+.slotTargetStartIconcolor_softBlue {
+  color: #006adc;
+}
+.slotTargetStartIconcolor_softGreen {
+  color: #18794e;
+}
+.slotTargetStartIconcolor_softYellow {
+  color: #946800;
+}
+.slotTargetStartIconcolor_softRed {
+  color: #ca3214;
+}
+.slotTargetStartIconcolor_softSand {
+  color: #706f6c;
+}
+.slotTargetStartIconcolor_clear {
+  color: #1b1b18;
+}
+.slotTargetStartIconcolor_link {
+  color: #0091ff;
+}
+.rootcolor_link:hover .slotTargetStartIconcolor_link {
+  color: #0081f1;
+}
+.rootcolor_link:active .slotTargetStartIconcolor_link {
+  color: #006adc;
+}
+.svg__s6Xxe {
+  position: relative;
+  object-fit: cover;
+  width: auto;
+  height: 1em;
+}
+.contentContainer {
+  display: flex;
+  position: relative;
+  flex-direction: row;
+  align-items: stretch;
+  justify-content: flex-start;
+}
+.root .contentContainer___focusVisibleWithin {
+  outline: none;
+}
+.slotTargetChildren {
+  color: #ededec;
+  font-weight: 500;
+  white-space: pre;
+}
+.slotTargetChildrencolor_blue {
+  color: #ffffff;
+}
+.slotTargetChildrencolor_green {
+  color: #ffffff;
+}
+.slotTargetChildrencolor_yellow {
+  color: #35290f;
+}
+.slotTargetChildrencolor_red {
+  color: #ffffff;
+}
+.slotTargetChildrencolor_sand {
+  color: #ffffff;
+}
+.slotTargetChildrencolor_white {
+  color: #1b1b18;
+}
+.slotTargetChildrencolor_softBlue {
+  color: #006adc;
+}
+.slotTargetChildrencolor_softGreen {
+  color: #18794e;
+}
+.slotTargetChildrencolor_softYellow {
+  color: #946800;
+}
+.slotTargetChildrencolor_softRed {
+  color: #ca3214;
+}
+.slotTargetChildrencolor_softSand {
+  color: #1b1b18;
+}
+.slotTargetChildrencolor_clear {
+  color: #1b1b18;
+}
+.slotTargetChildrencolor_link {
+  color: #0091ff;
+}
+.root:focus-within .slotTargetChildren > *,
+.root:focus-within .slotTargetChildren > :global(.__wab_slot) > *,
+.root:focus-within
+  .slotTargetChildren
+  > :global(.__wab_slot)
+  > :global(.__wab_slot)
+  > *,
+.root:focus-within
+  .slotTargetChildren
+  > :global(.__wab_slot)
+  > :global(.__wab_slot)
+  > :global(.__wab_slot)
+  > *,
+.root:focus-within .slotTargetChildren > picture > img,
+.root:focus-within .slotTargetChildren > :global(.__wab_slot) > picture > img,
+.root:focus-within
+  .slotTargetChildren
+  > :global(.__wab_slot)
+  > :global(.__wab_slot)
+  > picture
+  > img,
+.root:focus-within
+  .slotTargetChildren
+  > :global(.__wab_slot)
+  > :global(.__wab_slot)
+  > :global(.__wab_slot)
+  > picture
+  > img {
+  outline: none;
+}
+.root .slotTargetChildren___focusVisibleWithin > *,
+.root .slotTargetChildren___focusVisibleWithin > :global(.__wab_slot) > *,
+.root
+  .slotTargetChildren___focusVisibleWithin
+  > :global(.__wab_slot)
+  > :global(.__wab_slot)
+  > *,
+.root
+  .slotTargetChildren___focusVisibleWithin
+  > :global(.__wab_slot)
+  > :global(.__wab_slot)
+  > :global(.__wab_slot)
+  > *,
+.root .slotTargetChildren___focusVisibleWithin > picture > img,
+.root
+  .slotTargetChildren___focusVisibleWithin
+  > :global(.__wab_slot)
+  > picture
+  > img,
+.root
+  .slotTargetChildren___focusVisibleWithin
+  > :global(.__wab_slot)
+  > :global(.__wab_slot)
+  > picture
+  > img,
+.root
+  .slotTargetChildren___focusVisibleWithin
+  > :global(.__wab_slot)
+  > :global(.__wab_slot)
+  > :global(.__wab_slot)
+  > picture
+  > img {
+  outline: none;
+}
+.rootcolor_link:hover .slotTargetChildrencolor_link {
+  color: #0081f1;
+}
+.rootcolor_link:hover .slotTargetChildrencolor_link > :global(.__wab_text),
+.rootcolor_link:hover
+  .slotTargetChildrencolor_link
+  > :global(.__wab_expr_html_text),
+.rootcolor_link:hover
+  .slotTargetChildrencolor_link
+  > :global(.__wab_slot-string-wrapper),
+.rootcolor_link:hover
+  .slotTargetChildrencolor_link
+  > :global(.__wab_slot)
+  > :global(.__wab_text),
+.rootcolor_link:hover
+  .slotTargetChildrencolor_link
+  > :global(.__wab_slot)
+  > :global(.__wab_expr_html_text),
+.rootcolor_link:hover
+  .slotTargetChildrencolor_link
+  > :global(.__wab_slot)
+  > :global(.__wab_slot-string-wrapper),
+.rootcolor_link:hover
+  .slotTargetChildrencolor_link
+  > :global(.__wab_slot)
+  > :global(.__wab_slot)
+  > :global(.__wab_text),
+.rootcolor_link:hover
+  .slotTargetChildrencolor_link
+  > :global(.__wab_slot)
+  > :global(.__wab_slot)
+  > :global(.__wab_expr_html_text),
+.rootcolor_link:hover
+  .slotTargetChildrencolor_link
+  > :global(.__wab_slot)
+  > :global(.__wab_slot)
+  > :global(.__wab_slot-string-wrapper),
+.rootcolor_link:hover
+  .slotTargetChildrencolor_link
+  > :global(.__wab_slot)
+  > :global(.__wab_slot)
+  > :global(.__wab_slot)
+  > :global(.__wab_text),
+.rootcolor_link:hover
+  .slotTargetChildrencolor_link
+  > :global(.__wab_slot)
+  > :global(.__wab_slot)
+  > :global(.__wab_slot)
+  > :global(.__wab_expr_html_text),
+.rootcolor_link:hover
+  .slotTargetChildrencolor_link
+  > :global(.__wab_slot)
+  > :global(.__wab_slot)
+  > :global(.__wab_slot)
+  > :global(.__wab_slot-string-wrapper) {
+  text-decoration-line: underline;
+}
+.rootcolor_link:active .slotTargetChildrencolor_link {
+  color: #006adc;
+}
+.endIconContainer {
+  display: flex;
+  position: relative;
+  flex-direction: row;
+  align-items: stretch;
+  justify-content: flex-start;
+}
+.endIconContainershowEndIcon {
+  display: flex;
+}
+.slotTargetEndIcon {
+  color: #ededec;
+}
+.slotTargetEndIconcolor_yellow {
+  color: #35290f;
+}
+.slotTargetEndIconcolor_white {
+  color: #35290f;
+}
+.slotTargetEndIconcolor_softBlue {
+  color: #006adc;
+}
+.slotTargetEndIconcolor_softGreen {
+  color: #18794e;
+}
+.slotTargetEndIconcolor_softYellow {
+  color: #946800;
+}
+.slotTargetEndIconcolor_softRed {
+  color: #ca3214;
+}
+.slotTargetEndIconcolor_softSand {
+  color: #706f6c;
+}
+.slotTargetEndIconcolor_clear {
+  color: #1b1b18;
+}
+.slotTargetEndIconcolor_link {
+  color: #0091ff;
+}
+.rootcolor_link:hover .slotTargetEndIconcolor_link {
+  color: #0081f1;
+}
+.rootcolor_link:active .slotTargetEndIconcolor_link {
+  color: #006adc;
+}
+.svg__liJa {
+  position: relative;
+  object-fit: cover;
+  width: auto;
+  height: 1em;
+}

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

@@ -15,6 +15,7 @@ import {
   deriveRenderOpts
 } from "@plasmicapp/react-web";
 import { useDataEnv } from "@plasmicapp/react-web/lib/host";
+import { unstable_usePlasmicQueries } from "@plasmicapp/react-web/lib/data-sources";
 import RandomDynamicPageButton from "../../RandomDynamicPageButton"; // plasmic-import: Q23H1_1M_P/component
 import { _useStyleTokens } from "./PlasmicStyleTokensProvider"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/styleTokensProvider
 import "@plasmicapp/react-web/lib/plasmic.css";
@@ -53,6 +54,38 @@ export const PlasmicDynamicPage__ArgProps = new Array();
 
 const $$ = {};
 
+export const serverQueryTree = {
+  type: "component",
+  queries: {
+    sha256: {
+      id: "custom:krgWtF9Kkesx",
+      fn: async ({ $q, $props, $ctx, $state }) => {
+        console.log("Running SHA-256");
+        const data = new TextEncoder().encode($ctx.params.slug);
+        const hash = await crypto.subtle.digest("SHA-256", data);
+        return [...new Uint8Array(hash)]
+          .map(b => b.toString(16).padStart(2, "0"))
+          .join("-");
+      },
+      args: ({ $q, $props, $ctx, $state }) => {
+        return [
+          {
+            $ctx: {
+              params: $ctx["params"]
+            },
+            $props: {},
+            $q: {},
+            $state: {}
+          }
+        ];
+      }
+    }
+  },
+  propsContext: {},
+  stateSpecs: [],
+  children: []
+};
+
 function PlasmicDynamicPage__RenderFunc(props) {
   const { variants, overrides, forNode } = props;
   const args = React.useMemo(
@@ -72,6 +105,7 @@ function PlasmicDynamicPage__RenderFunc(props) {
   const $ctx = useDataEnv?.() || {};
   const refsRef = React.useRef({});
   const $refs = refsRef.current;
+  const $q = unstable_usePlasmicQueries(serverQueryTree, $ctx, $props, null);
   const styleTokensClassNames = _useStyleTokens();
   return (
     <React.Fragment>
@@ -95,33 +129,32 @@ function PlasmicDynamicPage__RenderFunc(props) {
             data-plasmic-override={overrides.section}
             className={classNames(projectcss.all, sty.section)}
           >
-            <h1
-              data-plasmic-name={"h1"}
-              data-plasmic-override={overrides.h1}
+            <h2
+              data-plasmic-name={"h2"}
+              data-plasmic-override={overrides.h2}
+              className={classNames(
+                projectcss.all,
+                projectcss.h2,
+                projectcss.h2__47tFX,
+                projectcss.__wab_text,
+                sty.h2
+              )}
+            >
+              <React.Fragment>{$ctx.params.slug}</React.Fragment>
+            </h2>
+            <span
+              data-plasmic-name={"span"}
+              data-plasmic-override={overrides.span}
               className={classNames(
                 projectcss.all,
-                projectcss.h1,
-                projectcss.h1__47tFX,
+                projectcss.span,
+                projectcss.span__47tFX,
                 projectcss.__wab_text,
-                sty.h1
+                sty.span
               )}
             >
-              <React.Fragment>
-                {(() => {
-                  try {
-                    return $ctx.params.slug;
-                  } catch (e) {
-                    if (
-                      e instanceof TypeError ||
-                      e?.plasmicType === "PlasmicUndefinedDataError"
-                    ) {
-                      return "Page 1";
-                    }
-                    throw e;
-                  }
-                })()}
-              </React.Fragment>
-            </h1>
+              <React.Fragment>{`SHA-256(${$ctx.params.slug}): ${$q.sha256.data}`}</React.Fragment>
+            </span>
             <RandomDynamicPageButton
               data-plasmic-name={"randomDynamicPageButton"}
               data-plasmic-override={overrides.randomDynamicPageButton}
@@ -138,9 +171,10 @@ function PlasmicDynamicPage__RenderFunc(props) {
 }
 
 const PlasmicDescendants = {
-  root: ["root", "section", "h1", "randomDynamicPageButton"],
-  section: ["section", "h1", "randomDynamicPageButton"],
-  h1: ["h1"],
+  root: ["root", "section", "h2", "span", "randomDynamicPageButton"],
+  section: ["section", "h2", "span", "randomDynamicPageButton"],
+  h2: ["h2"],
+  span: ["span"],
   randomDynamicPageButton: ["randomDynamicPageButton"]
 };
 
@@ -177,7 +211,8 @@ export const PlasmicDynamicPage = Object.assign(
   {
     // Helper components rendering sub-elements
     section: makeNodeComponent("section"),
-    h1: makeNodeComponent("h1"),
+    h2: makeNodeComponent("h2"),
+    span: makeNodeComponent("span"),
     randomDynamicPageButton: makeNodeComponent("randomDynamicPageButton"),
     // Metadata about props expected for PlasmicDynamicPage
     internalVariantProps: PlasmicDynamicPage__VariantProps,

package/cpa-out/react-codegen-js/src/components/plasmic/create_plasmic_app/PlasmicDynamicPage.module.css

@@ -0,0 +1,44 @@
+.root {
+  display: flex;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  min-width: 0;
+  min-height: 0;
+  padding: 0px;
+}
+.section {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  height: auto;
+  max-width: 100%;
+  row-gap: 16px;
+  min-width: 0;
+  padding: 96px 24px;
+}
+.h2 {
+  position: relative;
+  width: 100%;
+  height: auto;
+  max-width: 800px;
+  text-align: center;
+  min-width: 0;
+}
+.span {
+  position: relative;
+  width: 100%;
+  height: auto;
+  max-width: 800px;
+  text-align: center;
+  min-width: 0;
+}
+.randomDynamicPageButton:global(.__wab_instance):global(.__wab_instance) {
+  position: relative;
+}

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

@@ -109,7 +109,9 @@ function PlasmicHomepage__RenderFunc(props) {
                 sty.h1
               )}
             >
-              {"create-plasmic-app"}
+              {hasVariant(globalVariants, "screen", "desktopOnly")
+                ? "create-plasmic-app"
+                : "cpa"}
             </h1>
             <div
               data-plasmic-name={"text"}
@@ -120,44 +122,9 @@ function PlasmicHomepage__RenderFunc(props) {
                 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 plasmic_default__span__47tFX"
-                    }
-                    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\u2014do 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\u2014press the "
-                    }
-                  </React.Fragment>
-                  <span
-                    className={
-                      "plasmic_default__all plasmic_default__span plasmic_default__span__47tFX"
-                    }
-                    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>
-              )}
+              {
+                "This project is used by run-cpa.ts in the create-plasmic-app repo.\n\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. Therefore, please avoid changing this project.\n"
+              }
             </div>
             <RandomDynamicPageButton
               data-plasmic-name={"randomDynamicPageButton"}