@warleysouza/devcin-react NPM

DevCIn components package for react apps

Technologies:

Project setup

npm config set -- '//gitlab.cin.ufpe.br/api/v4/projects/558/packages/npm/:_authToken=<your-Personal-Access-Token>'
npm config set -- '@devcin:registry=https://gitlab.cin.ufpe.br/api/v4/projects/558/packages/npm/'
npm install

Compiles and hot-reloads for development

npm run storybook

Compiles and minifies for publishing

npm run build-lib

Customize configuration

See Configuration Reference.

Components

Installation

npm i @devcin/devcin-react

Using

Import components individually where you want to use them

import React from 'react'
import { CinNavbar } from '@devcin/devcin-react'

export const App = () => {
  return <CinNavbar />
}

CinNavbar

Navbar component. Uses a side menu for navigation that can be toggled with a hamburger menu.

Prop List

Name	Type	Required	Default Value	Description
haveSearchBar	Boolean	No	false	Control the search bar rendering
searchDropdownLabelsList	Array of strings	No	[]	List of fields that can be searched using the search bar drop down
searchFunction	Function	No	() => {}	Search bar function. Receive the search string as a parameter. If using the search drop down feature, must accept search strings in format: "field1:(value) field2:(value)"
logoutFunction	Function	No	() => {}	Function that is triggered when user click on the logout button in the user popup menu
user	User (Object)	No	name: "User Display Name", email: "username@example.com"	Populates the user popup menu with information about the current user.
sideMenuLinks	Array of SideMenuLink (Object)	No	title: "Home", href: "/"	Populates the side menu with links of your application. If project uses vue-router then uses router-link instead of default html anchor tag.
customSideMenu	Boolean	No	false	If you want to use a custom side menu instead, you need enable this prop and pass the components using Vue slots
isLandingPage	Boolean	No	false	Change layout of navbar to one containing only CIn Logo and the user icon button
systemsList	Array of System (Object)	No	[]	Populates the systems menu popup with links to related external applications
currentSystemIconUrl	String	No	none	Icon of the current application
children	JSX.Element	No	none	Custom side menu content

Interfaces of props

interface User {
  name: string
  email: string
  profilePictureUrl?: string
  positions?: Position[]
}

interface Position {
  id: number
  name: string
  roles?: Role[]
}

interface Role {
  id: number
  name: string
  description: string
}

interface link {
  title: string
  href?: string
  external?: boolean
}

interface SideMenuLink extends link {
  iconUrl?: string
  children?: link[]
}

interface System {
  title: string
  iconUrl: string
  description: string
  href: string
}

CinInput

Basic input component.

Prop List

Name	Type	Required	Default Value	Description
type	String	No	"text"	Support for basic html input types (ex. text, email, password)
placeholder	String	No	""	Text to exhibit when input is empty
required	Boolean	No	false	Input need to be filled before submit
disabled	Boolean	No	false	Disables input
readonly	Boolean	No	false	Turn input into read only
value	String	Yes	none	Input value
setValue	React.Dispatch<React.SetStateAction>	Yes	none	useState hook function. Set the value variable

Custom style

You can use the bellow css selector to customize the style of the input component

.cin-component-react.cin-input-react.custom-style {
  font-size: 2rem;
}

CinSelectInput

Basic select input component.

Prop List

Name	Type	Required	Default Value	Description
options	Array of Option (Object)	Yes	[]	Fill the select input with options
placeholder	String	No	none	Text to exhibit when input is empty
required	Boolean	No	false	Input need to be filled before submit
disabled	Boolean	No	false	Disables input
value	String	Yes	none	Input value
setValue	React.Dispatch<React.SetStateAction>	Yes	none	useState hook function. Set the value variable

Interfaces of Props

interface Option {
  value: string
  text: string
}

Custom style

You can use the bellow css selector to customize the style of the input component

.cin-component-react.cin-select-input-react.custom-style {
  font-size: 2rem;
}

CinButton

Button component. Can pass content via the children prop.

Props List

Name	Type	Required	Default Value	Description
type	"button" \| "submit" \| "reset"	No	"button"	Support for basic html button types (ex. button, submit)
children	JSX.Element \| String	Yes	none	Button content. You can use vue slots instead (leave this prop empty when using slots)
style	React.CSSProperties	No	none	Pass styles to the button component

Custom style

You can use the bellow css selector to customize the style of the button component

.cin-component-react.cin-button-react.custom-style {
  font-size: 2rem;

  background: black;
}

CinImageInput

Image input component. User can select a image from their computer and the input auto updates itself with the selected image.

Props List

Name	Type	Required	Default Value	Description
id	String	Yes	none	Id to bind the label to the image input
required	Boolean	No	false	Input need to be filled before submit
disabled	Boolean	No	false	Disables input
file	File	No	none	Image file to be pre-loaded on the input Component
setFile	React.Dispatch<React.SetStateAction>	Yes	none	useState hook function to save the input imaged

CinDialog

Dialog Component. User can select a dialog among the four types: information, alert, decision and confirmation.

Props List

Name	Type	Required	Default Value	Description
type	String	Yes	none	Type of dialog (information, alert, decision or confirmation)
title	String	Yes	none	Title of dialog
children	JSX.Element	Yes	none	Dialog description
visibility	Boolean	Yes	false	Visibility of dialog
setVisibility	React.Dispatch<React.SetStateAction>	Yes	none	Method to change the state of Dialog's visibility
acceptLabel	String	No	Ok	label of accept button on confirm dialog
rejectLabel	String	No	Cancelar	label of reject button on confirm dialog
acceptFunction	Function	No	() => void	function that is invoke when accept button is pressed
rejectFunction	Function	No	() => void	function that is invoke when reject button is pressed

@material-ui/core jquery postcss primeicons primereact react-transition-group styled-components

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago