Merge pull request #32 from idesigncode/components

Components: Corrected use of React fragment for JSX elements
idesigncode · Jul 29, 2023 · eeeabfb · eeeabfb
2 parents 8e08864 + 5b8aa0c
commit eeeabfb
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 23 deletions.
diff --git a/__snapshots__/components-propstable--all-prop-types.png b/__snapshots__/components-propstable--all-prop-types.png
diff --git a/__snapshots__/components-propstable--array-of-children.png b/__snapshots__/components-propstable--array-of-children.png
diff --git a/__snapshots__/components-propstable.test.js.snap b/__snapshots__/components-propstable.test.js.snap
@@ -99,16 +99,6 @@ exports[`Components/PropsTable All Prop Types test 1`] = `
                 <span class="token tag punctuation">
                   &lt;
                 </span>
-                <span class="token tag punctuation">
-                  &gt;
-                </span>
-                <span class="token plain-text">
-                </span>
-                <span class="token plain-text">
-                </span>
-                <span class="token tag punctuation">
-                  &lt;
-                </span>
                 <span class="token tag class-name">
                   Input
                 </span>
@@ -134,16 +124,6 @@ exports[`Components/PropsTable All Prop Types test 1`] = `
                 <span class="token tag punctuation">
                   /&gt;
                 </span>
-                <span class="token plain-text">
-                </span>
-                <span class="token plain-text">
-                </span>
-                <span class="token tag punctuation">
-                  &lt;/
-                </span>
-                <span class="token tag punctuation">
-                  &gt;
-                </span>
                 <span class="token punctuation">
                   ,
                 </span>
@@ -875,6 +855,80 @@ exports[`Components/PropsTable All Prop Types test 1`] = `
 <input style="display: none;">
 `;
 
+exports[`Components/PropsTable Array Of Children test 1`] = `
+<div class="propsTable sb-unstyled">
+  <table aria-hidden="false">
+    <thead>
+      <tr>
+        <th>
+          Prop
+        </th>
+        <th>
+          Type
+        </th>
+        <th>
+          Value
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          children
+          <span class="requiredProp">
+            *
+          </span>
+        </td>
+        <td>
+          <code>
+            node
+          </code>
+        </td>
+        <td>
+          <div class="Source sb-unstyled ">
+            <pre class="prismjs">
+              <code class="language-jsx"
+                    style="white-space: pre;"
+              >
+                <span class="token tag punctuation">
+                  &lt;
+                </span>
+                <span class="token tag class-name">
+                  Component
+                </span>
+                <span class="token tag">
+                </span>
+                <span class="token tag punctuation">
+                  /&gt;
+                </span>
+                <span class>
+                </span>
+                <span class>
+                </span>
+                <span class="token tag punctuation">
+                  &lt;
+                </span>
+                <span class="token tag">
+                  div
+                </span>
+                <span class="token tag">
+                </span>
+                <span class="token tag punctuation">
+                  /&gt;
+                </span>
+              </code>
+            </pre>
+            <button>
+              Copy
+            </button>
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+`;
+
 exports[`Components/PropsTable Automatic Props Source test 1`] = `
 <div class="Source sb-unstyled ">
   <pre class="prismjs">

diff --git a/src/formatValueToString.mjs b/src/formatValueToString.mjs
@@ -55,11 +55,11 @@ const formatValueToString = (code, type) => {
 
         // JSX elements
         return addRemoveOuterQuotes(
-          `<>${
+          `${
             value instanceof Array
-              ? addRemoveOuterQuotes(value.map(formatNodeToJsxString).join(''))
+              ? `<>${value.map(formatNodeToJsxString).join('')}</>`
               : formatNodeToJsxString(value)
-          }</>`,
+          }`,
         );
       }
 

diff --git a/stories/PropsTable.stories.mjs b/stories/PropsTable.stories.mjs
@@ -143,6 +143,18 @@ export const AllPropTypes = {
   render: ComponentExample,
 };
 
+export const ArrayOfChildren = {
+  args: {
+    children: (
+      <PropsTable>
+        <Component />
+        <div />
+      </PropsTable>
+    ),
+    hideChildren: true,
+  },
+};
+
 export const RefValueUpdates = {
   render: () => {
     const [value, setValue] = React.useState('');