paybito-shared-ui

v1.1.0

Published

17 days ago

Shared UI components for Paybito applications — reusable, framework-agnostic React components with pure CSS.

0High
0Medium
0Low

atharhashcash

paybito ui components react logout dropdown shared-ui

paybito-shared-ui

A shared React component library for Paybito applications. Provides reusable, framework-agnostic UI components built with pure CSS — no external CSS library dependency.

Published on npm: paybito-shared-ui

Installation

React / Next.js project (npm)

npm install paybito-shared-ui

Peer dependencies: React 17+ and ReactDOM 17+ must be installed in your project.

Plain HTML page (CDN via unpkg)

No build tool or npm needed. Load React, ReactDOM, and the package UMD bundle via <script> tags, then use window.PaybitoSharedUI to access the components.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My Page</title>
</head>
<body>

  <div id="app-menu"></div>

  <!-- 1. React & ReactDOM -->
  <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

  <!-- 2. paybito-shared-ui UMD bundle (CSS is injected automatically) -->
  <script src="https://unpkg.com/paybito-shared-ui@latest/dist/index.umd.js"></script>

  <script>
    const { CentralLogoutDropdown } = window.PaybitoSharedUI;

    const apps = [
      { name: 'Exchange',  icon: 'https://cdn.example.com/exchange.png',  href: 'https://exchange.paybito.com'  },
      { name: 'Wallet',    icon: 'https://cdn.example.com/wallet.png',    href: 'https://wallet.paybito.com'    },
      { name: 'Analytics', icon: 'https://cdn.example.com/analytics.png', href: 'https://analytics.paybito.com' },
    ];

    const root = ReactDOM.createRoot(document.getElementById('app-menu'));
    root.render(
      React.createElement(CentralLogoutDropdown, {
        displayName: 'John Smith',
        email: '[email protected]',
        companyName: 'BitoCircle',
        imageUrl: null,
        apps,
        onLogout: () => console.log('Logging out...'),
        logoutText: 'Sign out',
      })
    );
  </script>

</body>
</html>

Note: CSS styles are injected into the <head> automatically by the UMD bundle — no separate stylesheet link needed.

Components

`CentralLogoutDropdown`

A Google-style app launcher + account dropdown for Paybito app headers. It features:

A waffle button (3×3 dot grid) as the trigger — exactly like Google's app switcher
An apps grid (3 per row) showing all Paybito apps with icon and name, each linking to the app
A footer bar with the user's avatar, current app name, and email on the left, and a Sign out button on the right

When to use: Place in the app header for users who need to switch between Paybito apps or sign out centrally.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | displayName | string | Yes | '' | User's display name (used for initials avatar fallback) | | email | string | Yes | '' | User's email address shown in the footer | | companyName | string | No | '' | Current app name shown in the footer (highlighted in purple) | | imageUrl | string \| null | No | null | Avatar image URL. If null, initials are shown instead | | apps | App[] | No | [] | List of apps to display in the grid (see App object below) | | onLogout | () => void | Yes | — | Callback fired when the sign-out button is clicked | | logoutText | string | No | 'Sign out' | Label for the sign-out button |

App object

Each item in the apps array has the following shape:

| Field | Type | Required | Description | |-------|------|----------|-------------| | name | string | Yes | App display name shown below the icon | | icon | string \| ReactElement | Yes | Icon image URL or any React element (SVG, component, etc.) | | href | string | Yes | URL to navigate to when the app is clicked | | blank | boolean | No | Open link in a new tab. Defaults to true. Set false to open in the same tab |

Usage (React)

import { CentralLogoutDropdown } from 'paybito-shared-ui';

const apps = [
  {
    name: 'Exchange',
    icon: 'https://cdn.example.com/icons/exchange.png',
    href: 'https://exchange.paybito.com',
    // blank: true  ← default, opens in new tab
  },
  {
    name: 'Wallet',
    icon: 'https://cdn.example.com/icons/wallet.png',
    href: 'https://wallet.paybito.com',
  },
  {
    name: 'Analytics',
    icon: 'https://cdn.example.com/icons/analytics.png',
    href: 'https://analytics.paybito.com',
  },
  {
    name: 'KYC Portal',
    icon: 'https://cdn.example.com/icons/kyc.png',
    href: 'https://kyc.paybito.com',
  },
  {
    name: 'Support',
    icon: 'https://cdn.example.com/icons/support.png',
    href: 'https://support.paybito.com',
    blank: false,  // opens in same tab
  },
  {
    name: 'Settings',
    icon: 'https://cdn.example.com/icons/settings.png',
    href: 'https://settings.paybito.com',
  },
];

function AppHeader() {
  const handleLogout = async () => {
    await logoutAPI();
    window.location.href = 'https://myaccount.paybito.com/signin';
  };

  return (
    <header>
      {/* other header content */}

      <CentralLogoutDropdown
        displayName="John Smith"
        email="[email protected]"
        companyName="Paybito Exchange"
        imageUrl={null}
        apps={apps}
        onLogout={handleLogout}
        logoutText="Sign out"
      />
    </header>
  );
}

Behaviour

Clicking the waffle button (⠿) opens the dropdown card.
Clicking outside the card or pressing Escape closes it.
Apps are displayed 3 per row. Any number of apps is supported.
Each app link opens in a new tab by default (blank: true). Pass blank: false on an individual app to open in the same tab.
If imageUrl is provided, the avatar shows the image; otherwise it renders initials (up to 2 characters from displayName).
CSS is injected automatically — no separate stylesheet import needed.
All CSS class names are prefixed with pbu-cld- to avoid conflicts with your app's styles.

Local development & preview

# Clone the repo
git clone https://[email protected]/hashcash_team/paybito-shared-ui.git
cd paybito-shared-ui

# Install dependencies
npm install

# Build the package (outputs to dist/)
npm run build

# Watch mode during development
npm run dev

Preview in browser (localhost)

After building, serve the project root with any static server:

npx serve .

Then open http://localhost:3000/demo/ in your browser.

The demo/index.html file loads React from CDN and the local UMD bundle, renders CentralLogoutDropdown inside a mock navbar, and includes sample apps so you can see the full UI without a separate app.

Project structure

paybito-shared-ui/
├── src/
│   ├── index.js                          # Package entry — exports all components
│   └── components/
│       └── CentralLogoutDropdown/
│           ├── index.jsx                 # Component logic
│           └── CentralLogoutDropdown.css # Component styles (injected via rollup-plugin-postcss)
├── demo/
│   └── index.html                        # Browser preview (requires npm run build first)
├── dist/                                 # Built output
│   ├── index.cjs.js                      # CommonJS
│   ├── index.esm.js                      # ES Module
│   └── index.umd.js                      # UMD (browser / CDN)
├── rollup.config.mjs                     # Rollup build config
└── package.json

Build output

| File | Format | Used by | |------|--------|---------| | dist/index.cjs.js | CommonJS | Node.js / Webpack projects | | dist/index.esm.js | ES Module | Vite / modern bundlers | | dist/index.umd.js | UMD | Plain HTML / CDN |

Publishing to npm

# Log in (required once per session)
npm login

# Build + publish (enter your OTP when prompted)
npm publish --access public --otp=<your-otp>

Apps using this package

| App | Repo | |-----|------| | SalesBito CRM (client_crm_reactweb) | Bitbucket — hashcash_team | | BitoBooks (client_financegeneration_ui) | Bitbucket — hashcash_team | | BitoLink (client_bito-link) | Bitbucket — hashcash_team |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

paybito-shared-ui

Installation

React / Next.js project (npm)

Plain HTML page (CDN via unpkg)

Components

CentralLogoutDropdown

Props

App object

Usage (React)

Behaviour

Local development & preview

Preview in browser (localhost)

Project structure

Build output

Publishing to npm

Apps using this package

License

`CentralLogoutDropdown`