@stackbyhq/stackby-ui-component

Made with create-react-library

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

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

Select Usage

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, profileImage: "" },
    { label: "strawberry", value: 'strawberry', id: 2, profileImage: "" },
    { label: "vanilla", value: 'vanilla', id: 3, profileImage: "" },
    { label: "Banana", value: 'Banana', id: 4, profileImage: "" },
    { label: "Mango", value: 'Mango', id: 5, profileImage: "" },
];

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

  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

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

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

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

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