docs: add props and playgrounds

contentful · Apr 24, 2020 · 4d3773c · 4d3773c
1 parent 38356dc
commit 4d3773c
Show file tree

Hide file tree

Showing 39 changed files with 316 additions and 76 deletions.
diff --git a/packages/boolean/src/BooleanEditor.mdx b/packages/boolean/src/BooleanEditor.mdx
@@ -6,15 +6,24 @@ menu: Editors
 
 # Boolean
 
-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
 
 <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} />
diff --git 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/src/CheckboxEditor.mdx b/packages/checkbox/src/CheckboxEditor.mdx
@@ -6,26 +6,21 @@ menu: Editors
 
 # Checkbox
 
-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
 
-<Playground>
-  {() => {
-    const [field] = createFakeFieldAPI();
-    return (
-      <CheckboxEditor field={field} locales={createFakeLocalesAPI()} isInitiallyDisabled={false} />
-    );
-  }}
-</Playground>
-
----
+### with proper configuration
 
 <Playground>
   {() => {
-    const [field] = createFakeFieldAPI(
+    const [field, mitt] = createFakeFieldAPI(
       mock => ({
         ...mock,
         items: {
@@ -34,8 +29,30 @@ import { createFakeFieldAPI, createFakeLocalesAPI } from '@contentful/field-edit
       }),
       ['test1', 'test2', 'test3']
     );
+    return (
+      <div>
+        <CheckboxEditor
+          field={field}
+          locales={createFakeLocalesAPI()}
+          isInitiallyDisabled={false}
+        />
+        <ActionsPlayground mitt={mitt} />
+      </div>
+    );
+  }}
+</Playground>
+
+### no configuration
+
+<Playground>
+  {() => {
+    const [field] = createFakeFieldAPI();
     return (
       <CheckboxEditor field={field} locales={createFakeLocalesAPI()} isInitiallyDisabled={false} />
     );
   }}
 </Playground>
+
+## Props
+
+<Props of={CheckboxEditor} />
diff --git 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/date/src/DateEditor.mdx b/packages/date/src/DateEditor.mdx
@@ -34,3 +34,7 @@ import { createFakeFieldAPI, ActionsPlayground } from '@contentful/field-editor-
 }}
 
 </Playground>
+
+## Props
+
+<Props of={DateEditor} />
diff --git 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/src/DropdownEditor.mdx b/packages/dropdown/src/DropdownEditor.mdx
@@ -8,22 +8,33 @@ menu: Editors
 
 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
 
 ### with proper configuration
 
 <Playground>
   {() => {
-    const [field] = createFakeFieldAPI(mock => {
+    const [field, mitt] = createFakeFieldAPI(mock => {
       return {
         ...mock,
         validations: [{ in: ['banana', 'orange', 'strawberry'] }]
       };
     });
     return (
-      <DropdownEditor field={field} locales={createFakeLocalesAPI()} isInitiallyDisabled={false} />
+      <div>
+        <DropdownEditor
+          field={field}
+          locales={createFakeLocalesAPI()}
+          isInitiallyDisabled={false}
+        />
+        <ActionsPlayground mitt={mitt} />
+      </div>
     );
   }}
 </Playground>

diff --git 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/json/src/JsonEditor.mdx b/packages/json/src/JsonEditor.mdx
@@ -25,3 +25,8 @@ import { createFakeFieldAPI, ActionsPlayground } from '@contentful/field-editor-
 }}
 
 </Playground>
+
+
+## Props
+
+<Props of={JsonEditor} />
diff --git 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/src/ListEditor.mdx b/packages/list/src/ListEditor.mdx
@@ -6,17 +6,24 @@ menu: Editors
 
 # List
 
-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
 
 <Playground>
   {() => {
-    const [field] = createFakeFieldAPI();
+    const [field, mitt] = createFakeFieldAPI();
     return (
-      <ListEditor field={field} locales={createFakeLocalesAPI()} isInitiallyDisabled={false} />
+      <div>
+        <ListEditor field={field} locales={createFakeLocalesAPI()} isInitiallyDisabled={false} />
+        <ActionsPlayground mitt={mitt} />
+      </div>
     );
   }}
 </Playground>
@@ -31,3 +38,7 @@ import { createFakeFieldAPI, createFakeLocalesAPI } from '@contentful/field-edit
     );
   }}
 </Playground>
+
+## Props
+
+<Props of={ListEditor} />
diff --git 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/src/LocationEditor.mdx b/packages/location/src/LocationEditor.mdx
@@ -7,7 +7,7 @@ menu: Editors
 # LocationEditor
 
 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 +37,7 @@ import { createFakeFieldAPI, ActionsPlayground } from '@contentful/field-editor-
 }}
 
 </Playground>
+
+## Props
+
+<Props of={LocationEditor} />
diff --git 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>(ViewType.Address);

diff --git 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/src/MarkdownEditor.mdx b/packages/markdown/src/MarkdownEditor.mdx
@@ -78,3 +78,8 @@ import { createFakeFieldAPI, ActionsPlayground } from '@contentful/field-editor-
     );
   }}
 </Playground>
+
+
+## Props
+
+<Props of={MarkdownEditor} />
diff --git 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/src/MultipleLineEditor.mdx b/packages/multiple-line/src/MultipleLineEditor.mdx
@@ -8,15 +8,24 @@ menu: Editors
 
 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
 
 <Playground>
   {() => {
-    const [field] = createFakeFieldAPI();
+    const [field, mitt] = createFakeFieldAPI();
     const locales = createFakeLocalesAPI();
-    return <MultipleLineEditor field={field} locales={locales} isInitiallyDisabled={false} />;
+    return (
+      <div>
+        <MultipleLineEditor field={field} locales={locales} isInitiallyDisabled={false} />
+        <ActionsPlayground mitt={mitt} />
+      </div>
+    );
   }}
 </Playground>
 

diff --git 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;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,6 +15,9 @@ export interface JsonEditorProps { @@
        */
       isInitiallyDisabled: boolean;
+      /**
+       * sdk.field
+       */
       field: FieldAPI;
     }
@@ Expand Down @@