Suggest Category Contentful UI Extension

Example UI extension for Contentful that shows you how to integrate a third party API.

You can find the presentation files under /presentation.

Prerequisites

You will need:

A Contentful account and space with at least a content type with a "description" text field and a "category" symbol field.
A free API key for Dandelion.

With the repo cloned/downloaded, you should start by running the following commands:

npm install
npm run login
npm run configure
npm start

You can check out the commits to follow along step-by-step.

Bootstrap

The initial commit shows you the boilerplate code generated by the create-contentful-extension CLI. The choices made for the setup were "Field extension" type, "Symbol" field type, and "JavaScript" for the language.
Forma 36 components

This commit adds the React components needed for the custom UI extension. A text input to show the suggested category and a button for updating the category.
External change handlers

Updates the change handlers for keeping the "category" and "description" fields up-to-date. This is important e.g. when multiple people edit the same entry simultaneously.
Style tweaks & CSS variables

Tweaks the spacing between the components. This uses the pre-defined CSS variables imported from the @contentful/forma-36-tokens library.
Integrate API

Adds axios as a new dependency to make HTTP requests. Adds an installation parameter to pass the Dandelion API token to the UI extension. Integrates the Dandelion API to automatically predict the category based on the text in the "description" field.