fix: formatters

Author: Jakub Jankowski

src/__tests__/__snapshots__/index.spec.tsx.snap

@@ -2847,7 +2847,7 @@ exports[`HTML Output should match default-schema.json 1`] = `
           <span>20</span>
         </div>
         <div>
-          <span>Multiple of value:</span>
+          <span>Multiple of:</span>
           <span>10</span>
         </div>
         <div style=\\"height: 1px\\"><div style=\\"height: 1px; background-color: lightgray\\"></div></div>
@@ -2867,8 +2867,8 @@ exports[`HTML Output should match default-schema.json 1`] = `
           <span>required</span>
         </div>
         <div>
-          <span>Match pattern value:</span>
-          <span>\\"MM/dd/yyyy H:mm\\"</span>
+          <span>Match pattern:</span>
+          <span>MM/dd/yyyy H:mm</span>
         </div>
         <div style=\\"height: 1px\\"><div style=\\"height: 1px; background-color: lightgray\\"></div></div>
       </div>

src/components/shared/Validations.tsx

@@ -37,26 +37,32 @@ const numberValidationFormatters: Record<string, (value: unknown) => string> = {
   maxLength: value => `<= ${value} characters`,
 };
 
-const validationsFormatter = (name: string) => (value: unknown[] | unknown): ValidationFormat | null => {
+const createStringFormatter = (nowrap: boolean | undefined) => (value: unknown) => {
+  return nowrap || typeof value !== 'string' ? String(value) : `"${value}"`;
+};
+
+const createValidationsFormatter = (name: string, options?: { exact?: boolean; nowrap?: boolean }) => (
+  value: unknown[] | unknown,
+): ValidationFormat | null => {
   const values = Array.isArray(value) ? value : [value];
   if (values.length) {
     return {
-      name: values.length > 1 ? `${name} values` : `${name} value`,
-      values: values.map(stringifyValue),
+      name: options?.exact ? name : values.length > 1 ? `${name} values` : `${name} value`,
+      values: values.map(createStringFormatter(options?.nowrap)),
     };
   }
   return null;
 };
 
 const validationFormatters: Record<string, (value: unknown) => ValidationFormat | null> = {
-  ['const']: validationsFormatter('Allowed'),
-  enum: validationsFormatter('Allowed'),
-  examples: validationsFormatter('Example'),
-  example: validationsFormatter('Example'),
-  ['x-example']: validationsFormatter('Example'),
-  multipleOf: validationsFormatter('Multiple of'),
-  pattern: validationsFormatter('Match pattern'),
-  default: validationsFormatter('Default'),
+  ['const']: createValidationsFormatter('Allowed'),
+  enum: createValidationsFormatter('Allowed'),
+  examples: createValidationsFormatter('Example'),
+  example: createValidationsFormatter('Example'),
+  ['x-example']: createValidationsFormatter('Example'),
+  multipleOf: createValidationsFormatter('Multiple of', { exact: true }),
+  pattern: createValidationsFormatter('Match pattern', { exact: true, nowrap: true }),
+  default: createValidationsFormatter('Default'),
 };
 
 export const Validations: React.FunctionComponent<IValidations> = ({ validations }) => {
@@ -125,7 +131,7 @@ const KeyValueValidation = ({ className, name, values }: { className?: string; n
   return (
     <Flex flexWrap color="muted" my={2} className={className}>
       <Text fontWeight="light">{capitalize(name)}:</Text>
-      {values.map(value => (
+      {uniq(values).map(value => (
         <Text key={value} ml={2} px={1} fontFamily="mono" border rounded="lg" className={className}>
           {value}
         </Text>
@@ -178,7 +184,3 @@ export function getValidationsFromSchema(schemaNode: RegularNode) {
     ...schemaNode.validations,
   };
 }
-
-function stringifyValue(value: unknown) {
-  return typeof value === 'string' ? `"${value}"` : String(value);
-}

src/components/shared/__tests__/Validations.spec.tsx

@@ -25,7 +25,7 @@ describe('Validations component', () => {
     expect(wrapper).toIncludeText('>= 10<= 40');
     expect(wrapper).toIncludeText('Allowed values:10203040');
     expect(wrapper).toIncludeText('Default value:20');
-    expect(wrapper).toIncludeText('Multiple of value:10');
+    expect(wrapper).toIncludeText('Multiple of:10');
     expect(wrapper).toIncludeText('Example value:20');
   });