# @stackbyhq/stackby-ui-component

> Made with create-react-library

[![NPM](https://img.shields.io/npm/v/@stackbyhq/stackby-ui-component.svg)](https://www.npmjs.com/package/@stackbyhq/stackby-ui-component) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Features

* configurable via props
* Controllable state props and modular architecture
* Flexible approach to data, with customisable functions
* auto position
* small bundle size

## Installation and usage

```bash
npm install --save @stackbyhq/stackby-ui-component
```

## Select Usage

```jsx
import React from 'react';
import { Select } from '@stackbyhq/stackby-ui-component';
import '@stackbyhq/stackby-ui-component/dist/index.css'

const options = [
    { label: "chocolate", value: 'chocolate', id: 1, color: "#000000" },
    { label: "strawberry", value: 'strawberry', id: 2, color: "#FFEB3B" },
    { label: "vanilla", value: 'vanilla', id: 3, color: "#FD823E" },
    { label: "Banana", value: 'Banana', id: 4, color: "#8BC34A" },
    { label: "Mango", value: 'Mango', id: 5, color: "#FFEB3B" },
];

const collaboratorOptions = [
    { label: "chocolate", value: 'chocolate', id: 1, image: "" },
    { label: "strawberry", value: 'strawberry', id: 2, image: "" },
    { label: "vanilla", value: 'vanilla', id: 3, image: "" },
    { label: "Banana", value: 'Banana', id: 4, image: "" },
    { label: "Mango", value: 'Mango', id: 5, image: "" },
];

class App extends React.Components {
  state = {
    selectedOption: [],
    // selectOption:  [{ label: "chocolate", value: 'chocolate', id: 1, color: "#000000" }]
    // selectCollaborator:  [{ label: "chocolate", value: 'chocolate', id: 1, image: "" }]
  };

  handleChange = selectedOption => {
    this.setState({ selectedOption });
    console.log(`Option selected:`, selectedOption);
  };

  render() {
    const { selectedOption } = this.state;

    return (
      <div>
         // select
        <Select
          value={selectOption}
          onChange={this.handleChange}
          option={options}
          type ='select'
          className= {'myClass'}
         />

         // Multi Select
        <Select
          value={selectOption}
          onChange={this.handleChange}
          option={options}
          type ='multiSelect'
         />

         // collaborator
        <Select
          value={selectCollaborator}
          onChange={this.handleChange}
          option={collaboratorOptions}
          type ='collaborator'
          setInviteNewCollaborator ={this.handleChange}
         />

         // Multi Collaborator
        <Select
          value={selectCollaborator}
          onChange={this.handleChange}
          option={collaboratorOptions}
          type ='multiCollaborator'
          setInviteNewCollaborator ={this.handleChange}
         />
      </div>
    );
  }
}
```
## Props

Common props you may want to specify include:

* onChange - subscribe to change events
* setInviteNewCollaborator - invite new collaborator
* option - specify the options the user can select from
* value - control the current value
* type - select, multiSelect, collaborator, multiCollaborator
* className - add customer class

## Rating Usage

```jsx
import React from 'react';
import { Rating } from '@stackbyhq/stackby-ui-component';
import '@stackbyhq/stackby-ui-component/dist/index.css'

class App extends React.Components {
  state = {
    defaultValue: 2,
  };

  handleChange = ratingValue => {
    console.log(`Collaborator selected:`, ratingValue);
  };

  render() {
    const { defaultValue } = this.state;

    return (
      <div>
         <Rating value={defaultValue}
              stop={5} 
              onChange={this.handleChange} 
              className = {'myClassName'} >
         </Rating>
      </div>
    );
  }
}
```
## Props

Common props you may want to specify include:

* onChange - subscribe to change events
* value - control the current value
* className - add customer class

## Checkbox Usage

```jsx
import React from 'react';
import { Checkbox } from '@stackbyhq/stackby-ui-component';
import '@stackbyhq/stackby-ui-component/dist/index.css'

class App extends React.Components {
  state = {
    defaultValue: true,
  };

  handleChange = checkboxValue => {
    console.log(`checkbox selected:`, checkboxValue);
  };

  render() {
    const { defaultValue } = this.state;

    return (
      <div>
         <Checkbox checked={defaultValue} 
             onChange={this.handleChange} 
             className={'myClassName'}>
         </Checkbox>
      </div>
    );
  }
}
```
## Props

Common props you may want to specify include:

* onChange - subscribe to change events
* checked -  control the value is checked or not 
* className - add customer class

## DatePicker Usage

```jsx
import React from 'react';
import { DatePicker } from '@stackbyhq/stackby-ui-component';
import '@stackbyhq/stackby-ui-component/dist/index.css'

class App extends React.Components {
  state = {
    defaultValue: '25/10/2021',
  };

  handleChangeDatePicker = Value => {
    console.log(`DatePicker time stamp `, Value);
    console.log("DatePicker date object", new Date(data));
  };

  render() {
    const { defaultValue } = this.state;
    return (
      <div>
         <DatePicker value={defaultValue} 
              onChange={handleChangeDatePicker}
              className = {'myClassName'}>
         </DatePicker>
      </div>
    );
  }
}
```
## Props

Common props you may want to specify include:

* onChange - subscribe to change events
* value - control the current value
* className - add customer class

## LongText Usage

```jsx
import React from 'react';
import { LongText } from '@stackbyhq/stackby-ui-component';
import '@stackbyhq/stackby-ui-component/dist/index.css'

class App extends React.Components {
  state = {
    defaultValue: '',
  };

  handleChange = Value => {
    console.log(`LongText `, Value);
  };

  render() {
    const { defaultValue } = this.state;

    return (
      <div>
         <LongText value={defaultValue} isMarkDown={true} 
             onChange={this.handleChange} 
             textareaHeight={100}
             modalHeight={100}
             isModel={true}
             modalWidth={300}>
         </LongText>
      </div>
    );
  }
}
```
## Props

Common props you may want to specify include:

* onChange - subscribe to change events
* value - control the current value
* isMarkDown: boolean - enable markdown for true
* isModel: boolean - open with model popup.

## License

MIT © [Stackbydev](https://github.com/stackbyhq/ui)
