# @blueeast/bluerain-ui-interfaces

> Component interfaces that can be implemented for react and react native

Latest version **4.0.0** (published 2018-12-14) · ISC license · 0 weekly downloads

## Install

```sh
npm install @blueeast/bluerain-ui-interfaces
pnpm add @blueeast/bluerain-ui-interfaces
yarn add @blueeast/bluerain-ui-interfaces
bun add @blueeast/bluerain-ui-interfaces
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.0.0 |
| Published | 2018-12-14 |
| First published | 2018-01-26 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 539.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | BlueEast Team |
| Maintainers | artalat, bjavaid |

## Links

- npm: https://www.npmjs.com/package/@blueeast/bluerain-ui-interfaces
- Repository: https://github.com/BlueEastCode/bluerain-ui-interfaces
- Homepage: https://github.com/BlueEastCode/bluerain-ui-interfaces#readme
- Issues: https://github.com/BlueEastCode/bluerain-ui-interfaces/issues
- npm.io page: https://npm.io/package/@blueeast/bluerain-ui-interfaces

## Dependencies (1)

- [react](https://npm.io/package/react.md) ^16.2.0

## Recent versions

- 4.0.0 (latest) — 2018-12-14
- 4.0.0-beta.9 — 2018-11-29
- 4.0.0-beta.8 — 2018-10-22
- 4.0.0-beta.7 — 2018-09-19
- 4.0.0-beta.6 — 2018-09-10
- 4.0.0-beta.5 — 2018-08-31
- 4.0.0-beta.4 — 2018-08-31
- 4.0.0-beta.3 — 2018-08-30
- 4.0.0-beta.2 — 2018-08-29
- 4.0.0-beta.1 — 2018-08-19
- 3.2.12 — 2018-08-03
- 3.2.11 — 2018-06-14
- 3.2.10 — 2018-06-04
- 3.2.9 — 2018-05-11
- 3.4.0 — 2018-05-07
- … 29 more at https://npm.io/package/@blueeast/bluerain-ui-interfaces/versions

## README

# BlueRain UI Interfaces

A UI interfaces collection to align the components development process across all platforms. React components build using these interfaces supposedly should work on Web, Mobile (iOS and Android) and Desktop.

## 🎊 Status

[![Greenkeeper badge](https://badges.greenkeeper.io/BlueEastCode/bluerain-ui-interfaces.svg)](https://greenkeeper.io/)

## Usage

Run the following command in the plugin directoy:

```shell
npm i --save @blueeast/bluerain-ui-interfaces
```

## List of Interfaces

Following component interfaces have been defined and exposed through this repo.

- [ActivityIndicator](./src/components/ActivityIndicator.ts)
- [AppBar](./src/components/AppBar.ts)
- [Avatar](./src/components/Avatar.ts)
- [Badge](./src/components/Badge.ts)
- [Breadcrumb](./src/components/Breadcrumb.ts)
- [Button](./src/components/Button.ts)
- [Card](./src/components/Card.ts)
- [Carousel](./src/components/Carousel.ts)
- [Checkbox](./src/components/Checkbox.ts)
- [Chip](./src/components/Chip.ts)
- [Color](./src/components/Color.ts)
- [Divider](./src/components/Divider.ts)
- [DocumentSelectionState](./src/components/DocumentSelectionState.ts)
- [Drawer](./src/components/Drawer.ts)
- [FormControl](./src/components/FormControl.ts)
- [Icon](./src/components/Icon.ts)
- [Image](./src/components/Image.ts)
- [List](./src/components/List.ts)
- [Map](./src/components/Map.ts)
- [Model](./src/components/Model.ts)
- [Picker](./src/components/Picker.ts)
- [Progressbar](./src/components/Progressbar.ts)
- [SelectionList](./src/components/SelectionList.ts)
- [Slider](./src/components/Slider.ts)
- [StatusBar](./src/components/StatusBar.ts)
- [Switch](./src/components/Switch.ts)
- [Tab](./src/components/Tab.ts)
- [TabBar](./src/components/TabBar.ts)
- [Tabs](./src/components/Tabs.ts)
- [Text](./src/components/Text.ts)
- [TextInput](./src/components/TextInput.ts)
- [TouchableHighlight](./src/components/TouchableHighlight.ts)
- [TouchableOpacity](./src/components/TouchableOpacity.ts)
- [TouchableWithoutFeedback](./src/components/TouchableWithoutFeedback.ts)
- [View](./src/components/View.ts)
- [VirtualizedList](./src/components/VirtualizedList.ts)
- [WebView](./src/components/WebVew.ts)
- [Stepper](./src/components/Stepper.ts)
- [Notification](./src/components/Notification.ts)

## Example Implementation of Interface

- First export interface from bluerain-ui-interfaces repo.

``` javascript
import { TextInputProperties } from '@blueeast/bluerain-ui-interfaces';
```

- Then extend/implement interface for component you intend to develop

``` javascript

export interface MUITextInputProperties extends TextInputProperties {
 autoComplete?: string,
 autoCorrect?: string,
 id?: string,
 label?: string,
 className?: any,
 margin?: 'none' |
    'dense' |
    'normal',
 required?: boolean,
 error?: boolean,
 type?: string,
 rowsMax?: string,
 rows?: string,
 helperText?: ReactNode,
 InputLabelProps?: object,
 fullWidth?: boolean,
 errorText?: ReactNode,
}
```

- Then use above extended interface for component development

``` javascript
const BlueRainTextInput: React.StatelessComponent<MUITextInputProperties> = (rawProps) => {
 const { onChangeText , ...props } = rawProps;
 let disabled = false;
 if(props.editable !== undefined && !props.editable) {
  disabled = true;
 }
 return (
 <TextField
  onChange={(props.onChange || onChangeText) ? customOnChange(rawProps) : () => {return null;}}
  rows={props.numberOfLines}
  helperText={props.errorText}
  {...props}
 />
 );
};

export default BlueRainTextInput;

```

Notice how props from  interface have been mapped to material-ui textinput props. For exmaple rows has been mapped numberOfLines.

---
_Source: https://npm.io/package/@blueeast/bluerain-ui-interfaces · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._