To help you get started, we've collected the most common ways that clever-components is being used within popular public projects.

Clever / components / src / TabbedTable / TabbedTable.jsx View on Github

import "./TabbedTable.less";


export default class TabbedTable extends React.PureComponent {
  static cssClass = {
    TAB_BAR: "TabbedTable--TabBar",
    TITLE: "TabbedTable--Title",
    TABS: "TabbedTable--Tabs",
    TAB_NAME: "TabbedTable--TabName",
    SELECTED_TAB_NAME: "TabbedTable--SelectedTabName",
  };

  static propTypes = {
    children: PropTypes.arrayOf(PropTypes.oneOfType([
      MorePropTypes.instanceOfComponent(Tab),
      PropTypes.oneOf([null, false]), // allow for conditionally including tabs
    ])).isRequired,
    title: PropTypes.string,
  };

  constructor(props) {
    super(props);

    this.state = {
      selectedTabIndex: 0,
    };
  }

  _onSelect(e, tabIndex) {
    e.preventDefault();
    this.setState({selectedTabIndex: tabIndex});

View more ways to use clever-components

Clever Design System

Check out documentation and live examples for Dewey, as well as our getting starting guide.

Development

Adding a new component

The following command will create a new component shell in src/MyNewComponent/ along with a starter test file and demo boilerplate:

./bin/new_component.sh MyNewComponent

You can also create additional sub-components in any existing directory by running:

./bin/new_sub_component.sh MyNewSubComponent ./src/MyNewComponent

You can then modify the component and demo code as needed. Your new component can be viewed at https://localhost:5010/#/components/my-new-component while the demo server is running.

Component List

After creating a new component, make sure to add it to the Component List in ComponentsView.jsx. To do so:

• Add an entry in ComponentsView.componentsToDisplay using this template:

  {
    componentLink: "",
    componentImg: ".png",
    componentName: "",
    componentImgAlt: "A  component",
  },
  

• Add a screenshot of the component in docs/assets/img with the format .png

Adding new SVGs

We use SVGs as JSX components for Icons, following this process:

1. Optimize the svg at svgomg
2. Make it React compatible with double quotes option at svg2jsx
3. Prefix DOM Ids and classnames with component name if necessary
4. Add it to the code:
   • Create a new file in src/Icon/icons/<>.jsx
   • Add to src/Icon/icons/index.jsx and src/Icon/Icon.jsx

Running the demo server locally

Start up the demo server by running

make dev-server

Testing locally on a repo that uses these components

For Clever engs, refer to this doc on how to test your changes in the context of other apps.

In short, if you want to test changes you've made to this repo in the context of another repo that uses clever-components, run the components repo's make build command and use the freshly generated dist directory in replacement of the clever-components/dist directory on your other project's repository.