feat: Add PermutationsView component with tests

Author: amanabiy

src/internal/permutations-view/index.ts

@@ -0,0 +1,4 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+export { default as PermutationsView } from './permutations-view';

src/internal/permutations-view/permutations-view.tsx

@@ -0,0 +1,42 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+
+interface PermutationsViewProps<T> {
+  permutations: ReadonlyArray<T>;
+  render: (props: T, index?: number) => React.ReactElement;
+}
+
+function formatValue(key: string, value: any) {
+  if (typeof value === 'function') {
+    return value.toString();
+  }
+  if (value && value.$$typeof) {
+    // serialize React content to string
+    // TODO: Pretty-print original JSX, currently this are bare VDOM nodes
+    return JSON.stringify(value);
+  }
+  return value;
+}
+
+const maximumPermutations = 276;
+
+export default function PermutationsView<T>({ permutations, render }: PermutationsViewProps<T>) {
+  if (permutations.length > maximumPermutations) {
+    throw new Error(`Too many permutations (${permutations.length}), maximum is ${maximumPermutations}`);
+  }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+      {permutations.map((permutation, index) => {
+        const id = JSON.stringify(permutation, formatValue);
+        return (
+          <div key={id} data-permutation={id}>
+            {render(permutation, index)}
+          </div>
+        );
+      })}
+    </div>
+  );
+}