feat: Add frameworks to onboarding part 2 (#21091)

* astro * add bubble * framer * laravel * nuxt * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) * add remix * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) * Update frontend/src/scenes/onboarding/sdks/feature-flags/angular.tsx * feat: Add frameworks to onboarding part 3 (#21158) * svelte * missing export * export * webflow * vue * django * flag code --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Raquel Smith <[email protected]>
PostHog · Apr 2, 2024 · 53f5e53 · 53f5e53
1 parent c3d261b
commit 53f5e53
Show file tree

Hide file tree

Showing 59 changed files with 1,207 additions and 80 deletions.
diff --git a/frontend/__snapshots__/scenes-other-onboarding--onboarding-sd-ks--dark.png b/frontend/__snapshots__/scenes-other-onboarding--onboarding-sd-ks--dark.png
diff --git a/frontend/__snapshots__/scenes-other-onboarding--onboarding-sd-ks--light.png b/frontend/__snapshots__/scenes-other-onboarding--onboarding-sd-ks--light.png
diff --git a/frontend/src/scenes/onboarding/sdks/allSDKs.tsx b/frontend/src/scenes/onboarding/sdks/allSDKs.tsx
@@ -19,6 +19,13 @@ export const allSDKs: SDK[] = [
         image: require('./logos/html.svg'),
         docsLink: 'https://posthog.com/docs/libraries/js',
     },
+    {
+        name: 'Android',
+        key: SDKKey.ANDROID,
+        tags: [SDKTag.MOBILE],
+        image: require('./logos/android.svg'),
+        docsLink: 'https://posthog.com/docs/libraries/android',
+    },
     {
         name: 'Angular',
         key: SDKKey.ANGULAR,
@@ -27,42 +34,72 @@ export const allSDKs: SDK[] = [
         docsLink: 'https://posthog.com/docs/libraries/angular',
     },
     {
-        name: 'React',
-        key: SDKKey.REACT,
-        tags: [SDKTag.WEB, SDKTag.RECOMMENDED],
-        recommended: true,
-        image: require('./logos/react.svg'),
-        docsLink: 'https://posthog.com/docs/libraries/react',
+        name: 'API',
+        key: SDKKey.API,
+        tags: [SDKTag.SERVER],
+        image: (
+            <span className="flex w-4">
+                <Logomark />
+            </span>
+        ),
+        docsLink: 'https://posthog.com/docs/api',
     },
     {
-        name: 'Next.js',
-        key: SDKKey.NEXT_JS,
+        name: 'Astro',
+        key: SDKKey.ASTRO,
         tags: [SDKTag.WEB],
-        image: require('./logos/nextjs.svg'),
-        docsLink: 'https://posthog.com/docs/libraries/next-js',
+        image: require('./logos/astro.svg'),
+        docsLink: 'https://posthog.com/docs/libraries/astro',
     },
     {
-        name: 'Gatsby',
-        key: SDKKey.GATSBY,
+        name: 'Bubble',
+        key: SDKKey.BUBBLE,
         tags: [SDKTag.WEB],
-        image: require('./logos/gatsby.svg'),
-        docsLink: 'https://posthog.com/docs/libraries/gatsby',
+        image: require('./logos/bubble.svg'),
+        docsLink: 'https://posthog.com/docs/libraries/bubble',
     },
     {
-        name: 'Nuxt.js',
-        key: SDKKey.NUXT_JS,
+        name: 'Django',
+        key: SDKKey.DJANGO,
+        tags: [SDKTag.SERVER],
+        image: require('./logos/django.svg'),
+        docsLink: 'https://posthog.com/docs/libraries/django',
+    },
+    {
+        name: 'Elixir',
+        key: SDKKey.ELIXIR,
+        tags: [SDKTag.SERVER],
+        image: require('./logos/elixir.svg'),
+        docsLink: 'https://posthog.com/docs/libraries/elixir',
+    },
+    {
+        name: 'Flutter',
+        key: SDKKey.FLUTTER,
+        tags: [SDKTag.MOBILE],
+        image: require('./logos/flutter.svg'),
+        docsLink: 'https://posthog.com/docs/libraries/flutter',
+    },
+    {
+        name: 'Framer',
+        key: SDKKey.FRAMER,
         tags: [SDKTag.WEB],
-        image: require('./logos/nuxt.svg'),
-        docsLink: 'https://posthog.com/docs/libraries/nuxt-js',
+        image: require('./logos/framer.svg'),
+        docsLink: 'https://posthog.com/docs/libraries/framer',
     },
     {
-        name: 'Vue.js',
-        key: SDKKey.VUE_JS,
+        name: 'Gatsby',
+        key: SDKKey.GATSBY,
         tags: [SDKTag.WEB],
-        image: require('./logos/vue.svg'),
-        docsLink: 'https://posthog.com/docs/libraries/vue-js',
+        image: require('./logos/gatsby.svg'),
+        docsLink: 'https://posthog.com/docs/libraries/gatsby',
+    },
+    {
+        name: 'Go',
+        key: SDKKey.GO,
+        tags: [SDKTag.SERVER],
+        image: require('./logos/go.svg'),
+        docsLink: 'https://posthog.com/docs/libraries/go',
     },
-    // Mobile
     {
         name: 'iOS',
         key: SDKKey.IOS,
@@ -71,27 +108,26 @@ export const allSDKs: SDK[] = [
         docsLink: 'https://posthog.com/docs/libraries/ios',
     },
     {
-        name: 'Android',
-        key: SDKKey.ANDROID,
-        tags: [SDKTag.MOBILE],
-        image: require('./logos/android.svg'),
-        docsLink: 'https://posthog.com/docs/libraries/android',
+        name: 'Java',
+        key: SDKKey.JAVA,
+        tags: [SDKTag.SERVER],
+        image: require('./logos/java.svg'),
+        docsLink: 'https://posthog.com/docs/libraries/java',
     },
     {
-        name: 'React Native',
-        key: SDKKey.REACT_NATIVE,
-        tags: [SDKTag.MOBILE],
-        image: require('./logos/react.svg'),
-        docsLink: 'https://posthog.com/docs/libraries/react-native',
+        name: 'Laravel',
+        key: SDKKey.LARAVEL,
+        tags: [SDKTag.SERVER],
+        image: require('./logos/laravel.svg'),
+        docsLink: 'https://posthog.com/docs/libraries/laravel',
     },
     {
-        name: 'Flutter',
-        key: SDKKey.FLUTTER,
-        tags: [SDKTag.MOBILE],
-        image: require('./logos/flutter.svg'),
-        docsLink: 'https://posthog.com/docs/libraries/flutter',
+        name: 'Next.js',
+        key: SDKKey.NEXT_JS,
+        tags: [SDKTag.WEB],
+        image: require('./logos/nextjs.svg'),
+        docsLink: 'https://posthog.com/docs/libraries/next-js',
     },
-    // Server
     {
         name: 'Node.js',
         key: SDKKey.NODE_JS,
@@ -101,19 +137,11 @@ export const allSDKs: SDK[] = [
         docsLink: 'https://posthog.com/docs/libraries/node',
     },
     {
-        name: 'Python',
-        key: SDKKey.PYTHON,
-        tags: [SDKTag.SERVER, SDKTag.RECOMMENDED],
-        recommended: true,
-        image: require('./logos/python.svg'),
-        docsLink: 'https://posthog.com/docs/libraries/python',
-    },
-    {
-        name: 'Ruby',
-        key: SDKKey.RUBY,
-        tags: [SDKTag.SERVER],
-        image: require('./logos/ruby.svg'),
-        docsLink: 'https://posthog.com/docs/libraries/ruby',
+        name: 'Nuxt.js',
+        key: SDKKey.NUXT_JS,
+        tags: [SDKTag.WEB],
+        image: require('./logos/nuxt.svg'),
+        docsLink: 'https://posthog.com/docs/libraries/nuxt-js',
     },
     {
         name: 'PHP',
@@ -123,36 +151,41 @@ export const allSDKs: SDK[] = [
         docsLink: 'https://posthog.com/docs/libraries/php',
     },
     {
-        name: 'Go',
-        key: SDKKey.GO,
-        tags: [SDKTag.SERVER],
-        image: require('./logos/go.svg'),
-        docsLink: 'https://posthog.com/docs/libraries/go',
+        name: 'Python',
+        key: SDKKey.PYTHON,
+        tags: [SDKTag.SERVER, SDKTag.RECOMMENDED],
+        recommended: true,
+        image: require('./logos/python.svg'),
+        docsLink: 'https://posthog.com/docs/libraries/python',
     },
     {
-        name: 'Elixir',
-        key: SDKKey.ELIXIR,
-        tags: [SDKTag.SERVER],
-        image: require('./logos/elixir.svg'),
-        docsLink: 'https://posthog.com/docs/libraries/elixir',
+        name: 'React',
+        key: SDKKey.REACT,
+        tags: [SDKTag.WEB, SDKTag.RECOMMENDED],
+        recommended: true,
+        image: require('./logos/react.svg'),
+        docsLink: 'https://posthog.com/docs/libraries/react',
     },
     {
-        name: 'API',
-        key: SDKKey.API,
-        tags: [SDKTag.SERVER],
-        image: (
-            <span className="flex w-4">
-                <Logomark />
-            </span>
-        ),
-        docsLink: 'https://posthog.com/docs/api',
+        name: 'React Native',
+        key: SDKKey.REACT_NATIVE,
+        tags: [SDKTag.MOBILE],
+        image: require('./logos/react.svg'),
+        docsLink: 'https://posthog.com/docs/libraries/react-native',
     },
     {
-        name: 'Java',
-        key: SDKKey.JAVA,
+        name: 'Remix',
+        key: SDKKey.REMIX,
+        tags: [SDKTag.WEB],
+        image: require('./logos/remix.svg'),
+        docsLink: 'https://posthog.com/docs/libraries/remix',
+    },
+    {
+        name: 'Ruby',
+        key: SDKKey.RUBY,
         tags: [SDKTag.SERVER],
-        image: require('./logos/java.svg'),
-        docsLink: 'https://posthog.com/docs/libraries/java',
+        image: require('./logos/ruby.svg'),
+        docsLink: 'https://posthog.com/docs/libraries/ruby',
     },
     {
         name: 'Rust',
@@ -161,6 +194,27 @@ export const allSDKs: SDK[] = [
         image: require('./logos/rust.svg'),
         docsLink: 'https://posthog.com/docs/libraries/rust',
     },
+    {
+        name: 'Svelte',
+        key: SDKKey.SVELTE,
+        tags: [SDKTag.WEB],
+        image: require('./logos/svelte.svg'),
+        docsLink: 'https://posthog.com/docs/libraries/svelte',
+    },
+    {
+        name: 'Vue.js',
+        key: SDKKey.VUE_JS,
+        tags: [SDKTag.WEB],
+        image: require('./logos/vue.svg'),
+        docsLink: 'https://posthog.com/docs/libraries/vue-js',
+    },
+    {
+        name: 'Webflow',
+        key: SDKKey.WEBFLOW,
+        tags: [SDKTag.WEB],
+        image: require('./logos/webflow.svg'),
+        docsLink: 'https://posthog.com/docs/libraries/webflow',
+    },
     // integrations
     {
         name: 'Google Tag Manager',

diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/FeatureFlagsSDKInstructions.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/FeatureFlagsSDKInstructions.tsx
@@ -4,33 +4,52 @@ import {
     FeatureFlagsAndroidInstructions,
     FeatureFlagsAngularInstructions,
     FeatureFlagsAPIInstructions,
+    FeatureFlagsAstroInstructions,
+    FeatureFlagsBubbleInstructions,
+    FeatureFlagsDjangoInstructions,
     FeatureFlagsFlutterInstructions,
+    FeatureFlagsFramerInstructions,
     FeatureFlagsGoInstructions,
     FeatureFlagsIOSInstructions,
     FeatureFlagsJSWebInstructions,
+    FeatureFlagsLaravelInstructions,
     FeatureFlagsNextJSInstructions,
     FeatureFlagsNodeInstructions,
+    FeatureFlagsNuxtJSInstructions,
     FeatureFlagsPHPInstructions,
     FeatureFlagsPythonInstructions,
     FeatureFlagsReactInstructions,
+    FeatureFlagsRemixJSInstructions,
     FeatureFlagsRNInstructions,
     FeatureFlagsRubyInstructions,
+    FeatureFlagsSvelteInstructions,
+    FeatureFlagsVueInstructions,
+    FeatureFlagsWebflowInstructions,
 } from '.'
 
 export const FeatureFlagsSDKInstructions: SDKInstructionsMap = {
     [SDKKey.JS_WEB]: FeatureFlagsJSWebInstructions,
     [SDKKey.ANGULAR]: FeatureFlagsAngularInstructions,
     [SDKKey.ANDROID]: FeatureFlagsAndroidInstructions,
     [SDKKey.API]: FeatureFlagsAPIInstructions,
+    [SDKKey.ASTRO]: FeatureFlagsAstroInstructions,
+    [SDKKey.BUBBLE]: FeatureFlagsBubbleInstructions,
+    [SDKKey.DJANGO]: FeatureFlagsDjangoInstructions,
     [SDKKey.FLUTTER]: FeatureFlagsFlutterInstructions,
+    [SDKKey.FRAMER]: FeatureFlagsFramerInstructions,
     [SDKKey.GO]: FeatureFlagsGoInstructions,
     [SDKKey.IOS]: FeatureFlagsIOSInstructions,
+    [SDKKey.LARAVEL]: FeatureFlagsLaravelInstructions,
     [SDKKey.NEXT_JS]: FeatureFlagsNextJSInstructions,
     [SDKKey.NODE_JS]: FeatureFlagsNodeInstructions,
+    [SDKKey.NUXT_JS]: FeatureFlagsNuxtJSInstructions,
     [SDKKey.PHP]: FeatureFlagsPHPInstructions,
     [SDKKey.PYTHON]: FeatureFlagsPythonInstructions,
     [SDKKey.REACT]: FeatureFlagsReactInstructions,
     [SDKKey.REACT_NATIVE]: FeatureFlagsRNInstructions,
+    [SDKKey.REMIX]: FeatureFlagsRemixJSInstructions,
     [SDKKey.RUBY]: FeatureFlagsRubyInstructions,
-    // add rust, gatsby, nuxt, vue, svelte, and others here
+    [SDKKey.SVELTE]: FeatureFlagsSvelteInstructions,
+    [SDKKey.VUE_JS]: FeatureFlagsVueInstructions,
+    [SDKKey.WEBFLOW]: FeatureFlagsWebflowInstructions,
 }
diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/astro.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/astro.tsx
@@ -0,0 +1,13 @@
+import { SDKKey } from '~/types'
+
+import { SDKInstallAstroInstructions } from '../sdk-install-instructions/astro'
+import { FlagImplementationSnippet } from './flagImplementationSnippet'
+
+export function FeatureFlagsAstroInstructions(): JSX.Element {
+    return (
+        <>
+            <SDKInstallAstroInstructions />
+            <FlagImplementationSnippet sdkKey={SDKKey.JS_WEB} />
+        </>
+    )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/bubble.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/bubble.tsx
@@ -0,0 +1,13 @@
+import { SDKKey } from '~/types'
+
+import { SDKInstallBubbleInstructions } from '../sdk-install-instructions/bubble'
+import { FlagImplementationSnippet } from './flagImplementationSnippet'
+
+export function FeatureFlagsBubbleInstructions(): JSX.Element {
+    return (
+        <>
+            <SDKInstallBubbleInstructions />
+            <FlagImplementationSnippet sdkKey={SDKKey.JS_WEB} />
+        </>
+    )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/django.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/django.tsx
@@ -0,0 +1,13 @@
+import { SDKKey } from '~/types'
+
+import { SDKInstallDjangoInstructions } from '../sdk-install-instructions'
+import { FlagImplementationSnippet } from './flagImplementationSnippet'
+
+export function FeatureFlagsDjangoInstructions(): JSX.Element {
+    return (
+        <>
+            <SDKInstallDjangoInstructions />
+            <FlagImplementationSnippet sdkKey={SDKKey.PYTHON} />
+        </>
+    )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/framer.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/framer.tsx
@@ -0,0 +1,13 @@
+import { SDKKey } from '~/types'
+
+import { SDKInstallFramerInstructions } from '../sdk-install-instructions/framer'
+import { FlagImplementationSnippet } from './flagImplementationSnippet'
+
+export function FeatureFlagsFramerInstructions(): JSX.Element {
+    return (
+        <>
+            <SDKInstallFramerInstructions />
+            <FlagImplementationSnippet sdkKey={SDKKey.JS_WEB} />
+        </>
+    )
+}