DT-2971-change-codeblock-expand-to-maximize (#2771)

* add maximizable component

* add maximizable to code-block component

* add formatJSON utility

* convert code-block to svelte5 and refactor

* tweak code-block stories

* escape to close

* code tweaks from PR

* match existing types for copyable prop

* fix accessibility error: scroller must be focusable

* handle tabbing away from maximized code block

* increase z-index of maximized element

* update codeblock to use onChange callback instead of raising change event

* update payload-input to use codeblock onChange callback

* export prop types for storybook

* rename onChange to onchange and pass string instead of event

* make maximized bindable

* use svelte:window instead of addEventListener

* remove or extract ternaries

* clean up maximize button

* tune types for CodeBlock

* improve formatJson, fix bug rerturning undefined

* make reactive, allow controlled use

* apply to stories

* tidy

Author: andrewzamojc

src/lib/components/payload-input.svelte

@@ -28,8 +28,8 @@
     }
   };
 
-  const handleInputChange = (event: CustomEvent<string>): void => {
-    input = event.detail;
+  const handleInputChange = (text: string): void => {
+    input = text;
   };
 
   const clearValues = () => {
@@ -52,7 +52,7 @@
         {id}
         maxHeight={320}
         content={input}
-        on:change={handleInputChange}
+        onchange={handleInputChange}
         editable={editing}
         copyable={false}
       />

src/lib/holocene/code-block.stories.svelte

@@ -1,6 +1,7 @@
 <script lang="ts" context="module">
   import type { Meta } from '@storybook/svelte';
 
+  import type { Props } from '$lib/holocene/code-block.svelte';
   import CodeBlock from '$lib/holocene/code-block.svelte';
 
   export const meta = {
@@ -51,30 +52,35 @@
         table: { category: 'Copy Icon' },
       },
     },
-  } satisfies Meta<CodeBlock>;
+  } satisfies Meta<Props>;
 </script>
 
 <script lang="ts">
   import { action } from '@storybook/addon-actions';
   import { Story, Template } from '@storybook/addon-svelte-csf';
 
   import { stringifyWithBigInt } from '$lib/utilities/parse-with-big-int';
-</script>
 
-<Template id="json" let:args>
-  <CodeBlock language="json" {...args} on:change={action('change')} />
-</Template>
+  let editableContent = $state(
+    stringifyWithBigInt({ hello: 'world' }, null, 2),
+  );
 
-<Template id="shell" let:args>
-  <CodeBlock language="shell" {...args} on:change={action('change')} />
-</Template>
+  const handleEditableChange = (text: string) => {
+    editableContent = text;
+    action('change')(text);
+  };
+</script>
 
-<Template id="text" let:args>
-  <CodeBlock language="text" {...args} on:change={action('change')} />
+<Template let:args>
+  <CodeBlock {...args} onchange={action('change')} />
 </Template>
 
-<Template let:args>
-  <CodeBlock {...args} />
+<Template id="editable" let:args>
+  <CodeBlock
+    {...args}
+    content={editableContent}
+    onchange={handleEditableChange}
+  />
 </Template>
 
 <Story
@@ -86,9 +92,9 @@
 
 <Story
   name="Editable"
+  template="editable"
   args={{
     editable: true,
-    content: stringifyWithBigInt({ hello: 'world' }, null, 2),
   }}
 />
 
@@ -131,18 +137,25 @@
 />
 
 <Story
-  name="Shell"
+  name="Copyable (Maximum Height)"
   args={{
-    language: 'shell',
-    content: 'echo "Hello, World!"',
+    maxHeight: 100,
+    content: stringifyWithBigInt(
+      Object.getOwnPropertyDescriptors(Array.prototype),
+      null,
+      2,
+    ),
+    copyable: true,
+    copyIconTitle: 'Click to copy content',
+    copySuccessIconTitle: 'Content copied to clipboard',
   }}
 />
 
 <Story
-  name="Text"
+  name="Shell"
   args={{
-    language: 'text',
-    content: 'Hello, World!',
+    language: 'shell',
+    content: 'echo "Hello, World!"',
   }}
 />
 
@@ -157,6 +170,14 @@
   }}
 />
 
+<Story
+  name="Text"
+  args={{
+    language: 'text',
+    content: 'Hello, World!',
+  }}
+/>
+
 <Story
   name="Copyable (Text)"
   args={{