feat(react): accept both array and object for content

hygraph · May 12, 2021 · b9b2e23 · b9b2e23
1 parent cd92566
commit b9b2e23
Show file tree

Hide file tree

Showing 5 changed files with 128 additions and 85 deletions.
diff --git a/example/content.ts b/example/content.ts
@@ -1,61 +1,66 @@
 import { RichTextContent } from '@graphcms/rich-text-types';
 
-export const content: RichTextContent = [
-  {
-    type: 'heading-two',
-    children: [{ text: 'Awesome new GraphCMS cap!' }],
-  },
-  {
-    type: 'paragraph',
-    children: [
-      { text: 'Sweet black ' },
-      { bold: true, text: 'cap' },
-      { text: ' ' },
-      { text: 'with', underline: true },
-      { text: ' ' },
-      { text: 'embroidered', italic: true },
-      { text: ' ' },
-      { bold: true, text: 'GraphCMS' },
-      { text: ' logo.' },
-    ],
-  },
-  {
-    type: 'bulleted-list',
-    children: [
-      {
-        type: 'list-item',
-        children: [
-          {
-            type: 'list-item-child',
-            children: [{ text: 'Embroided logo' }],
-          },
-        ],
-      },
-      {
-        type: 'list-item',
-        children: [
-          { type: 'list-item-child', children: [{ text: 'Fits well' }] },
-        ],
-      },
-      {
-        type: 'list-item',
-        children: [
-          {
-            type: 'list-item-child',
-            children: [{ text: 'Comes in black' }],
-          },
-        ],
-      },
-      {
-        type: 'list-item',
-        children: [
-          {
-            type: 'list-item-child',
-            children: [{ text: 'Reasonably priced' }],
-          },
-        ],
-      },
-    ],
-  },
-  { type: 'paragraph', children: [{ text: '<Test />', code: true }] },
-];
+export const content: RichTextContent = {
+  children: [
+    {
+      type: 'heading-two',
+      children: [{ text: 'Awesome new GraphCMS cap!' }],
+    },
+    {
+      type: 'paragraph',
+      children: [
+        { text: 'Sweet black ' },
+        { bold: true, text: 'cap' },
+        { text: ' ' },
+        { text: 'with', underline: true },
+        { text: ' ' },
+        { text: 'embroidered', italic: true },
+        { text: ' ' },
+        { bold: true, text: 'GraphCMS' },
+        { text: ' logo.' },
+      ],
+    },
+    {
+      type: 'bulleted-list',
+      children: [
+        {
+          type: 'list-item',
+          children: [
+            {
+              type: 'list-item-child',
+              children: [{ text: 'Embroided logo' }],
+            },
+          ],
+        },
+        {
+          type: 'list-item',
+          children: [
+            {
+              type: 'list-item-child',
+              children: [{ text: 'Fits well' }],
+            },
+          ],
+        },
+        {
+          type: 'list-item',
+          children: [
+            {
+              type: 'list-item-child',
+              children: [{ text: 'Comes in black' }],
+            },
+          ],
+        },
+        {
+          type: 'list-item',
+          children: [
+            {
+              type: 'list-item-child',
+              children: [{ text: 'Reasonably priced' }],
+            },
+          ],
+        },
+      ],
+    },
+    { type: 'paragraph', children: [{ text: '<Test />', code: true }] },
+  ],
+};
diff --git a/packages/react/README.md b/packages/react/README.md
@@ -21,17 +21,19 @@ To render the content on your application, you'll need to provide the array of e
 ```tsx
 import { RichText } from '@graphcms/rich-text-react-renderer';
 
-const content = [
-  {
-    type: 'paragraph',
-    children: [
-      {
-        bold: true,
-        text: 'Hello World!',
-      },
-    ],
-  },
-];
+const content = {
+  children: [
+    {
+      type: 'paragraph',
+      children: [
+        {
+          bold: true,
+          text: 'Hello World!',
+        },
+      ],
+    },
+  ],
+};
 
 const App = () => {
   return <RichText content={content} />;
@@ -53,10 +55,6 @@ By default, the elements won't have any styling, despite the `IFrame`, which we
 ```tsx
 import { RichText } from '@graphcms/rich-text-react-renderer';
 
-/**
- * const content = [ ... ]
- */
-
 const App = () => {
   return (
     <div>

diff --git a/packages/react/src/RichText.tsx b/packages/react/src/RichText.tsx
@@ -66,14 +66,24 @@ export function RichText({ content, renderers: resolvers }: RichTextProps) {
   };
 
   if (__DEV__ && !content) {
-    console.error(`[@graphcms/rich-text-react-renderer]: Content is required.`);
+    console.error(`[@graphcms/rich-text-react-renderer]: content is required.`);
 
     return <Fragment />;
   }
 
+  if (__DEV__ && !Array.isArray(content) && !content.children) {
+    console.error(
+      `[@graphcms/rich-text-react-renderer]: children is required.`
+    );
+
+    return <Fragment />;
+  }
+
+  const elements = Array.isArray(content) ? content : content.children;
+
   return (
     <>
-      {content.map((node, index) => {
+      {elements.map((node, index) => {
         return <RenderNode node={node} renderers={renderers} key={index} />;
       })}
     </>

diff --git a/packages/react/test/RichText.test.tsx b/packages/react/test/RichText.test.tsx
@@ -13,7 +13,7 @@ import {
 } from './content';
 
 describe('@graphcms/rich-text-react-renderer', () => {
-  it('renders content', async () => {
+  it('renders content', () => {
     const { container } = render(<RichText content={content} />);
 
     expect(container).toMatchInlineSnapshot(`
@@ -27,11 +27,39 @@ describe('@graphcms/rich-text-react-renderer', () => {
     `);
   });
 
+  it('renders content correctly if received a object with children', () => {
+    const contentObject: RichTextContent = {
+      children: [
+        {
+          type: 'paragraph',
+          children: [
+            {
+              bold: true,
+              text: 'Hello World!',
+            },
+          ],
+        },
+      ],
+    };
+
+    const { container } = render(<RichText content={contentObject} />);
+
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <p>
+          <b>
+            Hello World!
+          </b>
+        </p>
+      </div>
+    `);
+  });
+
   /**
    * For now this is acceptable, but we should add a filter to remove all empty
    * elements from the content, in the future.
    */
-  it('should not render empty text', async () => {
+  it('should not render empty text', () => {
     const content: RichTextContent = [
       {
         type: 'paragraph',
@@ -108,7 +136,7 @@ describe('@graphcms/rich-text-react-renderer', () => {
     expect(container).toMatchSnapshot();
   });
 
-  it('renders link', async () => {
+  it('renders link', () => {
     const linkContent: RichTextContent = [
       {
         type: 'link',
@@ -144,7 +172,7 @@ describe('@graphcms/rich-text-react-renderer', () => {
     `);
   });
 
-  it('renders iframe', async () => {
+  it('renders iframe', () => {
     const iframeContent: RichTextContent = [
       {
         url: 'https://www.youtube.com/watch?v=Ylmd737tw5w',
@@ -162,7 +190,7 @@ describe('@graphcms/rich-text-react-renderer', () => {
     expect(container).toMatchSnapshot();
   });
 
-  it('renders class', async () => {
+  it('renders class', () => {
     const { container } = render(<RichText content={iframeContent} />);
 
     expect(container).toMatchInlineSnapshot(`
@@ -178,7 +206,7 @@ describe('@graphcms/rich-text-react-renderer', () => {
     `);
   });
 
-  it('renders class with custom renderer', async () => {
+  it('renders class with custom renderer', () => {
     const { container } = render(
       <RichText
         content={iframeContent}
@@ -203,7 +231,7 @@ describe('@graphcms/rich-text-react-renderer', () => {
     `);
   });
 
-  it('renders image', async () => {
+  it('renders image', () => {
     const { container } = render(<RichText content={imageContent} />);
 
     expect(container).toMatchInlineSnapshot(`
@@ -220,7 +248,7 @@ describe('@graphcms/rich-text-react-renderer', () => {
     `);
   });
 
-  it('renders image with custom renderer', async () => {
+  it('renders image with custom renderer', () => {
     const { container } = render(
       <RichText
         content={imageContent}

diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
@@ -110,7 +110,9 @@ export type ElementNode =
 
 export type Node = ElementNode | Text;
 
-export type RichTextContent = Array<ElementNode>;
+export type RichTextContent =
+  | Array<ElementNode>
+  | { children: Array<ElementNode> };
 
 export type RichTextProps = {
   content: RichTextContent;