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 git@github.com: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
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
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
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