npm package: @prosazhin/pbcomponents
Description: UI component library for React with Typescript and Tailwind
Author: Evgenii Sazhin
Latest version: 1.0.2

# pbcomponents

[NPM](https://www.npmjs.com/package/@prosazhin/pbcomponents) | [Preview](https://pbcomponents.vercel.app/?path=/docs/intro--docs) | [pbcomponents](https://github.com/prosazhin/pbcomponents)

[Figma community](https://www.figma.com/community/file/1214486013859546496/pbcomponents) | [Behance](https://www.behance.net/gallery/206064847/pbcomponents)

## prosazhin basic components for react

UI component library for React with Typescript and Tailwind.

## Installation

```bash
npm install @prosazhin/pbcomponents
```

## Usage example

```javascript
import { Button } from '@prosazhin/pbcomponents';

const Page = () => (
  <>
    <Button size='m' color='primary' theme='filled' onClick={() => {}}>
      Button
    </Button>
  </>
);
```

## Components

| Component name        | Import                                                             | Component preview and api                                                                                                  |
| :-------------------- | :----------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| Button                | `import { Button } from '@prosazhin/pbcomponents';`                | [Link](https://pbcomponents.vercel.app/?path=/story/components-button-button--button)                                      |
| ButtonGroup           | `import { ButtonGroup } from '@prosazhin/pbcomponents';`           | [Link](https://pbcomponents.vercel.app/?path=/story/components-button-buttongroup--button-group)                           |
| Badge                 | `import { Badge } from '@prosazhin/pbcomponents';`                 | [Link](https://pbcomponents.vercel.app/?path=/story/components-badge--badge)                                               |
| Tag                   | `import { Tag } from '@prosazhin/pbcomponents';`                   | [Link](https://pbcomponents.vercel.app/?path=/story/components-tag--tag)                                                   |
| Checkbox              | `import { Checkbox } from '@prosazhin/pbcomponents';`              | [Link](https://pbcomponents.vercel.app/?path=/story/components-checkbox-checkbox--checkbox)                                |
| CheckboxGroup         | `import { CheckboxGroup } from '@prosazhin/pbcomponents';`         | [Link](https://pbcomponents.vercel.app/?path=/story/components-checkbox-checkboxgroup--checkbox-group)                     |
| Switch                | `import { Switch } from '@prosazhin/pbcomponents';`                | [Link](https://pbcomponents.vercel.app/?path=/story/components-checkbox-switch--switch)                                    |
| Radio                 | `import { Radio } from '@prosazhin/pbcomponents';`                 | [Link](https://pbcomponents.vercel.app/?path=/story/components-radio-radio--radio)                                         |
| RadioGroup            | `import { RadioGroup } from '@prosazhin/pbcomponents';`            | [Link](https://pbcomponents.vercel.app/?path=/story/components-radio-radiogroup--radio-group)                              |
| InlineRadio           | `import { InlineRadio } from '@prosazhin/pbcomponents';`           | [Link](https://pbcomponents.vercel.app/?path=/story/components-inline-radio-inlineradio--inline-radio)                     |
| InlineRadioGroup      | `import { InlineRadioGroup } from '@prosazhin/pbcomponents';`      | [Link](https://pbcomponents.vercel.app/?path=/story/components-inline-radio-inlineradiogroup--inline-radio-group)          |
| Input                 | `import { Input } from '@prosazhin/pbcomponents';`                 | [Link](https://pbcomponents.vercel.app/?path=/story/components-field-input--input)                                         |
| Textarea              | `import { Textarea } from '@prosazhin/pbcomponents';`              | [Link](https://pbcomponents.vercel.app/?path=/story/components-field-textarea--textarea)                                   |
| Select                | `import { Select } from '@prosazhin/pbcomponents';`                | [Link](https://pbcomponents.vercel.app/?path=/story/components-field-select--select)                                       |
| Search                | `import { Search } from '@prosazhin/pbcomponents';`                | [Link](https://pbcomponents.vercel.app/?path=/story/components-field-search--search)                                       |
| Field                 | `import { Field } from '@prosazhin/pbcomponents';`                 | [Link](https://pbcomponents.vercel.app/?path=/story/components-field-field--field)                                         |
| Dropdown              | `import { Dropdown } from '@prosazhin/pbcomponents';`              | [Link](https://pbcomponents.vercel.app/?path=/story/components-dropdown-dropdown--dropdown)                                |
| DropdownItem          | `import { DropdownItem } from '@prosazhin/pbcomponents';`          | [Link](https://pbcomponents.vercel.app/?path=/story/components-dropdown-dropdownitem--dropdown-item)                       |
| Tabs                  | `import { Tabs } from '@prosazhin/pbcomponents';`                  | [Link](https://pbcomponents.vercel.app/?path=/story/components-tabs-tabs--tabs)                                            |
| Tab                   | `import { Tab } from '@prosazhin/pbcomponents';`                   | [Link](https://pbcomponents.vercel.app/?path=/story/components-tabs-tab--tab)                                              |
| Collapse              | `import { Collapse } from '@prosazhin/pbcomponents';`              | [Link](https://pbcomponents.vercel.app/?path=/story/components-collapse-collapse--collapse)                                |
| CollapseGroup         | `import { CollapseGroup } from '@prosazhin/pbcomponents';`         | [Link](https://pbcomponents.vercel.app/?path=/story/components-collapse-collapsegroup--collapse-group)                     |
| Alert                 | `import { Alert } from '@prosazhin/pbcomponents';`                 | [Link](https://pbcomponents.vercel.app/?path=/story/components-alert--alert)                                               |
| Dialog                | `import { Dialog } from '@prosazhin/pbcomponents';`                | [Link](https://pbcomponents.vercel.app/?path=/story/components-dialog-dialog--dialog)                                      |
| DialogProvider        | `import { DialogProvider } from '@prosazhin/pbcomponents';`        | [Link](https://pbcomponents.vercel.app/?path=/story/components-dialog-dialogprovider--dialog-provider)                     |
| useDialog             | `import { useDialog } from '@prosazhin/pbcomponents';`             | -                                                                                                                          |
| useShowDialog         | `import { useShowDialog } from '@prosazhin/pbcomponents';`         | -                                                                                                                          |
| Notification          | `import { Notification } from '@prosazhin/pbcomponents';`          | [Link](https://pbcomponents.vercel.app/?path=/story/components-notification-notification--notification)                    |
| NotificationsProvider | `import { NotificationsProvider } from '@prosazhin/pbcomponents';` | [Link](https://pbcomponents.vercel.app/?path=/story/components-notification-notificationsprovider--notifications-provider) |
| useNotifications      | `import { useNotifications } from '@prosazhin/pbcomponents';`      | -                                                                                                                          |
| Headline              | `import { Headline } from '@prosazhin/pbcomponents';`              | [Link](https://pbcomponents.vercel.app/?path=/story/components-headline--headline)                                         |
| Container             | `import { Container } from '@prosazhin/pbcomponents';`             | [Link](https://pbcomponents.vercel.app/?path=/story/components-container--container)                                       |
| PBCProvider           | `import { PBCProvider } from '@prosazhin/pbcomponents';`           | [Link](https://pbcomponents.vercel.app/?path=/story/components-pbcprovider--pbc-provider)                                  |

## Helpers

| Component name | Import                                               | Component preview and api                                                     |
| :------------- | :--------------------------------------------------- | ----------------------------------------------------------------------------- |
| Text           | `import { Text } from '@prosazhin/pbcomponents';`    | [Link](https://pbcomponents.vercel.app/?path=/story/helpers-text--text)       |
| Icon           | `import { Icon } from '@prosazhin/pbcomponents';`    | [Link](https://pbcomponents.vercel.app/?path=/story/helpers-icon--icon)       |
| Content        | `import { Content } from '@prosazhin/pbcomponents';` | [Link](https://pbcomponents.vercel.app/?path=/story/helpers-content--content) |

## Provider usage

This is a wrapper for the notification and dialog provider to avoid calling them separately.

```javascript
import { PBCProvider } from '@prosazhin/pbcomponents';

const App = () => (
  <PBCProvider
    notifications={{
      top: 48,
      onError: (error, context) => {
        console.error('Notification callback error', error, context);
      },
    }}
  >
    {children}
  </PBCProvider>
);
```

## Notification usage

```javascript
import { NotificationsProvider, PBCProvider } from '@prosazhin/pbcomponents';

const App = () => (
  <NotificationsProvider
    top={48}
    onError={(error, context) => {
      console.error('Notification callback error', error, context);
    }}
  >
    {children}
  </NotificationsProvider>
);
// or
const App = () => <PBCProvider notifications={{ top: 48 }}>{children}</PBCProvider>;
```

```javascript
import { Button, useNotifications } from '@prosazhin/pbcomponents';

const Component = () => {
  const { notifications, showNotification, hideNotification } = useNotifications();
  const latestNotification = notifications[0];

  return (
    <>
      <Button onClick={() => showNotification({ headline: 'Headline', children: 'Description' })}>Show Notification</Button>
      <Button onClick={() => latestNotification && hideNotification(latestNotification.id)} disabled={!latestNotification}>
        Hide Notification
      </Button>
    </>
  );
};
```

## Dialog usage

```javascript
import { DialogProvider, PBCProvider } from '@prosazhin/pbcomponents';

const App = () => <DialogProvider>{children}</DialogProvider>;
// or
const App = () => <PBCProvider>{children}</PBCProvider>;
```

```javascript
import { Button, Dialog, useDialog, useShowDialog } from '@prosazhin/pbcomponents';

const DIALOG_ID = 'my-dialog';

const Component = () => {
  const { closeDialog } = useDialog();
  const showDialog = useShowDialog(() => (
    <Dialog id={DIALOG_ID}>
      <div>Dialog content</div>
      <Button color='primary' theme='filled' className='pbc:mt-24' onClick={() => closeDialog(DIALOG_ID)}>
        Close Button
      </Button>
    </Dialog>
  ));

  return (
    <>
      <Button onClick={showDialog}>Open Dialog</Button>
    </>
  );
};
```