create-plasmic-app 0.0.151 → 0.0.153

package/cpa-out/react-codegen-ts/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-ts/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-ts/src/components/plasmic/create_plasmic_app/PlasmicDynamicPage.tsx

@@ -55,6 +55,15 @@ import {
   useGlobalActions
 } from "@plasmicapp/react-web/lib/host";
 
+import { useMutablePlasmicQueryData } from "@plasmicapp/query";
+
+import { unstable_usePlasmicQueries } from "@plasmicapp/react-web/lib/data-sources";
+import type {
+  PlasmicQuery,
+  PlasmicQueryResult
+} from "@plasmicapp/react-web/lib/data-sources";
+import type { QueryComponentNode } from "@plasmicapp/react-web/lib/data-sources";
+
 import RandomDynamicPageButton from "../../RandomDynamicPageButton"; // plasmic-import: Q23H1_1M_P/component
 import { _useGlobalVariants } from "./plasmic"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectModule
 import { _useStyleTokens } from "./PlasmicStyleTokensProvider"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/styleTokensProvider
@@ -109,7 +118,8 @@ export const PlasmicDynamicPage__ArgProps = new Array<ArgPropType>();
 export type PlasmicDynamicPage__OverridesType = {
   root?: Flex__<"div">;
   section?: Flex__<"section">;
-  h1?: Flex__<"h1">;
+  h2?: Flex__<"h2">;
+  span?: Flex__<"span">;
   randomDynamicPageButton?: Flex__<typeof RandomDynamicPageButton>;
 };
 
@@ -119,6 +129,38 @@ export interface DefaultDynamicPageProps {
 
 const $$ = {};
 
+export const serverQueryTree: QueryComponentNode = {
+  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: {
   variants: PlasmicDynamicPage__VariantsArgs;
   args: PlasmicDynamicPage__ArgsType;
@@ -147,6 +189,8 @@ function PlasmicDynamicPage__RenderFunc(props: {
   const refsRef = React.useRef({});
   const $refs = refsRef.current;
 
+  const $q = unstable_usePlasmicQueries(serverQueryTree, $ctx, $props, null);
+
   const styleTokensClassNames = _useStyleTokens();
 
   return (
@@ -171,33 +215,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}
@@ -214,9 +257,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"]
 } as const;
 type NodeNameType = keyof typeof PlasmicDescendants;
@@ -225,7 +269,8 @@ type DescendantsType<T extends NodeNameType> =
 type NodeDefaultElementType = {
   root: "div";
   section: "section";
-  h1: "h1";
+  h2: "h2";
+  span: "span";
   randomDynamicPageButton: typeof RandomDynamicPageButton;
 };
 
@@ -292,7 +337,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

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

@@ -0,0 +1,43 @@
+.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;
+}
+.h1 {
+  position: relative;
+  max-width: 800px;
+  height: auto;
+  width: 100%;
+  min-width: 0;
+}
+.text {
+  position: relative;
+  max-width: 800px;
+  height: auto;
+  width: 100%;
+  min-width: 0;
+}
+.randomDynamicPageButton:global(.__wab_instance):global(.__wab_instance) {
+  max-width: 100%;
+  position: relative;
+}