@gravitee/graphene-core 2.57.0 → 2.58.0-renovate-react.1323345

package/dist/styles/tailwind-theme.css

@@ -118,6 +118,8 @@
 
   /* ── Layout ─────────────────────────────────────── */
   --container-content: var(--content-max-width);
+  --max-width-content: var(--content-max-width);
+  --max-width-focused: var(--content-focused-width);
 
   /* ── Radius ──────────────────────────────────────── */
   --radius-sm: calc(var(--radius) - 0.125rem);

package/dist/tokens/component.css

@@ -23,7 +23,8 @@
 
   /* ── Content area ────────────────────────────────── */
   --content-padding: var(--graphene-spacing-6);
-  --content-max-width: 80rem;
+  --content-max-width: 100rem;
+  --content-focused-width: 56rem;
 
   /* ── Derived layout ────────────────────────────── */
   --sidebar-height: 100svh;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravitee/graphene-core",
-  "version": "2.57.0",
+  "version": "2.58.0-renovate-react.1323345",
   "type": "module",
   "description": "Gravitee's Graphene design system: accessible React components, design tokens, icons, and shared ESLint/TypeScript configs. Built on shadcn/ui and Tailwind.",
   "keywords": [
@@ -95,6 +95,7 @@
   },
   "peerDependencies": {
     "@fontsource/dm-sans": ">=5.0.0",
+    "@gravitee/graphene-core": "2.58.0-renovate-react.1323345",
     "@monaco-editor/react": "^4.7.0",
     "@tanstack/react-table": "^8.0.0",
     "@testing-library/dom": ">=10.0.0",

package/snippets/context-sidebar-detail-page.tsx

@@ -77,11 +77,25 @@ export function ResourceDetailPage({
   );
 }
 
-// 3. With LayoutSlots (module federation):
+// 3. Content width:
+//    Detail pages use the default container. No layout configuration needed.
+//    Do NOT set max-w-* classes on page wrappers.
+//
+//    Use contentVariant: 'full-bleed' only for tool layouts (Policy Studio),
+//    observability dashboards, or log/trace explorers.
+
+// 4. With LayoutSlots (module federation):
 //    If using useLayoutConfig instead of direct props, push the sidebar from
 //    inside your module component. The host owns appContext in ContentHeader;
 //    modules only set breadcrumbs, leading, and contextSidebar.
 //
+//    Use the `banner` slot to show a full-width status bar above the content
+//    area. Common on resource detail pages where changes must be deployed.
+//    The banner spans edge-to-edge regardless of contentVariant.
+//    Add role="status" and a descriptive aria-label on the banner root element.
+//    On unmount or when status clears, set banner: null (useLayoutConfig resets
+//    owned keys automatically on unmount).
+//
 //    // appContext lives in the host shell's ContentHeader — modules do not set it.
 //    useLayoutConfig(
 //      {
@@ -89,9 +103,13 @@ export function ResourceDetailPage({
 //        contextExpanded,
 //        contextSidebar: <ContextSidebar header={...} groups={...} ... />,
 //        leading: <ContextToggleButton expanded={contextExpanded} onToggle={...} />,
+//        banner: needsDeploy
+//          ? <DeployStrip onDeploy={handleDeploy} role="status" aria-label="Deployment status" />
+//          : null,
+//        bannerSticky: true,
 //        breadcrumbs: [...],
 //      },
-//      [section, contextExpanded],
+//      [section, contextExpanded, needsDeploy, handleDeploy],
 //    );
 //
 //    Child pages can call useLayoutConfig for non-overlapping keys without
@@ -104,23 +122,3 @@ export function ResourceDetailPage({
 //
 //    See Storybook "Patterns/Module Federation" for the full setup.
 //
-// 4. Banner slot (deploy strip pattern):
-//    Use the `banner` prop to show a full-width status bar above the content
-//    area. Common on resource detail pages where changes must be deployed.
-//    The banner spans edge-to-edge regardless of contentVariant.
-//
-//    <AppLayout
-//      viewMode="context"
-//      banner={needsDeploy ? <DeployStrip onDeploy={handleDeploy} /> : undefined}
-//      bannerSticky
-//      ...
-//    >
-//
-//    With useLayoutConfig (module federation):
-//
-//    useLayoutConfig({
-//      banner: needsDeploy ? <DeployStrip onDeploy={handleDeploy} /> : null,
-//      bannerSticky: true,
-//    }, [needsDeploy, handleDeploy]);
-//
-//    See Storybook "Composed/AppLayout → BannerSlot" for the full example.

package/snippets/creation-wizard-page.tsx

@@ -0,0 +1,120 @@
+// Snippet: Creation wizard / stepper page with PageFocused
+//
+// Use when building a multi-step creation flow, onboarding sequence,
+// or any focused linear task (Create API, Create Agent, Import, etc.).
+//
+// Content width: Wrap in <PageFocused> to constrain and center within the
+// container. The centering signals to the user that they are in a focused sub-task.
+//
+// Do NOT use for:
+// - Regular settings/form pages (they use the default container as-is)
+// - DataTable list pages (they fill the container naturally)
+// - Wide two-column wizards (use the default container instead)
+//
+// Decision rule: If the user navigated INTO a single-column creation/wizard flow → <PageFocused>.
+
+import { useState } from 'react';
+import { Button, Card, CardContent, Field, Input, Label, PageFocused, Separator } from '@gravitee/graphene-core';
+import { ArrowLeftIcon, ArrowRightIcon, RocketIcon } from '@gravitee/graphene-core/icons';
+
+// Replace with your actual step definitions
+const STEPS = ['Details', 'Configure', 'Review'] as const;
+
+export function CreateResourceWizardPage() {
+  const [step, setStep] = useState(0);
+  const isLastStep = step === STEPS.length - 1;
+
+  function handleNext() {
+    if (isLastStep) {
+      // Replace with your create mutation
+      return;
+    }
+    setStep((s) => s + 1);
+  }
+
+  function handleBack() {
+    if (step === 0) {
+      // Replace with your navigation back
+      return;
+    }
+    setStep((s) => s - 1);
+  }
+
+  return (
+    <PageFocused>
+      <div className="space-y-6">
+        {/* Step indicator */}
+        <nav aria-label="Progress" className="flex items-center justify-center gap-2">
+          {STEPS.map((label, i) => (
+            <div key={label} className="flex items-center gap-2">
+              <div className="flex items-center gap-1.5">
+                <div
+                  className={`flex size-6 items-center justify-center rounded-full text-xs font-medium ${
+                    i <= step ? 'bg-primary text-primary-foreground' : 'border border-border text-muted-foreground'
+                  }`}
+                >
+                  {i + 1}
+                </div>
+                <span className={`text-sm ${i <= step ? 'font-medium' : 'text-muted-foreground'}`}>{label}</span>
+              </div>
+              {i < STEPS.length - 1 && <div className="h-px w-8 bg-border" />}
+            </div>
+          ))}
+        </nav>
+
+        {/* Step content */}
+        <Card>
+          <CardContent className="space-y-4 pt-6">
+            {step === 0 && (
+              <>
+                <Field>
+                  <Label>Resource name</Label>
+                  <Input placeholder="Enter a name" />
+                </Field>
+                <Field>
+                  <Label>Description</Label>
+                  <Input placeholder="Optional description" />
+                </Field>
+              </>
+            )}
+            {step === 1 && (
+              <Field>
+                <Label>Configuration</Label>
+                <Input placeholder="Enter configuration value" />
+              </Field>
+            )}
+            {step === 2 && (
+              <div className="space-y-2">
+                <p className="text-sm font-medium">Review your configuration</p>
+                <p className="text-sm text-muted-foreground">Confirm the details below before creating.</p>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        <Separator />
+
+        {/* Navigation buttons */}
+        <div className="flex items-center justify-between">
+          <Button variant="outline" onClick={handleBack}>
+            <ArrowLeftIcon className="size-4" aria-hidden />
+            {step === 0 ? 'Cancel' : 'Back'}
+          </Button>
+          <Button onClick={handleNext}>
+            {isLastStep ? (
+              <>
+                <RocketIcon className="size-4" aria-hidden />
+                Create
+              </>
+            ) : (
+              <>
+                Next
+                <ArrowRightIcon className="size-4" aria-hidden />
+              </>
+            )}
+          </Button>
+        </div>
+      </div>
+    </PageFocused>
+  );
+}

package/snippets/json-schema-form-simple.tsx

@@ -63,7 +63,7 @@ export function PluginConfigPage({
   // `noValidate` disables the browser's HTML5 validation popups so the resolver +
   // <FieldError> remain the single source of validation messages.
   return (
-    <form noValidate onSubmit={form.handleSubmit(onSave)} className="flex flex-1 flex-col gap-4 p-8">
+    <form noValidate onSubmit={form.handleSubmit(onSave)} className="flex flex-1 flex-col gap-4">
       <JsonSchemaForm schema={pluginSchema} control={form.control} name="" context={formContext} />
       <Button type="submit">Save</Button>
     </form>

package/snippets/json-schema-form-with-meta.tsx

@@ -87,7 +87,7 @@ export function PluginConfigPage({ pluginSchema, initialValue, environment, onSa
   const { name: nameError } = form.formState.errors;
 
   return (
-    <form noValidate onSubmit={form.handleSubmit(onSave)} className="flex flex-1 flex-col gap-4 p-8">
+    <form noValidate onSubmit={form.handleSubmit(onSave)} className="flex flex-1 flex-col gap-4">
       {/* Host meta — validated by Zod. Duplicate this block for `description`, etc. */}
       <Field data-invalid={!!nameError}>
         <FieldLabel htmlFor="name">Name</FieldLabel>