@wix/ditto-codegen-public 1.0.0

package/dist/examples-apps/mixpanel-analytics/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "mixpanel-analytics",
+  "version": "1.0.0",
+  "dependencies": {
+    "@tanstack/react-query": "^4.36.1",
+    "@wix/app-management": "^1.0.0",
+    "@wix/design-system": "^1.111.0",
+    "@wix/essentials": "^0.1.4",
+    "@wix/wix-ui-icons-common": "^3.0.34",
+    "mixpanel-browser": "^2.49.0"
+  },
+  "devDependencies": {
+    "@types/react": "^16.0.0",
+    "@types/react-dom": "^16.0.0",
+    "@wix/cli": "^1.0.0",
+    "@wix/cli-app": "^1.0.0",
+    "@wix/sdk-types": "^1.0.0",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
+    "typescript": "^5.3.3"
+  },
+  "scripts": {
+    "build": "wix app build",
+    "release": "wix app release",
+    "dev": "wix app dev",
+    "preview": "wix app preview",
+    "logs": "wix app logs",
+    "generate": "wix app generate",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/dist/examples-apps/mixpanel-analytics/src/dashboard/components/ProjectToken.tsx

@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from 'react';
+import { Input, Button, Box, Loader } from '@wix/design-system';
+import * as Icons from '@wix/wix-ui-icons-common';
+import { useEmbeds } from '../hooks/wix-embeds.js';
+
+type MixpanelEmbeds = {
+  projectToken: string;
+};
+
+export default function ProjectToken() {
+  const { embedScript, getEmbeddedScript } = useEmbeds<MixpanelEmbeds>();
+  const [projectToken, setProjectToken] = useState<string>('');
+
+  useEffect(() => {
+    setProjectToken(getEmbeddedScript.data?.projectToken || '');
+  }, [getEmbeddedScript.data]);
+
+  const ButtonContent = () => {
+    if (embedScript.isLoading) {
+      return <Loader size="tiny" />;
+    }
+
+    if (!getEmbeddedScript.data?.projectToken) {
+      return (
+        <Box gap={1}>
+          Activate
+          <Icons.GetStarted />
+        </Box>
+      );
+    } else {
+      return <>Update</>;
+    }
+  };
+
+  return (
+    <Box gap={3} marginTop={3}>
+      {getEmbeddedScript.isLoading ? (
+        <Loader size="small" />
+      ) : (
+        <>
+          <Input
+            disabled={embedScript.isLoading}
+            placeholder={'project-token'}
+            value={projectToken}
+            onChange={(e) => setProjectToken(e.currentTarget.value)}
+          />
+          <Button
+            disabled={
+              getEmbeddedScript.data?.projectToken === projectToken ||
+              projectToken.length !== 32
+            }
+            onClick={() => embedScript.mutate({ projectToken })}
+          >
+            <ButtonContent />
+          </Button>
+        </>
+      )}
+    </Box>
+  );
+}

package/dist/examples-apps/mixpanel-analytics/src/dashboard/hooks/wix-embeds.ts

@@ -0,0 +1,33 @@
+import { embeddedScripts } from '@wix/app-management';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+
+export const QUERY_EMBEDS = 'queryEmbeds';
+export const MUTATE_EMBEDS = 'mutateEmbeds';
+
+export const useEmbeds = <T extends Record<string, string>>() => {
+  const queryClient = useQueryClient();
+
+  const getEmbeddedScript = useQuery<unknown, unknown, T>({
+    queryKey: [QUERY_EMBEDS],
+    refetchOnWindowFocus: false,
+    queryFn: async () => {
+      // https://dev.wix.com/docs/sdk/backend-modules/app-market/embedded-scripts/get-embedded-script
+      const embeddedScript = await embeddedScripts.getEmbeddedScript();
+      return embeddedScript.parameters || {};
+    },
+  });
+
+  const embedScript = useMutation<unknown, unknown, T>({
+    mutationKey: [MUTATE_EMBEDS],
+    mutationFn: async (parameters) => {
+      // https://dev.wix.com/docs/sdk/backend-modules/app-market/embedded-scripts/embed-script
+      await embeddedScripts.embedScript({ parameters });
+      return parameters;
+    },
+    onSuccess: (data) => {
+      queryClient.setQueryData([QUERY_EMBEDS], data);
+    },
+  });
+
+  return { embedScript, getEmbeddedScript };
+};

package/dist/examples-apps/mixpanel-analytics/src/dashboard/pages/page.json

@@ -0,0 +1,5 @@
+{
+    "$schema": "https://dev.wix.com/wix-cli/schemas/dashboard-page.json",
+    "id": "ca1fdaad-68d4-4abb-8580-75ecd9d19fb9",
+    "title": "Mixpanel Setup"
+}

package/dist/examples-apps/mixpanel-analytics/src/dashboard/pages/page.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Page, Card, Box, Text, TextButton } from '@wix/design-system';
+import '@wix/design-system/styles.global.css';
+import { withProviders } from '../withProviders';
+import ProjectToken from '../components/ProjectToken.js';
+
+function MixpanelAnalytics() {
+  return (
+    <Page height="100vh">
+      <Page.Header title="Mixpanel Analytics" />
+      <Page.Content>
+        <Card>
+          <Card.Header title="Setup" />
+          <Card.Divider />
+          <Card.Content>
+            <Box direction="vertical" gap={3}>
+              <Text>
+                To start collecting data please add your Mixpanel project token.
+                <br />
+                If you don't have one, you can create it in
+                <Box inline padding={1}>
+                  <TextButton
+                    underline="onHover"
+                    onClick={() => open('https://mixpanel.com/analysis')}
+                  >
+                    Mixpanel Analytics
+                  </TextButton>
+                </Box>
+              </Text>
+              <ProjectToken />
+            </Box>
+          </Card.Content>
+        </Card>
+      </Page.Content>
+    </Page>
+  );
+}
+
+export default withProviders(MixpanelAnalytics);

package/dist/examples-apps/mixpanel-analytics/src/dashboard/withProviders.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
+import { WixDesignSystemProvider } from '@wix/design-system';
+import { i18n } from '@wix/essentials';
+
+const queryClient = new QueryClient();
+
+export function withProviders<P extends {} = {}>(Component: React.FC<P>) {
+  return function DashboardProviders(props: P) {
+    const locale = i18n.getLocale();
+    return (
+      <WixDesignSystemProvider locale={locale} features={{ newColorsBranding: true }}>
+        <QueryClientProvider client={queryClient}>
+          <Component {...props} />
+        </QueryClientProvider>
+      </WixDesignSystemProvider>
+    );
+  };
+}

package/dist/examples-apps/mixpanel-analytics/src/env.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="@wix/cli-app/client" />
+/// <reference types="@wix/sdk-types/client" />
+
+// NOTE: This file should not be edited. This is an auto-generated file.

package/dist/examples-apps/mixpanel-analytics/src/site/embedded-scripts/mixpanel-analytics/embedded.html

@@ -0,0 +1,13 @@
+<div id="project-token" data-project-token="{{projectToken}}"></div>
+<script type="module">
+  import mixpanel from 'mixpanel-browser';
+
+  const el = document.querySelector('#project-token');
+
+  mixpanel.init(el.dataset.projectToken, {
+    debug: true,
+    track_pageview: true,
+  });
+
+  mixpanel.track('An Event');
+</script>

package/dist/examples-apps/mixpanel-analytics/src/site/embedded-scripts/mixpanel-analytics/embedded.json

@@ -0,0 +1,7 @@
+{
+    "$schema": "https://dev.wix.com/wix-cli/schemas/embedded-script.json",
+    "id": "a0cabe0c-2130-4b14-82f2-f341a5484cf8",
+    "name": "Mixpanel Analytics",
+    "scriptType": "ANALYTICS",
+    "placement": "HEAD"
+}

package/dist/examples-apps/mixpanel-analytics/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@wix/cli-app/tsconfig.app.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "types": ["react"]
+  },
+  "include": ["src"]
+}

package/dist/examples-apps/mixpanel-analytics/wix.config.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://dev.wix.com/wix-cli/schemas/wix-config.json",
+  "appId": "932e9aba-d455-4296-a4c5-bf7cbe1b588b",
+  "projectId": "mixpanel-analytics"
+}

package/dist/examples-apps/my-locations-app/.nvmrc

@@ -0,0 +1 @@
+22.10.0

package/dist/examples-apps/my-locations-app/README.md

@@ -0,0 +1,21 @@
+# my-locations-app
+
+This project was bootstrapped with [Create Wix App](https://www.npmjs.com/package/@wix/create-app).  
+Read more about it in the [Wix CLI for Apps
+ documentation](https://dev.wix.com/docs/build-apps/developer-tools/cli/get-started/about-the-wix-cli-for-apps).
+
+## Setup 🔧
+
+##### Install dependencies:
+
+```console
+npm install
+```
+
+## Available Scripts
+
+In the project directory, you can run:
+
+```console
+npm run dev
+```