This field type is not supported.
;
21 | }
22 |
23 | export default CoveoSearchFieldDisplay;
24 |
--------------------------------------------------------------------------------
/src/extensions/BynderImage/README.md:
--------------------------------------------------------------------------------
1 | # Last Rev: Bynder Image
2 |
3 | The Last Rev Bynder Image extension is a field extension that copies information contained in Bynder Image JSON to Contentful fields.
4 |
5 |
6 | ## Setup Instructions
7 |
8 | 1. Create a content model with the following ids and fields:
9 | * bynderId : Symbol
10 | * imageName : Symbol
11 | * internalTitle : Symbol
12 | * altTextOverride : Symbol
13 | * bynderData : JSON
14 |
15 | 2. Install the extension in Contentful
16 | 3. Choose the bynderId field and set it's appearance to use this extension
17 | 4. That's it. Whenever the bynder Data is changed the other fields will update with the JSON information.
18 |
19 | ## Reporting Issues
20 |
21 | If you find any bugs or want to suggest a feature, please submit them on the Github repo Issues tab. Thanks!
22 |
--------------------------------------------------------------------------------
/src/extensions/CoveoSearch/README.md:
--------------------------------------------------------------------------------
1 | # Last Rev: Coveo Search
2 |
3 | use a pre-configured search to either find entries to add to a reference field, or to generate a search to be used on the client side.
4 |
5 | ## Setup Instructions
6 |
7 | 1. [Click here to deploy](https://app.netlify.com/start/deploy?repository=https://github.com/last-rev-llc/contentful-ui-extensions) to Netlify or deploy this repo to a hosting provider of your choice.
8 | 2. Install the extension using the Contentful content management API. See example at [./install.http](./install.http).
9 |
10 | ## Field configuration
11 |
12 | Whenever this extension is added to a field, the Coveo search page name used for the search needs to be entered.
13 |
14 | ## Reporting Issues
15 |
16 | If you find any bugs or want to suggest a feature, please submit them on the Github repo Issues tab. Thanks!
17 |
--------------------------------------------------------------------------------
/src/extensions/OperatingHours/mockSdk.js:
--------------------------------------------------------------------------------
1 | const sdk = {
2 | field: {
3 | getValue: () => ({
4 | daysOfWeek: [
5 | { dayOfWeek: 'Monday', isClosed: false, timezone: 'America/Chicago' },
6 | { dayOfWeek: 'Tuesday', isClosed: false, timezone: 'America/Chicago' },
7 | { dayOfWeek: 'Wednesday', isClosed: false, timezone: 'America/Chicago' },
8 | { dayOfWeek: 'Thursday', isClosed: false, timezone: 'America/Chicago' },
9 | { dayOfWeek: 'Friday', isClosed: false, timezone: 'America/Chicago' },
10 | { dayOfWeek: 'Saturday', isClosed: false, timezone: 'America/Chicago' },
11 | { dayOfWeek: 'Sunday', isClosed: false, timezone: 'America/Chicago' },
12 | ],
13 | overrideDays: [],
14 | friendlyLabels: [],
15 | }),
16 | setValue: val => val,
17 | },
18 | };
19 |
20 | export default sdk;
21 |
--------------------------------------------------------------------------------
/src/extensions/FormBuilder/hooks/utils.js:
--------------------------------------------------------------------------------
1 | import { v4 as uuidv4 } from 'uuid';
2 |
3 | export function ensureIds(steps) {
4 | return steps.map((step) => ({
5 | id: uuidv4(),
6 | ...step,
7 | fields: step.fields.map((field) => ({ id: uuidv4(), ...field }))
8 | }));
9 | }
10 |
11 | export function buildField({ name = 'no_name', type = 'hidden', value = false } = {}) {
12 | return {
13 | id: uuidv4(),
14 | type,
15 | name,
16 | value
17 | };
18 | }
19 |
20 | export function buildStep(title = 'Step title') {
21 | return {
22 | title,
23 | id: uuidv4(),
24 | fields: [
25 | //
26 | buildField({ name: 'first_field' })
27 | ]
28 | };
29 | }
30 |
31 | export const URL_TYPES = ['hubspot', 'redirect'];
32 |
33 | export default {
34 | URL_TYPES,
35 | buildStep,
36 | buildField,
37 | ensureIds
38 | };
39 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import { init, locations } from 'contentful-ui-extensions-sdk';
4 | import * as Sentry from '@sentry/react';
5 | import App from './extensions/App';
6 | import mockLocations from './__mocks__/mockLocations';
7 |
8 | (()=> {
9 | Sentry.init({dsn: process.env.REACT_APP_SENTRY_URL});
10 | if(window.self !== window.top) {
11 | // Being loaded by an iFrame (Contentful)
12 | init(sdk => {
13 | ReactDOM.render(
14 |
16 | {message}
17 |
18 | ) : null;
19 | };
20 |
21 | const getInfo = (message) => {
22 | return (
23 |
26 | {message}
27 |
28 | );
29 | };
30 |
31 | const hasDuplicate = (jsonObject, newName, oldName) => {
32 | return _.keys(jsonObject)
33 | .filter(key => key !== oldName)
34 | .some(key => newName.toUpperCase() === key.toUpperCase());
35 | };
36 |
37 | export {
38 | updateJson,
39 | getError,
40 | hasDuplicate,
41 | getInfo
42 | };
43 |
--------------------------------------------------------------------------------
/src/extensions/RecipeSteps/RecipeSteps.scss:
--------------------------------------------------------------------------------
1 | #add-table-row-wrap {
2 | margin-top: 1rem;
3 | }
4 |
5 | table.steps-table {
6 | margin-top: 1rem;
7 |
8 | tr {
9 | td {
10 | padding-top: 0.5rem;
11 | padding-bottom: 0.5rem;
12 | vertical-align: middle;
13 |
14 | &.col-actions {
15 | width: 1%;
16 | white-space: nowrap;
17 |
18 | * {
19 | visibility: hidden;
20 | }
21 | }
22 | }
23 |
24 | &:hover {
25 | td.col-actions {
26 | * {
27 | visibility: visible;
28 | }
29 | }
30 | }
31 | }
32 |
33 | th {
34 | font-weight: bold;
35 | }
36 | }
37 |
38 | #dialog-step-wrap {
39 | margin: 2rem;
40 | }
41 |
42 | #form-actions-row {
43 | * {
44 | text-align: center;
45 | }
46 | }
--------------------------------------------------------------------------------
/src/shared/modules/getWorkflowState.js:
--------------------------------------------------------------------------------
1 | const isDraft = (entity) => {
2 | return !entity.sys.publishedVersion;
3 | };
4 |
5 | const isChanged = (entity) => {
6 | return !!entity.sys.publishedVersion &&
7 | entity.sys.version >= entity.sys.publishedVersion + 2;
8 | };
9 |
10 | const isPublished = (entity) => {
11 | return !!entity.sys.publishedVersion &&
12 | entity.sys.version === entity.sys.publishedVersion + 1;
13 | };
14 |
15 | const isArchived = (entity) => {
16 | return !!entity.sys.archivedVersion;
17 | };
18 |
19 | const getWorkflowState = (entity) => {
20 | if(isArchived(entity)) return 'archived';
21 | if(isDraft(entity)) return 'draft';
22 | if(isChanged(entity)) return 'changed';
23 | if(isPublished(entity)) return 'published';
24 | return null;
25 | };
26 |
27 | export {
28 | isDraft,
29 | isChanged,
30 | isPublished,
31 | isArchived,
32 | getWorkflowState,
33 | };
34 |
35 |
36 | export default getWorkflowState;
37 |
38 |
39 |
--------------------------------------------------------------------------------
/src/extensions/Seo/Seo.scss:
--------------------------------------------------------------------------------
1 | .seo-config {
2 | margin: 20px auto;
3 | width: 90%;
4 | }
5 |
6 | .tab-panel {
7 | padding: 10px;
8 | }
9 |
10 | .fieldset {
11 | margin-top: 10px;
12 | }
13 |
14 | .search-preview {
15 | font-family: arial,sans-serif;
16 | line-height: 1.57;
17 | font-size: small;
18 | font-weight: normal;
19 | margin: 0;
20 | & a {
21 | text-decoration: none;
22 | }
23 | & h3 {
24 | font-size: 20px;
25 | line-height: 1.3;
26 | display: inline-block;
27 | margin: 0;
28 | padding: 0;
29 | color: #1a0dab;
30 | }
31 | & .cite {
32 | padding-bottom: 0px;
33 | padding-top: 1px;
34 | display: inline-block;
35 | & cite {
36 | font-size: 16px;
37 | padding-top: 1px;
38 | line-height: 1.5;
39 | color: #006621;
40 | font-style: normal;
41 | }
42 | }
43 | & .description {
44 | color: #545454;
45 | max-width: 48em;
46 | font-size: 14px;
47 | }
48 | }
49 |
50 |
--------------------------------------------------------------------------------
/src/extensions/BynderImage/mockSdk.js:
--------------------------------------------------------------------------------
1 | export const mockBynderData = [
2 | {
3 | id: 12345678,
4 | description: "fake image description",
5 | name: "fake image"
6 | }
7 | ];
8 |
9 | class fakeField {
10 | constructor() {
11 | this._value = "";
12 | }
13 | setValue(v) {
14 | this._value = v;
15 | }
16 | getValue() {
17 | return this._value;
18 | }
19 | onValueChanged = callback => {
20 | this._callback = callback;
21 | };
22 | removeValue() {
23 | this._value = "REMOVED";
24 | }
25 | }
26 |
27 | export function createMockSDK() {
28 | return {
29 | window: {
30 | startAutoResizer: () => {}
31 | },
32 | field: new fakeField(),
33 | entry: {
34 | fields: {
35 | bynderId: new fakeField(),
36 | imageName: new fakeField(),
37 | altText: new fakeField(),
38 | altTextOverride: new fakeField(),
39 | internalTitle: new fakeField(),
40 | bynderData: new fakeField()
41 | }
42 | }
43 | };
44 | }
45 |
--------------------------------------------------------------------------------
/src/extensions/FormBuilder/hooks/useFormConfig.js:
--------------------------------------------------------------------------------
1 | import useFormSteps from './useFormSteps';
2 | import useProviderConfig from './useProviderConfig';
3 |
4 | import { ensureIds } from './utils';
5 |
6 | /**
7 | * Wrapper over other hooks which provide most of our form builder functionality
8 | * These functionalities include adding, editing, deleting and reordering steps & fields.
9 | *
10 | * the useProviderConfig is our main form configuration
11 | * */
12 | export default function useFormConfig(handleFieldChange, initialState = {}) {
13 | const stepConfig = useFormSteps(handleFieldChange, initialState);
14 | const formConfig = useProviderConfig(handleFieldChange, initialState);
15 |
16 | const loadState = ({ steps = [], provider = {} }) => {
17 | if (steps && steps.length > 0) {
18 | stepConfig.stepsUpdate(ensureIds(steps));
19 | }
20 |
21 | if (provider && Object.keys(provider).length > 0) {
22 | formConfig.update(provider);
23 | }
24 | };
25 |
26 | return { formConfig, stepConfig, loadState };
27 | }
28 |
--------------------------------------------------------------------------------
/src/extensions/ContentDiff/constants.js:
--------------------------------------------------------------------------------
1 | export const entryWrapTestId = 'cdd-entry-wrap';
2 | export const entryLabelTestId = 'cdd-entry-label';
3 | export const entryValueTestId = 'cdd-entry-value';
4 | export const arrayWrapTestId = 'cdd-array-wrap';
5 | export const arrayLabelTestId = 'cdd-array-label';
6 | export const arrayListTestId = 'cdd-array-list';
7 | export const arrayListItemTestId = 'cdd-array-list-item';
8 |
9 | export const firstIndex = 0;
10 |
11 | export const fieldTypes = {
12 | richText: 'RichText',
13 | symbol: 'Symbol',
14 | object: 'Object',
15 | array: 'Array',
16 | link: 'Link',
17 | text: 'Text',
18 | boolean: 'Boolean',
19 | };
20 |
21 | export const linkTypes = {
22 | entry: 'Entry',
23 | asset: 'Asset',
24 | };
25 |
26 | export const richTextFieldTypes = {
27 | asset: 'embedded-asset-block',
28 | entry: 'embedded-entry-block',
29 | paragraph: 'paragraph',
30 | };
31 |
32 | export const paragraphFieldTypes = {
33 | text: 'text',
34 | inlineEntry: 'embedded-entry-inline',
35 | hyperlink: 'hyperlink',
36 | };
37 |
--------------------------------------------------------------------------------
/src/extensions/ColorPicker/ColorPicker.scss:
--------------------------------------------------------------------------------
1 | ul.color-choice-list {
2 | list-style: none;
3 | display: flex;
4 | flex-wrap: wrap;
5 | align-content: space-around;
6 | }
7 |
8 | li.color-choice-wrap {
9 | margin: 0.25rem 0.5rem;
10 | border-radius: 0.25rem;
11 | }
12 |
13 | button.btn.color-choice {
14 | color: transparent;
15 | border: 2px solid #fff;
16 | border-radius: inherit;
17 | mix-blend-mode: difference;
18 | position: relative;
19 | min-width: 6rem;
20 | min-height: 2rem;
21 |
22 | &:focus {
23 | outline-width: 0;
24 | }
25 |
26 | &:hover,
27 | &.active {
28 | border: 2px solid #fff !important;
29 | color: #fff;
30 | }
31 |
32 | &.active {
33 | color: transparent;
34 |
35 | &::before {
36 | content: '\2713';
37 | color: #fff;
38 | font-weight: bold;
39 | font-size: 1.5rem;
40 | position: absolute;
41 | display: flex;
42 | align-items: center;
43 | justify-content: center;
44 | width: 100%;
45 | height: 100%;
46 | top: 0;
47 | left: 0;
48 | }
49 | }
50 | }
--------------------------------------------------------------------------------
/src/extensions/PhoneNumber/README.md:
--------------------------------------------------------------------------------
1 | # Last Rev: Phone Number
2 |
3 | The Last Rev Phone Number extension is a field extension that saves phone numbers with extensions and a label.
4 |
5 | ## Setup Instructions
6 |
7 | 1. [Click here to deploy](https://app.netlify.com/start/deploy?repository=https://github.com/last-rev-llc/contentful-ui-extensions) to Netlify or deploy this repo to a hosting provider of your choice.
8 | 2. Create a new UI Extension in your space and choose these following Options:
9 | - Name: Phone Number
10 | - Field Types: Symbol
11 | - Hosting: Self-hosted(src)
12 | - Self-Hosted URL: [https://your-extension-domain.netlify.com/phone-number](https://your-extension-domain.netlify.com/phone-number)
13 | 3. Create a text field in your content model you want to use the phone number field
14 | 4. On the Content Model page, select "Settings" on the new text field you added
15 | 5. Go to Appearance and select your new UI Extension
16 |
17 | ## Reporting Issues
18 |
19 | If you find any bugs or want to suggest a feature, please submit them on the Github repo Issues tab. Thanks!
20 |
--------------------------------------------------------------------------------
/src/extensions/CoveoSearch/install.http:
--------------------------------------------------------------------------------
1 | PUT https://api.contentful.com/spaces/4yx69hifndy8/environments/jaime-test-coveo-uie/extensions/coveo-search
2 | Authorization: Bearer
19 | {results.map(result => {
20 | const title = get(result, "title");
21 | const contentType = get(result, contentTypeKey);
22 | const contentId = get(result, contentIdKey);
23 | const id = `${contentType}|${contentId}`;
24 | const isChecked = some(
25 | selectedContentIds,
26 | selectedId => selectedId === contentId
27 | );
28 | return (
29 |
45 | ) : (
46 |
30 | {type === TYPE_REF_SEARCH ? (
31 | selectReferenceHandler(contentId)}
36 | labelText={title}
37 | />
38 | ) : (
39 | {title}
40 | )}
41 |
42 | );
43 | })}
44 | No results matching the search criteria
47 | );
48 | }
49 |
50 | export default CoveoSearchResultList;
51 |
--------------------------------------------------------------------------------
/src/extensions/RecipeIngredients/RecipeIngredients.scss:
--------------------------------------------------------------------------------
1 | #add-table-row-wrap {
2 | margin-top: 1rem;
3 | }
4 |
5 | table.steps-table {
6 | margin-top: 1rem;
7 |
8 | tr {
9 | td {
10 | padding-top: 0.5rem;
11 | padding-bottom: 0.5rem;
12 | vertical-align: middle;
13 |
14 | &.col-actions {
15 | width: 1%;
16 | white-space: nowrap;
17 |
18 | * {
19 | visibility: hidden;
20 | }
21 | }
22 | }
23 |
24 | &:hover {
25 | td.col-actions {
26 | * {
27 | visibility: visible;
28 | }
29 | }
30 | }
31 | }
32 |
33 | th {
34 | font-weight: bold;
35 | }
36 | }
37 |
38 | #dialog-step-wrap {
39 | margin: 2rem;
40 | }
41 |
42 | #form-actions-row {
43 | * {
44 | text-align: center;
45 | }
46 | }
47 |
48 | #bulk-editing{
49 | margin: 1rem;
50 | height: 500px;
51 | width: 100%;
52 | }
53 |
54 | #bulk-editing th {
55 | position: sticky;
56 | top: 0;
57 | z-index: 1000;
58 | }
59 |
60 | #bulk-editing p {
61 | margin: 1rem auto;
62 | width: 800px;
63 | text-align: center;
64 | }
65 |
66 | #bulk-editing .action-buttons {
67 | padding: 1rem 2rem;
68 | position: fixed;
69 | bottom: 0;
70 | text-align: right;
71 | width: 100%;
72 | background-color: white;
73 | }
74 |
75 | #bulk-editing .action-buttons .bulk-submit-btn {
76 | margin-left: 2rem;
77 |
78 | }
79 |
80 | #bulk-editing .action-buttons .bulk-cancel-btn {
81 |
82 | }
83 |
84 | .bulk-step {
85 | width: 50px;
86 | }
--------------------------------------------------------------------------------
/src/extensions/FormBuilder/FieldModal/AdditionalFields/Hidden.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { TextField } from '@contentful/forma-36-react-components';
4 | import { ErrorStyle } from '../../StepList/styles';
5 |
6 | import { errorOfType, errorTypes } from '../../validate';
7 |
8 | function extractValue({ value }) {
9 | if (typeof value === 'string') return value;
10 | return JSON.stringify(value);
11 | }
12 |
13 | function Hidden({ errors, updateField, field }) {
14 | const fieldErrors = errors[field.id];
15 | return (
16 | <>
17 |
25 |
51 | );
52 | }
53 |
54 | PhoneNumber.propTypes = {
55 | sdk: PropTypes.shape({
56 | field: PropTypes.shape({
57 | getValue: PropTypes.func.isRequired,
58 | setValue: PropTypes.func.isRequired,
59 | }),
60 | }).isRequired,
61 | };
62 |
--------------------------------------------------------------------------------
/src/extensions/CoveoSearch/CoveoReferenceSearch/CoveoReferenceSearchEntry.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/prop-types */
2 | import {
3 | DropdownList,
4 | DropdownListItem,
5 | EntityListItem
6 | } from "@contentful/forma-36-react-components";
7 | import { get } from "lodash";
8 | import React, { useEffect, useState } from "react";
9 | import { getWorkflowState } from "../../../shared/modules/getWorkflowState";
10 |
11 | function CoveoReferenceSearchEntry({ space, contentId, removeHandler }) {
12 | const [title, setTitle] = useState(null);
13 | const [status, setStatus] = useState(null);
14 | const [loading, setLoading] = useState(true);
15 | const [contentType, setContentType] = useState(null);
16 |
17 | useEffect(() => {
18 | const load = async () => {
19 | const entry = await space.getEntry(contentId);
20 | const { displayField, name } = await space.getContentType(
21 | get(entry, "sys.contentType.sys.id")
22 | );
23 | setTitle(get(entry, `fields.${displayField}.en-US`)); // TODO: locale?
24 | setStatus(getWorkflowState(entry));
25 | setContentType(name);
26 | setLoading(false);
27 | };
28 | load();
29 | }, [space, contentId]);
30 |
31 | return (
32 | ${getValue(entry)}
9 |${asset.fields.title['en-US']}
41 | -
42 |
34 |
53 | );
54 | };
55 |
56 | ColorPicker.propTypes = {
57 | sdk: PropTypes.shape({
58 | field: PropTypes.shape({
59 | getValue: PropTypes.func.isRequired,
60 | setValue: PropTypes.func.isRequired,
61 | validations: PropTypes.arrayOf(PropTypes.shape({
62 | in: PropTypes.array,
63 | }))
64 | })
65 | }).isRequired
66 | };
67 |
68 | export default ColorPicker;
69 |
--------------------------------------------------------------------------------
/src/extensions/ContentDiff/helpers/getters.js:
--------------------------------------------------------------------------------
1 | import { get, isArray, escape } from 'lodash';
2 | import { fieldTypes, linkTypes, arrayListItemTestId, arrayListTestId } from '../constants';
3 |
4 | export const getId = (field) => {
5 | return field.id;
6 | };
7 |
8 | export const getType = (field) => {
9 | return field.type;
10 | };
11 |
12 | export const getLabel = (field) => {
13 | return field.label;
14 | };
15 |
16 | export const getArrayType = (field) => {
17 | return field.arrayType;
18 | };
19 |
20 | export const getTextValue = (field) => {
21 | let value = escape(field.value)
22 | .replace('<code>', '-
35 | {getColorOptions().map((hex, index) => (
36 |
- 40 | 49 | 50 | ))} 51 |
')
23 | .replace('</code>', '');
24 | if (field.textType === 'markdown' || field.textType === 'multipleLine' || value.indexOf('') > -1) {
25 | value = `${value}`;
26 | }
27 | return value;
28 | };
29 |
30 | export const getValue = (field) => {
31 | let value;
32 | if (field) {
33 | if (field.type === fieldTypes.symbol || field.type === fieldTypes.text) {
34 | value = getTextValue(field);
35 | } else if (field.type === fieldTypes.link && field.linkType === linkTypes.asset) {
36 | value = get(field, 'asset');
37 | } else if (field.type === fieldTypes.link && field.linkType === linkTypes.entry) {
38 | const displayField = get(field, 'entryContentType.displayField');
39 | value = get(field, `entry.fields['${displayField}']['en-US']`);
40 | } else if (field.type === fieldTypes.boolean) {
41 | value = get(field, 'value') ? 'True' : 'False';
42 | } else {
43 | value = get(field, 'value');
44 | }
45 | }
46 | return value;
47 | };
48 |
49 | export const getArrayValue = (arrayField) => {
50 | const values = isArray(arrayField) ? arrayField : get(arrayField, 'value', []);
51 | if (!values.length) return '';
52 | const arrayValues = values
53 | .map((value) => `${value} `)
54 | .join('');
55 | return `${arrayValues}
`;
56 | };
57 |
--------------------------------------------------------------------------------
/src/extensions/FormBuilder/hooks/useFieldConfig.test.js:
--------------------------------------------------------------------------------
1 | import { renderHook, act } from '@testing-library/react-hooks';
2 | import useFieldConfig from './useFieldConfig';
3 |
4 | import { getStepsStateShim } from './test.helpers';
5 |
6 | describe('useFieldConfig', () => {
7 | const defaultSteps = [
8 | {
9 | id: 'step-id',
10 | fields: [
11 | //
12 | { id: 'first-id' },
13 | { id: 'second-id' }
14 | ]
15 | }
16 | ];
17 |
18 | function getFields({ steps }) {
19 | return steps.reduce((acc, i) => acc.concat(i.fields), []);
20 | }
21 |
22 | it('can remove a field', () => {
23 | const { result } = getStepsStateShim(defaultSteps);
24 | const { result: fields } = renderHook(() => useFieldConfig(result.current.formSteps.stepEdit));
25 |
26 | act(() => fields.current.fieldRemove('step-id', { id: 'first-id' }));
27 |
28 | expect(getFields(result.current.state).length).toEqual(1);
29 | });
30 |
31 | it('can edit a field', () => {
32 | const { result } = getStepsStateShim(defaultSteps);
33 | const { result: fields } = renderHook(() => useFieldConfig(result.current.formSteps.stepEdit));
34 |
35 | act(() => fields.current.fieldEdit('step-id', { id: 'first-id', title: 'test' }));
36 |
37 | expect(getFields(result.current.state)[0]).toMatchObject({ title: 'test' });
38 | });
39 |
40 | it('can add a field', () => {
41 | const { result } = getStepsStateShim(defaultSteps);
42 | const { result: fields } = renderHook(() => useFieldConfig(result.current.formSteps.stepEdit));
43 |
44 | act(() => fields.current.fieldAdd('step-id'));
45 |
46 | expect(getFields(result.current.state).length).toEqual(3);
47 | });
48 |
49 | it('can reorder fields', () => {
50 | const { result } = getStepsStateShim(defaultSteps);
51 | const { result: fields } = renderHook(() => useFieldConfig(result.current.formSteps.stepEdit));
52 |
53 | act(() => fields.current.fieldReorder('step-id', { oldIndex: 0, newIndex: 1 }));
54 |
55 | expect(getFields(result.current.state)[0].id).toEqual('second-id');
56 | });
57 | });
58 |
--------------------------------------------------------------------------------
/src/extensions/FormBuilder/hooks/useFormSteps.test.js:
--------------------------------------------------------------------------------
1 | import { act } from '@testing-library/react-hooks';
2 |
3 | import { getStepsStateShim } from './test.helpers';
4 |
5 | describe('useFormSteps', () => {
6 | const defaultSteps = [{ id: '9b33fea9', fields: [] }];
7 |
8 | it('loads the steps correctly', () => {
9 | const { result } = getStepsStateShim(defaultSteps);
10 |
11 | expect(result.current.state.steps).toMatchObject(defaultSteps);
12 | });
13 |
14 | it('updates a single step correctly', () => {
15 | const { result } = getStepsStateShim(defaultSteps);
16 |
17 | const firstStep = defaultSteps[0];
18 | act(() => result.current.formSteps.stepEdit('9b33fea9', { ...firstStep, title: 'Test' }));
19 |
20 | expect(result.current.state.steps[0]).toMatchObject({ ...firstStep, title: 'Test' });
21 | });
22 |
23 | it('updates a single step correctly (functional)', () => {
24 | const { result } = getStepsStateShim(defaultSteps);
25 |
26 | const firstStep = defaultSteps[0];
27 | act(() => result.current.formSteps.stepEdit('9b33fea9', (oldStep) => ({ ...oldStep, title: 'Test' })));
28 |
29 | expect(result.current.state.steps[0]).toMatchObject({ ...firstStep, title: 'Test' });
30 | });
31 |
32 | it('adds a new step', () => {
33 | const { result } = getStepsStateShim(defaultSteps);
34 |
35 | act(() => result.current.formSteps.stepAdd());
36 |
37 | expect(result.current.state.steps.length).toEqual(2);
38 | });
39 |
40 | it('removes a step', () => {
41 | const { result } = getStepsStateShim(defaultSteps);
42 |
43 | act(() => result.current.formSteps.stepAdd());
44 | act(() => result.current.formSteps.stepRemove(result.current.state.steps[1]));
45 |
46 | expect(result.current.state.steps.length).toEqual(1);
47 | });
48 |
49 | it('can reorder steps', () => {
50 | const { result } = getStepsStateShim(defaultSteps);
51 |
52 | act(() => result.current.formSteps.stepAdd());
53 | act(() => result.current.formSteps.stepReorder({ oldIndex: 0, newIndex: 1 }));
54 |
55 | expect(result.current.state.steps[0].id).not.toEqual('9b33fea9');
56 | });
57 | });
58 |
--------------------------------------------------------------------------------
/src/extensions/FormBuilder/hooks/useFormSteps.js:
--------------------------------------------------------------------------------
1 | import arrayMove from 'array-move';
2 |
3 | import { buildStep } from './utils';
4 |
5 | /**
6 | * Pass in a set of JSON steps and we'll generate a set of functionality
7 | * surrounding editing or reordering those steps
8 | *
9 | * We rely on the parent components state here so this function will use the onChange
10 | * callback to update that.
11 | *
12 | * onChange should be a function which takes a string and a
13 | * onChange('some.maybe.deep.key', someValue)
14 | * */
15 | export default function useFormSteps(onChange, { steps = [] } = {}) {
16 | const stepsUpdate = (newValues) => {
17 | if (newValues instanceof Function) {
18 | onChange('steps', newValues(steps));
19 | return;
20 | }
21 |
22 | onChange('steps', newValues);
23 | };
24 |
25 | const stepAdd = () =>
26 | stepsUpdate((oldSteps) =>
27 | // Generate a new empty step
28 | oldSteps.concat(buildStep(`New Step ${steps.length + 1}`))
29 | );
30 |
31 | const stepRemove = ({ id: idToRemove }) =>
32 | // Filter out old step by ID
33 | stepsUpdate((oldSteps) => oldSteps.filter(({ id }) => id !== idToRemove));
34 |
35 | const stepEdit = (stepId, stepUpdates) =>
36 | stepsUpdate((oldSteps) =>
37 | oldSteps.map((step) => {
38 | // If matching ID found replace the step, else return old step
39 | // We should pass the entire new step here to update
40 | if (step.id !== stepId) return step;
41 |
42 | // Allow the user to specify their own step updater function
43 | if (stepUpdates instanceof Function) {
44 | return stepUpdates(step);
45 | }
46 |
47 | // User has simply passed us an object to replace the step with
48 | return stepUpdates;
49 | })
50 | );
51 |
52 | const stepReorder = ({ oldIndex, newIndex }) =>
53 | // Move the item to position requested
54 | stepsUpdate((oldSteps) => arrayMove(oldSteps, oldIndex, newIndex));
55 |
56 | return {
57 | steps,
58 | stepAdd,
59 | stepEdit,
60 | stepRemove,
61 | stepReorder,
62 | stepsUpdate
63 | };
64 | }
65 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
14 |
18 |
19 |
28 | React App
29 |
30 |
31 |
32 |
33 |
43 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/src/extensions/CoveoSearch/CoveoReferenceSearch/CoveoReferenceSearchFieldDisplay.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/prop-types */
2 | // TODO: enable proptypes
3 | import React, { useCallback } from "react";
4 | import { TextLink } from "@contentful/forma-36-react-components";
5 | import { MultipleEntryReferenceEditor } from "@contentful/field-editor-reference";
6 | import "@contentful/forma-36-react-components/dist/styles.css";
7 | import { get, has, map } from "lodash";
8 |
9 | import { TYPE_REF_SEARCH } from "../constants";
10 |
11 | function CoveoReferenceSearchFieldDisplay({ sdk }) {
12 | const {
13 | field,
14 | dialogs: { openExtension: openDialogExtension },
15 | parameters: {
16 | instance: { searchPageName }
17 | }
18 | } = sdk;
19 |
20 | const addItems = useCallback(
21 | contentIds => {
22 | const items = field.getValue() || [];
23 | const newItems = [
24 | ...items,
25 | ...map(contentIds, contentId => ({
26 | sys: {
27 | type: "Link",
28 | linkType: "Entry",
29 | id: contentId
30 | }
31 | }))
32 | ];
33 | field.setValue(newItems);
34 | },
35 | [field]
36 | );
37 |
38 | const openDialog = async () => {
39 | const data = await openDialogExtension({
40 | width: "fullWidth",
41 | title: "Last Rev Coveo Reference Search",
42 | allowHeightOverflow: true,
43 | parameters: {
44 | searchPageName,
45 | type: TYPE_REF_SEARCH
46 | }
47 | });
48 | if (has(data, "selectedContentIds")) {
49 | addItems(get(data, "selectedContentIds"));
50 | }
51 | };
52 |
53 | return (
54 |
55 | (
65 |
66 | Search for content
67 |
68 | )}
69 | />
70 |
71 | );
72 | }
73 |
74 | export default CoveoReferenceSearchFieldDisplay;
75 |
--------------------------------------------------------------------------------
/src/extensions/FormBuilder/StepList/ConfirmDeleteModal.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import styled from 'styled-components';
3 | import { Heading, Button, FormLabel } from '@contentful/forma-36-react-components';
4 |
5 | import { useSDK } from '../../../context';
6 |
7 | import { ModalStyle } from '../styles';
8 |
9 | const Col = styled.div`
10 | display: flex;
11 | flex-direction: column;
12 | `;
13 |
14 | const Row = styled.div`
15 | display: flex;
16 | align-items: center;
17 | flex-direction: row;
18 | `;
19 |
20 | const Tag = styled(FormLabel)`
21 | color: #080808;
22 | min-width: 80px;
23 | background-color: whitesmoke;
24 |
25 | padding: 8px;
26 | margin-right: 8px;
27 |
28 | display: flex;
29 | text-align: right;
30 | align-items: center;
31 | justify-content: flex-end;
32 | `;
33 |
34 | function ConfirmDeleteModal() {
35 | const sdk = useSDK();
36 | const { type = 'field' } = sdk.parameters.invocation;
37 |
38 | const data = sdk.parameters.invocation[type];
39 |
40 | const handleCancel = () => sdk.close({ confirmation: null });
41 | const handleSubmit = () => sdk.close({ confirmation: true });
42 |
43 | const title = data.title || data.label || data.name;
44 |
45 | return (
46 |
47 | Confirm delete {type}
48 | {data && (
49 |
51 | Id:
52 | {data.id}
53 |
54 |
55 | Label:
56 |
57 | {// Handle object labels
58 | title instanceof Object ? data.name : title}
59 |
60 |
61 |
62 | )}
63 |
73 |
74 | );
75 | }
76 |
77 | export default ConfirmDeleteModal;
78 |
--------------------------------------------------------------------------------
/src/extensions/FormBuilder/FieldModal/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { omit } from 'lodash/fp';
3 | import { Button, Heading } from '@contentful/forma-36-react-components';
4 |
5 | import { useSDK } from '../../../context';
6 |
7 | import { ModalStyle } from '../styles';
8 |
9 | import FieldEditor from './FieldEditor';
10 |
11 | function isValid(field) {
12 | const { name } = field;
13 | if (name.length < 1) return false;
14 |
15 | const { type } = field;
16 | switch (type) {
17 | case 'select': {
18 | const { options = [] } = field;
19 | return options.length > 0 && options.every(({ label, value }) => label.length > 0 && value.length > 0);
20 | }
21 |
22 | default:
23 | break;
24 | }
25 |
26 | return true;
27 | }
28 |
29 | function FieldModal() {
30 | const sdk = useSDK();
31 | const { invocation } = sdk.parameters;
32 | const [field, setField] = useState(omit(['modal'], invocation.field || {}));
33 |
34 | const updateField = (maybeKeyMaybeObject, newValue = null) => {
35 | // Allow full object replacement (multiple keys)
36 | if (maybeKeyMaybeObject instanceof Object) {
37 | setField((prev) => ({
38 | ...prev,
39 | ...maybeKeyMaybeObject
40 | }));
41 | return;
42 | }
43 |
44 | // Allow setting by key & value
45 | setField((prev) => ({
46 | ...prev,
47 | [maybeKeyMaybeObject]: newValue
48 | }));
49 | };
50 |
51 | const handleCancel = () => sdk.close({ field: null });
52 | const handleSubmit = () => sdk.close({ field });
53 |
54 | return (
55 |
56 | Field Editor
57 |
74 | );
75 | }
76 |
77 | export default FieldModal;
78 |
--------------------------------------------------------------------------------
/src/__mocks__/mockContentfulAsset.js:
--------------------------------------------------------------------------------
1 | const success = {
2 | "sys": {
3 | "space": {
4 | "sys": {
5 | "type": "Link",
6 | "linkType": "Space",
7 | "id": "9o4l1mrd1tci"
8 | }
9 | },
10 | "id": "2OjCqPfrMWmUxlCHOT4ovc",
11 | "type": "Asset",
12 | "createdAt": "2019-10-29T17:31:31.862Z",
13 | "updatedAt": "2020-01-24T22:44:10.955Z",
14 | "environment": {
15 | "sys": {
16 | "id": "master",
17 | "type": "Link",
18 | "linkType": "Environment"
19 | }
20 | },
21 | "publishedVersion": 9,
22 | "publishedAt": "2020-01-24T22:44:10.955Z",
23 | "firstPublishedAt": "2020-01-24T22:40:38.664Z",
24 | "createdBy": {
25 | "sys": {
26 | "type": "Link",
27 | "linkType": "User",
28 | "id": "6Ntte0Bfc9VTOdBwRFarLv"
29 | }
30 | },
31 | "updatedBy": {
32 | "sys": {
33 | "type": "Link",
34 | "linkType": "User",
35 | "id": "6Ntte0Bfc9VTOdBwRFarLv"
36 | }
37 | },
38 | "publishedCounter": 2,
39 | "version": 10,
40 | "publishedBy": {
41 | "sys": {
42 | "type": "Link",
43 | "linkType": "User",
44 | "id": "6Ntte0Bfc9VTOdBwRFarLv"
45 | }
46 | }
47 | },
48 | "fields": {
49 | "title": {
50 | "en-US": "Screen Shot 2020-01-23 at 8.09.12 AM"
51 | },
52 | "description": {
53 | "en-US": "asdfasdfasdf"
54 | },
55 | "file": {
56 | "en-US": {
57 | "url": "//images.ctfassets.net/9o4l1mrd1tci/2OjCqPfrMWmUxlCHOT4ovc/e61c74e8219f0b1e8dd0c9d10b4c426b/Screen_Shot_2020-01-23_at_8.09.12_AM.png",
58 | "details": {
59 | "size": 131089,
60 | "image": {
61 | "width": 1936,
62 | "height": 1118
63 | }
64 | },
65 | "fileName": "Screen Shot 2020-01-23 at 8.09.12 AM.png",
66 | "contentType": "image/png"
67 | }
68 | }
69 | }
70 | };
71 |
72 | const error = {
73 | "sys": {
74 | "type": "Error",
75 | "id": "NotFound"
76 | },
77 | "message": "The resource could not be found.",
78 | "details": {
79 | "type": "Asset",
80 | "id": "2OjCqPfrMWmUxlCHOT4ov",
81 | "environment": "master",
82 | "space": "9o4l1mrd1tci"
83 | },
84 | "requestId": "7d52556546b10f7b1064055a1c8fee18"
85 | };
86 |
87 | const mockContentfulAsset = {
88 | success, error,
89 | };
90 |
91 | export default mockContentfulAsset;
--------------------------------------------------------------------------------
/src/extensions/ExtensionsList.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'react-router-dom';
3 |
4 | export default function ExtensionsList() {
5 | return (
6 |
7 |
8 | -
9 |
10 | Address
11 |
12 |
13 | -
14 |
15 | Bynder
16 |
17 |
18 | -
19 |
20 | Bynder Image
21 |
22 |
23 | -
24 |
25 | Color
26 |
27 |
28 | -
29 |
30 | Content Diff
31 |
32 |
33 | -
34 |
35 | Coveo Search
36 |
37 |
38 | -
39 |
40 | Seo
41 |
42 |
43 | -
44 |
45 | Localization Lookup
46 |
47 |
48 | -
49 |
50 | Locale Zooms
51 |
52 |
53 | -
54 |
55 | Operating Hours
56 |
57 |
58 | -
59 |
60 | Person Name
61 |
62 |
63 | -
64 |
65 | Phone Number
66 |
67 |
68 | -
69 |
70 | Recipe Ingredients
71 |
72 |
73 | -
74 |
75 | Recipe Steps
76 |
77 |
78 | -
79 |
80 | FormStack
81 |
82 |
83 | -
84 |
85 | Form Builder
86 |
87 |
88 |
89 |
90 | );
91 | }
92 |
--------------------------------------------------------------------------------
/src/extensions/BynderImage/BynderImage.test.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { mockBynderData, createMockSDK } from "./mockSdk";
3 | import BynderImage, { setIfEmpty } from "./BynderImage";
4 | import { fireEvent } from "@testing-library/dom";
5 | import { cleanup, render } from "@testing-library/react";
6 |
7 | afterEach(() => {
8 | cleanup();
9 | });
10 |
11 | describe("
42 | To delete {item.title} please type the name
43 |
75 |
76 | );
77 | };
78 |
79 | ConfirmDeleteDialog.propTypes = ConfirmDeleteDialogPropTypes;
80 |
81 | ConfirmDeleteDialog.defaultProps = {
82 | item: undefined,
83 | };
84 |
85 | export default ConfirmDeleteDialog;
86 |
--------------------------------------------------------------------------------
/src/extensions/RecipeSteps/dialogs/BulkEditSteps.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable consistent-return */
2 | import React, { useState } from 'react';
3 | import PropTypes from 'prop-types';
4 | import _ from 'lodash';
5 | import { getTextInput, getTextArea } from '../helpers';
6 | import { getButton, getBulkEditingTable } from '../../../shared/helpers/formControl';
7 |
8 | function BulkEditSteps({ sdk }) {
9 | const { rows } = sdk.parameters.invocation;
10 | const [stepsList, setStepsList] = useState(rows);
11 |
12 | const headers = ['step', 'title', 'body'];
13 |
14 | const handleFieldChange = (event) => {
15 | const identifyFieldArray = event.target.id.split('-');
16 | const updatedArray = stepsList.map((row, index) => {
17 | if (index === parseInt(identifyFieldArray[0], 10)) {
18 | return _.set(row, identifyFieldArray[1], event.target.value);
19 | }
20 | return row;
21 | });
22 | setStepsList(updatedArray);
23 | };
24 |
25 | const getTableCell = (row, key, index) => {
26 | const fieldValue = _.get(row, key).toString();
27 | const fieldId = `${index}-${key}`;
28 | switch (key) {
29 | case 'step':
30 | return getTextInput(fieldValue.toString(), handleFieldChange, {
31 | id: fieldId,
32 | name: fieldId,
33 | type: 'number',
34 | labelText: null,
35 | className: 'bulk-step'
36 | });
37 | case 'title':
38 | return getTextInput(fieldValue, handleFieldChange, {
39 | id: fieldId,
40 | name: fieldId,
41 | labelText: null
42 | });
43 | case 'body':
44 | return getTextArea(fieldValue, handleFieldChange, fieldId);
45 | default:
46 | break;
47 | }
48 | };
49 |
50 | const submitChanges = () => {
51 | sdk.close(stepsList);
52 | };
53 |
54 | const cancelChanges = () => {
55 | sdk.close();
56 | };
57 |
58 | return (
59 |
60 | {getBulkEditingTable(headers, stepsList, getTableCell, sdk)}
61 |
62 | {getButton('Cancel', 'muted', cancelChanges, 'cancel', 'bulk-cancel-btn')}
63 | {getButton('Save Items', 'positive', submitChanges, 'submit', 'bulk-submit-btn')}
64 |
65 |
66 | );
67 | }
68 |
69 | BulkEditSteps.propTypes = {
70 | sdk: PropTypes.shape({
71 | parameters: PropTypes.shape({
72 | invocation: PropTypes.shape({
73 | rows: PropTypes.array
74 | })
75 | }),
76 | close: PropTypes.func
77 | }).isRequired
78 | };
79 |
80 | export default BulkEditSteps;
81 |
--------------------------------------------------------------------------------
/src/extensions/CoveoSearch/CoveoSearchService.js:
--------------------------------------------------------------------------------
1 | import { each } from "lodash";
2 |
3 | /* global Coveo */
4 | class CoveoSearchService {
5 | static async getInstance({ sdk, listeners }) {
6 | if (!CoveoSearchService._instance) {
7 | CoveoSearchService._instance = new CoveoSearchService({ sdk });
8 | await CoveoSearchService._instance.init(listeners);
9 | }
10 | return CoveoSearchService._instance;
11 | }
12 |
13 | constructor({ sdk }) {
14 | this.endpoint = sdk.parameters.installation.endpoint;
15 | }
16 |
17 | async init() {
18 | let counter = 0;
19 | while (counter < 5 && typeof Coveo === "undefined") {
20 | // eslint-disable-next-line no-await-in-loop
21 | await new Promise(resolve => setTimeout(resolve, 1000));
22 | counter += 1;
23 | }
24 |
25 | if (typeof Coveo === "undefined") {
26 | throw Error("Unable to initialize Coveo library!");
27 | }
28 |
29 | const response = await fetch(this.endpoint, {
30 | method: "POST",
31 | body: JSON.stringify({
32 | action: "GET_API_DATA"
33 | })
34 | });
35 |
36 | const {
37 | data: { apiKey, org }
38 | } = await response.json();
39 |
40 | await Coveo.SearchEndpoint.configureCloudV2Endpoint(org, apiKey);
41 | }
42 |
43 | // eslint-disable-next-line class-methods-use-this
44 | async initCoveo({ searchContainer, listeners = [], existingState }) {
45 | let counter = 0;
46 | while (counter < 5 && typeof Coveo === "undefined") {
47 | // eslint-disable-next-line no-await-in-loop
48 | await new Promise(resolve => setTimeout(resolve, 1000));
49 | counter += 1;
50 | }
51 |
52 | if (typeof Coveo === "undefined") {
53 | throw Error("Unable to initialize Coveo library!");
54 | }
55 |
56 | Coveo.init(searchContainer);
57 |
58 | const root = document.querySelector("#search");
59 |
60 | if (existingState) {
61 | Coveo.state(root, existingState);
62 | Coveo.executeQuery(root);
63 | }
64 |
65 | each(listeners, (handle, key) => {
66 | Coveo.$$(root).on(key, (_e, args) => {
67 | handle(args, Coveo.state(root).attributes);
68 | });
69 | });
70 | }
71 |
72 | // eslint-disable-next-line class-methods-use-this
73 | initSearchbox(searchBox, searchPageUri, options = {}) {
74 | Coveo.initSearchbox(searchBox, searchPageUri, options);
75 | }
76 | }
77 |
78 | // TODO: Not sure why static class members aren't accepted
79 | // So had to write it in this format ?!?
80 | CoveoSearchService._instance = null;
81 |
82 | export default CoveoSearchService;
83 |
--------------------------------------------------------------------------------
/src/extensions/Seo/mockSdk.js:
--------------------------------------------------------------------------------
1 | const mockSeoJson = {
2 | 'title': { name: 'title', value: 'Last Rev: Connecting the Modern Web' },
3 | 'robots': { name: 'robots', value: 'index,follow' },
4 | 'description': {
5 | name: 'description',
6 | value:
7 | 'Me non paenitet nullum festiviorem excogitasse ad hoc. Unam incolunt Belgae, aliam Aquitani, tertiam. Inmensae subtilitatis, obscuris et malesuada fames.'
8 | },
9 | 'keywords': { name: 'keywords', value: 'These, are my, keywords' },
10 | 'canonical': { name: 'canonical', value: 'https://www.lastrev.com' },
11 | 'og:title': { name: 'og:title', value: 'Social Sharing Title' },
12 | 'og:description': { name: 'og:description', value: 'Social Sharing Description' },
13 |
14 | 'twitter:image': {
15 | name: 'twitter:image',
16 | value:
17 | '{"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"9o4l1mrd1tci"}},"id":"5VwseUvM96DL4TCKH42IM6","type":"Asset","createdAt":"2019-08-30T23:33:29.011Z","updatedAt":"2019-08-30T23:33:40.228Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":4,"publishedAt":"2019-08-30T23:33:40.228Z","firstPublishedAt":"2019-08-30T23:33:40.228Z","createdBy":{"sys":{"type":"Link","linkType":"User","id":"6Ntte0Bfc9VTOdBwRFarLv"}},"updatedBy":{"sys":{"type":"Link","linkType":"User","id":"6Ntte0Bfc9VTOdBwRFarLv"}},"publishedCounter":1,"version":5,"publishedBy":{"sys":{"type":"Link","linkType":"User","id":"6Ntte0Bfc9VTOdBwRFarLv"}}},"fields":{"title":{"en-US":"Screen Shot 2019-08-30 at 1.10.13 PM"},"file":{"en-US":{"url":"//images.ctfassets.net/9o4l1mrd1tci/5VwseUvM96DL4TCKH42IM6/d05b9b4773e44de340dc50051c8b5bf2/Screen_Shot_2019-08-30_at_1.10.13_PM.png","details":{"size":183321,"image":{"width":1948,"height":742}},"fileName":"Screen Shot 2019-08-30 at 1.10.13 PM.png","contentType":"image/png"}}}}'
18 | }
19 | };
20 | const mockSdk = {
21 | field: {
22 | getValue: () => {
23 | return mockSeoJson;
24 | },
25 | setValue: () => {
26 | return null;
27 | },
28 | locale: 'en-US'
29 | },
30 | dialogs: {
31 | selectSingleAsset: (options) =>
32 | new Promise((resolve, reject) => {
33 | resolve({
34 | sys: {
35 | id: '1213456'
36 | },
37 | fields: {
38 | file: {
39 | 'en-US': {
40 | url: '//placehold.it/600x315'
41 | }
42 | },
43 | title: {
44 | 'en-US': 'The is the placeholder image'
45 | }
46 | }
47 | });
48 | })
49 | }
50 | };
51 |
52 | export default mockSdk;
53 |
--------------------------------------------------------------------------------
/src/extensions/FormBuilder/FieldModal/SchemaEditor/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import styled from 'styled-components';
4 | import { CheckboxField, FieldGroup, SelectField, Option } from '@contentful/forma-36-react-components';
5 |
6 | import { schemaPropType } from './prop-types';
7 | import AdditionalOptions from './AdditionalOptions';
8 |
9 | const SchemaWrapper = styled(FieldGroup)`
10 | margin-top: 1rem;
11 | margin-bottom: 1rem;
12 | `;
13 |
14 | const FastestValidatorTypes = [
15 | // prettier-no-wrap
16 | { label: 'Any', value: 'any' },
17 | { label: 'Boolean', value: 'boolean' },
18 | { label: 'Email', value: 'email' },
19 | { label: 'Equals value', value: 'equal' },
20 | { label: 'Number', value: 'number' },
21 | { label: 'Object', value: 'object' },
22 | { label: 'String', value: 'string' },
23 | { label: 'Url', value: 'url' },
24 | { label: 'UUID', value: 'uuid' }
25 | ];
26 |
27 | // eslint-disable-next-line no-unused-vars
28 | function validatorTypesForField({ type }) {
29 | // TODO: Which types for which fields
30 | // think about NPM module
31 | return FastestValidatorTypes;
32 | }
33 |
34 | function SchemaEditor({ field, updateField }) {
35 | const { schema = {} } = field;
36 |
37 | return (
38 |
39 |
45 | updateField('schema', {
46 | type: event.currentTarget.value
47 | })
48 | }>
49 | {validatorTypesForField(field).map(({ label, value }) => (
50 |
53 | ))}
54 |
55 |
61 | updateField('schema', {
62 | ...schema,
63 | required: event.target.checked
64 | })
65 | }
66 | />
67 |
69 | );
70 | }
71 |
72 | SchemaEditor.propTypes = {
73 | updateField: PropTypes.func.isRequired,
74 | field: PropTypes.shape({
75 | schema: schemaPropType
76 | })
77 | };
78 |
79 | SchemaEditor.defaultProps = {
80 | field: {}
81 | };
82 |
83 | export default SchemaEditor;
84 |
--------------------------------------------------------------------------------
/src/extensions/OperatingHours/OverrideDaysTable/OverrideDaysTableRow.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import {
4 | CardActions,
5 | DropdownList,
6 | DropdownListItem,
7 | Switch,
8 | TableRow,
9 | TableCell,
10 | TextInput,
11 | } from '@contentful/forma-36-react-components';
12 | import { format } from 'date-fns';
13 | import TimezoneDropdown from '../../../shared/components/TimezoneDropdown';
14 |
15 | function OverrideDaysTableRow({ id, position, value, clickEdit, clickRemove }) {
16 | return (
17 |
18 |
19 |
25 |
26 | {}}
29 | disabled
30 | position={position}
31 | className="operatingHours__timezone"
32 | />
33 |
34 |
35 |
43 |
44 | { value.timeRange.join(' - ') }
45 |
46 |
47 |
48 |
49 |
52 | Edit
53 |
54 |
57 | Remove
58 |
59 |
60 |
61 |
62 |
63 | );
64 | }
65 |
66 | OverrideDaysTableRow.propTypes = {
67 | id: PropTypes.string.isRequired,
68 | position: PropTypes.string.isRequired,
69 | value: PropTypes.shape({
70 | date: PropTypes.string,
71 | isClosed: PropTypes.bool,
72 | timezone: PropTypes.string,
73 | timeRange: PropTypes.arrayOf(PropTypes.string)
74 | }).isRequired,
75 | clickEdit: PropTypes.func.isRequired,
76 | clickRemove: PropTypes.func.isRequired,
77 | };
78 |
79 | export default OverrideDaysTableRow;
80 |
--------------------------------------------------------------------------------
/src/extensions/PersonName/PersonName.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import { TextField } from "@contentful/forma-36-react-components";
3 | import PropTypes from "prop-types";
4 |
5 | export default function PersonName({ sdk }) {
6 | const [fieldValue, setFieldValue] = useState({});
7 |
8 | useEffect(() => {
9 | if (sdk.field.getValue()) {
10 | setFieldValue(sdk.field.getValue());
11 | } else {
12 | setFieldValue({});
13 | };
14 |
15 | }, [sdk.field]);
16 |
17 | const handleFieldChange = (fieldName) => (e) => {
18 | fieldValue[fieldName] = e.currentTarget.value;
19 | sdk.field.setValue(fieldValue);
20 | setFieldValue(fieldValue);
21 | };
22 |
23 | return (
24 |
25 | {JSON.stringify(fieldValue, null, 2)}
63 |
64 | ) : (
65 | No search saved.
66 | )}
67 |
68 |
71 | {fieldValue ? (
72 |
75 | ) : null}
76 |
77 | );
78 | }
79 |
80 | export default CoveoSavedSearchFieldDisplay;
81 |
--------------------------------------------------------------------------------
/src/extensions/FormBuilder/hooks/useProviderConfig.js:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import { merge } from 'lodash/fp';
3 |
4 | import { URL_TYPES } from './utils';
5 |
6 | /**
7 | * Provider configuration holds the remote endpoint for the form
8 | * currently this is mostly hubspot, but in future the idea is to add
9 | * different provider configurations here.
10 | *
11 | * By passing in the initial provider configuration we get a set of functions
12 | * which can be used to update that (and callback to contentful)
13 |
14 | * * onChange should be a function which takes a string and a
15 | * onChange('some.maybe.deep.key', someValue)
16 | * */
17 | export default function useProviderConfig(onChangeField, { provider = {} } = {}) {
18 | const { parameters = {}, type = 'custom' } = provider;
19 | const { formId = '', portalId = '', url = '', method = 'POST' } = parameters;
20 |
21 | const [values, setValues] = useState({ type, formId, portalId, url, method });
22 |
23 | return {
24 | ...values,
25 |
26 | setType: (newType) => {
27 | // Save to contentful
28 | onChangeField('provider.type', newType);
29 |
30 | setValues((oldValues) =>
31 | merge(oldValues)({
32 | type: newType,
33 |
34 | // Disable the URL if this type does not support it
35 | formId: URL_TYPES.includes(newType) ? oldValues.formId : null,
36 | portalId: URL_TYPES.includes(newType) ? oldValues.portalId : null
37 | })
38 | );
39 | },
40 |
41 | setFormId: (newUrl) => {
42 | // Save to contentful
43 | onChangeField('provider.parameters.formId', newUrl);
44 |
45 | setValues((oldValues) => merge(oldValues)({ formId: newUrl }));
46 | },
47 |
48 | setPortalId: (newUrl) => {
49 | // Save to contentful
50 | onChangeField('provider.parameters.portalId', newUrl);
51 |
52 | setValues((oldValues) => merge(oldValues)({ portalId: newUrl }));
53 | },
54 |
55 | setUrl: (newUrl) => {
56 | // Save to contentful
57 | onChangeField('provider.parameters.url', newUrl);
58 |
59 | setValues((oldValues) => merge(oldValues)({ url: newUrl }));
60 | },
61 |
62 | setMethod: (newMethod) => {
63 | // Save to contentful
64 | onChangeField('provider.parameters.method', newMethod);
65 |
66 | setValues((oldValues) =>
67 | merge(oldValues)({
68 | method: newMethod
69 | })
70 | );
71 | },
72 |
73 | update: ({ parameters: newParameters, type: newType }) =>
74 | setValues({
75 | ...values,
76 | ...newParameters,
77 | ...(newType && { type: newType })
78 | })
79 | };
80 | }
81 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "my-app",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@contentful/field-editor-reference": "^1.11.0",
7 | "@contentful/forma-36-fcss": "0.0.34",
8 | "@contentful/forma-36-react-components": "^3.42.2",
9 | "@contentful/rich-text-html-renderer": "^14.1.1",
10 | "@contentful/rich-text-types": "^14.1.1",
11 | "@material-ui/core": "^4.11.0",
12 | "@sentry/react": "^5.20.0",
13 | "@testing-library/dom": "^7.20.0",
14 | "@testing-library/jest-dom": "^4.2.4",
15 | "@testing-library/react": "^9.5.0",
16 | "@testing-library/user-event": "^7.1.2",
17 | "@types/jest": "^25.2.3",
18 | "array-move": "^3.0.1",
19 | "axios": "^0.19.2",
20 | "contentful": "^7.14.5",
21 | "contentful-ui-extensions-sdk": "^3.16.1",
22 | "copy-to-clipboard": "^3.3.1",
23 | "date-fns": "^2.16.1",
24 | "faker": "^5.3.1",
25 | "history": "^4.10.1",
26 | "json-logic-js": "^2.0.0",
27 | "lodash": "^4.17.19",
28 | "node-htmldiff": "^0.9.3",
29 | "node-sass": "^4.14.1",
30 | "prop-types": "^15.7.2",
31 | "react": "^16.13.1",
32 | "react-datepicker": "^3.2.2",
33 | "react-dom": "^16.13.1",
34 | "react-router-dom": "^5.2.0",
35 | "react-scripts": "3.3.0",
36 | "react-select": "^4.0.2",
37 | "react-sortable-hoc": "^1.11.0",
38 | "styled-components": "^5.2.1",
39 | "uuid": "^8.3.0"
40 | },
41 | "scripts": {
42 | "start": "react-scripts start",
43 | "build": "react-scripts build",
44 | "test": "react-scripts test --env=jest-environment-jsdom-sixteen",
45 | "testfull": "react-scripts test --verbose",
46 | "eject": "react-scripts eject",
47 | "lint": "eslint . --fix"
48 | },
49 | "browserslist": {
50 | "production": [
51 | ">0.2%",
52 | "not dead",
53 | "not op_mini all"
54 | ],
55 | "development": [
56 | "last 1 chrome version",
57 | "last 1 firefox version",
58 | "last 1 safari version"
59 | ]
60 | },
61 | "devDependencies": {
62 | "@testing-library/react-hooks": "^4.0.0",
63 | "eslint-config-airbnb": "^18.2.0",
64 | "eslint-config-prettier": "^6.11.0",
65 | "eslint-plugin-jsx-a11y": "^6.3.1",
66 | "eslint-plugin-prettier": "^3.1.4",
67 | "husky": "^4.2.5",
68 | "jest-environment-jsdom-sixteen": "^1.0.3",
69 | "lint-staged": "^9.5.0",
70 | "prettier": "^1.19.1",
71 | "react-test-renderer": "^16.13.1"
72 | },
73 | "husky": {
74 | "hooks": {
75 | "pre-commit": "lint-staged"
76 | }
77 | },
78 | "lint-staged": {
79 | "src/**/*.{js,jsx,json,css}": [
80 | "prettier --write",
81 | "eslint --fix",
82 | "git add"
83 | ]
84 | },
85 | "volta": {
86 | "node": "10.16.3"
87 | }
88 | }
89 |
--------------------------------------------------------------------------------
/src/extensions/RecipeSteps/dialogs/StepDialog.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { Form, FieldGroup } from '@contentful/forma-36-react-components';
4 | import { getTextAreaWithLabel } from '../helpers';
5 | import { getButton, getTextField } from '../../../shared/helpers';
6 |
7 | const StepDialog = ({ sdk }) => {
8 | const [step, setStep] = useState('');
9 | const [title, setTitle] = useState('');
10 | const [body, setBody] = useState('');
11 | const [stepErrorMessage, setStepErrorMessage] = useState('');
12 | const [titleErrorMessage, setTitleErrorMessage] = useState('');
13 |
14 | useEffect(() => {
15 | if (sdk.parameters.invocation.step) {
16 | setStep(sdk.parameters.invocation.step.step);
17 | setTitle(sdk.parameters.invocation.step.title);
18 | setBody(sdk.parameters.invocation.step.body);
19 | }
20 | }, [sdk]);
21 |
22 | const closeDialog = () => {
23 | sdk.close();
24 | };
25 |
26 | const saveStep = () => {
27 | const errorMessage = 'This item is required';
28 | if (step && title) {
29 | sdk.close({ step: +step, title, body });
30 | } else {
31 | setStepErrorMessage(!step ? errorMessage : '');
32 | setTitleErrorMessage(!title ? errorMessage : '');
33 | }
34 | };
35 |
36 | return (
37 |
38 |
60 |
61 | );
62 | };
63 |
64 | StepDialog.propTypes = {
65 | sdk: PropTypes.shape({
66 | close: PropTypes.func.isRequired,
67 | parameters: PropTypes.shape({
68 | invocation: PropTypes.shape({
69 | step: PropTypes.shape({
70 | step: PropTypes.string,
71 | title: PropTypes.string,
72 | body: PropTypes.string
73 | })
74 | }).isRequired
75 | }).isRequired
76 | }).isRequired
77 | };
78 |
79 | export default StepDialog;
80 |
--------------------------------------------------------------------------------
/src/extensions/ContentDiff/helpers/lookups.js:
--------------------------------------------------------------------------------
1 | import { firstIndex } from '../constants';
2 |
3 | let entryLookup = {};
4 | let assetLookup = {};
5 | let snapshotsLookup = {};
6 | let controlsLookup = {};
7 | let contentTypeLookup = {};
8 |
9 | const addProperty = (json, name, value) => {
10 | return !json[name]
11 | ? {
12 | ...json,
13 | [name]: value,
14 | }
15 | : json;
16 | };
17 |
18 | const getLookupItem = async (lookupItem, getItem) => {
19 | let item = lookupItem;
20 | if (!item) {
21 | item = await getItem();
22 | }
23 | return item;
24 | };
25 |
26 | export const getContentType = async (id, space) => {
27 | const contentType = await getLookupItem(contentTypeLookup[id], () => space.getContentType(id));
28 | contentTypeLookup = addProperty(contentTypeLookup, id, contentType);
29 | return contentType;
30 | };
31 |
32 | export const getEntry = async (id, space) => {
33 | const entry = await getLookupItem(entryLookup[id], () => space.getEntry(id));
34 | entryLookup = addProperty(entryLookup, id, entry);
35 | return entry;
36 | };
37 |
38 | export const addEntry = (id, entry) => {
39 | addProperty(entryLookup, id, entry);
40 | };
41 |
42 | export const getAsset = async (id, space) => {
43 | const asset = await getLookupItem(assetLookup[id], () => space.getAsset(id));
44 | assetLookup = addProperty(assetLookup, id, asset);
45 | return asset;
46 | };
47 |
48 | export const getEntrySnapshots = async (id, space) => {
49 | const snapshots = await getLookupItem(snapshotsLookup[id], () => space.getEntrySnapshots(id));
50 | snapshotsLookup = addProperty(snapshotsLookup, id, snapshots);
51 | return snapshots;
52 | };
53 |
54 | export const addEntrySnapshots = async (id, snapshots) => {
55 | addProperty(snapshotsLookup, id, snapshots);
56 | };
57 |
58 | export const getEditorInterface = async (id, space) => {
59 | const editorInterface = await getLookupItem(controlsLookup[id], () => space.getEditorInterface(id));
60 | controlsLookup = addProperty(controlsLookup, id, editorInterface);
61 | return editorInterface;
62 | };
63 |
64 | export const addEditorInterface = (id, controls) => {
65 | addProperty(controlsLookup, id, controls);
66 | };
67 |
68 | export const resetLookups = () => {
69 | entryLookup = {};
70 | assetLookup = {};
71 | snapshotsLookup = {};
72 | controlsLookup = {};
73 | contentTypeLookup = {};
74 | };
75 |
76 | export const getEntryByDate = async (space, entryId, snapshotDate) => {
77 | let entry;
78 | if (snapshotDate) {
79 | const snapshots = await getEntrySnapshots(entryId, space);
80 | entry =
81 | snapshots &&
82 | snapshots.items &&
83 | snapshots.items.filter((item) => new Date(item.sys.updatedAt) <= snapshotDate)[firstIndex];
84 | } else {
85 | entry = await getEntry(entryId, space);
86 | }
87 | return entry;
88 | };
89 |
--------------------------------------------------------------------------------
/src/extensions/PhoneNumber/PhoneNumber.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render, configure, cleanup, fireEvent } from '@testing-library/react';
3 | import PhoneNumber from './PhoneNumber';
4 |
5 | let sdk = null;
6 |
7 | configure({
8 | testIdAttribute: 'data-test-id',
9 | });
10 |
11 | beforeEach(() => {
12 | sdk = {
13 | field: {
14 | getValue: () => ({}),
15 | setValue: jest.fn(val => val),
16 | },
17 | };
18 | });
19 |
20 | afterEach(() => {
21 | cleanup();
22 | });
23 |
24 | describe('
18 |
19 |
20 | Day of Week
21 | Timezone
22 | Closed?
23 | Open/Close Times
24 |
25 |
26 |
27 | {
28 | daysOfWeek.map((dayOfWeek, index) => (
29 |
30 | { dayOfWeek.dayOfWeek }
31 |
32 | onChange(index, { timezone: e.currentTarget.value })}
36 | position={`line-${index}`}
37 | className="operatingHours__timezone" />
38 |
39 |
42 | onChange(index, { isClosed: isChecked })} />
47 |
48 |
50 | onChange(index, { timeRange: value })}
54 | step={{ minutes: 30 }}
55 | disabled={dayOfWeek.isClosed} />
56 |
57 |
58 | ))
59 | }
60 |
61 |
62 |
63 | );
64 | }
65 |
66 | DaysOfWeekTable.propTypes = {
67 | daysOfWeek: PropTypes.arrayOf(PropTypes.shape({
68 | dayOfWeek: PropTypes.string.isRequired,
69 | })).isRequired,
70 | onChange: PropTypes.func.isRequired,
71 | };
72 |
73 | export default DaysOfWeekTable;
74 |
--------------------------------------------------------------------------------
/src/shared/components/TimeRange/TimeRange.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react";
2 | import PropTypes from "prop-types";
3 | import { startOfDay, add, format } from "date-fns";
4 | import { Slider } from "@material-ui/core";
5 | import { makeStyles } from "@material-ui/core/styles";
6 |
7 | const TIME_FORMAT = "h:mm a";
8 |
9 | const useStyles = makeStyles({
10 | marked: {
11 | marginBottom: 0,
12 | marginTop: "1rem"
13 | },
14 | valueLabel: {
15 | textAlign: "center",
16 | top: -22,
17 | "& *": {
18 | background: "transparent",
19 | color: "#000"
20 | }
21 | }
22 | });
23 |
24 | function TimeRange({ value, onChange, step, disabled }) {
25 | const [dayTimes, setDayTimes] = useState([]);
26 | const [selectedValue, setSelectedValue] = useState([]);
27 |
28 | const classes = useStyles();
29 |
30 | useEffect(() => {
31 | if (!value || value.length === 0) {
32 | onChange([dayTimes[0], dayTimes[dayTimes.length - 1]]);
33 | return;
34 | }
35 |
36 | const [start, end] = value;
37 |
38 | const startIndex = dayTimes.indexOf(start);
39 | const endIndex = dayTimes.indexOf(end);
40 |
41 | const val = [
42 | startIndex,
43 | endIndex === startIndex && endIndex === 0 ? dayTimes.length - 1 : endIndex
44 | ];
45 | setSelectedValue(val);
46 | // eslint-disable-next-line react-hooks/exhaustive-deps
47 | }, [value, dayTimes]);
48 |
49 | useEffect(() => {
50 | const start = startOfDay(new Date());
51 | const end = startOfDay(add(start, { days: 1 }));
52 |
53 | const newDayTimes = [];
54 |
55 | let tempDate;
56 | for (tempDate = start; tempDate <= end; tempDate = add(tempDate, step)) {
57 | const formattedDate = format(tempDate, TIME_FORMAT);
58 | newDayTimes.push(formattedDate);
59 | }
60 |
61 | setDayTimes(newDayTimes);
62 | // eslint-disable-next-line react-hooks/exhaustive-deps
63 | }, [step.minutes]);
64 |
65 | function handleChange(e, val) {
66 | const [start, end] = val;
67 | onChange([dayTimes[start], dayTimes[end]]);
68 | }
69 |
70 | function valueLabelFormat(val) {
71 | return dayTimes[val];
72 | }
73 |
74 | return (
75 |
53 | updateField({
54 | ...field,
55 | // Remove other stuff which was dependent on old field type
56 | schema: {},
57 | options: undefined,
58 | type: e.currentTarget.value
59 | })
60 | }>
61 | {fieldTypes.map(({ value: fieldType, label }) => (
62 |
65 | ))}
66 |
67 |
27 | updateField('label', e.currentTarget.value)}
34 | />
35 |
36 | updateField('name', e.currentTarget.value)}
43 | />
44 | {nameError && {nameError.message} }
45 |
46 | {field.type !== 'hidden' && (
47 | updateField('placeholder', e.currentTarget.value)}
53 | />
54 | )}
55 | updateField('dependsOn', newValue)}
61 | onChangeTests={(newValue) => updateField('dependsOnTests', newValue)}
62 | />
63 |
64 | );
65 | }
66 |
67 | FieldEditor.propTypes = {
68 | field: PropTypes.shape({
69 | id: PropTypes.string,
70 | type: PropTypes.string,
71 | label: PropTypes.string,
72 | name: PropTypes.string,
73 | placeholder: PropTypes.string,
74 | dependsOn: PropTypes.string,
75 | dependsOnTests: PropTypes.arrayOf(PropTypes.string)
76 | }).isRequired,
77 | updateField: PropTypes.func.isRequired,
78 |
79 | /* eslint-disable react/forbid-prop-types */
80 | errors: PropTypes.object, // containing { [id]: error