From d0960c45a94aa9125acfee464070c72a1898a2f3 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Fri, 13 Sep 2024 09:08:40 -0400 Subject: [PATCH] refactor(ui): Break `` component into individual components (#4147) --- .changeset/rotten-turtles-design.md | 2 + packages/ui/src/common/connections.tsx | 10 +- packages/ui/src/common/password-field.tsx | 5 +- packages/ui/src/common/phone-number-field.tsx | 9 +- .../sign-in/steps/choose-session.tsx | 4 +- .../sign-in/steps/choose-strategy.tsx | 20 +- .../sign-in/steps/forgot-password.tsx | 16 +- .../src/components/sign-in/steps/get-help.tsx | 4 +- .../ui/src/components/sign-in/steps/start.tsx | 4 +- .../src/components/sign-in/steps/status.tsx | 47 +- .../sign-in/steps/verifications.tsx | 27 +- .../src/components/sign-up/steps/continue.tsx | 4 +- .../ui/src/components/sign-up/steps/start.tsx | 4 +- .../src/components/sign-up/steps/status.tsx | 47 +- .../sign-up/steps/verifications.tsx | 13 +- packages/ui/src/constants/providers.ts | 43 - packages/ui/src/primitives/alert.tsx | 12 +- packages/ui/src/primitives/field.tsx | 13 +- packages/ui/src/primitives/icon.tsx | 1288 ----------------- packages/ui/src/primitives/icons/apple.tsx | 14 + .../ui/src/primitives/icons/atlassian.tsx | 43 + .../ui/src/primitives/icons/bitbucket.tsx | 46 + packages/ui/src/primitives/icons/box.tsx | 14 + .../icons/caret-right-legacy-sm.tsx | 18 + .../primitives/icons/checkmark-circle-sm.tsx | 26 + .../ui/src/primitives/icons/checkmark-sm.tsx | 17 + .../src/primitives/icons/chevron-down-sm.tsx | 24 + .../src/primitives/icons/coinbase-wallet.tsx | 31 + packages/ui/src/primitives/icons/coinbase.tsx | 25 + packages/ui/src/primitives/icons/discord.tsx | 25 + packages/ui/src/primitives/icons/dropbox.tsx | 14 + packages/ui/src/primitives/icons/enstall.tsx | 36 + .../ui/src/primitives/icons/envelope-sm.tsx | 24 + .../icons/exclamation-octagon-sm.tsx | 31 + .../icons/exclamation-triangle-lg.tsx | 16 + .../icons/exclamation-triangle-sm.tsx | 31 + .../ui/src/primitives/icons/eye-slash-sm.tsx | 31 + packages/ui/src/primitives/icons/eye-sm.tsx | 26 + packages/ui/src/primitives/icons/facebook.tsx | 29 + .../src/primitives/icons/fingerprint-sm.tsx | 17 + packages/ui/src/primitives/icons/github.tsx | 16 + packages/ui/src/primitives/icons/gitlab.tsx | 49 + packages/ui/src/primitives/icons/google.tsx | 26 + packages/ui/src/primitives/icons/hubspot.tsx | 14 + .../ui/src/primitives/icons/huggingface.tsx | 83 ++ packages/ui/src/primitives/icons/icon.tsx | 20 + .../icons/information-circle-sm.tsx | 33 + .../ui/src/primitives/icons/instagram.tsx | 112 ++ packages/ui/src/primitives/icons/line.tsx | 45 + packages/ui/src/primitives/icons/linear.tsx | 54 + packages/ui/src/primitives/icons/link-sm.tsx | 17 + packages/ui/src/primitives/icons/linkedin.tsx | 20 + packages/ui/src/primitives/icons/lock-sm.tsx | 17 + packages/ui/src/primitives/icons/metamask.tsx | 68 + .../ui/src/primitives/icons/microsoft.tsx | 41 + packages/ui/src/primitives/icons/notion.tsx | 33 + packages/ui/src/primitives/icons/pen-sm.tsx | 17 + .../ui/src/primitives/icons/providers.tsx | 64 + .../src/primitives/icons/right-arrow-sm.tsx | 14 + packages/ui/src/primitives/icons/slack.tsx | 53 + packages/ui/src/primitives/icons/sms-sm.tsx | 14 + .../ui/src/primitives/icons/spinner-lg.tsx | 14 + packages/ui/src/primitives/icons/spotify.tsx | 14 + .../src/primitives/icons/switch-arrows-lg.tsx | 16 + .../src/primitives/icons/tick-shield-lg.tsx | 16 + packages/ui/src/primitives/icons/tiktok.tsx | 49 + packages/ui/src/primitives/icons/twitch.tsx | 26 + packages/ui/src/primitives/icons/twitter.tsx | 14 + packages/ui/src/primitives/icons/x.tsx | 25 + packages/ui/src/primitives/icons/xero.tsx | 60 + 70 files changed, 1680 insertions(+), 1474 deletions(-) create mode 100644 .changeset/rotten-turtles-design.md delete mode 100644 packages/ui/src/constants/providers.ts delete mode 100644 packages/ui/src/primitives/icon.tsx create mode 100644 packages/ui/src/primitives/icons/apple.tsx create mode 100644 packages/ui/src/primitives/icons/atlassian.tsx create mode 100644 packages/ui/src/primitives/icons/bitbucket.tsx create mode 100644 packages/ui/src/primitives/icons/box.tsx create mode 100644 packages/ui/src/primitives/icons/caret-right-legacy-sm.tsx create mode 100644 packages/ui/src/primitives/icons/checkmark-circle-sm.tsx create mode 100644 packages/ui/src/primitives/icons/checkmark-sm.tsx create mode 100644 packages/ui/src/primitives/icons/chevron-down-sm.tsx create mode 100644 packages/ui/src/primitives/icons/coinbase-wallet.tsx create mode 100644 packages/ui/src/primitives/icons/coinbase.tsx create mode 100644 packages/ui/src/primitives/icons/discord.tsx create mode 100644 packages/ui/src/primitives/icons/dropbox.tsx create mode 100644 packages/ui/src/primitives/icons/enstall.tsx create mode 100644 packages/ui/src/primitives/icons/envelope-sm.tsx create mode 100644 packages/ui/src/primitives/icons/exclamation-octagon-sm.tsx create mode 100644 packages/ui/src/primitives/icons/exclamation-triangle-lg.tsx create mode 100644 packages/ui/src/primitives/icons/exclamation-triangle-sm.tsx create mode 100644 packages/ui/src/primitives/icons/eye-slash-sm.tsx create mode 100644 packages/ui/src/primitives/icons/eye-sm.tsx create mode 100644 packages/ui/src/primitives/icons/facebook.tsx create mode 100644 packages/ui/src/primitives/icons/fingerprint-sm.tsx create mode 100644 packages/ui/src/primitives/icons/github.tsx create mode 100644 packages/ui/src/primitives/icons/gitlab.tsx create mode 100644 packages/ui/src/primitives/icons/google.tsx create mode 100644 packages/ui/src/primitives/icons/hubspot.tsx create mode 100644 packages/ui/src/primitives/icons/huggingface.tsx create mode 100644 packages/ui/src/primitives/icons/icon.tsx create mode 100644 packages/ui/src/primitives/icons/information-circle-sm.tsx create mode 100644 packages/ui/src/primitives/icons/instagram.tsx create mode 100644 packages/ui/src/primitives/icons/line.tsx create mode 100644 packages/ui/src/primitives/icons/linear.tsx create mode 100644 packages/ui/src/primitives/icons/link-sm.tsx create mode 100644 packages/ui/src/primitives/icons/linkedin.tsx create mode 100644 packages/ui/src/primitives/icons/lock-sm.tsx create mode 100644 packages/ui/src/primitives/icons/metamask.tsx create mode 100644 packages/ui/src/primitives/icons/microsoft.tsx create mode 100644 packages/ui/src/primitives/icons/notion.tsx create mode 100644 packages/ui/src/primitives/icons/pen-sm.tsx create mode 100644 packages/ui/src/primitives/icons/providers.tsx create mode 100644 packages/ui/src/primitives/icons/right-arrow-sm.tsx create mode 100644 packages/ui/src/primitives/icons/slack.tsx create mode 100644 packages/ui/src/primitives/icons/sms-sm.tsx create mode 100644 packages/ui/src/primitives/icons/spinner-lg.tsx create mode 100644 packages/ui/src/primitives/icons/spotify.tsx create mode 100644 packages/ui/src/primitives/icons/switch-arrows-lg.tsx create mode 100644 packages/ui/src/primitives/icons/tick-shield-lg.tsx create mode 100644 packages/ui/src/primitives/icons/tiktok.tsx create mode 100644 packages/ui/src/primitives/icons/twitch.tsx create mode 100644 packages/ui/src/primitives/icons/twitter.tsx create mode 100644 packages/ui/src/primitives/icons/x.tsx create mode 100644 packages/ui/src/primitives/icons/xero.tsx diff --git a/.changeset/rotten-turtles-design.md b/.changeset/rotten-turtles-design.md new file mode 100644 index 00000000000..a845151cc84 --- /dev/null +++ b/.changeset/rotten-turtles-design.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/packages/ui/src/common/connections.tsx b/packages/ui/src/common/connections.tsx index 94dbe96aa35..9928d8d51f2 100644 --- a/packages/ui/src/common/connections.tsx +++ b/packages/ui/src/common/connections.tsx @@ -1,11 +1,10 @@ import * as Common from '@clerk/elements/common'; import * as React from 'react'; -import { PROVIDERS } from '~/constants/providers'; import { useAppearance } from '~/contexts'; import { useEnabledConnections } from '~/hooks/use-enabled-connections'; import { Button } from '~/primitives/button'; -import * as Icon from '~/primitives/icon'; +import { PROVIDERS } from '~/primitives/icons/providers'; /** * Calculates the number of columns given the total number of items and the maximum columns allowed per row. @@ -73,9 +72,6 @@ export function Connections( style={{ '--cl-connection-columns': columns } as React.CSSProperties} > {enabledConnections.map(c => { - const connection = PROVIDERS.find(provider => provider.id === c.provider); - const iconKey = connection?.icon; - const IconComponent = iconKey ? Icon[iconKey] : null; return (
  • : null} + iconStart={PROVIDERS[c.provider] || null} textVisuallyHidden={textVisuallyHidden} > - {connection?.name || c.provider} + {c.name} ); diff --git a/packages/ui/src/common/password-field.tsx b/packages/ui/src/common/password-field.tsx index b5fcf9aaae4..821b5af0f37 100644 --- a/packages/ui/src/common/password-field.tsx +++ b/packages/ui/src/common/password-field.tsx @@ -5,7 +5,8 @@ import React from 'react'; import { useLocalizations } from '~/hooks/use-localizations'; import { Animated } from '~/primitives/animated'; import * as Field from '~/primitives/field'; -import * as Icon from '~/primitives/icon'; +import EyeSlashSm from '~/primitives/icons/eye-slash-sm'; +import EyeSm from '~/primitives/icons/eye-sm'; import { translatePasswordError } from '~/utils/make-localizable'; export function PasswordField({ @@ -69,7 +70,7 @@ export function PasswordField({ disabled={props.disabled} > {[type === 'password' ? 'Show' : 'Hide', 'password'].join(' ')} - {type === 'password' ? : } + {type === 'password' ? : } diff --git a/packages/ui/src/common/phone-number-field.tsx b/packages/ui/src/common/phone-number-field.tsx index 0d966c8c278..28fbddb5b76 100644 --- a/packages/ui/src/common/phone-number-field.tsx +++ b/packages/ui/src/common/phone-number-field.tsx @@ -9,7 +9,8 @@ import { type CountryIso, IsoToCountryMap } from '~/constants/phone-number'; import { useLocalizations } from '~/hooks/use-localizations'; import { Animated } from '~/primitives/animated'; import * as Field from '~/primitives/field'; -import * as Icon from '~/primitives/icon'; +import CheckmarkSm from '~/primitives/icons/checkmark-sm'; +import ChevronUpDownSm from '~/primitives/icons/chevron-down-sm'; import { mergeRefs } from '~/utils/merge-refs'; import { extractDigits, formatPhoneNumber, parsePhoneString } from '~/utils/phone-number'; @@ -217,7 +218,7 @@ export const PhoneNumberField = React.forwardRef(function PhoneNumberField( className='hover:enabled:bg-gray-2 focus-visible:ring-light-opaque focus-visible:ring-offset-gray-8 flex items-center gap-x-1 rounded-l-md bg-white px-2 py-1 text-base outline-none focus-visible:ring focus-visible:ring-offset-1' > {selectedCountry.iso} - + - {selectedCountry === countryOptions[index] && ( - - )} + {selectedCountry === countryOptions[index] && } {name} +{code} diff --git a/packages/ui/src/components/sign-in/steps/choose-session.tsx b/packages/ui/src/components/sign-in/steps/choose-session.tsx index 1072b700210..4da6e0b3a50 100644 --- a/packages/ui/src/components/sign-in/steps/choose-session.tsx +++ b/packages/ui/src/components/sign-in/steps/choose-session.tsx @@ -8,7 +8,7 @@ import { useCard } from '~/hooks/use-card'; import { useDevModeWarning } from '~/hooks/use-dev-mode-warning'; import { useLocalizations } from '~/hooks/use-localizations'; import * as Card from '~/primitives/card'; -import * as Icon from '~/primitives/icon'; +import RightArrowSm from '~/primitives/icons/right-arrow-sm'; function getInitials({ firstName, @@ -110,7 +110,7 @@ export function SignInChooseSession() { ) : null} - + diff --git a/packages/ui/src/components/sign-in/steps/choose-strategy.tsx b/packages/ui/src/components/sign-in/steps/choose-strategy.tsx index dc0a662768a..98bed6614b8 100644 --- a/packages/ui/src/components/sign-in/steps/choose-strategy.tsx +++ b/packages/ui/src/components/sign-in/steps/choose-strategy.tsx @@ -6,14 +6,16 @@ import { Connections } from '~/common/connections'; import { GlobalError } from '~/common/global-error'; import { useGetHelp } from '~/components/sign-in/hooks/use-get-help'; import { LOCALIZATION_NEEDED } from '~/constants/localizations'; -import { useAppearance } from '~/contexts'; import { useCard } from '~/hooks/use-card'; import { useDevModeWarning } from '~/hooks/use-dev-mode-warning'; -import { useEnabledConnections } from '~/hooks/use-enabled-connections'; import { useLocalizations } from '~/hooks/use-localizations'; import { Button } from '~/primitives/button'; import * as Card from '~/primitives/card'; -import * as Icon from '~/primitives/icon'; +import EnvelopeSm from '~/primitives/icons/envelope-sm'; +import FingerprintSm from '~/primitives/icons/fingerprint-sm'; +import LinkSm from '~/primitives/icons/link-sm'; +import LockSm from '~/primitives/icons/lock-sm'; +import SmsSm from '~/primitives/icons/sms-sm'; import { LinkButton } from '~/primitives/link'; /* Internal @@ -33,11 +35,9 @@ function FirstFactorConnections({ isGlobalLoading }: { isGlobalLoading: boolean ============================================ */ export function SignInChooseStrategy() { - const enabledConnections = useEnabledConnections(); const { t } = useLocalizations(); const { setShowHelp } = useGetHelp(); - const hasConnection = enabledConnections.length > 0; const isDev = useDevModeWarning(); const { logoProps, footerProps } = useCard(); @@ -69,7 +69,7 @@ export function SignInChooseStrategy() { > @@ -135,7 +135,7 @@ export function SignInChooseStrategy() { > diff --git a/packages/ui/src/components/sign-in/steps/forgot-password.tsx b/packages/ui/src/components/sign-in/steps/forgot-password.tsx index acf1b78bff5..4e204f282c4 100644 --- a/packages/ui/src/components/sign-in/steps/forgot-password.tsx +++ b/packages/ui/src/components/sign-in/steps/forgot-password.tsx @@ -10,7 +10,11 @@ import { useDevModeWarning } from '~/hooks/use-dev-mode-warning'; import { useLocalizations } from '~/hooks/use-localizations'; import { Button } from '~/primitives/button'; import * as Card from '~/primitives/card'; -import * as Icon from '~/primitives/icon'; +import EnvelopeSm from '~/primitives/icons/envelope-sm'; +import FingerprintSm from '~/primitives/icons/fingerprint-sm'; +import LinkSm from '~/primitives/icons/link-sm'; +import LockSm from '~/primitives/icons/lock-sm'; +import SmsSm from '~/primitives/icons/sms-sm'; import { LinkButton } from '~/primitives/link'; import { Separator } from '~/primitives/separator'; @@ -64,7 +68,7 @@ export function SignInForgotPassword() { > @@ -130,7 +134,7 @@ export function SignInForgotPassword() { > diff --git a/packages/ui/src/components/sign-in/steps/get-help.tsx b/packages/ui/src/components/sign-in/steps/get-help.tsx index 5aed9426b60..96c72604269 100644 --- a/packages/ui/src/components/sign-in/steps/get-help.tsx +++ b/packages/ui/src/components/sign-in/steps/get-help.tsx @@ -7,7 +7,7 @@ import { useLocalizations } from '~/hooks/use-localizations'; import { useSupportEmail } from '~/hooks/use-support-email'; import { Button } from '~/primitives/button'; import * as Card from '~/primitives/card'; -import * as Icon from '~/primitives/icon'; +import CaretRightLegacySm from '~/primitives/icons/caret-right-legacy-sm'; import { LinkButton } from '~/primitives/link'; export function SignInGetHelp() { @@ -43,7 +43,7 @@ export function SignInGetHelp() { onClick={() => { window.location.href = `mailto:${supportEmail}`; }} - iconEnd={} + iconEnd={} > Email support diff --git a/packages/ui/src/components/sign-in/steps/start.tsx b/packages/ui/src/components/sign-in/steps/start.tsx index 9a9a1ab426a..6c0d18ebd5d 100644 --- a/packages/ui/src/components/sign-in/steps/start.tsx +++ b/packages/ui/src/components/sign-in/steps/start.tsx @@ -20,7 +20,7 @@ import { useEnabledConnections } from '~/hooks/use-enabled-connections'; import { useLocalizations } from '~/hooks/use-localizations'; import { Button } from '~/primitives/button'; import * as Card from '~/primitives/card'; -import * as Icon from '~/primitives/icon'; +import CaretRightLegacySm from '~/primitives/icons/caret-right-legacy-sm'; import { LinkButton } from '~/primitives/link'; import { Separator } from '~/primitives/separator'; @@ -148,7 +148,7 @@ export function SignInStart() { diff --git a/packages/ui/src/components/sign-in/steps/status.tsx b/packages/ui/src/components/sign-in/steps/status.tsx index 566139f43ce..be6f9ba1466 100644 --- a/packages/ui/src/components/sign-in/steps/status.tsx +++ b/packages/ui/src/components/sign-in/steps/status.tsx @@ -6,7 +6,10 @@ import { useDevModeWarning } from '~/hooks/use-dev-mode-warning'; import { useDisplayConfig } from '~/hooks/use-display-config'; import { useLocalizations } from '~/hooks/use-localizations'; import * as Card from '~/primitives/card'; -import * as Icon from '~/primitives/icon'; +import ExclamationTrianglelg from '~/primitives/icons/exclamation-triangle-lg'; +import SpinnerLg from '~/primitives/icons/spinner-lg'; +import SwitchArrowslg from '~/primitives/icons/switch-arrows-lg'; +import TickShieldlg from '~/primitives/icons/tick-shield-lg'; import type { VerificationStatus } from '~/types/utils'; import type { DefaultLocalizationKey } from '~/utils/make-localizable'; @@ -46,42 +49,12 @@ const signInStatusLocalizationKeys: Record< type Status = keyof typeof signInStatusLocalizationKeys; const statusIcon: Record = { - loading: ( - - ), - verified: ( - - ), - verified_switch_tab: ( - - ), - expired: ( - - ), - failed: ( - - ), - client_mismatch: ( - - ), + loading: , + verified: , + verified_switch_tab: , + expired: , + failed: , + client_mismatch: , }; export function SignInStatus() { diff --git a/packages/ui/src/components/sign-in/steps/verifications.tsx b/packages/ui/src/components/sign-in/steps/verifications.tsx index 464b826e843..3c183f7e5aa 100644 --- a/packages/ui/src/components/sign-in/steps/verifications.tsx +++ b/packages/ui/src/components/sign-in/steps/verifications.tsx @@ -13,7 +13,8 @@ import { useLocalizations } from '~/hooks/use-localizations'; import { useResetPasswordFactor } from '~/hooks/use-reset-password-factor'; import { Button } from '~/primitives/button'; import * as Card from '~/primitives/card'; -import * as Icon from '~/primitives/icon'; +import CaretRightLegacySm from '~/primitives/icons/caret-right-legacy-sm'; +import PenSm from '~/primitives/icons/pen-sm'; import { LinkButton } from '~/primitives/link'; import { formatSafeIdentifier } from '~/utils/format-safe-identifier'; @@ -55,7 +56,7 @@ export function SignInVerifications() { className='text-accent-9 size-4 rounded-sm outline-none focus-visible:ring' aria-label='Start again' > - + @@ -97,7 +98,7 @@ export function SignInVerifications() { @@ -132,7 +133,7 @@ export function SignInVerifications() { className='text-accent-9 size-4 rounded-sm outline-none focus-visible:ring' aria-label='Start again' > - + @@ -152,7 +153,7 @@ export function SignInVerifications() { @@ -193,7 +194,7 @@ export function SignInVerifications() { @@ -232,7 +233,7 @@ export function SignInVerifications() { className='text-accent-9 size-4 rounded-sm outline-none focus-visible:ring' aria-label='Start again' > - + @@ -276,7 +277,7 @@ export function SignInVerifications() { @@ -311,7 +312,7 @@ export function SignInVerifications() { className='text-accent-9 size-4 rounded-sm outline-none focus-visible:ring' aria-label='Start again' > - + @@ -356,7 +357,7 @@ export function SignInVerifications() { @@ -391,7 +392,7 @@ export function SignInVerifications() { className='text-accent-9 size-4 rounded-sm outline-none focus-visible:ring' aria-label='Start again' > - + @@ -474,7 +475,7 @@ export function SignInVerifications() { @@ -512,7 +513,7 @@ export function SignInVerifications() { diff --git a/packages/ui/src/components/sign-up/steps/continue.tsx b/packages/ui/src/components/sign-up/steps/continue.tsx index 69cc21c01ab..cfa014e9d34 100644 --- a/packages/ui/src/components/sign-up/steps/continue.tsx +++ b/packages/ui/src/components/sign-up/steps/continue.tsx @@ -15,7 +15,7 @@ import { useDevModeWarning } from '~/hooks/use-dev-mode-warning'; import { useLocalizations } from '~/hooks/use-localizations'; import { Button } from '~/primitives/button'; import * as Card from '~/primitives/card'; -import * as Icon from '~/primitives/icon'; +import CaretRightLegacySm from '~/primitives/icons/caret-right-legacy-sm'; export function SignUpContinue() { const { t } = useLocalizations(); @@ -100,7 +100,7 @@ export function SignUpContinue() { diff --git a/packages/ui/src/components/sign-up/steps/start.tsx b/packages/ui/src/components/sign-up/steps/start.tsx index 4ad9d1ce050..a025e5b7efd 100644 --- a/packages/ui/src/components/sign-up/steps/start.tsx +++ b/packages/ui/src/components/sign-up/steps/start.tsx @@ -22,7 +22,7 @@ import { useEnvironment } from '~/hooks/use-environment'; import { useLocalizations } from '~/hooks/use-localizations'; import { Button } from '~/primitives/button'; import * as Card from '~/primitives/card'; -import * as Icon from '~/primitives/icon'; +import CaretRightLegacySm from '~/primitives/icons/caret-right-legacy-sm'; import { Separator } from '~/primitives/separator'; export function SignUpStart() { @@ -147,7 +147,7 @@ export function SignUpStart() { diff --git a/packages/ui/src/components/sign-up/steps/status.tsx b/packages/ui/src/components/sign-up/steps/status.tsx index 94618c96bb0..13ae0c4c483 100644 --- a/packages/ui/src/components/sign-up/steps/status.tsx +++ b/packages/ui/src/components/sign-up/steps/status.tsx @@ -6,7 +6,10 @@ import { useDevModeWarning } from '~/hooks/use-dev-mode-warning'; import { useDisplayConfig } from '~/hooks/use-display-config'; import { useLocalizations } from '~/hooks/use-localizations'; import * as Card from '~/primitives/card'; -import * as Icon from '~/primitives/icon'; +import ExclamationTrianglelg from '~/primitives/icons/exclamation-triangle-lg'; +import SpinnerLg from '~/primitives/icons/spinner-lg'; +import SwitchArrowslg from '~/primitives/icons/switch-arrows-lg'; +import TickShieldlg from '~/primitives/icons/tick-shield-lg'; import type { VerificationStatus } from '~/types/utils'; import type { DefaultLocalizationKey } from '~/utils/make-localizable'; @@ -46,42 +49,12 @@ const signUpStatusLocalizationKeys: Record< type Status = keyof typeof signUpStatusLocalizationKeys; const statusIcon: Record = { - loading: ( - - ), - verified: ( - - ), - verified_switch_tab: ( - - ), - expired: ( - - ), - failed: ( - - ), - client_mismatch: ( - - ), + loading: , + verified: , + verified_switch_tab: , + expired: , + failed: , + client_mismatch: , }; export function SignUpStatus() { diff --git a/packages/ui/src/components/sign-up/steps/verifications.tsx b/packages/ui/src/components/sign-up/steps/verifications.tsx index 52ec1b1ab33..3c63aa26f6a 100644 --- a/packages/ui/src/components/sign-up/steps/verifications.tsx +++ b/packages/ui/src/components/sign-up/steps/verifications.tsx @@ -11,7 +11,8 @@ import { useDisplayConfig } from '~/hooks/use-display-config'; import { useLocalizations } from '~/hooks/use-localizations'; import { Button } from '~/primitives/button'; import * as Card from '~/primitives/card'; -import * as Icon from '~/primitives/icon'; +import CaretRightLegacySm from '~/primitives/icons/caret-right-legacy-sm'; +import PenSm from '~/primitives/icons/pen-sm'; import { LinkButton } from '~/primitives/link'; import type { RequireExactlyOne } from '~/types/utils'; import { parsePhoneString } from '~/utils/phone-number'; @@ -81,7 +82,7 @@ export function SignUpVerifications() { className='size-4 rounded-sm outline-none focus-visible:ring' aria-label='Start again' > - + @@ -125,7 +126,7 @@ export function SignUpVerifications() { @@ -153,7 +154,7 @@ export function SignUpVerifications() { className='size-4 rounded-sm outline-none focus-visible:ring' aria-label='Start again' > - + @@ -197,7 +198,7 @@ export function SignUpVerifications() { @@ -229,7 +230,7 @@ export function SignUpVerifications() { className='size-4 rounded-sm outline-none focus-visible:ring' aria-label='Start again' > - + diff --git a/packages/ui/src/constants/providers.ts b/packages/ui/src/constants/providers.ts deleted file mode 100644 index f10bcf6014f..00000000000 --- a/packages/ui/src/constants/providers.ts +++ /dev/null @@ -1,43 +0,0 @@ -import type { OAuthProvider, Web3Provider } from '@clerk/types'; - -import type * as Icon from '~/primitives/icon'; - -type IconName = keyof typeof Icon; -type Provider = { - id: OAuthProvider | Web3Provider; - name: string; - icon: IconName; -}; - -export const PROVIDERS: Provider[] = [ - { id: 'apple', name: 'Apple', icon: 'Apple' }, - { id: 'atlassian', name: 'Atlassian', icon: 'Atlassian' }, - { id: 'bitbucket', name: 'Bitbucket', icon: 'Bitbucket' }, - { id: 'box', name: 'Box', icon: 'Box' }, - { id: 'coinbase', name: 'Coinbase', icon: 'Coinbase' }, - { id: 'discord', name: 'Discord', icon: 'Discord' }, - { id: 'dropbox', name: 'Dropbox', icon: 'Dropbox' }, - { id: 'facebook', name: 'Facebook', icon: 'Facebook' }, - { id: 'github', name: 'GitHub', icon: 'GitHub' }, - { id: 'gitlab', name: 'GitLab', icon: 'GitLab' }, - { id: 'google', name: 'Google', icon: 'Google' }, - { id: 'hubspot', name: 'HubSpot', icon: 'HubSpot' }, - { id: 'instagram', name: 'Instagram', icon: 'Instagram' }, - { id: 'line', name: 'Line', icon: 'Line' }, - { id: 'linear', name: 'Linear', icon: 'Linear' }, - { id: 'linkedin', name: 'LinkedIn', icon: 'LinkedIn' }, - { id: 'linkedin_oidc', name: 'LinkedIn', icon: 'LinkedIn' }, - { id: 'metamask', name: 'MetaMask', icon: 'MetaMask' }, - { id: 'microsoft', name: 'Microsoft', icon: 'Microsoft' }, - { id: 'notion', name: 'Notion', icon: 'Notion' }, - { id: 'slack', name: 'Slack', icon: 'Slack' }, - { id: 'tiktok', name: 'TikTok', icon: 'TikTok' }, - { id: 'twitch', name: 'Twitch', icon: 'Twitch' }, - { id: 'twitter', name: 'Twitter', icon: 'Twitter' }, - { id: 'x', name: 'X / Twitter', icon: 'X' }, - { id: 'xero', name: 'Xero', icon: 'Xero' }, - { id: 'huggingface', name: 'Hugging Face', icon: 'HuggingFace' }, - // - { id: 'enstall', name: 'Enstall', icon: 'Apple' }, - { id: 'spotify', name: 'Spotify', icon: 'Apple' }, -] as const; diff --git a/packages/ui/src/primitives/alert.tsx b/packages/ui/src/primitives/alert.tsx index 037d198d361..6563833341e 100644 --- a/packages/ui/src/primitives/alert.tsx +++ b/packages/ui/src/primitives/alert.tsx @@ -1,12 +1,14 @@ import * as React from 'react'; import { - useAppearance, mergeDescriptors, - type ParsedElementsFragment, type ParsedDescriptor, + type ParsedElementsFragment, + useAppearance, } from '~/contexts/AppearanceContext'; -import * as Icon from './icon'; + +import ExclamationOctagonSm from './icons/exclamation-octagon-sm'; +import ExclamationTriangleSm from './icons/exclamation-triangle-sm'; export const layoutStyle = { alert: { @@ -60,8 +62,8 @@ export const Alert = React.forwardRef< { { - error: , - warning: , + error: , + warning: , }[intent] } diff --git a/packages/ui/src/primitives/field.tsx b/packages/ui/src/primitives/field.tsx index 9a3991fd4a2..1a4233d4f6f 100644 --- a/packages/ui/src/primitives/field.tsx +++ b/packages/ui/src/primitives/field.tsx @@ -2,7 +2,10 @@ import { Slot } from '@radix-ui/react-slot'; import { cx } from 'cva'; import * as React from 'react'; -import * as Icon from './icon'; +import CheckmarkCircleSm from './icons/checkmark-circle-sm'; +import ExclamationOctagonSm from './icons/exclamation-octagon-sm'; +import ExclamationTriangleSm from './icons/exclamation-triangle-sm'; +import InformationCircleSm from './icons/information-circle-sm'; type FieldIntent = 'error' | 'idle' | 'info' | 'success' | 'warning'; @@ -256,10 +259,10 @@ export const Message = React.forwardRef< { { - error: , - info: , - success: , - warning: , + error: , + info: , + success: , + warning: , }[intent] } diff --git a/packages/ui/src/primitives/icon.tsx b/packages/ui/src/primitives/icon.tsx deleted file mode 100644 index daf5333dd7f..00000000000 --- a/packages/ui/src/primitives/icon.tsx +++ /dev/null @@ -1,1288 +0,0 @@ -import { cx } from 'cva'; -import * as React from 'react'; - -type IconRef = SVGSVGElement; -type IconSizes = 'default' | 'lg'; -type IconProps = Omit, 'viewBox'> & { - size?: IconSizes; -}; - -// Icons that need to be rotated 180deg in RTL mode -const RTL_ICONS = ['IconCaretRightLegacy']; - -function createIcon({ displayName, viewBox, path }: { displayName: string; viewBox: string; path: React.ReactNode }) { - const Icon = React.forwardRef(function Icon( - { className, size = 'default', ...props }: IconProps, - ref: React.ForwardedRef, - ) { - return ( - - {path} - - ); - }); - Icon.displayName = displayName; - - return Icon; -} - -/* Providers - ============================================ */ - -export const Apple = createIcon({ - displayName: 'IconApple', - viewBox: '0 0 20 20', - path: ( - - ), -}); - -export const Atlassian = createIcon({ - displayName: 'IconAtlassian', - viewBox: '0 0 20 20', - path: ( - <> - - - - - - - - - - - - - - - ), -}); - -export const Bitbucket = createIcon({ - displayName: 'IconBitbucket', - viewBox: '0 0 20 20', - path: ( - <> - - - - - - - - - - - - - - - ), -}); - -export const Box = createIcon({ - displayName: 'IconBox', - viewBox: '0 0 20 20', - path: ( - - ), -}); - -export const Coinbase = createIcon({ - displayName: 'IconCoinbase', - viewBox: '0 0 20 20', - path: ( - <> - - - - - - - - - - ), -}); - -export const Discord = createIcon({ - displayName: 'IconDiscord', - viewBox: '0 0 20 20', - path: ( - <> - - - - - - - - - - ), -}); - -export const Dropbox = createIcon({ - displayName: 'IconDropbox', - viewBox: '0 0 20 20', - path: ( - - ), -}); - -export const Facebook = createIcon({ - displayName: 'IconFacebook', - viewBox: '0 0 20 20', - path: ( - <> - - - - - - - - - - - ), -}); - -export const GitHub = createIcon({ - displayName: 'IconGitHub', - viewBox: '0 0 20 20', - path: ( - - ), -}); - -export const GitLab = createIcon({ - displayName: 'IconGitLab', - viewBox: '0 0 20 20', - path: ( - <> - - - - - - - - - - - - - - - - ), -}); - -export const Google = createIcon({ - displayName: 'IconGoogle', - viewBox: '0 0 20 20', - path: ( - <> - - - - - - ), -}); - -export const HubSpot = createIcon({ - displayName: 'IconHubSpot', - viewBox: '0 0 20 20', - path: ( - - ), -}); - -export const HuggingFace = createIcon({ - displayName: 'IconHuggingFace', - viewBox: '0 0 20 20', - path: ( - <> - - - - - - - - - - - - - - - - - - - - - - - - - - ), -}); - -export const Instagram = createIcon({ - displayName: 'IconInstagram', - viewBox: '0 0 20 20', - path: ( - - ), -}); - -export const Line = createIcon({ - displayName: 'IconLine', - viewBox: '0 0 20 20', - path: ( - <> - - - - - - - - - - - - - - - ), -}); - -export const Linear = createIcon({ - displayName: 'IconLinear', - viewBox: '0 0 20 20', - path: ( - <> - - - - - - - - - - - - - - - - - - - ), -}); - -export const LinkedIn = createIcon({ - displayName: 'IconLinkedIn', - viewBox: '0 0 20 20', - path: ( - <> - - - - ), -}); - -export const MetaMask = createIcon({ - displayName: 'IconMetaMask', - viewBox: '0 0 20 20', - path: ( - <> - - - - - - - - - - - - - - - - - - - - - ), -}); - -export const Microsoft = createIcon({ - displayName: 'IconMicrosoft', - viewBox: '0 0 20 20', - path: ( - <> - - - - - - - - - - - - - - ), -}); - -export const Notion = createIcon({ - displayName: 'IconNotion', - viewBox: '0 0 20 20', - path: ( - <> - - - - - - - - - - - ), -}); - -export const Slack = createIcon({ - displayName: 'IconSlack', - viewBox: '0 0 20 20', - path: ( - <> - - - - - - - - - - - - - - - - - ), -}); - -export const TikTok = createIcon({ - displayName: 'IconTikTok', - viewBox: '0 0 20 20', - path: ( - <> - - - - - - - - - - - - - - - - ), -}); - -export const Twitch = createIcon({ - displayName: 'IconTwitch', - viewBox: '0 0 20 20', - path: ( - <> - - - - - - ), -}); - -export const Twitter = createIcon({ - displayName: 'IconTwitter', - viewBox: '0 0 20 20', - path: ( - - ), -}); - -export const Xero = createIcon({ - displayName: 'IconXero', - viewBox: '0 0 20 20', - path: ( - <> - - - - - - - - - - - - - - - - - - - - ), -}); - -export const X = createIcon({ - displayName: 'IconX', - viewBox: '0 0 20 20', - path: ( - <> - - - - - - - - - - ), -}); - -/* UI - ============================================ */ - -export const CheckmarkCircleSm = createIcon({ - displayName: 'IconCheckmarkCircleSm', - viewBox: '0 0 16 16', - path: ( - <> - - - - ), -}); - -export const CheckmarkSm = createIcon({ - displayName: 'IconCheckmarkSm', - viewBox: '0 0 16 16', - path: ( - - ), -}); - -export const ChevronUpDownSm = createIcon({ - displayName: 'IconChevronUpDownSm', - viewBox: '0 0 16 16', - path: ( - <> - - - - ), -}); - -export const EnvelopeSm = createIcon({ - displayName: 'IconEnvelopeSm', - viewBox: '0 0 16 16', - path: ( - <> - - - - ), -}); - -export const ExclamationOctagonSm = createIcon({ - displayName: 'IconExclamationOctagonSm', - viewBox: '0 0 16 16', - path: ( - <> - - - - - ), -}); - -export const ExclamationTriangleSm = createIcon({ - displayName: 'IconExclamationTriangleSm', - viewBox: '0 0 16 16', - path: ( - <> - - - - - ), -}); - -export const EyeSm = createIcon({ - displayName: 'IconEyeSm', - viewBox: '0 0 16 16', - path: ( - <> - - - - ), -}); - -export const EyeSlashSm = createIcon({ - displayName: 'IconEyeSlashSm', - viewBox: '0 0 16 16', - path: ( - <> - - - - - ), -}); - -export const FingerprintSm = createIcon({ - displayName: 'FingerprintSm', - viewBox: '0 0 16 16', - path: ( - - ), -}); - -export const InformationCircleSm = createIcon({ - displayName: 'IconInformationCircleSm', - viewBox: '0 0 16 16', - path: ( - <> - - - - - ), -}); - -export const LinkSm = createIcon({ - displayName: 'IconLinkSm', - viewBox: '0 0 16 16', - path: ( - - ), -}); - -export const LockSm = createIcon({ - displayName: 'IconLockSm', - viewBox: '0 0 16 16', - path: ( - - ), -}); - -export const PenSm = createIcon({ - displayName: 'IconPenSm', - viewBox: '0 0 16 16', - path: ( - - ), -}); - -export const RightArrowSm = createIcon({ - displayName: 'IconRightArrowSm', - viewBox: '0 0 16 16', - path: ( - - ), -}); - -export const SMSSm = createIcon({ - displayName: 'IconSMSSm', - viewBox: '0 0 16 16', - path: ( - - ), -}); - -export const ExclamationTrianglelg = createIcon({ - displayName: 'IconExclamationTriangleLg', - viewBox: '0 0 48 48', - path: ( - - ), -}); - -export const TickShieldlg = createIcon({ - displayName: 'IconTickShieldLg', - viewBox: '0 0 48 48', - path: ( - - ), -}); - -export const SwitchArrowslg = createIcon({ - displayName: 'IconSwitchArrowsLg', - viewBox: '0 0 48 48', - path: ( - - ), -}); - -export const SpinnerLg = createIcon({ - displayName: 'IconSpinnerLg', - viewBox: '0 0 48 48', - path: ( - - ), -}); - -/* Legacy - ---------------------------------- */ - -export const CaretRightLegacy = createIcon({ - displayName: 'IconCaretRightLegacy', - viewBox: '0 0 16 16', - path: ( - - ), -}); diff --git a/packages/ui/src/primitives/icons/apple.tsx b/packages/ui/src/primitives/icons/apple.tsx new file mode 100644 index 00000000000..88890dd5578 --- /dev/null +++ b/packages/ui/src/primitives/icons/apple.tsx @@ -0,0 +1,14 @@ +import { Icon, type IconProps } from './icon'; + +export default function Apple(props: IconProps) { + return ( + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/atlassian.tsx b/packages/ui/src/primitives/icons/atlassian.tsx new file mode 100644 index 00000000000..90a5e81d445 --- /dev/null +++ b/packages/ui/src/primitives/icons/atlassian.tsx @@ -0,0 +1,43 @@ +import { Icon, type IconProps } from './icon'; + +export default function Atlassian(props: IconProps) { + return ( + + + + + + + + + + + + + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/bitbucket.tsx b/packages/ui/src/primitives/icons/bitbucket.tsx new file mode 100644 index 00000000000..0b7349e1731 --- /dev/null +++ b/packages/ui/src/primitives/icons/bitbucket.tsx @@ -0,0 +1,46 @@ +import { Icon, type IconProps } from './icon'; + +export default function Bitbucket(props: IconProps) { + return ( + + + + + + + + + + + + + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/box.tsx b/packages/ui/src/primitives/icons/box.tsx new file mode 100644 index 00000000000..a9590fbcf2a --- /dev/null +++ b/packages/ui/src/primitives/icons/box.tsx @@ -0,0 +1,14 @@ +import { Icon, type IconProps } from './icon'; + +export default function Box(props: IconProps) { + return ( + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/caret-right-legacy-sm.tsx b/packages/ui/src/primitives/icons/caret-right-legacy-sm.tsx new file mode 100644 index 00000000000..31854aa9198 --- /dev/null +++ b/packages/ui/src/primitives/icons/caret-right-legacy-sm.tsx @@ -0,0 +1,18 @@ +import { Icon, type IconProps } from './icon'; + +export default function CaretRightLegacySm(props: IconProps) { + return ( + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/checkmark-circle-sm.tsx b/packages/ui/src/primitives/icons/checkmark-circle-sm.tsx new file mode 100644 index 00000000000..32acd9fcd68 --- /dev/null +++ b/packages/ui/src/primitives/icons/checkmark-circle-sm.tsx @@ -0,0 +1,26 @@ +import { Icon, type IconProps } from './icon'; + +export default function CheckmarkCircleSm(props: IconProps) { + return ( + + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/checkmark-sm.tsx b/packages/ui/src/primitives/icons/checkmark-sm.tsx new file mode 100644 index 00000000000..6fc0a79003b --- /dev/null +++ b/packages/ui/src/primitives/icons/checkmark-sm.tsx @@ -0,0 +1,17 @@ +import { Icon, type IconProps } from './icon'; + +export default function CheckmarkSm(props: IconProps) { + return ( + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/chevron-down-sm.tsx b/packages/ui/src/primitives/icons/chevron-down-sm.tsx new file mode 100644 index 00000000000..bd90cee3ff8 --- /dev/null +++ b/packages/ui/src/primitives/icons/chevron-down-sm.tsx @@ -0,0 +1,24 @@ +import { Icon, type IconProps } from './icon'; + +export default function ChevronUpDownSm(props: IconProps) { + return ( + + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/coinbase-wallet.tsx b/packages/ui/src/primitives/icons/coinbase-wallet.tsx new file mode 100644 index 00000000000..e08d4542318 --- /dev/null +++ b/packages/ui/src/primitives/icons/coinbase-wallet.tsx @@ -0,0 +1,31 @@ +import { Icon, type IconProps } from './icon'; + +export default function CoinbaseWallet(props: IconProps) { + return ( + + + + + + + + + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/coinbase.tsx b/packages/ui/src/primitives/icons/coinbase.tsx new file mode 100644 index 00000000000..0522102167f --- /dev/null +++ b/packages/ui/src/primitives/icons/coinbase.tsx @@ -0,0 +1,25 @@ +import { Icon, type IconProps } from './icon'; + +export default function Coinbase(props: IconProps) { + return ( + + + + + + + + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/discord.tsx b/packages/ui/src/primitives/icons/discord.tsx new file mode 100644 index 00000000000..963a336d14a --- /dev/null +++ b/packages/ui/src/primitives/icons/discord.tsx @@ -0,0 +1,25 @@ +import { Icon, type IconProps } from './icon'; + +export default function Discord(props: IconProps) { + return ( + + + + + + + + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/dropbox.tsx b/packages/ui/src/primitives/icons/dropbox.tsx new file mode 100644 index 00000000000..9df77e8e446 --- /dev/null +++ b/packages/ui/src/primitives/icons/dropbox.tsx @@ -0,0 +1,14 @@ +import { Icon, type IconProps } from './icon'; + +export default function Dropbox(props: IconProps) { + return ( + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/enstall.tsx b/packages/ui/src/primitives/icons/enstall.tsx new file mode 100644 index 00000000000..109ed668d96 --- /dev/null +++ b/packages/ui/src/primitives/icons/enstall.tsx @@ -0,0 +1,36 @@ +import { Icon, type IconProps } from './icon'; + +export default function Enstall(props: IconProps) { + return ( + + + + + + + + + + + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/envelope-sm.tsx b/packages/ui/src/primitives/icons/envelope-sm.tsx new file mode 100644 index 00000000000..7b07f88d712 --- /dev/null +++ b/packages/ui/src/primitives/icons/envelope-sm.tsx @@ -0,0 +1,24 @@ +import { Icon, type IconProps } from './icon'; + +export default function EnvelopeSm(props: IconProps) { + return ( + + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/exclamation-octagon-sm.tsx b/packages/ui/src/primitives/icons/exclamation-octagon-sm.tsx new file mode 100644 index 00000000000..279fbab6537 --- /dev/null +++ b/packages/ui/src/primitives/icons/exclamation-octagon-sm.tsx @@ -0,0 +1,31 @@ +import { Icon, type IconProps } from './icon'; + +export default function ExclamationOctagonSm(props: IconProps) { + return ( + + + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/exclamation-triangle-lg.tsx b/packages/ui/src/primitives/icons/exclamation-triangle-lg.tsx new file mode 100644 index 00000000000..a5fbc36afa7 --- /dev/null +++ b/packages/ui/src/primitives/icons/exclamation-triangle-lg.tsx @@ -0,0 +1,16 @@ +import { Icon, type IconProps } from './icon'; + +export default function ExclamationTrianglelg(props: IconProps) { + return ( + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/exclamation-triangle-sm.tsx b/packages/ui/src/primitives/icons/exclamation-triangle-sm.tsx new file mode 100644 index 00000000000..819639e7638 --- /dev/null +++ b/packages/ui/src/primitives/icons/exclamation-triangle-sm.tsx @@ -0,0 +1,31 @@ +import { Icon, type IconProps } from './icon'; + +export default function ExclamationTriangleSm(props: IconProps) { + return ( + + + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/eye-slash-sm.tsx b/packages/ui/src/primitives/icons/eye-slash-sm.tsx new file mode 100644 index 00000000000..69fa2ef0b0f --- /dev/null +++ b/packages/ui/src/primitives/icons/eye-slash-sm.tsx @@ -0,0 +1,31 @@ +import { Icon, type IconProps } from './icon'; + +export default function EyeSlashSm(props: IconProps) { + return ( + + + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/eye-sm.tsx b/packages/ui/src/primitives/icons/eye-sm.tsx new file mode 100644 index 00000000000..84ffec57a04 --- /dev/null +++ b/packages/ui/src/primitives/icons/eye-sm.tsx @@ -0,0 +1,26 @@ +import { Icon, type IconProps } from './icon'; + +export default function EyeSm(props: IconProps) { + return ( + + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/facebook.tsx b/packages/ui/src/primitives/icons/facebook.tsx new file mode 100644 index 00000000000..e9a4e17a93b --- /dev/null +++ b/packages/ui/src/primitives/icons/facebook.tsx @@ -0,0 +1,29 @@ +import { Icon, type IconProps } from './icon'; + +export default function Facebook(props: IconProps) { + return ( + + + + + + + + + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/fingerprint-sm.tsx b/packages/ui/src/primitives/icons/fingerprint-sm.tsx new file mode 100644 index 00000000000..7d6fbb43d02 --- /dev/null +++ b/packages/ui/src/primitives/icons/fingerprint-sm.tsx @@ -0,0 +1,17 @@ +import { Icon, type IconProps } from './icon'; + +export default function FingerprintSm(props: IconProps) { + return ( + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/github.tsx b/packages/ui/src/primitives/icons/github.tsx new file mode 100644 index 00000000000..2cf9805e531 --- /dev/null +++ b/packages/ui/src/primitives/icons/github.tsx @@ -0,0 +1,16 @@ +import { Icon, type IconProps } from './icon'; + +export default function Github(props: IconProps) { + return ( + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/gitlab.tsx b/packages/ui/src/primitives/icons/gitlab.tsx new file mode 100644 index 00000000000..0bb9fd87575 --- /dev/null +++ b/packages/ui/src/primitives/icons/gitlab.tsx @@ -0,0 +1,49 @@ +import { Icon, type IconProps } from './icon'; + +export default function Gitlab(props: IconProps) { + return ( + + + + + + + + + + + + + + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/google.tsx b/packages/ui/src/primitives/icons/google.tsx new file mode 100644 index 00000000000..5b62ef5d37b --- /dev/null +++ b/packages/ui/src/primitives/icons/google.tsx @@ -0,0 +1,26 @@ +import { Icon, type IconProps } from './icon'; + +export default function Google(props: IconProps) { + return ( + + + + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/hubspot.tsx b/packages/ui/src/primitives/icons/hubspot.tsx new file mode 100644 index 00000000000..cbab54d401e --- /dev/null +++ b/packages/ui/src/primitives/icons/hubspot.tsx @@ -0,0 +1,14 @@ +import { Icon, type IconProps } from './icon'; + +export default function Hubspot(props: IconProps) { + return ( + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/huggingface.tsx b/packages/ui/src/primitives/icons/huggingface.tsx new file mode 100644 index 00000000000..7fab0b7995c --- /dev/null +++ b/packages/ui/src/primitives/icons/huggingface.tsx @@ -0,0 +1,83 @@ +import { Icon, type IconProps } from './icon'; + +export default function Huggingface(props: IconProps) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/icon.tsx b/packages/ui/src/primitives/icons/icon.tsx new file mode 100644 index 00000000000..66b107dd865 --- /dev/null +++ b/packages/ui/src/primitives/icons/icon.tsx @@ -0,0 +1,20 @@ +import * as React from 'react'; + +export interface IconProps extends React.SVGProps {} + +export const Icon = React.forwardRef( + function Icon(props, ref) { + const { children, 'aria-label': ariaLabel, 'aria-hidden': ariaHidden, ...restProps } = props; + return React.cloneElement(children, { + ...restProps, + ref, + width: '1em', + height: '1em', + fill: 'none', + focusable: 'false', + 'aria-label': ariaLabel, + 'aria-hidden': ariaLabel ? ariaHidden || undefined : true, + role: 'img', + }); + }, +); diff --git a/packages/ui/src/primitives/icons/information-circle-sm.tsx b/packages/ui/src/primitives/icons/information-circle-sm.tsx new file mode 100644 index 00000000000..53b9f2d2a99 --- /dev/null +++ b/packages/ui/src/primitives/icons/information-circle-sm.tsx @@ -0,0 +1,33 @@ +import { Icon, type IconProps } from './icon'; + +export default function InformationCircleSm(props: IconProps) { + return ( + + + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/instagram.tsx b/packages/ui/src/primitives/icons/instagram.tsx new file mode 100644 index 00000000000..e8dc6b87130 --- /dev/null +++ b/packages/ui/src/primitives/icons/instagram.tsx @@ -0,0 +1,112 @@ +import { Icon, type IconProps } from './icon'; + +export default function Instagram(props: IconProps) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/line.tsx b/packages/ui/src/primitives/icons/line.tsx new file mode 100644 index 00000000000..1abc3fd3058 --- /dev/null +++ b/packages/ui/src/primitives/icons/line.tsx @@ -0,0 +1,45 @@ +import { Icon, type IconProps } from './icon'; + +export default function Line(props: IconProps) { + return ( + + + + + + + + + + + + + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/linear.tsx b/packages/ui/src/primitives/icons/linear.tsx new file mode 100644 index 00000000000..a7b1c4770a5 --- /dev/null +++ b/packages/ui/src/primitives/icons/linear.tsx @@ -0,0 +1,54 @@ +import { Icon, type IconProps } from './icon'; + +export default function Linear(props: IconProps) { + return ( + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/link-sm.tsx b/packages/ui/src/primitives/icons/link-sm.tsx new file mode 100644 index 00000000000..1dec9dd1cfe --- /dev/null +++ b/packages/ui/src/primitives/icons/link-sm.tsx @@ -0,0 +1,17 @@ +import { Icon, type IconProps } from './icon'; + +export default function LinkSm(props: IconProps) { + return ( + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/linkedin.tsx b/packages/ui/src/primitives/icons/linkedin.tsx new file mode 100644 index 00000000000..57a87cf6eba --- /dev/null +++ b/packages/ui/src/primitives/icons/linkedin.tsx @@ -0,0 +1,20 @@ +import { Icon, type IconProps } from './icon'; + +export default function Linkedin(props: IconProps) { + return ( + + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/lock-sm.tsx b/packages/ui/src/primitives/icons/lock-sm.tsx new file mode 100644 index 00000000000..ae244bc60a1 --- /dev/null +++ b/packages/ui/src/primitives/icons/lock-sm.tsx @@ -0,0 +1,17 @@ +import { Icon, type IconProps } from './icon'; + +export default function LockSm(props: IconProps) { + return ( + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/metamask.tsx b/packages/ui/src/primitives/icons/metamask.tsx new file mode 100644 index 00000000000..727557e844e --- /dev/null +++ b/packages/ui/src/primitives/icons/metamask.tsx @@ -0,0 +1,68 @@ +import { Icon, type IconProps } from './icon'; + +export default function Metamask(props: IconProps) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/microsoft.tsx b/packages/ui/src/primitives/icons/microsoft.tsx new file mode 100644 index 00000000000..7ce5baeec59 --- /dev/null +++ b/packages/ui/src/primitives/icons/microsoft.tsx @@ -0,0 +1,41 @@ +import { Icon, type IconProps } from './icon'; + +export default function Microsoft(props: IconProps) { + return ( + + + + + + + + + + + + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/notion.tsx b/packages/ui/src/primitives/icons/notion.tsx new file mode 100644 index 00000000000..044ef10ebf3 --- /dev/null +++ b/packages/ui/src/primitives/icons/notion.tsx @@ -0,0 +1,33 @@ +import { Icon, type IconProps } from './icon'; + +export default function Notion(props: IconProps) { + return ( + + + + + + + + + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/pen-sm.tsx b/packages/ui/src/primitives/icons/pen-sm.tsx new file mode 100644 index 00000000000..1ec14d2e87e --- /dev/null +++ b/packages/ui/src/primitives/icons/pen-sm.tsx @@ -0,0 +1,17 @@ +import { Icon, type IconProps } from './icon'; + +export default function PenSm(props: IconProps) { + return ( + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/providers.tsx b/packages/ui/src/primitives/icons/providers.tsx new file mode 100644 index 00000000000..3ee8be4e3ac --- /dev/null +++ b/packages/ui/src/primitives/icons/providers.tsx @@ -0,0 +1,64 @@ +import type { OAuthProvider, Web3Provider } from '@clerk/types'; + +import Apple from './apple'; +import Atlassian from './atlassian'; +import Bitbucket from './bitbucket'; +import Box from './box'; +import Coinbase from './coinbase'; +import CoinbaseWallet from './coinbase-wallet'; +import Discord from './discord'; +import Dropbox from './dropbox'; +import Enstall from './enstall'; +import Facebook from './facebook'; +import Github from './github'; +import Gitlab from './gitlab'; +import Google from './google'; +import Hubspot from './hubspot'; +import Huggingface from './huggingface'; +import Instagram from './instagram'; +import Line from './line'; +import Linear from './linear'; +import Linkedin from './linkedin'; +import Metamask from './metamask'; +import Microsoft from './microsoft'; +import Notion from './notion'; +import Slack from './slack'; +import Spotify from './spotify'; +import Tiktok from './tiktok'; +import Twitch from './twitch'; +import Twitter from './twitter'; +import X from './x'; +import Xero from './xero'; + +export const PROVIDERS: Record = { + apple: , + atlassian: , + bitbucket: , + box: , + coinbase_wallet: , + coinbase: , + discord: , + dropbox: , + enstall: , + facebook: , + github: , + gitlab: , + google: , + hubspot: , + huggingface: , + instagram: , + line: , + linear: , + linkedin_oidc: , + linkedin: , + metamask: , + microsoft: , + notion: , + slack: , + spotify: , + tiktok: , + twitch: , + twitter: , + x: , + xero: , +}; diff --git a/packages/ui/src/primitives/icons/right-arrow-sm.tsx b/packages/ui/src/primitives/icons/right-arrow-sm.tsx new file mode 100644 index 00000000000..658d58e4e9a --- /dev/null +++ b/packages/ui/src/primitives/icons/right-arrow-sm.tsx @@ -0,0 +1,14 @@ +import { Icon, type IconProps } from './icon'; + +export default function RightArrowSm(props: IconProps) { + return ( + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/slack.tsx b/packages/ui/src/primitives/icons/slack.tsx new file mode 100644 index 00000000000..88b5fa39609 --- /dev/null +++ b/packages/ui/src/primitives/icons/slack.tsx @@ -0,0 +1,53 @@ +import { Icon, type IconProps } from './icon'; + +export default function Slack(props: IconProps) { + return ( + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/sms-sm.tsx b/packages/ui/src/primitives/icons/sms-sm.tsx new file mode 100644 index 00000000000..e085e784aef --- /dev/null +++ b/packages/ui/src/primitives/icons/sms-sm.tsx @@ -0,0 +1,14 @@ +import { Icon, type IconProps } from './icon'; + +export default function SmsSm(props: IconProps) { + return ( + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/spinner-lg.tsx b/packages/ui/src/primitives/icons/spinner-lg.tsx new file mode 100644 index 00000000000..3349dd14828 --- /dev/null +++ b/packages/ui/src/primitives/icons/spinner-lg.tsx @@ -0,0 +1,14 @@ +import { Icon, type IconProps } from './icon'; + +export default function SpinnerLg(props: IconProps) { + return ( + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/spotify.tsx b/packages/ui/src/primitives/icons/spotify.tsx new file mode 100644 index 00000000000..0bca283eaa3 --- /dev/null +++ b/packages/ui/src/primitives/icons/spotify.tsx @@ -0,0 +1,14 @@ +import { Icon, type IconProps } from './icon'; + +export default function Spotify(props: IconProps) { + return ( + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/switch-arrows-lg.tsx b/packages/ui/src/primitives/icons/switch-arrows-lg.tsx new file mode 100644 index 00000000000..9a53fe21b18 --- /dev/null +++ b/packages/ui/src/primitives/icons/switch-arrows-lg.tsx @@ -0,0 +1,16 @@ +import { Icon, type IconProps } from './icon'; + +export default function SwitchArrowslg(props: IconProps) { + return ( + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/tick-shield-lg.tsx b/packages/ui/src/primitives/icons/tick-shield-lg.tsx new file mode 100644 index 00000000000..03020b0fdf2 --- /dev/null +++ b/packages/ui/src/primitives/icons/tick-shield-lg.tsx @@ -0,0 +1,16 @@ +import { Icon, type IconProps } from './icon'; + +export default function TickShieldlg(props: IconProps) { + return ( + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/tiktok.tsx b/packages/ui/src/primitives/icons/tiktok.tsx new file mode 100644 index 00000000000..1980e23259d --- /dev/null +++ b/packages/ui/src/primitives/icons/tiktok.tsx @@ -0,0 +1,49 @@ +import { Icon, type IconProps } from './icon'; + +export default function Tiktok(props: IconProps) { + return ( + + + + + + + + + + + + + + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/twitch.tsx b/packages/ui/src/primitives/icons/twitch.tsx new file mode 100644 index 00000000000..f0e0ad93d14 --- /dev/null +++ b/packages/ui/src/primitives/icons/twitch.tsx @@ -0,0 +1,26 @@ +import { Icon, type IconProps } from './icon'; + +export default function Twitch(props: IconProps) { + return ( + + + + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/twitter.tsx b/packages/ui/src/primitives/icons/twitter.tsx new file mode 100644 index 00000000000..3006f922cad --- /dev/null +++ b/packages/ui/src/primitives/icons/twitter.tsx @@ -0,0 +1,14 @@ +import { Icon, type IconProps } from './icon'; + +export default function Twitter(props: IconProps) { + return ( + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/x.tsx b/packages/ui/src/primitives/icons/x.tsx new file mode 100644 index 00000000000..bf1ffc7a124 --- /dev/null +++ b/packages/ui/src/primitives/icons/x.tsx @@ -0,0 +1,25 @@ +import { Icon, type IconProps } from './icon'; + +export default function X(props: IconProps) { + return ( + + + + + + + + + + + + + ); +} diff --git a/packages/ui/src/primitives/icons/xero.tsx b/packages/ui/src/primitives/icons/xero.tsx new file mode 100644 index 00000000000..12b88c607c1 --- /dev/null +++ b/packages/ui/src/primitives/icons/xero.tsx @@ -0,0 +1,60 @@ +import { Icon, type IconProps } from './icon'; + +export default function Xero(props: IconProps) { + return ( + + + + + + + + + + + + + + + + + + + + + + + ); +}