ritz078 / react-typescript-component-starter-kit

🎉 A started kit to write your React Components using Typescript, emotion, storybook, jest, docz and enzyme

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

react-typescript-component-starter-kit's Issues

todo: enable Travis CI

Currently there is a Travis Ci config file but Travis CI seems to be not enabled for this repository.

Add babel-plugin-emotion for all enviornments

Hey 👋

I've successfully added babel-plugin-emotion (while using this fantastic boilerplate) to prod and dev environments.

It's a super helpful plugin that adds the shorthand syntax (styled('div') vs styled.div) among other goodies.

I've tried adding it to the test environment (because Jest complains when it's ran about the shorthand syntax), but have been unsuccessful. I'm curious if you have added it, and/or would be adding it to this great boilerplate?

Thanks!