open-index/open-npm huggingface dataset:
npm package: @react-18-pdf/primitives
Description: Define uninitialized elements
Author: Diego Muracciole
Latest version: 3.0.2

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @react-18-pdf/primitives
npm package: @react-18-pdf/stylesheet
Description: A styles engine for Node and the browser
Author: Diego Muracciole
Latest version: 3.1.1

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @react-18-pdf/stylesheet

> React-pdf styles engine

## How to install

```sh
yarn add @react-18-pdf/stylesheet
```

## How it works

```js
const stylesheet = require('@react-18-pdf/stylesheet');

const container = {
  width: 400,
  height: 600,
  orientation: 'portrait',
};

const style = {
  margin: 20,
  width: '50vw',
  height: '20vh',
  borderRadius: 5,
  fontWeight: 'semibold',
  borderBottom: '2 solid yellow',
  '@media max-width: 500': {
    backgroundColor: 'rgb(255, 0, 0)',
  },
};

const computed = stylesheet(container, style);

// Computed
// {
//   width: 200,
//   height: 120,
//   marginTop: 20,
//   marginLeft: 20,
//   marginRight: 20,
//   marginBottom: 20,
//   marginBottom: 20,
//   borderTopLeftRadius: 5,
//   borderTopRightRadius: 5,
//   borderBottomLeftRadius: 5,
//   borderBottomRightRadius: 5,
//   fontWeight: 600,
//   borderBottomWidth: 2,
//   borderBottomStyle: 'solid',
//   borderBottomColor: 'yellow',
//   backgroundColor: '#FF0000'
// }
```

This library exports a `stylesheet` function that takes two arguments:

- _container_: Container where the styles are being computed into. It specifies the `width` and `height` in points (needed for media queries and unit conversions), and optionally the container `orientation` (needed for certain media queries).
- _style_: Style to be computed. JS object with raw styles that you would like to get in a normalized format.

## License

MIT © [Diego Muracciole](http://github.com/diegomura)
npm package: @react-18-pdf/svgkit
Description: A SVG generation library for Node.js and browser
Latest version: 2.2.1

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @react-18-pdf/svgkit

A SVG generation library for Node.js and browser.

Has a `pdfkit` compatible API

## TODOs:

- Gradients
- Default fonts
- Embeded fonts (in progress)
npm package: @react-18-pdf/textkit
Description: An advanced text layout framework
Latest version: 3.0.1

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @react-18-pdf/textkit

## Acknowledges

This project is a fork of [textkit](https://github.com/foliojs/textkit) by @devongovett and continued under the scope of this project since it has react-pdf specific features. Any recongnition should go to him and the original project mantainers.

## Layout process

1. split into paragraphs
2. get bidi runs and paragraph direction
3. font substitution - map to resolved font runs
4. script itemization
5. font shaping - text to glyphs
6. line breaking
7. bidi reordering
8. justification
9. get a list of rectangles by intersecting path, line, and exclusion paths
10. perform line breaking to get acceptable break points for each fragment
11. ellipsize line if necessary
12. bidi reordering
13. justification
npm package: @react-18-pdf/types
Description: React-pdf TypeScript definitions
Author: Diego Muracciole
Latest version: 2.1.1

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @react-18-pdf/types

> React-pdf TypeScript definitions

## How to install

```sh
yarn add @react-18-pdf/types
```

## License

MIT © [Diego Muracciole](http://github.com/diegomura)
npm package: @react-18-pdf/unicode-properties
Description: Provides fast access to unicode character properties
Author: Devon Govett
Latest version: 2.6.1

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @react-18-pdf/unicode-properties

Provides fast access to unicode character properties. Uses [unicode-trie](https://github.com/devongovett/unicode-trie) to compress the
properties for all code points into just 12KB.

## Acknowledges

This project is a fork of [unicode-properties](https://github.com/foliojs/unicode-properties) by @devongovett and continued under the scope of this project since it has react-pdf specific features. Any recongnition should go to him and the original project mantainers.

## Fork changes

> Updated at a7df933c4fe5ddca2cb9829a5634e6fe9f1ac529

- Trie data parsed as JSON in order to run it both on node and browser easily
- Written in ES6

## Usage

```sh
npm install unicode-properties
```

```javascript
var unicode = require('unicode-properties');

unicode.getCategory('2'.charCodeAt()) //=> 'Nd'
unicode.getNumericValue('2'.charCodeAt()) //=> 2
```

## API

### getCategory(codePoint)

Returns the unicode [general category](http://www.fileformat.info/info/unicode/category/index.htm) for the given code point.

### getScript(codePoint)

Returns the [script](http://unicode.org/standard/supported.html) for the given code point.

### getCombiningClass(codePoint)

Returns the [canonical combining class](http://unicode.org/glossary/#combining_class) for the given code point.

### getEastAsianWidth(codePoint)

Returns the [East Asian width](http://www.unicode.org/reports/tr11/tr11-28.html) for the given code point.

### getNumericValue(codePoint)

Returns the numeric value for the given code point, or null if there is no numeric value for that code point.

### isAlphabetic(codePoint)

Returns whether the code point is an alphabetic character.

### isDigit(codePoint)

Returns whether the code point is a digit.

### isPunctuation(codePoint)

Returns whether the code point is a punctuation character.

### isLowerCase(codePoint)

Returns whether the code point is lower case.

### isUpperCase(codePoint)

Returns whether the code point is upper case.

### isTitleCase(codePoint)

Returns whether the code point is title case.

### isWhiteSpace(codePoint)

Returns whether the code point is whitespace: specifically, whether the category is one of Zs, Zl, or Zp.

### isBaseForm(codePoint)

Returns whether the code point is a base form. A code point of base form does not graphically combine with preceding
characters.

### isMark(codePoint)

Returns whether the code point is a mark character (e.g. accent).

## License

MIT
npm package: @react-18-pdf/yoga
Description: Prebuilt yoga-layout package
Author: Diego Muracciole
Latest version: 2.0.5

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @react-18-pdf/yoga

> Prebuilt [yoga-layout](https://github.com/facebook/yoga) package with memory heap increase

## Acknowledges

This project is forked from the great [yoga-layout-prebuilt](https://github.com/vadimdemedes/yoga-layout-prebuilt) from @vadimdemedes.

Also thanks to @Skywalker13 for providing the post-processing script for increasing build original memory heap.

## Install

```
$ npm install @react-18-pdf/yoga
```

## Usage

```js
import Yoga from '@react-18-pdf/yoga';
// Same as if imported from yoga-layout
```
npm package: @react-above/modal-theme-default
Description: A default theme for @react-above/modal
Author: Evgeny Zakharov
Latest version: 0.1.8

# @react-above/modal-theme-default

## Installation

```sh
$ yarn add @react-above/modal-theme-default
```

## Usage

### 1. Create Modal component

```tsx
/* Somewhere in your UI layer.. */

import { createModal } from '@react-above/modal'
import { ThemeDefault } from '@react-above/modal-theme-default'

export const Modal = createModal({
  theme: ThemeDefault(),
  // ...
})
```

### 2. Use anywhere

```tsx
import { Modal } from '@app/ui'

<Modal isOpen={isOpen} close={close}>
  <Modal.Surface>
    <Modal.Header title="My modal" close={close} />
    <Modal.Body>My modal text</Modal.Body>
  </Modal.Surface>
</Modal>
```

## API

### Modal.Surface

The container for your modal content

```tsx
interface Props {
  /*
   * true - fill fullscreen OR more (depends on content size)
   * 'strict' - fill fullscreen precisely (you should manage overflow inside)
   */
  fullscreen?: boolean | 'strict'
}
```

### Modal.Header

The modal's top part

```tsx
interface Props {
  title?: string
  close?: () => void
}
```

### Modal.Body

The modal's content part

```tsx
interface Props {}
```
npm package: @react-ag-components/address
Description: address-autocomplete React component
Latest version: 0.8.3

# input

React component for Address field

## Usage

### Install
```
npm i @react-ag-components/address --save
```
### Use in your project

First you must included the google script

```
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[Your API key]&libraries=places"></script>

```

Then import into your page or component

```
import Address from '@react-ag-components/address'
```

```

onAddressChange = (address) => {
  console.log(address)
}

<Address onChange={this.onAddressChange}/>

```

### Properties

Only has one prop `onChange` which takes a function that returns an address object that matches our PartyDS service.
```
{
  addressline1:'',
  addressline2:'',
  addressline3:'',
  city:'',
  state:'',
  postcode:'',
  country:''
}
```

## Contributing

Get the repository
```
git clone https://github.com/alphillips/address.git
```

Update dependencies
```
npm install
```

Run the project
```
npm start
```

### Deploy to npm
#### Build
`npm run build -- --copy-files`

#### Publish
`npm publish --access public`
npm package: @react-ag-components/back-button
Description: back-button React component
Latest version: 0.0.3

# back-button

A React back button. Actually a link with a left arrow.

## Usage

### Install
```
npm i @react-ag-components/back-button --save
```
### Use in your project
```
import BackButton from '@react-ag-components/back-button'
```

```
<BackButton />
```

### Properties


## Contributing

Get the repository
```
git clone https://github.com/alphillips/back-button.git
```

Update dependencies
```
npm install
```

Run the project
```
npm start
```

### Deploy to npm
#### Build
`npm run build -- --copy-files`

#### Publish
`npm publish --access public`
npm package: @react-ag-components/checkbox
Description: checkbox React component, extends from Material-ui
Latest version: 0.0.7

# Messages

React Messages component for external web apps

> Note: Messages has 4 types, warning, info, error and success

## Usage

### Install
```
npm i @react-ag-components/checkbox --save
```
### Use in your project
```
import Messages from '@react-ag-components/checkbox'
```

```
<Checkbox />
```

### Properties
* label
* defaultChecked -- boolean
* disabled
* inputStyle
* labelPosition -- 'left' or 'right'
* labelStyle
* onCheck
* style

## Contributing

Get the repository
```
git clone https://github.com/alphillips/checkbox.git
```

Update dependencies
```
npm install
```

Run the project
```
npm start
```

### Deploy to npm
#### Build
`npm run build -- --copy-files`

#### Publish
`npm publish --access public`
npm package: @react-ag-components/contact-person
Description: Contact Person React component
Latest version: 0.5.24

# contact-person

React contact-person component for external web apps

## Usage

### Install
```
npm i @react-ag-components/contact-person --save
```
### Use in your project
```
import ContactPerson from '@react-ag-components/contact-person'
```

```
let contactPerson =
{
  "contactPerson": {
    "currentUserIsContactPerson": "false",
    "email": "email@email.com",
    "otherClientDetails": {
      "clientId": "65465456",
      "personDetails": {
        "firstName": "John"
      }
    },
    "otherPersonDetails": {
      "firstName": "Cindy",
      "lastName": "Pak",
      "phone": "234234",
      "postalAddress": {
        "addressLine1": "5 jason street",
        "suburb": "maroo",
        "state": "stateact",
        "postcode": "234234",
        "country": "au"
      }
    }
  }
}
```

```
<ContactPerson
  ref="contactPerson"
  contactPersonDoneStatus={this.contactPersonDoneStatus}
  contactPersonMsg={this.updateMsg}
  standAlonePage={false}
  notShowHeading={false}
  contactPerson={this.state.contactPerson}
/>

updateMsg = status => {
  this.setState((prevState, props) => ({
    [status.type]: status.msg
  }));
  if (status.msg !== "") {
    window.scroll(0, 0);
  }
};

contactPersonDoneStatus = status => {
  this.setState((prevState, props) => ({
    contactPersonDoneStatus: status
  }));
};


```

### Properties

| prop        | Type           | Note  |
| ------------- |:-------------:| -----:|
| contactPerson      | object | contactPerson object provide by the parent page |
| standAlonePage     | boolean      |   Has own Save button |
| handleClientContactPersonSave     | function      |   perform save |
| contactPersonDoneStatus     | function      |   broadcast done, usually use to show/hide the rest of the fields on the parent page |
| standAloneLabel     | string      |   default is "Save" |
| getErrorObj()     | function      |   let error = this.refs.contactPerson.getErrorObj(), error.type and error.msg available |
| getDetails()     | function      |   let details = this.refs.contactPerson.getDetails() returns contactPerson object |
| notShowHeading     | boolean      |   parent page will provide it's own heading, description. |



## Contributing

Get the repository
```
git clone https://github.com/alphillips/contact-person-component.git
```

Update dependencies
```
npm install
```

Run the project
```
npm start
```

### Deploy to npm
#### Build
`npm run build -- --copy-files`

#### Publish
`npm publish --access public`
npm package: @react-ag-components/core
Description: messages React component
Latest version: 0.3.4

# Core

This is the core component for the [Department's Component library](https://www.npmjs.com/org/react-ag-components/).

It provides the following:

- Single base CSS and uikit css
- Base API client (includes global error handling)
- Automatic page loading spinner (if using Base APi client)
- PageWrapper for caching and message passing


## Install
```
npm i @react-ag-components/core --save
```
## Use in your project

### Base CSS and Uikit
Include the base.css and uikit.css in your `src/index.html` file
```
import '@react-ag-components/core/lib/styles/uikit.css'
import '@react-ag-components/core/lib/styles/base.css'
```

### Base API

Add this import to your project's arc/services/api/index.js

And use these instead of your local implementations.
```
import {get, post, put, del, formPost} from '@react-ag-components/core/lib/api'
```

If you are using the [Messages component](https://www.npmjs.com/package/@react-ag-components/messages) (> 0.0.3) then any REST errors will automatically be shown.

### Loadable Section
If you need a Spinner on the page while a REST call is being made, wrap part of your page inside `<LoadableSection>`
```

import LoadableSection from '@react-ag-components/core/lib/LoadableSection'

...

<LoadableSection>

  Anything inside here will be replaced with a spinner while an API call is in progress

</LoadableSection>

```

Note: any API errors will also stop the spinner.


### Page Wrapper


Use the `PageWrapper` to support caching and pass messages between pages.

```
import wrapPage from '@react-ag-components/core/lib/PageWrapper'
...

export default wrapPage()(Country)

```

To save an object to cache:
```
this.props.saveCache(yourObj)
```
To read the object from cache
```
let obj = this.props.cache.yourObj
```

To set a message for another page to show:
```
this.props.setMessage({success:'Success!'})
```
The message can be read and shown from a different page:
```
this.state = {
  success:props.success
}
```

## Contributing

Get the repository
```
git clone https://github.com/alphillips/core.git
```

Update dependencies
```
npm install
```

Run the project
```
npm start
```

### Deploy to npm
#### Build
`npm run build -- --copy-files`

#### Publish
`npm publish --access public`
npm package: @react-ag-components/credit-card-form
Description: credit-card-form React component
Latest version: 0.0.1

# credit-card-form

Credit card react component

## Usage

### Install
```
npm i @react-ag-components/credit-card-form --save
```
### Use in your project
```
import CreditCardForm from '@react-ag-components/credit-card-form'
```

```
onChange = (card) => {
  console.log(card)
}


<CreditCardForm
  onChange={this.onChange}
/>

```

### Properties


## Contributing

Get the repository
```
git clone https://github.com/alphillips/credit-card-form.git
```

Update dependencies
```
npm install
```

Run the project
```
npm start
```

### Deploy to npm
#### Build
`npm run build -- --copy-files`

#### Publish
`npm publish --access public`
npm package: @react-ag-components/date-input
Description: date-input React component
Latest version: 0.1.5

# date-input

Date input react component

## Usage

### Install
```
npm i @react-ag-components/date-input --save
```
### Use in your project
```
import DateInput from '@react-ag-components/date-input'
```

```
handle = (date) => {
  console.log(date)
}


<DateInput
  id="dob"
  label="Date of birth"
  handle={this.handle}
/>

```

### Properties


## Contributing

Get the repository
```
git clone https://github.com/alphillips/date-input.git
```

Update dependencies
```
npm install
```

Run the project
```
npm start
```

### Deploy to npm
#### Build
`npm run build -- --copy-files`

#### Publish
`npm publish --access public`
npm package: @react-ag-components/datetime
Description: React Date Time component
Author: alphillips
Latest version: 0.1.12

# input

React component for DateTime (extra information)

original datetime component from
https://www.npmjs.com/package/material-ui-datetimepicker
https://github.com/dmtrKovalenko/material-ui-datetimepicker

## Pre-requisite
Requires material ui v0

## Usage

### Install
```
npm i @react-ag-components/datetime --save
```
### Use in your project
```
import DateTimePicker from '@react-ag-components/datetime'
```

```


<DateTimePicker
  value={this.state.startDateTime}
  onChange={this.onChange('startDateTime')}
  label="Start date time"
/>
```

### Properties

| Property    | Default       | Description                                |
| --------    |:-------------:|-------------------------------------------:|
| format        |     'DD MMMM YYYY hh:mm A'            |                 moment date format                        |


## Contributing

Get the repository
```
git clone https://github.com/alphillips/datetime.git
```

Update dependencies
```
npm install
```

Run the project
```
npm start
```

### Deploy to npm
#### Build
`npm run build -- --copy-files`

#### Publish
`npm publish --access public`
npm package: @react-ag-components/email-input
Description: email-input React component
Latest version: 0.0.3

# email-input

React email input component

## Usage

### Install
```
npm i @react-ag-components/email-input --save
```
### Use in your project
```
import Input from '@react-ag-components/email-input'
```

```
<EmailInput
  label="Email address"
  id="email-address"
  value={this.state.value}
  onChange={this.onChange('value')}
/>
```

### Properties


## Contributing

Get the repository
```
git clone https://github.com/alphillips/email-input.git
```

Update dependencies
```
npm install
```

Run the project
```
npm start
```

### Deploy to npm
#### Build
`npm run build -- --copy-files`

#### Publish
`npm publish --access public`
npm package: @react-ag-components/footer
Description: footer React component
Latest version: 0.0.1

# footer

React footer component for external web apps

## Usage

### Install
```
npm i @react-ag-components/footer --save
```
### Use in your project
```
import Footer from '@react-ag-components/footer'
```

```
<Footer />
```

### Properties


## Contributing

Get the repository
```
git clone https://github.com/alphillips/footer.git
```

Update dependencies
```
npm install
```

Run the project
```
npm start
```

### Deploy to npm
#### Build
`npm run build -- --copy-files`

#### Publish
`npm publish --access public`
npm package: @react-ag-components/header
Description: header React component
Latest version: 1.2.18

# header

React header component for external web apps

> Note: This header doesn't not yet include the menu or logged in user.
But it will soon :v:

## Usage

### Install
```
npm i @react-ag-components/header --save
```
### Use in your project
```
import Header from '@react-ag-components/header'
```

```
<Header />
```

### Properties

| prop        | Type           | Note  |
| ------------- |:-------------:| -----:|
| showInbox      | boolean | inbox search visibility |
| menu     | object      |   <ul><li>... |
| abn | string      |  abn number   |
| userName | string      |    firstname + lastname |
| logonId | string      |    their logon id, normally their email |
| orgName | string      |    organisation name |
| otherInfo | Object Array with field "label" and "value"      |    ["label": "labelVal", "value": "valueVal"] |
| otherLink | Object Array with field "label" and "value"      |    ["label": "labelVal", "value": "/"] |
| name | string      | page heading    |
| searchArray |  JSON Array     |    array to search on |
| searchKey |   string   |    "id"|
| searchDisplayAttributes | array      |    ['id','status','date','destinationCountry'] |


## Contributing

Get the repository
```
git clone https://github.com/alphillips/header.git
```

Update dependencies
```
npm install
```

Run the project
```
npm start
```

### Deploy to npm
#### Build
`npm run build -- --copy-files`

#### Publish
`npm publish --access public`
npm package: @react-ag-components/help
Description: React Help component
Author: alphillips
Latest version: 0.1.3

# input

React component for Help (extra information)

## Usage

### Install
```
npm i @react-ag-components/input --save
```
### Use in your project
```
import Help from '@react-ag-components/help'
```

```
const text = 'Select Automatic if you like your certificate(s) to be issued after submission or Hold if you would like to preview your certificate before it is issued. Certificate Preview can be performed after submission on the REX details screen.';
<Help
  text={text}
  label="Tell me more..."
/>
```

### Properties

| Property    | Default       | Description                                |
| --------    |:-------------:|-------------------------------------------:|
| text        | ""            |                                            |
| label       | "Help"        |    clicking on label, toggles helperText   |


## Contributing

Get the repository
```
git clone https://github.com/alphillips/help.git
```

Update dependencies
```
npm install
```

Run the project
```
npm start
```

### Deploy to npm
#### Build
`npm run build -- --copy-files`

#### Publish
`npm publish --access public`
npm package: @react-ag-components/inbox
Description: Inbox component
Latest version: 0.4.17

# Inbox

Inbox as reusable component


## Usage

### Install
```
npm i @react-ag-components/inbox --save
```
### Use in your project
```
import {Inbox} from '@react-ag-components/inbox'
```
Your page should look like this
```
render() {
  return (
    <div>

      <Inbox />

    </div>
  )
}
```


## Contributing

Get the repository
```
git clone https://github.com/alphillips/inbox.git
```

Update dependencies
```
npm install
```

Run the project
```
npm start
```

### Deploy to npm
#### Build
`npm run build -- --copy-files`

#### Publish
`npm publish --access public`
npm package: @react-ag-components/input
Description: React Input component
Author: alphillips
Latest version: 0.3.7

# input

React component for Input

## Usage

### Install
```
npm i @react-ag-components/input --save
```
### Use in your project
```
import Input from '@react-ag-components/input'
```

```
<Input
  label="Weight amount"
  id="weight-amount"
  value={this.state.weightAmount}
  onChange={this.onChange('weightAmount')} />
```

### Properties

| Property        | Default| Description  |
| -------- |:-------------:|-------------:|
| id       | same as label |              |
| type     | "text"        |              |
| value    | ""            |              |
| onBlur   |               | function     |
| onChange |               | function     |
| label    | ""            |              |
| error    | ""            |              |

## Contributing

Get the repository
```
git clone https://github.com/alphillips/input.git
```

Update dependencies
```
npm install
```

Run the project
```
npm start
```

### Deploy to npm
#### Build
`npm run build -- --copy-files`

#### Publish
`npm publish --access public`
npm package: @react-ag-components/messages
Description: messages React component
Latest version: 0.0.9

# Messages

React Messages component for external web apps

> Note: Messages has 4 types, warning, info, error and success

## Usage

### Install
```
npm i @react-ag-components/messages --save
```
### Use in your project
```
import Messages from '@react-ag-components/messages'
```

```
<Messages />
```

### Properties


## Contributing

Get the repository
```
git clone https://github.com/alphillips/messages.git
```

Update dependencies
```
npm install
```

Run the project
```
npm start
```

### Deploy to npm
#### Build
`npm run build -- --copy-files`

#### Publish
`npm publish --access public`
npm package: @react-ag-components/my-printer
Description: My Printer React component
Latest version: 0.3.16

# my-printer

React my-printer component for external web apps

## Usage

### Install
```
npm i @react-ag-components/my-printer --save
```
### Use in your project
```
import ContactPerson from '@react-ag-components/my-printer'
```

```
let commodities = [
  {value: "D",label: "Dairy (Just For Testing)"},
  {value: "F",label: "Fish (Just For Testing)"},
  {value: "H",label: "Hort (For Testing Only)"},
  {value: "X",label: "All Other Goods"}
]

let activeCommodities = ["X"]
```

```
<Commodities
  ref="commodities"
  commodities={this.state.commodities}
  activeCommodities={this.state.activeCommodities}
  onlyShowCommodities={true}
  standAlonePage={false}
  myPrinterMsg={this.updateMsg}
/>

updateMsg = status => {
  this.setState((prevState, props) => ({
    [status.type]: status.msg
  }));
  if (status.msg !== "") {
    window.scroll(0, 0);
  }
};


```

### Properties

| prop        | Type           | Note  |
| ------------- |:-------------:| -----:|
| commodities      | object | data.commodities |
| activeCommodities      | object | data.activeCommodities |
| onlyShowCommodities      | state | so we can use it for Export Commodities |
| standAlonePage      | boolean | Has own Save button |
| myPrinterMsg      | object | update parent page state |



## Contributing

Get the repository
```
git clone https://github.com/alphillips/my-printer-component.git
```

Update dependencies
```
npm install
```

Run the project
```
npm start
```

### Deploy to npm
#### Build
`npm run build -- --copy-files`

#### Publish
`npm publish --access public`
npm package: @react-ag-components/pathway-list
Description: pathway-list React component
Latest version: 0.0.2

# pathway-list

React component for a list of "pathways" or links with arrows and nice borders.

## Usage

### Install
```
npm i @react-ag-components/pathway-list --save
```
### Use in your project
```
import PathwayList from '@react-ag-components/pathway-list'
```

```
<PathwayList>
  {this.state.list.map((item) =>
    <li key={item.id}>
      <a href={'#/item.link/' + item.id}>
        {item.description}
      </a>
    </li>
  )}
</PathwayList>
```

## Contributing

Get the repository
```
git clone https://github.com/alphillips/pathway-list
```

Update dependencies
```
npm install
```

Run the project
```
npm start
```

### Deploy to npm
#### Build
`npm run build -- --copy-files`

#### Publish
`npm publish --access public`
npm package: @react-ag-components/radiobutton
Description: radio React component, extends from Material-ui
Latest version: 0.0.1

# Messages

React RadioButton component for external web apps

> Note: Messages has 4 types, warning, info, error and success

## Usage

### Install
```
npm i @react-ag-components/radiobutton --save
```
### Use in your project
```
import RadioButton from '@react-ag-components/radiobutton'
```

```
<RadioButton />
```

### Properties
* label
* defaultChecked -- boolean
* disabled
* inputStyle
* labelPosition -- 'left' or 'right'
* labelStyle
* onCheck
* style

## Contributing

Get the repository
```
git clone https://github.com/alphillips/radio-button.git
```

Update dependencies
```
npm install
```

Run the project
```
npm start
```

### Deploy to npm
#### Build
`npm run build -- --copy-files`

#### Publish
`npm publish --access public`
npm package: @react-ag-components/reference-data-selector
Description: reference-data-selector React component
Latest version: 0.2.13

# reference-data-selector

Typeahead field to look up reference data.

Specify the ref type to look up a reference data group.

For example to look up countries from the `country` data group, pass in the type of `country`

```
<ReferenceDataSelector
    type="country"
    ...
```    

> Note this only works if it deployed under the same domain as the reference data service.

> Or use a proxy. 

## Usage

### Install
```
npm i @react-ag-components/reference-data-selector --save
```
### Use in your project
```
import ReferenceDataSelector from '@react-ag-components/reference-data-selector'
```

```
<ReferenceDataSelector
  id="country-selector"
  label="Country you wish to export to"
  placeholder="Select country"
  type="country"
  onChange={this.onChange('country')}
  value={this.state.country}
/>
```

### Properties


## Contributing

Get the repository
```
git clone https://github.com/alphillips/reference-data-selector.git
```

Update dependencies
```
npm install
```

Run the project
```
npm start
```

### Deploy to npm
#### Build
`npm run build -- --copy-files`

#### Publish
`npm publish --access public`
npm package: @react-ag-components/reference-data-text
Description: reference-data-text React component
Latest version: 0.0.6

# reference-data-text

Displays the description or long value given a code from reference data.

For example `au` will be displayed as `Australia`


```
<ReferenceDataText type="countries" value="au"/>
```  

> Note this only works if it deployed under the same domain as the reference data service.

> Or use a proxy.

## Usage

### Install
```
npm i @react-ag-components/reference-data-text --save
```
### Use in your project
```
import ReferenceDataText from '@react-ag-components/reference-data-text'
```

```
<ReferenceDataText type="countries" value="au"/>
```

### Properties


## Contributing

Get the repository
```
git clone https://github.com/alphillips/reference-data-text.git
```

Update dependencies
```
npm install
```

Run the project
```
npm start
```

### Deploy to npm
#### Build
`npm run build -- --copy-files`

#### Publish
`npm publish --access public`
npm package: @react-ag-components/selectfield
Description: select React component, extends from Material-ui
Latest version: 0.0.4

# Messages

React SelectField component for external web apps

> Note: Messages has 4 types, warning, info, error and success

## Usage

### Install
```
npm i @react-ag-components/selectfield --save
```
### Use in your project
```
import SelectField from '@react-ag-components/selectfield'
```

```
<SelectField />
```

### Properties
* floatingLabelText -- string
* choices  -- JSON array, see demo

## Contributing

Get the repository
```
git clone https://github.com/alphillips/select-field.git
```

Update dependencies
```
npm install
```

Run the project
```
npm start
```

### Deploy to npm
#### Build
`npm run build -- --copy-files`

#### Publish
`npm publish --access public`
npm package: @react-ai-assist/cli
Description: CLI tool to add AI chat UI components to React projects
Author: Xun Li
Latest version: 0.0.1

# React-AI-Assist Chat UI Components CLI

A CLI tool to add React-AI-Assist chat UI components to your React project. You can adjust the components to your own project.

## Installation

```bash
npx create-ai-chat
```

## Usage

The CLI will prompt you for:

- Target directory for the components
- Whether you're using TypeScript

## Requirements

Your project should have these dependencies:

- react
- react-ai-assist
- tailwindcss
- @nextui-org/react
- framer-motion
- @iconify/react
- next-themes
- html2canvas

## Components Added

- AiAssistant
- ScreenshotWrapper

## Example Usage

```jsx
jsx;
import { AiAssistant } from './components/assistant';
function App() {
  return (
    <AiAssistant
      modelProvider="openai"
      model="gpt-4"
      apiKey="your-api-key"
      welcomeMessage="Hello! How can I help you today?"
    />
  );
}
```
npm package: @react-ai-assist/core
Description: Core library for React AI Assist
Author: Xun Li
Latest version: 0.0.1

# React AI Assist Core

A powerful and flexible React library for integrating multiple AI assistants (OpenAI, Google Gemini, and Ollama) into your applications.

## Features

- 🤖 Support for multiple AI providers:
  - OpenAI (GPT models)
  - Google Gemini
  - Ollama (local AI models)
- 🔄 Streaming responses
- 🎯 Function calling support
- 🎤 Audio-to-text conversion
- 🖼️ Image processing capabilities
- 🔌 Easy-to-use React hooks
- 📝 Type-safe APIs

## Installation

```bash
npm install @react-ai-assist/core
```


### Peer Dependencies

The following peer dependencies are required:

```json
{
  "react": "^18 || ^19",
  "@langchain/core": "^0.3.26",
  "@langchain/google-genai": "^0.1.6",
  "@langchain/ollama": "^0.1.4",
  "@langchain/openai": "^0.3.16"
}
```


## Usage

### Basic Example

use with `@react-ai-assist/cli` to create chat UI with AI Assist.

```bash
npx @react-ai-assist/cli
```


## Supported Features by Provider

| Feature | OpenAI | Google | Ollama |
|---------|---------|---------|---------|
| Text Chat | ✅ | ✅ | ✅ |
| Image Processing | ✅ | ✅ | ✅ |
| Audio to Text | ✅ | ✅ | ❌ |
| Function Calling | ✅ | ✅ | ✅ |
| Streaming | ✅ | ✅ | ✅ |

## API Reference

### useAssistant Hook

The main hook for interacting with AI assistants. See [UseAssistantProps documentation](src/hooks/use-assistant.ts) for detailed configuration options.

```typescript
const assistant = useAssistant({
name: string;
modelProvider: string;
model: string;
apiKey: string;
version: string;
baseUrl?: string;
description?: string;
temperature?: number;
topP?: number;
instructions: string;
functions?: Array<FunctionDefinition>;
});
```


## License

MIT © [Xun Li](mailto:lixun910@gmail.com)