Fixed typings and added more agg funcs

.env.example

@@ -0,0 +1 @@
+MAPLIBRE_STYLE_URL=https://api.example.com/style.json?key=mykey

.eslintrc.js

@@ -18,6 +18,12 @@ module.exports = {
         react: {
             version: 'detect',
         },
+        'import/resolver': {
+            node: {
+                paths: ['eslint-rules'], // Add the directory containing your custom rules
+                extensions: ['.js', '.jsx', '.ts', '.tsx'], // Ensure ESLint resolves both JS and TS files
+            },
+        },
     },
     extends: [
         'eslint:recommended',
@@ -37,7 +43,7 @@ module.exports = {
         ecmaVersion: 2018,
         sourceType: 'module',
     },
-    plugins: ['prettier', 'react', 'cypress', '@typescript-eslint', 'no-only-tests', 'jest', 'compat'],
+    plugins: ['prettier', 'react', 'cypress', '@typescript-eslint', 'no-only-tests', 'jest', 'compat', 'posthog'],
     rules: {
         'no-console': ['error', { allow: ['warn', 'error'] }],
         'no-debugger': 'error',
@@ -91,7 +97,7 @@ module.exports = {
                 ],
             },
         ],
-        'react/forbid-elements': [
+        'posthog/warn-elements': [
             1,
             {
                 forbid: [
@@ -236,6 +242,16 @@ module.exports = {
                 '@typescript-eslint/no-var-requires': 'off',
             },
         },
+        {
+            files: 'eslint-rules/**/*',
+            extends: ['eslint:recommended'],
+            rules: {
+                '@typescript-eslint/no-var-requires': 'off',
+            },
+            env: {
+                node: true,
+            },
+        },
     ],
     reportUnusedDisableDirectives: true,
 }

.github/actions/build-n-cache-image/action.yml

@@ -4,15 +4,21 @@ inputs:
     actions-id-token-request-url:
         required: true
         description: "ACTIONS_ID_TOKEN_REQUEST_URL, issued by GitHub when permission 'id-token' is set to 'write'"
-    load:
+    save:
         required: false
         default: 'false'
-        description: Whether to load the image into local Docker after building it
+        description: Whether to save the image in the Depot ephemeral registry after building it
 
 outputs:
     tag:
         description: The tag of the image that was built
         value: ${{ steps.emit.outputs.tag }}
+    build-id:
+        description: The ID of the build
+        value: ${{ steps.build.outputs.build-id }}
+    unit-build-id:
+        description: The ID of the unit build
+        value: ${{ steps.build-unit.outputs.build-id }}
 
 runs:
     using: 'composite'
@@ -30,10 +36,10 @@ runs:
           uses: depot/build-push-action@v1
           with:
               buildx-fallback: false # buildx is so slow it's better to just fail
-              load: ${{ inputs.load }}
               tags: ${{ steps.emit.outputs.tag }}
               platforms: linux/amd64,linux/arm64
               build-args: COMMIT_HASH=${{ github.sha }}
+              save: ${{ inputs.save }}
           env:
               ACTIONS_ID_TOKEN_REQUEST_URL: ${{ inputs.actions-id-token-request-url }}
 
@@ -42,10 +48,10 @@ runs:
           uses: depot/build-push-action@v1
           with:
               buildx-fallback: false # buildx is so slow it's better to just fail
-              load: ${{ inputs.load }}
               file: production-unit.Dockerfile
               tags: ${{ steps.emit.outputs.tag }}
               platforms: linux/amd64
               build-args: COMMIT_HASH=${{ github.sha }}
+              save: ${{ inputs.save }}
           env:
               ACTIONS_ID_TOKEN_REQUEST_URL: ${{ inputs.actions-id-token-request-url }}

.github/workflows/ci-e2e.yml

@@ -76,15 +76,21 @@ jobs:
         permissions:
             contents: read
             id-token: write # allow issuing OIDC tokens for this workflow run
+        outputs:
+            tag: ${{ steps.build.outputs.tag }}
+            build-id: ${{ steps.build.outputs.build-id }}
+            unit-build-id: ${{ steps.build.outputs.unit-build-id }}
         steps:
             - name: Checkout
               if: needs.changes.outputs.shouldTriggerCypress == 'true'
               uses: actions/checkout@v3
-            - name: Get Docker image cached in Depot
+            - name: Build the Docker image with Depot
               if: needs.changes.outputs.shouldTriggerCypress == 'true'
               # Build the container image in preparation for the E2E tests
               uses: ./.github/actions/build-n-cache-image
+              id: build
               with:
+                  save: true
                   actions-id-token-request-url: ${{ env.ACTIONS_ID_TOKEN_REQUEST_URL }}
 
     cypress:
@@ -157,17 +163,20 @@ jobs:
               if: needs.changes.outputs.shouldTriggerCypress == 'true'
               run: ./bin/check_kafka_clickhouse_up
 
+            - name: Install Depot CLI
+              if: needs.changes.outputs.shouldTriggerCypress == 'true'
+              uses: depot/setup-action@v1
+
             - name: Get Docker image cached in Depot
               if: needs.changes.outputs.shouldTriggerCypress == 'true'
-              # We don't actually build the image here, because we use Depot, which acts as our cross-workflow cache.
-              # The build is first initiated in container-images-ci.yml, so by the time this runs, some layers already
-              # are cached, and the in-flight builds overall are deduplicated. According to Depot folks, this applies
-              # even if the builds _start_ concurrently! In short, only one build per commit push is ever executed.
-              uses: ./.github/actions/build-n-cache-image
-              id: docker-build
+              uses: depot/pull-action@v1
               with:
-                  actions-id-token-request-url: ${{ env.ACTIONS_ID_TOKEN_REQUEST_URL }}
-                  load: true
+                  # Use the production.Dockerfile image:
+                  # build-id: ${{ needs.container.outputs.build-id }}
+                  # Use the production-unit.Dockerfile image:
+                  build-id: ${{ needs.container.outputs.unit-build-id }}
+                  tags: |
+                      ${{ needs.container.outputs.tag }}
 
             - name: Write .env # This step intentionally has no if, so that GH always considers the action as having run
               run: |
@@ -199,8 +208,8 @@ jobs:
               run: |
                   mkdir -p /tmp/logs
 
-                  echo "Starting PostHog using the container image ${{ steps.docker-build.outputs.tag }}"
-                  DOCKER_RUN="docker run --rm --network host --add-host kafka:127.0.0.1 --env-file .env ${{ steps.docker-build.outputs.tag }}"
+                  echo "Starting PostHog using the container image ${{ needs.container.outputs.tag }}"
+                  DOCKER_RUN="docker run --rm --network host --add-host kafka:127.0.0.1 --env-file .env ${{ needs.container.outputs.tag }}"
 
                   $DOCKER_RUN ./bin/migrate
                   $DOCKER_RUN python manage.py setup_dev

.storybook/decorators/withFeatureFlags.tsx

@@ -1,5 +1,5 @@
-import { useFeatureFlags } from '~/mocks/browser'
-import type { DecoratorFn } from '@storybook/react'
+import { setFeatureFlags } from '~/mocks/browser'
+import type { Decorator } from '@storybook/react'
 
 /** Global story decorator that allows setting feature flags.
  *
@@ -13,9 +13,9 @@ import type { DecoratorFn } from '@storybook/react'
  * } as ComponentMeta<typeof MyComponent>
  * ```
  */
-export const withFeatureFlags: DecoratorFn = (Story, { parameters }) => {
+export const withFeatureFlags: Decorator = (Story, { parameters }) => {
     if (parameters.featureFlags) {
-        useFeatureFlags(parameters.featureFlags)
+        setFeatureFlags(parameters.featureFlags)
     }
 
     return <Story />

.storybook/decorators/withKea/withKea.tsx

@@ -1,9 +1,9 @@
-import type { DecoratorFn } from '@storybook/react'
+import type { Decorator } from '@storybook/react'
 import { useAvailableFeatures } from '~/mocks/features'
 
 import { KeaStory } from './kea-story'
 
-export const withKea: DecoratorFn = (Story) => {
+export const withKea: Decorator = (Story) => {
     // Reset enabled enterprise features. Overwrite this line within your stories.
     useAvailableFeatures([])
     return (

.storybook/decorators/withMockDate.tsx

@@ -1,4 +1,4 @@
-import type { DecoratorFn } from '@storybook/react'
+import type { Decorator } from '@storybook/react'
 import MockDate from 'mockdate'
 
 /** Global story decorator that allows mocking of dates.
@@ -13,7 +13,7 @@ import MockDate from 'mockdate'
  * } as ComponentMeta<typeof MyComponent>
  * ```
  */
-export const withMockDate: DecoratorFn = (Story, { parameters }) => {
+export const withMockDate: Decorator = (Story, { parameters }) => {
     if (parameters.mockDate) {
         MockDate.set(parameters.mockDate)
     } else {

.storybook/decorators/withSnapshotsDisabled.tsx

@@ -1,9 +1,9 @@
-import { DecoratorFn } from '@storybook/react'
+import { Decorator } from '@storybook/react'
 import { inStorybookTestRunner } from 'lib/utils'
 
 /** Workaround for https://github.com/storybookjs/test-runner/issues/74 */
 // TODO: Smoke-test all the stories by removing this decorator, once all the stories pass
-export const withSnapshotsDisabled: DecoratorFn = (Story, { parameters }) => {
+export const withSnapshotsDisabled: Decorator = (Story, { parameters }) => {
     if (parameters?.testOptions?.skip && inStorybookTestRunner()) {
         return <>Disabled for Test Runner</>
     }

.storybook/decorators/withTheme.tsx

@@ -0,0 +1,44 @@
+import type { Decorator } from '@storybook/react'
+
+import { FEATURE_FLAGS } from 'lib/constants'
+
+/** Global story decorator that is used by the theming control to
+ * switch between themes.
+ */
+export const withTheme: Decorator = (Story, context) => {
+    const theme = context.globals.theme
+
+    // set the body class
+    const actualClassState = document.body.classList.contains('posthog-3000')
+    const desiredClassState = theme !== 'legacy'
+
+    if (actualClassState !== desiredClassState) {
+        if (desiredClassState) {
+            document.body.classList.add('posthog-3000')
+        } else {
+            document.body.classList.remove('posthog-3000')
+        }
+    }
+
+    // set the feature flag
+    const actualFeatureFlagState = window.POSTHOG_APP_CONTEXT!.persisted_feature_flags?.includes(
+        FEATURE_FLAGS.POSTHOG_3000
+    )
+    const desiredFeatureFlagState = theme !== 'legacy'
+
+    if (actualFeatureFlagState !== desiredFeatureFlagState) {
+        const currentFlags = window.POSTHOG_APP_CONTEXT!.persisted_feature_flags || []
+        if (desiredFeatureFlagState) {
+            window.POSTHOG_APP_CONTEXT!.persisted_feature_flags = [...currentFlags, FEATURE_FLAGS.POSTHOG_3000]
+        } else {
+            window.POSTHOG_APP_CONTEXT!.persisted_feature_flags = currentFlags.filter(
+                (f) => f !== FEATURE_FLAGS.POSTHOG_3000
+            )
+        }
+    }
+
+    // set the theme
+    document.body.setAttribute('theme', theme === 'dark' ? 'dark' : 'light')
+
+    return <Story />
+}

.storybook/preview.tsx

@@ -10,6 +10,7 @@ import { withMockDate } from './decorators/withMockDate'
 import { defaultMocks } from '~/mocks/handlers'
 import { withSnapshotsDisabled } from './decorators/withSnapshotsDisabled'
 import { withFeatureFlags } from './decorators/withFeatureFlags'
+import { withTheme } from './decorators/withTheme'
 
 const setupMsw = () => {
     // Make sure the msw worker is started
@@ -86,6 +87,8 @@ export const decorators: Meta['decorators'] = [
     withMockDate,
     // Allow us to easily set feature flags in stories.
     withFeatureFlags,
+    // Set theme from global context
+    withTheme,
 ]
 
 const preview: Preview = {
@@ -110,6 +113,22 @@ const preview: Preview = {
             ),
         },
     },
+    globalTypes: {
+        theme: {
+            description: '',
+            defaultValue: 'legacy',
+            toolbar: {
+                title: 'Theme',
+                items: [
+                    { value: 'legacy', icon: 'faceneutral', title: 'Legacy' },
+                    { value: 'light', icon: 'sun', title: 'Light' },
+                    { value: 'dark', icon: 'moon', title: 'Dark' },
+                ],
+                // change the title based on the selected value
+                dynamicTitle: true,
+            },
+        },
+    },
 }
 
 export default preview

docker-compose.base.yml

@@ -89,6 +89,18 @@ services:
         command: ./bin/start-backend & ./bin/start-frontend
         restart: on-failure
 
+    capture:
+        image: ghcr.io/posthog/capture:main
+        restart: on-failure
+        environment:
+            ADDRESS: '0.0.0.0:3000'
+            KAFKA_TOPIC: 'events_plugin_ingestion'
+            KAFKA_HOSTS: 'kafka:9092'
+            REDIS_URL: 'redis://redis:6379/'
+        depends_on:
+            - redis
+            - kafka
+
     plugins:
         command: ./bin/plugin-server --no-restart-loop
         restart: on-failure

docker-compose.dev-full.yml

@@ -89,6 +89,15 @@ services:
         environment:
             - DEBUG=1
 
+    capture:
+        extends:
+            file: docker-compose.base.yml
+            service: capture
+        ports:
+            - 3000:3000
+        environment:
+            - DEBUG=1
+
     plugins:
         extends:
             file: docker-compose.base.yml

docker-compose.dev.yml

@@ -72,6 +72,17 @@ services:
             - '1080:1080'
             - '1025:1025'
 
+    # Optional capture
+    capture:
+        profiles: ['capture-rs']
+        extends:
+            file: docker-compose.base.yml
+            service: capture
+        ports:
+            - 3000:3000
+        environment:
+            - DEBUG=1
+
     # Temporal containers
     elasticsearch:
         extends: