fix(chakra): reset css

examples/my-gatsby-site/gatsby-browser.js

@@ -1 +1 @@
-// export * from './wrapper'
+export * from './wrapper'

examples/my-gatsby-site/gatsby-config.js

@@ -5,20 +5,25 @@ const siteMetadata = require('./site-metadata')
 module.exports = {
   siteMetadata,
   plugins: [
-    '@snek-at/jaen',
+    {
+      resolve: '@snek-at/jaen',
+      options: {
+        enableChakraUI: true
+      }
+    },
     {
       resolve: '@snek-at/jaen-pages',
       options: {
         templates: {
           SamplePage: path.resolve('src/templates/SamplePage.tsx')
         }
       }
-    }, 
+    },
     {
-      resolve: "gatsby-plugin-webpack-bundle-analyser-v2",
+      resolve: 'gatsby-plugin-webpack-bundle-analyser-v2',
       options: {
-        devMode: true,
-      },
-    },
+        devMode: true
+      }
+    }
   ]
 }

examples/my-gatsby-site/gatsby-ssr.js

@@ -1,4 +1 @@
-// import React from "react"
-// exports.onRenderBody = ({ setPreBodyComponents }) => {
-//     setPreBodyComponents(<h1>LA LA LA</h1>)
-// }
+export * from './wrapper'

examples/my-gatsby-site/package.json

@@ -15,11 +15,14 @@
     "clean": "gatsby clean"
   },
   "dependencies": {
+    "@chakra-ui/gatsby-plugin": "^2.0.1",
     "@chakra-ui/icons": "^1.0.15",
-    "@emotion/react": "^11.4.1",
-    "@emotion/styled": "^11.3.0",
+    "@chakra-ui/react": "^1.6.7",
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
     "@snek-at/jaen": "^2.0.0-beta.13",
     "@snek-at/jaen-pages": "^2.0.0-beta.14",
+    "framer-motion": "^4",
     "gatsby": "^3.11.1",
     "gatsby-plugin-emotion": "^6.11.0",
     "react": "^17.0.1",

examples/my-gatsby-site/src/blocks/TestBlock.tsx

@@ -1,29 +1,29 @@
-// import {blocks, fields} from '@snek-at/jaen-pages'
-// import * as React from 'react'
+import {blocks, fields} from '@snek-at/jaen-pages'
+import * as React from 'react'
 
-// type CardBlockType = {body: string; body2: string}
+type CardBlockType = {body: string; body2: string}
 
-// export const TestBlock: blocks.BC<CardBlockType> = ({
-//   values,
-//   streamFieldWidth
-// }) => {
-//   return (
-//     <>
-//       <div>{values.body}</div>
-//       <div>{values.body2}</div>
-//     </>
-//   )
-// }
+export const TestBlock: blocks.BC<CardBlockType> = ({
+  values,
+  streamFieldWidth
+}) => {
+  return (
+    <>
+      <div>{values.body}</div>
+      <div>{values.body2}</div>
+    </>
+  )
+}
 
-// TestBlock.BlockType = 'TestBlock'
-// TestBlock.BlockFields = {
-//   body: fields.TextField,
-//   body2: fields.TextField
-// }
+TestBlock.BlockType = 'TestBlock'
+TestBlock.BlockFields = {
+  body: fields.TextField,
+  body2: fields.TextField
+}
 
-// TestBlock.defaultValues = {
-//   body: 'Body',
-//   body2: 'Body2'
-// }
+TestBlock.defaultValues = {
+  body: 'Body',
+  body2: 'Body2'
+}
 
-// export default TestBlock
+export default TestBlock

examples/my-gatsby-site/src/pages/index.js

@@ -1,3 +1,4 @@
+import {RevertCSSWrapper} from '@snek-at/jaen'
 import {fields} from '@snek-at/jaen-pages'
 import * as React from 'react'
 
@@ -134,6 +135,11 @@ const IndexPage = () => {
   return (
     <main style={pageStyles}>
       <title>Home Page</title>
+      <h1>FUUUUCK</h1>
+      <RevertCSSWrapper>
+        {' '}
+        <h1>pls dont fuck </h1>
+      </RevertCSSWrapper>
       <h1 style={headingStyles}>
         Congratulations
         <br />

examples/my-gatsby-site/src/templates/SamplePage.tsx

@@ -1,11 +1,59 @@
+import {Heading} from '@chakra-ui/layout'
+import {Box} from '@chakra-ui/react'
 import {fields} from '@snek-at/jaen-pages'
 import type {JaenTemplate} from '@snek-at/jaen-pages/src/types'
+import * as React from 'react'
+
+import TestBlock from '../blocks/TestBlock'
 
 const SamplePage: JaenTemplate = () => {
   return (
-    <fields.IndexField
-      onRender={page => <div> {Object.keys(page.children)}</div>}
-    />
+    <>
+      <Heading>Sample Page</Heading>
+      <h1>h1 heading</h1>
+      <Box maxW="sm" borderWidth="1px" borderRadius="lg" overflow="hidden">
+        <h1>IndexField</h1>
+        <fields.IndexField
+          onRender={page => <div> {Object.keys(page.children)}</div>}
+        />
+      </Box>
+      <Box maxW="sm" borderWidth="1px" borderRadius="lg" overflow="hidden">
+        <h1>StreamField</h1>
+        <fields.StreamField
+          fieldName="streamfield1"
+          initValue={{
+            0: {
+              typeName: 'TestBlock',
+              fields: {
+                body: {
+                  _type: 'TextBlock',
+                  text:
+                    '<p>This should resolve the window is not defined error and you should be able to build your code successfully. If you need more information regarding this, check the Gatsby documentation on Debugging HTML Builds.</p>'
+                },
+                body2: {
+                  _type: 'TextBlock',
+                  text: '<p>02</p>'
+                }
+              }
+            },
+            1: {
+              typeName: 'TestBlock',
+              fields: {
+                body: {
+                  _type: 'TextBlock',
+                  text: '<p>11</p>'
+                },
+                body2: {
+                  _type: 'TextBlock',
+                  text: '<p>12</p>'
+                }
+              }
+            }
+          }}
+          blocks={[TestBlock]}
+        />
+      </Box>
+    </>
   )
 }
 

examples/my-gatsby-site/wrapper.js

@@ -1,7 +1,6 @@
-// import { CMSProvider } from "@snek-at/jaen-pages"
+import {ChakraProvider} from '@chakra-ui/react'
+import * as React from 'react'
 
-// import * as React from "react"
-
-// export const wrapRootElement = ({ element }) => {
-//   return <CMSProvider templates={[]}>{element}</CMSProvider>
-// }
+export const wrapRootElement = ({element}) => {
+  return <ChakraProvider resetCSS={false}>{element}</ChakraProvider>
+}