fix: Set frameName as a context when Frame is used (#2)

Setting `frameName` in the context of the query ensures that
the components inside the `<Frame>` are getting proper styles
that are defined inside appropriate Figma frames.

Closes #1

Author: okonet

src/File.tsx

@@ -4,7 +4,8 @@ import gql from "graphql-tag"
 
 export const FigmaContext = React.createContext({
 	fileId: null,
-	pageName: null
+	pageName: null,
+	frameName: null
 })
 
 export const rectFragment = gql`
@@ -142,7 +143,8 @@ export default function File({ fileId, pageName, children }: IFile) {
 					<FigmaContext.Provider
 						value={{
 							fileId,
-							pageName
+							pageName,
+							frameName: null
 						}}
 					>
 						{children({ data })}

src/Frame.tsx

@@ -1,5 +1,6 @@
 import * as React from "react"
 import Query from "./Query"
+import { FigmaContext } from "./File"
 
 export interface INode {
 	nodeName: string
@@ -30,7 +31,21 @@ export default function Frame({ frameName, nodeName, children }: IFrame) {
 					backgroundSize: "cover"
 				}
 
-				return children(styles)
+				return (
+					<FigmaContext.Consumer>
+						{({ fileId, pageName }) => (
+							<FigmaContext.Provider
+								value={{
+									fileId,
+									pageName,
+									frameName
+								}}
+							>
+								{children(styles)}
+							</FigmaContext.Provider>
+						)}
+					</FigmaContext.Consumer>
+				)
 			}}
 		</Query>
 	)

src/Query.tsx

@@ -6,16 +6,13 @@ interface IQuery {
 	variables: any
 	children?: any
 }
-export default function Query({
-	children,
-	variables,
-}: IQuery) {
+export default function Query({ children, variables }: IQuery) {
 	return (
 		<FigmaContext.Consumer>
-			{({ fileId, pageName }) => (
+			{({ fileId, pageName, frameName }) => (
 				<ApolloQuery
 					query={FIGMA_FILE_QUERY}
-					variables={{ fileId, pageName, ...variables }}
+					variables={{ fileId, pageName, frameName, ...variables }}
 				>
 					{({ loading, data, error }) => {
 						if (error) {