smpladminui

SimpleAdmin UI React Components Library

Usage no npm install needed!

<script type="module">
  import smpladminui from 'https://cdn.skypack.dev/smpladminui';
</script>

README

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.

NPM JavaScript Style Guide

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.

Button Component

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.

Toggle Component

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.

Card Component

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 body
  • file - renders file type icon inside the body
  • image - 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_pdf
  • application_msword
  • application_zip
  • application_x_rar
  • application_vnd_ms_excel
  • audio_mpeg
  • application_vnd_ms_powerpoint
  • text_plain
  • video_mp4
Note: 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.

Dropmenu Component

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 option
  • label - the text for the option
  • onClick - 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.

Icon Component

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_off
  • bookmark_on
  • collections
  • dashboard
  • edit
  • files
  • listtype_cards
  • listtype_list
  • logout
  • projectsettings
  • settings
  • static
  • structure
  • threedots
variant string "grey" Sets the color of the icon. Options are:
  • grey
  • white
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.

Layout Component

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 item
  • label (string) - the label of the menu
  • description (string) - the sublabel/description of the menu
  • icon (Icon component) - the icon for the menu
  • selected (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.

List Component

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).

Page Component

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.

Popup Component

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 popup
  • message - 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.

Wrapper Component

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