chore: remove more antd (#20830)

frontend/src/lib/components/SocialLoginButton/SocialLoginButton.tsx

@@ -51,7 +51,7 @@ export function SocialLoginButton({ provider, redirectQueryParams }: SocialLogin
 
     return (
         <SocialLoginLink provider={provider} extraQueryParams={redirectQueryParams}>
-            <LemonButton size="medium" icon={SocialLoginIcon(provider)}>
+            <LemonButton size="medium" icon={<SocialLoginIcon provider={provider} />}>
                 <span className="text-default">{SSO_PROVIDER_NAMES[provider]}</span>
             </LemonButton>
         </SocialLoginLink>
@@ -124,7 +124,7 @@ export function SSOEnforcedLoginButton({ provider, email }: SSOEnforcedLoginButt
                 type="secondary"
                 fullWidth
                 center
-                icon={SocialLoginIcon(provider)}
+                icon={<SocialLoginIcon provider={provider} />}
                 size="large"
             >
                 Log in with {SSO_PROVIDER_NAMES[provider]}

frontend/src/lib/components/SocialLoginButton/SocialLoginIcon.tsx

@@ -3,14 +3,22 @@ import { IconGitlab, IconGoogle, IconKey } from 'lib/lemon-ui/icons'
 
 import { SSOProvider } from '~/types'
 
-export const SocialLoginIcon = (provider: SSOProvider): JSX.Element | undefined => {
+export const SocialLoginIcon = ({
+    provider,
+    ...props
+}: {
+    provider: SSOProvider
+    className?: string
+}): JSX.Element | null => {
     if (provider === 'google-oauth2') {
-        return <IconGoogle />
+        return <IconGoogle {...props} />
     } else if (provider === 'github') {
-        return <IconGithub />
+        return <IconGithub {...props} />
     } else if (provider === 'gitlab') {
-        return <IconGitlab />
+        return <IconGitlab {...props} />
     } else if (provider === 'saml') {
-        return <IconKey />
+        return <IconKey {...props} />
+    } else {
+        return null
     }
 }

frontend/src/scenes/insights/views/Funnels/FunnelBinsPicker.tsx

@@ -1,10 +1,8 @@
 import { IconGraph } from '@posthog/icons'
-import { LemonInput } from '@posthog/lemon-ui'
-import { Select } from 'antd'
-import clsx from 'clsx'
+import { LemonButton, LemonDropdown, LemonInput } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { BIN_COUNT_AUTO } from 'lib/constants'
-import { ANTD_TOOLTIP_PLACEMENTS } from 'lib/utils'
+import { useState } from 'react'
 import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic'
 import { insightLogic } from 'scenes/insights/insightLogic'
 
@@ -18,11 +16,11 @@ const NUMBER_PRESETS = new Set([5, 15, 25, 50, 90])
 interface BinOption {
     key?: string
     label: string
-    value: BinCountValue | 'custom'
+    value: BinCountValue
     display: boolean
 }
 
-const options: BinOption[] = [
+const BIN_OPTIONS: BinOption[] = [
     {
         label: 'Auto bins',
         value: BIN_COUNT_AUTO,
@@ -33,83 +31,77 @@ const options: BinOption[] = [
         value: v,
         display: NUMBER_PRESETS.has(v),
     })),
-    {
-        label: 'Custom',
-        value: 'custom',
-        display: true,
-    },
 ]
 
-type FunnelBinsPickerProps = { disabled?: boolean }
-
-export function FunnelBinsPicker({ disabled }: FunnelBinsPickerProps): JSX.Element {
+export function FunnelBinsPicker(): JSX.Element {
     const { insightProps } = useValues(insightLogic)
     const { funnelsFilter, numericBinCount } = useValues(funnelDataLogic(insightProps))
     const { updateInsightFilter } = useActions(funnelDataLogic(insightProps))
+    const [visible, setVisible] = useState<boolean>(false)
 
     const setBinCount = (binCount: BinCountValue): void => {
         updateInsightFilter({ binCount: binCount && binCount !== BIN_COUNT_AUTO ? binCount : undefined })
     }
 
-    return (
-        <Select
-            id="funnel-bin-filter"
-            dropdownClassName="funnel-bin-filter-dropdown"
-            data-attr="funnel-bin-filter"
-            defaultValue={BIN_COUNT_AUTO}
-            value={funnelsFilter?.binCount || BIN_COUNT_AUTO}
-            onSelect={(count) => setBinCount(count)}
-            dropdownRender={(menu) => {
-                return (
-                    <>
-                        {menu}
-                        <div>
-                            <LemonInput
-                                type="number"
-                                className="funnel-bins-custom-picker"
-                                min={MIN}
-                                max={MAX}
-                                value={numericBinCount}
-                                onChange={(count) => {
-                                    const parsedCount = typeof count === 'string' ? parseInt(count) : count
-                                    if (parsedCount) {
-                                        setBinCount(parsedCount)
-                                    }
-                                }}
-                            />{' '}
-                            bins
-                        </div>
-                    </>
-                )
-            }}
-            listHeight={440}
-            bordered={false}
-            dropdownMatchSelectWidth={false}
-            dropdownAlign={ANTD_TOOLTIP_PLACEMENTS.bottomRight}
-            optionLabelProp="label"
-            disabled={disabled}
-        >
-            <Select.OptGroup label="Bin Count">
-                {options.map((option) => {
-                    if (option.value === 'custom') {
-                        return null
+    const preferredOptions = BIN_OPTIONS.filter((o) => o.display).map((bin) => {
+        return {
+            value: bin.value as BinCountValue,
+            label: bin.label,
+            icon: <IconGraph />,
+        }
+    })
+
+    const selectedValue = funnelsFilter?.binCount || BIN_COUNT_AUTO
+    const selectedOption = BIN_OPTIONS.find((o) => o.value === selectedValue)
+
+    const overlay = (
+        <div className="space-y-px" onClick={(e) => e.stopPropagation()}>
+            {preferredOptions.map((bin) => (
+                <LemonButton
+                    fullWidth
+                    key={bin.value}
+                    active={bin.value === selectedValue}
+                    onClick={() => {
+                        setVisible(false)
+                        setBinCount(bin.value)
+                    }}
+                >
+                    {bin.label}
+                </LemonButton>
+            ))}
+            <LemonInput
+                type="number"
+                className="funnel-bins-custom-picker"
+                min={MIN}
+                max={MAX}
+                value={numericBinCount}
+                onChange={(count) => {
+                    const parsedCount = typeof count === 'string' ? parseInt(count) : count
+                    if (parsedCount) {
+                        setBinCount(parsedCount)
                     }
-                    return (
-                        <Select.Option
-                            className={clsx({ hidden: !option.display })}
-                            key={option.value}
-                            value={option.value}
-                            label={
-                                <>
-                                    <IconGraph /> {option.label}
-                                </>
-                            }
-                        >
-                            {option.label}
-                        </Select.Option>
-                    )
-                })}
-            </Select.OptGroup>
-        </Select>
+                }}
+                suffix={<>bins</>}
+            />
+        </div>
+    )
+
+    return (
+        <>
+            <LemonDropdown
+                data-attr="funnel-bin-filter"
+                sameWidth
+                visible={visible}
+                closeOnClickInside={false}
+                onClickOutside={() => setVisible(false)}
+                overlay={overlay}
+                className="w-32"
+                placement="bottom-end"
+            >
+                <LemonButton size="small" type="secondary" icon={<IconGraph />} onClick={() => setVisible(true)}>
+                    {selectedOption?.label}
+                </LemonButton>
+            </LemonDropdown>
+        </>
     )
 }

frontend/src/scenes/plugins/source/PluginSource.tsx

@@ -1,8 +1,7 @@
 import './PluginSource.scss'
 
 import { useMonaco } from '@monaco-editor/react'
-import { Link } from '@posthog/lemon-ui'
-import { Skeleton } from 'antd'
+import { LemonSkeleton, Link } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { Form } from 'kea-forms'
 import { CodeEditor } from 'lib/components/CodeEditors'
@@ -81,7 +80,7 @@ export function PluginSource({
             title={pluginSourceLoading ? 'Loading...' : `Edit App: ${name}`}
             placement={placement ?? 'left'}
             footer={
-                <div className="text-right space-x-2">
+                <div className="flex text-right space-x-2">
                     <LemonButton onClick={closePluginSource}>Close</LemonButton>
                     <LemonButton type="primary" loading={isPluginSourceSubmitting} onClick={submitPluginSource}>
                         Save
@@ -107,8 +106,12 @@ export function PluginSource({
                         </p>
 
                         {pluginSourceLoading ? (
-                            // eslint-disable-next-line react/forbid-elements
-                            <Skeleton />
+                            <>
+                                <LemonSkeleton className="h-5 w-1/3 mb-3" />
+                                <LemonSkeleton className="h-4 w-full mb-3" />
+                                <LemonSkeleton className="h-4 w-full mb-3" />
+                                <LemonSkeleton className="h-4 w-1/2" />
+                            </>
                         ) : (
                             <>
                                 <PluginSourceTabs logic={logic} />

frontend/src/scenes/settings/organization/VerifiedDomains/SSOSelect.tsx

@@ -1,4 +1,4 @@
-import { Select } from 'antd'
+import { LemonSelect, LemonSelectOptions } from '@posthog/lemon-ui'
 import { useValues } from 'kea'
 import { SocialLoginIcon } from 'lib/components/SocialLoginButton/SocialLoginIcon'
 import { SSO_PROVIDER_NAMES } from 'lib/constants'
@@ -20,29 +20,35 @@ export function SSOSelect({ value, loading, onChange, samlAvailable }: SSOSelect
         return null
     }
 
+    const authProviders = Object.keys(preflight.available_social_auth_providers) as SSOProvider[]
+    const options: LemonSelectOptions<SSOProvider | ''> = [{ value: '', label: "Don't enforce" }]
+
+    authProviders.forEach((key) => {
+        options.push({
+            value: key,
+            label: SSO_PROVIDER_NAMES[key],
+            disabledReason: preflight.available_social_auth_providers[key]
+                ? undefined
+                : 'This provider is not configured.',
+            icon: <SocialLoginIcon provider={key} className="w-4 h-4" />,
+        })
+    })
+
+    options.push({
+        value: 'saml',
+        label: SSO_PROVIDER_NAMES['saml'],
+        disabledReason: !samlAvailable ? 'This provider is not configured.' : undefined,
+        icon: <SocialLoginIcon provider="saml" className="w-4 h-4" />,
+    })
+
     return (
-        <Select style={{ width: '100%' }} value={value} loading={loading} disabled={loading} onChange={onChange}>
-            <Select.Option value="">Don't enforce</Select.Option>
-            {Object.keys(preflight.available_social_auth_providers).map((key) => (
-                <Select.Option
-                    value={key}
-                    key={key}
-                    disabled={!preflight.available_social_auth_providers[key]}
-                    title={
-                        preflight.available_social_auth_providers[key] ? undefined : 'This provider is not configured.'
-                    }
-                >
-                    {SocialLoginIcon(key as SSOProvider)} {SSO_PROVIDER_NAMES[key]}
-                </Select.Option>
-            ))}
-            <Select.Option
-                value="saml"
-                key="saml"
-                disabled={!samlAvailable}
-                title={samlAvailable ? undefined : 'This provider is not configured.'}
-            >
-                {SocialLoginIcon('saml')} {SSO_PROVIDER_NAMES['saml']}
-            </Select.Option>
-        </Select>
+        <LemonSelect
+            value={value}
+            options={options}
+            loading={loading}
+            disabledReason={loading ? 'Cannot change while loading' : undefined}
+            fullWidth
+            onChange={onChange}
+        />
     )
 }