open-index/open-npm huggingface dataset:
npm package: @ring-3/better-auth-cli
Description: The CLI for Better Auth
Latest version: 1.3.7

# Better Auth CLI

Better Auth comes with a built-in CLI to help you manage the database schema needed for both core functionality and plugins.


### **Init**

The CLI includes an `init` command to add Better Auth to your project.

```bash title="terminal"
npx @ring-3/better-auth-cli@latest init
```

### **Generate**

The `generate` command creates the schema required by Better Auth. If you're using a database adapter like Prisma or Drizzle, this command will generate the right schema for your ORM. If you're using the built-in Kysely adapter, it will generate an SQL file you can run directly on your database.

```bash title="terminal"
npx @ring-3/better-auth-cli@latest generate
```

### **Migrate**

The `migrate` command applies the Better Auth schema directly to your database. This is available if you’re using the built-in Kysely adapter. For other adapters, you'll need to apply the schema using your ORM's migration tool.

```bash title="terminal"
npx @ring-3/better-auth-cli@latest migrate
```

### **Secret**

The CLI also provides a way to generate a secret key for your Better Auth instance.

```bash title="terminal"
npx @ring-3/better-auth-cli@latest secret
```


## License

MIT
npm package: @ring-protocol/few-v2-sdk
Description: 🛠 An SDK for building applications on top of Uniswap V2 (Few Protocol)
Latest version: 0.1.14

# Uniswap V2 SDK

[![npm version](https://img.shields.io/npm/v/@uniswap/v2-sdk/latest.svg)](https://www.npmjs.com/package/@uniswap/v2-sdk/v/latest)
[![npm bundle size (scoped version)](https://img.shields.io/bundlephobia/minzip/@uniswap/v2-sdk/latest.svg)](https://bundlephobia.com/result?p=@uniswap/v2-sdk@latest)

In-depth documentation on this SDK is available at [uniswap.org](https://uniswap.org/docs/v2/SDK/getting-started/).
npm package: @ring-protocol/router-sdk
Description: An sdk for routing swaps using Uniswap v2 and Uniswap v3.
Latest version: 0.1.37

# Alpha software

The latest version of the SDK is used in production in the Uniswap Interface,
but it is considered Alpha software and may contain bugs or change significantly between patch versions.
If you have questions about how to use the SDK, please reach out in the `#dev-chat` channel of the Discord.
Pull requests welcome!

# Uniswap Swap Router SDK

This SDK is meant to facilitate interactions with the contracts in [swap-router-contracts](https://github.com/Uniswap/swap-router-contracts).
npm package: @ring-protocol/sdk-core
Description: Shared TypeScript primitives for Ring SDK packages
Latest version: 1.0.0

# Ring Protocol SDK Core

[![npm version](https://img.shields.io/npm/v/@ring-protocol/sdk-core/latest.svg)](https://www.npmjs.com/package/@ring-protocol/sdk-core/v/latest)
[![npm bundle size (scoped version)](https://img.shields.io/bundlephobia/minzip/@ring-protocol/sdk-core/latest.svg)](https://bundlephobia.com/result?p=@ring-protocol/sdk-core@latest)

This package contains the shared primitives used across the public Ring SDK packages.
npm package: @ring-protocol/smart-wallet-sdk
Description: ⚒️ An SDK for building applications with smart wallets on Uniswap
Latest version: 0.1.4

# Smart Wallet SDK

⚒️ An SDK for building applications with smart wallets on Uniswap

This SDK provides utilities for interacting with Uniswap protocols using smart wallets.

## Installation

```bash
npm install @uniswap/smart-wallet-sdk
```

or

```bash
yarn add @uniswap/smart-wallet-sdk
```

## Deployment Addresses

Below is a table of the most recent contract deployment addresses across various networks:

| Network | Address | Commit Hash | Version |
|---------|---------|------------|---------|
| Mainnet | 0x000000009B1D0aF20D8C6d0A44e162d11F9b8f00 | 35d80918e120d177a49d3d90bcd4dd011caedd32 | v1.0.0 |
| Unichain | 0x000000009B1D0aF20D8C6d0A44e162d11F9b8f00 | 35d80918e120d177a49d3d90bcd4dd011caedd32 | v1.0.0 |
| Base | 0x000000009B1D0aF20D8C6d0A44e162d11F9b8f00 | 35d80918e120d177a49d3d90bcd4dd011caedd32 | v1.0.0 |
| Optimism | 0x000000009B1D0aF20D8C6d0A44e162d11F9b8f00 | 35d80918e120d177a49d3d90bcd4dd011caedd32 | v1.0.0 |
| BNB Chain | 0x000000009B1D0aF20D8C6d0A44e162d11F9b8f00 | 35d80918e120d177a49d3d90bcd4dd011caedd32 | v1.0.0 |
| Arbitrum One | 0x000000009B1D0aF20D8C6d0A44e162d11F9b8f00 | 35d80918e120d177a49d3d90bcd4dd011caedd32 | v1.0.0 |
| Unichain Sepolia | 0x000000009B1D0aF20D8C6d0A44e162d11F9b8f00 | 35d80918e120d177a49d3d90bcd4dd011caedd32 | v1.0.0 |
| Sepolia | 0x000000009B1D0aF20D8C6d0A44e162d11F9b8f00 | 35d80918e120d177a49d3d90bcd4dd011caedd32 | v1.0.0 |

## Documentation

Coming soon...

## License

MIT
npm package: @ring-protocol/uniswap-v2-sdk
Description: Lower-level Uniswap V2-style SDK primitives for Ring integrations
Latest version: 1.0.0

# Ring Protocol Uniswap V2 SDK

[![npm version](https://img.shields.io/npm/v/@ring-protocol/uniswap-v2-sdk/latest.svg)](https://www.npmjs.com/package/@ring-protocol/uniswap-v2-sdk/v/latest)
[![npm bundle size (scoped version)](https://img.shields.io/bundlephobia/minzip/@ring-protocol/uniswap-v2-sdk/latest.svg)](https://bundlephobia.com/result?p=@ring-protocol/uniswap-v2-sdk@latest)

This package exposes the lower-level Uniswap V2-style primitives used by Ring integrations. For normal Ring Swap application work, prefer `@ring-protocol/v2-sdk`.
npm package: @ring-protocol/uniswapx-sdk
Description: SDK for the UniswapX protocol
Author: Uniswap
Latest version: 0.1.4

# uniswapx-sdk

SDK for the UniswapX protocol

## Usage

The SDK contains bindings for two main flows: parsing serialized orders & building new orders.

### Building & Signing Orders

```ts
import { DutchOrder, NonceManager } from '@uniswap/uniswapx-sdk';
import { ethers } from 'ethers';

const provider = new ethers.providers.JsonRpcProvider(RPC_URL);
const account = await provider.getSigner().getAddress(); 
const nonceMgr = new NonceManager(provider, 1); 
const nonce = await nonceMgr.useNonce(account); 

const chainId = 1;
const builder = new DutchOrderBuilder(chainId);
const order = builder
  .deadline(deadline)
  .decayEndTime(deadline)
  .decayStartTime(deadline - 100)
  .nonce(nonce)
  .input({
    token: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
    amount: BigNumber.from('1000000'),
  })
  .output({
    token: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2',
    startAmount: BigNumber.from('1000000000000000000'),
    endAmount: BigNumber.from('900000000000000000'),
    recipient: '0x0000000000000000000000000000000000000000',
  })
  .build();
 
// Sign the built order 
const { domain, types, values } = order.permitData();
const signature = wallet._signTypedData(domain, types, values);

const serializedOrder = order.serialize();
// submit serializedOrder and signature to order pool
```

### Parsing Orders
```ts
import { DutchOrder, Order } from '@uniswap/uniswapx-sdk';

const serializedOrder = '0x1111222233334444555500000000234300234...';
const chainId = 1; 

const order: Order = DutchOrder.parse(serializedOrder, chainId);

const orderData = order.info;
const orderHash = order.hash();
```
### Validating Orders 
```ts
import { ethers } from 'ethers';
import { OrderValidator } from 'uniswapx-sdk';

const provider = new ethers.providers.JsonRpcProvider(RPC_URL);
const validator = new OrderValidator(provider, CHAIN_ID); 
const orders: SignedOrder[] = [
  {
    order: order1, 
    signature: signature1
  }, 
  {
    order: order2, 
    signature: signature2
  }
]; 

try {
  const statusList: OrderValidation[] = await validator.validateBatch(orders); 
  // Do something with list of statuses 
}
catch(e) {
  // Handle error
}

```

### Order Object

**serialize()**

Returns an abi-encoded serialization of the order. This serialized format is passed into the corresponding reactor contract for execution.


**getSigner(signature)**

Recovers the address which created the given signature over the order. Used to determine the order maker.


**permitData()**

Returns the domain, types, and values used to generate an EIP-712 signature over the order. Note that this signature both approves the release of the order's input tokens _and_ the execution of the order itself.


**hash()**

Returns the order hash. This is used as a key to track order fulfillment on-chain. It may also be useful as a unique order identifier for off-chain purposes.
npm package: @ring-protocol/universal-router-sdk
Description: sdk for integrating with the Universal Router contracts
Latest version: 0.1.40

# universal-router-sdk
This SDK facilitates interactions with the contracts in [Universal Router](https://github.com/Uniswap/universal-router)

## Usage
Install latest version of universal-router-sdk. Then import the corresponding Trade class and Data object for each protocol you'd like to interact with.

### Trading on Uniswap
warning: `swapERC20CallParameters()` to be deprecated in favor of `swapCallParameters()`
```typescript
import { TradeType } from '@uniswap/sdk-core'
import { Trade as V2TradeSDK } from '@uniswap/v2-sdk'
import { Trade as V3TradeSDK } from '@uniswap/v3-sdk'
import { MixedRouteTrade, MixedRouteSDK, Trade as RouterTrade } from '@uniswap/router-sdk'

const options = { slippageTolerance, recipient }
const routerTrade = new RouterTrade({ v2Routes, v3Routes, mixedRoutes, tradeType: TradeType.EXACT_INPUT })
// Use the raw calldata and value returned to call into Universal Swap Router contracts
const { calldata, value } = SwapRouter.swapCallParameters(routerTrade, options)
```

## Running this package
Make sure you are running `node v18`
Install dependencies and run typescript unit tests
```bash
yarn install
yarn test:hardhat
```

Run forge integration tests
```bash
forge install
yarn test:forge
```
npm package: @ring-protocol/v2-sdk
Description: FEW-aware v2 SDK for Ring Swap integrations
Latest version: 1.0.0

# Ring Protocol v2 SDK

[![npm version](https://img.shields.io/npm/v/@ring-protocol/v2-sdk/latest.svg)](https://www.npmjs.com/package/@ring-protocol/v2-sdk/v/latest)
[![npm bundle size (scoped version)](https://img.shields.io/bundlephobia/minzip/@ring-protocol/v2-sdk/latest.svg)](https://bundlephobia.com/result?p=@ring-protocol/v2-sdk@latest)

This is the FEW-aware SDK for Ring Swap integrations. It includes FewToken helpers, chain-aware pair address logic, and Ring-specific routing behavior.
npm package: @ring-protocol/v3-sdk
Description: ⚒️ An SDK for building applications on top of Uniswap V3
Latest version: 0.1.10

# Alpha software

The latest version of the SDK is used in production in the Uniswap Interface,
but it is considered Alpha software and may contain bugs or change significantly between patch versions.
If you have questions about how to use the SDK, please reach out in the `#dev-chat` channel of the Discord.
Pull requests welcome!

# Uniswap V3 SDK

[![npm version](https://img.shields.io/npm/v/@uniswap/v3-sdk/latest.svg)](https://www.npmjs.com/package/@uniswap/v3-sdk/v/latest)
[![npm bundle size (scoped version)](https://img.shields.io/bundlephobia/minzip/@uniswap/v3-sdk/latest.svg)](https://bundlephobia.com/result?p=@uniswap/v3-sdk@latest)

In-depth documentation on this SDK is available at [uniswap.org](https://docs.uniswap.org/).
npm package: @ringcentral-integration/engage-voice-widgets
Description: RingCentral Engage Voice Integration Widget Library
Author: RingCentral Integrations Team
Latest version: 0.16.0

# Engage Voice widgets lib

This project is a UI widgets library to help developers create Engage Voice widget easily to link client agent controls to the Engage Voice system.

## Dependences

This project depends on:

* React
* [RingCentral Widgets](https://github.com/ringcentral/ringcentral-js-widgets)

## Usage

```
yarn add @ringcentral-integration/engage-voice-widgets
```

Import modules:

```js
import { EvClient } from '@ringcentral-integration/engage-voice-widgets/lib/EvClient';
import { EvActiveCallControl } from '@ringcentral-integration/engage-voice-widgets/modules/EvActiveCallControl';
import { EvActiveCallListUI } from '@ringcentral-integration/engage-voice-widgets/modules/EvActiveCallListUI';
import { EvAuth } from '@ringcentral-integration/engage-voice-widgets/modules/EvAuth';
import { EvCall } from '@ringcentral-integration/engage-voice-widgets/modules/EvCall';
```

Import UI containers

```js
import { AppView } from '@ringcentral-integration/engage-voice-widgets/containers/AppView';
import { DialerPage } from '@ringcentral-integration/engage-voice-widgets/containers/DialerPage';
import { InboundQueuesPage } from '@ringcentral-integration/engage-voice-widgets/containers/InboundQueuesPage';
import { LoginPage } from '@ringcentral-integration/engage-voice-widgets/containers/LoginPage';
import { MainViewPage } from '@ringcentral-integration/engage-voice-widgets/containers/MainViewPage';
import { ManualDialSettingsPage } from '@ringcentral-integration/engage-voice-widgets/containers/ManualDialSettingsPage';
```
npm package: @ringcentral-integration/glip-widgets
Description: RingCentral Integration Glip Widgets Library
Author: RingCentral Integrations Team
Latest version: 0.2.0

# RingCentral Glip widgets

## Introduction

RingCentral integration widgets aim to provide reusable UI components to allow developers to integrate RingCentral unified communication service into third party processes or tools more easily.
npm package: @ringcentral-integration/micro-coworker
Description: Coworker micro-frontend module for RingCentral Integration next-generation architecture.
Author: RingCentral Integration Team
Latest version: 0.0.1

# RingCentral Coworker

## Introduction

`RingCentral Coworker` is used to solve the following three issue:

-   Concurrent requests limit
-   Contact searching performance
-   Contact matching performance

The API `createAppWithCoworker` has built-in `AddressBook`, `CompanyContacts`,`ContactMatcher` and `ContactSearch` related modules.

## Usage

```ts
yarn add @ringcentral-integration/micro-coworker
```

In main process:

```ts
import { createAppWithCoworker } from '@ringcentral-integration/micro-coworker/src/bootstrap';

createAppWithCoworker({
    // ...app options
    share: {
        name: 'app-demo',
        type: 'Base',
        coworker: {
            isCoworker: false,
            worker,
        },
    },
});
```

In coworker process:

```ts
import { createAppWithCoworker } from '@ringcentral-integration/micro-coworker/src/bootstrap';

createAppWithCoworker({
    // ...app options
    share: {
        name: 'app-demo',
        type: 'Base',
        coworker: {
            isCoworker: true,
        },
    },
});
```

### Coworker Options

### ProxyFetcherOptions

You can add new proxy fetcher modules by `enabledProxyModules`.

```ts
{
    provide: 'ProxyFetcherOptions',
    useFactory: (clientInfo) => {
        return {
            enabledProxyModules: [clientInfo],
        } satisfies ProxyFetcherOptions;
    },
    deps: [ClientInfo],
},
```

### ProxyExecutorOptions

You can add new proxy executor modules by `enabledProxyModules`.

```ts
    {
        provide: 'ProxyExecutorOptions',
        useValue: {
            enabledProxyModules: [NumberValidate],
        } satisfies ProxyExecutorOptions,
    },
```
npm package: @ringcentral-integration/micro-next-commons
Description: Common libraries and re-exports for RingCentral Integration micro-frontend modules.
Author: RingCentral Integration Team
Latest version: 0.0.1

# Micro Commons

## Introduction

This is a RC commons that can be used to RC CRM integrations. It is designed to be used in a micro-frontend environment and a non-micro-frontend environment.

## Usage with MFE mode

Below is the list of module exports for the micro-frontend for all RC business services:

```json
{
    "./src/micro-auth/services": "./src/micro-auth/services",
    "./src/micro-auth/views": "./src/micro-auth/views",
    "./src/micro-contacts/services": "./src/micro-contacts/services",
    "./src/micro-contacts/views": "./src/micro-contacts/views",
    "./src/micro-core/hooks": "./src/micro-core/hooks",
    "./src/micro-core/plugins": "./src/micro-core/plugins",
    "./src/micro-core/services": "./src/micro-core/services",
    "./src/micro-core/views": "./src/micro-core/views",
    "./src/micro-meeting/services": "./src/micro-meeting/services",
    "./src/micro-meeting/views": "./src/micro-meeting/views",
    "./src/micro-message/services": "./src/micro-message/services",
    "./src/micro-message/views": "./src/micro-message/views",
    "./src/micro-phone/services": "./src/micro-phone/services",
    "./src/micro-phone/views": "./src/micro-phone/views",
    "./src/micro-setting/services": "./src/micro-setting/services",
    "./src/micro-setting/views": "./src/micro-setting/views"
}
```

Due to the module sharing of the micro-frontend, all relevant RC modules can be referenced via `@ringcentral-integration/micro-next-commons`.

For example:

```diff
- import { Auth } from '@ringcentral-integration/micro-auth/src/app/services';
+ import { Auth } from '@ringcentral-integration/micro-next-commons/src/micro-auth/services';
```
npm package: @ringcentral-integration/next-builder
Description: Build tools and webpack configuration for RingCentral Integration next-generation architecture.
Author: RingCentral Integration Team
Latest version: 0.0.1

# @ringcentral-integration/next-builder

The `@ringcentral-integration/next-builder` is a library that provides a set of tools to help build RingCentral brand pages.

That will use `project.config.json` to generate the webpack configuration.

for for details, please refer to [project.config.schema.json](./src/projectConfigSchema.json)

## CLI options

-   `--pages` specify the pages that defined in `pages` item's `main` file name without extension
-   `--exclude-pages` excludes pages that defined in `pages` item's `main` file name without extension
-   `--build-env` specify the build env that defined in `environment`
-   `--brand` specify the build brand, after define `--build-env`, by default, it will use the brand that defined in `environment`'s `brand` items, if you want to override it, you can use this option

## Example

```bash
yarn build --pages=proxy --pages=redirect --build-env=prod --brand=rc
```

## MFE CLI

- Get all MFE info:

```bash
yarn mfe
```

- Get MFE info with dependencies:

```bash
yarn mfe --deps
```
npm package: @ringcentral-integration/next-micro
Description: Micro-frontend utilities for RingCentral Integration next-generation architecture.
Author: RingCentral Integration Team
Latest version: 0.0.1

# next-micro

`next-micro` is a library for building micro frontends with [ringcentral-mfe](https://github.com/ringcentral/ringcentral-mfe). It provides a set of APIs to help you build and manage micro frontends.

## Usage

You can install `next-micro` via npm:

```bash
npm install @ringcentral/next-micro
```

## APIs

You have three ways to use MFE with `ringcentral-mfe` in your project:
1. Using static import from an MFE module.
2. Use `next-micro` APIs to create an MFE module or an MFE app shell.
3. Only use `dynamicLoad()` API to load an MFE module.

If your module is part of an integrated project team, we generally prefer the first way unless there are special entry points. This way is simpler and does not require additional configurations.
If your module is using the ringcentral-mfe by an independent project team, we recommend using the second way. This way is more flexible and allows better control over the loading and rendering of the module.
If your module is from a third-party team, we recommend using the third way. This way is more flexible and can prevent third-party modules from impacting your project.

### useMicroApp()

It is a hook to load and render a micro app in a RcViewModule.

```tsx
import { useMicroApp } from '@ringcentral/next-micro';

class ExampleView extends RcMicroAppView {
    component() {
        const MicroCore = useMicroApp(this, {
            name: '@ringcentral-integration/micro-core',
            loader: () =>
                import('@ringcentral-integration/micro-core/src/bootstrap'),
        });
        return <MicroCore />;
    }
}
```

> You can need to set a site config `@ringcentral-integration/micro-core` in the app shell project.

### exposeMicroApp()

It is a function to expose a micro app to the global window object.

For example, `bootstrap.ts`:

```tsx
import { exposeMicroApp } from '@ringcentral-integration/next-micro';

import { AppView } from './app/App.view';

export default exposeMicroApp({
    modules: [
        //... modules
    ],
    main: AppView,
    share: {
        name: 'micro-core',
        type: 'Base',
    },
    renderRoot: () => document.getElementById('app'), // the element is rendered the micro app for locale dev mode
});
```

### RcMicroAppView

You can extend `RcMicroAppView` to create a view module for a micro app.

```tsx
import { injectable } from '@ringcentral-integration/next-core';
import { RcMicroAppView } from '@ringcentral-integration/next-micro';
import React from 'react';

@injectable({
    name: 'AppView',
})
export class AppView extends RcMicroAppView {
    component() {
        if (!this.isAppShell) return null;
        return <>mfe example content</>;
    }
}
```
npm package: @ringcentral-integration/next-widgets
Description: UI components and widgets for RingCentral Integration next-generation architecture.
Author: RingCentral Integration Team
Latest version: 0.0.1

# @ringcentral-integration/next-widgets

UI components and widgets for RingCentral Integration next-generation architecture.

## Installation

```bash
npm install @ringcentral-integration/next-widgets
# or
yarn add @ringcentral-integration/next-widgets
```

## License

MIT
npm package: @ringcentral-integration/rcui
Description: ## Install
Author: RingCentral Integration
Latest version: 0.1.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# RC UI

## Install

### package.json

```ts
npm i @ringcentral-integration/rcui
// or
yarn add @ringcentral-integration/rcui
```

## Basic Using

All components we using need contain in the `RcThemeProvider`.

```tsx
import {
  RcAvatar,
  RcTooltip,
  RcButton,
  RcIcon,
  RcLink,
  RcCircularProgress,
  RcThemeProvider,
} from '@ringcentral-integration/rcui';
```

```html
<RcThemeProvider>
  <RcAvatar color="lake">SH</RcAvatar>
  <RcButton variant="round">Button</RcButton>
  <RcLink>LINK</RcLink>
  <RcCircularProgress />
  <RcCircularProgress size="{30}" color="secondary" />
</RcThemeProvider>
```

## Custom Theme

You can custom theme by `theme` props with `RcThemeInput` object like below, all of option you can see type `RcThemeInput`;

```tsx
const defaultTheme: RcThemeInput = {
  palette: {
    primary: {
      main: '#0684bd',
    },
    ...
  },
};

const App = (props) => {
  return (
    <RcThemeProvider theme={theme}>
      <RcCircularProgress />
    </RcThemeProvider>
  );
};
```

## Using Icons

We can using any component with `symbol` props, using `react-svg-loader` to load svg as component.

There are some svg under this folder, you can import from `'@ringcentral-integration/rcui/icons/`, using like below.

```tsx
import phoneSvg from '@ringcentral-integration/rcui/icons/icon-phone.svg';

const App = (props) => {
  return (
    <RcThemeProvider>
      <RcIcon symbol={phoneSvg} />
    </RcThemeProvider>
  );
};
```
npm package: @ringcentral-integration/widgets
Description: RingCentral Integration Widget Library
Author: RingCentral Integrations Team
Latest version: 0.16.0

# ringcentral-js-widgets

[![Build Status](https://travis-ci.org/ringcentral/ringcentral-js-widgets.svg?branch=master)](https://travis-ci.org/ringcentral/ringcentral-js-widgets)
[![Coverage Status](https://coveralls.io/repos/github/ringcentral/ringcentral-js-widgets/badge.svg?branch=master)](https://coveralls.io/github/ringcentral/ringcentral-js-widgets?branch=master)
[![Codacy Badge](https://api.codacy.com/project/badge/Grade/81c5e5334eff454b9404b05b5c29e09b)](https://www.codacy.com/app/RingCentral/ringcentral-js-widgets?utm_source=github.com&utm_medium=referral&utm_content=ringcentral/ringcentral-js-widgets&utm_campaign=badger)


## Introduction

RingCentral integration widgets aim to provide reusable UI components to allow developers to integrate RingCentral unified communication service into third party processes or tools more easily.

This project is built based on [RingCentral Integration Common Library](https://www.npmjs.com/package/@ringcentral-integration/commons) and [React](https://facebook.github.io/react/). The basic idea is to connect modules in RingCentral Integration Common Library with React components to provide ready to use UI widgets.


## Get Started

We use [RingCentral Widgets CLI](https://github.com/ringcentral/ringcentral-js-widgets/tree/master/packages/ringcentral-widgets-cli/README.md) to startup a RingCentral Widgets based app.

```
$ npm install -g ringcentral-widgets-cli
$ rc-widgets -h
```

### Create a new project

```
rc-widgets new your_project_name
cd your_project_name
yarn install
```

[Update `.env` file in project root path](https://github.com/ringcentral/ringcentral-js-widgets/tree/master/packages/ringcentral-widgets-cli/README.md#start-developement-server).

### Start development server

```
$ yarn start
```
Visit on [http://localhost:8080](http://localhost:8080) in browser.

For production build and deploy, please get more information in [here](https://github.com/ringcentral/ringcentral-js-widgets/tree/master/packages/ringcentral-widgets-cli/README.md).

### Tutorials

This is a [demo](https://github.com/embbnux/ringcentral-widgets-demo) and [step-by-step tutorials](https://embbnux.github.io/ringcentral-widgets-demo/) show how to use this library.

## Tests

This packages's tests are included in [RingCentral Widget Test](https://github.com/ringcentral/ringcentral-js-widgets/tree/master/packages/ringcentral-widgets-test/README.md)
npm package: @ringcentral/easy-pkce
Description: A small typescript lib for generating code verifier and code exchange for the proof key of code exchange.
Author: RingCentral
Latest version: 1.0.1

# EASY-PKCE #

[![Build Status](https://github.com/ringcentral/easy-pkce/workflows/CI%20Pipeline/badge.svg?branch=develop)](https://github.com/ringcentral/easy-pkce/actions)
[![NPM version](https://img.shields.io/npm/v/@ringcentral/easy-pkce.svg?style=flat-square)](https://www.npmjs.com/package/@ringcentral/easy-pkce)
## Description ##

EASY-PKCE project is a small lib that generates strings for PKCE, as known as Proof Key for Code Exchange. PKCE is a mechanism that came into being to make the use of OAuth 2.0 Authorization Code grant more secure in certain cases. It was originally designed to protect mobile apps, but its ability to prevent authorization code injection makes it useful for every OAuth client, even web apps that use a client secret.

## Usages ##

```ts
import {
  generateCodeChallenge,
  generateCodeVerifier,
  generateState,
  generateRandomString,
} from 'easy-pkce';

// get a base64url-encoded random string from a 32-octet sequence
const randomString = generateRandomString(32);

// get a url safe code verifier from a random 42-octet sequence
const codeVerifier_1 = generateCodeVerifier(42);
const codeVerifier_2 = generateCodeVerifier(); // default octet length is 32

// get a url safe state from a random 12-octet sequence
const state_1 = generateState(12);
const state_2 = generateState(); // default octet length is 32

// get the code challenge from the code verifier
const codeChallenge_1 = generateCodeChallenge(codeVerifier_1, 'plain'); // plain version
const codeChallenge_2 = generateCodeChallenge(codeVerifier_2, 'S256'); // S256 version

// get a pair of code verifier and code challenge
const {codeVerifier, codeChallenge} = generatePair("S256", 32);
```

## LICENSE [MIT](LICENSE) ##
npm package: @ringcentral/freemium-signin
Description: ## Installation
Author: Embbnux Ji
Latest version: 0.0.1

# RingCentral Freemium SignIn SDK

## Installation

### Use npm or yarn

```shell
$ npm install @ringcentral/freemium-signin whatwg-fetch --save
```

**Notice**: To support old Browsers, please import `whatwg-fetch` for fetch lib polyfill

```js
import 'whatwg-fetch';
```

### CDN

```html
<script type="text/javascript" src="https://unpkg.com/whatwg-fetch@latest/dist/fetch.umd.js"></script>
<script type="text/javascript" src="https://unpkg.com/@ringcentral/freemium-signin@latest/dist/ringcentral-freemium-signin.js"></script>
```

**Notice**: Fetch polyfill is required for old Browsers.


## Usage

For NPM

```js
import { FreemiumSignIn } from '@ringcentral/freemium-signin';

const rcSignIn = new FreemiumSignIn({
  appHost: 'ringcentral_app_host'
});
```

For CDN

```js
var rcSignIn = new RingCentral.FreemiumSignIn({
  appHost: 'ringcentral_app_host'
});
```

### Send email to confirm registration

```js
rcSignIn.register({
  email: 'email_address',
  brandId: 'brand_id',
  contractedCountry: "83", // optional
  locale: "fr-FR" // optional
});
```

## Run the demo

Clone this project

```bash
$ npm install
$ npm run build
$ npm start
```

Then visit `http://localhost:8080/demo/index.html`
npm package: @ringcentral/juno
Description: ![Static Badge](https://img.shields.io/badge/juno-core-f54785) [![NPM version](https://img.shields.io/npm/v/@ringcentral/juno/latest.svg)](https://www.npmjs.com/package/@ringcentral/juno)
Author: RingCentral
Latest version: 2.52.0
npm package: @ringcentral/mfe-builder
Description: A micro frontends framework for building Web applications
Author: RingCentral
Latest version: 0.4.18

# @ringcentral/mfe-builder

![Node CI](https://github.com/ringcentral/ringcentral-mfe/workflows/Node%20CI/badge.svg)

A micro frontends framework for building Web applications

## Usage

```bash
npm install @ringcentral/mfe-builder
# or
yarn add @ringcentral/mfe-builder
```

You can visit [https://github.com/ringcentral/ringcentral-mfe](https://github.com/ringcentral/ringcentral-mfe) for more documentation.
npm package: @ringcentral/mfe-cli
Description: A micro frontends framework for building Web applications
Author: RingCentral
Latest version: 0.4.18

# @ringcentral/mfe-cli

![Node CI](https://github.com/ringcentral/ringcentral-mfe/workflows/Node%20CI/badge.svg)

A micro frontends framework for building Web applications

## Usage

```bash
npm install @ringcentral/mfe-cli
# or
yarn add @ringcentral/mfe-cli
```

You can visit [https://github.com/ringcentral/ringcentral-mfe](https://github.com/ringcentral/ringcentral-mfe) for more documentation.
npm package: @ringcentral/mfe-core
Description: A micro frontends framework for building Web applications
Author: RingCentral
Latest version: 0.4.18

# @ringcentral/mfe-core

![Node CI](https://github.com/ringcentral/ringcentral-mfe/workflows/Node%20CI/badge.svg)

A micro frontends framework for building Web applications

## Usage

```bash
npm install @ringcentral/mfe-core
# or
yarn add @ringcentral/mfe-core
```

You can visit [https://github.com/ringcentral/ringcentral-mfe](https://github.com/ringcentral/ringcentral-mfe) for more documentation.
npm package: @ringcentral/mfe-react
Description: A micro frontends framework for building Web applications
Author: RingCentral
Latest version: 0.4.18

# @ringcentral/mfe-react

![Node CI](https://github.com/ringcentral/ringcentral-mfe/workflows/Node%20CI/badge.svg)

A micro frontends framework for building Web applications

## Usage

```bash
npm install @ringcentral/mfe-react
# or
yarn add @ringcentral/mfe-react
```

You can visit [https://github.com/ringcentral/ringcentral-mfe](https://github.com/ringcentral/ringcentral-mfe) for more documentation.
npm package: @ringcentral/mfe-sentry
Description: A micro frontends framework for building Web applications
Author: RingCentral
Latest version: 0.4.18

# @ringcentral/mfe-sentry

![Node CI](https://github.com/ringcentral/ringcentral-mfe/workflows/Node%20CI/badge.svg)

A micro frontends framework for building Web applications

## Usage

```bash
npm install @ringcentral/mfe-sentry
# or
yarn add @ringcentral/mfe-sentry
```

You can visit [https://github.com/ringcentral/ringcentral-mfe](https://github.com/ringcentral/ringcentral-mfe) for more documentation.

> Note: Sentry does not fully support micro-frontends, and the library cannot capture default errors in fetch() requests of sub-applications.

- Sentry 2023 and the JavaScript SDK: https://github.com/getsentry/sentry-javascript/discussions/5878
- Isolated exceptions/transactions (micro-frontends/browser extensions/3rd party scripts isolation) [request feedback] Micro Frontend support: https://github.com/getsentry/sentry-javascript/discussions/5217
- Sentry experimental features: https://docs.sentry.io/platforms/javascript/configuration/micro-frontend-support/

Based on Sentry experimental features, it relies on injecting `moduleMetadata` through webpack bundler. To reduce dependency on builders and improve ease of use, `@ringcentral/mfe-sentry` only provides runtime API.

```ts
interface MfeSentry {
    hub: Hub;
    client: BrowserClient;
    urls: string[];
    setTags: (tags: Record<string, any>) => void;
    setTag: (key: string, value: any) => void;
    setExtra: (key: string, value: any) => void;
    setExtras: (extras: Record<...>) => void;
    setUser: (user: User | null) => void;
}
```
npm package: @ringcentral/mfe-service-worker
Description: A micro frontends framework for building Web applications
Author: RingCentral
Latest version: 0.4.18

# @ringcentral/mfe-service-worker

![Node CI](https://github.com/ringcentral/ringcentral-mfe/workflows/Node%20CI/badge.svg)

A micro frontends framework for building Web applications

## Usage

```bash
npm install @ringcentral/mfe-service-worker
# or
yarn add @ringcentral/mfe-service-worker
```

You can visit [https://github.com/ringcentral/ringcentral-mfe](https://github.com/ringcentral/ringcentral-mfe) for more documentation.

1. init service worker

```ts
importScripts('/public-path/service-worker.mfe.js');

const subAppServiceWorkerManager = new mfe.SubAppServiceWorkerManager();

subAppServiceWorkerManager.listener();
```

2. register service worker

```ts
import mfe from '@ringcentral/mfe-service-worker';

await navigator.serviceWorker.register('/service-worker.js').then((res) => {
  console.log('[MAIN] register success');
});

// receive prefixes parmas which will match request path, if matched, will
// return cache file
mfe
  .registerSubApp({
    name: 'phone',
    scope: 'https://app.ringcentral.com/mfe/platform/23.2.10/',
    version: '0.0.1',
    manifestRelativePath: 'precache-manifest',
  })
  .then(() => {
    console.log('phone register success');
  });
```

3. add webpack plugin

```ts
import { GenerateManifestWebpackPlugin } from '@ringcentral/mfe-service-worker/generate-manifest-webpack-plugin';
{
    plugin: [
      new GenerateManifestWebpackPlugin();
    ]
}
```
npm package: @ringcentral/mfe-shared
Description: A micro frontends framework for building Web applications
Author: RingCentral
Latest version: 0.4.18

# @ringcentral/mfe-shared

![Node CI](https://github.com/ringcentral/ringcentral-mfe/workflows/Node%20CI/badge.svg)

A micro frontends framework for building Web applications

## Usage

```bash
npm install @ringcentral/mfe-shared
# or
yarn add @ringcentral/mfe-shared
```

You can visit [https://github.com/ringcentral/ringcentral-mfe](https://github.com/ringcentral/ringcentral-mfe) for more documentation.
npm package: @ringcentral/mfe-transport
Description: A micro frontends framework for building Web applications
Author: RingCentral
Latest version: 0.4.18

# @ringcentral/mfe-transport

![Node CI](https://github.com/ringcentral/ringcentral-mfe/workflows/Node%20CI/badge.svg)

A micro frontends framework for building Web applications

## Usage

```bash
npm install @ringcentral/mfe-transport
# or
yarn add @ringcentral/mfe-transport
```

You can visit [https://github.com/ringcentral/ringcentral-mfe](https://github.com/ringcentral/ringcentral-mfe) for more documentation.
npm package: @ringcentral/spring-base
Description: Core utilities, hooks, and foundational functionality for Spring UI components, providing essential building blocks for React applications
Author: RingCentral
Latest version: 1.9.0

# @ringcentral/spring-base

Core utilities and hooks for Spring UI.

Note: If you already use `@ringcentral/spring-ui`, these utilities are re-exported there. You can import them directly from `@ringcentral/spring-ui` (recommended), or from `@ringcentral/spring-base` if you only use the base package.


## Installation

Using yarn:

```bash
yarn add @ringcentral/spring-base
```

Using npm:

```bash
npm i @ringcentral/spring-base
```

## Usage

```ts
// If your app already installs @ringcentral/spring-ui (recommended)
import { twMerge } from '@ringcentral/spring-ui';

// Or, when using the package directly
import { twMerge } from '@ringcentral/spring-base';
```

## Utilities

### twMerge
Merge Tailwind classes with Spring UI class groups.

```ts
import { twMerge } from '@ringcentral/spring-base';

twMerge('typography-label', 'typography-detailBold');
// => 'typography-detailBold'
```

### Example Hook

```tsx
import * as React from 'react';
import { useDebounce } from '@ringcentral/spring-base';

function Search({ onQuery }: { onQuery: (q: string) => void }) {
  const [value, setValue] = React.useState('');
  const debounced = useDebounce(value, 300);
  React.useEffect(() => onQuery(debounced), [debounced, onQuery]);
  return <input value={value} onChange={e => setValue(e.target.value)} />;
}
```

## License

MIT
npm package: @ringcentral/spring-icon
Description: Comprehensive SVG icon library as React components, designed for Spring UI and modern React applications
Author: RingCentral
Latest version: 1.9.0

# @ringcentral/spring-icon

SVG icon set as React components, designed to work seamlessly with Spring UI.

## Installation

Using yarn:

```bash
yarn add @ringcentral/spring-icon
```

Using npm:

```bash
npm i @ringcentral/spring-icon
```

## Usage

Option A — With Spring UI `Icon` (recommended for consistent sizing and styles):

```tsx
import { Icon, ThemeProvider, suiLight } from '@ringcentral/spring-ui';
import { CallMd } from '@ringcentral/spring-icon';

export function Example() {
  return (
    <ThemeProvider theme={suiLight}>
      <Icon symbol={CallMd} aria-hidden />
    </ThemeProvider>
  );
}
```

Option B — Render the icon component directly:

```tsx
import { CallMd } from '@ringcentral/spring-icon';

export function Example() {
  return <CallMd className="w-6 h-6" aria-hidden />;
}
```

## License

MIT
npm package: @ringcentral/spring-theme
Description: Theme system and design tokens for Spring UI, providing Tailwind CSS configurations and multi-theme support
Author: RingCentral
Latest version: 1.9.0

# @ringcentral/spring-theme

Tailwind CSS plugin and theming system for Spring UI.

Note: If you already use `@ringcentral/spring-ui`, its theme APIs are re-exported from `@ringcentral/spring-ui`, so you don’t need to install this package separately.

## Installation

Using yarn:

```bash
yarn add @ringcentral/spring-theme
```

Using npm:

```bash
npm i @ringcentral/spring-theme
```

Note: For Tailwind/PostCSS setup instructions, see the `@ringcentral/spring-ui` README.


## Tailwind Configuration

Add the Spring plugin to your tailwind.config.js:

```js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    'node_modules/@ringcentral/spring-ui/**/*.js',
  ],
  plugins: [
    require('@ringcentral/spring-theme/tailwind')({
      // override: false, // optional: disable overriding default Tailwind tokens
    }),
  ],
};
```

## Usage

```tsx
// If your app already installs @ringcentral/spring-ui (recommended)
import { ThemeProvider, suiLight } from '@ringcentral/spring-ui';

// Or, when using the package directly
import { ThemeProvider, suiLight } from '@ringcentral/spring-theme';

function App() {
  return (
    <ThemeProvider theme={suiLight}>{/* your app */}</ThemeProvider>
  );
}
```

## License

MIT
npm package: @ringcentral/spring-ui
Description: A comprehensive React component library built with Tailwind CSS, featuring production-ready components
Author: RingCentral
Latest version: 1.9.0

# @ringcentral/spring-ui

Production-ready React component library built with Tailwind CSS.

## Installation

Using yarn:

```bash
yarn add @ringcentral/spring-ui
```

Using npm:

```bash
npm i @ringcentral/spring-ui
```

Note: @ringcentral/spring-theme and @ringcentral/spring-base are included and re-exported by `@ringcentral/spring-ui`.

## Quick Start

```tsx
import React from 'react';
import { Button, ThemeProvider, suiLight } from '@ringcentral/spring-ui';

export default function App() {
  return (
    <ThemeProvider theme={suiLight}>
      <Button variant="contained">Hello Spring</Button>
    </ThemeProvider>
  );
}
```

## Prerequisite

Make sure Tailwind CSS is installed and configured with PostCSS in your project.

postcss.config.js:
```js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};
```

Global CSS (e.g., src/index.css or styles/globals.css):
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```


## Tailwind Setup

Add the Spring Tailwind plugin in your tailwind.config.js and include Spring UI in content scanning. See the `@ringcentral/spring-theme` README for full options.

```js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    'node_modules/@ringcentral/spring-ui/**/*.js',
  ],
  plugins: [require('@ringcentral/spring-theme/tailwind')],
};
```

## License

MIT