react-ui-designed-components v1.3.2

react-ui-designed-components

Some beautiful components that I decided to code

Install

npm install --save react-ui-designed-components

Usage

SideBarTemplate

A component to serve as a template for simple systems. The idea is to have a sidebar and a fixed header around the content. Pure component:

The area where the content will stay (in grey):

Component with content usage example:

import React from 'react'
import { SideBarTemplate } from 'react-ui-designed-components'
import 'react-ui-designed-components/dist/index.css'
const notifyW = require('./icons/notify-w.png')

const fakeMenus = new Array(6).fill({
  key: Math.random(100),
  label: 'Label',
  path: '/path',
  icon: notifyW
})

const App = () => {
  return (
    <SideBarTemplate
      menus={fakeMenus}
      userName={'Ulf Anderson'}
      theme={{ userInfoColor: 'red', theme: 'dark' }}
      maxWidth
    >
      <div
        style={{
          display: 'flex',
          flexWrap: 'wrap',
          width: '100%',
          justifyContent: 'space-around',
          height: '100%'
        }}
      >
        {new Array(20).fill(0).map((_, i) => (
          <div
            key={i}
            style={{
              marginTop: 16,
              width: '22%',
              height: 200,
              background: 'lightgreen'
            }}
          ></div>
        ))}
      </div>
    </SideBarTemplate>
  )
}

Props

Theme Prop

Default:

{
    light: {
      text: 'black',
      textLight: '#9b9a9f',
      primary: 'rgba(0, 84, 240)',
      secondary: '',
      third: '',
      layer1: 'rgba(255,255,255)', //Layer is the default color for items above the background. The InfoCard component's default background color is layer1 to give a feeling of depth
      layer2: '',
      layer3: ''
    },
    dark: {
      text: 'white',
      textLight: '#9b9a9f',
      primary: 'rgba(0, 84, 240)',
      secondary: '',
      third: '',
      layer1: 'rgba(40,39,63)',
      layer2: '',
      layer3: ''
    },
    theme: 'dark',
    darkColor: 'linear-gradient(#1e1e2f,#1e1e24)',
    lightColor: '#f5f6fa',
    userLogoBackground: '#fcc2c8',
    userInfoColor: '#bea5ce'
}

The component colors that are used are in that object. If you want to change from light to dark theme, just change the value of the theme key to dark and vice versa. It can be done for example: <SideBarTemplate {...props} theme={{ userInfoColor: 'red', theme: 'dark' }}> In this case we are changing the color value of the username that is next to the profile picture, and changing the theme to dark.

Menus Prop

The menus property must be an array of objects with this format:

{
  key: Math.random(100),
  label: 'Label',
  path: '/path',
  icon: notifyW
}

• Key: If not passed, the element's index will be used as key.
• Label: The text that the user will read in the sidebar.
• Path: Which url should this menu send to.
• Icon: It can be a string for the icon path, or a custom component/element.

InfoCard

A component to show simple infos with a beautiful style:

Light version:

import React from 'react'
import { InfoCard } from 'react-ui-designed-components'
import 'react-ui-designed-components/dist/index.css'
const icon = require('./icons/icon.png')

const theme = { theme: 'dark' }

const App = () => {
  return (
    <div
      style={{
        display: 'flex',
        flexWrap: 'wrap',
        width: '100%',
        justifyContent: 'space-around',
        height: '100%'
      }}
    >
        {new Array(4).fill(0).map((_, i) => (
          <InfoCard
            title='Valor'
            value='7000'
            subTitle='Just a subtitle'
            theme={theme}
            color={'linear-gradient(to bottom left, #FFE53B, #FF2525)'}
            headerIcon={
              <img
                src={icon}
                style={{ width: 24, height: 24 }}
                alt='icon'
              />
            }
          />
        ))}
        {new Array(4).fill(0).map((_, i) => (
          <InfoCard
            title='Valor'
            value='7000'
            subTitle='Just a subtitle'
            theme={theme}
            color={'linear-gradient(to bottom left, #FFE53B, #FF2525)'}
            withoutFooter
            headerIcon={
              <img
                src={icon}
                style={{ width: 24, height: 24 }}
                alt='icon'
              />
            }
          />
        ))}
    </div>
  )
}

Props

ChartCards

A component to show simple charts with a beautiful style:

import React from 'react'
import {
  SideBarTemplate,
  InfoCard,
  ChartCard
} from 'react-ui-designed-components'
import 'react-ui-designed-components/dist/index.css'
const icon = require('./icons/icon.png')

const { DoughnutChart, BarChart, LineChart, PieChart } = ChartCard

const theme = { theme: 'dark' }

const App = () => {
  const dataDoughnut = (canvas) => {
    return {
      labels: ['Feijao', 'Arroz', 'Carne', 'Vinho', 'Ovo', 'Leite'],
      datasets: [
        {
          // label: 'Dataset 1',
          data: [19, 20, 44, 33, 12],
          backgroundColor: [
            'rgba(255, 99, 132, 0.6)',
            'rgba(54, 162, 235, 0.6)',
            'rgba(255, 206, 86, 0.6)',
            'rgba(75, 192, 192, 0.6)',
            'rgba(153, 102, 255, 0.6)',
            'rgba(255, 159, 64, 0.6)'
          ],
          borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
          ],
          borderWidth: 0.5
        }
      ]
    }
  }

  const dataLine = (canvas) => {
    const ctx = canvas.getContext('2d')
    const gradient = ctx.createLinearGradient(0, 300, 0, 0)
    gradient.addColorStop(0, '#ff638400')
    gradient.addColorStop(0.1, '#ff638400')
    gradient.addColorStop(0.2, '#ff638400')
    gradient.addColorStop(0.3, '#ff638400')
    gradient.addColorStop(0.4, '#ff638420')
    gradient.addColorStop(0.5, '#ff638430')
    gradient.addColorStop(0.6, '#ff638440')
    gradient.addColorStop(0.7, '#ff638450')
    gradient.addColorStop(0.8, '#ff638450')
    gradient.addColorStop(0.9, '#ff638450')
    gradient.addColorStop(1, '#ff638450')

    return {
      labels: ['Feijao', 'Arroz', 'Carne', 'Vinho', 'Ovo'],
      datasets: [
        {
          // label: 'Dataset 1',
          data: [19, 20, 44, 33, 12],
          backgroundColor: gradient,
          borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
          ],
          fill: true,
          tension: 0.4,
          borderWidth: 0.5
        }
      ]
    }
  }

  const dataBar = dataDoughnut

  return (
    <SideBarTemplate userName={'Ulf Anderson'} theme={theme} maxWidth>
      <div
        style={{
          display: 'flex',
          flexWrap: 'wrap',
          width: '100%',
          justifyContent: 'space-around',
          height: '100%'
        }}
      >
        <DoughnutChart
          title='Vendas por item'
          value='7000'
          data={dataDoughnut}
          width='30%'
          theme={theme}
          valueIcon={icon}
        />
        <BarChart
          title='Vendas por item'
          value='7000'
          data={dataBar}
          width='30%'
          theme={theme}
          valueIcon={icon}
        />
        <PieChart
          title='Vendas por item'
          value='7000'
          data={dataBar}
          width='30%'
          theme={theme}
          valueIcon={icon}
        />
        <BarChart
          title='Vendas por item'
          value='7000'
          data={dataBar}
          width='47%'
          horizontal
          height={250}
          theme={theme}
          valueIcon={icon}
        />
        <LineChart
          title='Vendas por item'
          value='7000'
          data={dataLine}
          width='47%'
          height={250}
          theme={theme}
          valueIcon={icon}
        />
      </div>
    </SideBarTemplate>
  )
}

Props

License

MIT © HenriqueRamos13