ADB-Tools

Customized UI kit and helpers for ADB Team projects

📦 Install

npm install @adb-dev/adb-tools

yarn add @adb-dev/adb-tools

🔨 Usage

import { ColorPicker } from "@adb-dev/adb-tools";

const App = () => <ColorPicker />;

Import component into project

Storybook

npm run storybook

Storybook view

📄 Documentation

COMPONENTS

AdresseAutoComplete

Property	Description	Type	Default
placeholder	Default value	string	'Rechercher une adresse'
onSearch	Return json result	function()
onChange	Return street	function()

<script src="https://maps.googleapis.com/maps/api/js?key={YOUR_KEY}&libraries=places"></script>

import google script with api key on your project

CheckboxGroup

Property	Description	Type	Default
checkAllOption	Default color value	boolean	false
data	Data array	array req	null
onCheckboxAllChange	Callback function	function()
onCheckboxChange	Callback function	function()
propertyCheck	Wich data set if checked	string	'checked'
textColor	Label color	string	(antd default color)

Checkbox

Property	Description	Type	Default
checked	Checked state	boolean	true
color	Set the default color value	string	(black)
indeterminate	Indeterminate check	boolean	false
label	Label text	string
onChange	Callback function	function()
textColor	Label color	string	(black)

ColorPicker

Property	Description	Type	Default
colors	Selection of colors	array	['#1896AB', ...'#7f8c8d']
onChange	Return new hex color value	function()
value	Default color value	string	'#31B8BC'

ColumnAction

Property	Description	Type	Default
title	popup title	string	'Voulez vous continuer ?'
onOk()	Callback function	function()
title	popup title	string	'Voulez vous continuer ?'

https://ant.design/components/tooltip/#API

GroupsFields

Property	Description	Type	Default
fieldsGroups	Groups fields	array
fieldsGroupsIsLoading	Loading state	boolean
data	Data groups fields	array
dataIsLoading	Loading state	boolean
society	Society data	object
onDataOk	Callback function	function()

format

data : {
    id: 1,
    index: 1,
    name: "Groupe 1",
    fields: [
      { id: 1, name: "Item 1", type: "string" },
      { id: 2, name: "Item 2", type: "integer" },
      { id: 3, name: "Item 3", type: "boolean" },
    ],
},

GroupsFieldsCard

Property	Description	Type	Default
data	Data fields	array

format

data : {
    name: "Nom 1",
    fields : {
        id: 1,
        index: 1,
        name: "Groupe 1",
        fields: [
        { id: 1, name: "Item 1", type: "string" },
        { id: 2, name: "Item 2", type: "integer" },
        { id: 3, name: "Item 3", type: "boolean" },
        ],
    },
}

GroupsFieldsEditor

Property	Description	Type	Default
data	Data groups fields	array
dataIsLoading	Loading state	boolean	false
onCreateGroup()	Callback function	function()
onCreateField()	Callback function	function()
onGroupChange()	Callback function	function()
onDeleteField()	Callback function	function()
onFieldOrderChange()	Callback function	function()
onDeleteGroup()	Callback function	function()
onGroupOrderChange()	Callback function	function()
society	Loading state	object

CustomTable

Property	Description	Type	Default
columns	Columns of table	array	null
dataSource	Table data	array
draggable	Define if column is draggable	boolean	false
placeHolder	Placeholder search	string	"Rechercher"
onClickRow()	Row Click handler	function()
onSearch()	Search handler	function()
rowPointer	Pointer cursor on row hover	boolean	false
searchBar	Enable/Disable the search bar	boolean	false
selectedRow	Highlight selected row	boolean	false

if draggable : each item should have a index value

https://ant.design/components/table/#API

Email

Property	Description	Type	Default
data	Data for used email model	object	null
title	Email subject	string	null

HelpPopover

Property	Description	Type	Default
children	Popover element
content	Popover content
color	Icon color	string

https://ant.design/components/popover/

SearchSelect

Property	Description	Type	Default
data	data option	array	false
type	data type	contact	default

https://ant.design/components/select/#API

Status

Property	Description	Type	Default
correctText	Tooltip correct text	string	'Disponible'
failText	Tooltip fail Text	string	'Indisponible'
label	Label	string	'Status'
loadingText	Tooltip loading Text	string	'Requête en cours'
status	Status	boolean

Telephone

Property	Description	Type	Default
tel	phone number	string req

Uploader

Property	Description	Type	Default
data	Uploaded files	array req
message	Drag & drop input text	string	"Cliquer ou déposer un fichier ici"
onDelete()	Callback function for delete a file	function()
onUpload()	Callback function for upload a file	function()
societyId	Save document with this Society id	integer req
url	Specific url	string	process.env.REACT_APP_URL

https://ant.design/components/upload

FUNCTIONS

Name	Parameter	Return Type
isADB()	loggedUser	boolean
isLoggedUser()	loggedUser, id	boolean
isSuperAdmin()	loggedUser	boolean
isAdmin()	loggedUser	boolean
sortByName()	a, b
sortByNumber()	a, b
sortByDate()	a, b
sortByIndex()	a, b
sortArrayByDate()	array
getContactData()	contact	object

⌨️ Development

Clone locally package project from git server Then use npm commands instead of yarn

npm install

init the package project

✅ Test

npm run prepare

build the project in dist folder

npm link

save as global the package build

On another project :

npm link @adb-dev/adb-tools

load the global package build, for test it before publish prepublish + restart project for refresh package link

On another project :

npm unlink --no-save @adb-dev/adb-tools

On @adb-dev/adb-tools package project :

npm unlink

remove package link

📤 Publication

npm publish --access public

publish on npmjs.com