Generic ProgressBar

index.module.scss

@import "../styles/variables";

// NOTE: Not a final implementation.
.progressBar {
  flex: 1;

  .progressBarItem {
    flex: auto;
  }
}

ProgressBar.jsx

import React, { FC } from 'react';
import cx from 'classnames';

import styles from './index.module.scss';

import PropTypes from 'prop-types';

// XXX: These are 'JSDocs', and allow you to define types without using TypeScript.

/**
 * The Progress bar `Item` properties.
 * @typedef {Object} ProgressBarItemProps
 * @property {string} title Title of the progress bar.
 * @property {boolean} isActive Determines if the current bar is active.
 * @property {boolean} [isError=false] Specifies an error state.
 * @property {boolean} [isWarning=false] Specifies a warning / incomplete state.
 *
 * @typedef {FC<ProgressBarItemProps>} ProgressBarItem Progress bar component.
 */

// XXX: Now we can use the `ProgressBarItem` type!

/**
 * @type {ProgressBarItem}
 */
const ProgressBarItem = ({
  className,
  style,

  title,
  isActive,
  isError=false,
  isWarning=false,
  ...props
}) => {

  return (
    <div
      className={cx(className, "col", styles.progressBarItem)}
      style={{ flex: 1, ...style }}
      {...props}
    >
      {title}
    </div>
  )
}

/**
 * @param {object} props The props for ProgressBar.
 * @param {Array<ProgressBarItem>} props.children List of elements in progress bar.
 */
const ProgressBar = ({
  className,
  /** React "children" of type `ProgressBarItem` */
  children,
  ...props
}) => {

  return (
    <div
      className={cx("row", styles.progressBar)}
    >
      {children}
    </div>
  )
};

ProgressBar.propTypes = {
  items: PropTypes.arrayOf(PropTypes.any).isRequired,
};

ProgressBar.Item = ProgressBarItem;

export { ProgressBar };