create-plasmic-app 0.0.103 → 0.0.105

package/cpa-out/tanstack-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicRandomDynamicPageButton.tsx

@@ -0,0 +1,279 @@
+/* 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
+
+import * as React from "react";
+
+import { useRouter, Link } from "@tanstack/react-router";
+import type { LinkProps } from "@tanstack/react-router";
+
+import {
+  Flex as Flex__,
+  MultiChoiceArg,
+  PlasmicDataSourceContextProvider as PlasmicDataSourceContextProvider__,
+  PlasmicIcon as PlasmicIcon__,
+  PlasmicImg as PlasmicImg__,
+  PlasmicLink as PlasmicLink__,
+  PlasmicPageGuard as PlasmicPageGuard__,
+  SingleBooleanChoiceArg,
+  SingleChoiceArg,
+  Stack as Stack__,
+  StrictProps,
+  Trans as Trans__,
+  classNames,
+  createPlasmicElementProxy,
+  deriveRenderOpts,
+  ensureGlobalVariants,
+  generateOnMutateForSpec,
+  generateStateOnChangeProp,
+  generateStateOnChangePropForCodeComponents,
+  generateStateValueProp,
+  get as $stateGet,
+  hasVariant,
+  initializeCodeComponentStates,
+  initializePlasmicStates,
+  makeFragment,
+  omit,
+  pick,
+  renderPlasmicSlot,
+  set as $stateSet,
+  useCurrentUser,
+  useDollarState,
+  usePlasmicTranslator,
+  useTrigger,
+  wrapWithClassName
+} from "@plasmicapp/react-web";
+import {
+  DataCtxReader as DataCtxReader__,
+  useDataEnv,
+  useGlobalActions
+} from "@plasmicapp/react-web/lib/host";
+
+import Button from "../../Button"; // plasmic-import: TQcvW_pSKi3/component
+
+import globalcss from "@plasmicapp/react-web/lib/plasmic.css?url";
+import defaultcss from "../plasmic__default_style.css?url"; // plasmic-import: global/defaultcss
+
+import projectcss from "./plasmic.css?url"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss
+import sty from "./PlasmicRandomDynamicPageButton.css?url"; // plasmic-import: Q23H1_1M_P/css
+
+import CheckSvgIcon from "./icons/PlasmicIcon__CheckSvg"; // plasmic-import: gj-_D7n31Ho/icon
+import IconIcon from "./icons/PlasmicIcon__Icon"; // plasmic-import: 6PNxx3YMyDQ/icon
+
+createPlasmicElementProxy;
+
+export type PlasmicRandomDynamicPageButton__VariantMembers = {};
+export type PlasmicRandomDynamicPageButton__VariantsArgs = {};
+type VariantPropType = keyof PlasmicRandomDynamicPageButton__VariantsArgs;
+export const PlasmicRandomDynamicPageButton__VariantProps =
+  new Array<VariantPropType>();
+
+export type PlasmicRandomDynamicPageButton__ArgsType = {};
+type ArgPropType = keyof PlasmicRandomDynamicPageButton__ArgsType;
+export const PlasmicRandomDynamicPageButton__ArgProps =
+  new Array<ArgPropType>();
+
+export type PlasmicRandomDynamicPageButton__OverridesType = {
+  root?: Flex__<typeof Button>;
+};
+
+export interface DefaultRandomDynamicPageButtonProps {
+  className?: string;
+}
+
+const $$ = {};
+
+function useTanStackRouter() {
+  try {
+    return useRouter();
+  } catch {}
+  return undefined;
+}
+
+function PlasmicRandomDynamicPageButton__RenderFunc(props: {
+  variants: PlasmicRandomDynamicPageButton__VariantsArgs;
+  args: PlasmicRandomDynamicPageButton__ArgsType;
+  overrides: PlasmicRandomDynamicPageButton__OverridesType;
+  forNode?: string;
+}) {
+  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 __tanstackRouter = useTanStackRouter();
+  const $ctx = useDataEnv?.() || {};
+  const refsRef = React.useRef({});
+  const $refs = refsRef.current;
+
+  return (
+    <Button
+      data-plasmic-name={"root"}
+      data-plasmic-override={overrides.root}
+      data-plasmic-root={true}
+      data-plasmic-for-node={forNode}
+      className={classNames(
+        "__wab_instance",
+        "RandomDynamicPageButton__root__yStMk"
+      )}
+      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 {
+                  location.assign(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>
+  ) as React.ReactElement | null;
+}
+
+const PlasmicDescendants = {
+  root: ["root"]
+} as const;
+type NodeNameType = keyof typeof PlasmicDescendants;
+type DescendantsType<T extends NodeNameType> =
+  (typeof PlasmicDescendants)[T][number];
+type NodeDefaultElementType = {
+  root: typeof Button;
+};
+
+type ReservedPropsType = "variants" | "args" | "overrides";
+type NodeOverridesType<T extends NodeNameType> = Pick<
+  PlasmicRandomDynamicPageButton__OverridesType,
+  DescendantsType<T>
+>;
+type NodeComponentProps<T extends NodeNameType> =
+  // Explicitly specify variants, args, and overrides as objects
+  {
+    variants?: PlasmicRandomDynamicPageButton__VariantsArgs;
+    args?: PlasmicRandomDynamicPageButton__ArgsType;
+    overrides?: NodeOverridesType<T>;
+  } & Omit<PlasmicRandomDynamicPageButton__VariantsArgs, ReservedPropsType> & // Specify variants directly as props
+    // Specify args directly as props
+    Omit<PlasmicRandomDynamicPageButton__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: 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 const PlasmicRandomDynamicPageButton__HeadOptions = {
+  meta: [{ name: "twitter:card", content: "summary" }],
+
+  links: [
+    { rel: "stylesheet", href: globalcss },
+    { rel: "stylesheet", href: defaultcss },
+    { rel: "stylesheet", href: projectcss },
+    { rel: "stylesheet", href: sty }
+  ]
+} as Record<"meta" | "links", Array<Record<string, string>>>;
+
+export default PlasmicRandomDynamicPageButton;
+/* prettier-ignore-end */

package/cpa-out/tanstack-codegen-ts/src/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/tanstack-codegen-ts/src/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/tanstack-codegen-ts/src/routeTree.gen.ts

@@ -0,0 +1,95 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as PlasmicHostRouteImport } from './routes/plasmic-host'
+import { Route as IndexRouteImport } from './routes/index'
+import { Route as DynamicSlugIndexRouteImport } from './routes/dynamic/$slug/index'
+
+const PlasmicHostRoute = PlasmicHostRouteImport.update({
+  id: '/plasmic-host',
+  path: '/plasmic-host',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const DynamicSlugIndexRoute = DynamicSlugIndexRouteImport.update({
+  id: '/dynamic/$slug/',
+  path: '/dynamic/$slug/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/plasmic-host': typeof PlasmicHostRoute
+  '/dynamic/$slug': typeof DynamicSlugIndexRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/plasmic-host': typeof PlasmicHostRoute
+  '/dynamic/$slug': typeof DynamicSlugIndexRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/plasmic-host': typeof PlasmicHostRoute
+  '/dynamic/$slug/': typeof DynamicSlugIndexRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/plasmic-host' | '/dynamic/$slug'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/plasmic-host' | '/dynamic/$slug'
+  id: '__root__' | '/' | '/plasmic-host' | '/dynamic/$slug/'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  PlasmicHostRoute: typeof PlasmicHostRoute
+  DynamicSlugIndexRoute: typeof DynamicSlugIndexRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/plasmic-host': {
+      id: '/plasmic-host'
+      path: '/plasmic-host'
+      fullPath: '/plasmic-host'
+      preLoaderRoute: typeof PlasmicHostRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/dynamic/$slug/': {
+      id: '/dynamic/$slug/'
+      path: '/dynamic/$slug'
+      fullPath: '/dynamic/$slug'
+      preLoaderRoute: typeof DynamicSlugIndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  PlasmicHostRoute: PlasmicHostRoute,
+  DynamicSlugIndexRoute: DynamicSlugIndexRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()

package/cpa-out/tanstack-codegen-ts/src/router.tsx

@@ -0,0 +1,24 @@
+import { createRouter as createTanstackRouter } from '@tanstack/react-router'
+
+// Import the generated route tree
+import { routeTree } from './routeTree.gen'
+
+import './styles.css'
+
+// Create a new router instance
+export const createRouter = () => {
+  const router = createTanstackRouter({
+    routeTree,
+    scrollRestoration: true,
+    defaultPreloadStaleTime: 0,
+  })
+
+  return router
+}
+
+// Register the router instance for type safety
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: ReturnType<typeof createRouter>
+  }
+}

package/cpa-out/tanstack-codegen-ts/src/routes/__root.tsx

@@ -0,0 +1,37 @@
+import { createRootRoute, HeadContent, Outlet, Scripts } from '@tanstack/react-router'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
+import { PlasmicRootProvider } from "@plasmicapp/react-web"
+import appCss from "../styles.css?url";
+
+export const Route = createRootRoute({
+  head: () => ({
+    links: [
+      {
+        rel: 'stylesheet',
+        href: appCss,
+      },
+    ],
+  }),
+  component: () => (
+    <RootDocument>
+      <PlasmicRootProvider>
+        <Outlet />
+        <TanStackRouterDevtools />
+      </PlasmicRootProvider>
+    </RootDocument>
+  ),
+})
+
+function RootDocument({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        {children}
+        <Scripts />
+      </body>
+    </html>
+  )
+}

package/cpa-out/tanstack-codegen-ts/src/routes/dynamic/$slug/index.tsx

@@ -0,0 +1,49 @@
+// 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/react-web/lib/host";
+
+import {
+  PlasmicDynamicPage,
+  PlasmicDynamicPage__HeadOptions
+} from "../../../components/plasmic/create_plasmic_app/PlasmicDynamicPage";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/dynamic/$slug/")({
+  head: () => ({
+    meta: [...PlasmicDynamicPage__HeadOptions.meta],
+    links: [...PlasmicDynamicPage__HeadOptions.links]
+  }),
+  component: DynamicPage
+});
+
+function DynamicPage() {
+  // 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
+  // TanStack Router __root Route
+  // (https://tanstack.com/router/latest/docs/framework/react/guide/tanstack-start#the-root-of-your-application).
+
+  return (
+    <PageParamsProvider__
+      route={Route.fullPath}
+      params={Route.useParams()}
+      query={Route.useSearch()}
+    >
+      <PlasmicDynamicPage />
+    </PageParamsProvider__>
+  );
+}
+
+export default DynamicPage;

package/cpa-out/tanstack-codegen-ts/src/routes/index.tsx

@@ -0,0 +1,49 @@
+// 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/react-web/lib/host";
+
+import {
+  PlasmicHomepage,
+  PlasmicHomepage__HeadOptions
+} from "../components/plasmic/create_plasmic_app/PlasmicHomepage";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/")({
+  head: () => ({
+    meta: [...PlasmicHomepage__HeadOptions.meta],
+    links: [...PlasmicHomepage__HeadOptions.links]
+  }),
+  component: Homepage
+});
+
+function Homepage() {
+  // 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
+  // TanStack Router __root Route
+  // (https://tanstack.com/router/latest/docs/framework/react/guide/tanstack-start#the-root-of-your-application).
+
+  return (
+    <PageParamsProvider__
+      route={Route.fullPath}
+      params={Route.useParams()}
+      query={Route.useSearch()}
+    >
+      <PlasmicHomepage />
+    </PageParamsProvider__>
+  );
+}
+
+export default Homepage;

package/cpa-out/tanstack-codegen-ts/src/routes/plasmic-host.tsx

@@ -0,0 +1,20 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { PlasmicCanvasHost, registerComponent } from '@plasmicapp/react-web/lib/host';
+
+export const Route = createFileRoute('/plasmic-host')({
+  component: PlasmicHostRouteComponent,
+})
+
+
+// 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(...)
+
+function PlasmicHostRouteComponent() {
+  return <PlasmicCanvasHost />
+}

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

@@ -0,0 +1,28 @@
+{
+  "include": ["**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "target": "ES2022",
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    /* Linting */
+    "skipLibCheck": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+    }
+  }
+}