@appbaseio/dejavu-browser

batteries

Public pluggable modules for use within appbase.io dashboard, dejavu, and reactive apps.

Setup

1. Setup the submodule:

git submodule init
git submodule sync
git submodule update --recursive --remote

1. Installation:

yarn add emotion react-emotion antd @appbaseio/reactivesearch react-expand-collapse codesandbox react-element-to-jsx-string appbase-js react-ace brace recharts moment lodash reselect redux-thunk react-joyride
yarn add -D babel-plugin-emotion babel-plugin-import

Add babel-plugin-import:

// .babelrc or babel-loader option
{
	"plugins": [
		[
			"import",
			{ "libraryName": "antd", "libraryDirectory": "es", "style": "css" }
		]
	]
}

You will need to setup css-loader in your webpack config for react-select

1. Setup redux

import {
 createStore, combineReducers,
} from 'redux';

// import your root reducer (optional)
import rootReducer from '../reducers';

// import batteries reducers
import batteriesReducers from 'batteries/modules/reducers';

// use it for creating the store:
createStore(combineReducers({ ...rootReducer, ...batteriesReducers })),

1. Import:

• Desired actions from batteries/modules/actions
• Selectors from batteries/modules/selectors

and connect your component to the redux store powered by batteries.

Usage

BaseContainer

Use this component to provide the basic data to batteries components. By default it executes the following tasks.

• Sets the app name & app id in redux store.
• Fetches the basic app information
• Fetches the app plan

Props

Prop	Required	Type	Default Value	Description
appName	yes	string	-	Name of the app.
appId	no	string	-	App id
shouldFetchAppPlan	no	boolean	true	To define that whether the component should fetch app plan or not
shouldFetchAppInfo	no	boolean	true	To define that whether the component should fetch app information or not
component	no	function	-	Render prop function

Example

import Analytics from 'batteries/components/Analytics'
...
<BaseContainer appName="movies-xyz">
  <Analytics/>
</BaseContainer>

SearchSandbox

Use this component to display the SearchPreview component.

Props

Prop	Required	Type	Default Value	Description
appName	yes	string	-	Name of the app.
appId	no	string	-	App id
isDashboard	no	boolean	false	Prefrences handling and profile view
useCategorySearch	no	boolean	false	If true renders CategorySearch else DataSearch
showCodeSandbox	no	boolean	true	If false hides Open in CodeSandbox button
customProps	no	object	{}	To pass props directly to Reactive Components like ReactiveList, MultiList, CategorySearch, DataSearch
attribution	no	object	-	Pass text and link key in object to be displayed at bottom right in codesandbox
showCodePreview	no	boolean	true	If false hides Code Preview button
showCustomList	no	boolean	true	If false hides Customizing ReactiveList button
showProfileOptions	no	boolean	true	If false hides Profile Dropdown

Example

import SearchSandbox from 'batteries/components/SearchSandbox';
import Editor from 'batteries/components/SearchSandbox/containers/Editor';
...
<SearchSandbox
	appId={appId}
	appName={appName}
	credentials={credentials}
	isDashboard
	useCategorySearch={false}
	attribution={{
		text: 'Powered by Appbase',
		link: 'appbase.io'
	}}
	showCodeSandbox
	customProps={{
		ReactiveList: {
			onData: res => (
				<div style={{ background: 'aqua' }}>{JSON.stringify(res)}</div>
			),
			style: { background: 'red' },
		},
		DataSearch: {
			renderSuggestions: res => (
				<div style={{ background: 'yellow' }}>{JSON.stringify(res)}</div>
			),
		},
	}}
>
	<Editor />
</SearchSandbox>

Shared - Input

Use this components to render Input components.

Component	Description
NumberInput	Render input of type number.
DropdownInput	Render dropdown input with search functionality to filter options.
ToggleInput	Renders Switch component that is either true or false.
TextInput	Render input of type text.

How this input works

// handleChange returns an object - { [name]: updateValue }
<TextInput
	name="title"
	value="Hey"
	handleChange={value => this.setState({ ...value })} // value = { title: updatedValue }
/>;

console.log(this.state.title); // New Updated Value