open-index/open-npm huggingface dataset:
npm package: @highoutput/delay
Description: ## `delay(duration)` * `duration` `(number|string)` Amount of time to wait * Returns: `(Promise)`
Author: High Output Ventures
Latest version: 0.2.8

# @highoutput/delay

## `delay(duration)`
* `duration` `(number|string)` Amount of time to wait
* Returns: `(Promise)`

Wait for a given amount of time. The input can be a string compatible to the [`ms`](https://www.npmjs.com/package/ms) module.

### Examples
```javascript
import { delay } from 'highoutput-utilities';

async function main() {
  await delay(1000); // wait for 1 second

  await delay('1m'); // wait for 1 minute
}

main();
```
npm package: @highoutput/deso-sdk
Description: A wrapper to DeSo Identity and API endpoints. This experiment aims to make the DeSo transactions quick and easy for devs to integrate to the frontend side of the web systems development.
Author: High Output Ventures
Latest version: 0.1.1

# DeSo SDK

A wrapper to DeSo Identity and API endpoints. This experiment aims to make the DeSo transactions quick and easy for devs to integrate to the frontend side of the web systems development.

## Installation

Install the package with npm

```bash
  npm install @highoutput/deso-sdk --save
```

or if you are using yarn

```bash
  yarn add @highoutput/deso-sdk --save
```

## Usage/Examples

Wrap the components to the Context provider

```javascript
import { DesoProvider } from '@highoutput/deso-sdk';

function App() {
  return (
    <DesoProvider>
      <Component {...pageProps} />
    </DesoProvider>
  );
}
```

import and use the exposed hook `useDesoContextValues` to get methods you can use

```javascript
import { useDesoContextValues } from '@highoutput/deso-sdk';

const LoginForm: React.FC = () => {
  const { getIdentity } = useDesoContextValues();

  return (
    <Button
      onClick={async () => {
        await getIdentity(data => {
          const { pubKey, token } = data; // pubkey and token are returned
          void connectBitclout({
            variables: {
              input: {
                publicKey: pubKey,
                jwt: token,
              },
            },
          }); // custom method
        });
      }}
    >
      <IconBitclout />
      <Text>Log in using Bitclout</Text>
    </Button>
  );
};
```

## Roadmap

- Expose reactjs' Context for ease of use on reactjs projects

- Implement use of DeSo Identity for login and signup purposes

- Implement send-deso transaction flow

- Implement submit-post transaction flow

- Add methods for endpoints on simple fetching of data
npm package: @highoutput/hash
Description: ## `hash(message[,algorithm][,salt])` * `message` `(string|Buffer)` Input message * `opts.algorithm` `(string)` Algorithm * `opts.salt` `(string|Buffer)` * `opts.salt` `(string|Buffer)` * Returns: `(Promise<Buffer>)`
Author: HighOutput Ventures
Latest version: 0.1.11

# @highoutput/hash

## `hash(message[,algorithm][,salt])`
* `message` `(string|Buffer)` Input message
* `opts.algorithm` `(string)` Algorithm
* `opts.salt` `(string|Buffer)`
* `opts.salt` `(string|Buffer)`
* Returns: `(Promise<Buffer>)`

Generate hash.

### Examples
```javascript
import { hash } from 'highoutput-utilities';

hash('The quick brown fox jumps over the lazy dog.');
hash('The quick brown fox jumps over the lazy dog.', { algorithm: 'sha256' });
hash('The quick brown fox jumps over the lazy dog.', { algorithm: 'sha256', salt: 'secretsalt' });
```
npm package: @highoutput/hds-array-field
Description: We aim to build a library of custom ReactJS components that implements our unique UI design conventions. The ReactJS components will be based primarily on Chakra UI components. React Storybook will be used for documentation and testing.
Author: Niel Berongoy
Latest version: 0.2.17

### Getting started

We aim to build a library of custom ReactJS components that implements our unique UI design conventions. The ReactJS components will be based primarily on Chakra UI components. React Storybook will be used for documentation and testing.

## Commands

To install package, use:

```bash
npm i @highoutput/hds-array-field
```

### Usage

```tsx
import { ArrayField } from '@highoutput/hds-array-field';

export const SamplePage = () => {
  return (
    <>
      <ArrayField
        defaultValues={{
          input: [
            {
              value: '',
            },
          ],
        }}
        maxValue={10}
        onAppend={() => {}}
        onBlur={function noRefCheck() {}}
        onChange={function noRefCheck() {}}
        onRemove={function noRefCheck() {}}
        placeholder="Enter an Input"
      />
    </>
  );
};
```
npm package: @highoutput/hds-auto-form
Description: We aim to build a library of custom ReactJS components that implements our unique UI design conventions. The ReactJS components will be based primarily on Chakra UI components. React Storybook will be used for documentation and testing.
Author: Niel Berongoy
Latest version: 0.2.16

### Getting started

We aim to build a library of custom ReactJS components that implements our unique UI design conventions. The ReactJS components will be based primarily on Chakra UI components. React Storybook will be used for documentation and testing.

## Commands

To install package, use:

```bash
npm i @highoutput/hds-auto-form
```

### Usage

```tsx
import { AutoForm } from '@highoutput/hds-auto-form';

const autoFormSchema = object().shape({
  title: string().required().label('Title').required('Title is required'),
  description: string()
    .label('Description')
    .meta({ type: 'textarea' })
    .required('Description is required'),
});

export const SamplePage = () => {
  return (
    <>
      <AutoForm
        onSubmitForm={() => {}}
        placeholders={['Enter title', 'Enter description']}
        yupSchema={autoFormSchema}
      />
    </>
  );
};
```
npm package: @highoutput/hds-autocomplete-input
Description: We aim to build a library of custom ReactJS components that implements our unique UI design conventions. The ReactJS components will be based primarily on Chakra UI components. React Storybook will be used for documentation and testing.
Author: calvo-jp
Latest version: 0.2.15

### Getting started

We aim to build a library of custom ReactJS components that implements our unique UI design conventions. The ReactJS components will be based primarily on Chakra UI components. React Storybook will be used for documentation and testing.

## Commands

To install the package, use:

```
npm i @highoutput/hds-autocomplete-input
```

### Usage

```tsx
import * as React from 'react';
import { AutoCompleteInput } from './src';

export default function Component() {
  return (
    <AutoCompleteInput options={options} onChangeValue={function noop() {}} />
  );
}

const options = [
  {
    value: 'Phoenix',
    label: 'Phoenix',
    avatar:
      'https://assets.teenvogue.com/photos/626abe370979f2c5ace0ab29/16:9/w_2560%2Cc_limit/GettyImages-1352932505.jpg',
  },
  {
    value: 'Olivia',
    label: 'Olivia',
    avatar:
      'https://static01.nyt.com/images/2021/05/21/arts/21review-rodrigo01/merlin_188054001_2a34e77d-e653-488a-a4d9-1a0f1ddf73e4-superJumbo.jpg',
  },
];
```
npm package: @highoutput/hds-button
Description: We aim to build a library of custom ReactJS components that implements our unique UI design conventions. The ReactJS components will be based primarily on Chakra UI components. React Storybook will be used for documentation and testing.
Author: John Christopher Go
Latest version: 0.1.12

### Getting started

We aim to build a library of custom ReactJS components that implements our unique UI design conventions. The ReactJS components will be based primarily on Chakra UI components. React Storybook will be used for documentation and testing.

## Commands

To install the package, use:

```bash
npm i @highoutput/hds-button
```

### Usage

```tsx
import * as React from "react";
import { Button } from "@highoutput/hds-button";
import { ThemeProvider } from "@highoutput/hds";

export default function Example() {
  return (
    <ThemeProvider>
      <Button>Submit</Button>
    </ThemeProvider>
  );
}
```
npm package: @highoutput/hds-checkbox
Description: We aim to build a library of custom ReactJS components that implements our unique UI design conventions. The ReactJS components will be based primarily on Chakra UI components. React Storybook will be used for documentation and testing.
Author: John Christopher Go
Latest version: 0.1.7

### Getting started

We aim to build a library of custom ReactJS components that implements our unique UI design conventions. The ReactJS components will be based primarily on Chakra UI components. React Storybook will be used for documentation and testing.

## Commands

To install the package, use:

```bash
npm i @highoutput/hds-checkbox
```

### Usage

```tsx
import * as React from "react";
import { Checkbox } from "@highoutput/hds-checkbox";
import { ThemeProvider, HStack, Box, Text } from "@highoutput/hds";

export default function Example() {
  return (
    <ThemeProvider>
      <Checkbox size="sm" variant="solid" label="" hint="" />
    </ThemeProvider>
  );
}
```
npm package: @highoutput/hds-combobox
Description: We aim to build a library of custom ReactJS components that implements our unique UI design conventions. The ReactJS components will be based primarily on Chakra UI components. React Storybook will be used for documentation and testing.
Author: calvo-jp
Latest version: 0.1.3

### Getting started

We aim to build a library of custom ReactJS components that implements our unique UI design conventions. The ReactJS components will be based primarily on Chakra UI components. React Storybook will be used for documentation and testing.

## Commands

To install package, use:

```bash
npm i @highoutput/hds-combobox
```

### Usage

```tsx
import { ThemeProvider, Box, Icon } from '@highoutput/hds';
import { Combobox } from '@highoutput/hds-comoobox';
import { SearchIcon } from './icons';

export default function Component() {
  return (
    <ThemeProvider>
      <Box h="500px">
        <Combobox
          options={[
            { value: 1, label: 'John' },
            { value: 2, label: 'Paul' },
            { value: 3, label: 'Mark' },
            { value: 4, label: 'Mary' },
            { value: 5, label: 'Jake' },
          ]}
          placeholder="Select something"
          onChange={function (newValue) {
            console.log(newValue);
          }}
          zIndex={9}
          leftIcon={<Icon as={SearchIcon} w={5} h={5} />}
          isClearable
        />
      </Box>
    </ThemeProvider>
  );
}
```
npm package: @highoutput/hds-experimental
Description: We aim to build a library of custom ReactJS components that implements our unique UI design conventions. The ReactJS components will be based primarily on Chakra UI components. React Storybook will be used for documentation and testing.
Author: calvo-jp
Latest version: 0.1.9

### Getting started

We aim to build a library of custom ReactJS components that implements our unique UI design conventions. The ReactJS components will be based primarily on Chakra UI components. React Storybook will be used for documentation and testing.

## Commands

To install package, use:

```bash
npm i @highoutput/hds-expiremental
```

### Usage

```tsx
// layout.tsx
import { Navbar } from "@highoutput/hds-expiremental";
import * as React from "react";
import { Box } from "@chakra-ui/react";
import Link from "next/link";

export default function Layout({ children }: React.PropsWithChildren) {
  return (
    <Box minHeight="100vh">
      <Navbar>
        <Link href="/">
          <Heading as="h2">Logo</Heading>
        </Link>

        <Box as="nav" role="navigation">
          <Flex as="ul" gap={2}>
            <li>
              <Link href="/">About</Link>
            </li>
            <li>
              <Link href="/services">Services</Link>
            </li>
            <li>
              <Link href="/blog">Blog</Link>
            </li>
            <li>
              <Link href="/contact">Contact</Link>
            </li>
          </Flex>
        </Box>
      </Navbar>

      <Box as="main">{children}</Box>
    </Box>
  );
}
```
npm package: @highoutput/hds-image
Description: We aim to build a library of custom ReactJS components that implements our unique UI design conventions (HDS). Our components will be based primarily on Chakra UI. React Storybook will be used for documentation and testing.
Author: John Christopher Go
Latest version: 0.1.1

# HDS

We aim to build a library of custom ReactJS components that implements our unique UI design conventions (HDS). Our components will be based primarily on Chakra UI. React Storybook will be used for documentation and testing.

- Reusable block of components
- HDS integrated styling
- Easy to implement

## Installation

```bash
npm i @highoutput/hds-image
```

In your main app file import theme provider and make it a parent of all components.

```tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Image } from '@highoutput/hds-image';
import { ThemeProvider } from '@highoutput/hds';

const App = () => {
  return (<ThemeProvider>{...components here}</ThemeProvider>);
};

ReactDOM.render(<App />, document.getElementById('root'));
```

After that you can use all the components within hds core.

```jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { InputField, Box } from '@highoutput/hds';

const Form = () => {
  return (
    <Box>
      <Image alt="" src=""/>
    </Box>
  );
};

export default Form;
```

## Check out for more information

- [Storybook Documentation and Preview](https://hds-highoutput.vercel.app/?path=/story/getting-started--page)
- [Chakra Components](https://chakra-ui.com/docs/components)

## Other Packages

- [@highoutput/hds-icons](https://www.npmjs.com/package/@highoutput/hds-icons)
- [@highoutput/hds-auth](https://www.npmjs.com/package/@highoutput/hds-auth)
- [@highoutput/hds-spinner](https://www.npmjs.com/package/@highoutput/hds-spinner)
- [@highoutput/hds-pagination](https://www.npmjs.com/package/@highoutput/hds-pagination)
- [@highoutput/hds-array-field](https://www.npmjs.com/package/@highoutput/hds-array-field)
- [@highoutput/hds-auto-form](https://www.npmjs.com/package/@highoutput/hds-auto-form)
- [@highoutput/hds-contact-us](https://www.npmjs.com/package/@highoutput/hds-contact-us)
- [@highoutput/hds-utilities](https://www.npmjs.com/package/@highoutput/hds-utilities)
- [@highoutput/hds-forms](https://www.npmjs.com/package/@highoutput/hds-forms)
- [@highoutput/hds-autocomplete-input](https://www.npmjs.com/package/@highoutput/hds-autocomplete-input)
npm package: @highoutput/hds-popover
Description: We aim to build a library of custom ReactJS components that implements our unique UI design conventions. The ReactJS components will be based primarily on Chakra UI components. React Storybook will be used for documentation and testing.
Author: John Christopher Go
Latest version: 0.1.6

### Getting started

We aim to build a library of custom ReactJS components that implements our unique UI design conventions. The ReactJS components will be based primarily on Chakra UI components. React Storybook will be used for documentation and testing.

## Commands

To install the package, use:

```bash
npm i @highoutput/hds-popover
```

### Usage

```tsx
import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverArrow,
  PopoverCloseButton,
  PopoverHeader,
  PopoverBody,
} from '@highoutput/hds-popover';
import { ThemeProvider, extendTheme, Box, Text } from '@highoutput/hds';
import { Button } from '@highoutput/hds-button';
import * as React from 'react';

export default function Example() {
  return (
    <ThemeProvider>
      <Popover>
        <PopoverTrigger>
          <Button>Trigger</Button>
        </PopoverTrigger>
        <PopoverContent>
          <PopoverArrow />
          <PopoverCloseButton />
          <PopoverHeader>Confirmation!</PopoverHeader>
          <PopoverBody>
            Are you sure you want to have that milkshake?
          </PopoverBody>
        </PopoverContent>
      </Popover>
    </ThemeProvider>
  );
}
```
npm package: @highoutput/hds-skeleton
Description: We aim to build a library of custom ReactJS components that implements our unique UI design conventions. The ReactJS components will be based primarily on Chakra UI components. React Storybook will be used for documentation and testing.
Author: John Christopher Go
Latest version: 0.1.2

### Getting started

We aim to build a library of custom ReactJS components that implements our unique UI design conventions. The ReactJS components will be based primarily on Chakra UI components. React Storybook will be used for documentation and testing.

## Commands

To install the package, use:

```bash
npm i @highoutput/hds-skeleton
```

### Usage

```tsx
import { Skeleton } from "@highoutput/hds-skeleton";
import { Pagination } from "@highoutput/hds-pagination";
import { ThemeProvider,Box } from "@highoutput/hds";
import * as React from "react";

export default function Example() {
  const { data, loading, error } = useRemoteData()
  if (error) return <Box children='error' />

  return (

    <ThemeProvider>
      <Box>
      <Skeleton isLoaded={!loading}>
        <Heading>{data.title}</Heading>
      </Skeleton>
    </ThemeProvider>
  );
}
```
npm package: @highoutput/hds-slider
Description: We aim to build a library of custom ReactJS components that implements our unique UI design conventions. The ReactJS components will be based primarily on Chakra UI components. React Storybook will be used for documentation and testing.
Author: calvo-jp
Latest version: 0.2.5

### Getting started

We aim to build a library of custom ReactJS components that implements our unique UI design conventions. The ReactJS components will be based primarily on Chakra UI components. React Storybook will be used for documentation and testing.

## Commands

To install the package, use:

```bash
npm i @highoutput/hds-range-slider
```

### Usage

```tsx
import { Slider, RangeSlider, withSlider } from "@highoutput/hds-slider";
import { ThemeProvider, extendTheme } from "@highoutput/hds";

export default function Example() {
  return (
    <ThemeProvider theme={extendTheme(withSlider())}>
      <Slider
        defaultValue={25}
        onChange={function noop(value) {
          console.log(value);
        }}
      />

      <RangeSlider
        mt={4}
        default={[25, 50]}
        onChange={function noop([value_0, value_1]) {
          console.log(value_0);
          console.log(value_1);
        }}
      />
    </ThemeProvider>
  );
}
```
npm package: @highoutput/hds-spinner
Description: We aim to build a library of custom ReactJS components that implements our unique UI design conventions. The ReactJS components will be based primarily on Chakra UI components. React Storybook will be used for documentation and testing.
Author: Niel Berongoy
Latest version: 0.2.6

### Getting started

We aim to build a library of custom ReactJS components that implements our unique UI design conventions. The ReactJS components will be based primarily on Chakra UI components. React Storybook will be used for documentation and testing.

## Commands

To install package, use:

```bash
npm i @highoutput/hds-spinner
```

### Usage

```tsx
import { LogoSpinner } from '@highoutput/hds-spinner';

export const SamplePage = () => {
  return (
    <>
      <LogoSpinner duration={3000}>
        <div>Hello, World!</div>
      </LogoSpinner>
    </>
  );
};
```
npm package: @highoutput/hds-switch
Description: We aim to build a library of custom ReactJS components that implements our unique UI design conventions. The ReactJS components will be based primarily on Chakra UI components. React Storybook will be used for documentation and testing.
Author: calvo-jp
Latest version: 0.2.6

### Getting started

We aim to build a library of custom ReactJS components that implements our unique UI design conventions. The ReactJS components will be based primarily on Chakra UI components. React Storybook will be used for documentation and testing.

## Commands

To install the package, use:

```bash
npm i @highoutput/hds-switch
```

### Usage

```tsx
import { Switch } from "@highoutput/hds-switch";
import { ThemeProvider } from "@highoutput/hds";

export default function Example() {
  return (
    <ThemeProvider>
      <Switch label="Hello" hint="world" onCheck={function noop(isChecked) {}} />
    </ThemeProvider>
  );
}
```
npm package: @highoutput/hds-utilities
Description: We aim to build a library of custom ReactJS components that implements our unique UI design conventions. The ReactJS components will be based primarily on Chakra UI components. React Storybook will be used for documentation and testing.
Author: John Christopher Go
Latest version: 0.1.16

### Getting started

We aim to build a library of custom ReactJS components that implements our unique UI design conventions. The ReactJS components will be based primarily on Chakra UI components. React Storybook will be used for documentation and testing.

## Commands

To install the package, use:

```
npm i @highoutput/hds-utilities
```
npm package: @highoutput/hmac
Description: ## `hmac(message[,key][,algorithm])` * `message` `(string|Buffer)` Input message * `key` `(string|Buffer)` * `algorithm` `(string)` Algorithm * Returns: `(Promise<Buffer>)`
Author: High Output Ventures
Latest version: 0.1.10

# @highoutput/hmac

## `hmac(message[,key][,algorithm])`
* `message` `(string|Buffer)` Input message
* `key` `(string|Buffer)`
* `algorithm` `(string)` Algorithm
* Returns: `(Promise<Buffer>)`

Generate hash.

### Examples
```javascript
import { hmac } from 'highoutput-utilities';

hash('The quick brown fox jumps over the lazy dog.', { key: 'secretkey' });
hash('The quick brown fox jumps over the lazy dog.', { key: 'secretkey', algorithm: 'sha256' });
```
npm package: @highoutput/logger
Description: Generate logs that follow a certain format.
Author: High Output Ventures
Latest version: 0.5.19

# @highoutput/logger

## Class: `Logger`
Generate logs that follow a certain format.

### `new Logger(tags)`
* `tags` `(Array<string>)`

### `logger.tag(tag)`-
* `tag` `(string)`
* Returns: `(Logger)`

### `logger.error(arg0[,arg1][,arg2]...)`
* `arg0` `(string|Object|)`
* `arg1` `(string|Object|)`
* `arg2` `(string|Object|)`

### `logger.warn(arg0[,arg1][,arg2]...)`
* `arg0` `(string|Object|)`
* `arg1` `(string|Object|)`
* `arg2` `(string|Object|)`

### `logger.info(arg0[,arg1][,arg2]...)`
* `arg0` `(string|Object|)`
* `arg1` `(string|Object|)`
* `arg2` `(string|Object|)`

### `logger.verbose(arg0[,arg1][,arg2]...)`
* `arg0` `(string|Object|)`
* `arg1` `(string|Object|)`
* `arg2` `(string|Object|)`

### `logger.silly(arg0[,arg1][,arg2]...)`
* `arg0` `(string|Object|)`
* `arg1` `(string|Object|)`
* `arg2` `(string|Object|)`

### Examples
```javascript
import { Logger } from 'highoutput-utilities';

const logger = new Logger(['api']);

logger.info('Read this!');
logger.error(new Error('A nasty error.'));
logger.silly('My dog will not bite you, probably.');
logger.verbose('You want some log?');
logger.warn('I kill you!');

logger.tag('http').verbose({ host: '127.0.0.1', pathname: '/' });
```
npm package: @highoutput/neyar
Description: We are aiming to create an customizable editor plugin (notion like usage) to integrate mainly in [identifi](https://app.identifi.com/) or other projects; can also adapt to any new feature plugin product team may want to insert; to resolve formatting text 
Author: Niel Berongoy
Latest version: 0.1.57

### Getting started

We are aiming to create an customizable editor plugin (notion like usage) to integrate mainly in [identifi](https://app.identifi.com/) or other projects; can also adapt to any new feature plugin product team may want to insert; to resolve formatting text concern and to ease building a document type of page. Build around [editor-js](https://editorjs.io/base-concepts)

## Commands

To install package, use:

```bash
npm i @highoutput/neyar
```

### Usage

```html
<div id="editor"></div>
```

```typescript
// typescript usage
import {
  EditorJS,
  NeyarText,

  /** Plugins */
  Undo,
  DragDrop,
} from '@hightoutput/neyar';

const editor = new EditorJS({
  /**
   * Id of Element that should contain the Editor
   */
  holder: 'editor',
  tools: {
    neyarText: {
      class: NeyarText,
    },
  },
  defaultBlock: 'neyarText',
  /**
   * onReady callback
   */
  onReady: () => {
    new DragDrop(editor); // to enable drag and drop of blocks
    new Undo(editor); // to enable undo of blocks
  },
  /**
   * onChange callback
   */
  onChange: (api, event) => {
    editor.save().then(outputData => {
      console.log(outputData); // get serialize data
    });
  },
});
```

### Plugin from Editor.js that we can use

```typescript
// main import
import { EditorJS } from '@hightoutput/neyar';

// plugin from editor js

import {
  Paragraph, // default text block
  Header,
  Code,
  CheckList,
  Qoute,
  Delimiter,
  ToggleBlock,
  List,
  NestedList,
  ImageTool,
  SimpleImage,
  Link, // link with preview
  Attaches,
  Embed,
  Table,
  Raw,

  /** Plugins */
  Undo,
  DragDrop,

  /** Inline tool */
  Marker,
  InlineCode,
  LinkAutocomplete,
  Underline,

  /** Block tune tool */
  AlignmentTuneTool,
} from '@hightoutput/neyar';
```
npm package: @highpoint/babel-plugin-meta-html
Description: Populates meta-html references
Author: HighPoint
Latest version: 4.0.0

# Meta-HTML Babel Plugin

Replaces PeopleSoft meta-HTML found in JavaScript with values from PeopleSoft.

This is useful when developing JavaScript locally.

For example:

```javascript
const message = '%Message(175, 5)';
```
will become
```javascript
const message = 'Custom Properties';
```

## Installation

`npm install @highpoint/babel-plugin-meta-html`

## Usage

Copy `.env-sample` to your root directory and name it `.env`. Then populate it
with values for your PeopleSoft environment. See "Environment Variables" below.

Add the plugin to your `.babelrc` file.

Simple example:

```json
{
  "env": {
    "development": {
      "plugins": [
        "@highpoint/meta-html"
      ]
    }
  }
}
```

Advanced example:

```json
{
  "env": {
    "development": {
      "plugins": [
          [
            "@highpoint/meta-html", {
              "cacheDirectory": "tmp",
              "cacheTTL": 600
            }
          ]
      ]
    }
  }
}
```

### Options

* `cacheDirectory`: Defaults to `node_modules/.cache/babel-plugin-meta-html`.
  Set to `false` to disable caching.
* `cacheTTL`: Cache's time-to-live value, in seconds. Values older than this
  will be refreshed. Defaults to 86,400 seconds (one day). 

## Environment Variables

| Variable        | Example        |
| --------------- | -------------- |
| PS_HOSTNAME     | ps.example.com |
| PS_ENVIRONMENT  | csdev          |
| PS_NODE         | SA             |
| PS_USERNAME     | username       |
| PS_PASSWORD     | password1      |
npm package: @highpoint/bs-js-fetch
Description: BuckleScript bindings for HighPoint Fetch Library
Author: HighPoint
Latest version: 0.7.0

# bs-js-fetch

[BuckleScript](https://github.com/bloomberg/bucklescript) bindings for HighPoint's [js-fetch](https://github.com/hp-mobile/js-fetch).

### Pre-requisites

- [yarn](https://yarnpkg.com)

### Installation

```sh
yarn add @highpoint/bs-js-fetch 
```

In your `bsconfig.json`, include `"@highpoint/bs-js-fetch"` in the `bs-dependencies`.



### Usage

```reason
open Fetch;

json(~url="http://google.com", ())
|> Js.Promise.then_(result => /* do something with `result` */ );

let abortController = AbortController.make();

postForm(
  ~url="schedule-builder",
  ~options=Options.(make(~body=Body.make("key1=value1&key2=value2", ~signal=(abortController |> AbortController.signal), ()))),
  ()
)
|> Js.Promise.then_(result => /* do something with `result` */ )

postJSON(
  ~url="message-center",
  ~options=Options.(make(~body=Body.makeWithUrlSearchParams(urlSearchParams), ())),
  ()
)
|> Js.Promise.then_(result => /* do something with `result` */ )
```
npm package: @highpoint/bs-ui-elements
Description: BuckleScript bindings for HighPoint UI Elements Library
Author: HighPoint
Latest version: 5.0.0

# bs-ui-elements

[BuckleScript](https://github.com/bloomberg/bucklescript) bindings for HighPoint's [ui-elements](https://bitbucket.org/hp_mobile/ui-elements).

### Pre-requisites

- [yarn](https://yarnpkg.com)

### Installation

```sh
yarn add @highpoint/bs-ui-elements
```

In your `bsconfig.json`, include `"@highpoint/bs-ui-elements"` in the `bs-dependencies`.

### Usage

Once you `open UIElements;` just use as you would use the JS library. 

Read [reason implementation](https://bitbucket.org/hp_mobile/bs-ui-elements/src/UIElements.re) or [ui-elements docs](https://bitbucket.org/hp_mobile/ui-elements/src/master/) for a detailed explanation of usage and accepted props.
npm package: @highpoint/compile-branding
Description: Utility to compile HighPoint application branding
Author: HighPoint
Latest version: 3.0.0

# Compile Branding

Utility to compile HighPoint application branding.

## Installation

`yarn add -D @highpoint/compile-branding`

## Usage

Copy `.env-sample` to your application's root directory and name it `.env`.
Populate the values. You can reference the table below for examples of what
values should be used. This file should _not_ be included in your source
control, so add it to your `.gitignore` (or similar) file.

### Environment Variables

| Variable       | Example                  |
| -------------- | ------------------------ |
| PS_HOSTNAME    | cs92-devo.mhighpoint.com |
| PS_ENVIRONMENT | csdev92                  |
| PS_NODE        | SA                       |
| PS_USERNAME    | PS                       |
| PS_PASSWORD    | mysupersecretpassword    |
| HTTP_USERNAME  | PS                       |
| HTTP_PASSWORD  | mysupersecretpassword    |

# API

## `compileBranding`

Produces a compiled version of the branding in a local directory.

### Example

```javascript
const { compileBranding } = require('@highpoint/compile-branding');
const { resolve } = require('path');

compileBranding({
  app: 'app',
  inFile: resolve(`./src/main.scss`),
  outDir: resolve('./dist'),
  weblib: 'WEBLIB_H_BRNDNG'
}).catch(({ message }) => console.error(message));
```

### Variables

#### `app`

The abbreviation of the application whose branding is being compiled.

Examples: `app`, `dp`, `mc`, `sb`

#### `inFile`

The absolute path to the SCSS file that acts as the template for compiling
branding.

Example: `path.resolve('./scss/main.scss')`

#### `outDir`

The absolute path to the directory that the compiled CSS files should be
outputted to.

Example: `path.resolve('./dist')`

#### `weblib`

The PeopleSoft web library that will be called. It needs to have the following
functions:

- IScript_GetVars
- IScript_CompileTemplate

Example: `WEBLIB_H_BRNDNG`

## `triggerCompile`

Triggers branding compilation remotely. This is primarily used by continuous
integration services (e.g. Jenkins) to tell PeopleSoft that it should compile
the branding.

### Example

```javascript
const { triggerCompile } = require('@highpoint/compile-branding');

triggerCompile({ weblib: 'WEBLIB_H_BRNDNG' }).catch(({ message }) => {
  console.error(message);
  process.exit(1);
});
```

### Variables

#### `weblib`

The PeopleSoft web library that will be called. It needs to have the following
function:

- IScript_Compile
npm package: @highpoint/get-ps-token
Description: Populate cookie jar with PeopleSoft token
Author: HighPoint
Latest version: 0.2.0

# Get PeopleSoft Token

Populates a cookie jar with PS_TOKEN.

## Installation

`yarn add -D @highpoint/get-ps-token`

## Usage

To populate a [cookie jar](https://github.com/request/request#requestjar) with
a valid PS_TOKEN, call `getToken` with an object that includes the following:

  * PeopleSoft hostname
  * PeopleSoft environment
  * PeopleSoft user name
  * PeopleSoft user password
  * HTTP Auth user name (optional)
  * HTTP Auth user password (optional)
  
## Example 

```javascript
const request = require('request-promise');
const getToken = require('@highpoint/get-ps-token');

require('dotenv').config({ silent: true });

/* 
  Add the following environment variables to a `.env` file in the root of your
  project:
    ISCRIPT_HOSTNAME
    ISCRIPT_ENVIRONMENT
    HTTP_USERNAME
    HTTP_PASSWORD
    PS_USERNAME
    PS_PASSWORD
*/

const makeRequest = async () => {
  request
    .get({
      uri: '...',
      jar: await getToken(process.env)
    })
    .then(response => {
      // ...
    });
};

makeRequest();
```

## API

| Key                 | Required | Example        |
| ------------------- | -------- | -------------- |
| PS_HOSTNAME         | True     | example.com    |
| PS_ENVIRONMENT      | True     | csdev92        |
| PS_USERNAME         | True     | user           |
| PS_PASSWORD         | True     | password       |
| HTTP_USERNAME       | False    | user           |
| HTTP_PASSWORD       | False    | password       |

Example:

```javascript
const jar = await getToken({
  PS_HOSTNAME: 'example.com',
  PS_ENVIRONMENT: 'csdev92',
  PS_USERNAME: 'user',
  PS_PASSWORD: 'password1'
});
```
npm package: @highpoint/java-sass-compiler
Description: Node wrapper around Vaadin's Java sass-compiler
Author: HighPoint
Latest version: 1.0.1

# java-sass-compiler #

Node wrapper around [Vaadin's Java sass-compiler](https://github.com/vaadin/sass-compiler)

## Installation ##

`npm install hp-mobile/node-java-sass-compiler`

## Usage ##

```javascript
const javaSassCompiler = require('java-sass-compiler');

javaSassCompiler({
  in: 'file.scss',
  out: 'file.css',
  minify: true
}, (err, stdout, stderr) => {
  if (err) {
    console.error(`Compile error: ${err}`);
  }

  console.log(`stdout ${stdout}`);
  console.log(`stderr ${stderr}`);
});
```

## Options ##

| Option         | Values                    | Default | Explanation                                                                                                                 |
|----------------|---------------------------|---------|-----------------------------------------------------------------------------------------------------------------------------|
| compress       | true, false               | false   | Create also a compressed version of the compiled CSS (only when output file is given)                                       |
| ignoreWarnings | true, false               | false   | Let compilation succeed even though there are warnings                                                                      |
| in             | File path                 | None    | The .scss file to compile (**required**)                                                                                    |
| minify         | true, false               | false   | Minify the compiled CSS with YUI Compressor                                                                                 |
| out            | File path                 | None    | The .css file where the generated CSS is stored. If it is not defined, the compiled CSS will be written to standard output. |
| urlMode        | mixed, absolute, relative | mixed   | Set URL handling mode                                                                                                       |
npm package: @highpoint/js-fetch
Description: HighPoint Fetch Library
Author: HighPoint
Latest version: 4.2.0

# js-fetch

This is a small library to make using JavaScript's `fetch` a bit easier. It 
provides some utility functions to handle common request types.

The library assumes that responses will be in JSON format. If a response is not
going to be in that format, then you can still use the library, but most of its
usefulness will be gone.

Also included are some HighPoint-specific requirements like CSRF support and
`postMessage`s to `parent` informing it that the user is actively using `child`.

## Installation

`yarn add @highpoint/js-fetch`

## Usage

### GET request

```javascript
import { json } from '@highpoint/js-fetch';

(async () => {
  try {
    const jsonResponse = await json('https://api.example.com');
    console.log(jsonResponse);
  } catch (e) {
    // Handle the exception
  }
})();
```

### POST Form

```javascript
import { postForm } from '@highpoint/js-fetch';

(async () => {
  try {
    const jsonResponse = await postForm('https://api.example.com', {
      body: 'value1=1&value2=2'
    });
    console.log(jsonResponse);
  } catch (e) {
    // Handle the exception
  }
})();

```

### POST JSON

```javascript
import { postJSON } from '@highpoint/js-fetch';

(async () => {
  try {
    const jsonResponse = await postJSON('https://api.example.com', {
      body: {
        value1: 1,
        value2: 2
      }
    });
    console.log(jsonResponse);
  } catch (e) {
    // Handle the exception
  }
})();

```

### Using `<base>` HREF

```html
...
<base href="https://ps.example.com/psc/csdev/EMPLOYEE/SA/s/WEBLIB.ISCRIPT1.FieldFormula.IScript_Main">
...
```

```javascript
import { json } from '@highpoint/js-fetch';

(async () => {
  try {
    const jsonResponse = await json('TermOptions');
    console.log(jsonResponse);
  } catch (e) {
    // Handle the exception
  }
})();
```

GET request would be made to `https://ps.example.com/psc/csdev/EMPLOYEE/SA/s/WEBLIB.ISCRIPT1.FieldFormula.IScript_TermOptions`.

### Overriding the `<base>` HREF

The baseURI of the page can be overridden for requests made using js-fetch. If the value `window.highpoint.dataURI` is added to the global javascript namespace of the window, that url will be used instead of the `<base>` of the page.
npm package: @highpoint/merge-scss
Description: Merge SCSS files together
Author: HighPoint
Latest version: 1.0.1

# Merge SCSS

Merges an SCSS file and all of its imports together.

## Installation

`yarn add -D @highpoint/merge-scss`

## Usage

In your package.json file's `scripts` section, add a script similar to this:

`"merge-scss": "merge-scss --in css/main.scss --out dist/bundle.scss"`

Alternatively, use as a module in your project like this:

```javascript
const fs = require('fs');
const mergeSCSS = require('@highpoint/merge-scss');

mergeSCSS('./main.scss')
  .then(scss => fs.writeFileSync('./dist/out.scss', scss));
```
npm package: @highpoint/react-bootstrap
Description: Bootstrap 3 components built with React
Author: Stephen J. Collings
Latest version: 0.32.1

# React-Bootstrap [![Travis][build-badge]][build] [![npm][npm-badge]][npm]

[Bootstrap 3][bootstrap] components built with [React][react].

[![Codecov][codecov-badge]][codecov]
[![Discord][discord-badge]][discord]
[![Thinkful][thinkful-badge]][thinkful]

__Under active development - APIs will change.__ Check out the [1.0.0 roadmap](https://github.com/react-bootstrap/react-bootstrap/wiki#100-roadmap) and [contributing guidelines][contributing] to see where you can help out. Prior to the 1.0.0 release, deprecations or breaking changes will result in a minor version bump.

## Docs

See the [documentation][documentation] with live editable examples.

## Related modules

- [react-router-bootstrap][react-router-bootstrap] – Integration with [React Router][react-router]
- [React Bootstrap Extended][react-bootstrap-extended] - A version of React Bootstrap where each component has extra props that map to bootstrap's utility classes. For example, `pullRight` adds the class `pull-right` to a component.
- [Awesome React Bootstrap Components][awesome-react-bootstrap-components] - Additional components like off-canvas navbar, switch and sliders.

## Local setup

Yarn is the our package manager of choice here. Check out setup
instructions [here](https://yarnpkg.com/en/docs/install) if you don't have it installed already.
After that you can run `yarn run bootstrap` to install all the needed dependencies.

From there you can:

- Run the tests once with `yarn test` (Or run them in watch mode with `yarn run tdd`).
- Start a local copy of the docs site with `yarn start`
- Or build a local copy of the library with `yarn run build`

## Contributions

Yes please! See the [contributing guidelines][contributing] for details.

[bootstrap]: http://getbootstrap.com
[react]: http://facebook.github.io/react/

[documentation]: http://react-bootstrap.github.io
[contributing]: CONTRIBUTING.md

[build-badge]: https://travis-ci.org/react-bootstrap/react-bootstrap.svg?branch=master
[build]: https://travis-ci.org/react-bootstrap/react-bootstrap

[npm-badge]: https://badge.fury.io/js/react-bootstrap.svg
[npm]: http://badge.fury.io/js/react-bootstrap

[react-router-bootstrap]: https://github.com/react-bootstrap/react-router-bootstrap
[react-router]: https://github.com/reactjs/react-router
[react-bootstrap-extended]: https://github.com/rbalicki2/react-bootstrap-extended
[awesome-react-bootstrap-components]: https://github.com/Hermanya/awesome-react-bootstrap-components

[thinkful-badge]: https://tf-assets-staging.s3.amazonaws.com/badges/thinkful_repo_badge.svg
[thinkful]: http://start.thinkful.com/react/?utm_source=github&utm_medium=badge&utm_campaign=react-bootstrap

[codecov-badge]: https://img.shields.io/codecov/c/github/react-bootstrap/react-bootstrap/master.svg
[codecov]: https://codecov.io/gh/react-bootstrap/react-bootstrap

[discord-badge]: https://img.shields.io/badge/Discord-Join%20chat%20%E2%86%92-738bd7.svg
[discord]: https://discord.gg/0ZcbPKXt5bXLs9XK
npm package: @highpoint/react-bootstrap-select
Description: react bootstrap select
Author: Martín Ciparelli
Latest version: 0.2.5

# react-bootstrap-select

This is a small React wrapper around bootstrap-select jQuery plugin.

Read [package.json]() for a reference on current peer dependencies.
You'll need them in your project for this component to work properly and look properly.

## installation

`yarn add @highpoint/react-bootstrap-select`

## usage

```javascript
import Select from 'react-bootstrap-select';
import { render } from 'react-dom';
import 'bootstrap-select';

const Element = <Select
  bs={{
    // use bs prop to pass options to the bootstrap-select plugin
    mobile: true
  }}
  bs-events={{
    onChanged: ev => console.log('changed!', ev.target.value)
  }}
  container={{
    // pass props for the container
    className: 'bootstrap-select-container'
  }}
  // rest of the props go to the select
  name='my-select'
  multiple
>
  <option value={1}>1 Minute</option>
  <option value={2}>2 Minutes</option>
</Select>;

render(<Element />, document.querySelector('.app-container'));
```

Refer to [experiment]() for a full example of this component working.
You can run it with `npm run experiment`.

## events

Pass any of the following events to the `bs-events` prop:

* `onShow`
* `onShown`
* `onHide`
* `onHidden`
* `onLoaded`
* `onRendered`
* `onRefreshed`
* `onChanged`

Documentation [here](https://silviomoreto.github.io/bootstrap-select/options/#events)
npm package: @highpoint/react-fullcalendar
Description: React version of the fullcalendar jQuery plugin
Latest version: 0.1.2

# react-fullcalendar

This is a small React wrapper around [fullcalendar](https://fullcalendar.io/) jQuery plugin.

Read [package.json]() for a reference on current peer dependencies.
You'll need them in your project for this component to work properly and look properly.

## installation

`npm i @highpoint/react-fullcalendar`  


## usage

```js
const Calendar = require('..');
const { createElement: t } = require('react');
const { render } = require('react-dom');

const el = t(Calendar, {
  // any props passed go straight to jQuery plugin
  editable: true
});

render(el, document.querySelector('.app-container'));
```

Refer to [experiment]() for a full example of this component working.
You can run it with `npm run experiment`.
npm package: @highpoint/react-message-listener
Description: React message-listener HOC
Author: HighPoint
Latest version: 0.2.2

# react-message-listener

A higher order component for composing `postMessage` listeners.

## Installation

`npm i @highpoint/react-message-listener`

## Usage

`postMessage` events may pass either a string or an object. If an object is passed,
it must have a `type` property set, and that is what is used to determine if the
listener fires.

For example, `postMessage` can send a simple string like `window.postMessage('toggle', '*')`
or an object like `window.postMessage({ type: 'toggle', active: true }, '*')`.

## Example

```js
import { createElement } from 'react';
import withMessageListener from '@highpoint/react-message-listener';
import { render } from 'react-dom';
import { compose, withState } from 'recompose';

const enhance = compose(
  withState('isVisible', 'setVisibility', false),
  withMessageListener('toggle', ({ isVisible, setVisibility }) =>
    setVisibility(!isVisible)
  )
);

const el = enhance(({ isVisible }) => {
  const display = isVisible ? 'block' : 'none';
  return createElement('div', { style: { display } }, 'Hello World');
});

render(createElement(el), document.getElementById('app'));
```

Refer to `experiment` for a full example of this component working.
You can run it with `npm run experiment`.
npm package: @highpoint/send-to-peoplesoft
Description: CLI tool to send directory files to a PeopleSoft server.
Author: HighPoint
Latest version: 1.0.0

# Send to PeopleSoft

Sends a directory of assets (CSS, JS, HTML and SCSS) to PeopleSoft.

## Installation

`yarn add -D @highpoint/send-to-peoplesoft`

## Usage

In your package.json file's `scripts` section, add a script similar to this:

`"send-to-peoplesoft": "send-to-peoplesoft -d ./dist`

This will send all asset files in the `./dist` directory to your PeopleSoft
environment.

To function correctly, you must populate a `.env` file with the values found
below. Use `.env-sample` as a starting point.

If you protect your PeopleSoft environment with HTTP Basic Authentication,
then also include `--with-auth` in the command.

## Environment

Copy `.env-sample` to `.env` and fill in the required fields.

| Variable            | Required | Example                   |
| ------------------- | -------- | ------------------------- |
| PS_HOSTNAME         | True     | example.com               |
| PS_ENVIRONMENT      | True     | csdev92                   |
| PS_NODE             | True     | SA                        |
| PS_USERNAME         | True     | user                      |
| PS_PASSWORD         | True     | password                  |
| ISCRIPT_RECORD      | False    | WEBLIB_H_DEV              |
| HTTP_USERNAME       | False    | user                      |
| HTTP_PASSWORD       | False    | password                  |