design-rx v15.0.5

Qwerty UI

In the beginning Man created html, and js. And the html was void and empty, and darkness was upon the face of the UI/UX; and the spirit of developer moved over the css. And Man said: Be beautiful web pages made. And UI libraries were made.

Ah sh*t, here we go again...

Introducing Qwerty-UI a library which gives your react pages, theme support and prebuilt components just like any other UI library; the difference being that it has beautiful UI inspired from Bajaj Finserv Health design system without compromising on space or performance and giving boundations and freedom to the developer at the same time.

Qwerty-UI will try it's best to restrict you to the color palette and Design system that you will decide ( But ofcource, you're a developer, you can break rules )

Installation

• Step 1: Grab coffee ( or Tea if you're in your late 40s ), calm that developer mind of yours and make your laptop/desktop ready ( nope, I don't care if you can code on your mobiles/tablets )
  

• Step 2: in your project make a .npmrc at root level and enter the following config

  @bfhl:registry=https://pkgs.dev.azure.com/BFHL/_packaging/qwerty-ui-2/npm/registry/  
  always-auth=true  
  ; begin auth token  
  //pkgs.dev.azure.com/BFHL/_packaging/qwerty-ui-2/npm/registry/:username=BFHL  
  //pkgs.dev.azure.com/BFHL/_packaging/qwerty-ui-2/npm/registry/:_password=<YOUR_PAT_TOKEN_HERE>
  //pkgs.dev.azure.com/BFHL/_packaging/qwerty-ui-2/npm/registry/:email=npm requires email to be set but doesn't use the value  
  //pkgs.dev.azure.com/BFHL/_packaging/qwerty-ui-2/npm/:username=BFHL  
  //pkgs.dev.azure.com/BFHL/_packaging/qwerty-ui-2/npm/:_password=<YOUR_PAT_TOKEN_HERE>
  //pkgs.dev.azure.com/BFHL/_packaging/qwerty-ui-2/npm/:email=npm requires email to be set but doesn't use the value  
  ; end auth token

  Note: If you're using a docker system, make sure you include the .npmrc in your builder; Otherwise you're gonna scratch your head for days and then blame me for being a bad developer, which FYI maybe you are but I'm not.

• step 3: run yarn add @bfhl/qwerty-ui @emotion/styled

Note: If you're using React 17 then you need to import stuff from "@bfhl/qwerty-ui/legacy" i.e. You need that /legacy thingy at the end ( And if you're on a React versioned anything less than 17, who hurt you? )

• step 4: Now it's finally time to use the library. So the first and foremost thing to do is, wrap your app inside ThemeProvider and providing it a default theme. It should look something similar to:

  // if you're using React 17  
  import { ThemeProvider } from "@bfhl/qwerty-ui/legacy" // or "@bfhl/qwerty-ui/legacy/theme"  
  // if you're smart and using React 18  
  import { ThemeProvider } from "@bfhl/qwerty-ui" // or "@bfhl/qwerty-ui/theme"  
  // import type ThemeProps too if you're using typescript  
  
  // ...Other imports and your App's logic...  
  //...  
  //...  
  //...  
  // const themeOpts: ThemeProps = { // if using typescript  
  const themeOpts = {  
  	// whatever theme options you want ( few options are mandatory )  
  }  
  const Xyz = () => {  
  	return(  
  		<ThemeProvider defautThemeOptions={themeOpts}>  
  			// Your App here  
  		</ThemeProvider>  
  	)  
  }  

  And VOILA!!! You now have a hell lot of css variables available to make use of ;)

• step 5: I think you're smart enough to import and use components so yea... Good Luck

Contribution

Refer to CONTRIBUTION.md to see how you can contribute to QUI and have the satisfaction of being a great developer.