chore: remove antd (PostHog#24256)

M3GA-MAK3R · Aug 14, 2024 · 362d05f · 362d05f
1 parent 804ace5
commit 362d05f
Show file tree

Hide file tree

Showing 41 changed files with 74 additions and 897 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -118,22 +118,6 @@ module.exports = {
                         name: '@ant-design/icons',
                         message: 'Please use icons from the @posthog/icons package instead',
                     },
-                    {
-                        name: 'antd',
-                        importNames: [
-                            'Card',
-                            'Col',
-                            'Row',
-                            'Alert',
-                            'Tooltip',
-                            'Progress',
-                            'Radio',
-                            'Divider',
-                            'Popconfirm',
-                            'Table',
-                        ],
-                        message: 'please use the Lemon equivalent instead',
-                    },
                 ],
             },
         ],

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,5 +1,4 @@
 import '~/styles'
-import './storybook.scss'
 import type { Meta, Parameters, Preview } from '@storybook/react'
 import { Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/blocks'
 import { worker } from '~/mocks/browser'

diff --git a/.storybook/storybook.scss b/.storybook/storybook.scss
diff --git a/.storybook/test-runner.ts b/.storybook/test-runner.ts
@@ -54,7 +54,6 @@ declare module '@storybook/types' {
 
 const RETRY_TIMES = 2
 const LOADER_SELECTORS = [
-    '.ant-skeleton',
     '.Spinner',
     '.LemonSkeleton',
     '.LemonTableLoader',

diff --git a/frontend/@posthog/apps-common/package.json b/frontend/@posthog/apps-common/package.json
@@ -17,7 +17,6 @@
     },
     "peerDependencies": {
         "@posthog/lemon-ui": "*",
-        "antd": "*",
         "kea": "*",
         "kea-router": "*",
         "react": "*",

diff --git a/frontend/@posthog/lemon-ui/package.json b/frontend/@posthog/lemon-ui/package.json
@@ -17,7 +17,6 @@
         "typescript": ">=4.0.0"
     },
     "peerDependencies": {
-        "antd": "*",
         "kea": "*",
         "kea-router": "*",
         "react": "*",

diff --git a/frontend/src/layout/navigation-3000/components/KeyboardShortcut.scss b/frontend/src/layout/navigation-3000/components/KeyboardShortcut.scss
@@ -20,12 +20,6 @@
         background: none;
     }
 
-    .ant-tooltip & {
-        color: #fff;
-        background: rgba(#000, 0.333);
-        border-color: rgba(#fff, 0.333);
-    }
-
     & + .KeyboardShortcut__key {
         margin-left: 0.25rem;
     }

diff --git a/frontend/src/lib/components/FullScreen.tsx b/frontend/src/lib/components/FullScreen.tsx
@@ -1,7 +1,7 @@
 import { useEffect } from 'react'
 
 export function FullScreen({ onExit }: { onExit?: () => any }): null {
-    const selector = 'aside.ant-layout-sider, .layout-top-content'
+    const selector = '.layout-top-content'
     useEffect(() => {
         const myClasses = window.document.querySelectorAll<HTMLElement>(selector)
 

diff --git a/frontend/src/lib/components/InsightLabel/InsightLabel.scss b/frontend/src/lib/components/InsightLabel/InsightLabel.scss
@@ -8,13 +8,6 @@
         font-weight: bold;
     }
 
-    .ant-tag {
-        margin-right: 0;
-        color: var(--primary-alt);
-        background-color: var(--border-light);
-        border: 0;
-    }
-
     .graph-series-glyph {
         padding: 0 6px;
         margin-right: 4px;

diff --git a/frontend/src/lib/components/IntervalFilter/IntervalFilter.tsx b/frontend/src/lib/components/IntervalFilter/IntervalFilter.tsx
@@ -18,7 +18,7 @@ export function IntervalFilter({ disabled }: IntervalFilterProps): JSX.Element {
     return (
         <>
             <span>
-                <span className="hide-lte-md">grouped </span>by
+                <span className="hidden md:inline">grouped </span>by
             </span>
             <IntervalFilterStandalone
                 disabled={disabled}

diff --git a/frontend/src/lib/components/TaxonomicFilter/InfiniteList.scss b/frontend/src/lib/components/TaxonomicFilter/InfiniteList.scss
@@ -74,13 +74,6 @@
             font-weight: bold;
         }
 
-        &.skeleton-row {
-            // center-align this antd skeleton
-            .ant-skeleton-paragraph {
-                margin-bottom: 0;
-            }
-        }
-
         &.expand-row {
             color: var(--primary-3000);
         }

diff --git a/frontend/src/lib/components/TaxonomicFilter/InfiniteList.tsx b/frontend/src/lib/components/TaxonomicFilter/InfiniteList.tsx
@@ -255,7 +255,7 @@ export function InfiniteList({ popupAnchorElement }: InfiniteListProps): JSX.Ele
         ) : (
             <div
                 {...commonDivProps}
-                className={`${commonDivProps.className} skeleton-row`}
+                className={commonDivProps.className}
                 data-attr={`prop-skeleton-${listGroupType}-${rowIndex}`}
             >
                 <LemonSkeleton />

diff --git a/frontend/src/lib/hooks/useOutsideClickHandler.ts b/frontend/src/lib/hooks/useOutsideClickHandler.ts
@@ -3,7 +3,7 @@ import { useEffect } from 'react'
 
 export const CLICK_OUTSIDE_BLOCK_CLASS = 'click-outside-block'
 
-const exceptions = ['.ant-select-dropdown *', `.${CLICK_OUTSIDE_BLOCK_CLASS}`, `.${CLICK_OUTSIDE_BLOCK_CLASS} *`]
+const exceptions = [`.${CLICK_OUTSIDE_BLOCK_CLASS}`, `.${CLICK_OUTSIDE_BLOCK_CLASS} *`]
 
 export function useOutsideClickHandler(
     refs: React.MutableRefObject<HTMLElement | ReferenceType | null>[],

diff --git a/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss
@@ -335,21 +335,6 @@
         }
     }
 
-    .ant-tooltip & {
-        // Buttons have an overriden style in tooltips, as they are always dark
-        &:hover {
-            background: rgb(255 255 255 / 15%) !important;
-        }
-
-        &:active {
-            background: rgb(255 255 255 / 20%) !important;
-        }
-
-        .LemonButton__icon {
-            color: #fff !important;
-        }
-    }
-
     @include shared-variables;
     @include size-variables;
 }

diff --git a/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.scss b/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.scss
@@ -6,7 +6,7 @@
     line-height: 1.5rem;
 
     .LemonCheckbox__input {
-        width: 0 !important; // Some ant-form styles override this so we mark as important
+        width: 0 !important;
         height: 0 !important;
         appearance: none !important;
     }

diff --git a/frontend/src/lib/lemon-ui/Popover/Popover.tsx b/frontend/src/lib/lemon-ui/Popover/Popover.tsx
@@ -47,9 +47,7 @@ export interface PopoverProps {
     /** Whether default box padding should be applies. @default true */
     padded?: boolean
     middleware?: Middleware[]
-    /** Any other refs that needs to be taken into account for handling outside clicks e.g. other nested popovers.
-     * Works also with strings, matching classnames or ids, for antd legacy components that don't support refs
-     * **/
+    /** Any other refs that needs to be taken into account for handling outside clicks e.g. other nested popovers. */
     additionalRefs?: React.MutableRefObject<HTMLDivElement | null>[]
     referenceRef?: UseFloatingReturn['refs']['reference']
     floatingRef?: UseFloatingReturn['refs']['floating']

diff --git a/frontend/src/scenes/cohorts/Cohort.tsx b/frontend/src/scenes/cohorts/Cohort.tsx
@@ -1,5 +1,3 @@
-import 'antd/lib/dropdown/style/index.css'
-
 import { CohortEdit } from 'scenes/cohorts/CohortEdit'
 import { SceneExport } from 'scenes/sceneTypes'
 

diff --git a/frontend/src/scenes/cohorts/CohortEdit.tsx b/frontend/src/scenes/cohorts/CohortEdit.tsx
@@ -219,18 +219,14 @@ export function CohortEdit({ id }: CohortLogicProps): JSX.Element {
                                                         <IconUploadFile
                                                             style={{ fontSize: '3rem', color: 'var(--muted-alt)' }}
                                                         />
-                                                        <div className="ant-upload-text">
-                                                            {cohort.csv?.name ?? 'File chosen'}
-                                                        </div>
+                                                        <div>{cohort.csv?.name ?? 'File chosen'}</div>
                                                     </>
                                                 ) : (
                                                     <>
                                                         <IconUploadFile
                                                             style={{ fontSize: '3rem', color: 'var(--muted-alt)' }}
                                                         />
-                                                        <div className="ant-upload-text">
-                                                            Drag a file here or click to browse for a file
-                                                        </div>
+                                                        <div>Drag a file here or click to browse for a file</div>
                                                     </>
                                                 )}
                                             </div>

diff --git a/frontend/src/scenes/cohorts/Cohorts.scss b/frontend/src/scenes/cohorts/Cohorts.scss
@@ -1,17 +1,8 @@
-.cohorts-drawer .ant-drawer-content-wrapper {
-    width: 100% !important;
-    max-width: 850px !important;
-}
-
 .cohort-recalculating {
     padding: 0.5rem 1rem;
     margin-top: 1rem;
     background-color: var(--bg-3000);
     border-radius: var(--radius);
-
-    .ant-spin-spinning {
-        margin-right: 0.375rem;
-    }
 }
 
 .cohort-csv-dragger {

diff --git a/frontend/src/scenes/dashboard/DashboardItems.scss b/frontend/src/scenes/dashboard/DashboardItems.scss
@@ -84,8 +84,3 @@
         cursor: ns-resize;
     }
 }
-
-// All dropdowns must be below top navigation
-.ant-dropdown {
-    z-index: 700;
-}
diff --git a/frontend/src/scenes/dashboard/DashboardItems.tsx b/frontend/src/scenes/dashboard/DashboardItems.tsx
@@ -99,7 +99,7 @@ export function DashboardItems(): JSX.Element {
                             isDragging.current = false
                         }, 250)
                     }}
-                    draggableCancel=".anticon,.ant-dropdown,table,button,.Popover"
+                    draggableCancel=".anticon,table,button,.Popover"
                 >
                     {tiles?.map((tile: DashboardTile) => {
                         const { insight: legacyInsight, text } = tile

diff --git a/frontend/src/scenes/experiments/Experiment.scss b/frontend/src/scenes/experiments/Experiment.scss
@@ -22,10 +22,6 @@
         padding-bottom: 1rem;
         margin-top: 0.5rem;
 
-        .ant-form-horizontal {
-            min-height: 32px;
-        }
-
         .border-top {
             border-top-left-radius: 4px;
             border-top-right-radius: 4px;
@@ -75,14 +71,6 @@
         margin-bottom: 1rem;
         border-top: 1px solid var(--border);
     }
-
-    .ant-input-number-disabled {
-        color: black;
-    }
-
-    .ant-input[disabled] {
-        color: black;
-    }
 }
 
 .view-experiment {
@@ -97,12 +85,6 @@
 
     .participants {
         background-color: white;
-
-        .ant-collapse-header {
-            padding-top: 0.5rem;
-            padding-bottom: 0.5rem;
-            padding-left: 0.75rem;
-        }
     }
 
     .variants-list {
@@ -123,11 +105,6 @@
         padding-top: 1rem;
     }
 
-    .ant-collapse-content-box {
-        display: flex;
-        flex-flow: column;
-    }
-
     .secondary-progress {
         margin-top: 0.5rem;
 

diff --git a/frontend/src/scenes/feature-flags/FeatureFlag.scss b/frontend/src/scenes/feature-flags/FeatureFlag.scss
@@ -5,19 +5,8 @@
     border: 1px solid var(--border);
     border-radius: var(--radius);
 
-    .ant-form-item {
-        min-height: 32px;
-    }
-
     .label-row {
         font-weight: bold;
-
-        .ant-col {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            min-height: 32px;
-        }
     }
 
     .VariantFormList__row {

diff --git a/frontend/src/scenes/feature-flags/FeatureFlagProjects.tsx b/frontend/src/scenes/feature-flags/FeatureFlagProjects.tsx
@@ -140,7 +140,7 @@ function FeatureFlagCopySection(): JSX.Element {
     return hasMultipleProjects && featureFlag.can_edit ? (
         <>
             <h3 className="l3">Feature flag copy</h3>
-            <div className="ant-row">Copy your flag and its configuration to another project.</div>
+            <div>Copy your flag and its configuration to another project.</div>
             {hasStaticCohort && (
                 <LemonBanner type="info" className="mt-4">
                     The flag you are about to copy references a static cohort. If the cohort with identical name does

diff --git a/frontend/src/scenes/funnels/Funnel.scss b/frontend/src/scenes/funnels/Funnel.scss
@@ -2,9 +2,5 @@
     .funnel-bins-custom-picker {
         width: 43px; // enough to hold two characters
         margin: 5px 0 5px 13px; // margin left comes from 24px (padding left select option) - 11px (padding inside input)
-
-        .ant-input-number-handler-wrap {
-            display: none;
-        }
     }
 }
diff --git a/frontend/src/scenes/funnels/FunnelBarVertical/FunnelBarVertical.scss b/frontend/src/scenes/funnels/FunnelBarVertical/FunnelBarVertical.scss
@@ -171,11 +171,6 @@
 
 .StepLegend {
     height: 100%;
-
-    // overwrite antd-styles for legends without persons modal
-    // e.g. in exported insights
-    font-feature-settings: normal;
-    font-variant-numeric: normal;
     white-space: nowrap;
     border-left: 1px solid var(--border);
 

diff --git a/frontend/src/scenes/insights/EmptyStates/EmptyStates.scss b/frontend/src/scenes/insights/EmptyStates/EmptyStates.scss
@@ -8,10 +8,6 @@
     font-size: 1.1em;
     color: var(--muted);
 
-    .ant-empty {
-        margin: 1rem 0;
-    }
-
     &.error {
         h2 {
             color: var(--danger);
@@ -31,10 +27,6 @@
         color: var(--primary-alt);
     }
 
-    button.ant-btn-lg {
-        height: 42px;
-    }
-
     .empty-state-inner {
         display: flex;
         flex-direction: column;

diff --git a/frontend/src/scenes/instance/SystemStatus/KafkaInspectorTab.tsx b/frontend/src/scenes/instance/SystemStatus/KafkaInspectorTab.tsx
@@ -16,12 +16,7 @@ export function KafkaInspectorTab(): JSX.Element {
             <LemonDivider className="my-4" />
             <section>
                 <div className="flex mb-3">
-                    <Form
-                        logic={kafkaInspectorLogic}
-                        formKey="fetchKafkaMessage"
-                        className="ant-form-horizontal ant-form-hide-required-mark"
-                        enableFormOnSubmit
-                    >
+                    <Form logic={kafkaInspectorLogic} formKey="fetchKafkaMessage" enableFormOnSubmit>
                         <div className="grid grid-cols-12 gap-4">
                             <div className="col-span-4">
                                 <Field name="topic">