open-index/open-npm huggingface dataset:
npm package: @myxplor/agent-detection
Description: Currently this is just a simple regex to detect if the useragent is a mobile. We're considering `iPads` to be a mobile device.
Latest version: 0.3.7

# Agent detection

Currently this is just a simple regex to detect if the useragent is a mobile.
We're considering `iPads` to be a mobile device.

## Why?

As sometime on mobile we want a slightly different behavour.
eg: We don't always want to autofocus an input. As this brings up the keyboard and can make it difficult for the user to get context.
npm package: @myxplor/forms
Description: A standard way to render our form inputs, textareas, and submit buttons. The best way to get a feel of how these components work is via storybook.
Latest version: 0.10.18

# Forms

A standard way to render our form inputs, textareas, and submit buttons.
The best way to get a feel of how these components work is via storybook.

`FormInput`, `FormPassword` and `FormTextArea` all share the below props


* `name` - name of input. `required`
* `onChange` - callback function when input changes. `required`
* `required` - if a value is required, for browser clientside validation. _Also adds "*" after label text_
* `label` - human readable text displayed above input. Optional, if no value provided, uses `name`
* `value` - the default value of the input
* `hint` - hint text, display below the input
* `errors` - an array of errors to be displayed. If this provided, the input will turn red.
* `loading` - if the form is loading/submitting. If is loading, input becomes readonly, and errors are reset. (so that hint text is displayed again)
* `maxLength` - displays a countdown timer of how many chars remaining
* `autoFocus` - if the input should be automatically focused. _Only if the user agent is not a mobile_


> Note: FormSubmit, has its' own set of props. 


```javascript

  <FormInput 
    required={true} 
    name="email"
    label="First Name"
    value="Thomas"
    autoFocus="true"
    onChange={this.handleChange}
  />

```

## With errors

![screen shot 2018-03-09 at 5 01 06 pm](https://user-images.githubusercontent.com/9635/37189885-7e16396e-23bb-11e8-81a2-6e90570b46ef.png)

Pass the `errors` props an array of errors

```javascript

  <FormInput 
    required={true} 
    name="first_name"
    label="First Name"
    value="Thomas"
    errors={[
      "This needs to be filled out"
    ]}
    onChange={this.handleChange}
  />

```

> Note: in your errors, if you pass an object with a key of `title` it will be rendered in bold.

```javascript

  <FormInput 
    name="first_name"
    label="First Name"
    value="Thomas"
    errors={
      [
        { "title": "Opps" },
        "This is terrible"
      ]
    }
    onChange={this.handleChange}
  />

```

![screen shot 2018-03-09 at 5 18 38 pm](https://user-images.githubusercontent.com/9635/37190297-f15b4822-23bd-11e8-8a35-9f8b4f4f0dab.png)
npm package: @myxplor/icons
Description: ![screen shot 2018-05-09 at 10 51 44 pm](https://user-images.githubusercontent.com/9635/39811050-94aabf74-53db-11e8-920e-b0ac9c075138.png)
Latest version: 0.9.3

# Icons

![screen shot 2018-05-09 at 10 51 44 pm](https://user-images.githubusercontent.com/9635/39811050-94aabf74-53db-11e8-920e-b0ac9c075138.png)


All icons are svg's that are rendered by react. This might sounds like we're just trying to be super fancy, but this gives us some advantages.

SVG is inline in the page, which allows us to control the size, colour, stroke (border) thickness via css. 

## Passing props

Given the icons are react components, we can pass props to control which shape we want.

* `title` string, used in the svg title. Each icon has their own default title. Eg: the loading icon has a title of "Loading"
* `large` - boolean, makes the icon larger by 25%. _Default false_
* `left` - boolean. Moves all padding to the righthand side, for when is display left aligned. (eg: in a button)
* `className` - supply your own classname
* `onClick` - function. When supplied will wrap an `<a>` around the icon, so is rendered as a link


For example, the `VisibleIcon` has two states where the "eye" is open and when it is closed.
By default the icon is set to closed. To use the open state pass `open` as a prop. 

```jsx
<VisibleIcon open />
<VisibleIcon />
```

![screen shot 2018-03-02 at 6 19 54 pm](https://user-images.githubusercontent.com/9635/36884506-64635b02-1e46-11e8-8330-4c29710e7392.png)

> Not all icons have states
npm package: @myxplor/notifications-redux
Description: The notification component (in `@myxplor/ui`) wrapped in redux
Latest version: 0.3.3

# notifications-redux

The notification component (in `@myxplor/ui`) wrapped in redux

## How to use

Just drop it into your app somewhere underneath your `Provider`

```js
// other boilerplate
import Notification from '@myxplor/notifications-redux'

  <Provider store={store}>

    <Notification />

    <RestOfYourApp />
  </Provider>
```


## Why?

There is a `Notification` component in `@myxplor/ui`, but we didn't want redux to be a requirement. So the redux requirements has been extracted into this component.
npm package: @myxplor/scroll-to-top
Description: With single page apps, if the user has scrolled downwards and clicks a `ReactRouter Link` to navigate to a new page the viewport will remain scrolled down. This is a thin wrapper to scroll the page to the top when the browsers history state changes.s
Latest version: 0.2.9

# Scroll to top

With single page apps, if the user has scrolled downwards and clicks a `ReactRouter Link` to navigate to a new page the viewport will remain scrolled down. This is a thin wrapper to scroll the page to the top when the browsers history state changes.s
npm package: @myxplor/shared
Description: Shared react/redux components
Latest version: 0.5.0

# Xplor components

A collection of shared components (and their associated styles)

## Installation

```bash
  yarn install @xplor/shared
```

This will give us the js components, to import the stylesheet add to main.js

```
  import '@myxplor/shared/build/main.css'
```


## Running

In order to see the components, and to see them as you work on them…s

```bash
  yarn start
```


## Tests

```bash
  yarn test
```

There is a known issue with running `jest --watch`
_(errors with FSEvents.framework)_
https://github.com/facebook/jest/issues/1767

Try installing watchman (the source of the issue) via brew

```bash
  brew install watchman
```
npm package: @myxplor/ui
Description: This is a collection of UI components used across Xplor single page apps
Latest version: 0.7.9

## UI components

This is a collection of UI components used across Xplor single page apps

* `Avatar` - Standard presentaion of user avatar, _or fallback to initials_
* `Card` - Standard wrapper around core content
* `ErrorsFromAPI` - A standard way to display 500's from remote apis
* `Loading` - loading animation
* `NotAvailable` - standard way to say data is not available
* `Note` - standard way to callout information
* `Pill` - standard way to present "tags"
* `PreRelease` - standard "in development" badge
* `Timer` - countdown timer

## Colour variables

> Need to move towards SASS or PostCSS variables

```css

  heroColour: #007aff;
  heroColourHover: #195ca5;
  errorColour: #e64766;
  grey: #9b9b9b;
  warn: #fbbf5c;

```