diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index a368772c2..4aaa06335 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -2,6 +2,22 @@
Please take a moment to review this document in order to make the contribution process easy and effective for everyone involved.
+## Getting started
+
+### Requirements
+
+- Node.js: `>=12.13.1`
+- Yarn: `>=1.21.1`
+
+To install all dependencies and build all packages run the following commands from the root of the project.
+
+```
+yarn
+yarn build
+```
+
+You are ready to go! You can either develop your extensions from `extensions` folder or run a playground of all components in `development` mode.
+
## Submitting a Pull Request
Good pull requests, such as patches, improvements, and new features, are a fantastic help. They should remain focused in scope and avoid containing unrelated commits.
diff --git a/LICENSE b/LICENSE
index 79835f0a8..d532d60e9 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
The MIT License (MIT)
-Copyright (c) 2019 Contentful
+Copyright (c) 2020 Contentful
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
diff --git a/README.md b/README.md
index 2e2d5ccf7..e213f0037 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,6 @@
-# Contentful Field Editors 
+# @contentful/field-editors
+
+[](https://lernajs.io/)
This is the monorepo for all field editors and extensions by [Contentful][contentful].
@@ -8,35 +10,54 @@ It uses [Typescript][typescript], [React][react], [Forma36][forma36] (a design s
## Available field editors
-We currently provide the following field editors:
-
-- [Single line editor](./packages/single-line/README.md)
-- [Multi line editor](./packages/multiple-line/README.md)
-- [Dropdown](./packages/dropdown/README.md)
-- [Tags](./packages/tags/README.md)
-- [List](./packages/list/README.md)
-- [Checkbox](./packages/checkbox/README.md)
-- [Radio](./packages/radio/README.md)
-- [Boolean](./packages/boolean/README.md)
-- [Rating](./packages/rating/README.md)
-- [Number](./packages/number/README.md)
-- [Url](./packages/url/README.md)
-- [JSON](./packages/json/README.md)
-- [Location](./packages/location/README.md)
-- [Date](./packages/date/README.md)
-- [Markdown](./packages/markdown/README.md)
-- [Slug](./packages/slug/README.md)
-- [Entry reference / Media](./packages/reference/README.md)
-- [Rich Text](./packages/rich-text/README.md)
+Playground with all components: [https://contentful-field-editors.netlify.app/](https://contentful-field-editors.netlify.app/)
+
+This repository has all editorial components that you can find in the Contentful Web application.
+You can run each this component as a custom field extension or compose them into one custom entry extension.
+
+- Single line editor
+- Multi line editor
+- Dropdown
+- Tags
+- List
+- Checkbox
+- Radio
+- Boolean
+- Rating
+- Number
+- Url
+- JSON
+- Location
+- Date
+- Markdown
+- Slug
+- Entry reference / Media
+- Rich Text
+
+Also this repository contains shared packages that simplify development and testing of field and entry extensions.
Feel free to reach out to us with the ones that'd be the most useful to have
here by filing a [Github issue][github-issues]!
-## Contributing
+## Getting started & contributing
+
+### Requirements
+
+- Node.js: `>=12.13.1`
+- Yarn: `>=1.21.1`
+
+To install all dependencies and build all packages run the following commands from the root of the project.
+
+```
+yarn
+yarn build
+```
+
+See [CONTRIBUTING.md](CONTRIBUTING.md) for more information on how to get started.
-We'd love to have your helping hand on `@contentful/field-editors`! See [CONTRIBUTING.md](CONTRIBUTING.md) for more information on how to get started.
+We'd love to have your helping hand on `@contentful/field-editors`!
-## Links
+## Links & related repositories
- [UI Extensions SDK][ui-extensions-sdk]
- [Create Contentful Extension CLI][create-contentful-extension]
@@ -55,8 +76,8 @@ All field editor packages are open source software [licensed as MIT](./LICENSE).
[contentful]: https://www.contentful.com
[ui-extensions-sdk]: https://github.com/contentful/ui-extensions-sdk
[create-contentful-extension]: https://github.com/contentful/create-contentful-extension
-[github-issues]: https://github.com/contentful/core-field-editors/issues
-[forma36]: https://f36.contentful.com/
+[github-issues]: https://github.com/contentful/field-editors/issues
+[forma36]: https://github.com/contentful/forma-36
[typescript]: https://www.typescriptlang.org/
[react]: https://reactjs.org/
[lerna]: https://github.com/lerna/lerna
diff --git a/cypress/integration/JsonEditor.spec.ts b/cypress/integration/JsonEditor.spec.ts
index 94fd88218..e7a63dd97 100644
--- a/cypress/integration/JsonEditor.spec.ts
+++ b/cypress/integration/JsonEditor.spec.ts
@@ -1,10 +1,10 @@
describe('JSON Editor', () => {
const selectors = {
getInput: () => {
- return cy.findByTestId('json-editor-code-mirror').get('textarea');
+ return cy.get('[data-test-id="json-editor-code-mirror"] textarea');
},
getCode: () => {
- return cy.findByTestId('json-editor-code-mirror').get('.CodeMirror-code');
+ return cy.get('[data-test-id="json-editor-code-mirror"] .CodeMirror-code');
},
getRedoButton: () => {
return cy.findByTestId('json-editor-redo');
@@ -110,7 +110,7 @@ describe('JSON Editor', () => {
{ id: 1, type: 'setValue', value: { foo: { bar: 'xyz' } } }
]);
- checkCode('{\n "something": "new"\n}');
+ checkCode('{\n "something": "new"\n}');
selectors.getRedoButton().should('be.disabled');
selectors.getUndoButton().should('be.disabled');
});
diff --git a/cypress/integration/MarkdownEditorHistory.spec.ts b/cypress/integration/MarkdownEditorHistory.spec.ts
index 543c2a01f..3edc0b984 100644
--- a/cypress/integration/MarkdownEditorHistory.spec.ts
+++ b/cypress/integration/MarkdownEditorHistory.spec.ts
@@ -1,7 +1,7 @@
describe('Markdown Editor / History', () => {
const selectors = {
getInput: () => {
- return cy.findByTestId('markdown-textarea').get('textarea');
+ return cy.get('[data-test-id="markdown-textarea"] textarea');
},
getToggleAdditionalActionsButton: () => {
return cy.findByTestId('markdown-action-button-toggle-additional');
diff --git a/cypress/integration/MarkdownEditorInsertLink.spec.ts b/cypress/integration/MarkdownEditorInsertLink.spec.ts
index 71ebb2e03..457c22f33 100644
--- a/cypress/integration/MarkdownEditorInsertLink.spec.ts
+++ b/cypress/integration/MarkdownEditorInsertLink.spec.ts
@@ -1,7 +1,7 @@
describe('Markdown Editor / Insert Link Dialog', () => {
const selectors = {
getInput: () => {
- return cy.findByTestId('markdown-textarea').get('textarea');
+ return cy.get('[data-test-id="markdown-textarea"] textarea');
},
getDialogTitle() {
return cy.findByTestId('dialog-title').within(() => {
diff --git a/cypress/integration/MarkdownEditorInsertTable.spec.ts b/cypress/integration/MarkdownEditorInsertTable.spec.ts
index c3b44be80..8a6985191 100644
--- a/cypress/integration/MarkdownEditorInsertTable.spec.ts
+++ b/cypress/integration/MarkdownEditorInsertTable.spec.ts
@@ -1,7 +1,7 @@
describe('Markdown Editor / Insert Table Dialog', () => {
const selectors = {
getInput: () => {
- return cy.findByTestId('markdown-textarea').get('textarea');
+ return cy.get('[data-test-id="markdown-textarea"] textarea');
},
getDialogTitle() {
return cy.findByTestId('dialog-title').within(() => {
diff --git a/cypress/integration/MarkdownEditorSimpleActions.spec.ts b/cypress/integration/MarkdownEditorSimpleActions.spec.ts
index d27cb5411..626d3e5da 100644
--- a/cypress/integration/MarkdownEditorSimpleActions.spec.ts
+++ b/cypress/integration/MarkdownEditorSimpleActions.spec.ts
@@ -1,7 +1,7 @@
describe('Markdown Editor / Simple Actions', () => {
const selectors = {
getInput: () => {
- return cy.findByTestId('markdown-textarea').get('textarea');
+ return cy.get('[data-test-id="markdown-textarea"] textarea');
},
getHeadingsSelectorButton: () => {
return cy.findByTestId('markdown-action-button-heading');
diff --git a/cypress/integration/MarkdownEditorSpecialCharacter.spec.ts b/cypress/integration/MarkdownEditorSpecialCharacter.spec.ts
index 0f12b50e3..530a842ca 100644
--- a/cypress/integration/MarkdownEditorSpecialCharacter.spec.ts
+++ b/cypress/integration/MarkdownEditorSpecialCharacter.spec.ts
@@ -1,7 +1,7 @@
describe('Markdown Editor / Insert Special Character Dialog', () => {
const selectors = {
getInput: () => {
- return cy.findByTestId('markdown-textarea').get('textarea');
+ return cy.get('[data-test-id="markdown-textarea"] textarea');
},
getDialogTitle() {
return cy.findByTestId('dialog-title').within(() => {
diff --git a/cypress/integration/MarkdownEmbedExternal.spec.ts b/cypress/integration/MarkdownEmbedExternal.spec.ts
index 7137956ce..a888515f8 100644
--- a/cypress/integration/MarkdownEmbedExternal.spec.ts
+++ b/cypress/integration/MarkdownEmbedExternal.spec.ts
@@ -1,7 +1,7 @@
describe('Markdown Editor / Embed External Dialog', () => {
const selectors = {
getInput: () => {
- return cy.findByTestId('markdown-textarea').get('textarea');
+ return cy.get('[data-test-id="markdown-textarea"] textarea');
},
getDialogTitle() {
return cy.findByTestId('dialog-title').within(() => {
diff --git a/cypress/integration/MarkdownOrganizeLinks.spec.ts b/cypress/integration/MarkdownOrganizeLinks.spec.ts
index 774e5fcb9..c0664c52f 100644
--- a/cypress/integration/MarkdownOrganizeLinks.spec.ts
+++ b/cypress/integration/MarkdownOrganizeLinks.spec.ts
@@ -1,7 +1,7 @@
describe('Markdown Editor / Organize Links', () => {
const selectors = {
getInput: () => {
- return cy.findByTestId('markdown-textarea').get('textarea');
+ return cy.get('[data-test-id="markdown-textarea"] textarea');
},
getToggleAdditionalActionsButton: () => {
return cy.findByTestId('markdown-action-button-toggle-additional');
diff --git a/doczrc.js b/doczrc.js
index 3137d1bd4..1e0b1169b 100644
--- a/doczrc.js
+++ b/doczrc.js
@@ -1,6 +1,7 @@
/* global process */
import fs from 'fs';
+import tokens from '@contentful/forma-36-tokens';
const forma36Styles = fs.readFileSync(
process.cwd() + '/node_modules/@contentful/forma-36-react-components/dist/styles.css'
@@ -10,17 +11,25 @@ const pikadayStyles = fs.readFileSync(process.cwd() + '/packages/date/styles/sty
export default {
title: 'Contentful Field Editors',
+ description: 'React components and extensions for building Contentful entry editor',
src: './packages/',
files: '**/*.mdx',
typescript: true,
port: 9000,
codeSandbox: false,
+ themeConfig: {
+ colors: {
+ primary: tokens.colorBlueBase,
+ secondary: tokens.colorIceMid,
+ gray: tokens.colorElementMid
+ }
+ },
htmlContext: {
head: {
raw: ``
}
},
- menu: ['Introduction', 'Components'],
+ menu: ['Introduction', 'Editors', 'Shared'],
modifyBabelRc: babelrc => {
const newBabelRc = {
...babelrc,
diff --git a/lerna.json b/lerna.json
index dcaa67135..84753790e 100644
--- a/lerna.json
+++ b/lerna.json
@@ -8,7 +8,7 @@
"message": "chore(release): publish %s"
},
"publish": {
- "ignoreChanges": ["*.md"]
+ "ignoreChanges": ["*.md", "*.mdx"]
}
}
}
diff --git a/package.json b/package.json
index d121c92bd..08b48911c 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
"name": "@contentful/field-editors",
"private": true,
"version": "1.0.0",
- "description": "",
+ "description": "React components and extensions for building Contentful entry editor",
"author": "Contentful GmbH",
"license": "MIT",
"repository": {
@@ -140,8 +140,7 @@
"husky": {
"hooks": {
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
- "pre-commit": "lint-staged",
- "pre-push": "yarn run tsc && yarn run test:ci"
+ "pre-commit": "lint-staged"
}
},
"engines": {
diff --git a/packages/_shared/README.md b/packages/_shared/README.md
index 30f9ab370..eb8e1d94d 100644
--- a/packages/_shared/README.md
+++ b/packages/_shared/README.md
@@ -2,22 +2,27 @@
This package contains shared code (components, utilities, test utilities) that is used by all other field editor packages.
-## Commands
-
-Uses [`tsdx`](https://github.com/palmerhq/tsdx) - a zero-config CLI that helps you develop, test, and publish modern TypeScript packages with ease.
-
-### `yarn watch`
-
-Runs the project in development/watch mode. Your library will be rebuilt if you make edits.
-
-### `yarn build`
-
-Bundles the package to the `dist` folder.
-The package is optimized and bundled with Rollup into multiple formats (CommonJS, UMD, and ES Module).
-
-### `yarn test`
-
-Runs the test watcher (Jest) in an interactive mode.
-By default, runs tests related to files changed since the last commit.
-
-For more information check [`tsdx` documentation](https://github.com/palmerhq/tsdx) out.
+The most useful component for developing any kind of extensions is `FieldConnector` that helps you to subscribe to field changes in a convenient way.
+
+Checkout a simple implementation of extension for `Boolean` field:
+
+```jsx
+
+import { FieldConnector } from '@contentful/field-editor-shared';
+
+ field={sdk.field}>
+ {({ disabled, value, setValue }) => {
+ return (
+
+
{value ? 'I am true' : 'I am false'}
+
+
+ )
+ }}
+
+
+```
diff --git a/packages/boolean/README.md b/packages/boolean/README.md
index b408979b2..b10cdd5c0 100644
--- a/packages/boolean/README.md
+++ b/packages/boolean/README.md
@@ -1,23 +1,11 @@
# @contentful/field-editor-boolean
-This package contains a React `BooleanEditor` component and an extension that is used as default for `Boolean` field type in the Contentful web application.
+```bash
+npm install @contentful/field-editor-boolean
+```
-## Commands
+This package contains a React `BooleanEditor` component that is used as default for `Boolean` field type in the Contentful web application.
-Uses [`tsdx`](https://github.com/palmerhq/tsdx) - a zero-config CLI that helps you develop, test, and publish modern TypeScript packages with ease.
-
-### `yarn watch`
-
-Runs the project in development/watch mode. Your library will be rebuilt if you make edits.
-
-### `yarn build`
-
-Bundles the package to the `dist` folder.
-The package is optimized and bundled with Rollup into multiple formats (CommonJS, UMD, and ES Module).
-
-### `yarn test`
-
-Runs the test watcher (Jest) in an interactive mode.
-By default, runs tests related to files changed since the last commit.
-
-For more information check [`tsdx` documentation](https://github.com/palmerhq/tsdx) out.
+```js
+import { BooleanEditor } from '@contentful/field-editor-boolean';
+```
diff --git a/packages/boolean/src/BooleanEditor.mdx b/packages/boolean/src/BooleanEditor.mdx
index 5dbe2fb07..ef94ae328 100644
--- a/packages/boolean/src/BooleanEditor.mdx
+++ b/packages/boolean/src/BooleanEditor.mdx
@@ -1,20 +1,31 @@
---
name: Boolean
route: /boolean
-menu: Components
+menu: Editors
---
-# Boolean
+import Readme from '../README.md';
-import { Playground } from 'docz';
+
+
+import { Playground, Props } from 'docz';
import { BooleanEditor } from './BooleanEditor.tsx';
-import { createFakeFieldAPI } from '@contentful/field-editor-test-utils';
+import { createFakeFieldAPI, ActionsPlayground } from '@contentful/field-editor-test-utils';
## In Action
{() => {
- const [field] = createFakeFieldAPI();
- return ;
+ const [field, mitt] = createFakeFieldAPI();
+ return (
+
+
+
+
+ );
}}
+
+## Props
+
+
diff --git a/packages/boolean/src/BooleanEditor.tsx b/packages/boolean/src/BooleanEditor.tsx
index 33d0f4b90..face0c603 100644
--- a/packages/boolean/src/BooleanEditor.tsx
+++ b/packages/boolean/src/BooleanEditor.tsx
@@ -12,8 +12,14 @@ export interface BooleanEditorProps {
*/
isInitiallyDisabled: boolean;
+ /**
+ * sdk.field
+ */
field: FieldAPI;
+ /**
+ * sdk.parameters
+ */
parameters?: ParametersAPI & {
instance: {
trueLabel?: string;
diff --git a/packages/checkbox/README.md b/packages/checkbox/README.md
index 6fd13b308..615bae0ab 100644
--- a/packages/checkbox/README.md
+++ b/packages/checkbox/README.md
@@ -1,23 +1,11 @@
# @contentful/field-editor-checkbox
-This package contains a React `CheckboxEditor` component and an extension that is used as a default for the `Symbol / List` field type in the Contentful web application.
+```bash
+npm install @contentful/field-editor-checkbox
+```
-## Commands
+This package contains a React `CheckboxEditor` component that is used as a default for the `Symbol / List` field type in the Contentful web application.
-Uses [`tsdx`](https://github.com/palmerhq/tsdx) - a zero-config CLI that helps you develop, test, and publish modern TypeScript packages with ease.
-
-### `yarn watch`
-
-Runs the project in development/watch mode. Your library will be rebuilt if you make edits.
-
-### `yarn build`
-
-Bundles the package to the `dist` folder.
-The package is optimized and bundled with Rollup into multiple formats (CommonJS, UMD, and ES Module).
-
-### `yarn test`
-
-Runs the test watcher (Jest) in an interactive mode.
-By default, runs tests related to files changed since the last commit.
-
-For more information check [`tsdx` documentation](https://github.com/palmerhq/tsdx) out.
+```js
+import { CheckboxEditor } from '@contentful/field-editor-checkbox';
+```
diff --git a/packages/checkbox/src/CheckboxEditor.mdx b/packages/checkbox/src/CheckboxEditor.mdx
index f5047735a..d5cd1fdfb 100644
--- a/packages/checkbox/src/CheckboxEditor.mdx
+++ b/packages/checkbox/src/CheckboxEditor.mdx
@@ -1,31 +1,28 @@
---
name: Checkbox
route: /checkbox
-menu: Components
+menu: Editors
---
-# Checkbox
+import Readme from '../README.md';
-import { Playground } from 'docz';
+
+
+import { Playground, Props } from 'docz';
import { CheckboxEditor } from './CheckboxEditor.tsx';
-import { createFakeFieldAPI, createFakeLocalesAPI } from '@contentful/field-editor-test-utils';
+import {
+ createFakeFieldAPI,
+ createFakeLocalesAPI,
+ ActionsPlayground
+} from '@contentful/field-editor-test-utils';
## In Action
-
- {() => {
- const [field] = createFakeFieldAPI();
- return (
-
- );
- }}
-
-
----
+### with proper configuration
{() => {
- const [field] = createFakeFieldAPI(
+ const [field, mitt] = createFakeFieldAPI(
mock => ({
...mock,
items: {
@@ -34,8 +31,30 @@ import { createFakeFieldAPI, createFakeLocalesAPI } from '@contentful/field-edit
}),
['test1', 'test2', 'test3']
);
+ return (
+
+
+
+
+ );
+ }}
+
+
+### no configuration
+
+
+ {() => {
+ const [field] = createFakeFieldAPI();
return (
);
}}
+
+## Props
+
+
diff --git a/packages/checkbox/src/CheckboxEditor.tsx b/packages/checkbox/src/CheckboxEditor.tsx
index d6f52f80b..b3c90908c 100644
--- a/packages/checkbox/src/CheckboxEditor.tsx
+++ b/packages/checkbox/src/CheckboxEditor.tsx
@@ -15,9 +15,13 @@ export interface CheckboxEditorProps {
* is the field disabled initially
*/
isInitiallyDisabled: boolean;
-
+ /**
+ * sdk.field
+ */
field: FieldAPI;
-
+ /**
+ * sdk.locales
+ */
locales: LocalesAPI;
}
diff --git a/packages/contributing.mdx b/packages/contributing.mdx
new file mode 100644
index 000000000..b0bf631ba
--- /dev/null
+++ b/packages/contributing.mdx
@@ -0,0 +1,8 @@
+---
+name: Contributing
+route: /CONTRIBUTING.md
+---
+
+import Readme from '../CONTRIBUTING.md';
+
+
diff --git a/packages/date/README.md b/packages/date/README.md
index 31eabef7b..dd6b50e6b 100644
--- a/packages/date/README.md
+++ b/packages/date/README.md
@@ -1,23 +1,11 @@
# @contentful/field-editor-date
-This package contains a React `DateEditor` component and an extension that is used as a default for the `Date` field type in the Contentful web application.
+```bash
+npm install @contentful/field-editor-date
+```
-## Commands
+This package contains a React `DateEditor` component that is used as a default for the `Date` field type in the Contentful web application.
-Uses [`tsdx`](https://github.com/palmerhq/tsdx) - a zero-config CLI that helps you develop, test, and publish modern TypeScript packages with ease.
-
-### `yarn watch`
-
-Runs the project in development/watch mode. Your library will be rebuilt if you make edits.
-
-### `yarn build`
-
-Bundles the package to the `dist` folder.
-The package is optimized and bundled with Rollup into multiple formats (CommonJS, UMD, and ES Module).
-
-### `yarn test`
-
-Runs the test watcher (Jest) in an interactive mode.
-By default, runs tests related to files changed since the last commit.
-
-For more information check [`tsdx` documentation](https://github.com/palmerhq/tsdx) out.
+```js
+import { DateEditor } from '@contentful/field-editor-date';
+```
diff --git a/packages/date/src/DateEditor.mdx b/packages/date/src/DateEditor.mdx
index 011733120..ae40da8d0 100644
--- a/packages/date/src/DateEditor.mdx
+++ b/packages/date/src/DateEditor.mdx
@@ -1,10 +1,12 @@
---
name: Date
route: /date
-menu: Components
+menu: Editors
---
-# DateEditor
+import Readme from '../README.md';
+
+
import { Playground, Props } from 'docz';
import { DateEditor } from './DateEditor.tsx';
@@ -34,3 +36,7 @@ import { createFakeFieldAPI, ActionsPlayground } from '@contentful/field-editor-
}}
+
+## Props
+
+
diff --git a/packages/date/src/DateEditor.tsx b/packages/date/src/DateEditor.tsx
index f27b0d923..7dfffac41 100644
--- a/packages/date/src/DateEditor.tsx
+++ b/packages/date/src/DateEditor.tsx
@@ -20,8 +20,14 @@ export interface DateEditorProps {
*/
isInitiallyDisabled: boolean;
+ /**
+ * sdk.field
+ */
field: FieldAPI;
+ /**
+ * sdk.parameters
+ */
parameters?: ParametersAPI & {
instance?: {
format?: DateTimeFormat;
diff --git a/packages/dropdown/README.md b/packages/dropdown/README.md
index e59e3d811..e55bb13a6 100644
--- a/packages/dropdown/README.md
+++ b/packages/dropdown/README.md
@@ -1,23 +1,11 @@
# @contentful/field-editor-dropdown
-This package contains a React `DropdownEditor` component and an extension that is used for the `Text`,`Symbol`,`Integer`and`Number` field types in the Contentful web application.
+```bash
+npm install @contentful/field-editor-dropdown
+```
-## Commands
+This package contains a React `DropdownEditor` component that is used for the `Text`,`Symbol`,`Integer` and `Number` field types in the Contentful web application.
-Uses [`tsdx`](https://github.com/palmerhq/tsdx) - a zero-config CLI that helps you develop, test, and publish modern TypeScript packages with ease.
-
-### `yarn watch`
-
-Runs the project in development/watch mode. Your library will be rebuilt if you make edits.
-
-### `yarn build`
-
-Bundles the package to the `dist` folder.
-The package is optimized and bundled with Rollup into multiple formats (CommonJS, UMD, and ES Module).
-
-### `yarn test`
-
-Runs the test watcher (Jest) in an interactive mode.
-By default, runs tests related to files changed since the last commit.
-
-For more information check [`tsdx` documentation](https://github.com/palmerhq/tsdx) out.
+```js
+import { DropdownEditor } from '@contentful/field-editor-dropdown';
+```
diff --git a/packages/dropdown/src/DropdownEditor.mdx b/packages/dropdown/src/DropdownEditor.mdx
index f9a566ea0..326cd348d 100644
--- a/packages/dropdown/src/DropdownEditor.mdx
+++ b/packages/dropdown/src/DropdownEditor.mdx
@@ -1,14 +1,20 @@
---
name: Dropdown
route: /dropdown
-menu: Components
+menu: Editors
---
-# Dropdown
+import Readme from '../README.md';
+
+
import { Playground, Props } from 'docz';
import { DropdownEditor } from './DropdownEditor.tsx';
-import { createFakeFieldAPI, createFakeLocalesAPI } from '@contentful/field-editor-test-utils';
+import {
+ createFakeFieldAPI,
+ createFakeLocalesAPI,
+ ActionsPlayground
+} from '@contentful/field-editor-test-utils';
## In Action
@@ -16,14 +22,21 @@ import { createFakeFieldAPI, createFakeLocalesAPI } from '@contentful/field-edit
{() => {
- const [field] = createFakeFieldAPI(mock => {
+ const [field, mitt] = createFakeFieldAPI(mock => {
return {
...mock,
validations: [{ in: ['banana', 'orange', 'strawberry'] }]
};
});
return (
-
+
+
+
+
);
}}
diff --git a/packages/dropdown/src/DropdownEditor.tsx b/packages/dropdown/src/DropdownEditor.tsx
index 6ff92293c..e772c83a7 100644
--- a/packages/dropdown/src/DropdownEditor.tsx
+++ b/packages/dropdown/src/DropdownEditor.tsx
@@ -14,9 +14,14 @@ export interface DropdownEditorProps {
* is the field disabled initially
*/
isInitiallyDisabled: boolean;
-
+ /**
+ * sdk.field
+ */
field: FieldAPI;
+ /**
+ * sdk.locales
+ */
locales: LocalesAPI;
}
diff --git a/packages/index.mdx b/packages/index.mdx
index 3b272c7b5..57b848e26 100644
--- a/packages/index.mdx
+++ b/packages/index.mdx
@@ -3,26 +3,6 @@ name: Introduction
route: /
---
-# Introduction
+import Readme from '../README.md';
-- [Single Line](/single-line)
-- [Multiple Line](/multiple-line)
-- [Dropdown](/dropdown)
-- [Tags](/tags)
-- [List](/list)
-- [Checkbox](/checkbox)
-- [Radio](/radio)
-- [Boolean](/boolean)
-- [Rating](/rating)
-- [Number](/number)
-- [Url](/url)
-- [JSON](/json)
-- [Location](/location)
-- [Date](/date)
-- [Markdown](/markdown)
-- [Rich Text](/rich-text)
-- [Slug](/slug)
-- [Reference](/reference-single)
-- [Reference, multiple entries](/reference-multiple)
-- [Media](/media-single)
-- [Media, multiple files](/media-multiple)
+
diff --git a/packages/json/README.md b/packages/json/README.md
index 1a9587a00..40c09173b 100644
--- a/packages/json/README.md
+++ b/packages/json/README.md
@@ -1,23 +1,11 @@
# @contentful/field-editor-json
-This package contains a React `JsonEditor` component and an extension that is used as a default for the `Object` field type in the Contentful web application.
+```bash
+npm install @contentful/field-editor-json
+```
-## Commands
+This package contains a React `JsonEditor` component that is used as a default for the `Object` field type in the Contentful web application.
-Uses [`tsdx`](https://github.com/palmerhq/tsdx) - a zero-config CLI that helps you develop, test, and publish modern TypeScript packages with ease.
-
-### `yarn watch`
-
-Runs the project in development/watch mode. Your library will be rebuilt if you make edits.
-
-### `yarn build`
-
-Bundles the package to the `dist` folder.
-The package is optimized and bundled with Rollup into multiple formats (CommonJS, UMD, and ES Module).
-
-### `yarn test`
-
-Runs the test watcher (Jest) in an interactive mode.
-By default, runs tests related to files changed since the last commit.
-
-For more information check [`tsdx` documentation](https://github.com/palmerhq/tsdx) out.
+```js
+import { JsonEditor } from '@contentful/field-editor-json';
+```
diff --git a/packages/json/src/JsonEditor.mdx b/packages/json/src/JsonEditor.mdx
index 5491a0711..dca1ec2e7 100644
--- a/packages/json/src/JsonEditor.mdx
+++ b/packages/json/src/JsonEditor.mdx
@@ -1,10 +1,12 @@
---
name: JSON
route: /json
-menu: Components
+menu: Editors
---
-# JSON
+import Readme from '../README.md';
+
+
import { Playground, Props } from 'docz';
import JsonEditor from './JsonEditor.tsx';
@@ -25,3 +27,8 @@ import { createFakeFieldAPI, ActionsPlayground } from '@contentful/field-editor-
}}
+
+
+## Props
+
+
diff --git a/packages/json/src/JsonEditor.tsx b/packages/json/src/JsonEditor.tsx
index adee33f92..c19b9a1b4 100644
--- a/packages/json/src/JsonEditor.tsx
+++ b/packages/json/src/JsonEditor.tsx
@@ -15,6 +15,9 @@ export interface JsonEditorProps {
*/
isInitiallyDisabled: boolean;
+ /**
+ * sdk.field
+ */
field: FieldAPI;
}
diff --git a/packages/list/README.md b/packages/list/README.md
index c09de687e..6ccba5820 100644
--- a/packages/list/README.md
+++ b/packages/list/README.md
@@ -1,23 +1,11 @@
# @contentful/field-editor-list
-This package contains a React `ListEditor` component and an extension that is used as a default for the `Symbol / List` field type in the Contentful web application.
+```bash
+npm install @contentful/field-editor-list
+```
-## Commands
+This package contains a React `ListEditor` component that is used as a default for the `Symbol / List` field type in the Contentful web application.
-Uses [`tsdx`](https://github.com/palmerhq/tsdx) - a zero-config CLI that helps you develop, test, and publish modern TypeScript packages with ease.
-
-### `yarn watch`
-
-Runs the project in development/watch mode. Your library will be rebuilt if you make edits.
-
-### `yarn build`
-
-Bundles the package to the `dist` folder.
-The package is optimized and bundled with Rollup into multiple formats (CommonJS, UMD, and ES Module).
-
-### `yarn test`
-
-Runs the test watcher (Jest) in an interactive mode.
-By default, runs tests related to files changed since the last commit.
-
-For more information check [`tsdx` documentation](https://github.com/palmerhq/tsdx) out.
+```js
+import { ListEditor } from '@contentful/field-editor-list';
+```
diff --git a/packages/list/src/ListEditor.mdx b/packages/list/src/ListEditor.mdx
index 8449b9937..3c776c835 100644
--- a/packages/list/src/ListEditor.mdx
+++ b/packages/list/src/ListEditor.mdx
@@ -1,22 +1,31 @@
---
name: List
route: /list
-menu: Components
+menu: Editors
---
-# List
+import Readme from '../README.md';
-import { Playground } from 'docz';
+
+
+import { Playground, Props } from 'docz';
import { ListEditor } from './ListEditor.tsx';
-import { createFakeFieldAPI, createFakeLocalesAPI } from '@contentful/field-editor-test-utils';
+import {
+ createFakeFieldAPI,
+ createFakeLocalesAPI,
+ ActionsPlayground
+} from '@contentful/field-editor-test-utils';
## In Action
{() => {
- const [field] = createFakeFieldAPI();
+ const [field, mitt] = createFakeFieldAPI();
return (
-
+
+
+
+
);
}}
@@ -31,3 +40,7 @@ import { createFakeFieldAPI, createFakeLocalesAPI } from '@contentful/field-edit
);
}}
+
+## Props
+
+
diff --git a/packages/list/src/ListEditor.tsx b/packages/list/src/ListEditor.tsx
index d4cd75e7c..0986554fd 100644
--- a/packages/list/src/ListEditor.tsx
+++ b/packages/list/src/ListEditor.tsx
@@ -9,8 +9,14 @@ export interface ListEditorProps {
*/
isInitiallyDisabled: boolean;
+ /**
+ * sdk.field
+ */
field: FieldAPI;
+ /**
+ * sdk.locales
+ */
locales: LocalesAPI;
}
diff --git a/packages/location/README.md b/packages/location/README.md
index 41d90df6d..dc5b15a4c 100644
--- a/packages/location/README.md
+++ b/packages/location/README.md
@@ -1,23 +1,11 @@
# @contentful/field-editor-location
-This package contains a React `LocationEditor` component and an extension that is used as a default for the `Location` field type in the Contentful web application.
+```bash
+npm install @contentful/field-editor-location
+```
-## Commands
+This package contains a React `LocationEditor` component that is used as a default for the `Location` field type in the Contentful web application.
-Uses [`tsdx`](https://github.com/palmerhq/tsdx) - a zero-config CLI that helps you develop, test, and publish modern TypeScript packages with ease.
-
-### `yarn watch`
-
-Runs the project in development/watch mode. Your library will be rebuilt if you make edits.
-
-### `yarn build`
-
-Bundles the package to the `dist` folder.
-The package is optimized and bundled with Rollup into multiple formats (CommonJS, UMD, and ES Module).
-
-### `yarn test`
-
-Runs the test watcher (Jest) in an interactive mode.
-By default, runs tests related to files changed since the last commit.
-
-For more information check [`tsdx` documentation](https://github.com/palmerhq/tsdx) out.
+```js
+import { LocationEditor } from '@contentful/field-editor-location';
+```
diff --git a/packages/location/src/LocationEditor.mdx b/packages/location/src/LocationEditor.mdx
index 45c331da9..82c473abe 100644
--- a/packages/location/src/LocationEditor.mdx
+++ b/packages/location/src/LocationEditor.mdx
@@ -1,13 +1,15 @@
---
name: Location
route: /location
-menu: Components
+menu: Editors
---
-# LocationEditor
+import Readme from '../README.md';
+
+
import { Playground, Props } from 'docz';
-import LocationEditor from './LocationEditor.tsx';
+import { LocationEditorConnected as LocationEditor } from './LocationEditor.tsx';
import { createFakeFieldAPI, ActionsPlayground } from '@contentful/field-editor-test-utils';
## In Action
@@ -37,3 +39,7 @@ import { createFakeFieldAPI, ActionsPlayground } from '@contentful/field-editor-
}}
+
+## Props
+
+
diff --git a/packages/location/src/LocationEditor.tsx b/packages/location/src/LocationEditor.tsx
index 3d8821197..ff32d7d86 100644
--- a/packages/location/src/LocationEditor.tsx
+++ b/packages/location/src/LocationEditor.tsx
@@ -19,8 +19,14 @@ export interface LocationEditorConnectedProps {
*/
isInitiallyDisabled: boolean;
+ /**
+ * sdk.field
+ */
field: FieldAPI;
+ /**
+ * sdk.parameters
+ */
parameters?: ParametersAPI & {
instance: {
googleMapsKey?: string;
@@ -142,7 +148,7 @@ export class LocationEditor extends React.Component<
}
}
-export default function LocationEditorConnected(props: LocationEditorConnectedProps) {
+export function LocationEditorConnected(props: LocationEditorConnectedProps) {
const { field } = props;
const googleMapsKey = props.parameters ? props.parameters.instance.googleMapsKey : undefined;
const [selectedView, setSelectedView] = React.useState(ViewType.Address);
diff --git a/packages/location/src/index.tsx b/packages/location/src/index.tsx
index af3d3b95f..b4f045127 100644
--- a/packages/location/src/index.tsx
+++ b/packages/location/src/index.tsx
@@ -1,2 +1,3 @@
-import LocationEditor from './LocationEditor';
-export { LocationEditor };
+import { LocationEditorConnected } from './LocationEditor';
+
+export const LocationEditor = LocationEditorConnected;
diff --git a/packages/markdown/README.md b/packages/markdown/README.md
index 30f3c0be3..aa8f9f202 100644
--- a/packages/markdown/README.md
+++ b/packages/markdown/README.md
@@ -1,23 +1,11 @@
# @contentful/field-editor-markdown
-This package contains a React `MarkdownEditor` component and an extension that is used as a default for the `Text` field type in the Contentful web application.
+```bash
+npm install @contentful/field-editor-markdown
+```
-## Commands
+This package contains a React `MarkdownEditor` component that is used as a default for the `Text` field type in the Contentful web application.
-Uses [`tsdx`](https://github.com/palmerhq/tsdx) - a zero-config CLI that helps you develop, test, and publish modern TypeScript packages with ease.
-
-### `yarn watch`
-
-Runs the project in development/watch mode. Your library will be rebuilt if you make edits.
-
-### `yarn build`
-
-Bundles the package to the `dist` folder.
-The package is optimized and bundled with Rollup into multiple formats (CommonJS, UMD, and ES Module).
-
-### `yarn test`
-
-Runs the test watcher (Jest) in an interactive mode.
-By default, runs tests related to files changed since the last commit.
-
-For more information check [`tsdx` documentation](https://github.com/palmerhq/tsdx) out.
+```js
+import { MarkdownEditor } from '@contentful/field-editor-markdown';
+```
diff --git a/packages/markdown/src/MarkdownEditor.mdx b/packages/markdown/src/MarkdownEditor.mdx
index b4bdee295..9941e95a9 100644
--- a/packages/markdown/src/MarkdownEditor.mdx
+++ b/packages/markdown/src/MarkdownEditor.mdx
@@ -1,10 +1,12 @@
---
name: Markdown
route: /markdown
-menu: Components
+menu: Editors
---
-# Markdown
+import Readme from '../README.md';
+
+
import { Playground, Props } from 'docz';
import './codemirrorImports';
@@ -78,3 +80,8 @@ import { createFakeFieldAPI, ActionsPlayground } from '@contentful/field-editor-
);
}}
+
+
+## Props
+
+
diff --git a/packages/markdown/src/MarkdownEditor.tsx b/packages/markdown/src/MarkdownEditor.tsx
index 7c86c48f7..0ad3ccb0e 100644
--- a/packages/markdown/src/MarkdownEditor.tsx
+++ b/packages/markdown/src/MarkdownEditor.tsx
@@ -27,7 +27,11 @@ export interface MarkdownEditorProps {
* is the field disabled initially
*/
isInitiallyDisabled: boolean;
+
sdk: FieldExtensionSDK;
+ /**
+ * sdk.parameters
+ */
parameters: {
instance: {
canUploadAssets: boolean;
diff --git a/packages/multiple-line/README.md b/packages/multiple-line/README.md
index 716d00181..a5d4d1993 100644
--- a/packages/multiple-line/README.md
+++ b/packages/multiple-line/README.md
@@ -1,23 +1,11 @@
# @contentful/field-editor-multiple-line
-This package contains a React `MultipleLineEditor` component and an extension that is used as a default for the `Text` field type in the Contentful web application.
+```bash
+npm install @contentful/field-editor-multiple-line
+```
-## Commands
+This package contains a React `MultipleLineEditor` component that is used as a default for the `Text` field type in the Contentful web application.
-Uses [`tsdx`](https://github.com/palmerhq/tsdx) - a zero-config CLI that helps you develop, test, and publish modern TypeScript packages with ease.
-
-### `yarn watch`
-
-Runs the project in development/watch mode. Your library will be rebuilt if you make edits.
-
-### `yarn build`
-
-Bundles the package to the `dist` folder.
-The package is optimized and bundled with Rollup into multiple formats (CommonJS, UMD, and ES Module).
-
-### `yarn test`
-
-Runs the test watcher (Jest) in an interactive mode.
-By default, runs tests related to files changed since the last commit.
-
-For more information check [`tsdx` documentation](https://github.com/palmerhq/tsdx) out.
+```js
+import { MultipleLineEditor } from '@contentful/field-editor-multiple-line';
+```
diff --git a/packages/multiple-line/src/MultipleLineEditor.mdx b/packages/multiple-line/src/MultipleLineEditor.mdx
index 014494a87..901844570 100644
--- a/packages/multiple-line/src/MultipleLineEditor.mdx
+++ b/packages/multiple-line/src/MultipleLineEditor.mdx
@@ -1,22 +1,33 @@
---
name: Multiple Line
route: /multiple-line
-menu: Components
+menu: Editors
---
-# Multiple Line
+import Readme from '../README.md';
+
+
import { Playground, Props } from 'docz';
import { MultipleLineEditor } from './MultipleLineEditor.tsx';
-import { createFakeFieldAPI, createFakeLocalesAPI } from '@contentful/field-editor-test-utils';
+import {
+ createFakeFieldAPI,
+ createFakeLocalesAPI,
+ ActionsPlayground
+} from '@contentful/field-editor-test-utils';
## In Action
{() => {
- const [field] = createFakeFieldAPI();
+ const [field, mitt] = createFakeFieldAPI();
const locales = createFakeLocalesAPI();
- return ;
+ return (
+
+
+
+
+ );
}}
diff --git a/packages/multiple-line/src/MultipleLineEditor.tsx b/packages/multiple-line/src/MultipleLineEditor.tsx
index 91b94bb49..4210344b6 100644
--- a/packages/multiple-line/src/MultipleLineEditor.tsx
+++ b/packages/multiple-line/src/MultipleLineEditor.tsx
@@ -9,8 +9,14 @@ export interface MultipleLineEditorProps {
*/
isInitiallyDisabled: boolean;
+ /**
+ * sdk.field
+ */
field: FieldAPI;
+ /**
+ * sdk.locales
+ */
locales: LocalesAPI;
}
diff --git a/packages/number/README.md b/packages/number/README.md
index 60ab52a25..af438be37 100644
--- a/packages/number/README.md
+++ b/packages/number/README.md
@@ -1,23 +1,11 @@
# @contentful/field-editor-number
-This package contains a React `NumberEditor` component and an extension that is used as a default for the `Integer` and `Number` field types in the Contentful web application.
+```bash
+npm install @contentful/field-editor-number
+```
-## Commands
+This package contains a React `NumberEditor` component that is used as a default for the `Integer` and `Number` field types in the Contentful web application.
-Uses [`tsdx`](https://github.com/palmerhq/tsdx) - a zero-config CLI that helps you develop, test, and publish modern TypeScript packages with ease.
-
-### `yarn watch`
-
-Runs the project in development/watch mode. Your library will be rebuilt if you make edits.
-
-### `yarn build`
-
-Bundles the package to the `dist` folder.
-The package is optimized and bundled with Rollup into multiple formats (CommonJS, UMD, and ES Module).
-
-### `yarn test`
-
-Runs the test watcher (Jest) in an interactive mode.
-By default, runs tests related to files changed since the last commit.
-
-For more information check [`tsdx` documentation](https://github.com/palmerhq/tsdx) out.
+```js
+import { NumberEditor } from '@contentful/field-editor-number';
+```
diff --git a/packages/number/src/NumberEditor.mdx b/packages/number/src/NumberEditor.mdx
index 3b78108aa..bfacc5fa3 100644
--- a/packages/number/src/NumberEditor.mdx
+++ b/packages/number/src/NumberEditor.mdx
@@ -1,20 +1,31 @@
---
name: Number
route: /number
-menu: Components
+menu: Editors
---
-# Number
+import Readme from '../README.md';
+
+
import { Playground, Props } from 'docz';
import { NumberEditor } from './NumberEditor.tsx';
-import { createFakeFieldAPI } from '@contentful/field-editor-test-utils';
+import { createFakeFieldAPI, ActionsPlayground } from '@contentful/field-editor-test-utils';
## In Action
{() => {
- const [field] = createFakeFieldAPI();
- return ;
+ const [field, mitt] = createFakeFieldAPI();
+ return (
+
+
+
+
+ );
}}
+
+## Props
+
+
diff --git a/packages/number/src/NumberEditor.tsx b/packages/number/src/NumberEditor.tsx
index 8850bb995..e0bb82c71 100644
--- a/packages/number/src/NumberEditor.tsx
+++ b/packages/number/src/NumberEditor.tsx
@@ -9,6 +9,9 @@ export interface NumberEditorProps {
*/
isInitiallyDisabled: boolean;
+ /**
+ * sdk.field
+ */
field: FieldAPI;
}
diff --git a/packages/radio/README.md b/packages/radio/README.md
index 8eb047de5..c5ef6c282 100644
--- a/packages/radio/README.md
+++ b/packages/radio/README.md
@@ -1,23 +1,11 @@
# @contentful/field-editor-radio
-This package contains a React `RadioEditor` component and an extension that is used for the `Text`,`Symbol`,`Integer` and `Number` field types in the Contentful web application.
+```bash
+npm install @contentful/field-editor-radio
+```
-## Commands
+This package contains a React `RadioEditor` component that is used for the `Text`,`Symbol`,`Integer` and `Number` field types in the Contentful web application.
-Uses [`tsdx`](https://github.com/palmerhq/tsdx) - a zero-config CLI that helps you develop, test, and publish modern TypeScript packages with ease.
-
-### `yarn watch`
-
-Runs the project in development/watch mode. Your library will be rebuilt if you make edits.
-
-### `yarn build`
-
-Bundles the package to the `dist` folder.
-The package is optimized and bundled with Rollup into multiple formats (CommonJS, UMD, and ES Module).
-
-### `yarn test`
-
-Runs the test watcher (Jest) in an interactive mode.
-By default, runs tests related to files changed since the last commit.
-
-For more information check [`tsdx` documentation](https://github.com/palmerhq/tsdx) out.
+```js
+import { RadioEditor } from '@contentful/field-editor-radio';
+```
diff --git a/packages/radio/src/RadioEditor.mdx b/packages/radio/src/RadioEditor.mdx
index ec0b59c0c..529b151ae 100644
--- a/packages/radio/src/RadioEditor.mdx
+++ b/packages/radio/src/RadioEditor.mdx
@@ -1,31 +1,28 @@
---
name: Radio
route: /radio
-menu: Components
+menu: Editors
---
-# Radio
+import Readme from '../README.md';
-import { Playground } from 'docz';
+
+
+import { Playground, Props } from 'docz';
import { RadioEditor } from './RadioEditor.tsx';
-import { createFakeFieldAPI, createFakeLocalesAPI } from '@contentful/field-editor-test-utils';
+import {
+ createFakeFieldAPI,
+ createFakeLocalesAPI,
+ ActionsPlayground
+} from '@contentful/field-editor-test-utils';
## In Action
-
- {() => {
- const [field] = createFakeFieldAPI();
- return (
-
- );
- }}
-
-
----
+### with proper configuration
{() => {
- const [field] = createFakeFieldAPI(
+ const [field, mitt] = createFakeFieldAPI(
mock => ({
...mock,
type: 'Symbol',
@@ -33,8 +30,26 @@ import { createFakeFieldAPI, createFakeLocalesAPI } from '@contentful/field-edit
}),
['test1', 'test2', 'test3']
);
+ return (
+
+
+
+
+ );
+ }}
+
+
+### with no configuration
+
+
+ {() => {
+ const [field] = createFakeFieldAPI();
return (
);
}}
+
+## Props
+
+
diff --git a/packages/radio/src/RadioEditor.tsx b/packages/radio/src/RadioEditor.tsx
index 475c96fc6..b0ea96277 100644
--- a/packages/radio/src/RadioEditor.tsx
+++ b/packages/radio/src/RadioEditor.tsx
@@ -16,8 +16,14 @@ export interface RadioEditorProps {
*/
isInitiallyDisabled: boolean;
+ /**
+ * sdk.field
+ */
field: FieldAPI;
+ /**
+ * sdk.locales
+ */
locales: LocalesAPI;
}
diff --git a/packages/rating/README.md b/packages/rating/README.md
index 07e0f8ade..de8496a30 100644
--- a/packages/rating/README.md
+++ b/packages/rating/README.md
@@ -1,23 +1,11 @@
# @contentful/field-editor-rating
-This package contains a React `RatingEditor` component and an extension that is used for the `Number`and`Integer` field types in the Contentful web application.
+```bash
+npm install @contentful/field-editor-rating
+```
-## Commands
+This package contains a React `RatingEditor` component that is used for the `Number`and`Integer` field types in the Contentful web application.
-Uses [`tsdx`](https://github.com/palmerhq/tsdx) - a zero-config CLI that helps you develop, test, and publish modern TypeScript packages with ease.
-
-### `yarn watch`
-
-Runs the project in development/watch mode. Your library will be rebuilt if you make edits.
-
-### `yarn build`
-
-Bundles the package to the `dist` folder.
-The package is optimized and bundled with Rollup into multiple formats (CommonJS, UMD, and ES Module).
-
-### `yarn test`
-
-Runs the test watcher (Jest) in an interactive mode.
-By default, runs tests related to files changed since the last commit.
-
-For more information check [`tsdx` documentation](https://github.com/palmerhq/tsdx) out.
+```js
+import { RatingEditor } from '@contentful/field-editor-rating';
+```
diff --git a/packages/rating/src/RatingEditor.mdx b/packages/rating/src/RatingEditor.mdx
index a1d7b4b12..63faca870 100644
--- a/packages/rating/src/RatingEditor.mdx
+++ b/packages/rating/src/RatingEditor.mdx
@@ -1,21 +1,28 @@
---
name: Rating
route: /rating
-menu: Components
+menu: Editors
---
-# Rating
+import Readme from '../README.md';
-import { Playground } from 'docz';
+
+
+import { Playground, Props } from 'docz';
import { RatingEditor } from './RatingEditor.tsx';
-import { createFakeFieldAPI } from '@contentful/field-editor-test-utils';
+import { createFakeFieldAPI, ActionsPlayground } from '@contentful/field-editor-test-utils';
## In Action
{() => {
- const [field] = createFakeFieldAPI();
- return ;
+ const [field, mitt] = createFakeFieldAPI();
+ return (
+
+
+
+
+ );
}}
@@ -42,3 +49,7 @@ import { createFakeFieldAPI } from '@contentful/field-editor-test-utils';
);
}}
+
+## Props
+
+
diff --git a/packages/rating/src/RatingEditor.tsx b/packages/rating/src/RatingEditor.tsx
index 9ff965b35..810a0772a 100644
--- a/packages/rating/src/RatingEditor.tsx
+++ b/packages/rating/src/RatingEditor.tsx
@@ -12,8 +12,14 @@ export interface RatingEditorProps {
*/
isInitiallyDisabled: boolean;
+ /**
+ * sdk.field
+ */
field: FieldAPI;
+ /**
+ * sdk.parameters
+ */
parameters?: ParametersAPI & {
instance: {
stars?: number;
diff --git a/packages/reference/README.md b/packages/reference/README.md
index 3a17fb9c3..292ce107f 100644
--- a/packages/reference/README.md
+++ b/packages/reference/README.md
@@ -1,23 +1,7 @@
# @contentful/field-editor-reference
-This package contains `SingleEntryReferenceEditor`, `MultipleEntryReferenceEditor`, `SingleMediaEditor`, and `MultipleMediaEditor` React components and an extension that is used as a default for the `Entry`, `Entries`, `Asset` and `Assets` field types in the Contentful web application.
+```bash
+npm i @contentful/field-editor-reference
+```
-## Commands
-
-Uses [`tsdx`](https://github.com/palmerhq/tsdx) - a zero-config CLI that helps you develop, test, and publish modern TypeScript packages with ease.
-
-### `yarn watch`
-
-Runs the project in development/watch mode. Your library will be rebuilt if you make edits.
-
-### `yarn build`
-
-Bundles the package to the `dist` folder.
-The package is optimized and bundled with Rollup into multiple formats (CommonJS, UMD, and ES Module).
-
-### `yarn test`
-
-Runs the test watcher (Jest) in an interactive mode.
-By default, runs tests related to files changed since the last commit.
-
-For more information check [`tsdx` documentation](https://github.com/palmerhq/tsdx) out.
+This package contains `SingleEntryReferenceEditor`, `MultipleEntryReferenceEditor`, `SingleMediaEditor`, and `MultipleMediaEditor` React components that is used as a default for the `Entry`, `Entries`, `Asset` and `Assets` field types in the Contentful web application.
diff --git a/packages/reference/src/assets/MultipleMediaEditor.mdx b/packages/reference/src/assets/MultipleMediaEditor.mdx
index 8d1f9a502..7c14db770 100644
--- a/packages/reference/src/assets/MultipleMediaEditor.mdx
+++ b/packages/reference/src/assets/MultipleMediaEditor.mdx
@@ -1,10 +1,16 @@
---
name: Media - Multiple files
route: /media-multiple
-menu: Components
+menu: Editors
---
-# Media - Multiple files
+import Readme from '../../README.md';
+
+
+
+```jsx
+import { MultipleMediaEditor } from '@contentful/field-editor-reference';
+```
import { Playground, Props } from 'docz';
import { MultipleMediaEditor } from './MultipleMediaEditor.tsx'
@@ -94,3 +100,8 @@ import changedAsset from '../__fixtures__/changed_asset.json';
}}
+
+
+## Props
+
+
diff --git a/packages/reference/src/assets/SingleMediaEditor.mdx b/packages/reference/src/assets/SingleMediaEditor.mdx
index cdff77490..e9919a817 100644
--- a/packages/reference/src/assets/SingleMediaEditor.mdx
+++ b/packages/reference/src/assets/SingleMediaEditor.mdx
@@ -1,10 +1,16 @@
---
name: Media
route: /media-single
-menu: Components
+menu: Editors
---
-# Reference - Media
+import Readme from '../../README.md';
+
+
+
+```jsx
+import { SingleMediaEditor } from '@contentful/field-editor-reference';
+```
import { Playground, Props } from 'docz';
import { SingleMediaEditor } from './SingleMediaEditor.tsx'
@@ -83,3 +89,8 @@ import publishedAsset from '../__fixtures__/published_asset.json';
}}
+
+
+## Props
+
+
diff --git a/packages/reference/src/entries/MultipleEntryReferenceEditor.mdx b/packages/reference/src/entries/MultipleEntryReferenceEditor.mdx
index 8b2f31b87..5807945c9 100644
--- a/packages/reference/src/entries/MultipleEntryReferenceEditor.mdx
+++ b/packages/reference/src/entries/MultipleEntryReferenceEditor.mdx
@@ -1,10 +1,16 @@
---
name: Reference - Multiple entries
route: /reference-multiple
-menu: Components
+menu: Editors
---
-# Reference - Multiple entries
+import Readme from '../../README.md';
+
+
+
+```jsx
+import { MultipleEntryReferenceEditor } from '@contentful/field-editor-reference';
+```
import { Playground, Props } from 'docz';
import { MultipleEntryReferenceEditor } from './MultipleEntryReferenceEditor.tsx'
@@ -97,3 +103,7 @@ import changedEntry from '../__fixtures__/changed_entry.json';
}}
+
+## Props
+
+
diff --git a/packages/reference/src/entries/SingleEntryReferenceEditor.mdx b/packages/reference/src/entries/SingleEntryReferenceEditor.mdx
index 5b9070a24..e999d959e 100644
--- a/packages/reference/src/entries/SingleEntryReferenceEditor.mdx
+++ b/packages/reference/src/entries/SingleEntryReferenceEditor.mdx
@@ -1,10 +1,16 @@
---
name: Reference - Single
route: /reference-single
-menu: Components
+menu: Editors
---
-# Reference - Single
+import Readme from '../../README.md';
+
+
+
+```jsx
+import { SingleEntryReferenceEditor } from '@contentful/field-editor-reference';
+```
import { Playground, Props } from 'docz';
import { SingleEntryReferenceEditor } from './SingleEntryReferenceEditor.tsx'
@@ -86,3 +92,7 @@ import publishedEntry from '../__fixtures__/published_entry.json';
}}
+
+## Props
+
+
diff --git a/packages/rich-text/README.md b/packages/rich-text/README.md
index 35e6a8e23..07e340d9b 100644
--- a/packages/rich-text/README.md
+++ b/packages/rich-text/README.md
@@ -1,25 +1,13 @@
# @contentful/field-editor-rich-text
-This package contains a React `RichTextEditor` component and an extension that is used as default for `RichText` field type in the Contentful web application.
+```bash
+npm install @contentful/field-editor-rich-text
+```
-This editor extension is built on top of [Slate](https://github.com/ianstormtaylor/slate), a third party framework for building highly customizable rich text editing solutions.
-
-## Commands
-
-Uses [`tsdx`](https://github.com/palmerhq/tsdx) - a zero-config CLI that helps you develop, test, and publish modern TypeScript packages with ease.
-
-### `yarn watch`
-
-Runs the project in development/watch mode. Your library will be rebuilt if you make edits.
+This package contains a React `RichTextEditor` component that is used as default for `RichText` field type in the Contentful web application.
-### `yarn build`
-
-Bundles the package to the `dist` folder.
-The package is optimized and bundled with Rollup into multiple formats (CommonJS, UMD, and ES Module).
-
-### `yarn test`
-
-Runs the test watcher (Jest) in an interactive mode.
-By default, runs tests related to files changed since the last commit.
+This editor extension is built on top of [Slate](https://github.com/ianstormtaylor/slate), a third party framework for building highly customizable rich text editing solutions.
-For more information check [`tsdx` documentation](https://github.com/palmerhq/tsdx) out.
+```js
+import { RichTextEditor } from '@contentful/field-editor-rich-text';
+```
diff --git a/packages/rich-text/src/RichTextEditor.mdx b/packages/rich-text/src/RichTextEditor.mdx
index 7cf61c39f..2d456d536 100644
--- a/packages/rich-text/src/RichTextEditor.mdx
+++ b/packages/rich-text/src/RichTextEditor.mdx
@@ -1,10 +1,12 @@
---
name: Rich Text
route: /rich-text
-menu: Components
+menu: Editors
---
-# Rich Text
+import Readme from '../README.md'
+
+
import { Playground } from 'docz';
import { RichTextEditor, openRichTextDialog } from './index';
diff --git a/packages/shared.mdx b/packages/shared.mdx
new file mode 100644
index 000000000..82fc35671
--- /dev/null
+++ b/packages/shared.mdx
@@ -0,0 +1,9 @@
+---
+name: field-editor-shared
+route: /shared/field-editor-shared
+menu: Shared
+---
+
+import Readme from './_shared/README.md';
+
+
diff --git a/packages/single-line/README.md b/packages/single-line/README.md
index fc3187e04..31171310f 100644
--- a/packages/single-line/README.md
+++ b/packages/single-line/README.md
@@ -1,23 +1,11 @@
# @contentful/field-editor-single-line
-This package contains a React `SingleLineEditor` component and an extension that is used as a default for the `Symbol` and `Text` field types in the Contentful web application.
+```bash
+npm install @contentful/field-editor-single-line
+```
-## Commands
+This package contains a React `SingleLineEditor` component that is used as a default for the `Symbol` and `Text` field types in the Contentful web application.
-Uses [`tsdx`](https://github.com/palmerhq/tsdx) - a zero-config CLI that helps you develop, test, and publish modern TypeScript packages with ease.
-
-### `yarn watch`
-
-Runs the project in development/watch mode. Your library will be rebuilt if you make edits.
-
-### `yarn build`
-
-Bundles the package to the `dist` folder.
-The package is optimized and bundled with Rollup into multiple formats (CommonJS, UMD, and ES Module).
-
-### `yarn test`
-
-Runs the test watcher (Jest) in an interactive mode.
-By default, runs tests related to files changed since the last commit.
-
-For more information check [`tsdx` documentation](https://github.com/palmerhq/tsdx) out.
+```js
+import { SingleLineEditor } from '@contentful/field-editor-single-line';
+```
diff --git a/packages/single-line/src/SingleLineEditor.mdx b/packages/single-line/src/SingleLineEditor.mdx
index 2e89d3570..990207c85 100644
--- a/packages/single-line/src/SingleLineEditor.mdx
+++ b/packages/single-line/src/SingleLineEditor.mdx
@@ -1,22 +1,34 @@
---
name: Single Line
route: /single-line
-menu: Components
+menu: Editors
+order: 1
---
-# Single Line
+import Readme from '../README.md';
+
+
import { Playground, Props } from 'docz';
import { SingleLineEditor } from './SingleLineEditor.tsx';
-import { createFakeFieldAPI, createFakeLocalesAPI } from '@contentful/field-editor-test-utils';
+import {
+ createFakeFieldAPI,
+ createFakeLocalesAPI,
+ ActionsPlayground
+} from '@contentful/field-editor-test-utils';
## In Action
{() => {
- const [field] = createFakeFieldAPI();
+ const [field, mitt] = createFakeFieldAPI();
const locales = createFakeLocalesAPI();
- return ;
+ return (
+
+
+
+
+ );
}}
diff --git a/packages/single-line/src/SingleLineEditor.tsx b/packages/single-line/src/SingleLineEditor.tsx
index a720e9c9e..1e98f1be3 100644
--- a/packages/single-line/src/SingleLineEditor.tsx
+++ b/packages/single-line/src/SingleLineEditor.tsx
@@ -15,9 +15,14 @@ export interface SingleLineEditorProps {
* is the field disabled initially
*/
isInitiallyDisabled: boolean;
-
+ /**
+ * sdk.field
+ */
field: FieldAPI;
+ /**
+ * sdk.locales
+ */
locales: LocalesAPI;
}
diff --git a/packages/slug/README.md b/packages/slug/README.md
index 4edd47267..c7a526acf 100644
--- a/packages/slug/README.md
+++ b/packages/slug/README.md
@@ -1,23 +1,11 @@
# @contentful/field-editor-slug
-This package contains a React `SlugEditor` component and an extension that is used as a default for the `Symbol` field type in the Contentful web application.
+```bash
+npm install @contentful/field-editor-slug
+```
-## Commands
+This package contains a React `SlugEditor` component that is used as a default for the `Symbol` field type in the Contentful web application.
-Uses [`tsdx`](https://github.com/palmerhq/tsdx) - a zero-config CLI that helps you develop, test, and publish modern TypeScript packages with ease.
-
-### `yarn watch`
-
-Runs the project in development/watch mode. Your library will be rebuilt if you make edits.
-
-### `yarn build`
-
-Bundles the package to the `dist` folder.
-The package is optimized and bundled with Rollup into multiple formats (CommonJS, UMD, and ES Module).
-
-### `yarn test`
-
-Runs the test watcher (Jest) in an interactive mode.
-By default, runs tests related to files changed since the last commit.
-
-For more information check [`tsdx` documentation](https://github.com/palmerhq/tsdx) out.
+```js
+import { SlugEditor } from '@contentful/field-editor-slug';
+```
diff --git a/packages/slug/src/SlugEditor.mdx b/packages/slug/src/SlugEditor.mdx
index bb07b4537..ffee8d546 100644
--- a/packages/slug/src/SlugEditor.mdx
+++ b/packages/slug/src/SlugEditor.mdx
@@ -1,21 +1,23 @@
---
name: Slug
route: /slug
-menu: Components
+menu: Editors
---
-# Slug
+import Readme from '../README.md';
+
+
import { Playground, Props } from 'docz';
import { SingleLineEditor } from '../../single-line/src/index.tsx'
import { SlugEditor } from './SlugEditor.tsx';
-import { createFakeFieldAPI, createFakeLocalesAPI } from '@contentful/field-editor-test-utils';
+import { createFakeFieldAPI, createFakeLocalesAPI, ActionsPlayground } from '@contentful/field-editor-test-utils';
## Default locale
{() => {
- const [field] = createFakeFieldAPI(
+ const [field, mitt] = createFakeFieldAPI(
field => ({
...field,
id: 'slug-id',
@@ -61,6 +63,7 @@ import { createFakeFieldAPI, createFakeLocalesAPI } from '@contentful/field-edit
+
);
}}
@@ -134,3 +137,8 @@ import { createFakeFieldAPI, createFakeLocalesAPI } from '@contentful/field-edit
);
}}
+
+
+## Props
+
+
diff --git a/packages/slug/src/SlugEditor.tsx b/packages/slug/src/SlugEditor.tsx
index 4824f141a..556978f84 100644
--- a/packages/slug/src/SlugEditor.tsx
+++ b/packages/slug/src/SlugEditor.tsx
@@ -12,6 +12,9 @@ export interface SlugEditorProps {
baseSdk: BaseExtensionSDK;
+ /**
+ * sdk.field
+ */
field: FieldAPI;
}
diff --git a/packages/tags/README.md b/packages/tags/README.md
index aafec0c0d..ab3bee1d1 100644
--- a/packages/tags/README.md
+++ b/packages/tags/README.md
@@ -1,23 +1,11 @@
# @contentful/field-editor-tags
-This package contains a React `TagsEditor` component and an extension that is used as a default for the `Symbol / List` field type in the Contentful web application.
+```bash
+npm install @contentful/field-editor-tags
+```
-## Commands
+This package contains a React `TagsEditor` component that is used as a default for the `Symbol / List` field type in the Contentful web application.
-Uses [`tsdx`](https://github.com/palmerhq/tsdx) - a zero-config CLI that helps you develop, test, and publish modern TypeScript packages with ease.
-
-### `yarn watch`
-
-Runs the project in development/watch mode. Your library will be rebuilt if you make edits.
-
-### `yarn build`
-
-Bundles the package to the `dist` folder.
-The package is optimized and bundled with Rollup into multiple formats (CommonJS, UMD, and ES Module).
-
-### `yarn test`
-
-Runs the test watcher (Jest) in an interactive mode.
-By default, runs tests related to files changed since the last commit.
-
-For more information check [`tsdx` documentation](https://github.com/palmerhq/tsdx) out.
+```js
+import { TagsEditor } from '@contentful/field-editor-tags';
+```
diff --git a/packages/tags/src/TagsEditor.mdx b/packages/tags/src/TagsEditor.mdx
index cca4985b8..b340ef4e1 100644
--- a/packages/tags/src/TagsEditor.mdx
+++ b/packages/tags/src/TagsEditor.mdx
@@ -1,14 +1,16 @@
---
name: Tags
route: /tags
-menu: Components
+menu: Editors
---
-# Tags
+import Readme from '../README.md';
-import { Playground } from 'docz';
-import { TagsEditor } from './index.tsx';
-import { createFakeFieldAPI } from '@contentful/field-editor-test-utils';
+
+
+import { Playground, Props } from 'docz';
+import { TagsEditorContainer as TagsEditor } from './TagsEditorContainer.tsx';
+import { createFakeFieldAPI, ActionsPlayground } from '@contentful/field-editor-test-utils';
## In Action
@@ -16,8 +18,13 @@ import { createFakeFieldAPI } from '@contentful/field-editor-test-utils';
{() => {
- const [field] = createFakeFieldAPI();
- return ;
+ const [field, mitt] = createFakeFieldAPI();
+ return (
+
+
+
+
+ );
}}
@@ -46,3 +53,7 @@ import { createFakeFieldAPI } from '@contentful/field-editor-test-utils';
return ;
}}
+
+## Props
+
+
diff --git a/packages/tags/src/TagsEditor.tsx b/packages/tags/src/TagsEditor.tsx
index d526a439e..9b2461660 100644
--- a/packages/tags/src/TagsEditor.tsx
+++ b/packages/tags/src/TagsEditor.tsx
@@ -8,7 +8,7 @@ import { ConstraintsType, Constraint } from './types';
import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
import arrayMove from 'array-move';
-interface TagsEditorProps {
+export interface TagsEditorProps {
items: string[];
isDisabled: boolean;
hasError: boolean;
diff --git a/packages/tags/src/TagsEditorContainer.tsx b/packages/tags/src/TagsEditorContainer.tsx
index 1269fc9e5..4fac41007 100644
--- a/packages/tags/src/TagsEditorContainer.tsx
+++ b/packages/tags/src/TagsEditorContainer.tsx
@@ -9,7 +9,9 @@ export interface TagsEditorContainerProps {
* is the field disabled initially
*/
isInitiallyDisabled: boolean;
-
+ /**
+ * sdk.field
+ */
field: FieldAPI;
}
diff --git a/packages/url/README.md b/packages/url/README.md
index 829c4450a..d7a7abc11 100644
--- a/packages/url/README.md
+++ b/packages/url/README.md
@@ -1,23 +1,11 @@
# @contentful/field-editor-url
-This package contains a React `UrlEditor` component.
+```bash
+npm install @contentful/field-editor-url
+```
-## Commands
+This package contains a React `UrlEditor` component that is used as a default for the `Symbol` field type in the Contentful web application.
-Uses [`tsdx`](https://github.com/palmerhq/tsdx) - a zero-config CLI that helps you develop, test, and publish modern TypeScript packages with ease.
-
-### `yarn watch`
-
-Runs the project in development/watch mode. Your library will be rebuilt if you make edits.
-
-### `yarn build`
-
-Bundles the package to the `dist` folder.
-The package is optimized and bundled with Rollup into multiple formats (CommonJS, UMD, and ES Module).
-
-### `yarn test`
-
-Runs the test watcher (Jest) in an interactive mode.
-By default, runs tests related to files changed since the last commit.
-
-For more information check [`tsdx` documentation](https://github.com/palmerhq/tsdx) out.
+```js
+import { UrlEditor } from '@contentful/field-editor-url';
+```
diff --git a/packages/url/src/UrlEditor.mdx b/packages/url/src/UrlEditor.mdx
index 0679cc273..7c84d8299 100644
--- a/packages/url/src/UrlEditor.mdx
+++ b/packages/url/src/UrlEditor.mdx
@@ -1,31 +1,51 @@
---
name: Url
route: /url
-menu: Components
+menu: Editors
---
-# Url
+import Readme from '../README.md';
+
+
import { Playground, Props } from 'docz';
import { UrlEditor } from './UrlEditor.tsx';
-import { createFakeFieldAPI } from '@contentful/field-editor-test-utils';
+import { createFakeFieldAPI, ActionsPlayground } from '@contentful/field-editor-test-utils';
## In Action
{() => {
- const [field] = createFakeFieldAPI();
- return ;
+ const [field, mitt] = createFakeFieldAPI();
+ return (
+