Merge pull request #4 from vtex-apps/dynamicIframeSrc

adding dynamicIframe component

.eslintignore

@@ -0,0 +1 @@
+node_modules

.eslintrc.json

@@ -0,0 +1,9 @@
+{
+  "extends": "vtex",
+  "root": true,
+  "env": {
+    "node": true,
+    "es6": true,
+    "jest": true
+  }
+}

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "eslintIntegration": true
+}

CHANGELOG.md

@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+- Dynamic Iframe component using route parameters to drive rendered iframe src
+
 ## [0.0.4] - 2019-10-18
 
 ## [0.0.3] - 2019-10-17

docs/README.md

@@ -8,7 +8,7 @@
 
 An app that makes it possible to render external iframes on a store 
 
-## Configuration
+## Configuration - standard Iframe
 
 1. Add the `vtex.iframe` to the theme's dependencies on the `manifest.json`
 ```
@@ -46,6 +46,50 @@ An app that makes it possible to render external iframes on a store
 | `width` | Number | Width attribute of the iframe | `null`
 | `height` | Number | Height attribute of the iframe | `null`
 
+## Configuration - dynamic Iframe
+
+1. Add the `vtex.iframe` to the theme's dependencies on the `manifest.json`
+
+```json
+"dependencies": {
+ ...
+  "vtex.iframe": "0.x"
+}
+...
+```
+
+2. Add the dynamicIframe block and its properties to the blocks.json file
+
+```json
+"store.custom.locationPage":{
+    "children":[
+      "iframe.dynamic-src"
+    ]
+  },
+"iframe.dynamic-src":{
+  "props":{
+      "dynamicSrc":"https://www.test.com/exampleStaticPathName/{dynamicParam1}/{dynamicParam2}/exampleStaticPageName",
+      "width":"1920",
+      "height":"1000",
+      "title":"exampleStaticPageName iframe wrapper for {account}"
+    }
+  }
+```
+3. register your new page in routes.json with appropriate parameters passed into the page url
+
+```json
+"store.custom.locationPage":{
+    "path": "/:param1/:param2/pagename"
+  },
+```
+
+| Prop name | Type | Description | Default value |
+|--------------|--------|--------------| --------|
+| `dynamicSrc` | String | iframe src with dynamic parameters from page URL enclosed in '{}' | `null`
+| `width` | Number | Width attribute of the iframe | `null`
+| `height` | Number | Height attribute of the iframe | `null`
+| `title` | String | title attribute of the iframe tag | `null`
+
 ## Customization
 
 There is a `.container` handle that wraps the iframe, it's also possible to use `blockClass`

messages/context.json

@@ -3,5 +3,14 @@
   "editor.iframe.src.description": "Source url of the iframe",
   "editor.iframe.src.title": "Src",
   "editor.iframe.height.title": "Height",
-  "editor.iframe.width.title": "Width"
+  "editor.iframe.width.title": "Width",
+  "editor.iframe.title.title": "Title",
+  "editor.dynamiciframe.title": "Dynamic Iframe",
+  "editor.dynamiciframe.title.title": "Title",
+  "editor.dynamiciframe.srcPrepend.description": "iframe source url pre-pended string",
+  "editor.dynamiciframe.srcPrepend.title": "Prepend",
+  "editor.dynamiciframe.srcAppend.description": "iframe source url appended string",
+  "editor.dynamiciframe.srcAppend.title": "Append",
+  "editor.dynamiciframe.height.title": "Height",
+  "editor.dynamiciframe.width.title": "Width"
 }

messages/en.json

@@ -3,5 +3,12 @@
   "editor.iframe.src.description": "Source url of the iframe",
   "editor.iframe.src.title": "Src",
   "editor.iframe.height.title": "Height",
-  "editor.iframe.width.title": "Width"
+  "editor.iframe.width.title": "Width",
+  "editor.iframe.title.title": "Title",
+  "editor.dynamiciframe.title": "Dynamic Iframe",
+  "editor.dynamiciframe.title.title": "Title",
+  "editor.dynamiciframe.dynamicSrc.description": "url to be used by iframe, use {param} for dynamic parameters",
+  "editor.dynamiciframe.dynamicSrc.title": "Prepend",
+  "editor.dynamiciframe.height.title": "Height",
+  "editor.dynamiciframe.width.title": "Width"
 }

package.json

@@ -0,0 +1,16 @@
+{
+  "name": "iframe",
+  "private": true,
+  "license": "UNLICENSED",
+  "scripts": {
+    "lint": "eslint --ext js,jsx,ts,tsx ."
+  },
+  "devDependencies": {
+    "@types/node": "12.12.21",
+    "eslint": "6.7.2",
+    "eslint-config-vtex": "11.2.1",
+    "eslint-config-vtex-react": "5.1.0",
+    "prettier": "1.19.1",
+    "typescript": "3.7.3"
+  }
+}

react/.eslintrc.json

@@ -0,0 +1,8 @@
+{
+  "extends": "vtex-react",
+  "env": {
+    "browser": true,
+    "es6": true,
+    "jest": true
+  }
+}

react/DynamicIframe.tsx

@@ -0,0 +1,58 @@
+import Iframe from './Iframe'
+import React from 'react'
+import { useRuntime } from 'vtex.render-runtime'
+
+const DynamicIframe: StorefrontFunctionComponent<DynamicIframeProps> = ({
+  dynamicSrc = '',
+  width,
+  height,
+  title,
+}) => {
+  const {
+    route: { params },
+  } = useRuntime()
+
+  const src = dynamicSrc.replace(/({[A-z0-9]*})/g, function(match: string) {
+    const thisParam = match.replace(/{|}/g, '')
+    return params[thisParam]
+  })
+
+  return <Iframe title={title} src={src} width={width} height={height} />
+}
+
+interface DynamicIframeProps {
+  dynamicSrc: string
+  width?: number
+  height?: number
+  title?: string
+}
+
+DynamicIframe.schema = {
+  title: 'editor.dynamiciframe.title',
+  type: 'object',
+  properties: {
+    dynamicSrc: {
+      title: 'editor.dynamiciframe.dynamicSrc.title',
+      description: 'editor.dynamiciframe.dynamicSrc.description',
+      type: 'string',
+      default: null,
+    },
+    width: {
+      title: 'editor.dynamiciframe.width.title',
+      type: 'number',
+      default: null,
+    },
+    height: {
+      title: 'editor.dynamiciframe.height.title',
+      type: 'number',
+      default: null,
+    },
+    title: {
+      title: 'editor.dynamiciframe.title.title',
+      type: 'string',
+      default: null,
+    },
+  },
+}
+
+export default DynamicIframe

react/Iframe.tsx

@@ -1,18 +1,20 @@
 import React from 'react'
 import { useCssHandles } from 'vtex.css-handles'
 
-const CSS_HANDLES = ['container'] as const 
+const CSS_HANDLES = ['container'] as const
 
 const Iframe: StorefrontFunctionComponent<IframeProps> = ({
-   src,
-   width,
-   height
-  }) => {
+  src,
+  width,
+  height,
+  title,
+}) => {
   const handles = useCssHandles(CSS_HANDLES)
 
   return (
     <div className={`${handles.container} w-100 flex justify-center`}>
       <iframe
+        title={title}
         src={src}
         width={width}
         height={height}
@@ -23,9 +25,10 @@ const Iframe: StorefrontFunctionComponent<IframeProps> = ({
 }
 
 interface IframeProps {
-  src?: string,
-  width?: number,
+  src?: string
+  width?: number
   height?: number
+  title?: string
 }
 
 Iframe.schema = {
@@ -38,16 +41,21 @@ Iframe.schema = {
       type: 'string',
       default: null,
     },
-    width: { 
+    width: {
       title: 'editor.iframe.width.title',
       type: 'number',
       default: null,
     },
-    height: { 
+    height: {
       title: 'editor.iframe.height.title',
       type: 'number',
       default: null,
-    }
+    },
+    title: {
+      title: 'editor.iframe.title.title',
+      type: 'string',
+      default: null,
+    },
   },
 }
 

react/__mocks__/vtex.css-handles.tsx

@@ -0,0 +1 @@
+export const useCssHandles = (obj: object) => obj

react/__mocks__/vtex.render-runtime.tsx

@@ -0,0 +1 @@
+export const useRuntime = jest.fn()

react/__tests__/index.test.tsx

@@ -1,11 +1,29 @@
 import React from 'react'
 import { render } from '@vtex/test-tools/react'
-import Component from '../components/index'
+import DynamicIframe from '../DynamicIframe'
+import { useRuntime } from 'vtex.render-runtime'
 
-describe('HelloWorld Component', () => {
-  const { getByText } = render(<Component />)
+const mockedUseRuntime = useRuntime as jest.Mock
 
-  it('should render the example in TypeScript', () => {
-    expect(getByText(/This is an example/)).toBeDefined()
+describe('DynamicIframe', () => {
+  it('should render the right URL', () => {
+    mockedUseRuntime.mockImplementation(() => {
+      return {
+        route: {
+          params: {
+            param1: 'foo',
+            param2: 'bar',
+          },
+        },
+      }
+    })
+
+    const { container } = render(
+      <DynamicIframe dynamicSrc="https://{param1}.com/{param2}.aspx" />
+    )
+
+    const iframe = container.querySelector('iframe') as HTMLIFrameElement
+
+    expect(iframe.src).toBe('https://foo.com/bar.aspx')
   })
 })

react/package.json

@@ -13,6 +13,7 @@
   },
   "devDependencies": {
     "@types/classnames": "^2.2.7",
+    "@types/graphql": "^14.5.0",
     "@types/jest": "^24.0.18",
     "@types/node": "^12.7.5",
     "@types/prop-types": "^15.7.0",
@@ -24,7 +25,10 @@
     "eslint-config-vtex-react": "^4.1.0",
     "prettier": "^1.18.2",
     "tslint-eslint-rules": "^5.4.0",
-    "typescript": "3.5.2"
+    "typescript": "3.7.3",
+    "vtex.styleguide": "http://vtex.vteximg.com.br/_v/public/typings/v1/vtex.styleguide@9.104.7/public/@types/vtex.styleguide",
+    "vtex.render-runtime": "http://vtex.vteximg.com.br/_v/public/typings/v1/vtex.render-runtime@8.88.0/public/@types/vtex.render-runtime",
+    "vtex.css-handles": "http://vtex.vteximg.com.br/_v/public/typings/v1/vtex.css-handles@0.4.1/public/@types/vtex.css-handles"
   },
   "version": "0.0.4"
 }

react/tsconfig.json

@@ -3,8 +3,12 @@
     "alwaysStrict": true,
     "esModuleInterop": true,
     "jsx": "react",
-    "lib": ["es2017", "dom", "es2018.promise"],
-    "module": "es6",
+    "lib": [
+      "es2017",
+      "dom",
+      "es2018.promise"
+    ],
+    "module": "esnext",
     "moduleResolution": "node",
     "noImplicitAny": true,
     "noImplicitReturns": true,
@@ -17,11 +21,22 @@
     "strictNullChecks": true,
     "strictPropertyInitialization": true,
     "target": "es2017",
-    "typeRoots": ["node_modules/@types"],
-    "types": ["node", "jest", "graphql"]
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "types": [
+      "node",
+      "jest"
+    ]
   },
-  "exclude": ["node_modules"],
-  "include": ["./typings/*.d.ts", "./**/*.tsx", "./**/*.ts"],
+  "exclude": [
+    "node_modules"
+  ],
+  "include": [
+    "./typings/*.d.ts",
+    "./**/*.tsx",
+    "./**/*.ts"
+  ],
   "typeAcquisition": {
     "enable": false
   }