devyx-ui v2.2.4

Devyx UI 🧱

Our personal React components for web applications.

Installation

You can install with:

yarn add devyx-ui

or

npm install devyx-ui

Usage/Example

import { Button } from 'devyx-ui';

function App() {
  return <Button onClick={() => console.log('Something')}>Click me</Button>
}

Components

Inputs

Normal, currency, mask, date, file, select, searchable select, checkbox and switch inputs

• Normal, currency, mask (Input)

  Props

  Property	Type	Default	Description
  name?	string	test	Input name
  label?	string	-	Label for input
  formAttributes?	Formik instance	-	Instance of Formik form
  extraStyles?	CSSProperties	-	Extra styles for input
  inpuType?	string	normal	'normal', 'currency', 'mask'
  maximumFractionDigits?	number	2	Configuration for currency input
  mask?	string	-	mask for inpuType = 'mask'
  hint?	string	-	Help text for input
  ...props	{ ...props }	-	Any props for input

• DateInput

  Props

  Property	Type	Default	Description
  name?	string	test	Input name
  label?	string	-	Label for input
  formAttributes?	Formik instance	-	Instance of Formik form
  extraStyles?	CSSProperties	-	Extra styles for input
  hint	string	-	Help text for input
  ...props	{ ...props }	-	Any props for input

• FileInput

  Props

  Property	Type	Default	Description
  handleChange?	function	-	Receives the event from input
  acceptedExtensions?	string	-	Accepted files extensions
  backgroundColor?	string	#3699ff	Background color of input
  textColor?	string	#fff	Color of icon & text
  label?	string	-	Label of input
  text?	string	Selecione um arquivo	Text of input
  extraStyles?	CSSProperties	-	Additional CSS for input
  extraContainerStyles?	CSSProperties	-	Additional CSS for container input
  hint	string	-	Help text for input
  ...props	{ ...props }	-	Any props for input

• Select

  Props

  Property	Type	Default	Description
  name?	string	test	Select name
  label?	string	-	Label for select
  value?	string	-	Current value of select
  formAttributes?	Formik instance	-	Instance of Formik form
  extraStyles?	CSSProperties	-	Extra styles for select
  hint	string	-	Help text for input
  ...props	{ ...props }	-	Any props for input and SelectProps (https://react-select.com/props#select-props)

• SearchableSelect

  Props

  Property	Type	Default	Description
  name?	string	test	Select name
  label?	string	-	Label for select
  value?	string	-	Current value of select
  formAttributes?	Formik instance	-	Instance of Formik form
  onSearchNewOption?	Function	-	(inputValue: string) => void
  extraStyles?	CSSProperties	-	Extra styles for select
  hint	string	-	Help text for input
  ...props	{ ...props }	-	Any props for input and CreatableProps (https://react-select.com/props#creatable-props)

• Checkbox

  Props

  Property	Type	Default	Description
  name?	string	test	Checkbox name
  onChange?	function	-	Checkbox onChange function
  label?	string	-	Label for checkbox
  checked	boolean	-	State of checkbox
  extraStyles?	CSSProperties	-	Extra styles for checkbox
  ...props	{ ...props }	-	Any props for checkbox

• Switch

  Props

  Property	Type	Default	Description
  name?	string	test	Switch name
  onChange?	function	-	Switch onChange function
  label?	string	-	Label for switch
  labelOrientation?	string	right	at left or at right of switch
  checked	boolean	-	State of switch
  extraStyles?	CSSProperties	-	Extra styles for switch
  ...props	{ ...props }	-	Any props for switch

Button

Props

Card

Props

Modal

Modal base props

Modal header props

Modal footer props

Dropdown

Props

Table

Table Props

Table Pagination Props

Filter Buttons

Props

ActionsColumns

Props

BasePage

Props

CrudFeedback

Props

ColumnFormatters

Generic formatters for columns in tables

• Status

  Props

  Property	Type	Default	Description
  value	boolean	-	Value of status
  type?	string	table	'table', 'notification'
  tableText?	{ true: string, false: string }	{ true: Ativo, false: Inativo }	Text of status column

• Document

  Props

  Property	Type	Default	Description
  value	string	-	Value of document

• Phone

  Props

  Property	Type	Default	Description
  value	string	-	Value of phone number

• Currency

  Props

  Property	Type	Default	Description
  value	number	-	Value of status
  maximumFractionDigits?	number	2	Número de casas após a vírgula

Header

Header props

Canvas props (IMenuCanvas)

Interfaces

interface IMenu {
  type: 'link' | 'dropdown';          // Menu orientation
  urlToShowActive: string;            // URL to highlight current menu item
  menuItem: ReactNode;                // Component to render as a menu item
}

interface IAction {
  id: string;
  actionItem: ReactNode;              // Component to render as an action item
}

interface IActionsMobile {
  id: string;
  actionItem: ReactNode;              // Component to render as an action mobile
}

interface IProfile {
  id: string;
  profileItem: ReactNode;             // Component to render as a dropdown profile
}

interface IMenuLink {
  urlToShowActive: string;            // URL to highlight current menu item
  menuItem: ReactNode;                // Component to render as a menu link
}

interface IMenuExpansible {
  id: string;
  urlToShowActive: string;            // URL to highlight current menu item
  title: string;                      // Menu title
  icon?: ReactNode;                   // Menu icon
  expansiveItens: IExpansibleItem[];
}

interface IExpansibleItem {
  id: string;
  menuItem: ReactNode;                // Component to render as a menu expansible
  urlToShowActive: string;            // URL to highlight current menu item
}

interface IConfig {
  id: string;
  configItem: ReactNode;              // Component to render as a config item
  urlToShowActive: string;            // URL to highlight current menu item
}

interface IExtraActions {
  onClickAction?: () => void;         // Function for button 
  icon: React.ReactNode;              // Icon for button
  backgroundColor?: string;           // Background button color
  tooltip: string;                    // Help text for button
}