# neeto-commons-frontend

A library that packages common boilerplate frontend code necessary for all neeto
products.

<table>
<thead>
<tr>
<th style="text-align: left;">

Category

</th>
<th style="text-align: left;">

Name

</th>
</tr>
</thead>
<tbody>

<tr>
<td  style="vertical-align: top;">

Initializers [↗](./docs/initializers/README.md)

</td>
<td  style="vertical-align: top;">

- [Set up axios](./docs/initializers/axios.md)
- [Set up globalProps](./docs/initializers/globalProps.md)
- [Set up translations](./docs/initializers/translation.md)
- [Set up logger](./docs/initializers/logger.md)
- [Disable React Developer Tools in production](./docs/initializers/reactDevTools.md)
- [Set up mixpanel](./docs/initializers/mixpanel.md)

</td>
</tr>
<tr></tr>

<tr>
<td  style="vertical-align: top;">

React utilities [↗](./docs/react/README.md)

</td>
<td  style="vertical-align: top;">

- [useDebounce](./docs/react/hooks/useDebounce.md)
- [useFuncDebounce](./docs/react/hooks/useFuncDebounce.md)
- [usePrevious](./docs/react/hooks/usePrevious.md)
- [useUpdateEffect](./docs/react/hooks/useUpdateEffect.md)
- [useLocalStorage](./docs/react/hooks/useLocalStorage.md)
- [useOnClickOutside](./docs/react/hooks/useOnClickOutside.md)
- [useFieldSubmit](./docs/react/hooks/useFieldSubmit.md)
- [useKeyboardShortcutsPaneState](./docs/react/hooks/useKeyboardShortcutsPaneState.md)
- [useDisplayErrorPage](./docs/react/hooks/useDisplayErrorPage.md)
- [useErrorDisplayStore](./docs/react/hooks/useDisplayErrorPage.md#useerrordisplaystore-source-code)
- [useTimer](./docs/react/hooks/useTimer.md)
- [useRegisterNavigationCheckpoint](./docs/react/hooks/useRegisterNavigationCheckpoint.md)
- [useNavigationCheckpoints](./docs/react/hooks/useNavigationCheckpoints.md)
- [useRestoreScrollPosition](./docs/reaact/hooks/useRestoreScrollPosition.md)
- [useRemoveNavigationCheckpoint](./docs/react/hooks/useRemoveNavigationCheckpoint.md)
- [useMutationWithInvalidation](./docs/react/hooks/useMutationWithInvalidation.md)
- [useFetchNeetoApps](./docs/react/hooks/useFetchNeetoApps.md)
- [usePersistedQuery](./docs/react/hooks/usePersistedQuery.md)
- [useIsElementVisibleInDom](./docs/react/hooks/useIsElementVisibleInDom.md)
- [useStateWithDependency](./docs/react/hooks/useStateWithDependency.md)
- [useQueryParams](./docs/react/hooks/useQueryParams.md)
- [useBreakpoints](./docs/react/hooks/useBreakpoints.md)
- [useColumnConfig](./docs/react/hooks/useColumnConfig.md)
- [PrivateRoute](./docs/react/components/PrivateRoute.md)
- [AppContainer](./docs/react/components/AppContainer.md)
- [QueryClientProvider](./docs/react/components/QueryClientProvider.md)
- [HoneybadgerErrorBoundary](./docs/react/components/HoneybadgerErrorBoundary.md)
- [withImmutableActions](./docs/react/utils/withImmutableActions.md)
- [withTitle](./docs/react/utils/withTitle.md)
- [registerBrowserNotifications](./docs/react/utils/registerBrowserNotifications.md)
- [destroyBrowserSubscription](./docs/react/utils/destroyBrowserSubscription.md)
- [handleMetaClick](./docs/react/utils/handleMetaClick.md)
- [isMetaKeyPressed](./docs/react/utils/isMetaKeyPressed.md)
- [withT](./docs/react/utils/withT.md)

</td>
  </tr>
</td>

</tr>
<tr></tr>
<tr>
<td style="vertical-align: top;">

Pure utility functions [↗](https://github.com/bigbinary/neeto-cist)

</td>
<td style="vertical-align: top;">

Moved into [@bigbinary/neeto-cist](https://github.com/bigbinary/neeto-cist)

</td>

</tr>

<tr></tr>

<tr>
<td style="vertical-align: top;">

Web utility functions [↗](./docs/utils/README.md)

</td>
<td style="vertical-align: top;">

- [withEventTargetValue](./docs/utils/withEventTargetValue.md)
- [getSubdomain](./docs/utils/getSubdomain.md)
- [simulateApiCall](./docs/utils/simulateApiCall.md)
- [copyToClipboard](./docs/utils/copyToClipboard.md)
- [buildUrl](./docs/utils/buildUrl.md)
- [dateFormat](./docs/utils/dateFormat.md)
- [dayjs](./docs/utils/dayjs.md)
- [toLocale](./docs/utils/toLocale.md)
- [getQueryParams](./docs/utils/getQueryParams.md)
- [joinHyphenCase](./docs/utils/joinHyphenCase.md)
- [hyphenize](./docs/utils/hyphenize.md)
- [debounce](./docs/utils/debounce.md)
- [hasPermission](./docs/utils/hasPermission.md)
- [hasAnyPermission](./docs/utils/hasAnyPermission.md)
- [hasAllPermissions](./docs/utils/hasAllPermissions.md)
- [createSubscription](./docs/utils/createSubscription.md)
- [getFromLocalStorage](./docs/utils/getFromLocalStorage.md)
- [setToLocalStorage](./docs/utils/setToLocalStorage.md)
- [removeFromLocalStorage](./docs/utils/removeFromLocalStorage.md)
- [currencyFormat](./docs/utils/currencyFormat.md)
- [showThumbsUpToastr](./docs/utils/showThumbsUpToastr.md)
- [captureAnalyticsEvent](./docs/utils/captureAnalyticsEvent.md)
- [captureAnalyticsPageView](./docs/utils/captureAnalyticsPageView.md)
- [buildNestedAttributesPayload](./docs/utils/buildNestedAttributesPayload.md)
- [loadGoogleFonts](./docs/utils/loadGoogleFonts.md)

</td>

</tr>

</tbody>
</table>

## Installation Instructions

Install from npm:

```bash
yarn add "@bigbinary/neeto-commons-frontend@latest"
```

This package relies on the host project's tailwind configuration. So add
neeto-commons-frontend to your project's tailwind.config.js file:

```js
module.exports = {
  purge: {
    content: [
      // ... other content directories
      "./node_modules/@bigbinary/neeto-commons-frontend/**/*.js",
    ],
  },
  // ... other tailwind config options
};
```

## Usage

This package exports five different sets of functions and components. Click on
them to read more:

1. [Initializers](./docs/initializers/README.md)
2. [React utilities](./docs/react/README.md)
3. [Web utility functions](./docs/utils/README.md)
4. [Default configurations](./docs/configs/README.md)
5. [Common constants](./docs/constants#common-constants)

## Other references

- [Development instructions](./docs/general/development-instructions.md)
- [Building and releasing](./docs/general/building-and-releasing.md)
- [Migrating from v1 to v2](./docs/general/migrating-from-1-to-2.md)
- [API documentation logistics](./docs/general/api-documentation-logistics.md)

## Testing using yalc

All our build files are in `dist` folder, so when you publish make sure to pass
the dist dir.

```bash
yalc publish dist
```
