[SDPA-5018] Added Tide custom component

packages/ripple-nuxt-tide/modules/landing-page/README.md

@@ -2,6 +2,32 @@
 
 ## Usage
 
+### Custom component
+
+To use Tide CMS landing page "custom component" in content component, we need to
+register the custom component in `nuxt.config.js`.
+This is using Nuxt.js auto import feature https://github.com/nuxt/components.
+
+For example, we have a custom component `~/components/Foo/index.vue`.
+
+You can register it by following:
+
+```javascript
+components: [
+  { path: '~/components/foo/', global: true }
+]
+```
+
+Then in Tide CMS, add a custom component, put value `foo` in `Prop name` field.
+**Please note, the value `foo` is based on the Vue template file name not the `name`
+inside the Vue file.**
+
+**`Prop value` can only be `String` at the moment.
+Though `Array` and `Object` work if they are added as JSON string, and `Boolean`
+work by added as `true` string, but they are untested at this stage.**
+
+![Tide custom component](tide-custom-component.png)
+
 ### Enable module
 
 Enable it in `nuxt.config.js`.

packages/ripple-nuxt-tide/modules/landing-page/components/TideCustomComponent.vue

@@ -0,0 +1,52 @@
+<template>
+  <component
+    :is="compName"
+    v-bind="compProps"
+    class="tide-custom-component"
+  >
+    {{ compSlotText }}
+  </component>
+</template>
+
+<script>
+/**
+ * This component is used for Tide(CMS) to add a custom component without development work.
+ * Custom component need to be registered in nuxt.config.js.
+ * Check "https://github.com/dpc-sdp/ripple/blob/master/packages/ripple-nuxt-tide/modules/landing-page/README.md" for more usage guide.
+ */
+export default {
+  name: 'TideCustomComponent',
+  props: {
+    /**
+     * The custom component name
+     */
+    compName: {
+      type: String,
+      required: true
+    },
+    /**
+     * The custom component props
+     *
+     * e.g:
+     * {
+     *   title: 'Hello world',
+     *   disabled: true
+     * }
+     */
+    compProps: {
+      type: Object,
+      default: () => {}
+    },
+    /**
+     * The custom component slot, text only.
+     *
+     * @TODO html slot can be achieved by adding another prop e.g compSlotHTML.
+     * But it's low priority and has security risk.
+     */
+    compSlotText: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>

packages/ripple-nuxt-tide/modules/landing-page/mapping-filters.js

@@ -201,6 +201,28 @@ module.exports = {
       default:
         return null
     }
+  },
+
+  /**
+   * Convert Tide field_props value to Vue component props data
+   */
+  compProps: (fieldProps) => {
+    let props = {}
+    fieldProps.forEach(prop => {
+      let value
+      try {
+        // Try to parse JSON string first,
+        // this will allow us to take Array or Object value from CMS.
+        // @TODO: however, this is untested and not encourage to use for now.
+        value = JSON.parse(prop.field_prop_value)
+      } catch {
+        // If not JSON, use the string value directly.
+        // String `true` and `false` will be used as bool type.
+        value = prop.field_prop_value
+      }
+      props[prop.field_prop_name] = value
+    })
+    return props
   }
 
 }

packages/ripple-nuxt-tide/modules/landing-page/tide.config.js

@@ -36,7 +36,8 @@ module.exports = {
       'field_landing_page_component.field_paragraph_items.field_paragraph_reference.field_featured_image.field_media_image',
       'field_landing_page_component.field_paragraph_items.field_paragraph_keydates',
       'field_landing_page_component.field_paragraph_items.field_paragraph_media.field_media_image',
-      'field_landing_page_component.field_complex_image_media.field_media_image'
+      'field_landing_page_component.field_complex_image_media.field_media_image',
+      'field_landing_page_component.field_props'
     ]
   },
 
@@ -460,6 +461,18 @@ module.exports = {
         props: {
           'formLink': ['field_form_link', 'uri']
         }
+      },
+
+      'paragraph--custom_component': {
+        component: 'tide-custom-component',
+        props: {
+          compName: 'field_name',
+          compProps: {
+            field: 'field_props',
+            filters: ['compProps']
+          },
+          compSlotText: 'field_text_slot'
+        }
       }
 
     }

packages/ripple-nuxt-tide/modules/landing-page/tide.load-components.js

@@ -1,4 +1,5 @@
 export default {
   'tide-open-form': () => import(/* webackChunkName: 'tide-open-form' */ './components/TideOpenForm'),
-  'automated-card-listing': () => import(/* webpackChunkName: 'automated-card-listing' */ '@dpc-sdp/ripple-nuxt-tide/modules/landing-page/components/CardCollection')
+  'automated-card-listing': () => import(/* webpackChunkName: 'automated-card-listing' */ '@dpc-sdp/ripple-nuxt-tide/modules/landing-page/components/CardCollection'),
+  'tide-custom-component': () => import(/* webpackChunkName: 'tide-custom-component' */ './components/TideCustomComponent.vue')
 }

packages/ripple-nuxt-tide/test/unit/mapping.test.js

@@ -101,6 +101,18 @@ describe('mapping', () => {
                 }
               }
             ]
+          },
+
+          testConstantValue: {
+            component: 'rpl-test-component',
+            props: {
+              a: {
+                value: 'This is a constant value'
+              },
+              b: {
+                value: 'This is another constant value'
+              }
+            }
           }
         }
       }
@@ -332,4 +344,29 @@ describe('mapping', () => {
     const result = await mapping.get(item, 'testField')
     expect(result).toEqual(components)
   })
+
+  test('should be able to get constant value', async () => {
+    const mapping = new Mapping(config, tideApi)
+    expect.assertions(1)
+
+    const item = [{
+      type: 'testConstantValue'
+    }]
+
+    const components = [{
+      name: 'rpl-test-component',
+      data: {
+        // Sometimes you need a constant value. Like some value that is always fixed.
+        a: 'This is a constant value',
+        b: 'This is another constant value'
+      },
+      class: [],
+      childCols: null,
+      cols: {},
+      ssr: true
+    }]
+
+    const result = await mapping.get(item, 'testField')
+    expect(result).toEqual(components)
+  })
 })