fix(clerk-js): Fix ApplyVariants and other tsc related errors (#601)

* fix(clerk-js): Correctly track custom emotion theme type

* fix(clerk-js): Remove unused React imports and ts-ignores

* fix(clerk-js): Fix the ApplyVariants build error

* fix(clerk-js): Remove unused imports

* chore(clerk-js): Small tsconfig cleanup

Co-authored-by: Nikos Douvlis <nikosdouvlis@gmail.com>

Author: desiprisg

packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganization.tsx

@@ -1,5 +1,4 @@
 import { CreateOrganizationProps } from '@clerk/types';
-import React from 'react';
 
 import { withOrganizationsEnabledGuard } from '../../common';
 import { ComponentContext, withCoreUserGuard } from '../../contexts';

packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationSettings.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { useCoreOrganization } from '../../contexts';
 import { Col, descriptors, Flex, Icon, localizationKeys } from '../../customizables';
 import { Header, IconButton, NavbarMenuButtonRow, OrganizationPreview, ProfileSection } from '../../elements';

packages/clerk-js/src/ui/components/SignIn/HavingTrouble.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { localizationKeys } from '../../customizables';
 import { ErrorCard } from '../../elements';
 import { PropsOfComponent } from '../../styledSystem';

packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { withRedirectToHome } from '../../common/withRedirectToHome';
 import { useEnvironment, useSignInContext } from '../../contexts';
 import { Button, Col, descriptors, Flow, Icon } from '../../customizables';

packages/clerk-js/src/ui/components/SignIn/SignInFactorOneEmailCodeCard.tsx

@@ -1,5 +1,4 @@
 import { EmailCodeFactor } from '@clerk/types';
-import React from 'react';
 
 import { useEnvironment } from '../../contexts';
 import { Flow, localizationKeys } from '../../customizables';

packages/clerk-js/src/ui/components/SignIn/SignInFactorOneEmailLinkCard.tsx

@@ -21,7 +21,6 @@ export const SignInFactorOneEmailLinkCard = (props: SignInFactorOneEmailLinkCard
   const card = useCardState();
   const signIn = useCoreSignIn();
   const signInContext = useSignInContext();
-  const { displayConfig } = useEnvironment();
   const { signInUrl } = useEnvironment().displayConfig;
   const { navigate } = useRouter();
   const { navigateAfterSignIn } = useSignInContext();

packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePhoneCodeCard.tsx

@@ -1,5 +1,4 @@
 import { PhoneCodeFactor } from '@clerk/types';
-import React from 'react';
 
 import { useEnvironment } from '../../contexts';
 import { Flow, localizationKeys } from '../../customizables';

packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoPhoneCodeCard.tsx

@@ -1,5 +1,4 @@
 import { PhoneCodeFactor } from '@clerk/types';
-import React from 'react';
 
 import { useCoreSignIn } from '../../contexts';
 import { Flow, localizationKeys } from '../../customizables';

packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoTOTPCard.tsx

@@ -1,5 +1,4 @@
 import { TOTPFactor } from '@clerk/types';
-import React from 'react';
 
 import { Flow, localizationKeys } from '../../customizables';
 import { SignInFactorTwoCodeCard, SignInFactorTwoCodeForm } from './SignInFactorTwoCodeForm';

packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx

@@ -25,7 +25,7 @@ import { SignInSocialButtons } from './SignInSocialButtons';
 export function _SignInStart(): JSX.Element {
   const card = useCardState();
   const status = useLoadingStatus();
-  const { userSettings, displayConfig } = useEnvironment();
+  const { userSettings } = useEnvironment();
   const { setActive } = useCoreClerk();
   const signIn = useCoreSignIn();
   const { navigate } = useNavigate();

packages/clerk-js/src/ui/components/SignUp/SignUpEmailCodeCard.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 
-import { useCoreSignUp, useEnvironment } from '../../contexts';
+import { useCoreSignUp } from '../../contexts';
 import { Flow, localizationKeys } from '../../customizables';
 import { SignUpVerificationCodeForm } from './SignUpVerificationCodeForm';
 
 export const SignUpEmailCodeCard = () => {
-  const { displayConfig } = useEnvironment();
   const signUp = useCoreSignUp();
 
   React.useEffect(() => {

packages/clerk-js/src/ui/components/SignUp/SignUpPhoneCodeCard.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 
-import { useCoreSignUp, useEnvironment } from '../../contexts';
+import { useCoreSignUp } from '../../contexts';
 import { Flow, localizationKeys } from '../../customizables';
 import { withCardStateProvider } from '../../elements';
 import { SignUpVerificationCodeForm } from './SignUpVerificationCodeForm';
 
 export const SignUpPhoneCodeCard = withCardStateProvider(() => {
-  const { displayConfig } = useEnvironment();
   const signUp = useCoreSignUp();
 
   React.useEffect(() => {

packages/clerk-js/src/ui/components/SignUp/SignUpVerificationCodeForm.tsx

@@ -1,5 +1,4 @@
 import { SignUpResource } from '@clerk/types';
-import React from 'react';
 
 import { useCoreClerk, useSignUpContext } from '../../contexts';
 import { LocalizationKey } from '../../customizables';

packages/clerk-js/src/ui/components/SignUp/SignUpVerifyEmail.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { useEnvironment } from '../../contexts';
 import { withCardStateProvider } from '../../elements';
 import { SignUpEmailCodeCard } from './SignUpEmailCodeCard';

packages/clerk-js/src/ui/components/SignUp/SignUpVerifyPhone.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { SignUpPhoneCodeCard } from './SignUpPhoneCodeCard';
 
 export const SignUpVerifyPhone = () => {

packages/clerk-js/src/ui/components/UserButton/OtherSessionActions.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Button, Flex, Icon } from '../../customizables';
 import { Actions, UserPreview, UserPreviewProps } from '../../elements';
 import { useCardState } from '../../elements/contexts';

packages/clerk-js/src/ui/components/UserButton/UserButton.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { useCoreUser, useUserButtonContext, withCoreUserGuard } from '../../contexts';
 import { descriptors, Flex, Flow, Text } from '../../customizables';
 import { Popover, withCardStateProvider, withFloatingTree } from '../../elements';

packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeAccordion.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Col, Icon, localizationKeys, useLocalizations } from '../../customizables';
 import { useNavigate } from '../../hooks';
 import { DotCircle } from '../../icons';

packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeList.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { PrintableComponent, usePrintable } from '../../common';
 import { useCoreUser, useEnvironment } from '../../contexts';
 import { Button, Col, Flex, Grid, Heading, LocalizationKey, localizationKeys, Text } from '../../customizables';

packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeTile.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Flex, Text } from '../../customizables';
 
 export const MfaBackupCodeTile = (props: { code: string }) => {

packages/clerk-js/src/ui/components/UserProfile/MfaPhoneCodeAccordion.tsx

@@ -1,5 +1,4 @@
 import { PhoneNumberResource } from '@clerk/types';
-import React from 'react';
 
 import { Badge, Col, Icon, localizationKeys } from '../../customizables';
 import { FormattedPhoneNumberText, useCardState } from '../../elements';

packages/clerk-js/src/ui/components/UserProfile/MfaTOTPAccordion.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Badge, Col, Icon, localizationKeys, useLocalizations } from '../../customizables';
 import { useNavigate } from '../../hooks';
 import { AuthApp } from '../../icons';

packages/clerk-js/src/ui/components/UserProfile/RootPage.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { useEnvironment } from '../../contexts';
 import { Col, descriptors, localizationKeys } from '../../customizables';
 import { CardAlert, Header, useCardState, withCardStateProvider } from '../../elements';

packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { ProfileCardContent } from '../../elements';
 import { Route, Switch } from '../../router';
 import { PropsOfComponent } from '../../styledSystem';

packages/clerk-js/src/ui/contexts/CoreClientContext.tsx

@@ -1,6 +1,5 @@
 import { assertContextExists, ClientContext, useClientContext } from '@clerk/shared';
 import { SessionResource, SignInResource, SignUpResource } from '@clerk/types';
-import React from 'react';
 
 export const CoreClientContext = ClientContext;
 

packages/clerk-js/src/ui/elements/BackLink.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Flex, Icon, localizationKeys, Text } from '../customizables';
 import { ElementDescriptor } from '../customizables/elementDescriptors';
 import { ArrowLeftIcon } from '../icons';

packages/clerk-js/src/ui/elements/ClipboardInput.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Button, descriptors, Flex, Icon, Input } from '../customizables';
 import { useClipboard } from '../hooks';
 import { Clipboard, TickShield } from '../icons';

packages/clerk-js/src/ui/elements/FileDropArea.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Button, Col, descriptors, Flex, Icon, localizationKeys, Text } from '../customizables';
+import { Button, Col, descriptors, localizationKeys, Text } from '../customizables';
 import { Folder } from '../icons';
 import { animations, mqu } from '../styledSystem';
 import { colors } from '../utils';

packages/clerk-js/src/ui/elements/FormButtons.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Flex } from '../customizables';
 import { LocalizationKey, localizationKeys } from '../localization';
 import { PropsOfComponent } from '../styledSystem';

packages/clerk-js/src/ui/elements/FormattedPhoneNumber.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { descriptors, Flex, Text } from '../customizables';
 import { PropsOfComponent } from '../styledSystem';
 import { getFlagEmojiFromCountryIso, parsePhoneString, stringToFormattedPhoneString } from '../utils';

packages/clerk-js/src/ui/elements/FullHeightLoader.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Flex, Spinner } from '../customizables';
 
 export const FullHeightLoader = (): JSX.Element => {

packages/clerk-js/src/ui/elements/LoadingCard.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { descriptors, Flex } from '../customizables';
 import { Spinner } from '../primitives';
 import { CardAlert } from './Alert';

packages/clerk-js/src/ui/elements/NavigateToFlowStartButton.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Button } from '../customizables';
 import { useRouter } from '../router';
 import { PropsOfComponent } from '../styledSystem';

packages/clerk-js/src/ui/elements/Pagination.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 import { Button, Flex, localizationKeys, Text } from '../customizables';
 import { mqu, PropsOfComponent } from '../styledSystem';

packages/clerk-js/src/ui/elements/PasswordInput.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { descriptors, Flex, Icon, Input } from '../customizables';
+import { descriptors, Flex, Input } from '../customizables';
 import { EyeSlash } from '../icons';
 import { PropsOfComponent } from '../styledSystem';
 import { IconButton } from './IconButton';

packages/clerk-js/src/ui/elements/PhoneInput/countryCodeData.ts

@@ -4,8 +4,6 @@ export type CountryIso = CountryCodeData[number][1];
 export type DialingCode = CountryCodeData[number][2];
 export type PhonePattern = CountryCodeData[number][3] | '';
 
-type PositionalCountryType = [CountryName, CountryIso, DialingCode, PhonePattern?];
-
 const data = [
   ['United States', 'us', '1', '(...) ...-....', 100],
   ['United Kingdom', 'gb', '44', '.... ......'],

packages/clerk-js/src/ui/elements/RootBox.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Col } from '../customizables';
 import { PropsOfComponent } from '../styledSystem';
 

packages/clerk-js/src/ui/elements/ThreeDotsMenu.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Button, Icon, LocalizationKey } from '../customizables';
 import { ThreeDots } from '../icons';
 import { Menu, MenuItem, MenuList, MenuTrigger } from './Menu';

packages/clerk-js/src/ui/elements/UserAvatar.tsx

@@ -1,5 +1,4 @@
 import { UserResource } from '@clerk/types';
-import React from 'react';
 
 import { Avatar } from '../elements';
 import { PropsOfComponent } from '../styledSystem';

packages/clerk-js/src/ui/primitives/Alert.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { common, createVariants, StyleVariants } from '../styledSystem';
 import { Flex, FlexProps } from './Flex';
 

packages/clerk-js/src/ui/primitives/AlertIcon.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { ExclamationCircle, ExclamationTriangle } from '../icons';
 import { createVariants, StyleVariants } from '../styledSystem';
 
@@ -21,7 +19,6 @@ const { applyVariants, filterProps } = createVariants(theme => ({
 
 type OwnProps = { variant: 'danger' | 'warning' };
 
-// @ts-ignore
 export type AlertIconProps = OwnProps & StyleVariants<typeof applyVariants>;
 
 export const AlertIcon = (props: AlertIconProps): JSX.Element => {

packages/clerk-js/src/ui/primitives/Badge.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { common, createCssVariables, createVariants, PropsOfComponent, StyleVariants } from '../styledSystem';
 import { colors } from '../utils';
 import { Flex } from './Flex';

packages/clerk-js/src/ui/primitives/Box.tsx

@@ -10,7 +10,6 @@ const { applyVariants } = createVariants(() => ({
   variants: {},
 }));
 
-// @ts-ignore
 export type BoxProps = StateProps & PrimitiveProps<'div'> & AsProp & StyleVariants<typeof applyVariants>;
 
 export const Box = React.forwardRef<HTMLDivElement, BoxProps>((props, ref) => {

packages/clerk-js/src/ui/primitives/Form.tsx

@@ -11,7 +11,7 @@ export const Form = React.forwardRef<HTMLFormElement, FormProps>((props, ref) =>
       direction='col'
       as='form'
       {...props}
-      // @ts-ignore
+      // @ts-expect-error
       ref={ref}
     />
   );

packages/clerk-js/src/ui/primitives/Grid.tsx

@@ -49,7 +49,6 @@ const { applyVariants, filterProps } = createVariants(theme => ({
   },
 }));
 
-// @ts-ignore
 export type GridProps = StateProps & BoxProps & StyleVariants<typeof applyVariants>;
 
 export const Grid = React.forwardRef<HTMLDivElement, GridProps>((props, ref) => {

packages/clerk-js/src/ui/primitives/Heading.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { common, createVariants, PrimitiveProps, StyleVariants } from '../styledSystem';
 
 const { applyVariants, filterProps } = createVariants(theme => ({

packages/clerk-js/src/ui/primitives/Icon.tsx

@@ -30,7 +30,7 @@ export const Icon = (props: IconProps): JSX.Element => {
   return (
     <Icon
       {...filterProps(rest)}
-      // @ts-ignore
+      // @ts-expect-error
       css={applyVariants(props)}
     />
   );

packages/clerk-js/src/ui/primitives/Spinner.tsx

@@ -1,6 +1,3 @@
-// eslint-disable-next-line no-restricted-imports
-import React from 'react';
-
 import { animations, createCssVariables, createVariants, PrimitiveProps, StyleVariants } from '../styledSystem';
 
 const { size, thickness, speed } = createCssVariables('speed', 'size', 'thickness');

packages/clerk-js/src/ui/primitives/Text.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { common, createVariants, PrimitiveProps, StyleVariants } from '../styledSystem';
 import { applyDataStateProps } from './applyDataStateProps';
 
@@ -46,7 +44,6 @@ export type TextProps = PrimitiveProps<'p'> & { isDisabled?: boolean } & StyleVa
 export const Text = (props: TextProps): JSX.Element => {
   const { as: As = 'p', ...rest } = props;
   return (
-    // @ts-ignore
     <As
       {...applyDataStateProps(filterProps(rest))}
       css={applyVariants(props)}

packages/clerk-js/src/ui/styledSystem/createVariants.ts

@@ -25,9 +25,9 @@ type CreateVariantsConfig<V> = {
   defaultVariants?: DefaultVariants<V>;
 };
 
-interface ApplyVariants<T, V> {
+type ApplyVariants<T, V> = {
   (props?: VariantNameToKeyMap<V>): (theme: T) => StyleRule;
-}
+};
 
 export type StyleVariants<T extends () => any> = Parameters<T>[0];
 

packages/clerk-js/src/ui/styledSystem/theme.ts packages/clerk-js/src/ui/styledSystem/emotion.d.ts

@@ -9,7 +9,5 @@
     "sourceMap": false,
     "outDir": "./dist",
     "declarationDir": "./dist/types"
-  },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "**/*.test.ts", "**/*.test.tsx"]
+  }
 }

packages/clerk-js/tsconfig.declarations.json

@@ -27,7 +27,7 @@
     "src/index.browser.ts",
     "src/index.headless.ts",
     "src/index.headless.browser.ts",
-    "**/*.d.ts"
+    "src/**/*.d.ts"
   ],
   "exclude": ["node_modules", "**/*.test.ts", "**/*.test.tsx"]
 }

packages/clerk-js/tsconfig.json

@@ -1,8 +1,5 @@
 {
   "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "noImplicitReturns": false
-  },
   "include": ["src/**/*", "./setupJestAfterEnv.ts"],
   "exclude": ["node_modules"]
 }