open-index/open-npm huggingface dataset:
npm package: @react-enhanced/translate
Description: 🔥 Enhanced React Translate Plugin
Author: JounQin
Latest version: 0.1.3

# @react-enhanced/translate

🔥 Enhanced React Translate Plugin

## Sponsors

| 1stG                                                                                                                               | RxTS                                                                                                                               | UnTS                                                                                                                               |
| ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| [![1stG Open Collective backers and sponsors](https://opencollective.com/1stG/organizations.svg)](https://opencollective.com/1stG) | [![RxTS Open Collective backers and sponsors](https://opencollective.com/rxts/organizations.svg)](https://opencollective.com/rxts) | [![UnTS Open Collective backers and sponsors](https://opencollective.com/unts/organizations.svg)](https://opencollective.com/unts) |

## Backers

| 1stG                                                                                                                             | RxTS                                                                                                                             | UnTS                                                                                                                             |
| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| [![1stG Open Collective backers and sponsors](https://opencollective.com/1stG/individuals.svg)](https://opencollective.com/1stG) | [![RxTS Open Collective backers and sponsors](https://opencollective.com/rxts/individuals.svg)](https://opencollective.com/rxts) | [![UnTS Open Collective backers and sponsors](https://opencollective.com/unts/individuals.svg)](https://opencollective.com/unts) |

## Changelog

Detailed changes for each release are documented in [CHANGELOG.md](./CHANGELOG.md).

## License

[MIT][] © [JounQin][]@[1stG.me][]

[1stg.me]: https://www.1stg.me
[jounqin]: https://GitHub.com/JounQin
[mit]: http://opensource.org/licenses/MIT
npm package: @react-enhanced/types
Description: 🔥 Enhanced React Types
Author: JounQin
Latest version: 0.2.1

# @react-enhanced/types

🔥 Enhanced React Types

## Sponsors

| 1stG                                                                                                                               | RxTS                                                                                                                               | UnTS                                                                                                                               |
| ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| [![1stG Open Collective backers and sponsors](https://opencollective.com/1stG/organizations.svg)](https://opencollective.com/1stG) | [![RxTS Open Collective backers and sponsors](https://opencollective.com/rxts/organizations.svg)](https://opencollective.com/rxts) | [![UnTS Open Collective backers and sponsors](https://opencollective.com/unts/organizations.svg)](https://opencollective.com/unts) |

## Backers

| 1stG                                                                                                                             | RxTS                                                                                                                             | UnTS                                                                                                                             |
| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| [![1stG Open Collective backers and sponsors](https://opencollective.com/1stG/individuals.svg)](https://opencollective.com/1stG) | [![RxTS Open Collective backers and sponsors](https://opencollective.com/rxts/individuals.svg)](https://opencollective.com/rxts) | [![UnTS Open Collective backers and sponsors](https://opencollective.com/unts/individuals.svg)](https://opencollective.com/unts) |

## Changelog

Detailed changes for each release are documented in [CHANGELOG.md](./CHANGELOG.md).

## License

[MIT][] © [JounQin][]@[1stG.me][]

[1stg.me]: https://www.1stg.me
[jounqin]: https://GitHub.com/JounQin
[mit]: http://opensource.org/licenses/MIT
npm package: @react-enhanced/utils
Description: 🔥 Enhanced React Utils
Author: JounQin
Latest version: 0.2.1

# @react-enhanced/utils

🔥 Enhanced React Utils

## Sponsors

| 1stG                                                                                                                               | RxTS                                                                                                                               | UnTS                                                                                                                               |
| ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| [![1stG Open Collective backers and sponsors](https://opencollective.com/1stG/organizations.svg)](https://opencollective.com/1stG) | [![RxTS Open Collective backers and sponsors](https://opencollective.com/rxts/organizations.svg)](https://opencollective.com/rxts) | [![UnTS Open Collective backers and sponsors](https://opencollective.com/unts/organizations.svg)](https://opencollective.com/unts) |

## Backers

| 1stG                                                                                                                             | RxTS                                                                                                                             | UnTS                                                                                                                             |
| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| [![1stG Open Collective backers and sponsors](https://opencollective.com/1stG/individuals.svg)](https://opencollective.com/1stG) | [![RxTS Open Collective backers and sponsors](https://opencollective.com/rxts/individuals.svg)](https://opencollective.com/rxts) | [![UnTS Open Collective backers and sponsors](https://opencollective.com/unts/individuals.svg)](https://opencollective.com/unts) |

## Changelog

Detailed changes for each release are documented in [CHANGELOG.md](./CHANGELOG.md).

## License

[MIT][] © [JounQin][]@[1stG.me][]

[1stg.me]: https://www.1stg.me
[jounqin]: https://GitHub.com/JounQin
[mit]: http://opensource.org/licenses/MIT
npm package: @react-error-utils/core
Description: React error handling library with hooks API and TypeScript support
Author: Peter W.
Latest version: 1.0.0

# @react-error-utils/core

Core error boundary component and hook for React applications.

## Installation

```bash
npm install @react-error-utils/core react
# or
pnpm add @react-error-utils/core react
```

## Features

- **ErrorBoundary** - Component for catching and handling errors
- **useErrorBoundary** - Hook for function components
- **TypeScript First** - Full TypeScript support with strict types

## Quick Start

### ErrorBoundary Component

```tsx
import { ErrorBoundary } from '@react-error-utils/core'

function App() {
  return (
    <ErrorBoundary
      fallback={<div>Something went wrong!</div>}
      onError={(error, errorInfo) => {
        console.error('Error:', error)
        console.error('Info:', errorInfo)
      }}
    >
      <MyComponent />
    </ErrorBoundary>
  )
}
```

### useErrorBoundary Hook

```tsx
import { useErrorBoundary } from '@react-error-utils/core'

function MyComponent() {
  const { showBoundary, error, reset } = useErrorBoundary()

  if (error) {
    return (
      <div>
        <p>Error: {error.message}</p>
        <button onClick={() => reset()}>Try again</button>
      </div>
    )
  }

  return (
    <button
      onClick={() => {
        throw new Error('Intentional error')
      }}
    >
      Trigger Error
    </button>
  )
}
```

## API Reference

### ErrorBoundary Props

```tsx
interface ErrorBoundaryProps {
  children: React.ReactNode
  fallback?: React.ReactNode | ((error: Error, reset: () => void) => React.ReactNode)
  fallbackRender?: (props: { error: Error; reset: () => void }) => React.ReactNode
  onError?: (error: Error, errorInfo: ErrorInfo) => void
  onReset?: (details: { reason: 'imperative' | 'props', error: Error }) => void
}
```

### useErrorBoundary Return

```tsx
interface UseErrorBoundaryReturn {
  error: Error | null
  reset: () => void
  showBoundary: (error: Error) => void
}
```

## License

MIT
npm package: @react-error-utils/hooks
Description: React error handling hooks - useErrorHandler, useRetry
Author: Peter W.
Latest version: 1.0.0

# @react-error-utils/hooks

Additional React error handling hooks - useErrorHandler and useRetry.

## Installation

```bash
npm install @react-error-utils/hooks @react-error-utils/core react
# or
pnpm add @react-error-utils/hooks @react-error-utils/core react
```

## Features

- **useErrorHandler** - Prop-based error handler for event handlers
- **useRetry** - Retry failed operations with configurable backoff
- **TypeScript First** - Full TypeScript support

## Quick Start

### useErrorHandler

```tsx
import { useErrorHandler } from '@react-error-utils/hooks'

function MyComponent() {
  const handleError = useErrorHandler()

  const fetchData = async () => {
    try {
      const data = await fetch('/api/data')
      return data
    } catch (error) {
      handleError(error)
    }
  }

  return <button onClick={fetchData}>Fetch Data</button>
}
```

### useRetry with Backoff

```tsx
import { useRetry } from '@react-error-utils/hooks'

function DataFetcher({ url }) {
  const { data, loading, error, retry } = useRetry(
    () => fetch(url).then(r => r.json()),
    {
      maxAttempts: 3,
      delay: 1000,
      backoff: 'exponential'
    }
  )

  if (loading) return <Spinner />
  if (error) return <button onClick={retry}>Retry</button>

  return <pre>{JSON.stringify(data, null, 2)}</pre>
}
```

## API Reference

### useRetry Options

```tsx
interface UseRetryOptions<T> {
  maxAttempts?: number
  delay?: number
  backoff?: 'linear' | 'exponential'
  onRetry?: (error: Error, attempt: number) => void
  retryCondition?: (error: Error) => boolean
}
```

## License

MIT
npm package: @react-error-utils/react19
Description: React 19 specific features for @react-error-utils
Author: Peter W.
Latest version: 1.0.0

# @react-error-utils/react19

React 19 specific features for error handling - RSC support and use() hook integration.

## Installation

```bash
npm install @react-error-utils/react19 @react-error-utils/core react@^19.0.0
# or
pnpm add @react-error-utils/react19 @react-error-utils/core react@^19.0.0
```

## Features

- **RSCErrorBoundary** - Error boundary for React Server Components
- **use() Hook Integration** - Handle promises with error boundaries
- **TypeScript First** - Full TypeScript support for React 19

## Quick Start

### RSCErrorBoundary

```tsx
import { RSCErrorBoundary } from '@react-error-utils/react19'

// For Server Components
<RSCErrorBoundary
  fallback={<ErrorDisplay />}
  onError={(error, info) => {
    console.error('RSC Error:', error, info)
  }}
>
  <ServerComponent />
</RSCErrorBoundary>
```

### use() with Error Boundaries

```tsx
import { use } from 'react'
import { useErrorBoundary } from '@react-error-utils/core'

function AsyncData({ promise }) {
  const { showBoundary } = useErrorBoundary()

  try {
    const data = use(promise)
    return <DataDisplay data={data} />
  } catch (error) {
    showBoundary(error)
  }
}
```

## createErrorBoundary

Create a promise-based error boundary for use() hook:

```tsx
import { createErrorBoundary } from '@react-error-utils/react19'

function DataComponent({ promise }) {
  const [data, error, reset] = createErrorBoundary(promise)

  if (error) {
    return <ErrorDisplay error={error} onRetry={reset} />
  }

  if (!data) {
    return <Loading />
  }

  return <DataDisplay data={data} />
}
```

## License

MIT
npm package: @react-error-utils/reporting
Description: Error reporting utilities for @react-error-utils (Sentry, Bugsnag)
Author: Peter W.
Latest version: 1.0.0

# @react-error-utils/reporting

Error reporting utilities for Sentry and Bugsnag integration.

## Installation

```bash
npm install @react-error-utils/reporting @react-error-utils/core react
# or
pnpm add @react-error-utils/reporting @react-error-utils/core react
```

## Features

- **Sentry Integration** - Zero-config error reporting to Sentry
- **Bugsnag Integration** - Error and session tracking with Bugsnag
- **TypeScript First** - Full TypeScript support

## Quick Start

### Sentry Integration

```tsx
import { createSentryReporter } from '@react-error-utils/reporting'

// Zero-config Sentry integration
const sentryReporter = createSentryReporter({
  dsn: 'https://your-dsn@sentry.io/1234567'
})

// Use with ErrorBoundary
<ErrorBoundary onError={sentryReporter}>
  <App />
</ErrorBoundary>
```

### Bugsnag Integration

```tsx
import { createBugsnagReporter } from '@react-error-utils/reporting'

const bugsnagReporter = createBugsnagReporter({
  apiKey: 'your-api-key'
})

<ErrorBoundary onError={bugsnagReporter}>
  <App />
</ErrorBoundary>
```

## Advanced Usage

### With Custom Options

```tsx
const sentryReporter = createSentryReporter({
  dsn: process.env.SENTRY_DSN,
  beforeSend: (event) => {
    // Filter sensitive data
    return event
  },
  initialScope: {
    user: { id: user.id }
  }
})
```

## License

MIT
npm package: @react-error-utils/testing
Description: Testing utilities for @react-error-utils
Author: Peter W.
Latest version: 1.0.0

# @react-error-utils/testing

Testing utilities for React error boundary applications.

## Installation

```bash
npm install @react-error-utils/testing @react-error-utils/core @testing-library/react react react-dom
# or
pnpm add @react-error-utils/testing @react-error-utils/core @testing-library/react react react-dom
```

## Features

- **renderWithErrorBoundary** - Render components with error boundaries for testing
- **waitForError** - Wait for async errors to be caught
- **waitForErrorResolved** - Wait for error boundaries to reset
- **Testing Library Compatible** - Works with @testing-library/react

## Quick Start

### renderWithErrorBoundary

```tsx
import { renderWithErrorBoundary, waitForError, screen } from '@react-error-utils/testing'

it('catches errors', async () => {
  const { getByText } = renderWithErrorBoundary(
    <BuggyComponent />,
    { fallback: <div>Error caught!</div> }
  )

  await waitForError()
  expect(getByText('Error caught!')).toBeInTheDocument()
})
```

### Testing Async Errors

```tsx
import { renderWithErrorBoundary, waitForError } from '@react-error-utils/testing'

it('handles async errors', async () => {
  renderWithErrorBoundary(
    <AsyncErrorComponent />,
    { fallback: <div>Something went wrong</div> }
  )

  const error = await waitForError({ timeout: 5000 })
  expect(error.error.message).toBe('Async error')
})
```

### waitForErrorResolved

```tsx
import { renderWithErrorBoundary, waitForError, waitForErrorResolved } from '@react-error-utils/testing'

it('resets after error', async () => {
  const { getByText, getByRole } = renderWithErrorBoundary(
    <RetryableComponent />,
    { fallback: <div>Error!</div> }
  )

  // Trigger error
  fireEvent.click(getByText('Trigger Error'))
  await waitForError()

  // Reset
  fireEvent.click(getByText('Retry'))

  // Wait for reset
  await waitForErrorResolved()
  expect(getByRole('button')).toBeInTheDocument()
})
```

## API Reference

### renderWithErrorBoundary

```tsx
function renderWithErrorBoundary(
  ui: ReactNode,
  options: {
    fallback: React.ReactNode | ((error: Error, errorInfo: ErrorInfo) => React.ReactNode)
    onError?: (error: Error, errorInfo: ErrorInfo) => void
  }
): {
  rerender: (newUi: ReactNode) => void
  unmount: () => void
  getCaughtError: () => { error: Error | null; errorInfo: ErrorInfo | null }
}
```

### waitForError

```tsx
async function waitForError(options?: {
  timeout?: number
  interval?: number
}): Promise<{ error: Error; errorInfo: ErrorInfo }>
```

## License

MIT
npm package: @react-executor/next
Description: React Executor bindings for Next.js.
Author: Savva Mikhalevski
Latest version: 0.0.1

# @react-executor/next

To enable data streaming for Next.js applications provide
an [`ExecutorManager`](https://smikhalevski.github.io/react-executor/classes/react_executor.ExecutorManager.html):

```tsx
// providers.tsx
'use client';

import * as React from 'react';
import { enableSSRHydration, ExecutorManager, ExecutorManagerProvider } from 'react-executor';
import { SSRExecutorManager } from 'react-executor/ssr';
import { ExecutorHydrator } from '@react-executor/next';

const manager = typeof window !== 'undefined' ? enableSSRHydration(new ExecutorManager()) : undefined;

export function Providers(props: { children: React.ReactNode }) {
  return (
    <ExecutorManagerProvider value={manager || new SSRExecutorManager()}>
      <ExecutorHydrator>{props.children}</ExecutorHydrator>
    </ExecutorManagerProvider>
  );
}
```

`ExecutorHydrator` propagates server-rendered executor state from the server to the client.

Enable providers in the root layout:

```tsx
// layout.tsx
import { Providers } from './providers';

export default function (props: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Providers>{props.children}</Providers>
      </body>
    </html>
  );
}
```

Render the page that uses executors:

```tsx
// page.tsx
'use client';

import { Suspense } from 'react';
import { useExecutor, useExecutorSuspense } from 'react-executor';

export default function () {
  return (
    <Suspense>
      <App/>
    </Suspense>
  );
}

function App() {
  const executor = useExecutor('greeting', () => {
    // Fetch the data here
    return 'Hello'
  });

  useExecutorSuspense(executor);
  
  return executor.get()
}
```
npm package: @react-fe-core/fe-ui-core
Description: 1. This is a base project based on React Reusable components which supports 2. typescript 3. styling through styled-components 4. components isolation build preview with storybook 5. publishing monorepo through lerna and conventional commits 6. New packag
Latest version: 1.7.0

# About
1. This is a base project based on React Reusable components which supports 
2. typescript
3. styling through styled-components 
4. components isolation build preview with storybook
5. publishing monorepo through lerna and conventional commits
6. New package creation through plop
7. js build support for js projects
8. playground support for os where storybook not supported.



# Issues
### ERR_OSSL_EVP_UNSUPPORTED or any issue with storybook run
1. enter `export NODE_OPTIONS=--openssl-legacy-provider`
### If plop command not working
1. enter  `npm i -g plop` to globally install plop and run plop command
### for package publishing 
1. login to your npm account through `npm login` or `yarn login`.
2. add organisation to your account.
3. change the root `package.json` name to `@<organisation_name>/<package_name>` where `<organisation_name> = your organisation name and <package_name> can be any name you want to give to your package`.
4. for private package publish you need to check npm docs.

# Installation
1. Globally install Yarn with `npm i -g yarn`
2. enter `yarn` to install all dev and direct dependencies

# Scripts
## Build all js folder for all packages
`yarn build`
## Bootstrap all common dependencies for all packages 
`yarn bootstrap`
## Remove all js folders for all packages
`yarn clean:js`
## Publish core package with all the inner packages
`yarn publish`
## Run Storybook with all the components
`yarn storybook`
## Build Storybook components
`yarn build-storybook`
## Create a new Package
`plop`


# Links to Useful Docs

## LERNA Monorepo Config
### Links
1. https://javascript.plainenglish.io/managing-javascript-monorepos-with-lerna-building-a-react-icon-library-publishing-to-npm-70855bfb31d9

## PLOP for creating basic package template
### Links
1. https://github.com/plopjs/plop
2. https://stackoverflow.com/questions/73281366/plop-js-template-files-adding-a-root-directory-in-the-destination-folder
3. https://www.npmjs.com/package/plop#addmany

## storybook config 
### Links
1. https://medium.com/@pongsatt/how-to-setup-storybook-in-react-typescript-project-ad2516515919

### OR
1. enter `npx -p @storybook/cli sb init`


### CLI options
1. https://storybook.js.org/docs/react/api/cli-options
npm package: @react-finland/content
Description: React Finland content
Latest version: 0.0.0-development

[![build status](https://secure.travis-ci.org/ReactFinland/content.svg)](http://travis-ci.org/ReactFinland/content) [![codecov](https://codecov.io/gh/ReactFinland/content/branch/master/graph/badge.svg)](https://codecov.io/gh/ReactFinland/content)

# React Finland Content

The content of the conference in JavaScript format. Please use [semantic commit message format](https://github.com/semantic-release/semantic-release#commit-message-format):

* `fix(topic): what` - Patch release.
* `feat(topic): what` - Feature release.
* `perf(topic): what` - Breaking release.
* `BREAKING CHANGE: what` - Breaking release.

## Notes

The project relies on [semantic-release](https://www.npmjs.com/package/semantic-release). Write commits accordingly.
npm package: @react-finland/content-2018
Description: React Finland 2018 content
Latest version: 12.33.0

[![build status](https://secure.travis-ci.org/ReactFinland/content-2018.svg)](http://travis-ci.org/ReactFinland/content-2018) [![codecov](https://codecov.io/gh/ReactFinland/content-2018/branch/master/graph/badge.svg)](https://codecov.io/gh/ReactFinland/content-2018)

# React Finland 2018 Content

The content of the conference in JavaScript format. Please use [semantic commit message format](https://github.com/semantic-release/semantic-release#commit-message-format):

* `fix(topic): what` - Patch release.
* `feat(topic): what` - Feature release.
* `perf(topic): what` - Breaking release.
* `BREAKING CHANGE: what` - Breaking release.

## Notes

The project relies on [semantic-release](https://www.npmjs.com/package/semantic-release). Write commits accordingly.
npm package: @react-firebase/hooks
Description: React Custom Hooks for interacting with Firebase
Latest version: 0.1.2

## React hooks for interacting with your Firebase database

React Firebase Hooks for React & React Native

## Install

```sh
  yarn add @react-firebase/hooks
```

## Usage

```jsx
import { FirebaseProvider, useDatabase } from "@react-firebase/hooks";

function UserBookmarks() {
  const { isLoading, value, ref } = useDatabase({
    path: "user_bookmarks/",
    limitToFirst: 2
  });
  return <pre>{JSON.stringify({ isLoading, value }, null, 2)}</pre>;
}

function App() {
  return (
    <FirebaseProvider firebase={firebase} {...config}>
      <UserBookmarks />
    </FirebaseProvider>
  );
}
```
npm package: @react-force/slate-editor
Description: A pre-packaged editor built on top of Slate
Author: Naresh Bhatia
Latest version: 1.1.1

# React Force Slate Editor

This is a light-weight medium-style editor with no editor chrome - only a
floating toolbar to support basic editing functions. It is based on the
[Slate](https://docs.slatejs.org/) framework. You can try out a live demo
[here](https://nareshbhatia.github.io/react-force/?path=/story/slate-editor-slateeditor--slate-editor-story).

![Screen Shot](assets/screen-shot.png)

## Features

-   Import from JSON or HTML
-   Export as JSON or HTML
-   Floating toolbar pops up when text is selected
-   Supported elements: `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `p`, `blockquote`,
    `ul`, `ol`, `li`, `a`, `pre`, `img`
-   Supported marks: bold, italic, underline, strikethrough, code
-   Full undo/redo
-   Paste HTML from clipboard
-   Paste links and images form clipboard

## Installation

```bash
npm install @react-force/slate-editor @material-ui/core @material-ui/icons @material-ui/lab
```

## Usage

### Minimal Example

This example uses a Slate document as its input and output.

```typescript jsx
import React, { useState } from 'react';
import { Node } from 'slate';
import { SlateEditor } from '@react-force/slate-editor';

const initialValue: Array<Node> = [
    {
        type: 'paragraph',
        children: [
            {
                text: 'Hello World!',
            },
        ],
    },
];

export const Example = () => {
    const [value, setValue] = useState<Array<Node>>(initialValue);

    return <SlateEditor value={value} onChange={setValue} />;
};
```

### HTML Example

This example uses an HTML document as its input and output.

```typescript jsx
import React, { Fragment, useState } from 'react';
import { Node } from 'slate';
import {
    deserializeFromHtml,
    serializeToHtml,
    SlateEditor,
} from '@react-force/slate-editor';

const initialValue = deserializeFromHtml('<p>Hello World!</p>');

export const Example = () => {
    const [value, setValue] = useState<Array<Node>>(initialValue);

    return (
        <Fragment>
            <SlateEditor value={value} onChange={setValue} />
            <div>{serializeToHtml(value)}</div>
        </Fragment>
    );
};
```

### Using in a form with Formik

To use the Slate Editor in a form, use the `RichTextField` component from
`@react-force/formik-mui`. See an example
[here](https://nareshbhatia.github.io/react-force/?path=/story/formik-richtextfield--rich-text-field-story).

## Styling

The editor is styled using your CSS. You can set the styles to whatever you
want.

Note that `<img>` tags are rendered with a class called `rf-img`. We recommend
defining this class in your CSS to set the max-width of images to 100%. For
example:

```css
.rf-img {
    max-width: 100%;
}
```

## Hot Keys

Note: `mod` represents the Command key on Mac and the Control key on Windows.

1. mod+b: bold
2. mod+i: italic
3. mod+u: underline
4. mod+k: add/edit image
npm package: @react-form-builder/components-mantine
Description: OptimaJet Form Builder Components - Mantine
Author: Optimajet
Latest version: 7.15.0

# OptimaJet React Form Builder RSuite components library

This library is part of the [React Form Builder](https://formengine.io/) project.

This package contains visual components based on [Mantine](https://mantine.dev/). To learn how to use the package, see
our [documentation](https://formengine.io/documentation/).

## Install

```bash
npm install @react-form-builder/core @react-form-builder/components-mantine
```

## Quickstart

```typescript jsx
import {view} from '@react-form-builder/components-mantine'
import {buildForm, FormViewer} from '@react-form-builder/core'
import '@mantine/core/styles.css'
import '@mantine/dates/styles.css'

const simpleForm = buildForm()
  .component('container', 'MtContainer')
  .style({flexDirection: 'row'})
  .children((builder) =>
    builder
      .component('firstName', 'MtTextInput')
      .prop('placeholder', 'Enter your first name')
      .prop('label', 'First Name')
      .validation('required')

      .component('lastName', 'MtTextInput')
      .prop('placeholder', 'Enter your last name')
      .prop('label', 'Last Name')
      .validation('required')
  )

  .component('birthDate', 'MtDatePickerInput')
  .prop('label', 'Birth Date')
  .validation('min').args({value: '1980-01-07T00:00:00.000Z'})

  .component('submit', 'MtButton')
  .prop('children', 'Submit')
  .event('onClick')
  .commonAction('validate').args({failOnError: true})
  .customAction('onSubmit')
  .json()

export const App = () => {
  return <FormViewer
    view={view}
    getForm={() => simpleForm}
    actions={{
      onSubmit: (e) => {
        // submit the form to the backend
        alert('Form data: ' + JSON.stringify(e.data))
      },
    }}
  />
}
```

## Resources

- [Website](https://formengine.io/)
- [Documentation](https://formengine.io/documentation)
- [Demo](https://demo.formengine.io/)

## Licensing

This library is distributed under the MIT license.
npm package: @react-form-builder/components-uploader
Description: OptimaJet Form Builder Components - Uploader
Author: Optimajet
Latest version: 7.15.0

# OptimaJet React Form Builder Uploader components library

This library is part of the [React Form Builder](https://formengine.io/) project.

This package contains file upload component with drag and drop support based on [React Dropzone](https://npmjs.com/package/react-dropzone).
To learn how to use the package, see our [documentation](https://formengine.io/documentation/).

## License

This library is distributed under the MIT license.
npm package: @react-form-builder/json-schema-generator
Description: OptimaJet Form Builder Components - JSON schema generator
Author: Optimajet
Latest version: 7.15.0

# OptimaJet React Form Builder JSON schema generator

This library is part of the [React Form Builder](https://formengine.io/) project.

This package contains functions for creating a JSON schema for a form using a list of used components.

Example of use:

```typescript jsx
import {builderViewWithCss, components, rSuiteComponentsDescriptions} from '@react-form-builder/components-rsuite'
import type {GenerateJsonFormSchemaOptions} from '@react-form-builder/designer'
import {FormBuilder} from '@react-form-builder/designer'
import {createSchema} from '@react-form-builder/json-schema-generator'

// Example of use without Designer
function generateMySchema() {
  // or use your components
  const myComponents = components
  // or use your component descriptions
  const myDescriptions = rSuiteComponentsDescriptions
  const schema = createSchema(myComponents, [myDescriptions])
  return JSON.stringify(schema, undefined, 2)
}

const generateJsonFormSchema = (options: GenerateJsonFormSchemaOptions) => {
  const {components, descriptions} = options
  const schema = createSchema(components, descriptions)
  return JSON.stringify(schema, undefined, 2)
}

// Example of use in Designer
const App = () => {
  return <FormBuilder
    view = {builderViewWithCss}
    generateJsonFormSchema = {generateJsonFormSchema}
  />
}
```

## License

MIT
npm package: @react-formgen/yup
Description: A headless, type-safe, customizable, and super simple React form generator.
Author: m6io
Latest version: 0.0.0-alpha.27

# @react-formgen/yup

A headless, type-safe, customizable, and super simple React form and data view generator. Turn your Yup schemas into forms and data views with ease.

[![npm version](https://badge.fury.io/js/@react-formgen%2Fyup.svg)](https://badge.fury.io/js/@react-formgen%2Fyup)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/@react-formgen%2Fyup)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

[Docs are boring, take me to the examples!](https://github.com/m6io/react-formgen/tree/main/examples)

Takes a Yup schema, some initial data (if you have any), and a few callbacks (onSubmit and onError), and returns a form with input validation and error handling.

Can be used with (almost) any UI component library, including your own.

Use cases:

1. You don't want (or don't have time) to write a bunch of forms from scratch.
2. You want to share Yup schema with your backend (assuming you're using something JS/TS based on the backend) to have a consistent end-to-end validation experience (one schema to rule them all! 🧙‍♂️).
3. You want to generate forms dynamically (e.g., for a CMS, a form builder, a configuration tool, etc.).

## Installation

Install with npm

```bash
npm install @react-formgen/yup yup
```

with Yarn

```bash
yarn add @react-formgen/yup yup
```

or with pnpm

```bash
pnpm install @react-formgen/yup yup
```

Note: this package is an attempt to replicate the form-generating functionality introduced by [@react-formgen/json-schema](https://www.npmjs.com/package/@react-formgen/json-schema) but with Yup schemas instead of JSON schemas and Yup validation instead of Ajv validation.
npm package: @react-formgen/zod
Description: A headless, type-safe, customizable, and super simple React form generator.
Author: m6io
Latest version: 0.0.0-alpha.27

# @react-formgen/zod

A headless, type-safe, customizable, and super simple React form and data view generator. Turn your Zod schemas into forms and data views with ease.

[![npm version](https://badge.fury.io/js/@react-formgen%2Fzod.svg)](https://badge.fury.io/js/@react-formgen%2Fzod)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/@react-formgen%2Fzod)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

[Docs are boring, take me to the examples!](https://github.com/m6io/react-formgen/tree/main/examples)

Takes a Zod schema, some initial data (if you have any), and a few callbacks (onSubmit and onError), and returns a form with input validation and error handling.

Can be used with (almost) any UI component library, including your own.

Use cases:

1. You don't want (or don't have time) to write a bunch of forms from scratch.
2. You want to share Zod schema with your backend (assuming you're using something JS/TS based on the backend) to have a consistent end-to-end validation experience (one schema to rule them all! 🧙‍♂️).
3. You want to generate forms dynamically (e.g., for a CMS, a form builder, a configuration tool, etc.).

## Installation

Install with npm

```bash
npm install @react-formgen/zod zod
```

with Yarn

```bash
yarn add @react-formgen/zod zod
```

or with pnpm

```bash
pnpm install @react-formgen/zod zod
```

Note: this package is an attempt to replicate the form-generating functionality introduced by [@react-formgen/json-schema](https://www.npmjs.com/package/@react-formgen/json-schema) but with Zod schemas instead of JSON schemas and Zod validation instead of Ajv validation.
npm package: @react-formilicious/bulma
Description: react-formilicious for the Bulma CSS framework. 🎨
Author: PatrickSachs
Latest version: 2.1.1

# @react-formilicious/bulma ![npm](https://img.shields.io/npm/v/@react-formilicious/bulma.svg)

Fields for react-formilicious, using the Bulma CSS framework. 🎨

See the storybook for documentation and all available components here: https://patricksachs.github.io/react-formilicious/bulma/

## Quick Start

Install `@react-formilicious/bulma`:

```
$ npm i @react-formilicious/bulma
```

Import in your code:

```js
// Make sure to use the Form provided by this library instead of the one by core!
import Form from "@react-formilicious/bulma";
import TagList from "@react-formilicious/bulma/TagList";

<Form
  data={{}}
  elements={[
    {
      key: 'tagList',
      name: 'TagList',
      type: TagList
    }
  ]}
  onSubmit={() => { /* ... */ }}
/>
```

## License

This library is licensed under the MIT License. See the `LICENSE` file at the root of this source tree for more information.
npm package: @react-formilicious/validator-pwned
Description: Have I Been Pwned? for react-formilicious 👊
Author: Patrick Sachs
Latest version: 1.0.0

# Have I Been Pwned?

A field validator for [https://github.com/PatrickSachs/react-formilicious/](react-formilicious) based on the [https://haveibeenpwned.com/](haveibeenpwned.com) database.

See the storybook for documentation and all available components here: https://patricksachs.github.io/react-formilicious/validator-pwned/

```jsx
import pwned from "@react-formilicious/validator-pwned";

<Form
  data={{
    password: "test123"
  }}
  elements={[
    {
      type: TextField,
      mode: "password",
      key: "password",
      name: "🔑 Password",
      placeholder: "🔑 Your super secret password here!",
      validator: pwned() // Simply add this as a validator, and you are good to go!
    }
  ]}/>
```

![](https://patrick-sachs.de/content/react-formilicious/wiki/validator5.gif)
npm package: @react-formless/antd
Description: ant-design render map for @react-formless/core
Author: Grzegorz Moskal
Latest version: 1.14.0

# @react-formless/antd

![tests status](https://github.com/gmoskal/react-formless/workflows/CI/badge.svg)

> Ant Design render map for `@react-formless/core`.

Check custom renderers in [action](https://gmoskal.github.io/react-formless/)

```typescript
import * as React from "react"

import { useFormHook, FormView, FormSchema } from "@react-formless/core"
import { antDesignRenderMap } from "@react-formless/antd"

export type Car = { make: string }

const carMakes: Array<[string, string]> = [
    ["Tesla", "tesla-id"],
    ["Honda", "honda-id"],
    ["BMW", "bmw-id"]
]

const schema: FormSchema<Car> = { make: { type: "select", values: carMakes } }

export const AntDesignForm: React.FC = () => {
    const { formViewProps } = useFormHook({ schema })
    return <FormView {...formViewProps} inputsRenderMap={antDesignRenderMap} />
}
```

Checkout [full example](https://github.com/gmoskal/react-formless/blob/master/packages/examples/src/custom-renderers/index.tsx)

## Install

Using npm:

```sh
npm i --save-dev @react-formless/antd
```

or using yarn:

```sh
yarn add @react-formless/antd --dev
```

For more in depth documentation see [@react-formless](https://github.com/gmoskal/react-formless).
npm package: @react-formless/core
Description: Data-driven react forms library written in typescript
Author: Grzegorz Moskal
Latest version: 1.14.0

# @react-formless/core

![tests status](https://github.com/gmoskal/react-formless/workflows/CI/badge.svg)

> react-formless core package

See main documentation of [@react-formless](https://github.com/gmoskal/react-formless).

## Install

Using npm:

```sh
npm i --save-dev @react-formless/core
```

or using yarn:

```sh
yarn add @react-formless/core --dev
```
npm package: @react-formless/react95
Description: react95 render map for @react-formless/core
Author: Grzegorz Moskal
Latest version: 1.14.0

# @react-formless/react95

![tests status](https://github.com/gmoskal/react-formless/workflows/CI/badge.svg)

> React95 render map for `@react-formless/core`.

Check custom renderers in [action](https://gmoskal.github.io/react-formless/)

## install

first install core package and reac95 renderer (using yarn or npm)

```sh
yarn add @react-formless/core @react-formless/react95 --dev
```

then you may enjoy windows 95 experience within your forms ;)

```typescript
import * as React from "react"

import { useFormHook, FormView, FormSchema } from "@react-formless/core"
import { react95Elements, react95Inputs } from "@react-formless/react95"

export type Car = { make: string }

const carMakes: Array<[string, string]> = [
    ["Tesla", "tesla-id"],
    ["Honda", "honda-id"],
    ["BMW", "bmw-id"]
]

const schema: FormSchema<Car> = { make: { type: "select", values: carMakes } }

export const AntDesignForm: React.FC = () => {
    const { formViewProps } = useFormHook({ schema })
    return <FormView {...formViewProps} inputsRenderMap={react95Inputs} elementsRenderMap={react95Elements}/>
}
```

Checkout [full example](https://github.com/gmoskal/react-formless/blob/master/packages/examples/src/custom-renderers/index.tsx)

For more in depth documentation see [@react-formless](https://github.com/gmoskal/react-formless).
npm package: @react-formless/utils
Description: set of very useful ts utils (including Elm style validators)
Author: Grzegorz Moskal
Latest version: 1.13.1

# @react-formless/utils

> typescript/react utils

![tests status](https://github.com/gmoskal/react-formless/workflows/CI/badge.svg)

The set of functions that I found very useful for writing an application using react and typescript

## extend()

### Signature

### Description

It takes any object and returns function that takes any part of that object and returns this object and part combained.
Tip: _When used together with `react.useState` it gives certainty that the reduction step was done in a proper way._

### Example

```typescript
import { extend } from "@react-formless/utils"

type T = { foo: number, bar: number}
type ReduceFn = (state: T) => T

// there is no warning here
const reduce: ReduceFn = state => ({ ...state, bra: 1 })

// this one gives error: Argument of type '{ bra: number; }' 
// is not assignable to parameter of type 'Partial<T>'.
const reduce: ReduceFn = state => extend(state)({bra: 1})
```

Consider a `react world` example

```typescript
import * as React from "react"

export const Comp = () => {
    const [state, setState] = React.useState({ foo: 1, bar: 2 })
    return (
        <>
            <h1>foo {state.foo}</h1>
            <button onClick={_ => setState({ ...state, foo: state.foo + 1 })}>+</button>
            <button onClick={_ => setState(s => ({ ...s, foo: 0 }))}>reset</button>
            <h1>bar {state.bar}</h1>
            <button onClick={_ => setState(s => ({ ...s, bar: s.bar + 1 }))}>+</button>
            <button onClick={_ => setState(s => ({ ...s, bra: 0 }))}>reset</button>
        </>
    )
}
```

Same component with `extend()` use

```typescript
import * as React from "react"
import { extend } from "@react-formless/utils"

export const Comp2 = () => {
    const [state, setState] = React.useState({ foo: 1, bar: 2 })
    return (
        <>
            <h1>foo {state.foo}</h1>
            <button onClick={_ => setState(s => extend(s)({ foo: s.foo + 1 }))}>+</button>
            <button onClick={_ => setState(s => extend(s)({ foo: 0 }))}>reset</button>
            <h1>bar {state.bar}</h1>
            <button onClick={_ => setState(s => extend(s)({ bar: s.bar + 1 }))}>+</button>
            <button onClick={_ => setState(s => extend(s)({ bra: 0 }))}>reset</button>
        </>
    )
}
```

[Check it out your self](https://stackblitz.com/edit/react-ts-n3sg2e?embed=1&file=index.tsx&hideExplorer=1)

## omitObject()

```typescript
type omitObjectFunction = <T, K extends keyof T>(source: T, keysToOmit: K[]) => Omit<T, K>
```

It takes any object and any array of keys of that object and return object with all given keys omited.

## keys()

```typescript
type keysFunction = <T>(source: T) => Array<keyof T>
```

typed `Object.keys`

## TODO

describe everything else
npm package: @react-foundry/anchor
Description: A drop-in replacement for the 'a' element.
Author: Daniel A.C. Martin
Latest version: 0.1.9

React Foundry - Anchor
======================

A drop in replacement for the HTML `<a>` tag that works with [React Router].


Preview
-------

![Preview][Preview]


Using this package
------------------

First install the package into your project:

```shell
npm install -S @react-foundry/anchor
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import { A } from '@react-foundry/anchor';

export const MyComponent = props => (
  <A href="#">My link</A>
);

export default MyComponent;
```


Working on this package
-----------------------

Before working on this package you must install its dependencies using
the following command:

```shell
pnpm install
```


### Testing

```shell
npm test
```


### Building

```shell
npm run build
```


### Clean-up

```shell
npm run clean
```


[React Router]: https://reacttraining.com/react-router/
[Preview]: ../../__image_snapshots__/storyshots-itest-ts-image-storyshots-components-anchor-standard-1-snap.png
npm package: @react-foundry/anchor-list
Description: A list of anchors.
Author: Daniel A.C. Martin
Latest version: 0.1.9

React Foundry - Anchor List
===========================

A list of anchors. Items that contain links to the current page are
marked as active. Useful for navigation menus.


Using this package
------------------

First install the package into your project:

```shell
npm install -S @react-foundry/anchor-list
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import AnchorList from '@react-foundry/anchor-list';

export const MyComponent = props => (
  <AnchorList items={[
    { href: '/', text: 'Inactive 1' },
    { href: '#main-content', text: 'Active' },
    { href: '/#main-content', text: 'Inactive 2' }
  ]} />
);

export default MyComponent;
```


Working on this package
-----------------------

Before working on this package you must install its dependencies using
the following command:

```shell
pnpm install
```


### Testing

```shell
npm test
```


### Building

```shell
npm run build
```


### Clean-up

```shell
npm run clean
```
npm package: @react-foundry/app-plop-pack
Description: Generators for use within applications and prototypes.
Author: Daniel A.C. Martin
Latest version: 0.1.9

React Foundry - Application plop-pack
=====================================

Generators for use within applications and prototypes.


Using this package
------------------

First install the package into your project:

```shell
npm install -D @react-foundry/app-plop-pack
```

Then use it in your `plopfile.js` as follows:

```js
module.exports = plop => {
  plop.load('@react-foundry/app-plop-pack');

  // ...
}
```


Working on this package
-----------------------

Before working on this package you must install its dependencies using
the following command:

```shell
pnpm install
```


### Building

Build the package by compiling the source code.

```shell
npm run build
```


### Clean-up

Remove any previously built files.

```shell
npm run clean
```
npm package: @react-foundry/client-component-helpers
Description: Helper functions for writing client components.
Author: Daniel A.C. Martin
Latest version: 0.1.9

React Foundry - Client Component Helpers
========================================

Helper functions for writing client components.


Using this package
------------------

First install the package into your project:

```shell
npm install -S @react-foundry/client-component-helpers
```

Then use it in your code as follows:

```js
import clientComponentHelpers from '@react-foundry/client-component-helpers';

// WRITEME

```


Working on this package
-----------------------

Before working on this package you must install its dependencies using
the following command:

```shell
pnpm install
```


### Building

```shell
npm run build
```


### Clean-up

```shell
npm run clean
```