Add carousel component block demo to website and move demo component …

…blocks to tests/sandbox (#7614)
keystonejs · Jun 14, 2022 · f488a0c · f488a0c
1 parent 65382ed
commit f488a0c
Show file tree

Hide file tree

Showing 7 changed files with 117 additions and 232 deletions.
diff --git a/docs/components/docs/DocumentEditorDemo.tsx b/docs/components/docs/DocumentEditorDemo.tsx
@@ -20,7 +20,7 @@ import { Global, jsx } from '@emotion/react';
 
 import { FormValueContentFromPreviewProps } from '@keystone-6/fields-document/src/DocumentEditor/component-blocks/form-from-preview';
 import { createGetPreviewProps } from '@keystone-6/fields-document/src/DocumentEditor/component-blocks/preview-props';
-import { componentBlocks as componentBlocksInExampleProject } from '../../../examples-staging/basic/admin/fieldViews/Content';
+import { componentBlocks as componentBlocksInSandboxProject } from '../../../tests/sandbox/component-blocks';
 import { initialContent } from '../../lib/initialDocumentDemoContent';
 import { Code } from '../primitives/Code';
 
@@ -84,10 +84,11 @@ type DocumentFeaturesFormValue = Parameters<
 const emptyObj = {};
 
 const componentBlocks = {
-  notice: componentBlocksInExampleProject.notice,
-  hero: componentBlocksInExampleProject.hero,
-  quote: componentBlocksInExampleProject.quote,
-  checkboxList: componentBlocksInExampleProject.checkboxList,
+  notice: componentBlocksInSandboxProject.notice,
+  hero: componentBlocksInSandboxProject.hero,
+  quote: componentBlocksInSandboxProject.quote,
+  checkboxList: componentBlocksInSandboxProject.checkboxList,
+  carousel: componentBlocksInSandboxProject.carousel,
 };
 
 type DocumentFieldConfig = Parameters<typeof import('@keystone-6/fields-document').document>[0];
@@ -310,6 +311,9 @@ export const DocumentEditorDemo = () => {
         'ul, ol': {
           lineHeight: 1.75,
         },
+        button: {
+          borderWidth: 0,
+        },
       }}
     >
       <Global

diff --git a/docs/lib/initialDocumentDemoContent.ts b/docs/lib/initialDocumentDemoContent.ts
@@ -226,6 +226,36 @@ export const initialContent = [
       },
     ],
   },
+  {
+    type: 'component-block',
+    component: 'carousel',
+    props: {
+      items: [
+        {
+          title: 'This is a carousel',
+          image: 'https://images.unsplash.com/photo-1618172193763-c511deb635ca',
+        },
+        {
+          title: 'It’s built with component block array fields',
+          image: 'https://images.unsplash.com/photo-1633412802994-5c058f151b66',
+        },
+        {
+          title: 'Click edit to reorder it via drag and drop',
+          image: 'https://images.unsplash.com/photo-1635377090186-036bca445c6b',
+        },
+      ],
+    },
+    children: [
+      {
+        type: 'component-inline-prop',
+        children: [
+          {
+            text: '',
+          },
+        ],
+      },
+    ],
+  },
   {
     type: 'paragraph',
     children: [

diff --git a/examples-staging/basic/admin/pages/post/[id].tsx b/examples-staging/basic/admin/pages/post/[id].tsx
diff --git a/examples-staging/basic/schema.ts b/examples-staging/basic/schema.ts
@@ -12,7 +12,6 @@ import {
 } from '@keystone-6/core/fields';
 import { document } from '@keystone-6/fields-document';
 import { v4 } from 'uuid';
-import { componentBlocks } from './admin/fieldViews/Content';
 import * as Keystone from '.keystone/types';
 
 type AccessArgs = {
@@ -150,7 +149,6 @@ export const lists: Keystone.Lists = {
         defaultValue: 'draft',
       }),
       content: document({
-        ui: { views: require.resolve('./admin/fieldViews/Content.tsx') },
         relationships: {
           mention: {
             label: 'Mention',
@@ -167,7 +165,6 @@ export const lists: Keystone.Lists = {
         ],
         links: true,
         dividers: true,
-        componentBlocks,
       }),
       publishDate: timestamp(),
       author: relationship({