Refactor Render component

mathesar_ui/src/component-library/fieldset-group/FieldsetGroup.svelte

@@ -4,8 +4,8 @@
   import type { LabelGetter } from '@mathesar-component-library-dir/common/utils/formatUtils';
   import { getLabel as defaultGetLabel } from '@mathesar-component-library-dir/common/utils/formatUtils';
   import LabeledInput from '@mathesar-component-library-dir/labeled-input/LabeledInput.svelte';
+  import Render from '@mathesar-component-library-dir/render/Render.svelte';
   import StringOrComponent from '@mathesar-component-library-dir/string-or-component/StringOrComponent.svelte';
-  import StringOrComponentTyped from '@mathesar-component-library-dir/string-or-component/StringOrComponentTyped.svelte';
   import type { ComponentWithProps } from '../types';
 
   type Option = $$Generic;
@@ -44,15 +44,9 @@
       {@const help = getHelp(option)}
       <li class="option" class:has-help={!!help}>
         <LabeledInput layout="inline-input-first">
-          <svelte:fragment slot="label">
-            <StringOrComponent arg={getLabel(option)} />
-          </svelte:fragment>
+          <StringOrComponent slot="label" arg={getLabel(option)} />
           <slot {option} disabled={getDisabled(option) || disabled} />
-          <svelte:fragment slot="help">
-            {#if help}
-              <StringOrComponentTyped arg={help} />
-            {/if}
-          </svelte:fragment>
+          <Render slot="help" arg={help} />
         </LabeledInput>
       </li>
     {/each}

mathesar_ui/src/component-library/index.ts

@@ -35,6 +35,7 @@ export { default as PasswordInput } from './password-input/PasswordInput.svelte'
 export { default as Progress } from './progress/Progress.svelte';
 export { default as Radio } from './radio/Radio.svelte';
 export { default as RadioGroup } from './radio-group/RadioGroup.svelte';
+export { default as Render } from './render/Render.svelte';
 export { default as Skeleton } from './skeleton/Skeleton.svelte';
 export { default as Spinner } from './spinner/Spinner.svelte';
 export { default as SpinnerArea } from './spinner-area/SpinnerArea.svelte';

mathesar_ui/src/component-library/margin-trim/MarginTrim.svelte

@@ -0,0 +1,16 @@
+<!--
+  @component Trims the outer margins of its children.
+-->
+
+<div class="margin-trim">
+  <slot />
+</div>
+
+<style>
+  .margin-trim > :first-child {
+    margin-top: 0;
+  }
+  .margin-trim > :last-child {
+    margin-bottom: 0;
+  }
+</style>

mathesar_ui/src/component-library/render/Render.svelte

@@ -1,17 +1,32 @@
 <script lang="ts">
   import type { SvelteComponent } from 'svelte';
 
-  import type { ComponentWithProps } from '../types';
+  import RenderComponentWithProps from './RenderComponentWithProps.svelte';
+  import MarginTrim from '@mathesar-component-library-dir/margin-trim/MarginTrim.svelte';
+  import type { ComponentWithProps } from '@mathesar-component-library-dir/types';
 
   type T = $$Generic<SvelteComponent>;
 
-  export let componentWithProps: ComponentWithProps<T>;
-
-  // I'm not sure how to fix the use of `any` here. Suggestions welcome!
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  $: component = componentWithProps.component as any;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  $: props = componentWithProps.props as any;
+  export let arg: string | string[] | ComponentWithProps<T> | undefined =
+    undefined;
 </script>
 
-<svelte:component this={component} {...props} />
+{#if arg === undefined}
+  {''}
+{:else if typeof arg === 'string'}
+  {arg}
+{:else if Array.isArray(arg)}
+  {#if arg.length === 0}
+    {''}
+  {:else if arg.length === 1}
+    {arg[0]}
+  {:else}
+    <MarginTrim>
+      {#each arg as paragraph}
+        <p>{paragraph}</p>
+      {/each}
+    </MarginTrim>
+  {/if}
+{:else}
+  <RenderComponentWithProps componentWithProps={arg} />
+{/if}

mathesar_ui/src/component-library/render/RenderComponentWithProps.svelte

@@ -0,0 +1,21 @@
+<!--
+  @component This component only exists to encapsulate usage of `any`. If we're
+able to remove usage of `any`, we could consider inlining this code instead.
+-->
+<script lang="ts">
+  import type { SvelteComponent } from 'svelte';
+
+  import type { ComponentWithProps } from '../types';
+
+  type T = $$Generic<SvelteComponent>;
+
+  export let componentWithProps: ComponentWithProps<T>;
+
+  // I'm not sure how to fix the use of `any` here. Suggestions welcome!
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  $: component = componentWithProps.component as any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  $: props = componentWithProps.props as any;
+</script>
+
+<svelte:component this={component} {...props} />

mathesar_ui/src/component-library/string-or-component/StringOrComponent.svelte

@@ -1,9 +1,8 @@
 <!--
   @component
 
-  @deprecated in favor of `StringOrComponentTyped` which uses
-  `ComponentWithProps` for better type safety in comparing a component to its
-  props.
+  @deprecated in favor of `Render` which accepts `ComponentWithProps` for better
+  type safety in comparing a component to its props.
 -->
 <script lang="ts">
   import type { ComponentAndProps } from '@mathesar-component-library-dir/types';