smpladminui v1.1.13

smpladminui

SimpleAdmin UI - React Components Library

This is a set of simple UI components that can help you build simple Admin interface with a basic functionality.

Install

npm install --save-dev smpladminui

Usage

import React, { Component } from "react";

import { ButtonComponent as Button } from "smpladminui";

class Example extends Component {
  render() {
    return <Button />;
  }
}

You can import all the components into your application using the following lines:

import React, { Component } from "react";

import {
  ButtonComponent as Button,
  LayoutComponent as Layout,
  PageComponent as Page,
  DropmenuComponent as Dropmenu,
  CardComponent as Card,
  ListComponent as List,
  PopupComponent as Popup,
  IconComponent as Icon,
  WrapperComponent as Wrapper
} from "smpladminui";

class Example extends Component {
  render() {
    return <Button />;
  }
}

Below you can see a list of all the components along with their props.

Button

This component is a simple styled button which can render in few different styles depending on the props and handling onClick event upon itself.

Usage

import React, { Component } from "react";

import { ButtonComponent as Button } from "smpladminui";

class Example extends Component {
  render() {
    return <Button label={"No Action"} danger />;
  }
}

Props

Toggle

This component is a simple styled toggle which can render a toggle knob in few different styles depending on the props and handling onToggle event upon itself.

Usage

import React, { Component } from "react";

import { ToggleComponent as Toggle } from "smpladminui";

class Example extends Component {
  render() {
    return <Toggle label={"No Action"} danger value={this.state.toggleValue} onToggle={(value) => this.setState({toggleValue})}/>;
  }
}

Props

Card

This component is a simple styled card with header, body and footer. It can be rendered in different variations depending on the props passed to it.

Usage

import React, { Component } from "react";

import { CardComponent as Card } from "smpladminui";

class Example extends Component {
  render() {
    return (
      <Card>
        <h1>UX Science progress experiment.</h1>
      </Card>
    );
  }
}

Props

Dropmenu

This component is a three dots icon which shows a list of options upon hover.

Usage

import React, { Component } from "react";

import { DropmenuComponent as Dropmenu } from "smpladminui";

class Example extends Component {
  render() {
    return <Dropmenu style={{ float: "right" }} />;
  }
}

Props

Icon

This component is a three dots icon which shows a list of options upon hover.

Usage

import React, { Component } from "react";

import { IconComponent as Icon } from "smpladminui";

class Example extends Component {
  render() {
    return <Icon type={"listtype_list"} variant={"grey"} />;
  }
}

Props

Layout

This component is layout component useful for building the main interface of the admin system. It has sidebar with options, header with labels and footer.

Usage

import React, { Component } from "react";

import { LayoutComponent as Layout } from "smpladminui";

class Example extends Component {
  render() {
    return (
      <Layout progress={0}>
        <Page>
          <Wrapper>
            This is my page
            <h1>Title 1 / H1</h1>
            <h2>Title 2 / H2</h2>
            <h3>Title 3 / H3</h3>
            <h4>Title 4 / H4</h4>
            <h5>Title 5 / H5</h5>
            <h6>Title 6 / H6</h6>
          </Wrapper>
        </Page>
      </Layout>
    );
  }
}

Props

Note: Everything that is placed as children inside this component will be rendered inside the body of the layout.

List

This component is a list having header, list of elements and footer. It is useful to represent data in a list format.

Usage

import React, { Component } from "react";

import { ListComponent as List } from "smpladminui";

class Example extends Component {
  render() {
    return <List />;
  }
}

Props

Page

This component is a simple wrapper representing a page in our layout. It has a label and content (children).

Usage

import React, { Component } from "react";

import { PageComponent as Page } from "smpladminui";

class Example extends Component {
  render() {
    return <Page label={"Page label"}>This is my page</Page>;
  }
}

Props

Popup

This component is a popup element with header (with close button), hint line, body and footer. Often used when there is a need to enter data or display a message to the user.

Usage

import React, { Component } from "react";

import { PopupComponent as Popup } from "smpladminui";

class Example extends Component {
  render() {
    return (
      <Popup
        visible={this.state.popupVisible}
        onClose={this.togglePopupVisible}
        footer={
          <React.Fragment>
            <div style={{ width: "100%", textAlign: "left" }}>
              <Button style={{ float: "right" }} danger>
                delete
              </Button>
              <Button
                style={{ float: "right" }}
                onClick={this.togglePopupVisible}
              >
                close
              </Button>
              Updated on
              <br />
              15 Dec 2017
            </div>
          </React.Fragment>
        }
        hint={"This is the hint of the popup"}
      >
        Body of the popup
      </Popup>
    );
  }
}

Props

Wrapper

This component is a simple wrapper component apllying some default styles to the elements inside it like labels, text boxes, titles, buttons etc.

Usage

import React, { Component } from "react";

import { WrapperComponent as Wrapper } from "smpladminui";

class Example extends Component {
  render() {
    return (
      <Wrapper>
        <label>
          This is label
          <input type="text" placeholder="Project name" />
        </label>
        This is inside a wrapper
        <br />
        Don't have an account? Register one <a href="register.html">here</a>
        .
        <hr size="1" noshade="noshade" />
        <h1>Title 1 / H1</h1>
        <h2>Title 2 / H2</h2>
        <h3>Title 3 / H3</h3>
        <h4>Title 4 / H4</h4>
        <h5>Title 5 / H5</h5>
        <h6>Title 6 / H6</h6>
        <button>My Button</button>
      </Wrapper>
    );
  }
}

Props

Thoughts

This is work in progress and we will continue working on this simple collection of elements. If you want to participate in it, please do not hesitate to get involved.

License

MIT © marDonchev