IMPC - Mouse Phenotype Web

React components library, web application and widgets library for the mousephenotype.org website.

How to contribute

Fork and clone this repository

1. Fork this repository to your personal GitHub account

2. Clone your fork:

   git clone https://github.com/<YOUR_USERNAME>/impc-mousephenotype-web.git
   

3. Go to the project directory:

   cd impc-mousephenotype-web
   

4. Add the original repo as a remote:

   git remote add upstream https://github.com/mpi2/impc-mousephenotype-web.git
   

Set up your development environment

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

2. Go to the project directory

   cd impc-mousephenotype-org
   

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

4. Run yarn install:

    yarn
   

5. Open your project on VS Code:

   code .
   

6. [OPTIONAL] Install VS Code recommended extensions

   

7. Running storybook:

   yarn storybook
   

8. Edit/add your components at packages/components/src

9. Commit your changes

   git add .
   git commit -m "Really important commit message"
   

10. Pull the upstream repository:

    git pull upstream main
    

11. Push to your fork:

    git push origin main
    

12. Open a pull request and assign another member of the team to review your work

Project architecture

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.

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

Adding new components