open-index/open-npm huggingface dataset:
npm package: @neat-tech/bundle-web
Description: From the infrastructure point of view it's better to set some env variables during the runtime, and to set others during the build time to enable bundle optimizations. Examples:
Author: Vadim Majsuk
Latest version: 1.0.1-rc1

## Runtime env variables for frontend

From the infrastructure point of view it's better to set some env variables during the runtime, and to set others during the build time to enable bundle optimizations. Examples:

- NODE_ENV should always be set during build time, because it enables dead code elimination
- Feature flags _can_ be enabled during build time as well, because is also enables dead code elimination
- Things like backend url, sentry key etc should be set during runtime, because these envs don't allow for extra optimizations. Setting them on container startup allows for more flexible infra management

This is how we enable runtime variables for static frontend:

1. We pass current env to HtmlWebpackPlugin as templateParameters:

```tsx
const { parsed: env } = dotenv.config();
addPlugin(
  config,
  new HtmlWebpackPlugin({
    filename,
    templateParameters: { env },
    template,
    favicon,
    chunks,
  })
);
```

2. Later in the index.ejs, we create a script that sets env variables as window properties:

```ejs
<script>
  <%= Object.keys(env).map(key => `window.${key} = '${env[key]}';`).join('') %>
</script>
```

(turns into)

```html
<script>
  window.BACKEND_URL = 'https://google.com';
</script>
```

3. When building the app, pass \$VARIABL_NAME instead of actual variable value.

```tsx
addPlugin(
  config,
  new HtmlWebpackPlugin({
    filename,
    templateParameters: { BACKEND_URL: '$BACKEND_URL' },
    template,
    favicon,
    chunks,
  })
);
```

4. On container startup, run envsubst on html files
npm package: @neat-tech/cli
Description: ```bash ## The following will initialize a project named My-Project with a template Neat-Template-Web npx @neat-tech/cli --name My-Project --template web
Author: Vadim Majsuk
Latest version: 1.0.1

# Initialize a project

```bash
## The following will initialize a project named My-Project with a template Neat-Template-Web
npx @neat-tech/cli --name My-Project --template web

```

You can check the list of templates [here](https://github.com/NeatTech-io?q=Neat-Template&type=&language=&sort=). `template` argument is `repositoryName.replace('Neat-Template-', '').toLowerCase()`
npm package: @neat-tech/configs
Description: ```bash yarn add @neat-tech/configs ```
Author: Vadim Majsuk
Latest version: 1.0.6

ESLint is a tool for identifying and reporting on patterns found in code

## Installation

```bash
yarn add @neat-tech/configs
```

## Usage

.eslintrc.yml

```
extends: './node_modules/@neat-tech/configs/dist/.eslintrc.yml'
```
npm package: @neat-tech/form
Description: Tools for writing type-safe forms in react
Author: Vadim Majsuk
Latest version: 1.0.6

# @neat-tech/form

Tools for writing type-safe forms in react

### Installation

```
yarn add @neat-tech/form
```

### Usage

Library provides `useForm` hook for native and web apps.

```tsx
import { Native } from '@neat-tech/form';
//or
import { Web } from '@neat-tech/form';
```

#### Quick showcase

```tsx
import { Web } from '@neat-tech/form'
import * as yup from 'yup'

const schema = yup.object({
  name: string().required()
})

const UsageExample = () => {
  const { field, formProps, submitProps, values } = Web.useForm({
    schema,
    onSubmit: async values => console.log(values)
  })

  return (
    <>
      <form {...formProps}>
        {/** 'name' here gets type checked */}
        <input {...field('name')}>
      </form>

      <button {...submitProps}>Submit</button>
    </>
  )
}
```

### API

```
useForm(config: FormConfig): UseFormResult
```

`FormConfig` - same options as [useFormik](https://formik.org/docs/api/useFormik) accepts, though a little bit more type-safe

`UseFormResult`:

## Web:

```tsx
export interface UseFormResult<Values> {
  submitProps: {
    disabled: boolean; // whether button is disabled
    loading: boolean; // whether button should display spinner
    form: string; // form id - needed to tie button with form the web way
    type: 'submit'; // type=submit, needed for web
  };
  initialValues?: Partial<Values>; // initial values
  validateForm: () => Promise<boolean>; // async function to validate form
  formProps: {
    id: string; // form id - needed to make submit button submit form even if outside of <form> tag
    onSubmit: (e?: React.FormEvent<HTMLFormElement> | undefined) => void; // onSubmit handler
  };
  values: Partial<Values>; // values
  field: (
    path
  ) => {
    value: Value | undefined; // value at given path
    error?: string | object; // error at given path
    onChange: (v?: Value) => void; // onChange for given path
  };
  formik: Formik<Values>; // object that is returned by formik
}
```

## Native:

```tsx
export interface UseFormResult<Values> {
  submitProps: {
    disabled: boolean; // whether button is disabled
    loading: boolean; // whether button should display spinner
    onPress: () => void; // submit form by submit button
  };
  initialValues?: Partial<Values>; // initial values
  validateForm: () => Promise<boolean>; // async function to validate form
  formProps: {
    id: string; // form id - needed to make submit button submit form even if outside of <form> tag
    onSubmit: (e?: React.FormEvent<HTMLFormElement> | undefined) => void; // onSubmit handler
  };
  values: Partial<Values>; // values
  field: (
    path
  ) => {
    value: Value | undefined; // value at given path
    error?: string | object; // error at given path
    onChange: (v?: Value) => void; // onChange for given path
    submitForm: () => void; // submit form by input
  };
  formik: Formik<Values>; // object that is returned by formik
}
```
npm package: @neat-tech/react-notify
Description: Implementation of notify library used to display notifications. Environment: mobile, frontend.
Author: Ruslana
Latest version: 1.0.3

## Neat notify

Implementation of notify library used to display notifications.
Environment: mobile, frontend.

### Installation

```bash
yarn add @neat-tech/react-notify
```

### Usage

Neat notify provides `useNotify` hook which allows to stack notifications on top of each other thanks to promise Ref.current in show function.
`notify` has `error`, `success`, `logAndError` types out of the box.

1. Basic usage:

```jsx
const logger = useLogger(); // in order to use automatic metadata logging, you must use hook from @neat/frontend to get logger

return (
  // renderItem will display notification text
  <NotificationsProvider logger={logger.error} renderItem={Snackbar}>
    <Component />
  </NotificationsProvider>
);

const Component = () => {
  const notify = useNotify();

  notify.success('Success');
};
```

2. Customize your own type with notify.show function:

```jsx
const useNotify = () => {
  const notify = useNotifyBase() // use useNotify hook form library as base
  const logger = useLogger()

  return {
    // you can create your own type and add here
    info: (text: string) => {
      logger.info(text)
      notify.show('info', text)
    },
  }
}

const notify = useNotify()

...notify.info('Info')
```