sand-ui v0.6.2

Sand-UI

UI library for React based on Flat UI style.

Note: In order to change styles from any component, use the style prop. className prop is overwritten so just use it like the documentation below describes to.

Installation

Sand-UI is available from npm as sand-ui:

npm install sand-ui --save

After installation you can get components from sand-ui library:

// require modules (CommonJS)

const sand = require('sand-ui');
const Button = sand.Button;

// import modules (ES6)
import { Button } from 'sand-ui';

But to make it work, you need to wrap your App inside the UIProvider, like:

import React from 'react';
import ReactDOM from 'react-dom';
import { UIProvider } from 'sand-ui';
import App from './App';

ReactDOM.render(
  <UIProvider theme={{primary: '#AAA'}}>
    <App />
  </UIProvider>,
  document.getElementById('root')
);

You can also pass an object as theme prop to change default colors of Sand-UI, the object structure for colors is:

{
  primary: '#34495E',
  secondary: '#1ABC9C',
  font: '#02222B',
  white: '#FFFFFF',
  lightGray: '#EEEEEE',
  green: '#53DF83',
  navy: '#074354',
  orange: '#F69C00',
  yellow: '#F5C700',
  red: '#EF4836',
  blue: '#47D2E9',
  gray: '#bdc3c7'
}

Components

All components are made with :heart: by MedanoSoft team, giving you freedom to pass any props you need to, event style if needed :smile:.

Button

Just like any button, excepting you can pass a link to it.

Example

import React from 'react';
import { Button } from 'sand-ui';

class ButtonExample extends React.Component {

//...

  render() {
    return (
      <Button onClick={() => console.log('Click!')}>Click me!</Button>
    )
  }
}

Checkbox

Checkbox and label, all in one.

Example

import React from 'react';
import { Checkbox } from 'sand-ui';

class CheckboxExample extends React.Component {

//...

  render() {
    return (
      <form>
        <Checkbox checked name="Eggs" />
        <Checkbox name="Chicken" />
        <Checkbox name="Tomatoes" />
        <Checkbox checked name="Milk" />
        <Checkbox checked name="Checkout to-do list" />
      </form>
    )
  }
}

Dropdown

List of items like a list-menu, Dropdown is not the same as Select component. Pass an array of items to list prop, it needs to be a list of strings, elements or objects like:

{
  name: 'One', // (string) item name
  link: 'https://github.com/MedanoSoft/sand-ui', // (string) url to link this item
  props: {
    // Props for this item
  }
}

Example

import React from 'react';
import { Dropdown } from 'sand-ui';

class DropdownExample extends React.Component {
  constructor() {
    super();

    this.list = [
      'Twitter',
      'LinkedIn',
      (<br />),
      {
        name: 'GitHub',
        link: 'https://github.com/MedanoSoft',
        props: {
          onClick: () => console.log('GitHub here it goes!')
        }
      }
    ]
  }
//...

  render() {
    return (
        <Dropdown label="Social Media" list={this.list} />
    )
  }
}

Icon

This icon component uses SVG icons from Linearicons, you can use any of those icons passing the icon name without the lnr- prefix, all of those icon names are also described on this Gist and inside this Icon folder :octocat:

Note: Remember to provide any container of this Icon component with a height.

Example

import React from 'react';
import { Icon } from 'sand-ui';

class IconExample extends React.Component {

//...

  render() {
    return (
      <div style={{ height: 200 }}>
        <Icon name="bug" color="#00A86B" />
      </div>
    )
  }
}

Navbar

Simple, horizontal nav component with searchbar.

Example

import React from 'react';
import { Navbar } from 'sand-ui';

class NavbarExample extends React.Component {
  constructor(props) {
    super(props);

    //...
    this.handleSearchbar = this.handleSearchbar.bind(this);
  }

//...
  handleSearchbar(val) {
    console.log(`You are looking for ${val}`);
  }
  
  render() {
    return (
        <Navbar
          title="SandUI"
          right={(<span>&hearts;</span>)}
          searchbar
          onSearch={this.handleSearchbar} />
    )
  }
}

Pagination

Navigation with this simple pagination component.

Example

import React, { Component } from 'react';
import { Pagination } from 'sand-ui';

class PaginationExample extends Component {
  render() {
    return (
      <Pagination pages={30} onPagination={(index) => console.log(`Switch to page ${index}`)} />
    )
  }
}

Progress Bar

Horizontal light bar for showing progress.

Example

import React, { Component } from 'react';
import { Progress } from 'sand-ui';

class ProgressExample extends Component {
  render() {
    return (
      <Progress type="info" percent={15} />
    )
  }
}

Radio

Radio buttons with labels.

Instructions

Give it a name to group all radio buttons of the same type. If not, a default name will be given. Value is unique, and is used as an id.

Example

import React from 'react';
import { Radio } from 'sand-ui';

class RadioExample extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      animal: 'cat'
    };
    // ...
    this.handleRadio = this.handleRadio.bind(this);
  }

//...
  handleRadio(value) {
    this.setState({
      animal: value
    });
  }
  
  render() {
    return (
        <form>
          <Radio name="animals" value="cat" checked={this.state.animal === 'cat'} onChange={this.handleRadio}>Cat</Radio>
          <Radio name="animals" value="dog" checked={this.state.animal === 'dog'} onChange={this.handleRadio}>Dog</Radio>
          <Radio value="dragon" name="animals" disabled>Dragon</Radio>
        </form>
    )
  }
}

Select

Slider

This is a stylished form of <input type="range" /> see MDN documentation about.

Example

import React from 'react';
import { Slider } from 'sand-ui';

class SliderExample extends React.Component {

  render() {
    return (
      <Slider step={4} />
    );
  }

}

Switch

Use a switch if you need a playful component for a boolean input value.

Example

import React from 'react';
import { Switch } from 'sand-ui';

class SwitchExample extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      status: true
    };
    // ...
    this.handleSwitch = this.handleSwitch.bind(this);
  }

//...
  handleSwitch(value) {
    this.setState({
      status: value
    });
  }
  
  render() {
    const { status } = this.state;
    return (
        <form>
          <Switch type="box" status={status} onChange={this.handleSwitch} />
        </form>
    )
  }
}

Tags

For multiple input strings, Tags component! :smile:

Example

import React from 'react';
import { Tags } from 'sand-ui';

class TagsExample extends React.Component {

  render() {
    return (
      <Tags values={['One', 'Two']} onUpdate={(values) => console.log(values)} />
    );
  }

}

TextInput

Simple styled text input. Available for any text-like input if you describe it as type prop.

Note: You don't need to add disabled prop if you declare it as className.

Example

import React from 'react';
import { TextInput } from 'sand-ui';

class InputExample extends React.Component {
  constructor(props) {
    super(props);

    this.state = { value: '' };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
  	this.setState({
  		value: event.target.value
  	});
  }

//...

  render() {
    const { value } = this.state;
    return (
      <TextInput placeholder="Jane Doe" type="text" value={value} onChange={this.handleChange} />
    );
  }
}

Grids

In order to make a responsive display, we have integrated a grid system called Flexbox Grid and adapted to React components, now you got a flex-based full grid display.

Container

This component offers a flexible layout for multiple boxes or any other children.

Box

Component with flexible column size (selected from 1 to 12, auto if not defined).

Example

import React from 'react';
import { Container, Box } from 'sand-ui';

class InputExample extends React.Component {
  render() {
    return (
      <Container fluid mdAlign={"middle"} reverse>
        <Box xs={4} md={6} style={{backgroundColor: 'red' }}>
          <p>Hi</p>
        </Box>
        <Box xs={2} md={4} style={{backgroundColor: 'green' }}>
          <p>From a</p>
        </Box>
        <Box style={{backgroundColor: 'blue' }}>
          <p>Box!</p>
        </Box>
      </Container>
    )
  }
}

License

Copyright (c) 2004-2010 by Internet Systems Consortium, Inc. ("ISC") Copyright (c) 1995-2003 by Internet Software Consortium

Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND ISC DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL ISC BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

More info about this license here.