Bokabord-web-components NPM

react-web-components

React web components to be used in ReactJS projects.

1. Installation

Make sure that your project folders are organized like below :

your_workspace_folder
└─── dev-tools
└─── react-web-components
└─── bokabord-website
...

Important Note : There's no need to run any commands or configurations for the Docker setup except the folder structure above. The instructions below are aimed to get the package running on your local computer itself, instead of on Docker.

Under react-web-components folder, run the following commands :

cd react-web-components
npm link

To enable hot reloading for react-web-components, run the following command :

npm run compile

Navigate to the bokabord-website folder on your CLI and run the following command :

cd bokabord-website
npm link react-web-components

2. Example of usage

2.1 Include CSS

In any project you want to use the components you must include the CSS. Preferably in src/index.js file next to the index.css import :

import "./index.css";
import "react-web-components/dist/index.css";

2.2 Root component

The project's root component should be wrapped with the Theme.Container component. The primaryColor prop needs to be defined and will set the color of e.g. the Button component.

Also a palette of colors can be defined in themeColors which will be helpful when reusing colors within the project. E.g. <Text colors="grey">Hello</Text> will set the font color to #9b9b9b.

<Theme.Container
  primaryColor="orange"
  themeColors={{ orange: "#eb741a", grey: "#9b9b9b" }}
>
  /* Your main component */
</Theme.Container>

Furthermore, if you wrap a component with Theme.withTheme(Component) you will get the following props available: isMobile, screenWidth, primaryColor and themeColors.

2.3 Use components

Then you can start using the components by importing them from the lib :

import React, { Component } from "react";
import { Button } from "react-web-components";

class Example extends Component {
  render() {
    return <Button />;
  }
}

3. Coding conventions

We use prettier as code formatter. In addition to that we also have a few rules that are best explained with example code.

3.1 Example component

// Order imports alphabetically based on the path. Also order all imports within each import.
import React from "react";
import { Button, Text } from "react-web-components";
import PageContainer from "../PageContainer/PageContainer";
import ScrollableContent from "../ScrollableContent/ScrollableContent";
import styles from "./exampleComponent.module.css";

export default class ExampleComponent extends React.Component {
  // State should always be on top. Only use constructor if needed, i.e. logic needs to be applied.
  state = {
    items: [],
  };

  // Secondly comes public methods which can be called imperatively from other components.
  reload = () => {
    this._fetchItems();
  };

  // Thirdly comes class methods such as componentDidMount, componentWillUnmount etc.
  componentDidMount() {
    this._fetchItems();
  }

  // Fourthly comes private methods used within the component (should always start with underscore "_").
  _fetchItems = () => { ... };

  _getSomething = ({ index, item, onClick }) => {
    const { items, loading, onReload } = this.props;
    // All variables, parameters etc should be sorted in alphabetic order with the exception that methods (e.g. onClick, onSelect) should be sorted last in the list.
  };

  // Fiftly comes click handlers which should always have the prefix "_handle".
  _handleClick = () => { ... };

  // Sixthly comes helper render methods named "_renderXXX".
  _renderFooter = () => {
    return <div>This is a footer</div>;
  };

  // Finally the render method comes (always at bottom of the component).
  render() {
    const { items } = this.props; // Always extract "this.props" in beginning of each method if applicable.
    const { loading } = this.state; // Then extract the state variables.
    ...
    return (
      <div>
        <Text size="large" margin={8}>Hello!</Text>
        {this._renderFooter()}
      </div>
    );
  }
}

3.2 Files structure

Each project should have the following file structure :

src
└─── components
  └─── shared
└─── constants
└─── images
└─── store
└─── util

The components/shared folder should contain components used on multiple places within the project.

3.3 CSS files

A component's CSS file should have the same name as the component but in camelCase. For example if the component is named ExampleComponent the CSS file should be named exampleComponent.module.css.

4. Projects using lib

The following projects are using the react-web-components lib and should apply to the coding conventions.

bokabord-web-components v1.0.1