From 1222f744aa881cfe11a5f4f200a5a4bc8b052b96 Mon Sep 17 00:00:00 2001 From: cesarocampov Date: Mon, 8 Mar 2021 12:11:28 +0100 Subject: [PATCH 1/4] feature: including allow tag for custom js --- docs/README.md | 7 +++++-- messages/context.json | 6 ++++-- messages/en.json | 12 ++++++++---- react/DynamicIframe.tsx | 8 ++++++++ react/Iframe.tsx | 9 +++++++++ react/package.json | 2 +- react/yarn.lock | 7 ++++++- 7 files changed, 41 insertions(+), 10 deletions(-) diff --git a/docs/README.md b/docs/README.md index 1987170..95a9785 100644 --- a/docs/README.md +++ b/docs/README.md @@ -48,6 +48,7 @@ An app that makes it possible to render external iframes on a store | `src` | String | Source address the iframe should render | `null` | `width` | Number | Width attribute of the iframe | `null` | `height` | Number | Height attribute of the iframe | `null` +| `allow` | String | allow attribute for custom js | `null` ## Configuration - dynamic Iframe @@ -74,7 +75,8 @@ An app that makes it possible to render external iframes on a store "dynamicSrc":"https://www.test.com/exampleStaticPathName/{dynamicParam1}/{dynamicParam2}/exampleStaticPageName", "width":"1920", "height":"1000", - "title":"exampleStaticPageName iframe wrapper for {account}" + "title":"exampleStaticPageName iframe wrapper for {account}", + "allow": "geolocation" } } ``` @@ -92,6 +94,7 @@ 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` | `title` | String | title attribute of the iframe tag | `null` +| `allow` | String | allow attribute for custom js | `null` ## Customization @@ -108,4 +111,4 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d -This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! \ No newline at end of file +This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! diff --git a/messages/context.json b/messages/context.json index b1cc513..07283ec 100644 --- a/messages/context.json +++ b/messages/context.json @@ -5,6 +5,7 @@ "editor.iframe.height.title": "Height", "editor.iframe.width.title": "Width", "editor.iframe.title.title": "Title", + "editor.iframe.allow.title":"Allow", "editor.dynamiciframe.title": "Dynamic Iframe", "editor.dynamiciframe.title.title": "Title", "editor.dynamiciframe.srcPrepend.description": "iframe source url pre-pended string", @@ -12,5 +13,6 @@ "editor.dynamiciframe.srcAppend.description": "iframe source url appended string", "editor.dynamiciframe.srcAppend.title": "Append", "editor.dynamiciframe.height.title": "Height", - "editor.dynamiciframe.width.title": "Width" -} \ No newline at end of file + "editor.dynamiciframe.width.title": "Width", + "editor.dynamiciframe.allow.title":"Allow" +} diff --git a/messages/en.json b/messages/en.json index 5224617..07283ec 100644 --- a/messages/en.json +++ b/messages/en.json @@ -5,10 +5,14 @@ "editor.iframe.height.title": "Height", "editor.iframe.width.title": "Width", "editor.iframe.title.title": "Title", + "editor.iframe.allow.title":"Allow", "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.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" -} \ No newline at end of file + "editor.dynamiciframe.width.title": "Width", + "editor.dynamiciframe.allow.title":"Allow" +} diff --git a/react/DynamicIframe.tsx b/react/DynamicIframe.tsx index 23cc12c..6803e84 100644 --- a/react/DynamicIframe.tsx +++ b/react/DynamicIframe.tsx @@ -8,6 +8,7 @@ const DynamicIframe: StorefrontFunctionComponent = ({ width, height, title, + allow, }) => { const { route: { params }, @@ -42,6 +43,7 @@ const DynamicIframe: StorefrontFunctionComponent = ({ src={src + queryString} width={width} height={height} + allow={allow} /> ) } @@ -51,6 +53,7 @@ interface DynamicIframeProps { width?: number height?: number title?: string + allow?: string } DynamicIframe.schema = { @@ -78,6 +81,11 @@ DynamicIframe.schema = { type: 'string', default: null, }, + allow:{ + title: 'editor.dynamiciframe.allow.title', + type: 'string', + default: null, + } }, } diff --git a/react/Iframe.tsx b/react/Iframe.tsx index fb44fc2..e0ad2d0 100644 --- a/react/Iframe.tsx +++ b/react/Iframe.tsx @@ -8,6 +8,7 @@ const Iframe: StorefrontFunctionComponent = ({ width, height, title, + allow, }) => { const handles = useCssHandles(CSS_HANDLES) @@ -18,6 +19,7 @@ const Iframe: StorefrontFunctionComponent = ({ src={src} width={width} height={height} + allow={allow} frameBorder="0" /> @@ -28,6 +30,7 @@ interface IframeProps { src?: string width?: number height?: number + allow?: string title?: string } @@ -56,6 +59,12 @@ Iframe.schema = { type: 'string', default: null, }, + allow:{ + title:'editor.iframe.allow.title', + type:'string', + default: null, + + }, }, } diff --git a/react/package.json b/react/package.json index 1d98741..411dfa2 100644 --- a/react/package.json +++ b/react/package.json @@ -24,7 +24,7 @@ "apollo-cache-inmemory": "^1.6.5", "apollo-client": "^2.6.8", "graphql": "^14.6.0", - "typescript": "3.8.3", + "typescript": "3.9.7", "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.2.0" diff --git a/react/yarn.lock b/react/yarn.lock index 1a35662..7533e60 100644 --- a/react/yarn.lock +++ b/react/yarn.lock @@ -5296,7 +5296,12 @@ type-check@~0.3.2: dependencies: prelude-ls "~1.1.2" -typescript@3.8.3, typescript@^3.7.3: +typescript@3.9.7: + version "3.9.7" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.7.tgz#98d600a5ebdc38f40cb277522f12dc800e9e25fa" + integrity sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw== + +typescript@^3.7.3: version "3.8.3" resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.8.3.tgz#409eb8544ea0335711205869ec458ab109ee1061" integrity sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w== From af6660f5b94a81f471e38d1ed13b357c62becab1 Mon Sep 17 00:00:00 2001 From: Breno Calazans Date: Tue, 9 Mar 2021 19:03:06 -0300 Subject: [PATCH 2/4] Lint files --- messages/context.json | 4 +- messages/en.json | 4 +- react/DynamicIframe.tsx | 28 ++++---- react/Iframe.tsx | 31 ++++----- react/package.json | 4 +- react/typings/css.d.ts | 4 -- react/typings/graphql.d.ts | 6 -- react/typings/storefront.d.ts | 13 ---- react/typings/vtex.render-runtime.d.ts | 96 -------------------------- react/typings/vtex.styleguide.d.ts | 9 --- react/yarn.lock | 14 +++- 11 files changed, 44 insertions(+), 169 deletions(-) delete mode 100644 react/typings/css.d.ts delete mode 100644 react/typings/graphql.d.ts delete mode 100644 react/typings/storefront.d.ts delete mode 100644 react/typings/vtex.render-runtime.d.ts delete mode 100644 react/typings/vtex.styleguide.d.ts diff --git a/messages/context.json b/messages/context.json index 07283ec..266dce1 100644 --- a/messages/context.json +++ b/messages/context.json @@ -5,7 +5,7 @@ "editor.iframe.height.title": "Height", "editor.iframe.width.title": "Width", "editor.iframe.title.title": "Title", - "editor.iframe.allow.title":"Allow", + "editor.iframe.allow.title": "Allow", "editor.dynamiciframe.title": "Dynamic Iframe", "editor.dynamiciframe.title.title": "Title", "editor.dynamiciframe.srcPrepend.description": "iframe source url pre-pended string", @@ -14,5 +14,5 @@ "editor.dynamiciframe.srcAppend.title": "Append", "editor.dynamiciframe.height.title": "Height", "editor.dynamiciframe.width.title": "Width", - "editor.dynamiciframe.allow.title":"Allow" + "editor.dynamiciframe.allow.title": "Allow" } diff --git a/messages/en.json b/messages/en.json index 07283ec..266dce1 100644 --- a/messages/en.json +++ b/messages/en.json @@ -5,7 +5,7 @@ "editor.iframe.height.title": "Height", "editor.iframe.width.title": "Width", "editor.iframe.title.title": "Title", - "editor.iframe.allow.title":"Allow", + "editor.iframe.allow.title": "Allow", "editor.dynamiciframe.title": "Dynamic Iframe", "editor.dynamiciframe.title.title": "Title", "editor.dynamiciframe.srcPrepend.description": "iframe source url pre-pended string", @@ -14,5 +14,5 @@ "editor.dynamiciframe.srcAppend.title": "Append", "editor.dynamiciframe.height.title": "Height", "editor.dynamiciframe.width.title": "Width", - "editor.dynamiciframe.allow.title":"Allow" + "editor.dynamiciframe.allow.title": "Allow" } diff --git a/react/DynamicIframe.tsx b/react/DynamicIframe.tsx index 6803e84..5677f6a 100644 --- a/react/DynamicIframe.tsx +++ b/react/DynamicIframe.tsx @@ -1,19 +1,27 @@ import React from 'react' -import { useRuntime } from 'vtex.render-runtime' +import { useRuntime, RenderContext } from 'vtex.render-runtime' import Iframe from './Iframe' -const DynamicIframe: StorefrontFunctionComponent = ({ +interface Props { + dynamicSrc: string + width?: number + height?: number + title?: string + allow?: string +} + +function DynamicIframe({ dynamicSrc = '', width, height, title, allow, -}) => { +}: Props) { const { route: { params }, query = {}, - } = useRuntime() + } = useRuntime() as RenderContext.RenderContext const queryString = Object.keys(query).reduce((acc, key) => { return `${acc || '?'}${key}=${query[key]}&` @@ -48,14 +56,6 @@ const DynamicIframe: StorefrontFunctionComponent = ({ ) } -interface DynamicIframeProps { - dynamicSrc: string - width?: number - height?: number - title?: string - allow?: string -} - DynamicIframe.schema = { title: 'editor.dynamiciframe.title', type: 'object', @@ -81,11 +81,11 @@ DynamicIframe.schema = { type: 'string', default: null, }, - allow:{ + allow: { title: 'editor.dynamiciframe.allow.title', type: 'string', default: null, - } + }, }, } diff --git a/react/Iframe.tsx b/react/Iframe.tsx index e0ad2d0..541b2d1 100644 --- a/react/Iframe.tsx +++ b/react/Iframe.tsx @@ -3,13 +3,15 @@ import { useCssHandles } from 'vtex.css-handles' const CSS_HANDLES = ['container'] as const -const Iframe: StorefrontFunctionComponent = ({ - src, - width, - height, - title, - allow, -}) => { +interface Props { + src?: string + width?: number + height?: number + allow?: string + title?: string +} + +function Iframe({ src, width, height, title, allow }: Props) { const handles = useCssHandles(CSS_HANDLES) return ( @@ -26,14 +28,6 @@ const Iframe: StorefrontFunctionComponent = ({ ) } -interface IframeProps { - src?: string - width?: number - height?: number - allow?: string - title?: string -} - Iframe.schema = { title: 'editor.iframe.title', type: 'object', @@ -59,11 +53,10 @@ Iframe.schema = { type: 'string', default: null, }, - allow:{ - title:'editor.iframe.allow.title', - type:'string', + allow: { + title: 'editor.iframe.allow.title', + type: 'string', default: null, - }, }, } diff --git a/react/package.json b/react/package.json index 411dfa2..39514b2 100644 --- a/react/package.json +++ b/react/package.json @@ -25,7 +25,9 @@ "apollo-client": "^2.6.8", "graphql": "^14.6.0", "typescript": "3.9.7", - "vtex.css-handles": "http://vtex.vteximg.com.br/_v/public/typings/v1/vtex.css-handles@0.4.1/public/@types/vtex.css-handles" + "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@0.4.4/public/@types/vtex.css-handles", + "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.126.11/public/@types/vtex.render-runtime", + "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.136.0/public/@types/vtex.styleguide" }, "version": "0.2.0" } diff --git a/react/typings/css.d.ts b/react/typings/css.d.ts deleted file mode 100644 index ce1bfff..0000000 --- a/react/typings/css.d.ts +++ /dev/null @@ -1,4 +0,0 @@ -declare module '*.css' { - const css: any - export default css -} diff --git a/react/typings/graphql.d.ts b/react/typings/graphql.d.ts deleted file mode 100644 index ba891a0..0000000 --- a/react/typings/graphql.d.ts +++ /dev/null @@ -1,6 +0,0 @@ -declare module '*.graphql' { - import { DocumentNode } from 'graphql' - - const value: DocumentNode - export default value -} diff --git a/react/typings/storefront.d.ts b/react/typings/storefront.d.ts deleted file mode 100644 index 5033033..0000000 --- a/react/typings/storefront.d.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { FunctionComponent } from 'react' - -declare global { - interface StorefrontFunctionComponent

extends FunctionComponent

{ - getSchema?(props: P): object - schema?: object - } - - interface StorefrontComponent

extends Component { - getSchema?(props: P): object - schema: object - } -} diff --git a/react/typings/vtex.render-runtime.d.ts b/react/typings/vtex.render-runtime.d.ts deleted file mode 100644 index 31bd9ea..0000000 --- a/react/typings/vtex.render-runtime.d.ts +++ /dev/null @@ -1,96 +0,0 @@ -/* Typings for `render-runtime` */ -declare module 'vtex.render-runtime' { - import { Component, ComponentType, ReactElement, ReactType } from 'react' - - export interface NavigationOptions { - page: string - params?: any - } - - export interface RenderContextProps { - runtime: { - navigate: (options: NavigationOptions) => void - } - } - - export interface RenderRuntime { - account: string - accountId: string - appsEtag: string - workspace: string - disableSSR: boolean - hints: { - desktop: boolean - mobile: boolean - phone: boolean - tablet: boolean - } - page: string - route: Route - version: string - culture: Culture - pages: Pages - preview: boolean - production: boolean - publicEndpoint: string - renderMajor: number - query?: Record - start: boolean - runtimeMeta: { - version: string - config?: any - } - settings: { - [app: string]: any - } - segmentToken: string - rootPath?: string - workspaceCookie: string - hasNewExtensions: boolean - navigate: (options: NavigationOptions) => void - } - - interface ExtensionPointProps { - id: string - [key: string]: any - } - - interface Pages { - [name: string]: Page - } - interface Route { - domain: string - blockId: string - canonicalPath?: string - id: string - params: Record - path: string - title?: string - } - interface Culture { - availableLocales: string[] - locale: string - language: string - country: string - currency: string - } - - export const ExtensionPoint: ComponentType - - interface ChildBlockProps { - id: string - } - - export const ChildBlock: ComponentType - export const useChildBlock = ({ id: string }) => Object - - export const Helmet: ReactElement - export const Link: ReactType - export const NoSSR: ReactElement - export const RenderContextConsumer: ReactElement - export const canUseDOM: boolean - export const withRuntimeContext: ( - Component: ComponentType - ) => ComponentType - export const useRuntime: () => RenderRuntime -} diff --git a/react/typings/vtex.styleguide.d.ts b/react/typings/vtex.styleguide.d.ts deleted file mode 100644 index 231ca46..0000000 --- a/react/typings/vtex.styleguide.d.ts +++ /dev/null @@ -1,9 +0,0 @@ -declare module 'vtex.styleguide' { - import { ComponentType } from 'react' - - export const Input: ComponentType - - interface InputProps { - [key: string]: any - } -} diff --git a/react/yarn.lock b/react/yarn.lock index 7533e60..fd793d8 100644 --- a/react/yarn.lock +++ b/react/yarn.lock @@ -5417,9 +5417,17 @@ verror@1.10.0: core-util-is "1.0.2" extsprintf "^1.2.0" -"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.4.1" - resolved "http://vtex.vteximg.com.br/_v/public/typings/v1/vtex.css-handles@0.4.1/public/@types/vtex.css-handles#16fe9485e8e7183b94f28496ed8cdd741c83f227" +"vtex.css-handles@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@0.4.4/public/@types/vtex.css-handles": + version "0.4.4" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@0.4.4/public/@types/vtex.css-handles#8c45c6decf9acd2b944e07261686decff93d6422" + +"vtex.render-runtime@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.126.11/public/@types/vtex.render-runtime": + version "8.126.11" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.126.11/public/@types/vtex.render-runtime#aceb734766093b56954ec19a074574b4c2c95242" + +"vtex.styleguide@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.136.0/public/@types/vtex.styleguide": + version "9.136.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.136.0/public/@types/vtex.styleguide#0581000fd332db1889bbb2a24f230f824c0e00f6" w3c-hr-time@^1.0.1: version "1.0.1" From b1b23fce50b4b6a1ce198816da928c56f93bce8f Mon Sep 17 00:00:00 2001 From: Breno Calazans Date: Tue, 9 Mar 2021 19:03:41 -0300 Subject: [PATCH 3/4] Update changelog --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index b9d5581..1dbfe2c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html). ## [Unreleased] +### Added +- Prop `allow`. ## [0.2.0] - 2020-03-30 ### Added From 6c6a20ddf72a99227e114e703ea908a3d4ddf027 Mon Sep 17 00:00:00 2001 From: Breno Calazans Date: Tue, 9 Mar 2021 19:08:32 -0300 Subject: [PATCH 4/4] Fix docs --- docs/README.md | 71 +++++++++++++++++++++++++------------------------- 1 file changed, 36 insertions(+), 35 deletions(-) diff --git a/docs/README.md b/docs/README.md index 95a9785..7114776 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,54 +1,51 @@ +📢 Use this project, [contribute](https://github.com/vtex-apps/iframe) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion). + # Iframe + + [![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-) + -

-📢 Don't fork this project. Use, contribute, or open issues using your feature request. -
+An app that makes it possible to render external iframes on a store. ![image](https://user-images.githubusercontent.com/18701182/67055752-abcb0500-f11f-11e9-8c24-50234214d474.png) -An app that makes it possible to render external iframes on a store - ## Configuration - standard Iframe 1. Add the `vtex.iframe` to the theme's dependencies on the `manifest.json` -``` -... +```json "dependencies": { - ... "vtex.iframe": "0.x" - ... } -... ``` 2. Add the interface `iframe` to any **custom page** (Iframes are not allowed outside custom pages). - ``` - ... -"store.custom#about-us": { +```json +{ + "store.custom#about-us": { "blocks": [ "flex-layout.row#about-us", "iframe" ] }, - "iframe": { - "props": { - "src": "" - } - }, - ... - ``` + "iframe": { + "props": { + "src": "" + } + } +} +``` | Prop name | Type | Description | Default value | |--------------|--------|--------------| --------| | `src` | String | Source address the iframe should render | `null` | `width` | Number | Width attribute of the iframe | `null` | `height` | Number | Height attribute of the iframe | `null` -| `allow` | String | allow attribute for custom js | `null` +| `allow` | String | allow attribute of the iframe | `null` ## Configuration - dynamic Iframe @@ -56,36 +53,38 @@ An app that makes it possible to render external iframes on a store ```json "dependencies": { - ... "vtex.iframe": "0.x" } -... ``` 2. Add the dynamicIframe block and its properties to the blocks.json file ```json -"store.custom#locationPage":{ +{ + "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}", + "iframe.dynamic-src":{ + "props": { + "dynamicSrc": "https://www.test.com/exampleStaticPathName/{dynamicParam1}/{dynamicParam2}/exampleStaticPageName", + "width": "1920", + "height": "1000", + "title": "exampleStaticPageName iframe wrapper for {account}", "allow": "geolocation" } } +} ``` 3. register your new page in routes.json with appropriate parameters passed into the page url ```json -"store.custom#locationPage":{ +{ + "store.custom#locationPage":{ "path": "/:param1/:param2/pagename" - }, + } +} ``` | Prop name | Type | Description | Default value | @@ -93,13 +92,14 @@ An app that makes it possible to render external iframes on a store | `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` -| `allow` | String | allow attribute for custom js | `null` +| `title` | String | title attribute of the iframe | `null` +| `allow` | String | allow attribute of the iframe | `null` ## Customization -There is a `.container` handle that wraps the iframe, it's also possible to use `blockClass` +There is a `.container` handle that wraps the iframe, it's also possible to use `blockClass`. + ## Contributors ✨ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)): @@ -112,3 +112,4 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! + \ No newline at end of file