open-index/open-npm huggingface dataset:
npm package: @principlestudios/react-jotai-form-components
Description: 👻 Form components for use with @principlestudios/react-jotai-form
Author: Matt DeKrey
Latest version: 0.2.1

# React Jotai Form Components

Provides a few basic form components for use with `@principlestudios/react-jotai-forms` by leveraging `@principlestudios/jotai-react-signals`.

Four individual imports are provided with this package:

- `@principlestudios/react-jotai-form-components/atom-contents` provides a component that will render an atom passed to the children of the component within a fragment. This could be useful when rendering error messages or other React elements.

  ```jsx
  import AtomContents from '@principlestudios/react-jotai-form-components/atom-contents';

  <AtomContents>{atom}</AtomContents>;
  ```

- `@principlestudios/react-jotai-form-components/input` provides an input element that allows React to treat the input element as an uncontrolled component, but an atom passed to `defaultValue` or `defaultChecked` will update the element without a React rerender. Also maps `className`, `disabled`, and `readOnly` to allow atoms.

  ```jsx
  import JotaiInput from '@principlestudios/react-jotai-form-components/input';

  <JotaiInput defaultValue={atom} />;
  ```

- `@principlestudios/react-jotai-form-components/select` provides a select element that allows React to treat the select element as an uncontrolled component, but an atom passed to `defaultValue` will update the element without a React rerender. Also maps `className` and `disabled` to allow atoms.

  ```jsx
  import JotaiSelect from '@principlestudios/react-jotai-form-components/select';

  <JotaiSelect defaultValue={atom} />;
  ```

- `@principlestudios/react-jotai-form-components/textarea` provides a textarea element that allows React to treat the textarea element as an uncontrolled component, but an atom passed to `defaultValue` will update the element without a React rerender. Also maps `className`, `disabled`, and `readOnly` to allow atoms.

  ```jsx
  import JotaiTextarea from '@principlestudios/react-jotai-form-components/textarea';

  <JotaiTextarea defaultValue={atom} />;
  ```
npm package: @principlestudios/react-jotai-forms
Description: 👻 React Forms using Jotai
Author: Matt DeKrey
Latest version: 0.4.0

# @principlestudios/react-jotai-forms

_A flexible TypeScript-friendly forms library using React and Jotai_

Additional dependencies currently include:

- zod
- react-i18next (recommended)

## Why another forms library?

Forms on the web are deceptively difficult. Developers need to balance
usability, accessibility, validation, APIs, and even custom fields, making each
form a unique challenge, even within a single web application. Existing form
libraries for React help significantly, but are laden with years of difficult
API decisions.

Some of the primary goals of this library include:

- _Support sub-forms._ For instance, a check-out of a shopping cart may have
  two different address fields; we want a TypeScript-friendly `AddressField`
  component to be able to be created.
- _Translatable validation._ Form validation is tricky enough without the
  challenge of changing error messages within the validation schema; we want
  to provide developer-readable error codes for each field to be translated just
  before displaying to the end user.
- _Support both uncontrolled and controlled components._ Jotai provides an
  excellent library for storing state that does not force React re-renders; this
  allows our forms to both be correct and efficient.
- _Mapping from API structure to form structure._ Even when the APIs are
  designed with front-end developers in mind, there are many situations where
  the React component needs a different structure (especially for reuse).

## Basic example

```typescript
const myFormSchema = z.object({ name: z.string() });

type FormDemoProps = {
	onSubmit: (data: MyForm) => void;
};

export function FormDemo({ onSubmit }: FormDemoProps) {
	const form = useForm({
		schema: myFormSchema,
		defaultValue,
		fields: {
			name: ['name'],
		},
	});

	return (
		<form className="w-full h-full" onSubmit={form.handleSubmit(onSubmit)}>
			<JotaiInput {...form.fields.name.htmlProps()} />
			<button type="submit">{t('submit')}</button>
		</form>
	);
}
```

## What won't this do?

To set some boundaries, there's a number of things this library will not
support:

- _Form presentation._ Every application is unique; styled components will not
  be provided.
- _Form layout._ Because this library receives definitions for final object
  structures rather than user-driven structures, form layout cannot be
  determined.
- _User-presentable error messages._ This library will provide
  developer-readable error codes that can run through a translation library for
  user presentation.
npm package: @principlestudios/react-scripts-lib
Description: Configuration and scripts for Create React App.
Latest version: 4.0.5
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @principlestudios/react-scripts-lib

React-scripts for making webpack libraries.

Use these via `npx create-react-app <app-name> --scripts-version @principlestudios/react-scripts-lib --template @principlestudios/typescript-lib` or another template.

These react-scripts automatically detect additional entry points for multi-page applications whose HTML is not controlled by the react-scripts themselves.

## Features

- Your entrypoints are detected within the source folder as `**/*.entrypoint.{js|jsx|ts|tsx}`.
- The entry points are named uniquely, using the file path under src. For example:
  - `src/App.entrypoint.tsx` becomes `App`
  - `src/nested/some-component.ts` becomes `nested_some_component`
- An app manifest is created for you at `<build>/asset-manifset.json`. Its structure looks similar to the following:

        {
          "files": {
            "static/js/0.442924c6.chunk.js": "/static/js/0.442924c6.chunk.js",
            "static/js/0.442924c6.chunk.js.map": "/static/js/0.442924c6.chunk.js.map",
            "App.css": "/static/css/App.fafd10be.css",
            "App.js": "/static/js/App.74322cf0.js",
            "App.js.map": "/static/js/App.74322cf0.js.map",
            "deep_App_test.css": "/static/css/deep_App_test.fafd10be.css",
            "deep_App_test.js": "/static/js/deep_App_test.41cedd8a.js",
            "deep_App_test.js.map": "/static/js/deep_App_test.41cedd8a.js.map",
            "static/js/3.c0ddb0b2.chunk.js": "/static/js/3.c0ddb0b2.chunk.js",
            "static/js/3.c0ddb0b2.chunk.js.map": "/static/js/3.c0ddb0b2.chunk.js.map",
            "static/css/App.fafd10be.css.map": "/static/css/App.fafd10be.css.map",
            "static/css/deep_App_test.fafd10be.css.map": "/static/css/deep_App_test.fafd10be.css.map",
            "static/js/0.442924c6.chunk.js.LICENSE.txt": "/static/js/0.442924c6.chunk.js.LICENSE.txt",
            "static/media/logo.6ce24c58.svg": "/static/media/logo.6ce24c58.svg"
          },
          "entrypoints": {
            "App": [
              "/static/js/0.442924c6.chunk.js",
              "/static/css/App.fafd10be.css",
              "/static/js/App.74322cf0.js"
            ],
            "deep_App_test": [
              "/static/js/0.442924c6.chunk.js",
              "/static/css/deep_App_test.fafd10be.css",
              "/static/js/deep_App_test.41cedd8a.js"
            ]
          }
        }

  - The files list is just that - a list of all the files built via the build process.
  - The entrypoints is a list of files that must be bootstrapped for each entry point to work. Some are scripts and some are styles.

- An ambient variable is added to the page with the default export from your entry point. The name of your entrypoint (above) is prefixed with `react_`.

  - `src/App.entrypoint.tsx` becomes `react_App`
  - `src/nested/some-component.ts` becomes `react_nested_some_component`

  This entrypoint depends on your template.
npm package: @princjef/tslint-config
Description: TSLint configuration for Typescript packages.
Author: Jeff Principe
Latest version: 2.0.2

# tslint-config

[![Build Status](https://dev.azure.com/princjef/github-ci/_apis/build/status/princjef.tslint-config?branchName=master)](https://dev.azure.com/princjef/github-ci/_build/latest?definitionId=4&branchName=master)
[![npm version](https://img.shields.io/npm/v/@princjef/tslint-config.svg)](https://npmjs.org/package/@princjef/tslint-config)

Opinionated TSLint configuration built on top of the
[Airbnb style guide](https://github.com/airbnb/javascript) and designed to be
used alongside [Prettier](https://prettier.io/) for code formatting.

## Usage

You can install this package in your project by running:

```
npm install --save-dev @princjef/tslint-config
```

To use, add the following to your `tslint.json`:

```json
{
  "extends": "@princjef/tslint-config"
}
```