feat: Make library agnostic of how styles are rendered

Only return styles object instead of rendering with
styled-components so rendering can happen in userland
with any possible solution.

BREAKING CHANGE: API of the components has been updated to use render props pattern instead of rendering JSX elements
with the library

Author: Andrey Okonetchnikov

package-lock.json

@@ -44,12 +44,10 @@
     "react-apollo": "^2.5.2",
     "react-dom": "^16.8.4",
     "react-google-font-loader": "^1.0.5",
-    "styled-components": "^4.1.3",
     "subscriptions-transport-ws": "^0.9.16"
   },
   "peerDependencies": {
-    "react": ">=16.8",
-    "styled-components": "^4"
+    "react": ">=16.8"
   },
   "devDependencies": {
     "@babel/core": "^7.4.0",

package.json

@@ -1,15 +1,9 @@
 import * as React from "react"
-import styled from "styled-components"
 import Query from "./Query"
 
-const NodeWrapper = styled("div")`
-	position: relative;
-`
-
 export interface INode {
 	nodeName: string
-	children?: any
-	styles?: object
+	children?: (styles: object) => JSX.Element
 }
 
 interface IFrame extends INode {
@@ -29,17 +23,14 @@ export default function Frame({ frameName, nodeName, children }: IFrame) {
 				const { size } = frame
 				const { image } = frame.children[0]
 
-				return (
-					<NodeWrapper
-						style={{
-							...size,
-							background: `url(${image})`,
-							backgroundSize: "cover"
-						}}
-					>
-						{children}
-					</NodeWrapper>
-				)
+				const styles = {
+					...size,
+					position: "relative",
+					background: `url(${image})`,
+					backgroundSize: "cover"
+				}
+
+				return children(styles)
 			}}
 		</Query>
 	)

src/Frame.tsx

@@ -1,11 +1,6 @@
-import * as React from "react";
-import styled from "styled-components"
+import * as React from "react"
 import Query from "./Query"
-import { INode } from "./Frame";
-
-const NodeWrapper = styled("div")`
-	position: relative;
-`
+import { INode } from "./Frame"
 
 export default function Group({ nodeName, children }: INode) {
 	return (
@@ -18,17 +13,14 @@ export default function Group({ nodeName, children }: INode) {
 				const frame = data.file.pages[0].frames[0]
 				const { size, position } = frame.children[0]
 
-				return (
-					<NodeWrapper
-						style={{
-							...size,
-							top: position.y,
-							left: position.x
-						}}
-					>
-						{children}
-					</NodeWrapper>
-				)
+				const styles = {
+					...size,
+					position: "relative",
+					top: position.y,
+					left: position.x
+				}
+
+				return children(styles)
 			}}
 		</Query>
 	)

src/Group.tsx

@@ -1,15 +1,10 @@
 import * as React from "react"
-import styled from "styled-components"
 import { rgba } from "polished"
 import GoogleFontLoader from "react-google-font-loader"
 import Query from "./Query"
 import { INode } from "./Frame"
 
-const NodeWrapper = styled("div")`
-	position: absolute;
-`
-
-export default function Text({ nodeName, children, styles }: INode) {
+export default function Text({ nodeName, children }: INode) {
 	return (
 		<Query
 			variables={{
@@ -45,18 +40,14 @@ export default function Text({ nodeName, children, styles }: INode) {
 								}
 							]}
 						/>
-						<NodeWrapper
-							style={{
-								...style,
-								...size,
-								left: relativeX,
-								top: relativeY,
-								color,
-								...styles
-							}}
-						>
-							{children}
-						</NodeWrapper>
+						{children({
+							...style,
+							...size,
+							position: "absolute",
+							left: relativeX,
+							top: relativeY,
+							color
+						})}
 					</React.Fragment>
 				)
 			}}