docs: release docs (contentful#101)

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.

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

README.md

@@ -1,4 +1,6 @@
-# Contentful Field Editors ![early access program](https://img.shields.io/badge/careful-early_access_program-orange)
+# @contentful/field-editors
+
+[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](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

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');
   });

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');

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(() => {

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(() => {

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');

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(() => {

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(() => {

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');

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: `<style>${forma36Styles}</style><style>${pikadayStyles}</style>`
     }
   },
-  menu: ['Introduction', 'Components'],
+  menu: ['Introduction', 'Editors', 'Shared'],
   modifyBabelRc: babelrc => {
     const newBabelRc = {
       ...babelrc,

lerna.json

@@ -8,7 +8,7 @@
       "message": "chore(release): publish %s"
     },
     "publish": {
-      "ignoreChanges": ["*.md"]
+      "ignoreChanges": ["*.md", "*.mdx"]
     }
   }
 }

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": {

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';
+
+<FieldConnector<boolean> field={sdk.field}>
+    {({ disabled, value, setValue }) => {
+      return (
+        <div>
+          <div>{value ? 'I am true' : 'I am false'}</div>
+          <button onClick={() => {
+            setValue(!value)
+          }}>
+            toggle
+          </button>
+        </div>
+      )
+    }}
+</FieldConnector>
+
+```

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';
+```

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';
+<Readme />
+
+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
 
 <Playground>
   {() => {
-    const [field] = createFakeFieldAPI();
-    return <BooleanEditor field={field} isInitiallyDisabled={false} />;
+    const [field, mitt] = createFakeFieldAPI();
+    return (
+      <div>
+        <BooleanEditor field={field} isInitiallyDisabled={false} />
+        <ActionsPlayground mitt={mitt} />
+      </div>
+    );
   }}
 </Playground>
+
+## Props
+
+<Props of={BooleanEditor} />