@shipfox/client-secrets 21.0.0 → 22.0.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-secrets",
   "license": "MIT",
-  "version": "21.0.0",
+  "version": "22.0.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -27,11 +27,11 @@
   "dependencies": {
     "@swc/helpers": "^0.5.17",
     "@tanstack/react-form": "^1.32.0",
+    "@shipfox/api-secrets-dto": "12.0.0",
     "@shipfox/client-api": "6.0.1",
-    "@shipfox/client-shell": "21.0.0",
-    "@shipfox/client-ui": "21.0.0",
-    "@shipfox/react-ui": "2.0.0",
-    "@shipfox/api-secrets-dto": "12.0.0"
+    "@shipfox/client-shell": "22.0.1",
+    "@shipfox/client-ui": "22.0.0",
+    "@shipfox/react-ui": "2.1.0"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.101.0",

package/src/components/store-section-shell.tsx

@@ -1,32 +1,27 @@
+import {Panel, PanelBody, PanelRow} from '@shipfox/react-ui/panel';
 import {Skeleton} from '@shipfox/react-ui/skeleton';
-import {cn} from '@shipfox/react-ui/utils';
-
-export const STORE_SURFACE_CLASS =
-  'overflow-hidden rounded-8 border border-border-neutral-base bg-background-neutral-base';
 
 /** Placeholder rows shown while the store list loads. */
 export function StoreRowsSkeleton({label}: {label: string}) {
   return (
-    <div role="status" aria-label={label} className={STORE_SURFACE_CLASS}>
-      <ul className="divide-y divide-border-neutral-base">
-        {[0, 1, 2].map((row) => (
-          <li key={row} className="flex items-center gap-cluster px-row py-row">
-            <Skeleton className="h-16 w-140" />
-            <Skeleton className="h-16 w-96" />
-            <Skeleton className="ml-auto h-14 w-80 shrink-0" />
-          </li>
-        ))}
-      </ul>
-    </div>
+    <Panel>
+      <PanelBody asChild>
+        <ul role="status" aria-label={label}>
+          {[0, 1, 2].map((row) => (
+            <PanelRow
+              asChild
+              className="justify-start gap-cluster hover:bg-background-neutral-base"
+              key={row}
+            >
+              <li>
+                <Skeleton className="h-16 w-140" />
+                <Skeleton className="h-16 w-96" />
+                <Skeleton className="ml-auto h-14 w-80 shrink-0" />
+              </li>
+            </PanelRow>
+          ))}
+        </ul>
+      </PanelBody>
+    </Panel>
   );
 }
-
-export function StoreSurface({
-  className,
-  children,
-}: {
-  className?: string;
-  children: React.ReactNode;
-}) {
-  return <div className={cn(STORE_SURFACE_CLASS, className)}>{children}</div>;
-}

package/src/components/workspace-secrets-section.tsx

@@ -27,12 +27,11 @@ import {copyKeyName} from './copy-key.js';
 import {DeleteEntryDialog} from './delete-entry-dialog.js';
 import {secretsErrorToFormError} from './form-errors.js';
 import {SecretForm} from './secret-form.js';
-import {StoreRowsSkeleton, StoreSurface} from './store-section-shell.js';
+import {StoreRowsSkeleton} from './store-section-shell.js';
 
-const SECRETS_DESCRIPTION =
-  'Encrypted, write-only values for sensitive data like API keys, tokens, and passwords.';
 const EMPTY_SECRETS_DESCRIPTION =
   'Create a secret to store sensitive values like API keys, tokens, and passwords.';
+const SECRETS_SECURITY_NOTE = 'Encrypted, write-only values for sensitive data.';
 
 type FormState = {mode: 'create'} | {mode: 'edit'; key: string} | null;
 
@@ -58,9 +57,9 @@ export function WorkspaceSecretsSection({workspaceId}: {workspaceId: string}) {
       <section className="flex flex-col gap-group" aria-label="Secrets">
         <div className="flex items-start justify-between gap-group">
           <div className="flex flex-col gap-tight">
-            <Header variant="h3">Secrets</Header>
+            <Header variant="h1">Secrets</Header>
             <Text size="sm" className="text-foreground-neutral-muted">
-              {SECRETS_DESCRIPTION}
+              {SECRETS_SECURITY_NOTE}
             </Text>
           </div>
           <Button size="sm" onClick={() => setFormState({mode: 'create'})}>
@@ -71,24 +70,25 @@ export function WorkspaceSecretsSection({workspaceId}: {workspaceId: string}) {
         {secretsQuery.isPending ? <StoreRowsSkeleton label="Loading secrets" /> : null}
 
         {secretsQuery.isError && secretsQuery.data === undefined ? (
-          <StoreSurface className="px-row">
-            <QueryLoadError query={secretsQuery} subject="secrets" />
-          </StoreSurface>
+          <Panel>
+            <QueryLoadError query={secretsQuery} subject="secrets" variant="panel" />
+          </Panel>
         ) : null}
 
         {secretsQuery.data !== undefined && secrets.length === 0 ? (
-          <StoreSurface className="px-row">
+          <Panel>
             <EmptyState
               icon="keyLine"
               title="No secrets yet"
               description={EMPTY_SECRETS_DESCRIPTION}
+              variant="panel"
               action={
                 <Button size="sm" onClick={() => setFormState({mode: 'create'})}>
                   Create secret
                 </Button>
               }
             />
-          </StoreSurface>
+          </Panel>
         ) : null}
 
         {secrets.length > 0 ? (

package/src/components/workspace-variables-section.tsx

@@ -19,18 +19,16 @@ import {
   TableRow,
 } from '@shipfox/react-ui/table';
 import {toast} from '@shipfox/react-ui/toast';
-import {Code, Header, Text} from '@shipfox/react-ui/typography';
+import {Code, Header} from '@shipfox/react-ui/typography';
 import {useMemo, useState} from 'react';
 import {type VariablePreview, workspaceStoreScope} from '#core/store.js';
 import {useDeleteVariableMutation, useVariablesQuery} from '#hooks/api/variables.js';
 import {copyKeyName} from './copy-key.js';
 import {DeleteEntryDialog} from './delete-entry-dialog.js';
 import {secretsErrorToFormError} from './form-errors.js';
-import {StoreRowsSkeleton, StoreSurface} from './store-section-shell.js';
+import {StoreRowsSkeleton} from './store-section-shell.js';
 import {VariableForm} from './variable-form.js';
 
-const VARIABLES_DESCRIPTION =
-  'Plaintext configuration values for non-sensitive data like regions, flags, and log levels.';
 const EMPTY_VARIABLES_DESCRIPTION =
   'Create a variable to store non-sensitive configuration like regions, flags, and log levels.';
 
@@ -58,10 +56,7 @@ export function WorkspaceVariablesSection({workspaceId}: {workspaceId: string})
       <section className="flex flex-col gap-group" aria-label="Variables">
         <div className="flex items-start justify-between gap-group">
           <div className="flex flex-col gap-tight">
-            <Header variant="h3">Variables</Header>
-            <Text size="sm" className="text-foreground-neutral-muted">
-              {VARIABLES_DESCRIPTION}
-            </Text>
+            <Header variant="h1">Variables</Header>
           </div>
           <Button size="sm" onClick={() => setFormState({mode: 'create'})}>
             Create variable
@@ -71,24 +66,25 @@ export function WorkspaceVariablesSection({workspaceId}: {workspaceId: string})
         {variablesQuery.isPending ? <StoreRowsSkeleton label="Loading variables" /> : null}
 
         {variablesQuery.isError && variablesQuery.data === undefined ? (
-          <StoreSurface className="px-row">
-            <QueryLoadError query={variablesQuery} subject="variables" />
-          </StoreSurface>
+          <Panel>
+            <QueryLoadError query={variablesQuery} subject="variables" variant="panel" />
+          </Panel>
         ) : null}
 
         {variablesQuery.data !== undefined && variables.length === 0 ? (
-          <StoreSurface className="px-row">
+          <Panel>
             <EmptyState
               icon="bracesLine"
               title="No variables yet"
               description={EMPTY_VARIABLES_DESCRIPTION}
+              variant="panel"
               action={
                 <Button size="sm" onClick={() => setFormState({mode: 'create'})}>
                   Create variable
                 </Button>
               }
             />
-          </StoreSurface>
+          </Panel>
         ) : null}
 
         {variables.length > 0 ? (