react-typescript-component-starter-kit

A React component starter kit written in Typescript using the power of Babel 7 and Webpack 4.

There are already so many starter kits. Why this?

Yes, I am already aware of those but setting up Babel 7 with storybook and typescript was not that straightforward 😥. This repo is mainly for that. Other things are just extras which I use personally.

Features

• Typescript
• emotion
• Babel 7
• Webpack 4
• Storybook (all the necessary addons)
• docz for documentation
• Testing suite (jest, enzyme, sinon, codecov)
• Travis
• Prettier on staged files
• Automatic now.sh PR deployment.
• rollup for smaller builds (cjs, umd and es builds).

Scripts

Few scripts are already written to make your life easier.

• yarn storybook: Run storybook in dev mode.
• yarn build-storybook: Build storybook.
• yarn build: Build your components and put them in dist directory. Creates the umd, es and cjs builds.
• yarn build:watch: Build your files while you make code changes.
• yarn test:cover: Run tests and report coverage to codecov.
• yarn test: Run tests.
• yarn dev:docz: Run docz in dev mode.
• yarn build:docz: Build docz
• yarn test:watch: Run tests while you make changes.
• yarn format: Run prettier on all supported files.
• yarn deploy: Deploy storybook on now.sh

Why use rollup with typescript?

Typescript can automatically convert the code to ES5 but I was more concerned about the file size so I am using typescript to convert .tsx to .js is ES6 and then rollup converts those files into cjs, umd and es builds.

Why both docz and storybook?

Storybook has a lot of addons that help while development whereas docz seems great for detailed documentation and a pretty looking website. Also docz is slow if you are rendering PropsTable as it has to parse through the whole tree on every change.

What if I don't want to disturb the old .babelrc (having babel 6) and run storybook with Babel 7.

Do the following in .storybook/webpack.config.js.

module.exports = (baseConfig, env, config) => {
  //babel-loader@8 installed and @babel/core@7
  defaultConfig.module.rules[0].use[0].loader = require.resolve("babel-loader");

  defaultConfig.module.rules[0].use[0].options.presets = [
    require.resolve("@babel/preset-react"),
    require.resolve("@babel/preset-env")
  ];

  // any plugin you want to add
  defaultConfig.module.rules[0].use[0].options.plugins = [
    require.resolve("@babel/plugin-proposal-object-rest-spread")
  ];

  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      {
        loader: require.resolve("babel-loader"),
        options: {
          babelrc: false,
          presets: [
            require.resolve("@babel/preset-react"),
            require.resolve("@babel/preset-env")
          ],
          plugins: [
            require.resolve("@babel/plugin-proposal-object-rest-spread")
          ]
        }
      },
      {
        loader: require.resolve("awesome-typescript-loader")
      },
      {
        loader: require.resolve("@storybook/addon-storysource/loader"),
        options: {
          parser: "typescript"
        }
      }
    ]
  });

  config.resolve.extensions.push(".ts", ".tsx", ".json");
  return config;
};

Note: All the tools used in this repo are free for open source. Services like now, codecov and travis are not free for closed source projects.

License

MIT