ActivityPub Shade integration (#22150)

ref https://linear.app/ghost/issue/AP-700/explore-ui-development-in-ap

This PR is about integrating ActivityPub with the new design system, so that we can start using Shade in a real world application. In this early version the TailwindCSS config is taken from Shade but the custom styles of Shade and the AdminX Design System are merged. This is needed so that we can keep using the old components without breaking functionality.

apps/admin-x-activitypub/package.json

@@ -66,6 +66,7 @@
   "dependencies": {
     "@radix-ui/react-form": "0.0.3",
     "@tryghost/admin-x-design-system": "0.0.0",
+    "@tryghost/shade": "0.0.0",
     "@tryghost/admin-x-framework": "0.0.0",
     "clsx": "2.1.1",
     "react": "18.3.1",

apps/admin-x-activitypub/src/App.tsx

@@ -2,6 +2,7 @@ import MainContent from './MainContent';
 import {DesignSystemApp, DesignSystemAppProps} from '@tryghost/admin-x-design-system';
 import {FrameworkProvider, TopLevelFrameworkProps} from '@tryghost/admin-x-framework';
 import {RoutingProvider} from '@tryghost/admin-x-framework/routing';
+import {ShadeApp} from '@tryghost/shade';
 
 interface AppProps {
     framework: TopLevelFrameworkProps;
@@ -12,8 +13,10 @@ const App: React.FC<AppProps> = ({framework, designSystem}) => {
     return (
         <FrameworkProvider {...framework}>
             <RoutingProvider basePath='activitypub'>
-                <DesignSystemApp className='admin-x-activitypub' {...designSystem}>
-                    <MainContent />
+                <DesignSystemApp className='shade' {...designSystem}>
+                    <ShadeApp darkMode={designSystem.darkMode} fetchKoenigLexical={null}>
+                        <MainContent />
+                    </ShadeApp>
                 </DesignSystemApp>
             </RoutingProvider>
         </FrameworkProvider>

apps/admin-x-activitypub/src/components/Inbox.tsx

@@ -10,14 +10,15 @@ import Separator from './global/Separator';
 import getName from '../utils/get-name';
 import getUsername from '../utils/get-username';
 import {ActorProperties} from '@tryghost/admin-x-framework/api/activitypub';
-import {Button, Heading, LoadingIndicator} from '@tryghost/admin-x-design-system';
+import {Button} from '@tryghost/shade';
 import {
     GET_ACTIVITIES_QUERY_KEY_FEED,
     GET_ACTIVITIES_QUERY_KEY_INBOX,
     useActivitiesForUser,
     useSuggestedProfilesForUser,
     useUserDataForUser
 } from '../hooks/useActivityPubQueries';
+import {Heading, LoadingIndicator} from '@tryghost/admin-x-design-system';
 import {handleProfileClick} from '../utils/handle-profile-click';
 import {handleViewContent} from '../utils/content-handlers';
 import {useRouting} from '@tryghost/admin-x-framework/routing';
@@ -105,7 +106,7 @@ const Inbox: React.FC<InboxProps> = ({layout}) => {
                                             <div className=''>
                                                 <APAvatar author={user as ActorProperties} />
                                             </div>
-                                            <Button aria-label='New post' className='text absolute inset-0 w-full rounded-lg bg-white pl-[64px] text-left text-[1.5rem] tracking-normal text-grey-500 shadow-[0_0_1px_rgba(0,0,0,.32),0_1px_6px_rgba(0,0,0,.03),0_8px_10px_-8px_rgba(0,0,0,.16)] transition-all hover:shadow-[0_0_1px_rgba(0,0,0,.32),0_1px_6px_rgba(0,0,0,.03),0_8px_10px_-8px_rgba(0,0,0,.26)]' label='What&apos;s new?' unstyled onClick={() => NiceModal.show(NewPostModal)} />
+                                            <Button aria-label='New post' className='text absolute inset-0 h-[64px] w-full justify-start rounded-lg bg-white pl-[64px] text-left text-[1.5rem] tracking-normal text-gray-500 shadow-[0_0_1px_rgba(0,0,0,.32),0_1px_6px_rgba(0,0,0,.03),0_8px_10px_-8px_rgba(0,0,0,.16)] transition-all hover:bg-white hover:shadow-[0_0_1px_rgba(0,0,0,.32),0_1px_6px_rgba(0,0,0,.03),0_8px_10px_-8px_rgba(0,0,0,.26)]' onClick={() => NiceModal.show(NewPostModal)}>What&apos;s new?</Button>
                                         </div>}
                                         <ul className={`mx-auto flex w-full flex-col ${layout === 'inbox' && 'mt-3'}`}>
                                             {activities.map((activity, index) => (
@@ -139,7 +140,7 @@ const Inbox: React.FC<InboxProps> = ({layout}) => {
                                 </div>
                                 <div className={`sticky top-[133px] ml-auto w-full max-w-[300px] max-lg:hidden xxxl:sticky xxxl:right-[40px]`}>
                                     <h2 className='mb-1.5 text-lg font-semibold'>This is your {layout === 'inbox' ? 'inbox' : 'feed'}</h2>
-                                    <p className='mb-6 text-grey-700'>You&apos;ll find {layout === 'inbox' ? 'long-form content' : 'short posts and updates'} from the accounts you follow here.</p>
+                                    <p className='mb-6 text-gray-700'>You&apos;ll find {layout === 'inbox' ? 'long-form content' : 'short posts and updates'} from the accounts you follow here.</p>
                                     <h2 className='mb-1 text-lg font-semibold'>You might also like</h2>
                                     {isLoadingSuggested ? (
                                         <LoadingIndicator size="sm" />
@@ -156,7 +157,7 @@ const Inbox: React.FC<InboxProps> = ({layout}) => {
                                                                 <APAvatar author={actor} />
                                                                 <div className='flex min-w-0 flex-col'>
                                                                     <span className='block w-full truncate font-semibold text-black'>{getName(actor)}</span>
-                                                                    <span className='block w-full truncate text-sm text-grey-600'>{getUsername(actor)}</span>
+                                                                    <span className='block w-full truncate text-sm text-gray-600'>{getUsername(actor)}</span>
                                                                 </div>
                                                             </ActivityItem>
                                                         </li>
@@ -166,7 +167,7 @@ const Inbox: React.FC<InboxProps> = ({layout}) => {
                                             })}
                                         </ul>
                                     )}
-                                    <Button className='mt-2' color='green' fullWidth={true} label='Explore &rarr;' link={true} onClick={() => updateRoute('search')} />
+                                    <Button className='mt-2 w-full' variant='outline' onClick={() => updateRoute('search')}>Explore &rarr;</Button>
                                 </div>
                             </div>
                         </>
@@ -181,14 +182,14 @@ const Inbox: React.FC<InboxProps> = ({layout}) => {
                                 <Heading className='text-balance' level={2}>
                                     Welcome to ActivityPub Beta
                                 </Heading>
-                                <p className="text-pretty text-grey-800">
+                                <p className="text-pretty text-gray-800">
                                     {layout === 'inbox'
                                         ? 'Here you\'ll find the latest articles from accounts you\'re following.'
                                         : 'Here you\'ll find the latest posts and updates from accounts you\'re following.'
                                     }
                                     {' Go ahead and find the ones you like using the "Search" tab.'}
                                 </p>
-                                <p className="text-pretty text-grey-800">
+                                <p className="text-pretty text-gray-800">
                                     For more information about what you can and can&apos;t (yet) do in the beta version, check out the onboarding guide:
                                 </p>
                                 <a className='font-semibold text-green' href='https://forum.ghost.org/t/activitypub-beta-start-here/51780' rel='noopener noreferrer' target='_blank'>Learn more</a>

apps/admin-x-activitypub/src/components/Notifications.tsx

@@ -342,15 +342,15 @@ const Notifications: React.FC<NotificationsProps> = () => {
                                                         ))}
                                                         {group.actors.length > maxAvatars && (!openStates[group.id || `${group.type}_${index}`]) && (
                                                             <div
-                                                                className='flex h-9 w-5 items-center justify-center text-sm text-grey-700'
+                                                                className='flex h-9 w-5 items-center justify-center text-sm text-gray-700'
                                                             >
                                                                 {`+${group.actors.length - maxAvatars}`}
                                                             </div>
                                                         )}
 
                                                         {group.actors.length > 1 && (
                                                             <Button
-                                                                className={`transition-color flex h-9 items-center rounded-full bg-transparent text-grey-700 hover:opacity-60 ${openStates[group.id || `${group.type}_${index}`] ? 'w-full justify-start pl-1' : '-ml-2 w-9 justify-center'}`}
+                                                                className={`transition-color flex h-9 items-center rounded-full bg-transparent text-gray-700 hover:opacity-60 ${openStates[group.id || `${group.type}_${index}`] ? 'w-full justify-start pl-1' : '-ml-2 w-9 justify-center'}`}
                                                                 hideLabel={!openStates[group.id || `${group.type}_${index}`]}
                                                                 icon='chevron-down'
                                                                 iconColorClass={`w-[12px] h-[12px] ${openStates[group.id || `${group.type}_${index}`] ? 'rotate-180' : ''}`}
@@ -373,7 +373,7 @@ const Notifications: React.FC<NotificationsProps> = () => {
                                                                     >
                                                                         <APAvatar author={actor} size='xs' />
                                                                         <span className='ml-2 text-base font-semibold'>{actor.name}</span>
-                                                                        <span className='ml-1 text-base text-grey-700'>{getUsername(actor)}</span>
+                                                                        <span className='ml-1 text-base text-gray-700'>{getUsername(actor)}</span>
                                                                     </div>
                                                                 ))}
                                                             </div>
@@ -392,7 +392,7 @@ const Notifications: React.FC<NotificationsProps> = () => {
                                                 ) && (
                                                     <div
                                                         dangerouslySetInnerHTML={{__html: stripHtml(group.object?.content || '')}}
-                                                        className='ap-note-content mt-1 line-clamp-2 text-pretty text-grey-700'
+                                                        className='ap-note-content mt-1 line-clamp-2 text-pretty text-gray-700'
                                                     />
                                                 )}
                                             </NotificationItem.Content>

apps/admin-x-activitypub/src/components/Profile.tsx

@@ -207,7 +207,7 @@ const FollowingTab: React.FC = () => {
                                     handle: account.handle
                                 }} />
                                 <div>
-                                    <div className='text-grey-600'>
+                                    <div className='text-gray-600'>
                                         <span className='mr-1 font-bold text-black'>{account.name}</span>
                                         <div className='text-sm'>{account.handle}</div>
                                     </div>
@@ -255,7 +255,7 @@ const FollowersTab: React.FC = () => {
                                     handle: account.handle
                                 }} />
                                 <div>
-                                    <div className='text-grey-600'>
+                                    <div className='text-gray-600'>
                                         <span className='mr-1 font-bold text-black'>{account.name}</span>
                                         <div className='text-sm'>{account.handle}</div>
                                     </div>
@@ -361,7 +361,7 @@ const Profile: React.FC<ProfileProps> = ({}) => {
                 <div className='z-0 mx-auto mt-8 flex w-full max-w-[580px] flex-col items-center pb-16'>
                     <div className='mx-auto w-full'>
                         {account?.bannerImageUrl && (
-                            <div className='h-[200px] w-full overflow-hidden rounded-lg bg-gradient-to-tr from-grey-200 to-grey-100'>
+                            <div className='h-[200px] w-full overflow-hidden rounded-lg bg-gradient-to-tr from-gray-200 to-gray-100'>
                                 <img
                                     alt={account?.name}
                                     className='h-full w-full object-cover'
@@ -385,7 +385,7 @@ const Profile: React.FC<ProfileProps> = ({}) => {
                                 </div>
                             </div>
                             <Heading className='mt-4' level={3}>{account?.name}</Heading>
-                            <span className='mt-1 text-[1.5rem] text-grey-800'>
+                            <span className='mt-1 text-[1.5rem] text-gray-800'>
                                 <span>{account?.handle}</span>
                             </span>
                             {(account?.bio || customFields.length > 0) && (

apps/admin-x-activitypub/src/components/Search.tsx

@@ -59,7 +59,7 @@ const AccountSearchResultItem: React.FC<AccountSearchResultItemProps> = ({accoun
             }}/>
             <div className='flex flex-col'>
                 <span className='font-semibold text-black'>{account.name}</span>
-                <span className='text-sm text-grey-700'>{account.handle}</span>
+                <span className='text-sm text-gray-700'>{account.handle}</span>
             </div>
             <FollowButton
                 className='ml-auto'
@@ -122,7 +122,7 @@ const SuggestedProfile: React.FC<SuggestedProfileProps> = ({profile, update}) =>
             <APAvatar author={profile.actor}/>
             <div className='flex flex-col'>
                 <span className='font-semibold text-black'>{profile.actor.name}</span>
-                <span className='text-sm text-grey-700'>{profile.handle}</span>
+                <span className='text-sm text-gray-700'>{profile.handle}</span>
             </div>
             <FollowButton
                 className='ml-auto'
@@ -200,10 +200,10 @@ const Search: React.FC<SearchProps> = ({}) => {
             <MainNavigation page='search' />
             <div className='z-0 mx-auto flex w-full max-w-[560px] flex-col items-center pt-8'>
                 <div className='relative flex w-full items-center'>
-                    <Icon className='absolute left-3 top-3 z-10' colorClass='text-grey-500' name='magnifying-glass' size='sm' />
+                    <Icon className='absolute left-3 top-3 z-10' colorClass='text-gray-500' name='magnifying-glass' size='sm' />
                     <TextField
                         autoComplete='off'
-                        className='mb-6 mr-12 flex h-10 w-full items-center rounded-lg border border-transparent bg-grey-100 px-[33px] py-1.5 transition-colors focus:border-green focus:bg-white focus:outline-2 dark:border-transparent dark:bg-grey-925 dark:text-white dark:placeholder:text-grey-800 dark:focus:border-green dark:focus:bg-grey-950 tablet:mr-0'
+                        className='mb-6 mr-12 flex h-10 w-full items-center rounded-lg border border-transparent bg-gray-100 px-[33px] py-1.5 transition-colors focus:border-green focus:bg-white focus:outline-2 dark:border-transparent dark:bg-gray-925 dark:text-white dark:placeholder:text-gray-800 dark:focus:border-green dark:focus:bg-gray-950 tablet:mr-0'
                         containerClassName='w-100'
                         inputRef={queryInputRef}
                         placeholder='Enter a handle or account URL...'
@@ -219,7 +219,7 @@ const Search: React.FC<SearchProps> = ({}) => {
                         <Button
                             className='absolute top-3 p-1 sm:right-14 tablet:right-3'
                             icon='close'
-                            iconColorClass='text-grey-700 !w-[10px] !h-[10px]'
+                            iconColorClass='text-gray-700 !w-[10px] !h-[10px]'
                             size='sm'
                             unstyled
                             onClick={() => {

apps/admin-x-activitypub/src/components/activities/ActivityItem.tsx

@@ -23,7 +23,7 @@ const ActivityItem: React.FC<ActivityItemProps> = ({children, url = null, onClic
     const childrenArray = React.Children.toArray(children);
 
     const Item = (
-        <div className='relative flex w-full max-w-[560px] cursor-pointer flex-col before:absolute before:inset-x-[-16px] before:inset-y-[-1px] before:rounded-md before:bg-grey-50 before:opacity-0 before:transition-opacity hover:z-10 hover:cursor-pointer hover:border-b-transparent hover:before:opacity-100 dark:before:bg-grey-950' onClick={() => {
+        <div className='relative flex w-full max-w-[560px] cursor-pointer flex-col before:absolute before:inset-x-[-16px] before:inset-y-[-1px] before:rounded-md before:bg-gray-50 before:opacity-0 before:transition-opacity hover:z-10 hover:cursor-pointer hover:border-b-transparent hover:before:opacity-100 dark:before:bg-gray-950' onClick={() => {
             if (!url && onClick) {
                 onClick();
             }

apps/admin-x-activitypub/src/components/activities/NotificationItem.tsx

@@ -20,7 +20,7 @@ interface NotificationItemProps {
 const NotificationItem = ({children, onClick, url, className}: NotificationItemProps) => {
     return (
         <NotificationContext.Provider value={{onClick, url}}>
-            <div className={`relative -mx-4 -my-px grid cursor-pointer grid-cols-[auto_1fr] gap-x-3 gap-y-2 rounded-lg p-4 text-left hover:bg-grey-75 ${className}`}
+            <div className={`relative -mx-4 -my-px grid cursor-pointer grid-cols-[auto_1fr] gap-x-3 gap-y-2 rounded-lg p-4 text-left hover:bg-gray-75 ${className}`}
                 role='button'
                 onClick={onClick}
             >