Added storybook addons, initial anchor component and missing config for finding components

Author: wintondeshong

.storybook/addons.js

@@ -0,0 +1,3 @@
+import "@storybook/addon-actions/register";
+import "@storybook/addon-links/register";
+import "@storybook/addon-knobs/register";

.storybook/config.js

@@ -1,9 +1,45 @@
-import { configure } from "@storybook/react";
+import { configure, addParameters, addDecorator } from "@storybook/react";
+import { setDefaults } from "@storybook/addon-info";
+import { withInfo } from "@storybook/addon-info";
+import { withKnobs } from "@storybook/addon-knobs";
+
+// -----------------------------------------------------------------------------------------
+// #region Constants
+// -----------------------------------------------------------------------------------------
 
 const req = require.context("../src", true, /\.stories\.tsx$/);
 
+// #endregion Constants
+
+// -----------------------------------------------------------------------------------------
+// #region Functions
+// -----------------------------------------------------------------------------------------
+
 function loadStories() {
     req.keys().forEach(req);
 }
 
+// #endregion Functions
+
+// -----------------------------------------------------------------------------------------
+// #region Configuration
+// -----------------------------------------------------------------------------------------
+
+setDefaults({
+    header: true,
+    inline: true,
+    source: true,
+});
+
+addParameters({
+    options: {
+        panelPosition: "right", // 'Bottom' is the other option.
+    },
+});
+
+addDecorator(withInfo);
+addDecorator(withKnobs({ escapeHTML: false }));
+
 configure(loadStories, module);
+
+// #endregion Configuration

.storybook/main.js

@@ -0,0 +1,3 @@
+module.exports = {
+    stories: ["../src/**/*.stories.tsx"],
+};

.storybook/tsconfig.json

@@ -1,23 +1,25 @@
 {
     "compilerOptions": {
-        "baseUrl": "./",
-        "allowSyntheticDefaultImports": true,
-        "module": "es2015",
-        "target": "es5",
-        "lib": ["es6", "dom"],
-        "sourceMap": true,
         "allowJs": false,
+        "allowSyntheticDefaultImports": true,
+        "baseUrl": "./src",
+        "declaration": true,
+        "esModuleInterop": true,
+        "experimentalDecorators": true,
         "jsx": "react",
+        "lib": ["dom", "dom.iterable", "esnext"],
+        "module": "es2015",
         "moduleResolution": "node",
-        "rootDir": "../",
-        "outDir": "dist",
         "noImplicitReturns": true,
         "noImplicitThis": true,
         "noImplicitAny": true,
+        "rootDir": "../src",
+        "outDir": "dist",
+        "sourceMap": true,
         "strictNullChecks": true,
-        "declaration": true
+        "target": "es5"
     },
-    "include": ["src/**/*"],
+    "include": ["src"],
     "exclude": [
         "node_modules",
         "build",

.storybook/webpack.config.js

@@ -11,6 +11,8 @@ module.exports = ({ config }) => {
             },
             {
                 loader: require.resolve("react-docgen-typescript-loader"),
+                // Set shouldExtractLiteralValuesFromEnum = true to view enum values in storybook.
+                options: { shouldExtractLiteralValuesFromEnum: true },
             },
         ],
     });

README.md

@@ -23,6 +23,16 @@ From there you can import the variety of modules.
 import { Card } from "andculturecode-javascript-react-components";
 ```
 
+## Developer Guide
+
+### Active development
+
+```shell
+$: npm run storybook
+```
+
+###
+
 ## Documentation
 
 [Full API documentation](docs/README.md)