Switched up project to use CRA for development while still releasing with straight typescript compiler

Author: wintondeshong

.gitignore

@@ -1,119 +1,32 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# Snowpack dependency directory (https://snowpack.dev/)
-web_modules/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-# Optional eslint cache
-.eslintcache
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
 
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
+# testing
+/coverage
 
-# Optional REPL history
-.node_repl_history
+# production
+/build
 
-# Output of 'npm pack'
-*.tgz
+# storybook build
+/storybook-static
 
-# Yarn Integrity file
-.yarn-integrity
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
 
-# dotenv environment variables file
-.env
-.env.test
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-.parcel-cache
-
-# Next.js build output
-.next
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and not Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
-# Stores VSCode versions used for testing VSCode extensions
-.vscode-test
-
-# yarn v2
-
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.pnp.*
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
 
 # storybook
+storybook
 
-storybook
+# output
+dist

.storybook/config.js

@@ -1,31 +1,9 @@
 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";
+import { withInfo } from "@storybook/addon-info";
 import "./storybook.css";
 
-// -----------------------------------------------------------------------------------------
-// #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,
@@ -41,6 +19,5 @@ addParameters({
 addDecorator(withInfo);
 addDecorator(withKnobs({ escapeHTML: false }));
 
-configure(loadStories, module);
-
-// #endregion Configuration
+// automatically import all files ending in *.stories.js
+configure(require.context("../src", true, /\.stories\.tsx$/), module);

.storybook/webpack.config.js

@@ -1,13 +1,11 @@
-module.exports = ({ config }) => {
+const path = require("path");
+
+module.exports = async ({ config, mode }) => {
     config.module.rules.push({
         test: /\.(ts|tsx)$/,
         use: [
             {
                 loader: require.resolve("awesome-typescript-loader"),
-                options: {
-                    presets: [["react-app", { flow: false, typescript: true }]],
-                    configFileName: "./.storybook/tsconfig.json",
-                },
             },
             {
                 loader: require.resolve("react-docgen-typescript-loader"),
@@ -16,6 +14,8 @@ module.exports = ({ config }) => {
             },
         ],
     });
+
     config.resolve.extensions.push(".ts", ".tsx");
+
     return config;
 };

README.md

@@ -2,6 +2,7 @@
 
 [![Build Status](https://travis-ci.org/AndcultureCode/AndcultureCode.JavaScript.React.Components.svg?branch=master)](https://travis-ci.org/AndcultureCode/AndcultureCode.JavaScript.React.Components)
 [![codecov](https://codecov.io/gh/AndcultureCode/AndcultureCode.JavaScript.React.Components/branch/master/graph/badge.svg)](https://codecov.io/gh/AndcultureCode/AndcultureCode.JavaScript.React.Components)
+![Storybook](https://raw.githubusercontent.com/storybookjs/brand/master/badge/badge-storybook.svg)
 
 Commonly used components for react applications