@shipfox/client-config 17.0.0 → 21.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-config",
   "license": "MIT",
-  "version": "17.0.0",
+  "version": "21.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@swc/helpers": "^0.5.17",
-    "@shipfox/react-ui": "1.2.0"
+    "@shipfox/react-ui": "2.0.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/config-error-screen.test.tsx

@@ -20,12 +20,18 @@ describe('ConfigErrorScreen', () => {
   });
 
   it('renders the docs link only when a url is given', () => {
-    const {rerender} = render(<ConfigErrorScreen errors={[apiUrlError]} />);
+    const {container, rerender} = render(<ConfigErrorScreen errors={[apiUrlError]} />);
 
     expect(screen.queryByRole('link')).toBeNull();
 
     rerender(<ConfigErrorScreen errors={[apiUrlError]} docsUrl="https://docs.shipfox.io/config" />);
 
     expect(screen.getByRole('link')).toHaveAttribute('href', 'https://docs.shipfox.io/config');
+    expect(container.querySelector('[data-slot="panel"]')).toHaveClass('gap-group');
+    expect(container.querySelector('[data-slot="panel-body"]')).toHaveClass('flex', 'flex-col');
+    expect(container.querySelector('[data-slot="panel-body"] > div')).toHaveClass(
+      'px-row',
+      'py-row',
+    );
   });
 });

package/src/config-error-screen.tsx

@@ -1,6 +1,6 @@
 import {ButtonLink} from '@shipfox/react-ui/button';
-import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@shipfox/react-ui/card';
 import {Icon} from '@shipfox/react-ui/icon';
+import {Panel, PanelBody, PanelHeader, PanelTitle} from '@shipfox/react-ui/panel';
 import {Code, Text} from '@shipfox/react-ui/typography';
 import type {ConfigKeyError} from './load-config.js';
 
@@ -22,23 +22,23 @@ export interface ConfigErrorScreenProps {
 export function ConfigErrorScreen({errors, docsUrl}: ConfigErrorScreenProps) {
   return (
     <main className="flex min-h-screen items-center justify-center bg-background-subtle-base px-frame py-frame">
-      <Card className="w-full max-w-[512px]">
-        <CardHeader>
+      <Panel className="w-full max-w-[512px] gap-group">
+        <PanelHeader variant="plain" className="flex-col items-start gap-inline">
           <div className="flex items-center gap-inline">
             <Icon name="errorWarningLine" className="size-20 text-tag-error-icon" />
-            <CardTitle variant="h2">Configuration error</CardTitle>
+            <PanelTitle variant="h2">Configuration error</PanelTitle>
           </div>
-          <CardDescription>
+          <Text size="sm" className="text-foreground-neutral-muted">
             The Shipfox client could not start because its configuration is missing or invalid. Set
             the environment variables below and restart the container.
-          </CardDescription>
-        </CardHeader>
+          </Text>
+        </PanelHeader>
 
-        <CardContent className="flex flex-col">
+        <PanelBody className="flex flex-col">
           {errors.map((error) => (
             <div
               key={error.key}
-              className="flex flex-col gap-tight border-t border-border-neutral-base py-row first:border-t-0 first:pt-0"
+              className="flex flex-col gap-tight border-t border-border-neutral-base px-row py-row first:border-t-0 first:pt-0"
             >
               <Code variant="label" bold className="text-foreground-neutral-base">
                 {error.key}
@@ -64,18 +64,20 @@ export function ConfigErrorScreen({errors, docsUrl}: ConfigErrorScreenProps) {
               </Text>
             </div>
           ))}
-        </CardContent>
+        </PanelBody>
 
         {docsUrl ? (
-          <Text size="sm" className="text-foreground-neutral-muted">
-            See the{' '}
-            <ButtonLink href={docsUrl} variant="interactive" underline>
-              self-hosting configuration guide
-            </ButtonLink>
-            .
-          </Text>
+          <div className="p-panel pt-0">
+            <Text size="sm" className="text-foreground-neutral-muted">
+              See the{' '}
+              <ButtonLink href={docsUrl} variant="interactive" underline>
+                self-hosting configuration guide
+              </ButtonLink>
+              .
+            </Text>
+          </div>
         ) : null}
-      </Card>
+      </Panel>
     </main>
   );
 }