Update readme and other docstrings

Author: codytodonnell

README.md

@@ -8,17 +8,39 @@
 
 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.
 
-## Local development
+## Docs and Examples
 
-### Getting started
+Check out the [mp-react-components storybook](https://materialsproject.github.io/mp-react-components/) to see examples and documentation for each component in this library.
 
-First, clone the mp-react-components repo: `git clone [email protected]:materialsproject/mp-react-components.git`
+## Getting Started with Local Development
 
-From inside the top directory, install the dependencies using: `npm install`
+Clone the mp-react-components repo:
 
-Deploy the app using: `npm start`
+```
+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
+```
+
+## Installing as a Node Module
+
+Install the latest snapshot of mp-react-components:
 
-### Developing components
+```
+npm install @materialsproject/mp-react-components@next
+```
+
+## Developing Components
 
 All the components are located in `src/components`
 
@@ -32,13 +54,56 @@ The file structure for each component should look like the following:
   - `MyComponent.css`
   - `MyComponent.test.tsx`
 
-### Exporting components
+### Testing Components During Development
+
+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.
+
+### Classes and Styles
+
+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.
+
+### Test ID's
+
+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 id's. These id's make it easier to select the components and their testable parts within the unit tests.
+
+### Component Utils
+
+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`.
 
-To add a component to the list of components exported by this library, import and add the component to `src/index.ts`
+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`.
 
-### Developing with dash-mp-components
+### Exporting Components
 
-If you have a local version of `dash-mp-components` and `mp-react-components`, you'll probably
+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`.
+
+## Deploying to npm
+
+### Automated Pre-releases
+
+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
+```
+
+### Manual Release
+
+Use `npm build-publish` to build the project.
+Use `npm publish` to push to npm
+
+### Automated Minor Release (un-tested)
+
+Run `npm version minor -m "Upgrade to %s"` to add a tag. Once the tag is pushed, an action will
+build the components and push the package to build to npm
+
+## Developing with dash-mp-components
+
+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`
 
@@ -47,26 +112,26 @@ Running those commands will tell `NPM` to use your local version of `mp-react-co
  npm link <REACT_MP_HOME>
 ```
 
-## Deploy to npm
+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:
 
-### Manually
+```
+npm install @materialsproject/mp-react-components@next
+npm run build
+```
 
-Use `npm build-publish` to build the project.
-Use `npm publish` to push to npm
+## Storybook
 
-#### Pre-releases
+This library uses [Storybook](https://storybook.js.org/) 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`.
 
-Every push 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
+### Storybook Configuration
 
-`npm install @materialsproject/mp-react-components@next`
+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.
 
-### Automatically(TODO)
+### Story Order and Styles
 
-Run `npm version minor -m "Upgrade to %s"` to add a tag. Once the tag is pushed, an action will
-build the components and push the package to build to npm
+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.
 
-## Deploy storybook to github pages
+### Deploy storybook to github pages
 
 This will **build** and **deploy** the storybook.
 Stories are defined in `./src/stories`

package.json

@@ -18,9 +18,6 @@
     "build-prod": "parcel build src/index.html",
     "build-publish": "rollup -c",
     "test": "jest --env=jsdom",
-    "docz:dev": "docz dev",
-    "docz:build": "docz build",
-    "docz:serve": "docz build && docz serve",
     "lint:yaml": "yamllint ./.github/workflows/*.yml",
     "postversion": "git push && git push --tags",
     "storybook": "start-storybook -p 6006",

src/components/data-display/Modal/ModalContextProvider.tsx

@@ -26,12 +26,6 @@ export interface ModalContextProviderProps {
    * state using the ModalContext or a dash callback on the active prop.
    */
   forceAction?: boolean;
-
-  /**
-   * Set to true if the inner modal is a Drawer component instead of a Modal.
-   * This will prevent the html container from being clipped as is done when a modal is activated.
-   */
-  isDrawer?: boolean;
 }
 
 const ModalContext = React.createContext<ModalState | undefined>(undefined);
@@ -51,9 +45,9 @@ export const ModalContextProvider: React.FC<ModalContextProviderProps> = (props)
    * Prevent document scrolling when active
    */
   useEffect(() => {
-    if (!props.isDrawer && active) {
+    if (active) {
       document.documentElement.classList.add('is-clipped');
-    } else if (!props.isDrawer) {
+    } else {
       document.documentElement.classList.remove('is-clipped');
     }
     props.setProps!({ active: active });

src/components/data-display/SearchUI/SearchUIDataCards/SearchUIDataCards.tsx

@@ -28,8 +28,8 @@ export const SearchUIDataCards: React.FC = () => {
   return (
     <div data-testid="mpc-search-ui-data-cards" className="mpc-search-ui-data-cards">
       <CustomPaginator />
-      {/* <div className="mpc-search-ui-data-cards-container">
-        {state.results.map((d, i) => (
+      <div className="mpc-search-ui-data-cards-container">
+        {state.results!.map((d, i) => (
           <DataCard
             key={`mpc-data-card-${i}`}
             className="box mpc-search-ui-data-card"
@@ -46,7 +46,7 @@ export const SearchUIDataCards: React.FC = () => {
             }
           />
         ))}
-      </div> */}
+      </div>
       <CustomPaginator />
     </div>
   );

src/components/data-display/SearchUI/types.tsx

@@ -1,21 +1,7 @@
 import { DecodedValueMap, QueryParamConfigMap } from 'use-query-params';
-import { MaterialsInputType } from '../../data-entry/MaterialsInput';
-import { InputHelpItem } from '../../data-entry/MaterialsInput/InputHelp/InputHelp';
-import { PeriodicTableMode } from '../../data-entry/MaterialsInput/MaterialsInput';
-import { MaterialsInputTypesMap } from '../../data-entry/MaterialsInput/utils';
-import { SearchUIDataCards } from './SearchUIDataCards';
 import { SearchUIDataTable } from './SearchUIDataTable';
 import { SearchUISynthesisRecipeCards } from './SearchUISynthesisRecipeCards';
 
-export enum FilterId {
-  ELEMENTS = 'elements',
-  VOLUME = 'volume',
-  DENSITY = 'density',
-  MP_ID = 'task_ids',
-  FORMULA = 'formula',
-  NELEMENTS = 'nelements'
-}
-
 /**
  * See storybook for documentation
  */
@@ -388,13 +374,18 @@ export interface SearchUIContainerProps {
    */
   disableRichColumnHeaders?: boolean;
   /**
-   *
+   * This prop is set automatically.
+   * Array of results currently rendered in the UI.
    */
   results?: any[];
   /**
    * Endpoint to use for fallback free text material searches against the Matscholar API.
    */
   matscholarEndpoint?: string;
+  /**
+   * EXPERIMENTAL
+   */
+  cardOptions?: any;
 }
 
 export interface SearchState extends SearchUIContainerProps {