feat: custom collection card template (#433)

Author: KaneFreeman

package.json

@@ -14,7 +14,8 @@
     "test:ci": "lerna run test:ci",
     "test:integration:ci": "lerna run test:integration:ci",
     "test:integration": "lerna run test:integration",
-    "test": "lerna run test"
+    "test": "lerna run test",
+    "type-check": "lerna run type-check --scope @staticcms/core"
   },
   "devDependencies": {
     "husky": "8.0.3",

packages/core/dev-test/index.html

@@ -9,19 +9,19 @@
         _posts: {
           '2015-02-14-this-is-a-post.md': {
             content:
-              '---\ntitle: This is a YAML front matter post\nimage: /assets/uploads/moby-dick.jpg\ndate: 2015-02-14T00:00:00.000Z\n---\n\n# I Am a Title in Markdown\n\nHello, world\n\n* One Thing\n* Another Thing\n* A Third Thing\n',
+              '---\ntitle: This is a YAML front matter post\ndraft: true\nimage: /assets/uploads/moby-dick.jpg\ndate: 2015-02-14T00:00:00.000Z\n---\n\n# I Am a Title in Markdown\n\nHello, world\n\n* One Thing\n* Another Thing\n* A Third Thing\n',
           },
           '2015-02-15-this-is-a-json-frontmatter-post.md': {
             content:
-              '{\n"title": "This is a JSON front matter post",\n"image": "/assets/uploads/moby-dick.jpg",\n"date": "2015-02-15T00:00:00.000Z"\n}\n\n# I Am a Title in Markdown\n\nHello, world\n\n* One Thing\n* Another Thing\n* A Third Thing\n',
+              '{\n"title": "This is a JSON front matter post",\n"draft": false,\n"image": "/assets/uploads/moby-dick.jpg",\n"date": "2015-02-15T00:00:00.000Z"\n}\n\n# I Am a Title in Markdown\n\nHello, world\n\n* One Thing\n* Another Thing\n* A Third Thing\n',
           },
           '2015-02-16-this-is-a-toml-frontmatter-post.md': {
             content:
               '+++\ntitle = "This is a TOML front matter post"\nimage = "/assets/uploads/moby-dick.jpg"\ndate = "2015-02-16T00:00:00.000Z"\n+++\n\n# I Am a Title in Markdown\n\nHello, world\n\n* One Thing\n* Another Thing\n* A Third Thing\n',
           },
           '2015-02-14-this-is-a-post-with-a-different-extension.other': {
             content:
-              '---\ntitle: This post should not appear because the extension is different\nimage: /assets/uploads/moby-dick.jpg\ndate: 2015-02-14T00:00:00.000Z\n---\n\n# I Am a Title in Markdown\n\nHello, world\n\n* One Thing\n* Another Thing\n* A Third Thing\n',
+              '---\ntitle: This post should not appear because the extension is different\ndraft: false\nimage: /assets/uploads/moby-dick.jpg\ndate: 2015-02-14T00:00:00.000Z\n---\n\n# I Am a Title in Markdown\n\nHello, world\n\n* One Thing\n* Another Thing\n* A Third Thing\n',
           },
         },
         _faqs: {

packages/core/dev-test/index.js

@@ -11,6 +11,59 @@ const PostPreview = ({ entry, widgetFor }) => {
   );
 };
 
+const PostPreviewCard = ({ entry, widgetFor, viewStyle }) => {
+  return h(
+    'div',
+    { style: { width: '100%' } },
+    viewStyle === 'grid' ? widgetFor('image') : null,
+    h(
+      'div',
+      { style: { padding: '16px', width: '100%' } },
+      h(
+        'div',
+        {
+          style: {
+            display: 'flex',
+            width: '100%',
+            justifyContent: 'space-between',
+            alignItems: 'start',
+          },
+        },
+        h(
+          'div',
+          {
+            style: {
+              display: 'flex',
+              flexDirection: viewStyle === 'grid' ? 'column' : 'row',
+              alignItems: 'baseline',
+              gap: '8px',
+            },
+          },
+          h('strong', { style: { fontSize: '24px' } }, entry.data.title),
+          h('span', { style: { fontSize: '16px' } }, entry.data.date),
+        ),
+        h(
+          'div',
+          {
+            style: {
+              backgroundColor: entry.data.draft === true ? 'blue' : 'green',
+              color: 'white',
+              border: 'none',
+              padding: '4px 8px',
+              textAlign: 'center',
+              textDecoration: 'none',
+              display: 'inline-block',
+              cursor: 'pointer',
+              borderRadius: '4px',
+            },
+          },
+          entry.data.draft === true ? 'Draft' : 'Published',
+        ),
+      ),
+    ),
+  );
+};
+
 const GeneralPreview = ({ widgetsFor, entry, collection }) => {
   const title = entry.data.site_title;
   const posts = entry.data.posts;
@@ -80,6 +133,7 @@ const CustomPage = () => {
 };
 
 CMS.registerPreviewTemplate('posts', PostPreview);
+CMS.registerPreviewCard('posts', PostPreviewCard);
 CMS.registerPreviewTemplate('general', GeneralPreview);
 CMS.registerPreviewTemplate('authors', AuthorsPreview);
 // Pass the name of a registered control to reuse with a new widget preview.

packages/core/src/components/Collection/Entries/EntryCard.tsx

@@ -10,8 +10,16 @@ import { Link } from 'react-router-dom';
 import { getAsset as getAssetAction } from '@staticcms/core/actions/media';
 import { VIEW_STYLE_GRID, VIEW_STYLE_LIST } from '@staticcms/core/constants/collectionViews';
 import useMediaAsset from '@staticcms/core/lib/hooks/useMediaAsset';
-import { selectEntryCollectionTitle } from '@staticcms/core/lib/util/collection.util';
+import { getPreviewCard } from '@staticcms/core/lib/registry';
+import {
+  selectEntryCollectionTitle,
+  selectFields,
+  selectTemplateName,
+} from '@staticcms/core/lib/util/collection.util';
+import { selectConfig } from '@staticcms/core/reducers/selectors/config';
 import { selectIsLoadingAsset } from '@staticcms/core/reducers/selectors/medias';
+import { useAppSelector } from '@staticcms/core/store/hooks';
+import useWidgetsFor from '../../common/widget/useWidgetsFor';
 
 import type { CollectionViewStyle } from '@staticcms/core/constants/collectionViews';
 import type { Collection, Entry, Field } from '@staticcms/core/interface';
@@ -29,8 +37,45 @@ const EntryCard = ({
 }: NestedCollectionProps) => {
   const summary = useMemo(() => selectEntryCollectionTitle(collection, entry), [collection, entry]);
 
+  const fields = selectFields(collection, entry.slug);
   const imageUrl = useMediaAsset(image, collection, imageField, entry);
 
+  const config = useAppSelector(selectConfig);
+
+  const { widgetFor, widgetsFor } = useWidgetsFor(config, collection, fields, entry);
+
+  const PreviewCardComponent = useMemo(
+    () => getPreviewCard(selectTemplateName(collection, entry.slug)) ?? null,
+    [collection, entry.slug],
+  );
+
+  if (PreviewCardComponent) {
+    return (
+      <Card>
+        <CardActionArea
+          component={Link}
+          to={path}
+          sx={{
+            height: '100%',
+            position: 'relative',
+            display: 'flex',
+            width: '100%',
+            justifyContent: 'start',
+          }}
+        >
+          <PreviewCardComponent
+            collection={collection}
+            fields={fields}
+            entry={entry}
+            viewStyle={viewStyle === VIEW_STYLE_LIST ? 'list' : 'grid'}
+            widgetFor={widgetFor}
+            widgetsFor={widgetsFor}
+          />
+        </CardActionArea>
+      </Card>
+    );
+  }
+
   return (
     <Card>
       <CardActionArea component={Link} to={path}>

packages/core/src/components/Editor/EditorPreviewPane/EditorPreview.tsx

@@ -1,7 +1,7 @@
 import { styled } from '@mui/material/styles';
 import React from 'react';
 
-import type { TemplatePreviewProps } from '@staticcms/core/interface';
+import type { ObjectValue, TemplatePreviewProps } from '@staticcms/core/interface';
 
 const PreviewContainer = styled('div')`
   overflow-y: auto;
@@ -10,7 +10,7 @@ const PreviewContainer = styled('div')`
   font-family: Roboto, 'Helvetica Neue', HelveticaNeue, Helvetica, Arial, sans-serif;
 `;
 
-const Preview = ({ collection, fields, widgetFor }: TemplatePreviewProps) => {
+const Preview = ({ collection, fields, widgetFor }: TemplatePreviewProps<ObjectValue>) => {
   if (!collection || !fields) {
     return null;
   }