CONECTE-SE Component Library ReactJS

The purpose of the @conecte-se/ui-components-reactjs library is to help teams design and build products quickly and consistently. The library provides a collection of reusable components, guided by patterns in the design system.​

Usage

Install

npm install --save @conecte-se/ui-components-reactjs

Usage component

import React from 'react'

// imports to use the lib
import '@conecte-se/ui-components-reactjs/dist/index.css'
// import to use the custom datepicker and input range
import '@conecte-se/ui-components-reactjs/src/styles/theme/external_lib_themes.scss'

import { Button } from '@conecte-se/ui-components-reactjs'

const ButtonExample = () => {
  return <Button>button text</Button>
}

Usage utils (spacing and visibility)

import React, { useState } from 'react'

import '@conecte-se/ui-components-reactjs/src/styles/utils.scss'

const App = () => {
  return (
    <div>
      // m, mt, ml, mb and mr (0 to 5)
      <div className="mt-5">Margin</div>
      // p, pt, pl, pb and pr (0 to 5)
      <div className="pt-5">Padding</div>
      // width and height (%): 0, 25, 50, 75 and 100
      <div className="w-100 h-100">Width and Height</div>
      // visible and invisible (based on visibility property)
      <div className="visible">Visible</div>
      // display-visible and display-invisible (based on display property)
      <div className="display-visible">Display visible</div>
    </div>
  )
}

Usage theme

import React, { useState } from 'react'

// import the theme and the component used to change it
import { Button, useTheme } from '@conecte-se/ui-components-reactjs'

const App = () => {
  const [theme, setTheme] = useTheme()
  const [operationTheme, setOperationTheme] = useState(theme === 'dark')

  const changeThemeMode = (localTheme) => {
    setTheme(localTheme ? 'dark' : 'light')
    setOperationTheme(localTheme)
  }

  return (
    <Button
      ghost
      onClick={() => {
        changeThemeMode(!operationTheme)
      }}
    >
      {theme}
    </Button>
  )
}

Note: the theme will be stored in the browser's local storage.

License

MIT License