# propro-shared-components

> Reusable components for propro client apps

Latest version **0.0.27** (published 2024-01-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install propro-shared-components
pnpm add propro-shared-components
yarn add propro-shared-components
bun add propro-shared-components
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.27 |
| Published | 2024-01-24 |
| First published | 2024-01-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 48 |
| Unpacked size | 3.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Chidozie C. Okafor |
| Maintainers | propro_productions |
| Keywords | propro, hubhub, typescript, mapmap, jest, husky, commitizen, semantic-release, codecov |

## Links

- npm: https://www.npmjs.com/package/propro-shared-components
- Repository: https://github.com/ProPro-Productions/pro-components
- Homepage: https://github.com/ProPro-Productions/pro-components#readme
- Issues: https://github.com/ProPro-Productions/pro-componentse/issues
- npm.io page: https://npm.io/package/propro-shared-components

## Dependencies (48)

- [antd](https://npm.io/package/antd.md) ^5.13.2
- [clsx](https://npm.io/package/clsx.md) ^2.1.0
- [path](https://npm.io/package/path.md) ^0.12.7
- [axios](https://npm.io/package/axios.md) ^1.6.3
- [react](https://npm.io/package/react.md) ^18.2.0
- [formik](https://npm.io/package/formik.md) ^2.4.5
- [mongodb](https://npm.io/package/mongodb.md) ^6.2.0
- [postcss](https://npm.io/package/postcss.md) ^8.4.31
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [ts-loader](https://npm.io/package/ts-loader.md) ^9.5.1
- [css-loader](https://npm.io/package/css-loader.md) ^6.9.0
- [tailwindcss](https://npm.io/package/tailwindcss.md) ^3.3.5
- [autoprefixer](https://npm.io/package/autoprefixer.md) ^10.4.16
- [lucide-react](https://npm.io/package/lucide-react.md) ^0.311.0
- [style-loader](https://npm.io/package/style-loader.md) ^3.3.4
- [postcss-loader](https://npm.io/package/postcss-loader.md) ^8.0.0
- [tailwind-merge](https://npm.io/package/tailwind-merge.md) ^2.2.0
- [@heroicons/react](https://npm.io/package/@heroicons/react.md) ^2.0.18
- [@ant-design/icons](https://npm.io/package/@ant-design/icons.md) ^5.2.6
- [@headlessui/react](https://npm.io/package/@headlessui/react.md) ^1.7.17
- [@plasmicpkgs/antd](https://npm.io/package/@plasmicpkgs/antd.md) ^2.0.108
- [rollup-plugin-dts](https://npm.io/package/rollup-plugin-dts.md) ^6.1.0
- [@plasmicpkgs/antd5](https://npm.io/package/@plasmicpkgs/antd5.md) ^0.0.210
- [tailwindcss-animate](https://npm.io/package/tailwindcss-animate.md) ^1.0.7
- [@radix-ui/react-slot](https://npm.io/package/@radix-ui/react-slot.md) ^1.0.2
- [@radix-ui/react-tabs](https://npm.io/package/@radix-ui/react-tabs.md) ^1.0.4
- [@rollup/plugin-babel](https://npm.io/package/@rollup/plugin-babel.md) ^6.0.4
- [react-error-boundary](https://npm.io/package/react-error-boundary.md) ^4.0.12
- [rollup-plugin-terser](https://npm.io/package/rollup-plugin-terser.md) ^7.0.2
- [@plasmicapp/react-web](https://npm.io/package/@plasmicapp/react-web.md) ^0.2.315
- [@radix-ui/react-label](https://npm.io/package/@radix-ui/react-label.md) ^2.0.2
- [@radix-ui/react-avatar](https://npm.io/package/@radix-ui/react-avatar.md) ^1.0.4
- [@radix-ui/react-dialog](https://npm.io/package/@radix-ui/react-dialog.md) ^1.0.5
- [@radix-ui/react-switch](https://npm.io/package/@radix-ui/react-switch.md) ^1.0.3
- [@rollup/plugin-replace](https://npm.io/package/@rollup/plugin-replace.md) ^5.0.5
- [@radix-ui/react-menubar](https://npm.io/package/@radix-ui/react-menubar.md) ^1.0.4
- [@radix-ui/react-popover](https://npm.io/package/@radix-ui/react-popover.md) ^1.0.7
- [@rollup/plugin-commonjs](https://npm.io/package/@rollup/plugin-commonjs.md) ^25.0.7
- [class-variance-authority](https://npm.io/package/class-variance-authority.md) ^0.7.0
- [@plasmicpkgs/lottie-react](https://npm.io/package/@plasmicpkgs/lottie-react.md) ^0.0.175
- [@plasmicpkgs/plasmic-tabs](https://npm.io/package/@plasmicpkgs/plasmic-tabs.md) ^0.0.28
- [@ant-design/pro-components](https://npm.io/package/@ant-design/pro-components.md) ^2.6.43
- [@rollup/plugin-node-resolve](https://npm.io/package/@rollup/plugin-node-resolve.md) ^15.2.3
- [@radix-ui/react-dropdown-menu](https://npm.io/package/@radix-ui/react-dropdown-menu.md) ^2.0.6
- [@plasmicpkgs/plasmic-embed-css](https://npm.io/package/@plasmicpkgs/plasmic-embed-css.md) ^0.1.173
- [@plasmicpkgs/react-awesome-reveal](https://npm.io/package/@plasmicpkgs/react-awesome-reveal.md) ^3.8.189
- [@plasmicpkgs/plasmic-rich-components](https://npm.io/package/@plasmicpkgs/plasmic-rich-components.md) ^1.0.175
- [@plasmicpkgs/plasmic-basic-components](https://npm.io/package/@plasmicpkgs/plasmic-basic-components.md) ^0.0.207

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 0.0.27 (latest) — 2024-01-24
- 0.0.26 — 2024-01-22
- 0.1.0 — 2024-01-20
- 0.0.25 — 2024-01-20
- 0.0.24 — 2024-01-19
- 0.0.23 — 2024-01-19
- 0.0.22 — 2024-01-19
- 0.0.21 — 2024-01-19
- 0.0.20 — 2024-01-18
- 0.0.18 — 2024-01-18
- 0.0.17 — 2024-01-17
- 0.0.16 — 2024-01-17
- 0.0.15 — 2024-01-17
- 0.0.14 — 2024-01-17
- 0.0.13 — 2024-01-17
- … 9 more at https://npm.io/package/propro-shared-components/versions

## README

# propro-shared-components

propro-shared-components is a comprehensive suite of reusable React components and authentication hooks, tailored for seamless integration with a custom authentication system. It provides a consistent user interface and authentication logic across various parts of your application, such as HubHub, MapMap, ProPro-Admin, StreamBreak, StampStamp, and others.

## Features

- `ProProUserButton`: A button component for handling user sign-in and sign-out actions.
- `proproAuth`: A collection of hooks and utilities for managing authentication state and logic.
- `AccountManagementPopup`: A component that provides a user interface for managing account details and security settings.

## Installation

Install `propro-shared-components` with npm or yarn:

```bash
yarn add propro-shared-components
# or
npm install propro-shared-components

```

## Usage

Below are examples and descriptions of how to use the components and `hooks` provided by `propro-shared-components`.

### `ProProUserButton`

`ProProUserButton` is a customizable button for user sign-in and sign-out. It can be used as a standalone component or as a child component of `ProProUserMenu`.

#### Props

| Name              | Type     | Default | Description                                      |
| ----------------- | -------- | ------- | ------------------------------------------------ |
| `afterSignOutUrl` | `string` | `null`  | The URL to redirect to after the user signs out. |

#### Example

```jsx
import React from 'react';
import { ProProUserButton } from 'propro-shared-components';

import { ProProUserButton } from 'propro-shared-components';

const Header = ({ afterSignOutUrl }) => (
  <header>
    {/* ... our other header content ... */}
    <ProProUserButton afterSignOutUrl={afterSignOutUrl} />
  </header>
);

export default Header;
```

### `proproAuth`

`proproAuth` is a set of hooks and utilities to manage authentication state and logic.

#### `useAuth()`

`useAuth()` is a React hook that returns an object with the following properties:

| Name              | Type       | Description                               |
| ----------------- | ---------- | ----------------------------------------- |
| `user`            | `object`   | The user object returned by `proproAuth`. |
| `isAuthenticated` | `boolean`  | Whether the user is authenticated.        |
| `isLoading`       | `boolean`  | Whether the user is being loaded.         |
| `signIn`          | `function` | A function to sign in the user.           |
| `signOut`         | `function` | A function to sign out the user.          |
| `refreshUser`     | `function` | A function to refresh the user.           |

#### Example

```jsx
import React from 'react';
import { useAuth } from 'propro-components';

const Header = ({ afterSignOutUrl }) => {
  const { user, isAuthenticated, isLoading, signIn, signOut } = useAuth();

  return (
    <header>
      {/* ... our other header content ... */}
      {isAuthenticated ? (
        <button onClick={signOut}>Sign Out</button>
      ) : (
        <button onClick={signIn}>Sign In</button>
      )}
    </header>
  );
};

export default Header;
```

#### `withAuth()`

`withAuth()` is a higher-order component that injects the `proproAuth` object into a component's props.

#### Example

```jsx
import React from 'react';
import { withAuth } from 'propro-components';

const Header = ({ afterSignOutUrl, proproAuth }) => {
  const { user, isAuthenticated, isLoading, signIn, signOut } = proproAuth;

  return (
    <header>
      {/* ... our other header content ... */}
      {isAuthenticated ? (
        <button onClick={signOut}>Sign Out</button>
      ) : (
        <button onClick={signIn}>Sign In</button>
      )}
    </header>
  );
};

export default withProProAuth(Header);
```

### AccountManagementPopup

A component that displays a modal for users to manage their account and security settings.

#### Props

| Name      | Type       | Default | Description                                  |
| --------- | ---------- | ------- | -------------------------------------------- |
| `user`    | `object`   | `null`  | The user object returned by `proproAuth`.    |
| `onClose` | `function` | `null`  | A function to call when the modal is closed. |

#### Example

The `AccountManagementPopup` component can be used as a standalone component or as a child component of `ProProUserMenu`.

```jsx
import React from 'react';
import { AccountManagementPopup } from 'propro-components';

const Header = ({ afterSignOutUrl }) => {
  const { user, isAuthenticated, isLoading, signIn, signOut } = useAuth();
  const [showAccountManagement, setShowAccountManagement] = useState(false);

  return (
    <header>
      {/* ... our other header content ... */}
      {isAuthenticated ? (
        <>
          <button onClick={signOut}>Sign Out</button>
          <button onClick={() => setShowAccountManagement(true)}>
            Manage Account
          </button>
          {showAccountManagement && (
            <AccountManagementPopup
              user={user}
              onClose={() => setShowAccountManagement(false)}
            />
          )}
        </>
      ) : (
        <button onClick={signIn}>Sign In</button>
      )}
    </header>
  );
};
```

---
_Source: https://npm.io/package/propro-shared-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._