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

| Prop name | Type | Default | Description | | ------------ | :------------------------- | :------- | --------------------------------------------------------------------------------------------------------------------------------------------- | | style | object | {} | Style object to be passed to the rendered button | | label | string | "Button" | This is the label on the button. Note: in case there are children passed to this component, they will be rendered instead. | | disabled | boolean,function or string | none | Renders the button as disabled | | primary | boolean, any | false | Renders the button as primary | | danger | boolean, any | false | Renders the button as danger | | processing | boolean, any | false | Renders the button as processing (with a spinning icon) | | onClick | function | none | Handler for the onClick event of the button |

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

| Prop name | Type | Default | Description | | ------------ | :------------------------- | :------- | --------------------------------------------------------------------------------------------------------------------------------------------- | | style | object | {} | Style object to be passed to the rendered button | | label | string | Empty | This is the label on the toggle. Note: in case there are children passed to this component, they will be rendered instead. | | disabled | boolean,function or string | none | Renders the button as disabled | | primary | boolean, any | false | Renders the button as primary | | danger | boolean, any | false | Renders the button as danger | | processing | boolean, any | false | Renders the button as processing (with a spinning icon) | | onToggle | function | none | Handler for the onToggle event of the component. Returns the value of the toggle (true/false) |

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

| Prop name | Type | Default | Description | | ------------ | -------------------------- | ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | style | object | {} | The style object that will be passed to the rendered card | | type | string | "children" | Sets the style of the card. Options are: children - renders the children inside the bodyfile - renders file type icon inside the bodyimage - renders an image inside the body | | fileType | string | "video_mp4" | The filetype that will be used in case the type is set to file. All the options are: application_pdfapplication_mswordapplication_zipapplication_x_rarapplication_vnd_ms_excelaudio_mpegapplication_vnd_ms_powerpointtext_plainvideo_mp4Note: This list will grow with time | | imageUrl | string | "" | The URL of the image which should be rendered in case the type is set to image | | disabled | boolean,function or string | none | Renders the button as disabled | | primary | boolean, any | false | Renders the button as primary | | danger | boolean, any | false | Renders the button as danger | | processing | boolean, any | false | Renders the button as processing (with a spinning icon) | | header | boolean, string, object | <React.Fragment>Sample Card Header</React.Fragment> | The contents of the header element of the card | | footer | boolean, string, object | *several buttons and a text | The contents of the footer element of the card |

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

| Prop name | Type | Default | Description | | ------------ | -------------------------- | ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | style | object | {} | The style object that will be passed to the rendered element | | disabled | boolean,function or string | none | Renders the button as disabled | | primary | boolean, any | false | Renders the button as primary | | danger | boolean, any | false | Renders the button as danger | | processing | boolean, any | false | Renders the button as processing (with a spinning icon) | | options | array of objects | [{option1},{option2}] | A list of options for the menu. Each object must have the following properties: icon - the Icon component for the optionlabel - the text for the optiononClick - event handler for the click event of that option |

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

| Prop name | Type | Default | Description | | ------------ | -------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | style | object | {} | The style object that will be passed to the rendered element | | disabled | boolean,function or string | none | Renders the icon as disabled | | primary | boolean, any | false | Renders the icon as primary(not yet implemented) | | danger | boolean, any | false | Renders the button as danger (not yet implemented) | | processing | boolean, any | false | Renders the button as processing (with a spinning icon) (not yet implemented) | | type | string | "settings" | Sets the type of the icon. Options are: bookmark_offbookmark_oncollectionsdashboardeditfileslisttype_cardslisttype_listlogoutprojectsettingssettingsstaticstructurethreedots | | variant | string | "grey" | Sets the color of the icon. Options are: greywhite | | onClick | function | none | Handler for the onClick event of the icon |

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

| Prop name | Type | Default | Description | | ----------------- | ---------------- | ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | leftLabel | string | "left Label" | The smaller label on the top of the sidebar | | leftSublabel | string | "Left Sublabel" | The bigger label on the top of the sidebar | | centerLabel | string | "Please login to the system first" | The label on the header of the layout | | centerSublabel | string | "Total of 1,567,234 hits this month" | The sublevel on the header of the layout | | centerRightIcon | Icon component | <Icon type={"logout"} variant={"grey"} /> | The Icon on the top right corner of the header | | centerRightText | string | "Martin D." | The text displayed next to the top right icon on the header | | progress | number | null | Sets the percentage of the progress bar in the header. Values could be 0 - 100. Note: If this is set to null the progress bar will not be displayed | | sidebarElements | array of objects | some default options | An array of objects each of them with the following properties: type (string) - could be either "item" or "section" and will determine whether it's a section title or an itemlabel (string) - the label of the menudescription (string) - the sublabel/description of the menuicon (Icon component) - the icon for the menuselected (boolean) - shows whether the menu should be rendered as selected |

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

| Prop name | Type | Default | Description | | --------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | | style | object | {} | The style object that will be passed to the rendered element | | header | array of strings | ["Name", "Structure", "Updated on", "Actions"] | Sets the header elements (column names) of the list | | footer | object | React.Fragment with several buttons inside | Sets the footer of the list. Could be any element you decide. | | list | array of arrays | [ "UX Science progress experiment with a very very long name that goes on one line for a long line", "Root / All Static Pages", "15 Dec 12:45", <React.Fragment><Button danger style={{ float: "right" }}>delete<Button style={{ float: "right" }}>edit<Icon type={"bookmark_on"} variant={"grey"} style={{ float: "right" }} /></React.Fragment>] | Each element of this array should be an array with the same number of elements like the header elements. Each element will be placed in the proper column. |

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

| Prop name | Type | Default | Description | | -------------- | ------- | ------------ | -------------------------------------------------------------- | | style | object | {} | The style object that will be passed to the rendered element | | label | string | "Page Label" | The label of the page displayed at the top | | stickyHeader | boolean | false | Whether the label should stay sticky to the top when scrolling |

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

| Prop name | Type | Default | Description | | --------- | -------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | style | object | {} | The style object that will be passed to the rendered element | | label | string | "Popup Label" | The label of the popup displayed at the top. Note: You can use any element here like placing an icon before the label. | | hint | string | null | Any text that you want to be displayed as a hint on top of the popup. If the value is null the hint will not be displayed | | type | string | "normal" | Sets the style of the popup. Options are: normal - normal popupmessage - displays the body of the popup bigger in size. Useful in displaying messages | | time | number | 0 | If set (in seconds) will autoclose the popup in the set number of seconds | | footer | object | React.Fragment with two buttons and a text | Sets the footer element of the popup. If set to null it will not be displayed | | onClose | function | none | Event handler for the close function of the popup |

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

| Prop name | Type | Default | Description | | --------- | ------ | ------- | ------------------------------------------------------------ | | style | object | {} | The style object that will be passed to the rendered element |

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