open-index/open-npm huggingface dataset:
npm package: @react-business-ui/antd
Description: A react library developed with dumi
Latest version: 0.0.1

# react-business-ui

[![NPM version](https://img.shields.io/npm/v/react-business-ui.svg?style=flat)](https://npmjs.org/package/react-business-ui)
[![NPM downloads](http://img.shields.io/npm/dm/react-business-ui.svg?style=flat)](https://npmjs.org/package/react-business-ui)

A react library developed with dumi

## Usage

TODO

## Options

TODO

## Development

```bash
# install dependencies
$ cnpm install

# develop library by docs demo
$ cnpm start

# build library source code
$ cnpm run build

# build library source code in watch mode
$ cnpm run build:watch

# build docs
$ cnpm run docs:build

# check your project for potential problems
$ cnpm run doctor
```

## LICENSE

MIT
npm package: @react-cad/create-component
Description: Generator for a @react-cad design project
Author: React CAD Dev
Latest version: 0.23.0

# @react-cad/create-component

Generate a new @react-cad project.

# Usage

```
yarn create @react-cad/component my-component
cd my-component
yarn install
yarn start
```

or

```
npx @react-cad/create-component my-component
cd my-component
npm install
npm run start
```
npm package: @react-cad/storybook-addon
Description: Storybook Addon to render @react-cad projects in the browser
Author: React CAD Dev
Latest version: 0.3.2

# @react-cad/storybook-addon

A preset to preview @react-cad components in Storybook.

## Usage

Preferably, create a component with `@react-cad/create-component`.

Alternatively, set up a React Storybook in the usual way, and add the addon to `.storybook/main.js`:

```
module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@react-cad/storybook-addon",
  ],
};
```
npm package: @react-cad/storybook-framework
Description: Storybook renderer for @react-cad projects
Author: React CAD Dev
Latest version: 0.23.0

# @react-cad/storybook-framework

A framework to view @react-cad components in Storybook.

## Usage

Preferably, create a component with `@react-cad/create-component`.

Alternatively, set up a React Storybook in the usual way, add the framework to `.storybook/main.js`, use the webpack 5 builder and disable React fast refresh:

```
module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  framework: "@react-cad/storybook-framework",
  core: {
    builder: "webpack5",
  },
  reactOptions: {
    fastRefresh: false,
  },
};
```
npm package: @react-calendar/themed
Description: Checkout the documentation for this library at [React Calendar](https://reactcalendar.netlify.com)
Latest version: 0.3.0

# React Calendar Themed 

Checkout the documentation for this library at [React Calendar](https://reactcalendar.netlify.com)

# Getting Started

This library provides many useful components that integrate the [Theme UI](https://theme-ui.com) library and 
the `@react-calendar/core` library together. The main thing this library provides is components that can be easily 
dropped into the core library but also have [theme-ui variants](https://theme-ui.com/guides/variants) to make it
easy to style your calendar in a way that is consistent to your site or app's overal theme.

## Installing 

### NPM 

```bash 
npm install --save @react-calendar/themed theme-ui react react-dom
```

### Yarn

```bash
yarn add @react-calendar/themed theme-ui react react-dom
```

## Optional (But helpful)

While it's not required to use this library but [date-fns](https://date-fns.org/) 
is really useful in conjunction with this one. 

```bash
yarn add date-fns 
```

## Example 

```tsx dark 
import React, { useState } from 'react'
import { ThemeProvider } from 'theme-ui'
import { addMonths } from 'date-fns'
import { 
  SimpleEvent, 
  SimpleCalendar,
  base as myTheme
} from '@react-calendar/themed'

export function MyCalendar(): JSX.Element {
  const [currentMonth, setCurrentMonth] = useState(new Date(2020, 3, 1))

  const events: SimpleEvent[] = [
    {
      id: 1,
      title: 'First Event',
      interval: {
        start: new Date(2020, 3, 2),
        end: new Date(2020, 3, 5),
      },
    },
    {
      id: 2,
      title: 'This event spans two weeks',
      interval: {
        start: new Date(2020, 3, 10),
        end: new Date(2020, 3, 14),
      },
    },
    {
      id: 3,
      title: 'Overlapping Event',
      interval: {
        start: new Date(2020, 3, 13),
        end: new Date(2020, 3, 15),
      },
    },
    {
      id: 4,
      title: 'Other event',
      interval: {
        start: new Date(2020, 3, 14),
        end: new Date(2020, 3, 16),
      },
    },
  ]

  return (
    <ThemeProvider theme={myTheme}>
      <SimpleCalendar
        currentMonth={currentMonth}
        events={events}
        nextMonth={(): void => setCurrentMonth(m => addMonths(m, 1))}
        prevMonth={(): void => setCurrentMonth(m => addMonths(m, -1))}
      />
    </ThemeProvider>
  )
}
```
npm package: @react-calendar/utils
Description: Theres no real need to install this package as it is only used with the @react-calendar/core package internally.
Latest version: 0.2.1

# React Calendar Utilities

Theres no real need to install this package as it is only used with the
@react-calendar/core package internally. 

## Roadmap 

Since this package isn't specific to the @react-calendar/core package I would like to 
extract this package into its own package.
npm package: @react-cerberus/elements
Description: The goal of this framework is to provide a set of UI elements that guarantee consistent design and behavior across different platforms, such as web, iOS, and Android.
Latest version: 0.1.0

# react-cerberus

The goal of this framework is to provide a set of UI elements that guarantee consistent design and behavior across different platforms, such as web, iOS, and Android.

If you want to see the elements, please visit the [web version storybook](https://670a53d50ce49e1b54c401ce-aweioqzvqw.chromatic.com/).

## How to use

### Installation

```bash
# web platform
> npm install @react-cerberus/elements @react-cerberus/web

# React Native platform
> npm install @react-cerberus/elements @react-cerberus/native
```

### Usage

Run the initializer in your app's entry point.

Web platform:

```tsx
import { initReactCereberusWeb } from '@react-cerberus/web';

initReactCereberusWeb();
```

React Native platform:

```tsx
import { initReactCereberusNative } from '@react-cerberus/native';

initReactCereberusNative();
```

## Why do we need this?

A company or an organization with multiple products for mutiple platforms may want to have a unified design system across all of them.
However, vanilla HTML and React Native elements look different and behave differently, which makes it hard to achieve a consistent design and behavior.
For example, `button` elements in HTML and `TouchableOpacity` elements in React Native have different style.

(a screenshot of a button in HTML and a TouchableOpacity in React Native)

This framework provides a set of UI elements that look and behave the same across different platforms.

### Why can't we just use cross-platform UI libraries such as `react-native-for-web`?

It is possible. However, such libaries depends on a certain react framework, which restricts the flexibility of product development.
If an UI library is built on top of `react-native-for-web`, it is not possible to develop a service with web-based react framework such as `Next.js`.

## Development

### Install packages

```bash
npm install --legacy-peer-deps
```

We need to use `--legacy-peer-deps` because there are conflicts between `nx` libraries.

### How to publish

From the [documentation](https://nx.dev/recipes/nx-release/publish-in-ci-cd):

1. Run `nx release --skip-publish` locally. This will create a commit with the version and changelog updates, then create a tag for the new version.
2. Push the changes (including the new tag) to the remote repository with `git push && git push --tags`.
3. The CI workflow will automatically trigger and publish the packages to the npm registry.

### Running Storybooks

```bash
# web platform
> npx nx storybook web-storybook

# native platform (it will start an Expo app)
> npx nx start native-storybook
```

If you update `apps/native-storybook/.storybook` files, you would want to apply changes by building the files. Please run the following command:

```bash
> npx nx storybook-generate native-storybook
```
npm package: @react-cerberus/native
Description: The goal of this framework is to provide a set of UI elements that guarantee consistent design and behavior across different platforms, such as web, iOS, and Android.
Latest version: 0.1.0

# react-cerberus

The goal of this framework is to provide a set of UI elements that guarantee consistent design and behavior across different platforms, such as web, iOS, and Android.

If you want to see the elements, please visit the [web version storybook](https://670a53d50ce49e1b54c401ce-aweioqzvqw.chromatic.com/).

## How to use

### Installation

```bash
# web platform
> npm install @react-cerberus/elements @react-cerberus/web

# React Native platform
> npm install @react-cerberus/elements @react-cerberus/native
```

### Usage

Run the initializer in your app's entry point.

Web platform:

```tsx
import { initReactCereberusWeb } from '@react-cerberus/web';

initReactCereberusWeb();
```

React Native platform:

```tsx
import { initReactCereberusNative } from '@react-cerberus/native';

initReactCereberusNative();
```

## Why do we need this?

A company or an organization with multiple products for mutiple platforms may want to have a unified design system across all of them.
However, vanilla HTML and React Native elements look different and behave differently, which makes it hard to achieve a consistent design and behavior.
For example, `button` elements in HTML and `TouchableOpacity` elements in React Native have different style.

(a screenshot of a button in HTML and a TouchableOpacity in React Native)

This framework provides a set of UI elements that look and behave the same across different platforms.

### Why can't we just use cross-platform UI libraries such as `react-native-for-web`?

It is possible. However, such libaries depends on a certain react framework, which restricts the flexibility of product development.
If an UI library is built on top of `react-native-for-web`, it is not possible to develop a service with web-based react framework such as `Next.js`.

## Development

### Install packages

```bash
npm install --legacy-peer-deps
```

We need to use `--legacy-peer-deps` because there are conflicts between `nx` libraries.

### How to publish

From the [documentation](https://nx.dev/recipes/nx-release/publish-in-ci-cd):

1. Run `nx release --skip-publish` locally. This will create a commit with the version and changelog updates, then create a tag for the new version.
2. Push the changes (including the new tag) to the remote repository with `git push && git push --tags`.
3. The CI workflow will automatically trigger and publish the packages to the npm registry.

### Running Storybooks

```bash
# web platform
> npx nx storybook web-storybook

# native platform (it will start an Expo app)
> npx nx start native-storybook
```

If you update `apps/native-storybook/.storybook` files, you would want to apply changes by building the files. Please run the following command:

```bash
> npx nx storybook-generate native-storybook
```
npm package: @react-cerberus/web
Description: The goal of this framework is to provide a set of UI elements that guarantee consistent design and behavior across different platforms, such as web, iOS, and Android.
Latest version: 0.1.0

# react-cerberus

The goal of this framework is to provide a set of UI elements that guarantee consistent design and behavior across different platforms, such as web, iOS, and Android.

If you want to see the elements, please visit the [web version storybook](https://670a53d50ce49e1b54c401ce-aweioqzvqw.chromatic.com/).

## How to use

### Installation

```bash
# web platform
> npm install @react-cerberus/elements @react-cerberus/web

# React Native platform
> npm install @react-cerberus/elements @react-cerberus/native
```

### Usage

Run the initializer in your app's entry point.

Web platform:

```tsx
import { initReactCereberusWeb } from '@react-cerberus/web';

initReactCereberusWeb();
```

React Native platform:

```tsx
import { initReactCereberusNative } from '@react-cerberus/native';

initReactCereberusNative();
```

## Why do we need this?

A company or an organization with multiple products for mutiple platforms may want to have a unified design system across all of them.
However, vanilla HTML and React Native elements look different and behave differently, which makes it hard to achieve a consistent design and behavior.
For example, `button` elements in HTML and `TouchableOpacity` elements in React Native have different style.

(a screenshot of a button in HTML and a TouchableOpacity in React Native)

This framework provides a set of UI elements that look and behave the same across different platforms.

### Why can't we just use cross-platform UI libraries such as `react-native-for-web`?

It is possible. However, such libaries depends on a certain react framework, which restricts the flexibility of product development.
If an UI library is built on top of `react-native-for-web`, it is not possible to develop a service with web-based react framework such as `Next.js`.

## Development

### Install packages

```bash
npm install --legacy-peer-deps
```

We need to use `--legacy-peer-deps` because there are conflicts between `nx` libraries.

### How to publish

From the [documentation](https://nx.dev/recipes/nx-release/publish-in-ci-cd):

1. Run `nx release --skip-publish` locally. This will create a commit with the version and changelog updates, then create a tag for the new version.
2. Push the changes (including the new tag) to the remote repository with `git push && git push --tags`.
3. The CI workflow will automatically trigger and publish the packages to the npm registry.

### Running Storybooks

```bash
# web platform
> npx nx storybook web-storybook

# native platform (it will start an Expo app)
> npx nx start native-storybook
```

If you update `apps/native-storybook/.storybook` files, you would want to apply changes by building the files. Please run the following command:

```bash
> npx nx storybook-generate native-storybook
```
npm package: @react-chain-ui/components
Description: React UI components for web3
Author: Juanse Mastrangelo
Latest version: 0.12.0

# @web3-ui/components

A set of React components made for web3-specific use cases. Fully compatible with and built on top of ChakraUI.

```bash
yarn add @react-chain-ui/components ethers
```

## Getting started

At the root of your React app, wrap your app in the `<Provider>` component:

```tsx
// _app.tsx (or the root of your app)
import { Provider } from '@web3-ui/components';

// Passing in a theme is optional
function MyApp({ Component, pageProps }) {
  return (
    <Provider theme={yourChakraTheme}>
      <Component {...pageProps} />
    </Provider>
  );
}
```

---

## Components

This is the list of components the package currently provides:

- [Address](#address)
- [AddressInput](#addressinput)
- [NFT](#nft)
- [NFTGallery](#nftgallery)
- [Provider](#provider)
- [EtherInput](#etherinput)
- [TokenBalance](#tokenbalance)

---

### Address

The Address component takes in an Ethereum address or ENS name and displays it in a human-readable format.

```tsx
<Address value='dhaiwat.eth' shortened copiable>
```

`shortened` and `copiable` are optional props.

---

### AddressInput

The AddressInput component is an input for Ethereum addresses. It supports ENS names too.

```tsx
<AddressInput value={value} onChange={setValue} provider={provider} />
```

You need to pass in a `provider` prop if you want to use ENS names.

---

### NFT

The NFT component takes in the contract address and the token ID of an NFT and displays it as a card. You can also pass in `isTestnet` to fetch the NFT data from the testnet API (only Rinkeby for now).

```tsx
<NFT contractAddress="0xxxxx0x0x0x0x0x" tokenId={30} size="md" />
```

The `size` prop is optional.

---

### NFTGallery

The NFTGallery component renders a grid of all the NFTs owned by an account. It accepts ENS names too. You can also pass in `isTestnet` to fetch the NFT data from the testnet API (only Rinkeby for now).

```tsx
<NFTGallery address="vitalik.eth" web3Provider={provider} gridWidth={4} />
```

You need to pass in a `web3Provider` if you want to support ENS names. We know this is not ideal and are fixing it.

`gridWidth` is an optional prop.

---

### Provider

The Provider component is the `web3-ui` equivalent of ChakraUI's `ChakraProvider` component. You need to wrap this component around your entire App. See [Getting Started](#getting-started) for an example.

---

### EtherInput

EtherInput is an input field that accepts values in _wei_ or _ether_. It always returns the value to you in _wei_ so that you can easily use it to interact with contracts without any conversions.

```tsx
const [value, setValue] = useState();

<EtherInput value={value} setValue={setValue} unit="ether" />; // value will always be in wei. eg. if someone enters 1 in the input, value will be 10^18
```

---

### TokenBalance

TokenBalance is a stateless component that displays the name, symbol, balance, and USD value of an ERC20 token.

```tsx
<TokenBalance
  name="Devs 4 Revolution"
  symbol="$CODE"
  balance={200}
  usdValue={100}
  imgUrl={D_D_LOGO}
/>
```
npm package: @react-chain-ui/core
Description: React UI components for web3
Author: Juanse Mastrangelo
Latest version: 0.8.3

# @react-chain-ui/core

A set of React [components](#components) and [hooks](#hooks) made for web3-specific use cases. Fully compatible with and built on top of ChakraUI.

This package is an opinionated combination of `@react-chain-ui/components` and `@react-chain-ui/hooks`.

```bash
yarn add @react-chain-ui/core
```

## Getting started

At the root of your React app, wrap your app in the `<Provider>` component:

```tsx
// _app.tsx (or the root of your app)
import { Provider, NETWORKS } from '@react-chain-ui/core';

function MyApp({ Component, pageProps }) {
  return (
    <Provider network={NETWORKS.rinkeby}>
      <Component {...pageProps} />
    </Provider>
  );
}
```

---

## Components

This is the list of components the package currently provides:

- [Provider](#provider)
- [ConnectWallet](#connectwallet)
- [TokenBalance](#tokenbalance)

---

### Provider

The Provider component is a parent provider, wrapping the `ComponentsProvider` and the `HooksProvider`. You need to wrap this component around your entire App.

#### Usage

See [Getting Started](#getting-started) for an example.

---

### ConnectWallet

`ConnectWallet` is a `Button` based component with the following behaviour:

When wallet is connected,

- shows user's address or ENS
- on click, disconnects wallet

When wallet is not connected,

- allows the user to connect to their wallet via Metamask or WalletConnect

#### Usage

```tsx
import { ConnectWallet } from '@react-chain-ui/core';

<ConnectWallet />;
```

---

### TokenBalance

`TokeBalance` is a component that fetches and renders the balance of an ERC20 token for a given address.

```tsx
import { TokenBalance } from '@react-chain-ui/core';

<TokenBalance
  accountAddress="0x503828976D22510aad0201ac7EC88293211D23Da"
  tokenAddress="0x6B175474E89094C44Da98b954EedeAC495271d0F"
  usdRate={0.9955}
/>;
```

---

## Hooks

This package exports all the hooks provided by the [`@react-chain-ui/hooks` package](https://npmjs.com/package/@react-chain-ui/hooks).

```tsx
// Example
import { useWallet } from '@react-chain-ui/core';

const { connectWallet } = useWallet();
```