Move to shared styles

Author: LauraBeatris

packages/clerk-js/src/ui/Components.tsx

@@ -351,7 +351,7 @@ const Components = (props: ComponentsProps) => {
     };
 
     componentsControls.openModal = (name, props) => {
-      // Prevent opening enableOrganizations modal if it's already open
+      // Prevent opening enableOrganizations prompt if it's already open
       // to avoid duplicate mounting when component is called multiple times
       if (name === 'enableOrganizationsPrompt') {
         setState(s => {

packages/clerk-js/src/ui/components/EnableOrganizationsPrompt/index.tsx renamed to packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx

@@ -1,61 +1,9 @@
-import { css } from '@emotion/react';
-
 import { Modal } from '@/ui/elements/Modal';
 import { InternalThemeProvider } from '@/ui/styledSystem';
 
-import { Button, Flex } from '../../customizables';
-import { Portal } from '../../elements/Portal';
-
-const baseElementStyles = css`
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  background: none;
-  border: none;
-  line-height: 1.5;
-  font-family:
-    -apple-system,
-    BlinkMacSystemFont,
-    avenir next,
-    avenir,
-    segoe ui,
-    helvetica neue,
-    helvetica,
-    Cantarell,
-    Ubuntu,
-    roboto,
-    noto,
-    arial,
-    sans-serif;
-  text-decoration: none;
-`;
-
-const mainCTAStyles = css`
-  ${baseElementStyles};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 1.75rem;
-  max-width: 14.625rem;
-  padding: 0.25rem 0.625rem;
-  border-radius: 0.375rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-  letter-spacing: 0.12px;
-  color: 'white';
-  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.32);
-  white-space: nowrap;
-  user-select: none;
-  cursor: pointer;
-  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.05) 100%), #454545;
-  box-shadow:
-    0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
-    0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
-    0px 0px 0px 1px rgba(0, 0, 0, 0.12),
-    0px 1.5px 2px 0px rgba(0, 0, 0, 0.48),
-    0px 0px 4px 0px rgba(243, 107, 22, 0) inset;
-`;
+import { Button, Flex } from '../../../customizables';
+import { Portal } from '../../../elements/Portal';
+import { basePromptElementStyles, PromptContainer } from '../shared';
 
 type EnableOrganizationsPromptProps = {
   callerString: string;
@@ -68,25 +16,7 @@ const EnableOrganizationsPromptInternal = (_props: EnableOrganizationsPromptProp
         canCloseModal={false}
         contentSx={() => ({ animation: 'unset' })}
       >
-        <Flex
-          sx={t => ({
-            position: 'fixed',
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
-            flexDirection: 'column',
-            gap: t.space.$1,
-            width: 'fit-content',
-            maxWidth: '25rem',
-            borderRadius: '1.25rem',
-            overflow: 'hidden',
-            fontFamily: t.fonts.$main,
-            background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f',
-            boxShadow:
-              '0px 0px 0px 0.5px #2F3037 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset, 0px 0px 0.8px 0.8px rgba(255, 255, 255, 0.20) inset, 0px 0px 0px 0px rgba(255, 255, 255, 0.72), 0px 16px 36px -6px rgba(0, 0, 0, 0.36), 0px 6px 16px -2px rgba(0, 0, 0, 0.20);',
-            transition: 'all 195ms cubic-bezier(0.2, 0.61, 0.1, 1)',
-          })}
-        >
+        <PromptContainer>
           <Flex
             sx={t => ({
               display: 'flex',
@@ -137,7 +67,7 @@ const EnableOrganizationsPromptInternal = (_props: EnableOrganizationsPromptProp
 
               <h1
                 css={css`
-                  ${baseElementStyles};
+                  ${basePromptElementStyles};
                   color: white;
                   font-size: 0.9rem;
                   font-weight: 500;
@@ -149,7 +79,7 @@ const EnableOrganizationsPromptInternal = (_props: EnableOrganizationsPromptProp
 
             <p
               css={css`
-                ${baseElementStyles};
+                ${basePromptElementStyles};
                 color: #c3c3c6;
                 font-size: 0.88rem;
                 font-weight: 400;
@@ -159,7 +89,7 @@ const EnableOrganizationsPromptInternal = (_props: EnableOrganizationsPromptProp
               To use the{' '}
               <code
                 css={css`
-                  ${baseElementStyles};
+                  ${basePromptElementStyles};
                   color: white;
                 `}
               >
@@ -173,7 +103,7 @@ const EnableOrganizationsPromptInternal = (_props: EnableOrganizationsPromptProp
               <br />
               <a
                 css={css`
-                  ${baseElementStyles};
+                  ${basePromptElementStyles};
                   color: #a8a8ff;
                   font-size: inherit;
                   font-weight: 500;
@@ -217,7 +147,7 @@ const EnableOrganizationsPromptInternal = (_props: EnableOrganizationsPromptProp
               I&apos;ll remove it myself
             </Button>
           </Flex>
-        </Flex>
+        </PromptContainer>
       </Modal>
     </Portal>
   );

packages/clerk-js/src/ui/components/KeylessPrompt/ClerkLogoIcon.tsx renamed to packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/ClerkLogoIcon.tsx

@@ -5,9 +5,10 @@ import type { PropsWithChildren } from 'react';
 import { useEffect, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 
-import { Flex, Link } from '../../customizables';
-import { Portal } from '../../elements/Portal';
-import { InternalThemeProvider } from '../../styledSystem';
+import { Flex, Link } from '../../../customizables';
+import { Portal } from '../../../elements/Portal';
+import { InternalThemeProvider } from '../../../styledSystem';
+import { basePromptElementStyles, PromptContainer } from '../shared';
 import { ClerkLogoIcon } from './ClerkLogoIcon';
 import { KeySlashIcon } from './KeySlashIcon';
 import { useRevalidateEnvironment } from './use-revalidate-environment';
@@ -22,30 +23,6 @@ const buttonIdentifierPrefix = `--clerk-keyless-prompt`;
 const buttonIdentifier = `${buttonIdentifierPrefix}-button`;
 const contentIdentifier = `${buttonIdentifierPrefix}-content`;
 
-const baseElementStyles = css`
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  background: none;
-  border: none;
-  line-height: 1.5;
-  font-family:
-    -apple-system,
-    BlinkMacSystemFont,
-    avenir next,
-    avenir,
-    segoe ui,
-    helvetica neue,
-    helvetica,
-    Cantarell,
-    Ubuntu,
-    roboto,
-    noto,
-    arial,
-    sans-serif;
-  text-decoration: none;
-`;
-
 /**
  * If we cannot reconstruct the url properly, then simply fallback to Clerk Dashboard
  */
@@ -122,7 +99,7 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
   }, [_props.copyKeysUrl]);
 
   const mainCTAStyles = css`
-    ${baseElementStyles};
+    ${basePromptElementStyles};
     display: flex;
     align-items: center;
     justify-content: center;
@@ -150,22 +127,9 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
 
   return (
     <Portal>
-      <Flex
+      <PromptContainer
         data-expanded={isForcedExpanded}
-        sx={t => ({
-          position: 'fixed',
-          bottom: '1.25rem',
-          right: '1.25rem',
-          height: `${t.sizes.$10}`,
-          minWidth: '13.4rem',
-          paddingLeft: `${t.space.$3}`,
-          borderRadius: '1.25rem',
-          fontFamily: t.fonts.$main,
-          background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f',
-          boxShadow:
-            '0px 0px 0px 0.5px #2F3037 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset, 0px 0px 0.8px 0.8px rgba(255, 255, 255, 0.20) inset, 0px 0px 0px 0px rgba(255, 255, 255, 0.72), 0px 16px 36px -6px rgba(0, 0, 0, 0.36), 0px 6px 16px -2px rgba(0, 0, 0, 0.20);',
-          transition: 'all 195ms cubic-bezier(0.2, 0.61, 0.1, 1)',
-
+        containerSx={t => ({
           '&[data-expanded="false"]:hover': {
             background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f',
           },
@@ -192,7 +156,7 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
           id={buttonIdentifier}
           onClick={() => !claimed && setIsExpanded(prev => !prev)}
           css={css`
-            ${baseElementStyles};
+            ${basePromptElementStyles};
             width: 100%;
             display: flex;
             justify-content: space-between;
@@ -315,7 +279,7 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
                 success ? 'Claim completed' : claimed ? 'Missing environment keys' : 'Clerk is in keyless mode'
               }
               css={css`
-                ${baseElementStyles};
+                ${basePromptElementStyles};
                 color: #d9d9d9;
                 font-size: 0.875rem;
                 font-weight: 500;
@@ -532,7 +496,7 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
                       target='_blank'
                       rel='noopener noreferrer'
                       css={css`
-                        ${baseElementStyles};
+                        ${basePromptElementStyles};
                         color: #ffffff9e;
                         font-size: 0.75rem;
                         transition: color 120ms ease-out;
@@ -565,7 +529,7 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
               </Flex>
             ))}
         </Flex>
-      </Flex>
+      </PromptContainer>
       <BodyPortal>
         <a
           href={`#${buttonIdentifier}`}

packages/clerk-js/src/ui/components/KeylessPrompt/KeySlashIcon.tsx renamed to packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/KeySlashIcon.tsx

@@ -1,9 +1,9 @@
 import { useClerk } from '@clerk/shared/react';
 import { useEffect, useReducer, useRef } from 'react';
 
-import type { Clerk } from '../../../core/clerk';
-import type { Environment } from '../../../core/resources';
-import { useEnvironment } from '../../contexts';
+import type { Clerk } from '../../../../core/clerk';
+import type { Environment } from '../../../../core/resources';
+import { useEnvironment } from '../../../contexts';
 
 const THROTTLE_DURATION_MS = 10 * 1000;
 

packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx renamed to packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/index.tsx

@@ -0,0 +1,65 @@
+import { css } from '@emotion/react';
+import type { PropsWithChildren } from 'react';
+
+import { Flex } from '@/ui/customizables';
+import type { ThemableCssProp } from '@/ui/styledSystem';
+
+type PromptContainerProps = PropsWithChildren<{
+  containerSx?: ThemableCssProp;
+}>;
+
+/**
+ * A container for prompt components
+ * @internal
+ */
+export function PromptContainer({ containerSx }: PromptContainerProps) {
+  return (
+    <Flex
+      sx={t => [
+        {
+          position: 'fixed',
+          bottom: '1.25rem',
+          right: '1.25rem',
+          height: `${t.sizes.$10}`,
+          minWidth: '13.4rem',
+          paddingLeft: `${t.space.$3}`,
+          borderRadius: '1.25rem',
+          fontFamily: t.fonts.$main,
+          background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f',
+          boxShadow:
+            '0px 0px 0px 0.5px #2F3037 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset, 0px 0px 0.8px 0.8px rgba(255, 255, 255, 0.20) inset, 0px 0px 0px 0px rgba(255, 255, 255, 0.72), 0px 16px 36px -6px rgba(0, 0, 0, 0.36), 0px 6px 16px -2px rgba(0, 0, 0, 0.20);',
+          transition: 'all 195ms cubic-bezier(0.2, 0.61, 0.1, 1)',
+        },
+        containerSx,
+      ]}
+    />
+  );
+}
+
+/**
+ * Base styles for prompt elements, such as links, buttons, etc.
+ * @internal
+ */
+export const basePromptElementStyles = css`
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: none;
+  border: none;
+  line-height: 1.5;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    avenir next,
+    avenir,
+    segoe ui,
+    helvetica neue,
+    helvetica,
+    Cantarell,
+    Ubuntu,
+    roboto,
+    noto,
+    arial,
+    sans-serif;
+  text-decoration: none;
+`;

packages/clerk-js/src/ui/components/KeylessPrompt/use-revalidate-environment.ts renamed to packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/use-revalidate-environment.ts

@@ -17,7 +17,7 @@ const componentImportPaths = {
   BlankCaptchaModal: () => import(/* webpackChunkName: "blankcaptcha" */ './../components/BlankCaptchaModal'),
   UserVerification: () => import(/* webpackChunkName: "userverification" */ './../components/UserVerification'),
   Waitlist: () => import(/* webpackChunkName: "waitlist" */ './../components/Waitlist'),
-  KeylessPrompt: () => import(/* webpackChunkName: "keylessPrompt" */ '../components/KeylessPrompt'),
+  KeylessPrompt: () => import(/* webpackChunkName: "keylessPrompt" */ '../components/devPrompts/KeylessPrompt'),
   PricingTable: () => import(/* webpackChunkName: "pricingTable" */ '../components/PricingTable'),
   Checkout: () => import(/* webpackChunkName: "checkout" */ '../components/Checkout'),
   SessionTasks: () => import(/* webpackChunkName: "sessionTasks" */ '../components/SessionTasks'),
@@ -28,7 +28,7 @@ const componentImportPaths = {
   APIKeys: () => import(/* webpackChunkName: "apiKeys" */ '../components/ApiKeys/ApiKeys'),
   OAuthConsent: () => import(/* webpackChunkName: "oauthConsent" */ '../components/OAuthConsent/OAuthConsent'),
   EnableOrganizationsPrompt: () =>
-    import(/* webpackChunkName: "enableOrganizationsPrompt" */ '../components/EnableOrganizationsPrompt'),
+    import(/* webpackChunkName: "enableOrganizationsPrompt" */ '../components/devPrompts/EnableOrganizationsPrompt'),
 } as const;
 
 export const SignIn = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignIn })));

packages/clerk-js/src/ui/components/devPrompts/shared.tsx

@@ -17,8 +17,7 @@ export function getCurrentOrganizationMembership(
 }
 
 /**
- * Wraps a hook function in a check to see if organization settings is enabled
- *
+ * Wraps a function in a check to see if organization settings is enabled
  * If not enabled, it will open a dialog with a prompt to enable organizations
  *
  * @internal

packages/clerk-js/src/ui/lazyModules/components.ts

@@ -1,7 +1,8 @@
-import './globals.css';
-import { Inter } from 'next/font/google';
-import { ClerkProvider } from '@clerk/nextjs';
 import { Links } from '@/common/Links';
+import { ClerkProvider } from '@clerk/nextjs';
+import { Inter } from 'next/font/google';
+import './globals.css';
+import { Test } from './test';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -13,10 +14,11 @@ export const metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   // console.log(auth());
   return (
-    <ClerkProvider clerkJSUrl={'https://js.lclclerk.com/npm/clerk.browser.js'}>
+    <ClerkProvider clerkJSUrl={'http://localhost:4000/npm/clerk.browser.js'}>
       <html lang='en'>
         <body className={inter.className}>
           <Links />
+          <Test />
           <div style={{ margin: '1rem', padding: '1rem', border: '1px solid green' }}>
             <h2>Root layout</h2>
             {children}