open-index/open-npm huggingface dataset:
npm package: @newfold/huapi-js
Description: > A JavaScript Client Library for HUAPI
Latest version: 2.1866.0

# @newfold/huapi-js

> A JavaScript Client Library for HUAPI

## Installation

```sh
$ yarn add @newfold/huapi-js
# yarn package installed
```

## Usage

### React Hooks

```js
import { useHostingSites } from '@newfold/huapi-js';

const MyComponent = () => {
  const hostingId = '2';
  const { isLoading, data } = useHostingSites(hostingId);

  if (isLoading) return <h1>Loading...</h1>;

  return (
    <div>
      {data?.data?.rows?.map((site) => {
        <div key={site.id}>{site.name}</div>;
      })}
    </div>
  );
};
```

### Mocking with custom handlers

Custom [Mock Service Worker](https://mswjs.io/) handlers can be imported directly from `@newfold/huapi-js` to easily manipulate your local application or unit tests in an offline testing setting.

First, ensure that [Mock Service Worker](https://mswjs.io/) is configured in your project, then import and add handlers during your `setupWorker` or `setupServer` calls as follows:

```js
// import handlers to override data as needed for testing
import { getHostingSitesHandler } from '@newfold/huapi-js/src/handlers';

// add the handlers to your setupServer call
const server = setupServer(
  ...[
    // mock GET /hosting/:hosting-id/sites
    getHostingSitesHandler(),

    // add additional handlers here:
    // postHostingSite(),
  ]
);
```

#### Advanced handlers

## Building from huapi

Eventually we would like to have an automatic CICD pipeline that kicks off when new `huapi` builds change the openapi.json specification file (OAS). For now, we can do this manually by running the build command locally and publishing to npm. This can be done with the following steps:

1. Ensure your repo is on the `main` branch and in a clean state locally (no unstaged changes)
2. Run `nx build huapi-js` to pull down the OAS file from the beta server (requires VPN) and create new build files
3. Change current directory to `./dist/libs/huapi-js`
4. Publish to npm with `yarn publish --access public` [or to use `npm` first manually update the version in package.json and git commit/push this change, then use `npm publish --access public` to publish the changes]

   > NOTE: You may need to request permissions to publish to the npm registry. Please speak to your manager to request access for this through the Hosting Engineering Leadership Team. Please provide your npmjs.com username with your request, and ensure 2FA Authentication is enabled in your npmjs.com dashboard.

## Development

### Adding Endpoints

`@newfold/haupi-js` is based on the OpenAPI specification file that is published by the core `huapi` project. To add new endpoints, update the core project and publish an updated file, then ensure the build script in `package.json` is pointed to it.

```sh
# run the build command to build a new verions
$ yarn build
# building @newfold/huapi-js...
```

### Adding Custom Mock Handlers
npm package: @newfold/mfe-provider
Description: `<MFEProvider />` is a React Library for Jarvis Micro-Frontend (MFE) Applications that is designed to streamline the technology stack and solution architecture as the number of MFE applications grows.
Latest version: 0.2.6

# @newfold/mfe-provider

`<MFEProvider />` is a React Library for Jarvis Micro-Frontend (MFE) Applications that is designed to streamline the technology stack and solution architecture as the number of MFE applications grows.

## Features

- MUI
- Error Boundary
- i18n and l10n support
- React Query
- DataDog (RUM and Logging)
- Host application & MFE context provider

## Using the Library

### Installation

```sh
$ yarn add "@newfold/mfe-provider"
# installing...
```

### Wrapping your React application

```js
import MFEProvider from '@newfold/mfe-provider';

const MyApp = () => (
  <MFEProvider>
    <App />
  </MFEProvider>
);
```

### Using context

```js
import { useMFEContext } from '@newfold/mfe-provider';

const Component = () => {
  const mfeContext = useMFEContext();

  // log context to see what values are available
  console.log('mfeContext', mfeContext);

  return (
    <h1>Hello world!</h1>
  );
```

### Configuration

| Prop                 | Type                    | Description |
| -------------------- | ----------------------- | ----------- |
| children             | oneOfType([node, func]) |             |
| history              | shape({})               |             |
| hostingId            | number                  |             |
| basename             | string                  |             |
| hasErrorBoundary     | bool                    |             |
| errorBoundaryConfig  | shape({})               |             |
| hasI18N              | bool                    |             |
| i18nConfig           | shape({})               |             |
| hasDataDog           | bool                    |             |
| dataDogConfig        | shape({})               |             |
| hasReactQuery        | bool                    |             |
| reactQueryConfig     | shape({})               |             |
| hasMUI               | bool                    |             |
| muiConfig            | shape({})               |             |
| hasReactSuspense     | bool                    |             |
| reactSuspenseConfig  | shape({})               |             |
| hasReactRouterDom    | bool                    |             |
| reactRouterDomConfig | shape({})               |             |

## Developing and contributing to MFE Provider

### Building

Run `nx build mfe-provider` to build the lib into `/dist/libs/mfe-provider`.

### Publishing

Navigate to the /dist/libs/mfe-provider directory, then use `yarn publish` to publish. Ensure the correct version is provided and that the repo is up-to-date with the correct version as well in the `package.json` file.

### Running unit tests

Run `nx test mfe-provider` to execute the unit tests via [Jest](https://jestjs.io).