UI components

A library of custom react components for use in UI development

Features

The latest version of the library includes such functionality as:

ModalProvider - A provider that passes all the necessary states to display the modal window useModal - A custom hook that activates a modal with the component you pass in

Installation

@nbcom/UI requires Node.js v16+, @nbcom/ui to run.

Install the package

npm install @nbcom/ui

Modal

First you need to wrap the entire project in a ModalProvider that will keep track of the state needed for the modal.

import { ModalProvider } from '@nbcom/ui/Modal';

  <ModalProvider>
    <Template>
      <Component {...pageProps} />
    </Template>
  </ModalProvider>

After that, using the custom useModal hook, you can activate the modal window anywhere inside components

 const { openModal, closeModal } = useModal();
 
 const onClick = () => {
   openModal({
       content: (<ContentComponent/>),
       autoWidth: true,
       customWidth: 375,
       noContentPadding: true,
   });
 }
 
 const onCancel = () => {
   closeModal();
 }

Margin

Wrap your component which you need to give a margin.

It takes 4 props for every margin direction - ml for margin-left, mb for margin-bottom etc..

Default multiplier is equal to 8, but you can reassign it in your config.

Props takes an a string value which has "x" on the end. You can also use object prop value instead for additional media queries

Example:

import { Margin } from "@nbcom/ui";

<Margin ml="4x" mt={{ xxxs: `1x`, xs: `2x`, lg: `5x`}} >
    <section>Some content</section>
</Margin>

Compiled css:

div {
    margin-left: 32px;
    margin-top: 8px;

    @media (min-width: 480px) {
        margin-top: 16px;
    }

    @media (min-width: 992px) {
        margin-top: 40px;
  }
}

Important: Breakpoints must be filled in the theme file.

Order

TODO:

• write doc
• Message that there are no products in the cart
• Complete refactoring, move everything possible to hooks and functions
• refactor setDeliverySummary
• Make the Yandex map start loading immediately when you open the page
• Text/Title components should work from the LocalComponents provider
• Yandex Map skeleton loader
• Rewrite from FormProvider to just one Form(?)
• Get rid of the theme variables from the project, everything must be configured through the config
• Can we use the Yandex map methods without rendering the map itself on the page?
• Move config.ts constants to OrderProvider