fix(striker-ui): allow override render entry value, skip uuid entries in form summary

striker-ui/components/FormSummary.tsx

@@ -1,9 +1,9 @@
 import { Box, List as MUIList, ListItem as MUIListItem } from '@mui/material';
 import { FC, ReactElement } from 'react';
 
+import disassembleCamel from '../lib/disassembleCamel';
 import FlexBox from './FlexBox';
 import { BodyText, MonoText, SensitiveText } from './Text';
-import disassembleCamel from '../lib/disassembleCamel';
 
 const renderEntryValueWithMono: RenderFormValueFunction = ({ entry }) => (
   <MonoText whiteSpace="nowrap">{String(entry)}</MonoText>
@@ -19,12 +19,43 @@ const renderEntryValueWithPassword: RenderFormValueFunction = (args) => {
   );
 };
 
-const buildEntryList = ({
+const renderEntryValueBase: RenderFormValueFunction = (args) => {
+  const { entry, hasPassword } = args;
+
+  if (['', null, undefined].some((bad) => entry === bad)) {
+    return <BodyText>none</BodyText>;
+  }
+
+  return hasPassword
+    ? renderEntryValueWithPassword(args)
+    : renderEntryValueWithMono(args);
+};
+
+const renderEntryBase: RenderFormEntryFunction = (args) => {
+  const { depth, entry, getLabel, hasPassword, key, nest, renderValue } = args;
+
+  return (
+    <FlexBox fullWidth growFirst row maxWidth="100%">
+      <BodyText>
+        {getLabel({ cap: disassembleCamel, depth, entry, hasPassword, key })}
+      </BodyText>
+      <Box sx={{ maxWidth: '100%', overflowX: 'scroll' }}>
+        {!nest &&
+          renderValue(renderEntryValueBase, { depth, entry, hasPassword, key })}
+      </Box>
+    </FlexBox>
+  );
+};
+
+const skipBase: SkipFormEntryFunction = ({ key }) => !/confirm|uuid/i.test(key);
+
+const buildEntryList = <T extends FormEntries>({
   depth = 0,
   entries,
   getEntryLabel,
   getListProps,
   getListItemProps,
+  hasPassword,
   listKey,
   maxDepth,
   renderEntry,
@@ -37,11 +68,12 @@ const buildEntryList = ({
   getListProps?: GetFormEntriesPropsFunction;
   getListItemProps?: GetFormEntryPropsFunction;
   listKey?: string;
-  maxDepth: number;
-  renderEntry: RenderFormEntryFunction;
-  renderEntryValue: RenderFormValueFunction;
-  skip: Exclude<FormSummaryOptionalProps['skip'], undefined>;
-}): ReactElement => {
+} & Required<
+  Pick<
+    FormSummaryProps<T>,
+    'hasPassword' | 'maxDepth' | 'renderEntry' | 'renderEntryValue' | 'skip'
+  >
+>): ReactElement => {
   const result: ReactElement[] = [];
 
   Object.entries(entries).forEach(([itemKey, entry]) => {
@@ -54,10 +86,11 @@ const buildEntryList = ({
     const fnArgs: CommonFormEntryHandlerArgs = {
       depth,
       entry: value,
+      hasPassword,
       key: itemKey,
     };
 
-    if (skip(({ key }) => !/confirm/i.test(key), fnArgs)) {
+    if (skip(skipBase, fnArgs)) {
       result.push(
         <MUIListItem
           key={itemId}
@@ -68,6 +101,7 @@ const buildEntryList = ({
             depth,
             entry: value,
             getLabel: getEntryLabel,
+            hasPassword,
             key: itemKey,
             nest,
             renderValue: renderEntryValue,
@@ -78,10 +112,11 @@ const buildEntryList = ({
 
     if (nest && depth < maxDepth) {
       result.push(
-        buildEntryList({
+        buildEntryList<T>({
           depth: depth + 1,
           entries: entry,
           getEntryLabel,
+          hasPassword,
           listKey: itemKey,
           maxDepth,
           renderEntry,
@@ -111,37 +146,18 @@ const FormSummary = <T extends FormEntries>({
   getEntryLabel = ({ cap, key }) => cap(key),
   getListProps,
   getListItemProps,
-  hasPassword,
+  hasPassword = false,
   maxDepth = 3,
-  renderEntry = ({ depth, entry, getLabel, key, nest, renderValue }) => (
-    <FlexBox fullWidth growFirst row maxWidth="100%">
-      <BodyText>
-        {getLabel({ cap: disassembleCamel, depth, entry, key })}
-      </BodyText>
-      <Box sx={{ maxWidth: '100%', overflowX: 'scroll' }}>
-        {!nest && renderValue({ depth, entry, key })}
-      </Box>
-    </FlexBox>
-  ),
-  // Prop(s) that rely on other(s).
-  renderEntryValue = (args) => {
-    const { entry } = args;
-
-    if (['', null, undefined].some((bad) => entry === bad)) {
-      return <BodyText>none</BodyText>;
-    }
-
-    return hasPassword
-      ? renderEntryValueWithPassword(args)
-      : renderEntryValueWithMono(args);
-  },
+  renderEntry = renderEntryBase,
+  renderEntryValue = (base, ...args) => base(...args),
   skip = (base, ...args) => base(...args),
 }: FormSummaryProps<T>): ReturnType<FC<FormSummaryProps<T>>> =>
-  buildEntryList({
+  buildEntryList<T>({
     entries,
     getEntryLabel,
     getListProps,
     getListItemProps,
+    hasPassword,
     maxDepth,
     renderEntry,
     renderEntryValue,

striker-ui/types/FormSummary.d.ts

@@ -7,6 +7,7 @@ type FormEntries = {
 type CommonFormEntryHandlerArgs = {
   depth: number;
   entry: FormEntry;
+  hasPassword: boolean;
   key: string;
 };
 
@@ -36,7 +37,10 @@ type RenderFormEntryFunction = (
   args: CommonFormEntryHandlerArgs & {
     getLabel: GetFormEntryLabelFunction;
     nest: boolean;
-    renderValue: RenderFormValueFunction;
+    renderValue: (
+      base: RenderFormValueFunction,
+      ...rfvargs: Parameters<RenderFormValueFunction>
+    ) => ReturnType<RenderFormValueFunction>;
   },
 ) => import('react').ReactElement;
 
@@ -49,7 +53,10 @@ type FormSummaryOptionalProps = {
   hasPassword?: boolean;
   maxDepth?: number;
   renderEntry?: RenderFormEntryFunction;
-  renderEntryValue?: RenderFormValueFunction;
+  renderEntryValue?: (
+    base: RenderFormValueFunction,
+    ...args: Parameters<RenderFormValueFunction>
+  ) => ReturnType<RenderFormValueFunction>;
   skip?: (
     base: SkipFormEntryFunction,
     ...args: Parameters<SkipFormEntryFunction>