react-canvas | High performance canvas rendering for React | Frontend Framework library

import "./styles.css";
import {
  Flex,
  Tab,
  TabList,
  TabPanel,
  TabPanels,
  Tabs
} from "@chakra-ui/react";
import { SketchField, Tools } from "react-sketch";

export default function App() {
  return (
    <Flex height="100vh" width="100vw">
      <Tabs width="100%" display="flex" flexDirection="column" defaultIndex={0}>
        <TabList>
          {["Play", "Draw"].map((val) => (
            <Tab key={Math.random()}>{val}</Tab>
          ))}
        </TabList>
        <TabPanels flex="1 1 auto">
          <TabPanel padding={0} height="100%">
            <h1>Hello world </h1>
          </TabPanel>
          <TabPanel padding={0} height="100%">
            <Flex height="100%" width="100%">
              <SketchField
                width="100%"
                height="100%"
                widthCorrection={0}
                tool={Tools.Pencil}
                lineColor="#3182CE"
                lineWidth={3}
              />
            </Flex>
          </TabPanel>
        </TabPanels>
      </Tabs>
    </Flex>
  );
}

ERROR #11331  PLUGIN
Invalid plugin options for "gatsby-plugin-manifest":
- "value" must contain at least one of [icon, icons]

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  },
  plugins: [
    `gatsby-plugin-feed`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Gatsby Starter Blog`,
        short_name: `GatsbyJS`,
        start_url: `/`,
        background_color: `#ffffff`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `${__dirname}/src/assets`,
      },
    },  
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `assets`,
        path: `${__dirname}/src/assets`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
      },
    },
    `gatsby-plugin-styled-components`,
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}

{
  "name": "gatsby-starter-default",
  "private": true,
  "description": "A simple starter to get up and developing quickly with Gatsby",
  "version": "0.1.0",
  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
  "dependencies": {
    "babel-plugin-styled-components": "^1.10.7",
    "framer-motion": "^1.10.2",
    "gatsby": "^2.19.45",
    "gatsby-image": "^2.2.44",
    "gatsby-plugin-feed": "^2.11.0",
    "gatsby-plugin-manifest": "^2.10.0",
    "gatsby-plugin-offline": "^3.0.41",
    "gatsby-plugin-react-helmet": "^3.1.24",
    "gatsby-plugin-sharp": "^2.4.13",
    "gatsby-plugin-styled-components": "^3.2.1",
    "gatsby-source-filesystem": "^2.1.56",
    "gatsby-transformer-sharp": "^2.3.19",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-canvas": "^1.3.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^5.2.1",
    "react-intersection-observer": "^8.26.1",
    "styled-components": "^5.0.1",
    "styled-normalize": "^8.0.7"
  },
  "devDependencies": {
    "prettier": "^1.19.1"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  }
}

import * as React from 'react';
import { storiesOf, addParameters, addDecorator } from '@storybook/react';
import { setOptions } from '@storybook/addon-options';
import { themes } from '@storybook/theming';
import './demos/helpers/index.css';
import { Toolkit } from '@projectstorm/react-canvas-core';

Toolkit.TESTING = true;

addParameters({
    options: {
        theme: themes.dark,
    }
});

setOptions({
    name: 'STORM React Diagrams',
    url: 'https://github.com/projectstorm/react-diagrams',
    addonPanelInRight: true
});

addDecorator(fn => {
    Toolkit.TESTING_UID = 0;
    return fn();
});

import demo_client from './demos/client-demo-simple';
import demo_simple from './demos/demo-simple';
import demo_flow from './demos/demo-simple-flow';
import demo_performance from './demos/demo-performance';
import demo_locks from './demos/demo-locks';
import demo_grid from './demos/demo-grid';
import demo_listeners from './demos/demo-listeners';
import demo_zoom from './demos/demo-zoom-to-fit';
import demo_labels from './demos/demo-labelled-links';
import demo_dynamic_ports from './demos/demo-dynamic-ports';
import demo_alternative_linking from './demos/demo-alternative-linking';
import demo_custom_delete_keys from './demos/demo-custom_delete_keys';

storiesOf('Simple Usage', module)
    .add('Client Demo', demo_client)

import React, { createRef } from 'react';
import ReactCanvas from 'react-signature-canvas';

interface IProps {}

interface IState {}

export default class App extends React.Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <div className="content-area">
        <ReactCanvas penColor='black' canvasProps={{width: 353, height: 120}} />
      </div>
    );
  }
}

const canvasRef = this.myRef.current
    if (canvasRef) {
      canvasRef.props.toDataURL('image/png', 1);
    }

"devDependencies": {
 "three": "^0.88.0"
}

require( 'three-instanced-mesh' )(THREE)

import Foo from 'foo' //<-- where does 'foo' point and what is 'foo'?