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

| Prop | Type | Default | Note | | ------------- | ------------- | ------------- | ------------- | | theme | object | | Base theme for component design. Colors and theme type. See the next section to better understand this property | | menus | array | [] | Array of json indicating which menus should be built in the sidebar | | maxWidth | bool | false | Defines if the layout will grow with the user's screen or if it will have a maximum limit. | | onClickOption | func | | Function called when a click on the sidebar button happens. It is only called when the navigator property is null | | navigator | func, any | | Main function/object of libraries like react-navigation. Pass the navigator and the navigator.push(path) function will automatically run when a sidebar button is clicked | | userName | string | null | Text on the left side of the user photo | | customSidebarHeader | func, element | | Custom header for the sidebar | | customSidebarFooter | func, element | | Custom footer for the sidebar | | customFooter | func, element | | Custom footer for the template | | profileIcon | func, element, string | | Url/Component for User Photo | | mobileLogo | func, element | | Component for logo icon in mobile version |

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

| Prop | Type | Default | Note | | ------------- | ------------- | ------------- | ------------- | | color | string | | A string containing the color of the circle around the icon in the header | | title | string | | The smallest text in the header | | subTitle | string | | Text that stays in the footer | | value | string | | The largest text in the header | | withoutFooter | bool | false | Boolean value that defines whether the card will have footer or not | | footerIcon | func, element | | Component that defines the footer icon | | headerIcon | func, element | | Component that defines the header icon |

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

| Prop | Type | Default | Note | | ------------- | ------------- | ------------- | ------------- | | positionLabels | string | | Position for labels one of "bottom, top, left, right, chartArea" | | height | string | | Graph height. This prop change Card height too | | title | string | | First text in card header | | value | string | | Second text in card header | | width | string | false | Card width | | style | object | | Style for a first parent element | | chartOptions | object | | Options for chartjs | | horizontal | bool | false | For bar chart be horizontal | | labels | array | | Array of labels | | data | object | | Data of chart. Read Chartjs-2 documentation | | valueIcon | func, element | | Icon in left of value text |

License

MIT © HenriqueRamos13