work on storybook

packages/docs-stories/.storybook/babel.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+	presets: [
+		['@babel/preset-react', { runtime: 'automatic' }],
+		['@babel/preset-env', {}],
+		['@babel/preset-typescript', {}],
+	],
+}

packages/docs-stories/package.json

@@ -18,8 +18,6 @@
 		"last 2 Chrome versions"
 	],
 	"dependencies": {
-		"@babel/core": "^7.16.0",
-		"@babel/preset-env": "^7.16.4",
 		"@graspologic/graph": "workspace:packages/lib-graph",
 		"@graspologic/layout-core": "workspace:packages/layout-core",
 		"@graspologic/layout-fa2": "workspace:packages/layout-fa2",
@@ -39,27 +37,28 @@
 		"typedoc": "0.22.10"
 	},
 	"devDependencies": {
+		"@babel/core": "^7.16.0",
+		"@babel/preset-env": "^7.16.4",
+		"@babel/preset-react": "^7.16.0",
+		"@babel/preset-typescript": "^7.16.0",
 		"@essex/scripts": "^18.2.1",
 		"@mdx-js/react": "^1.6.22",
-		"@storybook/addon-a11y": "^6.4.1",
-		"@storybook/addon-actions": "^6.4.1",
-		"@storybook/addon-essentials": "^6.4.1",
-		"@storybook/addon-links": "^6.4.1",
+		"@storybook/addon-a11y": "^6.4.3",
+		"@storybook/addon-actions": "^6.4.3",
+		"@storybook/addon-essentials": "^6.4.3",
+		"@storybook/addon-links": "^6.4.3",
 		"@storybook/addons": "^6.4.1",
-		"@storybook/client-api": "^6.4.1",
-		"@storybook/core": "^6.4.1",
-		"@storybook/core-events": "^6.4.1",
-		"@storybook/react": "^6.4.1",
+		"@storybook/client-api": "^6.4.3",
+		"@storybook/core": "^6.4.3",
+		"@storybook/core-events": "^6.4.3",
+		"@storybook/react": "^6.4.3",
 		"@types/node": "^16.11.11",
-		"babel-loader": "^8.2.3",
-		"raw-loader": "^4.0.2",
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2",
 		"react-fps-stats": "^0.1.4",
 		"react-markdown": "^7.1.1",
-		"source-map-loader": "^3.0.0",
 		"typescript": "^4.5.2",
-		"webpack": "^5.64.4",
+		"webpack": "^4",
 		"webpack-glsl-loader": "^1.0.1",
 		"worker-loader": "^3.0.8"
 	}

packages/docs-stories/src/about.stories.tsx

@@ -3,13 +3,13 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 /* eslint-disable @typescript-eslint/no-var-requires, import/no-anonymous-default-export */
-import * as React from 'react'
+import { FC } from 'react'
 
 const ReactMarkdown = require('react-markdown')
 const readmeText = require('../../../README.md').default
 const pkg = require('../../../package.json')
 
-function About() {
+const About: FC = function About() {
 	return (
 		<div style={{ padding: 20 }}>
 			<h1>{pkg.name}</h1>