chore(clerk-js,clerk-react): Share createContextAndHook

packages/clerk-js/src/ui/customizables/AppearanceContext.tsx

@@ -1,7 +1,7 @@
+import { createContextAndHook } from '@clerk/shared';
 import React from 'react';
 
 import { useDeepEqualMemo } from '../hooks';
-import { createContextAndHook } from '../utils';
 import { AppearanceCascade, parseAppearance, ParsedAppearance } from './parseAppearance';
 
 type AppearanceContextValue = ParsedAppearance;

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { Button, descriptors, Flex, Form as FormPrim, localizationKeys } from '../customizables';
 import { useLoadingStatus } from '../hooks';
 import { PropsOfComponent } from '../styledSystem';
-import { createContextAndHook } from '../utils';
+import { createContextAndHook } from '@clerk/shared';
 import { useCardState } from './contexts';
 import { FormControl } from './FormControl';
 

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

@@ -1,6 +1,6 @@
 import React, { cloneElement, isValidElement, PropsWithChildren, useEffect, useRef } from 'react';
 
-import { createContextAndHook } from '../../ui/utils';
+import { createContextAndHook } from '@clerk/shared';
 import { Button, Col } from '../customizables';
 import { usePopover, UsePopoverReturn } from '../hooks';
 import { animations, PropsOfComponent } from '../styledSystem';

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

@@ -1,3 +1,4 @@
+import { createContextAndHook } from '@clerk/shared';
 import React from 'react';
 
 import { useNavigateToFlowStart } from '../components/UserProfile/NavigateToFlowStartButton';
@@ -15,7 +16,7 @@ import { ElementDescriptor, ElementId } from '../customizables/elementDescriptor
 import { useNavigate, usePopover, useSafeLayoutEffect } from '../hooks';
 import { Menu } from '../icons';
 import { animations, mqu, PropsOfComponent } from '../styledSystem';
-import { colors, createContextAndHook } from '../utils';
+import { colors } from '../utils';
 
 type NavbarContextValue = { isOpen: boolean; open: () => void; close: () => void };
 export const [NavbarContext, useNavbarContext] = createContextAndHook<NavbarContextValue>('NavbarContext');

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

@@ -1,10 +1,11 @@
-import React, { isValidElement, PropsWithChildren, useState } from 'react';
+import { createContextAndHook } from '@clerk/shared';
+import React, {  PropsWithChildren, useState } from 'react';
 
 import { usePopover, useSearchInput } from '../../ui/hooks';
 import { Button, Flex, Icon, Text } from '../customizables';
 import { Caret, MagnifyingGlass } from '../icons';
 import { animations, common, PropsOfComponent, ThemableCssProp } from '../styledSystem';
-import { colors, createContextAndHook } from '../utils';
+import { colors } from '../utils';
 import { InputWithIcon } from './InputWithIcon';
 
 type UsePopoverReturn = ReturnType<typeof usePopover>;

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

@@ -1,8 +1,9 @@
+import { createContextAndHook } from '@clerk/shared';
 import React from 'react';
 
 import { Button, Col, Flex } from '../customizables';
 import { PropsOfComponent } from '../styledSystem';
-import { createContextAndHook, getValidChildren } from '../utils';
+import { getValidChildren } from '../utils';
 
 type TabsContextValue = {
   selectedIndex: number;

packages/clerk-js/src/ui/elements/contexts/CardStateContext.tsx

@@ -1,9 +1,9 @@
+import { createContextAndHook } from '@clerk/shared';
 import { ClerkAPIError } from '@clerk/types';
 import React from 'react';
 
 import { useLocalizations } from '../../customizables';
 import { useSafeState } from '../../hooks';
-import { createContextAndHook } from '../../utils';
 
 type Status = 'idle' | 'loading' | 'error';
 type Metadata = string | undefined;

packages/clerk-js/src/ui/elements/contexts/FlowMetadataContext.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { createContextAndHook } from '../../utils';
+import { createContextAndHook } from '@clerk/shared';
 
 type FlowMetadata = {
   flow: 'signIn' | 'signUp' | 'userButton' | 'userProfile' | 'organizationProfile' | 'organizationSwitcher';

packages/clerk-js/src/ui/primitives/hooks/useFormControl.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { createContextAndHook } from '../../utils';
+import { createContextAndHook } from '@clerk/shared';
 
 export type FormControlProps = {
   /**

packages/clerk-js/src/ui/utils/index.ts

@@ -1,6 +1,5 @@
 export * from './fromEntries';
 export * from './containsAllOf';
-export * from './createContextAndHook';
 export * from './createInfiniteAccessProxy';
 export * from './fastDeepMerge';
 export * from './colors';

packages/react/package.json

@@ -30,6 +30,7 @@
   },
   "dependencies": {
     "@clerk/types": "^3.13.0",
+    "@clerk/shared": "^0.4.1",
     "swr": "^1.3.0",
     "tslib": "^2.3.1"
   },

packages/react/src/contexts/AuthContext.ts

@@ -1,8 +1,7 @@
+import { createContextAndHook } from '@clerk/shared';
 import type { ActJWTClaim } from '@clerk/types';
 
-import { makeContextAndHook } from '../utils/makeContextAndHook';
-
-export const [AuthContext, useAuthContext] = makeContextAndHook<{
+export const [AuthContext, useAuthContext] = createContextAndHook<{
   userId: string | null | undefined;
   sessionId: string | null | undefined;
   actor: ActJWTClaim | null;

packages/react/src/contexts/ClientContext.tsx

@@ -1,9 +1,9 @@
+import { createContextAndHook } from '@clerk/shared';
 import { ClientResource } from '@clerk/types';
-import React from 'react';
-
-import { makeContextAndHook } from '../utils/makeContextAndHook';
 
 /**
  * @internal
  */
-export const [ClientContext, useClientContext] = makeContextAndHook<ClientResource | undefined | null>('ClientContext');
+export const [ClientContext, useClientContext] = createContextAndHook<ClientResource | undefined | null>(
+  'ClientContext',
+);

packages/react/src/contexts/IsomorphicClerkContext.tsx

@@ -1,8 +1,9 @@
+import { createContextAndHook } from '@clerk/shared';
+
 import IsomorphicClerk from '../isomorphicClerk';
-import { makeContextAndHook } from '../utils/makeContextAndHook';
 
 /**
  * @internal
  */
 export const [IsomorphicClerkContext, useIsomorphicClerkContext] =
-  makeContextAndHook<IsomorphicClerk>('IsomorphicClerkContext');
+  createContextAndHook<IsomorphicClerk>('IsomorphicClerkContext');

packages/react/src/contexts/OrganizationContext.tsx

@@ -1,11 +1,10 @@
+import { createContextAndHook } from '@clerk/shared';
 import { OrganizationInvitationResource, OrganizationMembershipResource, OrganizationResource } from '@clerk/types';
 
-import { makeContextAndHook } from '../utils/makeContextAndHook';
-
 /**
  * @internal
  */
-export const [OrganizationContext, useOrganizationContext] = makeContextAndHook<{
+export const [OrganizationContext, useOrganizationContext] = createContextAndHook<{
   organization: OrganizationResource | null | undefined;
   lastOrganizationInvitation: OrganizationInvitationResource | null | undefined;
   lastOrganizationMember: OrganizationMembershipResource | null | undefined;

packages/react/src/contexts/SessionContext.tsx

@@ -1,10 +1,9 @@
+import { createContextAndHook } from '@clerk/shared';
 import { ActiveSessionResource } from '@clerk/types';
 
-import { makeContextAndHook } from '../utils/makeContextAndHook';
-
 /**
  * @internal
  */
-export const [SessionContext, useSessionContext] = makeContextAndHook<ActiveSessionResource | null | undefined>(
+export const [SessionContext, useSessionContext] = createContextAndHook<ActiveSessionResource | null | undefined>(
   'SessionContext',
 );

packages/react/src/contexts/UserContext.tsx

@@ -1,8 +1,7 @@
+import { createContextAndHook } from '@clerk/shared';
 import { UserResource } from '@clerk/types';
 
-import { makeContextAndHook } from '../utils/makeContextAndHook';
-
 /**
  * @internal
  */
-export const [UserContext, useUserContext] = makeContextAndHook<UserResource | null | undefined>('UserContext');
+export const [UserContext, useUserContext] = createContextAndHook<UserResource | null | undefined>('UserContext');

packages/shared/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from './createContextAndHook';

packages/shared/src/index.ts

@@ -1 +1,2 @@
 export * from './utils';
+export * from './hooks';