@gravitee/graphene-core 2.49.0-graphene-142-code-editor.6ff118a → 2.49.0-json-schema-form-context.da98610

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravitee/graphene-core",
-  "version": "2.49.0-graphene-142-code-editor.6ff118a",
+  "version": "2.49.0-json-schema-form-context.da98610",
   "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,7 +95,7 @@
   },
   "peerDependencies": {
     "@fontsource/dm-sans": ">=5.0.0",
-    "@gravitee/graphene-core": "2.49.0-graphene-142-code-editor.6ff118a",
+    "@gravitee/graphene-core": "2.49.0-json-schema-form-context.da98610",
     "@monaco-editor/react": "^4.7.0",
     "@tanstack/react-table": "^8.0.0",
     "@testing-library/dom": ">=10.0.0",

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

@@ -24,10 +24,23 @@ interface PluginConfigPageProps {
   // at the call site). A fresh object on every parent render defeats the `defaultValues`
   // memo and re-seeds the form, wiping in-progress user edits.
   readonly initialValue?: Record<string, unknown>;
+
+  // Host environment / feature flags / lock state read by `gioConfig.displayIf` /
+  // `gioConfig.disableIf` conditions of the form `{ "context.X": value }`. Remove this prop
+  // entirely if your schemas declare no `context.X` references.
+  readonly environment: 'production' | 'staging' | 'dev';
+  readonly readonlyMode: boolean;
+
   readonly onSave: (data: Record<string, unknown>) => void;
 }
 
-export function PluginConfigPage({ pluginSchema, initialValue, onSave }: PluginConfigPageProps) {
+export function PluginConfigPage({
+  pluginSchema,
+  initialValue,
+  environment,
+  readonlyMode,
+  onSave,
+}: PluginConfigPageProps) {
   // Memoize so `jsonSchemaResolver` does not recompile ajv on every parent render.
   const resolver = useMemo(() => jsonSchemaResolver(pluginSchema), [pluginSchema]);
   const defaultValues = useMemo(
@@ -35,6 +48,11 @@ export function PluginConfigPage({ pluginSchema, initialValue, onSave }: PluginC
     [pluginSchema, initialValue],
   );
 
+  // Stable object identity for the `context` prop. An inline `context={{ environment, readonlyMode }}`
+  // would create a new ref on every parent render and bust JsonSchemaForm's internal memo, re-rendering
+  // every field. `useMemo` keyed on the actual values keeps the ref stable until they change.
+  const formContext = useMemo(() => ({ environment, readonlyMode }), [environment, readonlyMode]);
+
   const form = useForm({
     resolver,
     defaultValues,
@@ -46,7 +64,7 @@ export function PluginConfigPage({ pluginSchema, initialValue, onSave }: PluginC
   // <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">
-      <JsonSchemaForm schema={pluginSchema} control={form.control} name="" />
+      <JsonSchemaForm schema={pluginSchema} control={form.control} name="" context={formContext} />
       <Button type="submit">Save</Button>
     </form>
   );

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

@@ -40,10 +40,14 @@ type FormValues = z.infer<typeof metaSchema> & { config: Record<string, unknown>
 interface PluginConfigPageProps {
   readonly pluginSchema: JsonSchema;
   readonly initialValue?: Partial<FormValues>;
+  // Host environment / feature flags read by `gioConfig.displayIf` / `gioConfig.disableIf`
+  // conditions of the form `{ "context.X": value }`. Remove if your schemas declare no
+  // `context.X` references.
+  readonly environment: 'production' | 'staging' | 'dev';
   readonly onSave: (data: FormValues) => void;
 }
 
-export function PluginConfigPage({ pluginSchema, initialValue, onSave }: PluginConfigPageProps) {
+export function PluginConfigPage({ pluginSchema, initialValue, environment, onSave }: PluginConfigPageProps) {
   // `basePath: 'config'` must match the `name` prop on <JsonSchemaForm> below.
   // Cast widens zodResolver to the composite values shape — each inner resolver reads
   // only its own slice of `values` at runtime, so the cast is sound.
@@ -66,6 +70,10 @@ export function PluginConfigPage({ pluginSchema, initialValue, onSave }: PluginC
     [pluginSchema],
   );
 
+  // Stable identity for the `context` prop on JsonSchemaForm — inline `{{ environment }}`
+  // would create a fresh ref each render and re-render every field downstream.
+  const formContext = useMemo(() => ({ environment }), [environment]);
+
   const form = useForm<FormValues>({
     resolver,
     mode: 'onTouched',
@@ -88,8 +96,15 @@ export function PluginConfigPage({ pluginSchema, initialValue, onSave }: PluginC
       </Field>
 
       {/* Plugin sub-tree — fields registered under `values.config.*`. JsonSchemaForm is typed
-          against the generic RHF FieldValues; cast widens the narrow composite control. */}
-      <JsonSchemaForm schema={pluginSchema} control={form.control as unknown as Control} name="config" />
+          against the generic RHF FieldValues; cast widens the narrow composite control.
+          `context` is memoized at the call site (here, via the `formContext` const below) so
+          a fresh ref does not bust JsonSchemaForm's internal memo every parent render. */}
+      <JsonSchemaForm
+        schema={pluginSchema}
+        control={form.control as unknown as Control}
+        name="config"
+        context={formContext}
+      />
 
       <Button type="submit">Save</Button>
     </form>

package/dist/__stories__/fixtures/json-schema-form/code-editor.fixture.d.ts

@@ -1,14 +0,0 @@
-import { JsonSchema } from '../../../composed/JsonSchemaForm';
-/**
- * Mirrors ui-particles' `codeEditorExample`
- * (`gio-form-json-schema/json-schema-example/code-editor.ts`) and the shape used by real APIM
- * plugins (`format: 'gio-code-editor'`, e.g. the dynamic-properties HTTP service's JOLT
- * transformation field). Forcing function for ISO behaviour: a Particles-authored schema must
- * render the same widget in Graphene.
- *
- * The trigger is `type: 'string'` + `format: 'gio-code-editor'`. The language is read from
- * `gioConfig.monacoEditorConfig.language` when present; otherwise the editor falls back to JSON
- * auto-detection (JSON payload → `json`, else `plaintext`), matching Particles.
- */
-export declare const jsonSchemaFormCodeEditorSchema: JsonSchema;
-//# sourceMappingURL=code-editor.fixture.d.ts.map

package/dist/__stories__/fixtures/json-schema-form/code-editor.fixture.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"code-editor.fixture.d.ts","sourceRoot":"","sources":["../../../../src/__stories__/fixtures/json-schema-form/code-editor.fixture.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iDAAiD,CAAC;AAElF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,8BAA8B,EAAE,UA2C5C,CAAC"}

package/dist/composed/JsonSchemaForm/fields/code-editor/CodeEditorField.d.ts

@@ -1,8 +0,0 @@
-import { SchemaNode } from '../../schema/types';
-interface CodeEditorFieldProps {
-    readonly node: SchemaNode;
-    readonly name: string;
-}
-declare function CodeEditorField({ node, name }: CodeEditorFieldProps): import("react").JSX.Element;
-export { CodeEditorField };
-//# sourceMappingURL=CodeEditorField.d.ts.map

package/dist/composed/JsonSchemaForm/fields/code-editor/CodeEditorField.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CodeEditorField.d.ts","sourceRoot":"","sources":["../../../../../src/composed/JsonSchemaForm/fields/code-editor/CodeEditorField.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAKrD,UAAU,oBAAoB;IAC5B,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC;IAC1B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;CACvB;AAoBD,iBAAS,eAAe,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,oBAAoB,+BAuC5D;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}