open-index/open-npm huggingface dataset:
npm package: @rchandar/map
Description: Made with create-react-library
Latest version: 1.1.0

# @rchandar/map

> Made with create-react-library

[![NPM](https://img.shields.io/npm/v/@rchandar/map.svg)](https://www.npmjs.com/package/@rchandar/map) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @rchandar/map
```

## Usage

```tsx
import React, { Component } from 'react'

import MyComponent from '@rchandar/map'
import '@rchandar/map/dist/index.css'

class Example extends Component {
  render() {
    return <MyComponent />
  }
}
```

## License

MIT © [](https://github.com/)
npm package: @rchandar/test
Description: Made with create-react-library
Latest version: 1.0.0

# @rchandar/test

> Made with create-react-library

[![NPM](https://img.shields.io/npm/v/@rchandar/test.svg)](https://www.npmjs.com/package/@rchandar/test) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @rchandar/test
```

## Usage

```tsx
import React, { Component } from 'react'

import MyComponent from '@rchandar/test'
import '@rchandar/test/dist/index.css'

class Example extends Component {
  render() {
    return <MyComponent />
  }
}
```

## License

MIT © [](https://github.com/)
npm package: @rchaser53/react-snake-arrow
Description: Simple SVG Arrow Component.
Author: rchaser53
Latest version: 0.0.1

# arrows

Simple SVG Arrow Component. 

## Basic

``` javascript
import React from 'react';
import ReactDOM from 'react-dom'
import Arrow from 'react-snake-arrow'

class Example extends React.Component{
	render() {
		return (
			<div>
				<Arrow startPoint={{x: 10, y: 20}} endPoint={{x: 150, y: 200}}
					option={{duration: 2000, stroke: 'red', strokeWidth: 3}} />
			</div>
		);
	}
}
ReactDOM.render(
	<Example />,
	document.querySelector('#app')
);

```

## Properties

#### stroke {string}

The color of the arrow.

#### strokeWidth {number}

The width of the arrow.

#### duration {number}

The time of animation.
npm package: @rchillard/fido
Description: Fetch Input Display Output (FIDO) is a JavaScript library for retrieving data, hydrating that data into an HTML template, and then rendering it in the DOM
Author: RCH
Latest version: 1.0.0

# fidojs

FIDO is an acronym for Fetch Input Display Output (FIDO).  

This is a JavaScript simple frontend component that accepts HTML as a regular String, a reference to a parent DOM element, and a URL for an endpoint with JSON data.  FIDO fetches data from the URL, hydrates the HTML template, and updates the DOM.  It has meaningful network handling, as well as the concept of internal state.

## Background

After having written the same boilerplate code for many different projects, I decided to create this library.  Often times, I have found that many simple pages feature a single large component, fetch data to populate that component, then render the result to the DOM.  fidojs makes this task easy.

## Usage

This is still under construction.  Usage will be updated when the project is ready for distribution.
npm package: @rchs/eslint-config
Description: Linter setup
Author: Ranjan Shrestha
Latest version: 1.0.0

Eslint configuration for our organization based on
airbnb, flowtype:recommended and react-hooks

## Installation
> `yarn add --dev @rchs/eslint-config`

## Usage
Create `.eslintrc` on your project root with the
following content:
```json
{
  "extends": "@rchs"
}
```
npm package: @rchswap/sdk
Description: 🛠 An SDK for building applications on top of Rchswap.
Latest version: 1.0.6

# Rchswap SDK

In-depth documentation on this SDK is available at [uniswap.org](https://uniswap.org/docs/v2/SDK/getting-started/).

This modifies uniswap-sdk's UniswapV2Factory address. The new address for rchswap is  `0xC0AEe478e3658e2610c5F7A4A2E1777cE9e4f2Ac`.

## Running tests

To run the tests, follow these steps. You must have at least node v10 and [yarn](https://yarnpkg.com/) installed.

First clone the repository:

```sh
git clone https://github.com/rchswap/rchswap-sdk.git
```

Move into the rchswap-sdk working directory

```sh
cd rchswap-sdk/
```

Install dependencies

```sh
yarn install
```

Run tests

```sh
yarn test
```

You should see output like the following:

```sh
yarn run v1.22.4
$ tsdx test
 PASS  test/constants.test.ts
 PASS  test/pair.test.ts
 PASS  test/fraction.test.ts
 PASS  test/miscellaneous.test.ts
 PASS  test/entities.test.ts
 PASS  test/trade.test.ts

Test Suites: 1 skipped, 6 passed, 6 of 7 total
Tests:       3 skipped, 82 passed, 85 total
Snapshots:   0 total
Time:        5.091s
Ran all test suites.
✨  Done in 6.61s.
```
npm package: @rcigroup/horizon-component-sdk
Description: A React UI component library built on [shadcn/ui](https://ui.shadcn.com), [Radix UI](https://www.radix-ui.com/), and [Tailwind CSS v4](https://tailwindcss.com/).
Latest version: 0.1.3

# @rcigroup/horizon-sdk

A React UI component library built on [shadcn/ui](https://ui.shadcn.com), [Radix UI](https://www.radix-ui.com/), and [Tailwind CSS v4](https://tailwindcss.com/).

## Installation

```bash
npm install @rcigroup/horizon-sdk
```

### Peer Dependencies

Ensure your project has the following peer dependencies installed:

```bash
npm install react react-dom tailwindcss@4
```

## Setup

### 1. Import the theme styles

Add the Horizon theme CSS to your main stylesheet **after** the Tailwind import:

```css
/* app.css or main.css */
@import "tailwindcss";
@import "@rcigroup/horizon-sdk/styles.css";
```

### 2. Configure Tailwind to scan the library

Add a `@source` directive so Tailwind picks up the class names used by the components:

```css
/* app.css or main.css */
@import "tailwindcss";
@source "../node_modules/@rcigroup/horizon-sdk/dist";
@import "@rcigroup/horizon-sdk/styles.css";
```

### 3. Dark mode

The components support dark mode via a `.dark` class on a parent element (typically `<html>`). Toggle it however you prefer.

## Usage

```tsx
import { Button } from "@rcigroup/horizon-sdk"

export function App() {
  return <Button variant="outline">Click me</Button>
}
```

## Available Components

Accordion, Alert, AlertDialog, AspectRatio, Avatar, Badge, Breadcrumb, Button, ButtonGroup, Calendar, Card, Carousel, Chart, Checkbox, Collapsible, Combobox, Command, ContextMenu, Dialog, Direction, Drawer, DropdownMenu, Empty, Field, HoverCard, Input, InputGroup, InputOTP, Item, Kbd, Label, Menubar, NativeSelect, NavigationMenu, Pagination, Popover, Progress, RadioGroup, Resizable, ScrollArea, Select, Separator, Sheet, Sidebar, Skeleton, Slider, Sonner, Spinner, Switch, Table, Tabs, Textarea, Toggle, ToggleGroup, Tooltip

## Development

```bash
# Run the dev app
npm run dev

# Run Storybook
npm run storybook

# Build the library
npm run build

# Type-check
npm run typecheck
```
npm package: @rcigroup/horizon-sdk
Description: A React UI component library built on [shadcn/ui](https://ui.shadcn.com), [Radix UI](https://www.radix-ui.com/), and [Tailwind CSS v4](https://tailwindcss.com/).
Latest version: 0.1.0

# @rcigroup/horizon-sdk

A React UI component library built on [shadcn/ui](https://ui.shadcn.com), [Radix UI](https://www.radix-ui.com/), and [Tailwind CSS v4](https://tailwindcss.com/).

## Installation

```bash
npm install @rcigroup/horizon-sdk
```

### Peer Dependencies

Ensure your project has the following peer dependencies installed:

```bash
npm install react react-dom tailwindcss@4
```

## Setup

### 1. Import the theme styles

Add the Horizon theme CSS to your main stylesheet **after** the Tailwind import:

```css
/* app.css or main.css */
@import "tailwindcss";
@import "@rcigroup/horizon-sdk/styles.css";
```

### 2. Configure Tailwind to scan the library

Add a `@source` directive so Tailwind picks up the class names used by the components:

```css
/* app.css or main.css */
@import "tailwindcss";
@source "../node_modules/@rcigroup/horizon-sdk/dist";
@import "@rcigroup/horizon-sdk/styles.css";
```

### 3. Dark mode

The components support dark mode via a `.dark` class on a parent element (typically `<html>`). Toggle it however you prefer.

## Usage

```tsx
import { Button } from "@rcigroup/horizon-sdk"

export function App() {
  return <Button variant="outline">Click me</Button>
}
```

## Available Components

Accordion, Alert, AlertDialog, AspectRatio, Avatar, Badge, Breadcrumb, Button, ButtonGroup, Calendar, Card, Carousel, Chart, Checkbox, Collapsible, Combobox, Command, ContextMenu, Dialog, Direction, Drawer, DropdownMenu, Empty, Field, HoverCard, Input, InputGroup, InputOTP, Item, Kbd, Label, Menubar, NativeSelect, NavigationMenu, Pagination, Popover, Progress, RadioGroup, Resizable, ScrollArea, Select, Separator, Sheet, Sidebar, Skeleton, Slider, Sonner, Spinner, Switch, Table, Tabs, Textarea, Toggle, ToggleGroup, Tooltip

## Development

```bash
# Run the dev app
npm run dev

# Run Storybook
npm run storybook

# Build the library
npm run build

# Type-check
npm run typecheck
```
npm package: @rck.princy/ra-data-provider-wrapper
Description: @rck.princy/ra-data-provider-wrapper makes defining data providers in React Admin easy
Author: RickaPrincy
Latest version: 0.0.3

# @rck.princy/ra-data-provider-wrapper :hammer:

A wrapper for [React Admin](https://github.com/marmelab/react-admin) `DataProvider` that simplifies the integration of multiple ResourceProvider instances (one facade DataProvider).

### Features :collision:

- Facade Provider: Automatically manages multiple `ResourceProviders`.
- Error Handling: Throws errors for unknown resource names and unimplemented functions

### Installation :zap:

```bash
npm install @rck.princy/ra-data-provider-wrapper
```

### Usage :seedling:

#### Creating a resource provider

```typescript
import { type ResourceProvider } from '@rck.princy/ra-data-provider-wrapper';

export type Dummy = {
  id: string;
  name: string;
};

export const dummyProvider: ResourceProvider<Dummy> = {
  resource: 'dummies',
  getList: async ({ filter: _filter, meta: _meta }) => {
    return Promise.resolve([
      {
        id: 'test',
        name: 'test',
      },
    ]);
  },
  getOne: async ({ id }) => {
    return Promise.resolve({
      id,
      name: `name: ${id}`,
    });
  },
  deleteAll: async () => {
    //some api calls
    return Promise.resolve([]);
  },
  //others
};
```

#### Creating react-admin DataProvider using @rck.princy/ra-data-provider-wrapper

```typescript
import { type DataProvider } from 'react-admin';
import { createRaProvider } from '@rck.princy/ra-data-provider-wrapper';
import { dummyProvider } from './dummy-provider';
import { personProvider } from './person-provider';

export const raDataProvider = createRaProvider(
  [personProvider, dummyProvider],
  {
    getListOptions: {
      defaultPagination: { page: 1, perPage: 5 };
      getPageInfo: async (args) => {
        return Promise.resolve({
          pageInfo: {
            hasNextPage: true,
            hasPreviousPage: false,
          },
        });
      },
    }
  }
);
```

### Examples

[Examples](https://github.com/RickaPrincy/ra-data-provider-wrapper/tree/main/examples)

### License

This project is licensed under the [MIT License](LICENSE.md).
npm package: @rckeller/cypress-react
Description: Unofficial Cypress utilities for testing React applications
Author: Ryan Keller
Latest version: 0.0.3
Deprecated: Temporarily Moved, will update in March


# @rckeller/cypress-react
Unofficial Cypress utilities for testing React applications. Typescript definitions are included.

```
npm i -D @rckeller/cypress-react
```

## Configuring Unit Testing

You can register `cy.mount` by importing it, which will initialize loading and caching for React, ReactDOM and component styles between test runs.

```jsx
// support/index.js
import '@rckeller/cypress-react/mount'
```

`cy.mount` performs a full mount of a given component on a page, and aliases it as `@ComponentName` unless otherwise specified. You are free to access its properties, state, and even invoke its own methods. Unlike Jest and Enzyme, which simulate a thin virtual DOM that lacks full support for event propagination and other functionality, these components will be mounted on a live page in isolation that more closely represents a real use case.

```jsx
// in a test file
cy.mount(<HelloWorld />)

cy.get('@HelloWorld')
  .invoke('setState', { name: 'React' })
cy.get('@HelloWorld')
  .its('state')
  .should('deep.equal', { name: 'React' })
```

Optionally, you can register a superset of `cy.get`, which aliases components by their displayname and allows you to select them in several different ways like so:

```jsx
// support/index.js
import '@rckeller/cypress-unfetch/mount/get'
//  now you have access to new component selectors

// in a test file
cy.mount(<HelloWorld />)

cy.get('@HelloWorld')
cy.get(<HelloWorld />)
cy.get(HelloWorld)
```

Note, components are mounted in a fresh DOM, without any styles loaded. If you want to load components with styles, define Cypress.Styles as a link tag with your styles inlines.

```jsx
// inline styles
Cypress.Styles = `<style type="text/css">p { color: black; }</style>`
// or use a CDN
Cypress.Styles = `<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">`
```

Using a CDN may violate the same-origin policy, in which case, you'd have to set `chromeWebSecurity` to `false` in `cypress.json`.

## Further Reading

This module is based on the official [cypress-react-unit-test](https://github.com/bahmutov/cypress-react-unit-test) recipe, and is merely an abstraction layer for that implemetation. The original repository contains many different examples of how to take advantage of Cypress for unit testing components.
npm package: @rckeller/cypress-unfetch
Description: Unofficial Cypress utilities for tracking network state
Author: Ryan Keller
Latest version: 1.0.1


# @rckeller/cypress-react
Unofficial Cypress utilities for tracking network state

```
npm i -D @rckeller/cypress-unfetch
```

## Configuration

These utilities automatically configure your cypress instance upon import.

```js
// support/index.js
import '@rckeller/cypress-unfetch'
```

We recommmend setting up the optional `cy.await` command, which tracks in-flight requests in the background.
You can use this to wait for network state to resolve before progressing to a new test run.

```js
// support/index.js
import '@rckeller/cypress-unfetch/await'

// You can add an afterEach to this file, which becomes "global"
afterEach(() => {
  cy.await()
})
```

Registering `cy.await` starts a server in the background, which can be used to track and block specific routes like so.

```js
// in support/index.js OR a test
beforeEach(() => {
  cy.route('/api/**').as('API')
})

test('something', () => {
  cy.log('before...')
    .wait('@API')
    .log('...after')
})
```