add ui library, js components, and cypress test

.gitignore

@@ -1,2 +1,3 @@
 composer.lock
 vendor
+node_modules

components/cacheSettings/index.js

@@ -0,0 +1,98 @@
+import { RadioGroup } from "@newfold/ui-component-library";
+
+const CacheSettings = ({ methods, constants, Components }) => {
+    const [ cacheLevel, setCacheLevel ] = methods.useState(constants.store.cacheLevel);
+
+    const cacheOptions = [
+        {
+            label: constants.text.cacheLevel0Label,
+            description: constants.text.cacheLevel0Description + constants.text.cacheLevel0Recommendation,
+            value: 0,
+            notice: constants.text.cacheLevel0NoticeText,
+        },
+        {
+            label: constants.text.cacheLevel1Label,
+            description: constants.text.cacheLevel1Description + constants.text.cacheLevel1Recommendation,
+            value: 1,
+            notice: constants.text.cacheLevel1NoticeText,
+        },
+        {
+            label: constants.text.cacheLevel2Label,
+            description: constants.text.cacheLevel2Description + constants.text.cacheLevel2Recommendation,
+            value: 2,
+            notice: constants.text.cacheLevel2NoticeText,
+        },
+        {
+            label: constants.text.cacheLevel3Label,
+            description: constants.text.cacheLevel3Description + constants.text.cacheLevel3Recommendation,
+            value: 3,
+            notice: constants.text.cacheLevel3NoticeText,
+        },
+    ];
+
+    const getCacheLevelNoticeTitle = () => {
+        return constants.text.cacheLevelNoticeTitle;
+    };
+
+    const getCacheLevelNoticeText = () => {
+        return cacheOptions[cacheLevel].notice;
+    };
+
+    const handleCacheLevelChange = (e) => {
+        methods.newfoldSettingsApiFetch(
+            { cacheLevel: parseInt(e.target.value) }, 
+            methods.setError, (response) => {
+                setCacheLevel(parseInt(e.target.value));
+            }
+        );
+    };
+
+    methods.useUpdateEffect(() => {
+        methods.setStore({
+            ...constants.store,
+            cacheLevel,
+        });
+
+        methods.makeNotice(
+            "cache-level-change-notice", 
+            getCacheLevelNoticeTitle(),
+            getCacheLevelNoticeText(),
+            "success",
+            5000
+        );
+    }, [cacheLevel]);
+
+    return (
+        <Components.SectionSettings
+            title={constants.text.cacheLevelTitle}
+            description={constants.text.cacheLevelDescription}
+        >
+        <RadioGroup
+            className="cache-options"
+            id="cache-type"
+            name="cache-level"
+            value=""
+        >
+            {cacheOptions.map((option) => {
+                return (
+                    <Components.Fragment key={option.value}>
+                        <RadioGroup.Radio
+                            defaultChecked={option.value === constants.store.cacheLevel}
+                            id={'cache-level-' + option.value}
+                            label={option.label}
+                            value={option.value}
+                            name="cache-level"
+                            onChange={handleCacheLevelChange}
+                        />
+                        <div className="nfd-radio__description">
+                            {option.description}
+                        </div>
+                    </Components.Fragment>
+                );
+            })}
+        </RadioGroup>
+        </Components.SectionSettings>
+    );
+}
+
+export default CacheSettings;

components/clearCache/index.js

@@ -0,0 +1,39 @@
+import { Button } from "@newfold/ui-component-library";
+
+const ClearCache = ({ methods, constants, Components }) => {
+
+    const clearCache = () => {
+        methods.newfoldPurgeCacheApiFetch(
+            {}, 
+            methods.setError, 
+            (response) => {
+                methods.makeNotice(
+                    "disable-old-posts-comments-notice", 
+                    constants.text.clearCacheNoticeTitle,
+                    null,
+                    "success",
+                    5000
+                );
+            }
+        );
+    };
+
+    return (
+        <Components.SectionSettings
+            title={constants.text.clearCacheTitle}
+            description={constants.text.clearCacheDescription}
+        >
+            <Button
+                variant="secondary"
+                className="clear-cache-button"
+                disabled={constants.store.cacheLevel > 0 ? false : true}
+                onClick={clearCache}
+                >
+                {constants.text.clearCacheButton}
+            </Button>
+        </Components.SectionSettings>
+
+    );
+;}
+
+export default ClearCache;

components/performance/defaultText.js

@@ -0,0 +1,27 @@
+const defaultText = {
+    cacheLevel0Description: __('No cache enabled. Every page load is fresh. ', 'wp-module-performance'),
+    cacheLevel0Label: __('Disabled', 'wp-module-performance'),
+    cacheLevel0NoticeText: __('Caching disabled.', 'wp-module-performance'),
+    cacheLevel0Recommendation: __('Not recommended.', 'wp-module-performance'),
+    cacheLevel1Description: __('Cache static assets like images and the appearance of your site for 1 hour. ', 'wp-module-performance'),
+    cacheLevel1Label: __('Assets Only', 'wp-module-performance'),
+    cacheLevel1NoticeText: __('Cache enabled for assets only.', 'wp-module-performance'),
+    cacheLevel1Recommendation: __('Tuned for online stores and member sites that need to be fresh.', 'wp-module-performance'),
+    cacheLevel2Description: __('Cache static assets for 24 hours and web pages for 2 hours. ', 'wp-module-performance'),
+    cacheLevel2Label: __('Assets & Web Pages', 'wp-module-performance'),
+    cacheLevel2NoticeText: __('Cache enabled for assets and pages.', 'wp-module-performance'),
+    cacheLevel2Recommendation: __('Tuned for sites that change at least weekly.', 'wp-module-performance'),
+    cacheLevel3Description: __('Cache static assets for 1 week and web pages for 8 hours. ', 'wp-module-performance'),
+    cacheLevel3Label: __('Assets & Web Pages - Extended', 'wp-module-performance'),
+    cacheLevel3NoticeText: __('Cache enabled for assets and pages (extended).', 'wp-module-performance'),
+    cacheLevel3Recommendation: __('Tuned for sites that update a few times a month or less.', 'wp-module-performance'),
+    cacheLevelDescription: __('Boost speed and performance by storing a copy of your website content, files, and images online so the pages of your website load faster for your visitors.', 'wp-module-performance'),
+    cacheLevelNoticeTitle: __('Cache setting saved', 'wp-module-performance'),
+    cacheLevelTitle: __('Cache Level', 'wp-module-performance'),
+    clearCacheButton: __('Clear All Cache Now', 'wp-module-performance'),
+    clearCacheDescription: __('We automatically clear your cache as you work (creating content, changing settings, installing plugins and more). But you can manually clear it here to be confident it is fresh.', 'wp-module-performance'),
+    clearCacheNoticeTitle: __('Cache cleared', 'wp-module-performance'),
+    clearCacheTitle: __('Clear Cache', 'wp-module-performance'),
+};
+
+export default defaultText;

components/performance/index.js

@@ -0,0 +1,59 @@
+import { default as CacheSettings } from '../cacheSettings/';
+import { default as ClearCache } from '../clearCache/';
+import { default as defaultText } from './defaultText';
+
+/**
+ * Performance Module
+ * For use in brand plugin apps to display performance page and settings
+ * 
+ * @param {*} props 
+ * @returns 
+ */
+const Performance = ({methods, constants, Components, ...props}) => {
+    const { store, setStore } = methods.useContext(methods.AppStore);
+    const [ isError, setError ] = methods.useState(false);
+
+	let notify = methods.useNotification();
+
+	// set default text if not provided
+	constants.text = Object.assign(defaultText, constants.text);
+
+    const makeNotice = (id, title, description, variant="success", duration=false) => {
+        notify.push(`performance-notice-${id}`, {
+            title,
+            description: (
+                <span>
+                    {description}
+                </span>
+            ),
+            variant,
+            autoDismiss: duration,
+        });
+    };
+    constants.store = store;
+    methods.makeNotice = makeNotice;
+    methods.setStore = setStore;
+    methods.setError = setError;
+
+	return (
+        <>
+            <Components.SectionContent separator={true} className={'newfold-cache-settings'}>
+                <CacheSettings
+                    methods={methods}
+                    constants={constants}
+                    Components={Components}
+                />
+            </Components.SectionContent>
+            <Components.SectionContent className={'newfold-clear-cache'}>
+                <ClearCache
+                    methods={methods}
+                    constants={constants}
+                    Components={Components}
+                />
+            </Components.SectionContent>
+        </>
+	);
+
+};
+
+export default Performance;