FE monorepo

FE monorepo is a component library build to showcase how you can set up a monorepo architecture for your next component library.

This repository is build up by multiple steps translated in the following articles on the iO TechHub which are part of the series How do I build a Component Library?:

How do I set up a monorepo, SemVer strategy and private package registry?

• Yarn Workspaces - used to help with dependency management
• Changeset - used to help with SemVer
• GitHub package registry - used to publish versioned packages to be installed through NPM

How do I pick a front-end framework & showcase it with Storybook?

• Lit Element - used as the front-end framework of choice
• Storybook - used to document components

How do I set up linting, unit, snapshot and visual regression testing?

• ESLint - used as linter for TS and JS files
• Stylelint - used as linter for CSS files
• Prettier - used as formatter for all files
• Import sorts - used to sort and group import statements
• Manypkg - used tokeep dependencies in sync and sorted
• Jest - used as test runner
• Husky - used as pre-commit hook to kick off linting, testing and formatting
• lint-staged - used to only lint staged files
• commitizen - used as way to enforce a commit style
• Storyshots - used for snapshot testing
• Imageshots - used for visual regression testing

How do I setup CI/CD & hosting?

• GitHub actions - used for CI/CD
• Netlify - used to host Storybook build