A link to a simple usage example project will be added soon...
- Install dependencies
npm install
- If it fails due to a "Could not resolve dependency" error, try with:
npm install --legacy-peer-deps
- Launch Storybook
npm run storybook
- Launch eslint autofix
npm run eslint
- Launch prettier autofix
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 AmateursApp - Room: Used by the
Scaping BoredomApp
- Recipe: Used by the
-
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.