react-obl-ui

React components for OpenBrainLab UI

HOW TO PUBLISH TO NPM (IMPORTANT) - READ FIRST

Inside src folder we have a place where our component sourcefiles can live.

Inside src directory, index.js file is the entry point of our module. It should import all your components and exports them again. (Look inside index.js file for the structure). There is SimpleButton React Component.

BEFORE YOU PUBLISH YOU NEED TO RUN SCRIPT: we need a command that converts our sources before they are published to npm. (LOOK INSIDE PACKAGE.JSON)

$ npm run build

It calls babel tells it: "Please convert everything inside src into the output folder dist. Also create sourcemaps (-s) and inline them into the javascript files.

If you execute now npm run build, a dist folder will appear inside your project containing the converted files.

We want to tell npm exactly which files are going to be published, since only the contents of the dist folder are necessary for anyone installing our component(s). On NPM we are publishing only what is inside dist folder and entry point is index.js inside that folder.

NOW YOU CAN RUN

$ npm run publish

HOW TO TEST COMPONENT BEFORE PUBLISHING TO NPM (IMPORTANT READ)

Inside demo/src there is index.html. Inside head tag we need to include font awesome and bulma css. If we do not import these two things it will not work properly and we will not have any style. (THIS SHOULD BE ALWAYS WHEN CCREATING NEW REACT APP. WE NEED THIS TWO THINGS.!!!!!)

<link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
      integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css"
    />

Inside demo/src is App.js file where we import our component we want to publish on npm

import { SimpleButton } from "../../dist";

in order to see output run the command inside demo folder:

$ npm start

it will bundle all the things and you can see in the localhost:1234