How to use

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

How to launch Storybook

1. Install dependencies

npm install

• If it fails due to a "Could not resolve dependency" error, try with:

npm install --legacy-peer-deps

2. Launch Storybook

npm run storybook

Other commands

• Launch eslint autofix

npm run eslint

• Launch prettier autofix

npm run prettier

Functional description

• 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

Technical Stack

• 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

Technical discusion

• 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.

Atribution

• 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.

Projects using this library

• Escaping Boredom, a blog about Escape Rooms
• Cooking with Amateurs, a cooking recipes Web App