This repo contains a set of components for displaying and interacting with material science data. These components provide the building blocks for the interactive components of the Materials Project website.
Check out the mp-react-components storybook to see examples and documentation for each component in this library.
Clone the mp-react-components repo:
git clone [email protected]:materialsproject/mp-react-components.git
From inside the top directory, install the dependencies:
npm install
Deploy the app to https://localhost:3000:
npm start
Install the latest snapshot of mp-react-components:
npm install @materialsproject/mp-react-components@next
All the components are located in src/components
Create a new folder for each new component and name the folder after the component.
The file structure for each component should look like the following:
MyComponent/MyComponent.tsxindex.tsxMyComponent.cssMyComponent.test.tsx
This repo is configured to use TypeScript and JSX. Any file that uses TypeScript and JSX syntax (i.e. component files and any other files that include components) should use the .tsx extension.
To see how your component looks and behaves while you are developing it, you have a few different options. When you start the app locally, the main entry point that determines what is rendered is in src/app.tsx. Because this is a component library and not a fully integrated app, the app.tsx file exists solely as a testing sandbox. A simple routing structure has been setup to test out different kinds of pages in a react-only environment. These test pages live in the src/pages directory. When testing a new component, you can use it inside of one of the existing pages or you can create a new page. There is also the Sandbox page within the pages directory that is intended to be cleared out any time and used to test new discrete components.
If you prefer, you can also test your component inside of storybook. To do this, create a new story within the src/stories directory. See the Storybook section below for more info about Storybook.
By convention, almost all components are given a top-level class which is the name of the component converted into kabob-case and prefixed with "mpc-". For example, the DataBlock component has the class mpc-data-block. The className prop for any component should extend the default class rather than replace it.
The components in this library are intended to be used with the Bulma CSS Framework. For that reason, many bulma classes and component patterns are utilized within the components.
Components should come with styles that are important for their usage. To include styles for a component, add a CSS file named MyComponent.css in the component's folder and import that CSS file into the main component file.
import './MyComponent.css';
Remember that these components are intended to be used with the Bulma CSS framework, so the styles in the custom stylesheet can (and often do) take this into account.
Also by convention, almost all components are given a test ID via the attribute data-testid. In some cases, a component may have multiple elements with test IDs. These IDs make it easier to select the components and their testable parts within the unit tests.
For more complicated components like MaterialsInput and SearchUI, some of the re-usable or complex functions are housed in a utils.tsx file within the component folder. For example, all of the validation methods for the MaterialsInput can be found in MaterialsInput/utils.tsx.
Other utils that are used across multiple components can be found in the higher-level src/utils directory. For example, the functions for initializing table columns can be found in src/utils/table.tsx.
Many components will implement their own TypeScript types or interfaces to reduce errors and improve code readability. In some cases, these types are defined directly in the component file. In cases where there are many types for a set of components, there may be a types.tsx file inside the component folder (e.g. SearchUI/types.tsx).
Most components also have their own props interface defined. Note that this interface should usually be uniquely named and exported so that it can be used inside the component's storybook file.
Any component that you want to be usable when this library is imported as a third-party node module must be added to the exports list in src/index.ts.
This repo uses jest and react testing library to write and run unit tests. Any file in the src directory with the .test.tsx or .spec.tsx extension will be detected as a runnable test.
Run all the unit tests:
npm run test
Run a specific test suite:
npm run test MaterialsInput
The jest configuration can be found in jest.config.js
To test the fetching behavior of the SearchUI components, there is a mocks directory which sets up a Mock Service Worker using the msw package. See more here.
Every push to the main branch triggers a build. If the build is succesfull, a snapshot is pushed
to npm, as a tagged package. To use the latest snapshot, type the following command
npm install @materialsproject/mp-react-components@next
Use npm build-publish to build the project.
Use npm publish to push to npm
Run npm version minor -m "Upgrade to %s" to add a tag. Once the tag is pushed, an action willg
build the components and push the package to build to npm
If you have a local version of dash-mp-components and mp-react-components, you may
want to use the local version of mp-react-components for a better development workflow.
Running those commands will tell NPM to use your local version of mp-react-components
cd <DASH_MP_HOME>
npm link <REACT_MP_HOME>
However, you can also push to the main branch to publish a new snapshot on npm whenever you are ready to start porting and testing your changes in dash-mp-components. Once the new snapshot is published, you will simply need to re-run these commands from your local dash-mp-components repo:
npm install @materialsproject/mp-react-components@next
npm run build
This library uses Storybook to document the components and their usage. All of the exported components have a set of "stories" that showcase different examples of how to use the component and its props. The stories can be found inside of src/stories.
Storybook is configured using webpack and various plugins offered by Storybook. The config can be found in .storybook/main.js. Note that in general, all of the @storybook/ dependencies should be using the same version as each other. This can occasionally cause issues with the storybook build.
The order and hierarchy of the stories are set in .storybook/preview.js. This file is also where styles are imported into the storybook. Any styles that the storybook needs that aren't already imported into the components themselves should be included here.
Run the story book locally:
npm run storybook
You should be able to access the storybook at http://localhost:6006
This will build and deploy the storybook.
Stories are defined in ./src/stories
npm deploy-storybook
If successful, the changes will be live at https://materialsproject.github.io/mp-react-components/
This repo uses Parcel to build and run the app locally and Rollup to publish the app. Parcel does not have a config file, but it does use Babel to transpile the code for this repo. The babel configuration exists in .babelrc and babel.config.js. The Rollup configuration is defined in rollup.config.js. In the future, both of these build tools may be removed in favor of a single unified tool (potentially webpack as it is used in dash-mp-components).