Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@react-pakistan/react-ui-collection

4.1.0 • Public • Published

React Pakistan

React Pakistan is an OpenSource & Free Software (FOSS) platform, creating React software solutions for the global community.

React UI Collection Badge Branches React UI Collection Badge Functions React UI Collection Badge Lines React UI Collection Badge Statements

React UI Collection

A generic to specific, UI/UX library for React web apps, following modern approach by building your project's UI in isolation using state of the art Storybook along with React.

Install

Add React UI Collection to your project.

yarn add @react-pakistan/react-ui-collection or npm install @react-pakistan/react-ui-collection

Styles

Styled Components are employed to maintain and update theme for this project. Please consider adding Styled Component Provider wrapper to the entry point of your application, following is the sample code. You could either use the default theme as shown below or wire your custom theme object instead.

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

Use

  import { Breadcrumbs } from '@react-pakistan/react-ui-collection/eCommerceV1UI/breadcrumbs';
 
  <Breadcrumbs
    breadcrumbs={[
      'Item1',
      'Item2',
      'Item3'
    ]}
   />
  import { Button } from '@react-pakistan/react-ui-collection/eCommerceV1UI/button';
 
  <Button
    backgroundColor="#F62F5E"
    borderRadius="3em"
    onClick={function noRefCheck(){}}
    padding="1em 3.5em"
  >
    <ButtonText
      fontFamily="Montserrat"
      fontSize="1em"
      fontWeight={700}
      letterSpacing="normal"
      lineHeight={1}
      textAlign="center"
      textTransform="uppercase"
    >
      Shop now
    </ButtonText>
  </Button>
  import { ButtonText } from '@react-pakistan/react-ui-collection/eCommerceV1UI/button-text';
 
  <ButtonText
    fontFamily="Montserrat"
    fontSize="1em"
    fontWeight={700}
    letterSpacing="normal"
    lineHeight={1}
    textAlign="center"
    textTransform="uppercase"
  >
    ButtonText Component
  </ButtonText>
  import { CartSummary } from '@react-pakistan/react-ui-collection/eCommerceV1UI/cart-summary';
 
  <CartSummary
    backButton="Back to Shop"
    bodyItems={[
      {
        altImage: 'body-item-1',
        id: 'body-item-1',
        imageUrl: 'https://cdn.shopify.com/s/files/1/3003/0152/products/nutshell-duck-3_grande_46bf8583-4963-430b-a23b-3540b86d27a3_720x.jpg?v=1524161556',
        justify: 'start',
        price: 21,
        priceCurrency: '£',
        productTitle: 'Green T-shirt 2016',
        quantity: 2,
        size: 'XXL',
        sku: 'Men BK3569'
      },
      {
        altImage: 'body-item-2',
        id: 'body-item-2',
        imageUrl: 'https://i.pinimg.com/originals/a5/52/78/a552788755c42d662d329be3cc3f8af2.jpg',
        justify: 'center',
        price: 13,
        priceCurrency: '£',
        productTitle: 'Purple T-shirt 2016',
        quantity: 2,
        size: 'XL',
        sku: 'Men BK3569'
      },
      {
        altImage: 'body-item-3',
        id: 'body-item-3',
        imageUrl: 'https://www.netballuk.co.uk/acatalog/Thunder-Bee-Tshirt.jpg',
        justify: 'center',
        price: 42,
        priceCurrency: '£',
        productTitle: 'Yellow T-shirt 2016',
        quantity: 2,
        size: 'L',
        sku: 'Men BK3569'
      },
      {
        altImage: 'body-item-4',
        id: 'body-item-4',
        imageUrl: 'http://shop.ourrevolution.com/resize/Shared/Images/Product/Our-Revolution-T-Shirt/tshirt-gray.png?bw=1000&amp;w=1000&amp;bh=1000&amp;h=1000',
        justify: 'end',
        price: 24,
        priceCurrency: '£',
        productTitle: 'Red T-shirt 2016',
        quantity: 2,
        size: 'XS',
        sku: 'Men BK3569'
      }
    ]}
    headerItems={[
      {
        colLabel: 'Item',
        id: 'header-item-1',
        justify: 'start'
      },
      {
        colLabel: 'Size',
        id: 'header-item-2',
        justify: 'center'
      },
      {
        colLabel: 'Quantity',
        id: 'header-item-3',
        justify: 'center'
      },
      {
        colLabel: 'Price',
        id: 'header-item-4',
        justify: 'end'
      }
    ]}
    nextButton="Checkout"
    topHeadingH4="4 Items In Your Cart"
  />
  import { Cart } from '@react-pakistan/react-ui-collection/eCommerceV1UI/cart';
 
  <Cart
    cartItemsNumber={6}
  />
  import { CategoryBanner } from '@react-pakistan/react-ui-collection/eCommerceV1UI/category-banner';
 
  <CategoryBanner
    colorH5="#FFFFFF"
    fontFamilyH3="PlayFair Display"
    fontFamilyH5="Montserrat"
    fontSizeH3="3em"
    headingH3="Mens wear"
    imageBackgroundHeight="500px"
    imageBackgroundPadding="5em"
    imageBackgroundUrl="https://demo.accesspressthemes.com/fashstore-pro/wp-content/uploads/2016/06/banner22-1.jpg"
    imageBackgroundWidth="100%"
    menuItems={[
      {
        id: 'menu-item-1',
        menuLabel: 'Accessories',
        menuUrl: '/accessories'
      },
      {
        id: 'menu-item-2',
        menuLabel: 'ASOS Baisc Tops',
        menuUrl: '/asos-basic-tops'
      },
      {
        id: 'menu-item-3',
        menuLabel: 'Bags',
        menuUrl: '/bags'
      },
      {
        id: 'menu-item-4',
        menuLabel: 'Caps &amp; Hats',
        menuUrl: '/caps-hats'
      },
      {
        id: 'menu-item-5',
        menuLabel: 'Gifts',
        menuUrl: '/gifts'
      },
      {
        id: 'menu-item-6',
        menuLabel: 'Grooming',
        menuUrl: '/grooming'
      },
      {
        id: 'menu-item-7',
        menuLabel: 'Hoodies &amp; Sweatshirts',
        menuUrl: '/hoodies-sweatshirts'
      },
      {
        id: 'menu-item-8',
        menuLabel: 'Jackets &amp; Coats',
        menuUrl: '/jackets-coats'
      },
      {
        id: 'menu-item-9',
        menuLabel: 'Jeans',
        menuUrl: '/jeans'
      },
      {
        id: 'menu-item-10',
        menuLabel: 'Jewellery',
        menuUrl: '/jewellery'
      },
      {
        id: 'menu-item-11',
        menuLabel: 'Joggers',
        menuUrl: '/joggers'
      },
      {
        id: 'menu-item-12',
        menuLabel: 'Jumpers &amp; Cardigans',
        menuUrl: '/jumpers-cardigans'
      },
      {
        id: 'menu-item-13',
        menuLabel: 'Leather Jackets',
        menuUrl: '/leasther-jackets'
      },
      {
        id: 'menu-item-14',
        menuLabel: 'Long Sleeve T-Shirts',
        menuUrl: '/long-sleeve-tshirts'
      },
      {
        id: 'menu-item-15',
        menuLabel: 'Loungewear',
        menuUrl: '/loungwear'
      },
      {
        id: 'menu-item-16',
        menuLabel: 'Oversized &amp; Longline',
        menuUrl: '/oversized-longline'
      },
      {
        id: 'menu-item-17',
        menuLabel: 'Polo Shirts',
        menuUrl: '/polo-shirts'
      },
      {
        id: 'menu-item-18',
        menuLabel: 'Shirts',
        menuUrl: '/shirts'
      }
    ]}
    textAlignH3="left"
    textAlignH5="left"
    textTransformH3="none"
    textTransformH5="none"
  />
  import { CategoryCard } from '@react-pakistan/react-ui-collection/eCommerceV1UI/category-card';
 
  <CategoryCard
    categoryText="Shop now"
    colorH3="#FFFFFF"
    colorText="#FFFFFF"
    fontFamilyH3="PlayFair Display"
    fontFamilyText="Montserrat"
    fontSizeH3="2.5em"
    fontSizeText="3em"
    fontWeightText={500}
    headingH3="Blue"
    imageBackgroundHeight="500px"
    imageBackgroundUrl="http://cdn.shopify.com/s/files/1/0014/1980/4719/collections/converse-SS17-banner_03_tcm2031-38716_1200x1200.jpg?v=1522420386"
    imageBackgroundWidth="100%"
    lineHeightText="normal"
    overlayColor="rgba(30, 144, 255, 0.5)"
    textAlignH3="center"
    textAlignText="left"
    textTransformH3="normal"
    textTransformText="normal"
  />

Other Libraries from ReactPakistan

Buy me a coffee

Install

npm i @react-pakistan/react-ui-collection

DownloadsWeekly Downloads

8

Version

4.1.0

License

MIT

Unpacked Size

506 kB

Total Files

420

Last publish

Collaborators

  • avatar