Last Rev UI Extension Library

A collection of UI Extensions for Contentful like a Color picker, SEO, Categories and more.

Getting Started

Clone the repository

git clone [email protected]:last-rev-llc/contentful-ui-extensions.git

Install Dependencies

npm install

OR

yarn install

Start the application

npm start

Running Locally

In order to help streamline the process of development we have created a mock SDK that allows you to run the extensions locally with hot reload. You can also use this to see mock examples of the expected response from Contentful and data structure or objects.

Open the browser

http://localhost:3000/

This will be a list of all available UI Extensions.

Using Netlify Lambda Functions

Some UI Extensions, especially ones that integrate with third party services will need to communicate using a serverless function. We use Netlify for hosting and below are the instructions to run them locally

First you need to install the Netlify CLI Tools

npm install netlify-cli -g

To start the application use the following command instead of npm start. This starts a node server as well as your React application

ntl dev

Creating a new function

netlify functions:create function-name

Functions are located in the /lambda folder located in the project root directory. This is defined in the netlify.toml file

Notes on Functions:

• You mush specify the headers in the return. For instance you must specify Access-Control-Allow-Origin to prevent CORS issues
• You must include any dependencies you use in your Lambda functions in the main package.json
• Environment Variables must be set in the Netlify UI and are availalbe locally when running ntl dev

Using in Contentful

To see the extension in your Contentful instance follow the directions below for each extension.

When running locally you will need to allow "unsafe" scripts to be allowed. This is because you run localhost with http and since Contentful injects it using an iFrame browsers will block them by default.

Individual Extension Documentation

• Address
• Color Picker
• SEO
• PersonName
• PhoneNumber

Prerequisites

You need an account for Contentful to use these extensions.

• Go to www.contentful.com
• Fill out the form and you will go to your first space
• Please Follow the instructions for Installing and using Extensions

Application Structure

.
├── public
├── src
│   ├── __mocks__
│   ├── extensions
│   ├── ├── BynderImages
│   ├── ├── ColorPicker
│   ├── ├── PersonName
│   ├── ├── PhoneNumber
│   ├── ├── Seo
│   ├── ├── FormStack
│   ├── shared
├── history.js
├── index.js
├── .env.local
├── .eslintrc.js
├── .gitignore
├── .nvmrc
└── README.md

Testing

We use Jest and React Testing Library for all integration testing.

Running Tests

Normal watch mode

npm test

Mocks

.
├── __mocks__
│   ├── mockContentfulAsset.js          # Mock Asset response from Contentful
│   ├── mockContentfulContentType.js    # Mock Content Type Response from Contentful
│   └── mockContentfulSdk.js            # Mock SDK used for mocking functions and data returned by Contentful
│   └── mockLocations.js                # Mock locations for Contentful
└── extensions
│   ├── Seo                             # Each extension has a _mocks_ folder and a mockFieldValue and mockAppConfig (for apps alpha)
│   ├── ├── __mocks__                   # mockFieldValue and mockAppConfig for SEO

Deployment

You can deploy this to Netlify with one click

Built With

• Create React App
• Contentful Management API
• Contentful UI Extensions

Contributing

If you would like to contribute please submit a pull request. Make sure you write tests and it passes the linter before submitting.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

• Brad Taylor - Initial work - bradtaylorsf

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details