Merge pull request #4 from vtex-apps/feature/product

Add sandbox.product

Author: Breno Calazans

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
+- `sandbox.product` a Sandbox that receives the Product context as props. That way it's possible to use sandbox inside a `flex-layout` and still have the product context.
 
 ## [0.1.0] - 2019-07-05
 ### Added

manifest.json

@@ -11,6 +11,9 @@
     "react": "3.x"
   },
   "mustUpdateAt": "2019-04-02",
+  "dependencies": {
+    "vtex.product-context": "0.x"
+  },
   "scripts": {
     "postreleasy": "vtex publish --verbose"
   },

react/Sandbox.tsx

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import { NoSSR, canUseDOM } from 'vtex.render-runtime'
 import stringify from 'safe-json-stringify'
+import { schema, Props } from './modules/schema'
 
 // Avoid breaking SSR by loading this only in the client side
 let iFrameResizer: any = null
@@ -20,15 +21,6 @@ interface IframeOptions {
   styles: StyleContainer[]
 }
 
-interface Props {
-  initialContent?: string
-  width?: string
-  height?: string
-  allowCookies?: boolean
-  allowStyles?: boolean
-  hidden?: boolean
-}
-
 // Create objects representing styles, either with href or the actual rules, to be passed to the iframe.
 function getExistingStyles() {
   const styles: StyleContainer[] = []
@@ -101,42 +93,11 @@ function initIframe (options: IframeOptions) {
   })
 }
 
-export default class Sandbox extends Component<Props> {
+class Sandbox extends Component<Props> {
   public iframeRef: HTMLIFrameElement | null = null
 
-  public schema = {
-    title: 'admin/editor.sandbox.title',
-    description: 'admin/editor.sandbox.description',
-    type: 'object',
-    properties: {
-      width: {
-        title: 'admin/editor.sandbox.width.title',
-        description: 'admin/editor.sandbox.width.description',
-        type: 'string',
-        default: null,
-      },
-      height: {
-        title: 'admin/editor.sandbox.height.title',
-        description: 'admin/editor.sandbox.height.description',
-        type: 'string',
-        default: null,
-      },
-      initialContent: {
-        title: 'admin/editor.sandbox.initialContent.title',
-        description: 'admin/editor.sandbox.initialContent.description',
-        type: 'string',
-        default: null,
-      },
-      allowCookies: {
-        title: 'admin/editor.sandbox.allowCookies.title',
-        description: 'admin/editor.sandbox.allowCookies.description',
-        type: 'boolean',
-        default: false,
-      },
-    },
-  }
-
   private injectedDocument: string = ''
+  static schema: object;
 
   public constructor(props: Props) {
     super(props)
@@ -207,3 +168,7 @@ export default class Sandbox extends Component<Props> {
     }
   }
 }
+
+Sandbox.schema = schema
+
+export default Sandbox

react/SandboxProduct.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { useProduct } from 'vtex.product-context'
+import { Props, schema } from './modules/schema'
+import Sandbox from './Sandbox'
+
+const SandboxProduct: StorefrontFunctionComponent<Props> = ({
+  initialContent,
+  width,
+  height,
+  allowCookies,
+  allowStyles,
+  hidden,
+}) => {
+  const productContext = useProduct()
+
+  return (
+    <Sandbox
+      {...productContext}
+      initialContent={initialContent}
+      width={width}
+      height={height}
+      allowCookies={allowCookies}
+      allowStyles={allowStyles}
+      hidden={hidden} />
+  )
+}
+
+SandboxProduct.schema = schema
+
+export default SandboxProduct

react/modules/schema.ts

@@ -0,0 +1,40 @@
+export interface Props {
+  initialContent?: string
+  width?: string
+  height?: string
+  allowCookies?: boolean
+  allowStyles?: boolean
+  hidden?: boolean
+}
+
+export const schema = {
+  title: 'admin/editor.sandbox.title',
+  description: 'admin/editor.sandbox.description',
+  type: 'object',
+  properties: {
+    width: {
+      title: 'admin/editor.sandbox.width.title',
+      description: 'admin/editor.sandbox.width.description',
+      type: 'string',
+      default: null,
+    },
+    height: {
+      title: 'admin/editor.sandbox.height.title',
+      description: 'admin/editor.sandbox.height.description',
+      type: 'string',
+      default: null,
+    },
+    initialContent: {
+      title: 'admin/editor.sandbox.initialContent.title',
+      description: 'admin/editor.sandbox.initialContent.description',
+      type: 'string',
+      default: null,
+    },
+    allowCookies: {
+      title: 'admin/editor.sandbox.allowCookies.title',
+      description: 'admin/editor.sandbox.allowCookies.description',
+      type: 'boolean',
+      default: false,
+    },
+  },
+}

react/tsconfig.json

@@ -17,9 +17,7 @@
   },
   "include": [
     "./typings/*.d.ts",
-    "./**/*.tsx",
-    "components/withImage.d.ts",
-    "Footer.js"
+    "./**/*.tsx"
   ],
   "exclude": ["node_modules"]
 }

react/typings/vtex.product-context.d.ts

@@ -0,0 +1,7 @@
+declare module 'vtex.product-context' {
+  interface ProductContext {
+    product: object
+  }
+
+  export const useProduct = ProductContext
+}

store/interfaces.json

@@ -1,5 +1,8 @@
 {
   "sandbox": {
     "component": "Sandbox"
+  },
+  "sandbox.product": {
+    "component": "SandboxProduct"
   }
 }