How to use

A link to a simple usage example project will be added soon...

How to launch Storybook

npm install

npm install --legacy-peer-deps

npm run storybook

npm run eslint

npm run prettier

When Storybook is launched, a catalogue will appear with all the App components. A component will be rendered with its default material-ui theme, if our custom theme isn't explicitly defined on its story (templates themes are defined to help visualization).
Some components are displayed in [Name] folders. That means those components are specifically used only by a concrete App in the Chemistry-UI little ecosystem. Right now, we have:
- Recipe: Used by the Cooking with Amateurs App
- Room: Used by the Scaping Boredom App

React
Babel (compilation)
Webpack (bundling)
Prettier, ESLint (code style tools, based on airbnb conventions), Husky (pre-commit automated formatting tool)
Material-ui (this custom design system is based on this one)
Storybook (tool that helps implementing atomic design)
Netlify: deploying free site for this App Demo

A pre-commit has been added to this repository to help maintain a coherent code style, even if new developers were added to this project in the future.
Material-ui components have been "wrapped" with custom components to allow changing to another design system with ease in a potential future.
Literals are not hardcoded but instead passed down to components by props in order to implement a multilanguage support system in the future.
Two color themes have been defined in order to allow the different colored buttons to coexist on the same design system.

Logo created by Marta Ximenis
Favicon formatted from logo with favicon-generator
Editor's choice banner from original image, which is under Pixabay License, free for commercial use.
Fake item image from pixabay.