PaulieScanlon

// This is my data in a Fauna collection

{
  "ref": Ref(Collection("demo-blog"), "269039036074557959"),
  "ts": 1592834468830000,
  "data": {
    "slug": "some-slug",
    "things": [
      {
        "name": "testA",

PaulieScanlon

import React, { useState } from 'react'

// import { YourComponent } from 'your-directory'

export default {
  title: 'components/Hackerman-1',
  parameters: {
    // component: YourComponent,
    componentSubtitle:
      'The Component Subtitle appears at the top of the .stories file. I usually create a default export for "Usage" to show how the component can be used without any props. It\'s common for each story to start with a capital letter',

PaulieScanlon

import React from 'react'

// import { YourComponent } from 'your-directory'

export default {
  title: 'components/Hackerman-2',
  decorators: [
    (Story) => (
      <div style={{ outline: '3px solid red' }}>
        <Story />

PaulieScanlon

import React from 'react'

// import { YourComponent } from 'your-directory'

export default {
  title: 'components/Hackerman-3',
  parameters: {
    // component: YourComponent,
    componentSubtitle: '...',
  },

PaulieScanlon

// button.stories.tsx

import React from 'react'
import { Button } from '.'

export default {
  title: 'components/Button',
  parameters: {
    component: Button,
    componentSubtitle: 'The Button component is of html type button',

PaulieScanlon

1. `yarn add gatsby-plugin-theme-ui theme-ui`
2. add `gatsby-plugin-theme-ui` to gatsby plugins array in `gatsby-config`
  `module.exports = {
    plugins: [
     'gatsby-plugin-theme-ui'`
     ]
    }
   `
   3. create a dir with an index.js in `src/gatsby-plugin-theme-ui/index.js`
   4. copy the basic colors object... there's more details in the docs

PaulieScanlon

using the example from https://paulie.dev/posts/2021/02/theme-ui-alpha-6/#css-keyframes 
you could also store the animationName as a const




const animationTypeOne = keyframes({
                '0%': {
                  opacity: 1,
                },

PaulieScanlon

import React from 'react';

const ContentfulRender = ({ children }) => {
  return <>{process.env.GATSBY_CONTENTFUL_KEY ? <>{children}</> : null}</>;
};

export default ContentfulRender;

PaulieScanlon

import React, { Fragment, FunctionComponent, useState, useEffect } from 'react'
import { Box, Grid, Message, Button } from 'theme-ui'

import { Client } from 'shopify-buy'

import { Loader } from '../loader'
import { Confetti } from '../confetti'

interface ICheckoutProps {
  /** Shopify Buy client */

PaulieScanlon

module.exports = {
  stories: ["../src/**/*.stories.tsx"],
  addons: ["@storybook/addon-actions", "@storybook/addon-docs"],
  webpackFinal: async (config) => {
    config.module.rules.push(
      {
        // Config for js and jsx files
        test: /\.(js|jsx)$/,
        use: [
          {