karkranikhil / umqombothi-component-library

PMB Plus - React Component Library 🍶

Umqombothi 🍶

This is the React component Library based off the Design System for PMB Plus.

The design system can be viewed on Figma

🎉 Features

• Range of components from buttons, navs, inputs etc
• Uses TailwindCSS
• Storybook app to view all components.
• Ability to interact with components on Bit.

📦 Installation

You can easily install the library via NPM or Yarn:

npm

$ npm install umqombothi-component-library

yarn

$ yarn add umqombothi-component-library

🌪️ Usage

You can import the components like so:

import React from 'react'
import {Input} from 'umqombothi-component-library'
import ReactDOM from 'react-dom';

function App() {
  return (
    <Input
    value={this.state.inputValue}
    placeholder="Type in me"
    />
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));

🛰️SSR Usage

To render it with NextJS there are additional steps. Check out this Codesandbox for a working example.

Steps to follow once you have your NextJS app setup:

This is just to make sure you have the correct setup in your next.config.js and modules installed. 😀

I. Install modules

$ yarn add umqombohti-component-library next-transpile-modules @zeit/next-css @svgr/webpack

II. Get your next.config.js setup correctly.

The reason why you installed : next-transpile-modules & @zeit/next-cs was to tell Next that you need these files to be transpiled and included with your NextJS bundle for when you deploy your app.

//next.config.js

const withTM = require("next-transpile-modules");
const withCSS = require("@zeit/next-css");

module.exports = withCSS(
  withTM({
    transpileModules: [
      "umqombothi-component-library"
    ],
    webpack(config) {
      config.module.rules.push({
        test: /\.svg$/,
        use: ["@svgr/webpack"]
      });
      return config;
    }
  })
);

Because the lib includes svgs in it, we need to a loader so Next can read them. (Wow we do a lot for this Next thingy 🤨)

Styling

So the lib uses TailwindCSS for writting scalable CSS. You can easliy customes colours, spacing etc of components, but what is also great is you can easily use the provided classes to apply custom margin,padding,height, width etc.

For example:

<>

 <div className="flex flex-col p-10">
    <HeadingOne text="Welcome to Umqombothi!" />
    <Input placeholder="You can tell me anything inbetween everything." />
    <LightPinkButton text="Send it" />
  </div>

</>

Hear we just created a flex column and added about 2.5rem of padding to the column. 🌟