Add a simple demo to test the iframe embedding

Author: omgovich

demo/src/components/DevTools.tsx

@@ -93,6 +93,13 @@ export const DevTools = (): JSX.Element => {
         PickerComponent={HsvaStringColorPicker}
         initialColor="hsva(200, 25%, 50%, 0.5)"
       />
+
+      <PickerPreview<RgbColor>
+        frame
+        title="RGB"
+        PickerComponent={RgbColorPicker}
+        initialColor={{ r: 60, g: 80, b: 120 }}
+      />
     </div>
   );
 };

demo/src/components/PickerPreview.tsx

@@ -1,16 +1,19 @@
 import React, { useState } from "react";
+import Frame from "react-frame-component";
 import { HexColorInput } from "../../../src";
 import { ColorPickerBaseProps, AnyColor } from "../../../src/types";
 import { PreviewContainer, PreviewDemo, PreviewOutput, PreviewTitle } from "../styles";
 
 interface Props<T extends AnyColor> {
   title: string;
+  frame?: boolean;
   PickerComponent: React.ComponentType<Partial<ColorPickerBaseProps<T>>>;
   initialColor?: T;
 }
 
 export function PickerPreview<T extends AnyColor>({
   title,
+  frame,
   PickerComponent,
   initialColor,
 }: Props<T>): JSX.Element {
@@ -21,11 +24,15 @@ export function PickerPreview<T extends AnyColor>({
     setColor(color);
   };
 
+  const Wrapper = frame ? Frame : React.Fragment;
+
   return (
     <PreviewContainer>
       <PreviewTitle>{title}</PreviewTitle>
       <PreviewDemo>
-        <PickerComponent color={color} onChange={handleChange} />
+        <Wrapper>
+          <PickerComponent color={color} onChange={handleChange} />
+        </Wrapper>
         {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
         {/* @ts-ignore */}
         {title === "HEX" && <HexColorInput color={color} onChange={handleChange} prefixed alpha />}

package-lock.json

@@ -171,6 +171,7 @@
     "@types/jest": "^26.0.20",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "@types/react-frame-component": "^4.1.3",
     "@typescript-eslint/eslint-plugin": "^4.17.0",
     "@typescript-eslint/parser": "^4.17.0",
     "cpy-cli": "^3.1.1",
@@ -190,6 +191,7 @@
     "prettier": "^2.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-frame-component": "^5.1.0",
     "size-limit": "^4.10.1",
     "ts-jest": "^26.5.3",
     "typescript": "^4.2.3",