pbcomponents

NPM | Preview | pbcomponents

Figma community | Behance

prosazhin basic components for react

UI component library for React with Typescript and Tailwind.

Installation

npm install @prosazhin/pbcomponents

Usage example

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 | | ButtonGroup | import { ButtonGroup } from '@prosazhin/pbcomponents'; | Link | | Badge | import { Badge } from '@prosazhin/pbcomponents'; | Link | | Tag | import { Tag } from '@prosazhin/pbcomponents'; | Link | | Checkbox | import { Checkbox } from '@prosazhin/pbcomponents'; | Link | | CheckboxGroup | import { CheckboxGroup } from '@prosazhin/pbcomponents'; | Link | | Switch | import { Switch } from '@prosazhin/pbcomponents'; | Link | | Radio | import { Radio } from '@prosazhin/pbcomponents'; | Link | | RadioGroup | import { RadioGroup } from '@prosazhin/pbcomponents'; | Link | | InlineRadio | import { InlineRadio } from '@prosazhin/pbcomponents'; | Link | | InlineRadioGroup | import { InlineRadioGroup } from '@prosazhin/pbcomponents'; | Link | | Input | import { Input } from '@prosazhin/pbcomponents'; | Link | | Textarea | import { Textarea } from '@prosazhin/pbcomponents'; | Link | | Select | import { Select } from '@prosazhin/pbcomponents'; | Link | | Search | import { Search } from '@prosazhin/pbcomponents'; | Link | | Field | import { Field } from '@prosazhin/pbcomponents'; | Link | | Dropdown | import { Dropdown } from '@prosazhin/pbcomponents'; | Link | | DropdownItem | import { DropdownItem } from '@prosazhin/pbcomponents'; | Link | | Tabs | import { Tabs } from '@prosazhin/pbcomponents'; | Link | | Tab | import { Tab } from '@prosazhin/pbcomponents'; | Link | | Collapse | import { Collapse } from '@prosazhin/pbcomponents'; | Link | | CollapseGroup | import { CollapseGroup } from '@prosazhin/pbcomponents'; | Link | | Alert | import { Alert } from '@prosazhin/pbcomponents'; | Link | | Dialog | import { Dialog } from '@prosazhin/pbcomponents'; | Link | | DialogProvider | import { DialogProvider } from '@prosazhin/pbcomponents'; | Link | | useDialog | import { useDialog } from '@prosazhin/pbcomponents'; | - | | useShowDialog | import { useShowDialog } from '@prosazhin/pbcomponents'; | - | | Notification | import { Notification } from '@prosazhin/pbcomponents'; | Link | | NotificationsProvider | import { NotificationsProvider } from '@prosazhin/pbcomponents'; | Link | | useNotifications | import { useNotifications } from '@prosazhin/pbcomponents'; | - | | Headline | import { Headline } from '@prosazhin/pbcomponents'; | Link | | Container | import { Container } from '@prosazhin/pbcomponents'; | Link | | PBCProvider | import { PBCProvider } from '@prosazhin/pbcomponents'; | Link |

Helpers

| Component name | Import | Component preview and api | | :------------- | :--------------------------------------------------- | ----------------------------------------------------------------------------- | | Text | import { Text } from '@prosazhin/pbcomponents'; | Link | | Icon | import { Icon } from '@prosazhin/pbcomponents'; | Link | | Content | import { Content } from '@prosazhin/pbcomponents'; | Link |

Provider usage

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

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

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>;

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

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

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

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>
    </>
  );
};