@shipfox/client-integrations 16.0.0 → 21.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-integrations",
   "license": "MIT",
-  "version": "16.0.0",
+  "version": "21.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -30,17 +30,17 @@
     "@shipfox/api-integration-core-dto": "12.2.0",
     "@shipfox/api-integration-gitea-dto": "12.2.0",
     "@shipfox/api-integration-github-dto": "12.2.0",
-    "@shipfox/api-integration-linear-dto": "12.2.0",
     "@shipfox/api-integration-jira-dto": "12.2.0",
+    "@shipfox/api-integration-linear-dto": "12.2.0",
     "@shipfox/api-integration-slack-dto": "12.2.0",
-    "@shipfox/api-integration-webhook-dto": "12.2.0",
     "@shipfox/api-integration-sentry-dto": "12.2.0",
+    "@shipfox/api-integration-webhook-dto": "12.2.0",
     "@shipfox/client-api": "6.0.1",
-    "@shipfox/client-auth": "16.0.0",
-    "@shipfox/client-shell": "16.0.0",
-    "@shipfox/client-ui": "16.0.0",
-    "@shipfox/react-ui": "1.1.0",
-    "@shipfox/integration-icons": "0.3.2"
+    "@shipfox/client-auth": "21.0.0",
+    "@shipfox/client-shell": "21.0.0",
+    "@shipfox/client-ui": "21.0.0",
+    "@shipfox/integration-icons": "0.3.4",
+    "@shipfox/react-ui": "2.0.0"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.101.0",

package/src/components/callback-status-shell.tsx

@@ -43,8 +43,8 @@ export function CallbackStatusShell({
     : undefined;
 
   return (
-    <main className="flex min-h-screen bg-background-subtle-base px-row py-frame">
-      <div className="mx-auto flex w-full max-w-[480px] flex-col justify-center gap-section">
+    <main className="flex min-h-screen px-row py-frame">
+      <div className="mx-auto flex w-full flex-col justify-center gap-section">
         <h2 ref={headingRef} tabIndex={-1} className="text-24 font-semibold outline-none">
           {title}
         </h2>

package/src/components/integration-gallery.stories.tsx

@@ -82,7 +82,7 @@ function IntegrationGalleryStory({scenario}: IntegrationGalleryStoryProps) {
       getParentRoute: () => workspaceRoute,
       path: 'settings/integrations',
       component: () => (
-        <div className="mx-auto w-full max-w-[760px] bg-background-neutral-background p-24">
+        <div className="mx-auto w-full max-w-[760px] bg-background-subtle-base p-24">
           <IntegrationGallery workspaceId={WORKSPACE_ID} />
         </div>
       ),

package/src/components/integration-gallery.test.tsx

@@ -601,6 +601,7 @@ describe('IntegrationGallery: available section', () => {
     const link = await screen.findByRole('link', {name: 'Install GitHub'});
 
     expect(link).toHaveClass('focus-visible:shadow-button-neutral-focus');
+    expect(link).toHaveClass('shadow-button-neutral');
     expect(link.className).not.toContain('shadow-button-secondary');
     expect(within(link).getByText('Install')).toBeVisible();
     expect(within(link).queryByRole('button')).not.toBeInTheDocument();

package/src/components/provider-grid.tsx

@@ -1,8 +1,8 @@
 import {QueryLoadError} from '@shipfox/client-ui';
 import {IntegrationIcon} from '@shipfox/integration-icons';
-import {Card} from '@shipfox/react-ui/card';
 import {EmptyState} from '@shipfox/react-ui/empty-state';
 import {Icon} from '@shipfox/react-ui/icon';
+import {Panel} from '@shipfox/react-ui/panel';
 import {Skeleton} from '@shipfox/react-ui/skeleton';
 import {Text} from '@shipfox/react-ui/typography';
 import {cn} from '@shipfox/react-ui/utils';
@@ -106,7 +106,7 @@ function ProviderCard({
         type="button"
         aria-label={`Add ${provider.displayName}`}
         onClick={() => onOpenProvider?.(provider.provider)}
-        className="group flex h-full w-full min-w-0 items-center justify-between gap-cluster rounded-8 border border-border-neutral-base bg-background-neutral-base p-panel-compact text-left transition-colors hover:bg-background-components-hover focus-visible:shadow-button-neutral-focus focus-visible:outline-none"
+        className="group flex h-full w-full min-w-0 items-center justify-between gap-cluster rounded-8 border border-border-neutral-base bg-background-neutral-base p-panel-compact text-left shadow-button-neutral transition-colors hover:bg-background-components-hover focus-visible:shadow-button-neutral-focus focus-visible:outline-none"
       >
         <ProviderCardContent provider={provider} action="Add" />
       </button>
@@ -118,7 +118,7 @@ function ProviderCard({
       to={catalog.setupPath}
       params={{workspaceSlug}}
       aria-label={`Install ${provider.displayName}`}
-      className="group flex h-full min-w-0 items-center justify-between gap-cluster rounded-8 border border-border-neutral-base bg-background-neutral-base p-panel-compact transition-colors hover:bg-background-components-hover focus-visible:shadow-button-neutral-focus focus-visible:outline-none"
+      className="group flex h-full min-w-0 items-center justify-between gap-cluster rounded-8 border border-border-neutral-base bg-background-neutral-base p-panel-compact shadow-button-neutral transition-colors hover:bg-background-components-hover focus-visible:shadow-button-neutral-focus focus-visible:outline-none"
     >
       <ProviderCardContent provider={provider} action="Install" />
     </Link>
@@ -159,7 +159,7 @@ function ProviderGridSkeleton({label}: {label: string}) {
     <ul role="status" aria-label={label} className={PROVIDER_GRID_CLASS}>
       {[0, 1, 2, 3].map((tile) => (
         <li key={tile}>
-          <Card className="h-full p-panel-compact">
+          <Panel className="h-full p-panel-compact">
             <div className="flex items-center justify-between gap-cluster">
               <div className="flex min-w-0 items-center gap-cluster">
                 <Skeleton className="size-24 shrink-0" />
@@ -167,7 +167,7 @@ function ProviderGridSkeleton({label}: {label: string}) {
               </div>
               <Skeleton className="h-16 w-64 shrink-0" />
             </div>
-          </Card>
+          </Panel>
         </li>
       ))}
     </ul>

package/src/components/repository-picker.tsx

@@ -60,7 +60,7 @@ export function RepositoryPicker({
       {isLoading ? <RepositoryLoadingState /> : null}
 
       {!isLoading && repositories.length === 0 ? (
-        <div className="rounded-8 border border-border-neutral-base bg-background-subtle-base p-panel-compact">
+        <div className="rounded-8 border border-border-neutral-base bg-background-neutral-base p-panel-compact">
           <Text size="sm">{emptyMessage}</Text>
         </div>
       ) : null}

package/src/components/webhook/webhook-modals.stories.tsx

@@ -126,7 +126,7 @@ export const CopyableValueState: Story = {
 
 function StorySurface({scenario}: {scenario: Scenario}) {
   return (
-    <div className="min-h-screen bg-background-neutral-background p-24">
+    <div className="min-h-screen bg-background-subtle-base p-24">
       {scenario === 'create-form' ? (
         <WebhookCreateModal
           workspaceId={WORKSPACE_ID}

package/src/pages/gitea-install-page.tsx

@@ -40,7 +40,7 @@ export function GiteaInstallPage() {
   });
 
   return (
-    <div className="mx-auto flex w-full max-w-[480px] flex-col gap-section">
+    <div className="mx-auto flex w-full flex-col gap-section">
       <header className="flex flex-col gap-inline">
         <Header variant="h1">Install Gitea</Header>
         <Text size="md" className="text-foreground-neutral-muted">

package/src/pages/jira-callback-page.tsx

@@ -3,8 +3,8 @@ import {useRouteSearch} from '@shipfox/client-shell/runtime';
 import {sessionStorageOrUndefined} from '@shipfox/client-ui';
 import {Button, ButtonLink} from '@shipfox/react-ui/button';
 import {Callout} from '@shipfox/react-ui/callout';
-import {Card} from '@shipfox/react-ui/card';
 import {FullPageLoader} from '@shipfox/react-ui/loader';
+import {Panel} from '@shipfox/react-ui/panel';
 import {toast} from '@shipfox/react-ui/toast';
 import {Header, Text} from '@shipfox/react-ui/typography';
 import {useQueryClient} from '@tanstack/react-query';
@@ -300,8 +300,8 @@ function JiraSiteSelectionPage({
   onSelect: (site: JiraSite) => void;
 }) {
   return (
-    <main className="flex min-h-screen bg-background-subtle-base px-row py-frame">
-      <div className="mx-auto flex w-full max-w-[480px] flex-col justify-center gap-section">
+    <main className="flex min-h-screen px-row py-frame">
+      <div className="mx-auto flex w-full flex-col justify-center gap-section">
         <header className="flex flex-col gap-inline">
           <Header variant="h2">Choose a Jira site</Header>
           <Text size="sm" className="text-foreground-neutral-muted">
@@ -317,7 +317,7 @@ function JiraSiteSelectionPage({
 
         <section className="flex flex-col gap-inline" aria-label="Choose a Jira site">
           {sites.map((site) => (
-            <Card key={site.cloudId} className="p-panel-compact">
+            <Panel key={site.cloudId} className="p-panel-compact">
               <div className="flex items-center justify-between gap-cluster">
                 <div className="min-w-0">
                   <Text size="md" bold className="truncate">
@@ -336,7 +336,7 @@ function JiraSiteSelectionPage({
                   Connect
                 </Button>
               </div>
-            </Card>
+            </Panel>
           ))}
         </section>
 

package/src/pages/sentry-callback-page.tsx

@@ -3,8 +3,8 @@ import {useRouteSearch} from '@shipfox/client-shell/runtime';
 import {createSingleFlight, sessionStorageOrUndefined} from '@shipfox/client-ui';
 import {Button, ButtonLink} from '@shipfox/react-ui/button';
 import {Callout} from '@shipfox/react-ui/callout';
-import {Card} from '@shipfox/react-ui/card';
 import {FullPageLoader} from '@shipfox/react-ui/loader';
+import {Panel} from '@shipfox/react-ui/panel';
 import {toast} from '@shipfox/react-ui/toast';
 import {Header, Text} from '@shipfox/react-ui/typography';
 import {useQueryClient} from '@tanstack/react-query';
@@ -212,7 +212,7 @@ export function SentryCallbackPage() {
 
       <section className="flex flex-col gap-inline" aria-label="Choose a workspace">
         {orderedWorkspaces.map((workspace) => (
-          <Card key={workspace.id} className="p-panel-compact">
+          <Panel key={workspace.id} className="p-panel-compact">
             <div className="flex items-center justify-between gap-cluster">
               <Text size="md" bold className="truncate">
                 {workspace.name}
@@ -226,7 +226,7 @@ export function SentryCallbackPage() {
                 Install
               </Button>
             </div>
-          </Card>
+          </Panel>
         ))}
       </section>
 
@@ -246,10 +246,8 @@ export function SentryCallbackPage() {
 
 function CallbackColumn({children}: {children: React.ReactNode}) {
   return (
-    <main className="flex min-h-screen bg-background-subtle-base px-row py-frame">
-      <div className="mx-auto flex w-full max-w-[480px] flex-col justify-center gap-section">
-        {children}
-      </div>
+    <main className="flex min-h-screen px-row py-frame">
+      <div className="mx-auto flex w-full flex-col justify-center gap-section">{children}</div>
     </main>
   );
 }

package/src/pages/source-control-onboarding-page.tsx

@@ -8,7 +8,7 @@ export function SourceControlOnboardingPage() {
   const providersQuery = useIntegrationProvidersQuery({capability: 'source_control'});
 
   return (
-    <div className="mx-auto flex w-full max-w-[640px] flex-col gap-section">
+    <div className="mx-auto flex w-full flex-col gap-section">
       <header className="flex flex-col gap-inline">
         <Header variant="h1">Install source control</Header>
         <Text size="md" className="text-foreground-neutral-muted">

package/src/routes/gitea.tsx

@@ -1,4 +1,7 @@
 import {defineRoute} from '@shipfox/client-shell/runtime';
 import {GiteaInstallPage} from '#pages/gitea-install-page.js';
 
-export default defineRoute({component: GiteaInstallPage});
+export default defineRoute({
+  staticData: {frame: 'focused'},
+  component: GiteaInstallPage,
+});

package/src/routes/github-callback.tsx

@@ -29,6 +29,7 @@ const callbackRequests = createSingleFlight<string, void>({maxTerminalResults: 3
 const toastedCallbacks = new Set<string>();
 
 export default defineRoute({
+  staticData: {frame: 'focused'},
   validateSearch: validateGithubCallbackSearch,
   component: GithubCallbackRoute,
 });

package/src/routes/github.tsx

@@ -1,4 +1,7 @@
 import {defineRoute} from '@shipfox/client-shell/runtime';
 import {GithubInstallPage} from '#pages/github-install-page.js';
 
-export default defineRoute({component: GithubInstallPage});
+export default defineRoute({
+  staticData: {frame: 'focused'},
+  component: GithubInstallPage,
+});

package/src/routes/integrations-settings.tsx

@@ -1,4 +1,7 @@
 import {defineRoute} from '@shipfox/client-shell/runtime';
 import {IntegrationGallery} from '#index.js';
 
-export default defineRoute({component: IntegrationGallery});
+export default defineRoute({
+  staticData: {frame: 'content'},
+  component: IntegrationGallery,
+});

package/src/routes/integrations.tsx

@@ -1,4 +1,7 @@
 import {defineRoute} from '@shipfox/client-shell/runtime';
 import {SourceControlOnboardingPage} from '#pages/source-control-onboarding-page.js';
 
-export default defineRoute({component: SourceControlOnboardingPage});
+export default defineRoute({
+  staticData: {frame: 'focused'},
+  component: SourceControlOnboardingPage,
+});

package/src/routes/jira-callback.tsx

@@ -3,6 +3,7 @@ import {JiraCallbackPage} from '#pages/jira-callback-page.js';
 import {parseJiraCallbackQuery} from '../jira-callback.js';
 
 export default defineRoute({
+  staticData: {frame: 'focused'},
   validateSearch: parseJiraCallbackQuery,
   component: JiraCallbackPage,
 });

package/src/routes/jira.tsx

@@ -1,4 +1,7 @@
 import {defineRoute} from '@shipfox/client-shell/runtime';
 import {JiraInstallPage} from '#pages/jira-install-page.js';
 
-export default defineRoute({component: JiraInstallPage});
+export default defineRoute({
+  staticData: {frame: 'focused'},
+  component: JiraInstallPage,
+});

package/src/routes/linear-callback.tsx

@@ -3,6 +3,7 @@ import {LinearCallbackPage} from '#pages/linear-callback-page.js';
 import {parseLinearCallbackQuery} from '../linear-callback.js';
 
 export default defineRoute({
+  staticData: {frame: 'focused'},
   validateSearch: parseLinearCallbackQuery,
   component: LinearCallbackPage,
 });

package/src/routes/linear.tsx

@@ -1,4 +1,7 @@
 import {defineRoute} from '@shipfox/client-shell/runtime';
 import {LinearInstallPage} from '#pages/linear-install-page.js';
 
-export default defineRoute({component: LinearInstallPage});
+export default defineRoute({
+  staticData: {frame: 'focused'},
+  component: LinearInstallPage,
+});

package/src/routes/sentry-callback.tsx

@@ -3,6 +3,7 @@ import {SentryCallbackPage} from '#pages/sentry-callback-page.js';
 import {parseSentryCallbackParams} from '../sentry-callback.js';
 
 export default defineRoute({
+  staticData: {frame: 'focused'},
   validateSearch: parseSentryCallbackParams,
   component: SentryCallbackPage,
 });

package/src/routes/sentry.tsx

@@ -1,4 +1,7 @@
 import {defineRoute} from '@shipfox/client-shell/runtime';
 import {SentryInstallPage} from '#pages/sentry-install-page.js';
 
-export default defineRoute({component: SentryInstallPage});
+export default defineRoute({
+  staticData: {frame: 'focused'},
+  component: SentryInstallPage,
+});

package/src/routes/slack-callback.tsx

@@ -3,6 +3,7 @@ import {SlackCallbackPage} from '#pages/slack-callback-page.js';
 import {parseSlackCallbackQuery} from '../slack-callback.js';
 
 export default defineRoute({
+  staticData: {frame: 'focused'},
   validateSearch: parseSlackCallbackQuery,
   component: SlackCallbackPage,
 });

package/src/routes/slack.tsx

@@ -1,3 +1,6 @@
 import {defineRoute} from '@shipfox/client-shell/runtime';
 import {SlackInstallPage} from '#pages/slack-install-page.js';
-export default defineRoute({component: SlackInstallPage});
+export default defineRoute({
+  staticData: {frame: 'focused'},
+  component: SlackInstallPage,
+});