React components library, web application and widgets library for the mousephenotype.org website.
-
Fork this repository to your personal GitHub account
-
Clone your fork:
git clone https://github.com/<YOUR_USERNAME>/impc-mousephenotype-web.git
-
Go to the project directory:
cd impc-mousephenotype-web
-
Add the original repo as a remote:
git remote add upstream https://github.com/mpi2/impc-mousephenotype-web.git
-
Install node and npm. If you already have node/npm installed, update it to the latest version.
ℹ️ We recommend you to use nvm to manage your node/npm installation
-
Go to the project directory
cd impc-mousephenotype-org
-
Install yarn:
npm install -g yarn
⚠️ This project runs runs using yarn classic. We tested out Yarn 2 (Beta 1) but there is still some conflicts and issues with other project dependencies -
Run yarn install:
yarn
-
Open your project on VS Code:
code .
-
[OPTIONAL] Install VS Code recommended extensions
-
Running storybook:
yarn storybook
-
Edit/add your components at
packages/components/src
-
Commit your changes
git add . git commit -m "Really important commit message"
-
Pull the upstream repository:
git pull upstream main
-
Push to your fork:
git push origin main
This project is configured using yarn workspaces and lerna to support the monorepo pattern, making it easier to produce both a full Single Page Application and a set of self contained widgets that can be used independently in any website (e.g. the CMS pages use to present static content at mousephenotype.org). The source code is distributed in the following structure:
packages
├── components
│ ├── package.json
│ ├── public
│ ├── src
│ ├── tsconfig.esm.json
│ └── tsconfig.json
├── web-app
│ ├── README.md
│ ├── package.json
│ ├── public
│ ├── src
│ └── tsconfig.json
└── widgets
└── late-adult-heatmap
├── package.json
├── src
└── tsconfig.json
The components package is where most of our could should reside and it's a dependency of the web-app package and the different widgets package.
The components package is our component library, is supposed to be a presentation layer that knows the minimum about our domain and data sources as possible. A component shouldn't get data directly from any of our data sources, that responsibility should be delegated to the components wrapping our singular rendering unit, like the widget components in the widgets packages or the pages components in our web-app package.
The components library is powered by Storybook.
Just remember, keep your components simple, as simple as possible.