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

| Property | Type | Default | Description | | :-------- | :------- | :------- | :------------------------- | | onClick? | function | - | Event click of button | | color? | string | blue | 'blue', 'blue-outlined', 'red', 'red-outlined', 'black', 'black-outlined'| | extraStyles? | CSSProperties | - | Additional CSS for input | | ...props | { ...props } | - | Any props for input |

Card

Props

| Property | Type | Default | Description | | :-------- | :------- | :------- | :------------------------- | | variant? | string | floating | 'floating', 'flat', 'dropdown'| | extraStyles? | CSSProperties | - | Additional CSS for input |

Modal

Modal base props

| Property | Type | Default | Description | | :-------- | :------- | :------- | :------------------------- | | setIsOpen | function | - | Function to set the modal state | | isOpen | boolean | - | Current state of modal | | width? | string | 700px | Modal width |

Modal header props

| Property | Type | Default | Description | | :-------- | :------- | :------- | :------------------------- | | setIsOpen | function | - | Function to set the modal state | | title? | string | - | Modal title |

Modal footer props

| Property | Type | Default | Description | | :-------- | :------- | :------- | :------------------------- | | handleCancel? | function | - | Function to close the modal | | handleDelete? | function | - | Function to delete data | | handleConfirm? | function | - | Function to save data | | confirmButtonContent? | ReactNode | - | Content of confirm button | | align? | string | right | 'right', 'left', 'center', 'space-between', 'space-around' | extraStyles? | CSSProperties | - | Additional CSS for input |

Dropdown

Props

| Property | Type | Default | Description | | :-------- | :------- | :------- | :------------------------- | | toggle | React Node | - | Something to render inside a toggle button | | right? | string | - | Distance of the right | | dropType? | string | generic | 'menu', 'generic' | | extraDropdownStyles? | CSSProperties | - | Additional CSS for dropdown | | extraToggleStyles? | CSSProperties | - | Additional CSS for toggle |

Table

Table Props

| Property | Type | Default | Description | | :-------- | :------- | :------- | :------------------------- | | columns | any[] | - | Array of React Table columns | | data | any[] | - | Array of data from backend | | loading? | boolean | false | Content loading | | loadingComponent? | ReactNode | null | React component to render while loading | | noDataComponent? | ReactNode | null | React component to render when non exists data | | showGenericFilter? | boolean | false | Renders an input that will filter all table columns | | hiddenColumns? | string[] | ['id'] | Columns that will not be rendered |

Table Pagination Props

| Property | Type | Default | Description | | :-------- | :------- | :------- | :------------------------- | | page | number | - | Current page | | setPage | function | - | Set current page | | limit | number | - | Size of registers per page | | setLimit | function | - | Set the size of registers per page | | totalItems | number | - | Total registers | | rowsPerPageOptions | number[] | [5, 10, 25, 50] | Options of size per page | | maxPageItems | number | - | Max of options to change current page | | hideFirstAndLastButtons? | boolean | false | Hide pagination buttons | | hidePreviousAndNextButtons? | boolean | false | Hide pagination buttons | | loading? | boolean | false | Content loading | | loadingComponent? | ReactNode | null | React component to render while loading |

Filter Buttons

Props

| Property | Type | Default | Description | | :-------- | :------- | :------- | :------------------------- | | handleClearFilter | function | - | Clear filter button | | handleFilter | string | - | Filter button | | disabled? | boolean | - | Disable filter button |

ActionsColumns

Props

| Property | Type | Default | Description | | :-------- | :------- | :------- | :------------------------- | | hideEdit? | boolean | false | Hidden edit button | | hideDelete? | boolean | false | Hidden delete button | | extraActions? | IExtraActions[] | - | Extra buttons to actions column | | onClickEdit | function | - | Function to edit button | | onClickDelete | function | - | Function to delete button |

BasePage

Props

| Property | Type | Default | Description | | :-------- | :------- | :------- | :------------------------- | | titleHeader | string | - | Title of page | | buttonHeaderContent? | ReactNode | - | Button content in the header | | setOpenAddCrudModal? | function | - | Function for button in the header |

CrudFeedback

Props

| Property | Type | Default | Description | | :-------- | :------- | :------- | :------------------------- | | loading | boolean | - | Loading state of crud | | status | 'success', 'error', '' | - | Status of crud | | message | string | - | Message of crud |

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

| Property | Type | Default | Description | | :-------- | :------- | :------- | :------------------------- | | menuType? | string | top | 'top', 'aside' | | pathname | string | - | Current route path | | logoComponent | React Node | - | Component for logo | | menu | IMenu[] | - | Array of items for menu | | actions | IAction[] | - | Array of action items for menu | | actionsMobile | IActionsMobile[] | - | Array of action items for mobile | | profile | IProfile | - | Dropdown profile | | canvasMenu | IMenuCanvas | - | Component to render canvas menu (aside menu) |

Canvas props (IMenuCanvas)

| Property | Type | Default | Description | | :-------- | :------- | :------- | :------------------------- | | pathname | string | - | Current route path | | menuLink? | IMenuLink[] | - | Array of link items for menu | | menuExpansible? | IMenu[] | - | Array of expansible items for menu | | configs? | IAction[] | - | Array of configs for menu |

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
}