-##### Table View
-
-
-
##### Grid View
-## Field Preview
+## Collection Field Preview
`registerFieldPreview` allows you to create a custom preview for a specific field in the table view for collections.
diff --git a/packages/docs/content/docs/custom-widgets.mdx b/packages/docs/content/docs/custom-widgets.mdx
index 61c23424..21e7dcfe 100644
--- a/packages/docs/content/docs/custom-widgets.mdx
+++ b/packages/docs/content/docs/custom-widgets.mdx
@@ -373,7 +373,11 @@ If you want to use the media library in your custom widget you will need to use
```js
const FileControl = ({ collection, field, value, entry, onChange }) => {
- const handleOpenMediaLibrary = useMediaInsert(value, { field, controlID }, onChange);
+ const handleChange = ({ path }) => {
+ onChange(path);
+ };
+
+ const handleOpenMediaLibrary = useMediaInsert(value, { collection, field, controlID }, onChange);
const assetSource = useMediaAsset(value, collection, field, entry);
@@ -389,7 +393,11 @@ import useMediaAsset from '@staticcms/core/lib/hooks/useMediaAsset';
import useMediaInsert from '@staticcms/core/lib/hooks/useMediaInsert';
const FileControl = ({ collection, field, value, entry, onChange }) => {
- const handleOpenMediaLibrary = useMediaInsert(value, { field, controlID }, onChange);
+ const handleChange = ({ path }) => {
+ onChange(path);
+ };
+
+ const handleOpenMediaLibrary = useMediaInsert(value, { collection, field, controlID }, handleChange);
const assetSource = useMediaAsset(value, collection, field, entry);
@@ -408,7 +416,7 @@ const FileControl = ({ collection, field, value, entry, onChange }) => {
import useMediaAsset from '@staticcms/core/lib/hooks/useMediaAsset';
import useMediaInsert from '@staticcms/core/lib/hooks/useMediaInsert';
-import type { WidgetControlProps } from '@staticcms/core/interface';
+import type { WidgetControlProps, MediaPath } from '@staticcms/core/interface';
import type { FC } from 'react';
const FileControl: FC
> = ({
@@ -418,7 +426,11 @@ const FileControl: FC> = ({
entry,
onChange,
}) => {
- const handleOpenMediaLibrary = useMediaInsert(internalValue, { field, controlID }, onChange);
+ const handleChange = ({ path }: MediaPath) => {
+ onChange(path);
+ };
+
+ const handleOpenMediaLibrary = useMediaInsert(internalValue, { collection, field, controlID }, onChange);
const assetSource = useMediaAsset(value, collection, field, entry);
diff --git a/packages/docs/content/docs/migration-guide-v2.mdx b/packages/docs/content/docs/migration-guide-v2.mdx
new file mode 100644
index 00000000..b8d0313d
--- /dev/null
+++ b/packages/docs/content/docs/migration-guide-v2.mdx
@@ -0,0 +1,200 @@
+---
+group: Migration
+title: How to Upgrade to v2
+weight: 101
+---
+
+This guide is a work in progress and subject to change before the final `v2.0.0` release.
+
+Static CMS v2 introduces a brand new UI and an updated media library. In this guide, we will walk you through the steps for upgrading to Static CMS v2.
+
+Please [report any issues](https://github.com/StaticJsCMS/static-cms/issues/new) you encounter while upgrading to Static CMS v2.
+
+## Installing
+
+To install the latest version of Static CMS:
+
+```bash
+npm install @staticcms/core@^2.0.0-beta.1
+```
+
+Or if you’re using yarn:
+
+```bash
+yarn add @staticcms/core@^2.0.0-beta.1
+```
+
+If you are using a CDN to load Static CMS, simply change your URL:
+
+```html
+
+```
+
+## Deprecated Items Removed
+
+All previously deprecated items have been removed as part of this release.
+
+- `getAsset` - Use `useMediaAsset` React hook instead
+- `createReactClass` - Use [react functional components](https://react.dev/learn) instead
+- `isFieldDuplicate` - Use `duplicate` variable instead
+- `isFieldHidden` - Use `hidden` variable instead
+
+## Importing Static CMS Styles
+
+In `v2.0.0` the apps stylings are not longer bundled into the main javscript file. For both CDN and bundled setups, you will need to include the css file yourself.
+
+**CDN**:
+
+```html
+
+```
+
+**Bundling**:
+
+```js
+import '@staticcms/core/dist/main.css';
+```
+
+### Custom Preview Styles
+
+Some basic preview styles are now provided in order to properly support dark mode and make the basic previews look a bit better. However, if you [provide your own preview styles](/docs/custom-previews#editor-preview-styles) these default styles will not be included in the preview.
+
+## Nested Collections
+
+While still in beta, [Nested Collections](/docs/collection-types#nested-collections) are now fully working and supported in `v2.0.0`. However there are some breaking config changes. The `meta` config has been dropped and its `path` property has been moved into the `nested` prop. You can also no longer specify the widget type for the path.
+
+**Old Config**
+
+
+```yaml
+collections:
+ - name: pages
+ label: Pages
+ label_singular: 'Page'
+ folder: content/pages
+ create: true
+ nested:
+ depth: 100
+ summary: '{{title}}'
+ fields:
+ - label: Title
+ name: title
+ widget: string
+ - label: Body
+ name: body
+ widget: markdown
+ meta: { path: { widget: string, label: 'Path', index_file: 'index' } }
+```
+
+```js
+{
+ collections: [
+ {
+ name: 'pages',
+ label: 'Pages',
+ label_singular: 'Page',
+ folder: 'content/pages',
+ create: true,
+ nested: {
+ depth: 100,
+ summary: '{{title}}',
+ },
+ fields: [
+ {
+ label: 'Title',
+ name: 'title',
+ widget: 'string',
+ },
+ {
+ label: 'Body',
+ name: 'body',
+ widget: 'markdown',
+ },
+ ],
+ meta: {
+ path: {
+ widget: 'string',
+ label: 'Path',
+ index_file: 'index',
+ },
+ },
+ },
+ ];
+}
+```
+
+
+
+**New Config**
+
+
+```yaml
+collections:
+ - name: pages
+ label: Pages
+ label_singular: 'Page'
+ folder: content/pages
+ create: true
+ nested:
+ depth: 100
+ summary: '{{title}}'
+ path: { label: 'Path', index_file: 'index' }
+ fields:
+ - label: Title
+ name: title
+ widget: string
+ - label: Body
+ name: body
+ widget: markdown
+```
+
+```js
+{
+ collections: [
+ {
+ name: 'pages',
+ label: 'Pages',
+ label_singular: 'Page',
+ folder: 'content/pages',
+ create: true,
+ nested: {
+ depth: 100,
+ summary: '{{title}}',
+ path: {
+ label: 'Path',
+ index_file: 'index',
+ },
+ },
+ fields: [
+ {
+ label: 'Title',
+ name: 'title',
+ widget: 'string',
+ },
+ {
+ label: 'Body',
+ name: 'body',
+ widget: 'markdown',
+ },
+ ],
+ },
+ ];
+}
+```
+
+
+
+## Other Breaking Changes
+
+- [Card previews](/docs/custom-previews#collection-card-preview) now are only used for the card view. The `viewStyle` has been removed. [Field previews](/docs/custom-previews#field-preview) can be used to change the table view.
+- Widget Control component property changes:
+ - `isDisabled` renamed to `disabled`
+ - `isDuplicate` renamed to `duplicate`
+ - `isHidden` renamed to `hidden`
+ - `mediaPaths` is now object of id mapped to an object containing the `path` and optional `alt`
+- `useMediaInsert` hook now requires a collection to be passed in. Its callback function now receives an object containing the `path` and optional `alt` instead of a string.
+
+## Other Changes
+
+- `summary_fields` property added to [collection configuration](/docs/collection-overview) to allow customization of the table view. This works with the new [field preview](/docs/custom-previews).
+- New widget control property: `forSingleList`. It specifies if the widget is within a singleton `list` widget (string array, number array, etc)
diff --git a/packages/docs/src/components/docs/DocsContent.tsx b/packages/docs/src/components/docs/DocsContent.tsx
index 370d4b05..6cba725d 100644
--- a/packages/docs/src/components/docs/DocsContent.tsx
+++ b/packages/docs/src/components/docs/DocsContent.tsx
@@ -32,7 +32,7 @@ const DocsContent = styled('div')(
& p:not(:first-of-type) {
margin-top: 8px;
}
-
+
& pre + p:not(:first-of-type) {
margin-top: 20px;
}
@@ -174,6 +174,15 @@ const DocsContent = styled('div')(
padding: 1rem;
overflow: auto;
margin: 0;
+ border-radius: 12px;
+ }
+
+ .dark & pre.code-tabpanel,
+ .dark & pre.code-tabpanel[class*='language-'],
+ .light & pre.code-tabpanel,
+ .light & pre.code-tabpanel[class*='language-'] {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
}
& pre code {
diff --git a/packages/docs/src/components/docs/components/CodeTabs.tsx b/packages/docs/src/components/docs/components/CodeTabs.tsx
index cc8f5bf9..12658649 100644
--- a/packages/docs/src/components/docs/components/CodeTabs.tsx
+++ b/packages/docs/src/components/docs/components/CodeTabs.tsx
@@ -142,7 +142,7 @@ const CodeTabs = ({ children }: CodeTabsProps) => {
{tabs.map((tabData, index) => (
-
+
{
const nestedHeadings: NestedHeading[] = [];
headingElements.forEach(heading => {
- const { innerText: title, id } = heading;
+ const { innerText, id } = heading;
+ const title = innerText
+ .replace(/\n/g, '')
+ .replace(/Beta Feature$/g, '')
+ .trim();
if (heading.nodeName === 'H1' || heading.nodeName === 'H2') {
nestedHeadings.push({ id, title, items: [] });
@@ -118,7 +122,7 @@ const StyledNav = styled('nav')(
max-height: calc(100vh - 72px);
overflow-y: auto;
top: 16px;
-
+
${theme.breakpoints.between('md', 'lg')} {
top: 24px;
}