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

Usage

Run the following command in the plugin directoy:

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

List of Interfaces

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

• ActivityIndicator
• AppBar
• Avatar
• Badge
• Breadcrumb
• Button
• Card
• Carousel
• Checkbox
• Chip
• Color
• Divider
• DocumentSelectionState
• Drawer
• FormControl
• Icon
• Image
• List
• Map
• Model
• Picker
• Progressbar
• SelectionList
• Slider
• StatusBar
• Switch
• Tab
• TabBar
• Tabs
• Text
• TextInput
• TouchableHighlight
• TouchableOpacity
• TouchableWithoutFeedback
• View
• VirtualizedList
• WebView
• Stepper
• Notification

Example Implementation of Interface

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

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

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

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

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.