ASM - Atomic Sass Modules is a component library developed using React, CSS Modules and following Atomic Design principles.
The architecture follows the atomic design guidelines in order to develop reusable components that are easy to compose together to form more complex ones.
The idea is to have small building blocks that are identified as atoms that can then be composed to form molecules, organisms, templates and pages.
The application was developed initially following the component driven development paradigm using Storybook as the component explorer of choice All components in the components directory have a matching stories file with at least one story.
After cloning the repository locally and installing all dependencies it is highly recommended that you run the component explorer Storybook in order to inspect all the components that make up the application. The command to run storybook is yarn storybook. This will run storybook on port 9001. Storybook documentation can be found on their official site.
In the project directory, you can run:
Before anything else run yarn to install all dependencies otherwise the project won't build
Launches the app in dev mode using webpack dev server and hot module replacement enabled
Builds the app for production to the dist folder
Builds the app in development mode generating source maps.
Sets the environment to dev
Sets the environment to production
Runs typescipt tsm type checking command
Removes the node_modules, dist and auto generated type definition files
Runs the prettier formatter and fix formatting violations automatically
Runs tslint
Runs stylelint
Runs the stylelint formatter and fix css/scss style formatting violations automatically
Builds storybook interactive component explorer
Builds a static files for the storybook interactive component explorer
Launches the test runner in the interactive watch mode.