feat: [Part 1] Add more frameworks to onboarding - Angular (#20868)

* first commit

* imports

* comments

frontend/src/scenes/onboarding/sdks/allSDKs.tsx

@@ -20,42 +20,86 @@ export const allSDKs: SDK[] = [
         docsLink: 'https://posthog.com/docs/libraries/js',
     },
     {
-        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: 'Android',
+        key: SDKKey.ANDROID,
+        tags: [SDKTag.MOBILE],
+        image: require('./logos/android.svg'),
+        docsLink: 'https://posthog.com/docs/libraries/android',
     },
     {
-        name: 'Next.js',
-        key: SDKKey.NEXT_JS,
+        name: 'Angular',
+        key: SDKKey.ANGULAR,
         tags: [SDKTag.WEB],
-        image: require('./logos/nextjs.svg'),
-        docsLink: 'https://posthog.com/docs/libraries/next-js',
+        image: require('./logos/angular.svg'),
+        docsLink: 'https://posthog.com/docs/libraries/angular',
     },
     {
-        name: 'Gatsby',
-        key: SDKKey.GATSBY,
+        name: 'API',
+        key: SDKKey.API,
+        tags: [SDKTag.SERVER],
+        image: (
+            <span className="flex w-4">
+                <Logomark />
+            </span>
+        ),
+        docsLink: 'https://posthog.com/docs/api',
+    },
+    {
+        name: 'Astro',
+        key: SDKKey.ASTRO,
         tags: [SDKTag.WEB],
-        image: require('./logos/gatsby.svg'),
-        docsLink: 'https://posthog.com/docs/libraries/gatsby',
+        image: require('./logos/astro.svg'),
+        docsLink: 'https://posthog.com/docs/libraries/astro',
     },
     {
-        name: 'Nuxt.js',
-        key: SDKKey.NUXT_JS,
+        name: 'Bubble',
+        key: SDKKey.BUBBLE,
         tags: [SDKTag.WEB],
-        image: require('./logos/nuxt.svg'),
-        docsLink: 'https://posthog.com/docs/libraries/nuxt-js',
+        image: require('./logos/bubble.svg'),
+        docsLink: 'https://posthog.com/docs/libraries/bubble',
     },
     {
-        name: 'Vue.js',
-        key: SDKKey.VUE_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/vue.svg'),
-        docsLink: 'https://posthog.com/docs/libraries/vue-js',
+        image: require('./logos/framer.svg'),
+        docsLink: 'https://posthog.com/docs/libraries/framer',
+    },
+    {
+        name: 'Gatsby',
+        key: SDKKey.GATSBY,
+        tags: [SDKTag.WEB],
+        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,
@@ -64,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,
@@ -94,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',
@@ -116,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',
@@ -154,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',

frontend/src/scenes/onboarding/sdks/feature-flags/FeatureFlagsSDKInstructions.tsx

@@ -2,33 +2,54 @@ import { SDKInstructionsMap, SDKKey } from '~/types'
 
 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.REACT]: FeatureFlagsReactInstructions,
-    [SDKKey.NEXT_JS]: FeatureFlagsNextJSInstructions,
-    [SDKKey.IOS]: FeatureFlagsIOSInstructions,
-    [SDKKey.REACT_NATIVE]: FeatureFlagsRNInstructions,
+    [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,
-    [SDKKey.PHP]: FeatureFlagsPHPInstructions,
-    [SDKKey.GO]: FeatureFlagsGoInstructions,
-    [SDKKey.API]: FeatureFlagsAPIInstructions,
-    // add rust, gatsby, nuxt, vue, svelte, and others here
+    [SDKKey.SVELTE]: FeatureFlagsSvelteInstructions,
+    [SDKKey.VUE_JS]: FeatureFlagsVueInstructions,
+    [SDKKey.WEBFLOW]: FeatureFlagsWebflowInstructions,
 }

frontend/src/scenes/onboarding/sdks/feature-flags/angular.tsx

@@ -0,0 +1,13 @@
+import { SDKKey } from '~/types'
+
+import { SDKInstallAngularInstructions } from '../sdk-install-instructions/angular'
+import { FlagImplementationSnippet } from './flagImplementationSnippet'
+
+export function FeatureFlagsAngularInstructions(): JSX.Element {
+    return (
+        <>
+            <SDKInstallAngularInstructions />
+            <FlagImplementationSnippet sdkKey={SDKKey.JS_WEB} />
+        </>
+    )
+}

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} />
+        </>
+    )
+}

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} />
+        </>
+    )
+}

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} />
+        </>
+    )
+}