storybook stuff

.storybook/main.js

@@ -1,14 +1,55 @@
 import React from "react";
-import path from "path";
-import { configure } from "@storybook/react";
-import { getStorybook, storiesOf } from "@storybook/react";
-import "./styles.css";
-import "pepjs";
+//import path from "path";
+//import { configure } from "@storybook/react";
+//import { getStorybook, storiesOf } from "@storybook/react";
+//import "./styles.css";
+//import "pepjs";
+const { TsConfigPathsPlugin } = require("awesome-typescript-loader");
+const fs = require("fs");
+const path = require("path");
+const webpack = require("webpack");
 
-export default {
-  stories: ["../packages/**/src/**/*.stories.[tj]s"],
+const packagesDir = path.resolve(__dirname, "../packages");
+const packages = fs.readdirSync(packagesDir);
+
+const alias = packages.reduce((memo, pkg) => {
+  memo[`@reach/${pkg}/styles.css`] = path.join(
+    packagesDir,
+    `${pkg}/styles.css`
+  );
+  memo[`@reach/${pkg}`] = path.join(packagesDir, `${pkg}/src`);
+  return memo;
+}, {});
+
+module.exports = {
+  stories: ["../packages/**/examples/*.examples.[tj](s|sx)"],
   addons: [
     "@storybook/addon-actions/register",
     "@storybook/addon-links/register"
-  ]
+  ],
+  webpackFinal: async config => {
+    config.module.rules = [
+      ...config.module.rules,
+      {
+        test: /\.(ts|tsx)?$/,
+        loader: "awesome-typescript-loader"
+      }
+    ];
+    config.resolve = {
+      ...config.resolve,
+      alias: {
+        ...(config.resolve.alias || {}),
+        ...alias
+      },
+      extensions: [".ts", ".tsx", ".js"],
+      plugins: [new TsConfigPathsPlugin({})]
+    };
+    config.plugins = [
+      ...config.plugins,
+      new webpack.DefinePlugin({
+        __DEV__: process.env.NODE_ENV === "development"
+      })
+    ];
+    return config;
+  }
 };

packages/alert-dialog/examples/basic.example.js

@@ -7,7 +7,7 @@ import {
 
 export let name = "Basic";
 
-export let Example = () => {
+export function Basic() {
   const close = useRef(null);
   const [showDialog, setShowDialog] = useState(false);
   return (
@@ -29,4 +29,4 @@ export let Example = () => {
       )}
     </div>
   );
-};
+}

packages/alert-dialog/examples/basic.example.tsx

@@ -7,7 +7,7 @@ import {
 
 export let name = "Basic (TS)";
 
-export let Example = () => {
+export function Basic() {
   const close = useRef(null);
   const [showDialog, setShowDialog] = useState(false);
   return (
@@ -29,4 +29,4 @@ export let Example = () => {
       )}
     </div>
   );
-};
+}

packages/alert/examples/basic.example.js

@@ -1,25 +1,17 @@
-import React from "react";
+import React, { useEffect, useReducer, useRef } from "react";
 import Alert from "@reach/alert";
 import { usePrevious } from "@reach/utils";
 import VisuallyHidden from "@reach/visually-hidden";
-
 import LoremIpsum from "./LoremIpsum.js";
 
 export let name = "Basic";
 
-const lipsum = new LoremIpsum();
-const initialState = {
-  messages: [],
-  messageCount: 0,
-  bestFriendIsOnline: false
-};
-
-export let Example = () => {
-  const [state, dispatch] = React.useReducer(reducer, initialState);
+export function Example() {
+  const [state, dispatch] = useReducer(reducer, initialState);
   const { messages, messageCount, bestFriendIsOnline } = state;
-  const interval = React.useRef(null);
+  const interval = useRef(null);
 
-  React.useEffect(() => {
+  useEffect(() => {
     interval.current = setInterval(() => {
       dispatch({ type: "TOGGLE_BEST_FRIEND" });
     }, getRandomInt(6000, 10000));
@@ -72,6 +64,15 @@ export let Example = () => {
       </div>
     </div>
   );
+}
+
+////////////////////////////////////////////////////////////////////////////////
+
+const lipsum = new LoremIpsum();
+const initialState = {
+  messages: [],
+  messageCount: 0,
+  bestFriendIsOnline: false
 };
 
 function reducer(state = {}, action) {
@@ -98,15 +99,15 @@ function reducer(state = {}, action) {
 }
 
 function useMessageTimeout(messages, callback, time = 5000) {
-  const timeouts = React.useRef([]);
+  const timeouts = useRef([]);
   const lastMessageCount = usePrevious(messages.length);
-  React.useEffect(() => {
+  useEffect(() => {
     if (messages.length && lastMessageCount < messages.length) {
       timeouts.current.push(window.setTimeout(callback, time));
     }
   }, [messages, lastMessageCount, callback, time]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const allTimeouts = timeouts.current;
     return () => {
       allTimeouts.forEach(window.clearTimeout);

packages/alert/examples/basic.example.tsx

@@ -17,7 +17,7 @@ const initialState: ExState = {
   bestFriendIsOnline: false
 };
 
-export let Example = () => {
+export function Example() {
   const [state, dispatch] = React.useReducer(reducer, initialState);
   const { messages, messageCount, bestFriendIsOnline } = state;
   const interval = React.useRef<any>(null);
@@ -74,7 +74,7 @@ export let Example = () => {
       </div>
     </div>
   );
-};
+}
 
 function reducer(state: ExState, action: any): ExState {
   switch (action.type) {