Added Storybook template (#318)

* Added Storybook template as well

* Update README with info on running Storybook

src/index.ts

@@ -35,6 +35,8 @@ import getInstallArgs from './getInstallArgs';
 import { Input, Select } from 'enquirer';
 import { PackageJson, TsdxOptions } from './types';
 import { createProgressEstimator } from './createProgressEstimator';
+import { templates } from './templates';
+import { composePackageJson } from './templates/utils';
 const pkg = require('../package.json');
 
 const prog = sade('tsdx');
@@ -170,7 +172,12 @@ prog
   .command('create <pkg>')
   .describe('Create a new package with TSDX')
   .example('create mypackage')
-  .option('--template', 'Specify a template. Allowed choices: [basic, react]')
+  .option(
+    '--template',
+    `Specify a template. Allowed choices: [${Object.keys(templates).join(
+      ', '
+    )}]`
+  )
   .example('create --template react mypackage')
   .action(async (pkg: string, opts: any) => {
     console.log(
@@ -220,7 +227,7 @@ prog
 
       const prompt = new Select({
         message: 'Choose a template',
-        choices: ['basic', 'react'],
+        choices: Object.keys(templates),
       });
 
       if (opts.template) {
@@ -276,41 +283,13 @@ prog
         encoding: 'utf-8',
       });
 
+      const templateConfig = templates[template as keyof typeof templates];
+      const generatePackageJson = composePackageJson(templateConfig);
+
       // Install deps
       process.chdir(projectPath);
       const safeName = safePackageName(pkg);
-      const pkgJson = {
-        name: safeName,
-        version: '0.1.0',
-        license: 'MIT',
-        author: author,
-        main: 'dist/index.js',
-        module: `dist/${safeName}.esm.js`,
-        typings: `dist/index.d.ts`,
-        files: ['dist'],
-        scripts: {
-          start: 'tsdx watch',
-          build: 'tsdx build',
-          test:
-            template === 'react'
-              ? 'tsdx test --env=jsdom --passWithNoTests'
-              : 'tsdx test',
-          lint: 'tsdx lint',
-          prepare: 'tsdx build',
-        },
-        peerDependencies: template === 'react' ? { react: '>=16' } : {},
-        husky: {
-          hooks: {
-            'pre-commit': 'tsdx lint',
-          },
-        },
-        prettier: {
-          printWidth: 80,
-          semi: true,
-          singleQuote: true,
-          trailingComma: 'es5',
-        },
-      };
+      const pkgJson = generatePackageJson({ name: safeName, author });
       await fs.outputJSON(path.resolve(projectPath, 'package.json'), pkgJson);
       bootSpinner.succeed(`Created ${chalk.bold.green(pkg)}`);
       await Messages.start(pkg);
@@ -320,19 +299,10 @@ prog
       process.exit(1);
     }
 
-    let deps = ['@types/jest', 'husky', 'tsdx', 'tslib', 'typescript'].sort();
-
-    if (template === 'react') {
-      deps = [
-        ...deps,
-        '@types/react',
-        '@types/react-dom',
-        'react',
-        'react-dom',
-      ].sort();
-    }
+    const templateConfig = templates[template as keyof typeof templates];
+    const { dependencies: deps } = templateConfig;
 
-    const installSpinner = ora(Messages.installing(deps)).start();
+    const installSpinner = ora(Messages.installing(deps.sort())).start();
     try {
       const cmd = await getInstallCmd();
       await execa(cmd, getInstallArgs(cmd, deps));

src/templates/basic.ts

@@ -0,0 +1,37 @@
+import { Template } from './template';
+
+const basicTemplate: Template = {
+  name: 'basic',
+  dependencies: ['@types/jest', 'husky', 'tsdx', 'tslib', 'typescript'],
+  packageJson: {
+    // name: safeName,
+    version: '0.1.0',
+    license: 'MIT',
+    // author: author,
+    main: 'dist/index.js',
+    // module: `dist/${safeName}.esm.js`,
+    typings: `dist/index.d.ts`,
+    files: ['dist'],
+    scripts: {
+      start: 'tsdx watch',
+      build: 'tsdx build',
+      test: 'tsdx test',
+      lint: 'tsdx lint',
+      prepare: 'tsdx build',
+    },
+    peerDependencies: {},
+    husky: {
+      hooks: {
+        'pre-commit': 'tsdx lint',
+      },
+    },
+    prettier: {
+      printWidth: 80,
+      semi: true,
+      singleQuote: true,
+      trailingComma: 'es5',
+    },
+  },
+};
+
+export default basicTemplate;

src/templates/index.ts

@@ -0,0 +1,9 @@
+import reactTemplate from './react';
+import basicTemplate from './basic';
+import storybookTemplate from './react-with-storybook';
+
+export const templates = {
+  basic: basicTemplate,
+  react: reactTemplate,
+  'react-with-storybook': storybookTemplate,
+};

src/templates/react-with-storybook.ts

@@ -0,0 +1,27 @@
+import { Template } from './template';
+import reactTemplate from './react';
+import { PackageJson } from 'type-fest';
+
+const storybookTemplate: Template = {
+  dependencies: [
+    ...reactTemplate.dependencies,
+    '@babel/core',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addons',
+    '@storybook/react',
+    'babel-loader',
+    'ts-loader',
+  ],
+  name: 'react-with-storybook',
+  packageJson: {
+    ...reactTemplate.packageJson,
+    scripts: {
+      ...reactTemplate.packageJson.scripts,
+      storybook: 'start-storybook -p 6006',
+      'build-storybook': 'build-storybook',
+    } as PackageJson['scripts'],
+  },
+};
+
+export default storybookTemplate;

src/templates/react.ts

@@ -0,0 +1,27 @@
+import { Template } from './template';
+
+import basicTemplate from './basic';
+import { PackageJson } from 'type-fest';
+
+const reactTemplate: Template = {
+  name: 'react',
+  dependencies: [
+    ...basicTemplate.dependencies,
+    '@types/react',
+    '@types/react-dom',
+    'react',
+    'react-dom',
+  ],
+  packageJson: {
+    ...basicTemplate.packageJson,
+    peerDependencies: {
+      react: '>=16',
+    },
+    scripts: {
+      ...basicTemplate.packageJson.scripts,
+      test: 'tsdx test --env=jsdom --passWithNoTests',
+    } as PackageJson['scripts'],
+  },
+};
+
+export default reactTemplate;

src/templates/template.d.ts

@@ -0,0 +1,7 @@
+import { PackageJson } from 'type-fest';
+
+interface Template {
+  dependencies: string[];
+  name: string;
+  packageJson: PackageJson;
+}

src/templates/utils/index.ts

@@ -0,0 +1,17 @@
+import { Template } from '../template';
+
+interface ProjectArgs {
+  name: string;
+  author: string;
+}
+export const composePackageJson = (template: Template) => ({
+  name,
+  author,
+}: ProjectArgs) => {
+  return {
+    ...template.packageJson,
+    name,
+    author,
+    module: `dist/${name}.esm.js`,
+  };
+};

templates/react-with-storybook/.storybook/addons.ts

@@ -0,0 +1,2 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';

templates/react-with-storybook/.storybook/config.ts

@@ -0,0 +1,4 @@
+import { configure } from '@storybook/react';
+
+// automatically import all files ending in *.stories.js
+configure(require.context('../stories', true, /\.stories\.(js|ts)x?$/), module);

templates/react-with-storybook/.storybook/webpack.config.js

@@ -0,0 +1,17 @@
+const path = require('path')
+module.exports = ({ config }) => {
+  config.module.rules.push({
+    test: /\.tsx?$/,
+    use: [
+      {
+        loader: require.resolve('ts-loader'),
+        options: {
+          reportFiles: ['stories/**/*.{ts|tsx}']
+        }
+      }
+    ]
+  })
+  config.resolve.extensions.push('.ts', '.tsx')
+  config.resolve.alias = Object.assign(config.resolve.alias, { '@': path.resolve(__dirname, '..') })
+  return config
+}

templates/react-with-storybook/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) <year> <author>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.