🔥🔥🔥 ReactPakistan EcoSystem - Build Web/Mobile UI with React Micro-Frontend 🔥🔥🔥

ReactPakistan EcoSystem 🎖

ReactPakistan EcoSystem encompass around React, React Native & Docusaurus technologies and tools. The philosophy beneath ReactPakistan packages is to create Micro-Frontends, decoupled from the logic for maximum use cases re-useability in mind. We don’t want to limit developers by writing coupled components/functions. This one platform brings various solutions to building effective UI/UX in React & ReactNative, like removing the pain of adding responsive and theming features to it.

The eco-system is classified under generic to specific ways of building components library, this helps developers to re-use the generic components as much as possible and build specific stages of components on top of the generic ones, hence keeping the concerned component logic to it’s relevant stage as required. Following is the higher level table to put things into perspective.

The Architecture

Technologies Covered

• React
• React Native
• Docusaurus

React Pakistan Repositories

React Commons Collection

React Commons Collection is the most generic form of React web components which can be transformed into any design specifications, required by your next project.

The general motivation involved in building this library from the ground zero is to create design-less React web components, which could then we extended upon to build anything specific to the project requirements and custom use cases.

Although, there are a ton of popular React UI libraries available, but the intention behind React Pakistan to bring an entire eco-system of web & mobile tools that helps developers to reduce their overall development time, hence maximum re-utilizing the most generic form of React Commons Collection.

Baked Responsiveness

React Commons Collection library comes with built in responsive feature for each element right into it’s core. The secret sauce here is to induce each element of React Commons Collection to be responsive, so that any layout built composed with these elements can be made responsive with great precision. Developers can customize what needs to be responsive and how so as per their design specifications. Following is the sample code to use the responsive feature of any React Commons Component.

  <H1
    color='#FFFFFF'
    desktop=''
    fontFamily='Playfair Display'
    fontSize='2em'
    fontWeight={700}
    laptop=''
    laptopL=''
    letterSpacing='1px'
    lineHeight='normal'
    mobileL=''
    mobileM=''
    mobileS=''
    tablet=''
    textAlign='center'
    textTransform='uppercase'
  >
   
    H1 Component
  </H1>

Checkout the above sample H1 code, desktop, laptop, laptopL, mobileL, mobileM, mobileS, tablet are optional props that will manage the responsiveness of this component on each of these breakpoints with the help of underlying mechanics.

Imagine if we need to change color of H1 on desktop size screen, I’d leverage it’s desktop props by doing so:

  <H1
    color='#FFFFFF'
    desktop={`
      color: red;
    `}
    fontFamily='Playfair Display'
    fontSize='2em'
    fontWeight={700}
    laptop=''
    laptopL=''
    letterSpacing='1px'
    lineHeight='normal'
    mobileL=''
    mobileM=''
    mobileS=''
    tablet=''
    textAlign='center'
    textTransform='uppercase'
  >
    H1 Component
  </H1>

Notice, we just passed the stringified CSS to the concerned props to manage our responsive code for each of these components, this is how simple it is to manage the responsive of each components as per your needs.

Baked Theme

By leveraging StyledComponents built-in theme support has been configured throughout React Commons Collection and all of it’s extensions too.

Theme is a massive object that holds a ton of properties categories under various sections, following is the interface to put things into perspective.

interface ITheme {
    avatarSizes : IAvatarSizes;
    breakpoints : IBreakpoints;
    colors : IColors;
    misc : IMisc;
    radius : IRadius;
    shadow : IShadow;
    spacing : ISpacing;
    typography : ITypography;
    zIndex : IZindex;
}

Developers could either use the default theme by passing it down from the root of the application, like so;

  import { ThemeProvider } from 'styled-components';
  import { theme } from '@react-pakistan/util-functions';

  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>

This will enable access to theme object in either React or StyledComponents components. With the underlying implementation of ContextAPI by StyledComponents you will get the theme object in each of the StyledComponents being declared. However, should you wish to get access to the theme object from any React component, you could leverage the withTheme High Order Component wrapper for that matter, following is the sample code for either of the ways:

  import styled from 'styled-components';

  export const StyledSection = styled.section`
    background-color: ${({ theme }) => theme.colors.cherryRed};
  `;

  import React from 'react';
  import { withTheme } from 'styled-components';

  export const Heading = withTheme(({
    theme,
  }) => (
    <H1
      color={theme.colors.cherryRed}
    />
  });

Else, developers could update nodes of the theme object as per their design specifications too, following is the sample code to get started;

  import { theme } from '@react-pakistan/util-functions';

  // create a copy of entire theme object
  export const myCoolAppTheme = { ...theme };

  // then start updating required nodes with your design specifications
  myCoolAppTheme.typography.fontFamily = 'Montserrat';
  myCoolAppTheme.typography.h1 = {
    ...myCoolAppTheme.typography.h1,
  };
  myCoolAppTheme.typography.h2 = {
    ...myCoolAppTheme.typography.h2,
  };
  myCoolAppTheme.typography.h3 = {
    ...myCoolAppTheme.typography.h3,
  };
  myCoolAppTheme.typography.h4 = {
    ...myCoolAppTheme.typography.h4,
  };
  myCoolAppTheme.typography.h5 = {
    ...myCoolAppTheme.typography.h5,
    textTransform: 'none',
  };

React UI Collection

React UI Collection is an extension of React Commons Collection, building project specific UI/UX on generic components. There are two fully functional apps built on this library;

An e-commerce and developer portfolio apps were built using React Commons Collection components, cutting the development overheads and making sure to enable same coding standards and practices across all projects.

This approach helped a lot to write good standard, robust and maintainable code, single handedly.

React Icon Collection

React Icon Collection is an extension of React Commons Collection, this library contains 1000’s of React SVG components of icons, making it so convenient for developers to take the pain out of using SVG with React. Following is the sample code to get started with it.

  import { FourthofjulyGrey12 } from '@react-pakistan/react-icons-collection/fourthofjuly-grey';

  <FourthofjulyGrey12
    fontSize='32px'
    fill='#2E2E2E'
  />

React Logo Collection

Same as React Icon Collection, but only difference it has is that it contains several logos. Following is the sample code to get started with it.

  import { BitcoinColor22 } from '@react-pakistan/react-logo-collection/logos/bitcoin-color';

  <BitcoinColor22
    fontSize='32px'
    color='#2E2E2E'
  />

React Emoji Collection

Same as React Icon Collection, but only difference it has is that it contains 1000’s of emojis. Following is the sample code to get started with it.

  import { BodyParts1 } from '@react-pakistan/react-logo-collection/emoji/body-parts';

  <BodyParts1
    fontSize='32px'
  />

React Native Commons Collection

Same reasoning goes behind building this library as of React Commons Collection, except that it focuses on React Native platform rather.

Baked Theme

Theme support has been baked right into it’s core to enable several features across all extended libraries. The same theme concepts goes with this library too, like how to use it along React & StyledComponents and how to update theme nodes.

React Native UI Collection

Same reasoning goes behind building this library as of React UI Collection, except that it focuses on React Native platform rather.

React Native Icon Collection

Same reasoning goes behind building this library as of React Icon Collection, except that it focuses on React Native platform rather.

React Native Logo Collection

Same reasoning goes behind building this library as of React Logo Collection, except that it focuses on React Native platform rather.

React Native Emoji Collection

Same reasoning goes behind building this library as of React Emoji Collection, except that it focuses on React Native platform rather.

React Native Boilerplate

It is a curated list of built boilerplate of React Native using various tool and technologies for everyone to kick-start quicker on their next cool app. Due to the recent changes in React Native platforms, these boilerplates are not upgraded to the latest React Native version but it is planned to be upgraded by Q1 2021.

React Pakistan Docs

Central documentation for all of React Pakistan published packages and libraries, built on state of the art Docusaurus. This helps developers to save time in switching between docs when using various libraries from React Pakistan eco-system.

Util Functions

A collection of util functions for React web libraries, helping to reduce the overall code length and to enable maximum re-useability across all packages.

Util React Native Functions

Same reasoning goes behind building this library as of Util Functions, except that it focuses on React Native platform rather.

Eslint Config Shared

Since all of React Pakistan packages heavily relies on TypeScript and at some places JavaScript, so it’d be meaningful if we have a central space where all of our Eslint rules are defined, this package just does that.

Why ReactPakistan

• It makes creating robust custom UI development painless for both React & React Native platforms.
• It allows developers to fully customize any generic component built under React Commons Collection or React Native Commons Collection library.
• It makes using SVG with React & React Native seamless.
• It is lightweight compared to other popular UI libraries.
• It supports the tree shaking feature to keep the bundle size minimum as possible, following are some examples:

// below line will import Button from the package, but also it will bring in all items being exported from the root.

import { Button } from '@react-pakistan/react-commons-collection';

// in contrast of the above line, following line will only import the Button and any of it's associated exported items, i.e. interfaces or enums but this way the overall bundle size of your app will be minimum as possible.

import { Button } from '@react-pakistan/react-commons-collection/button';

// For all SVG based React Pakistan packages, root level export is not enabled, since we don't want developers to accidentally import the entire package SVG items, as that can be quite much. Below is the way to import any SVG from their categorized folder.

import { FourthofjulyGrey12 } from '@react-pakistan/react-icons-collection/fourthofjuly-grey';

• You get Component Responsiveness feature out the box, baked right into it’s core, so you just have to pass down relevant CSS to their respective layout breakpoints.
• Multi Theme support is also baked right into the core, developers can either use the base theme or customize it as per their design specs.
• Robust codebase using TypeScript.
• Tested codebase.

Star, Fork & Share

Should you like these series of open source ReactPakistan projects, please consider giving it a star, perhaps fork it and share it across your circles, every contribution counts, like these too.

Facebook Acknowledgement

React Pakistan project was submitted to the Developer Circles Open Source Immersion 2020 Challenge and this was awarded by the Facebook at the end of the global competition.