Customized UI kit and helpers for ADB Team projects

Usage no npm install needed!

<script type="module">
  import adbDevAdbTools from 'https://cdn.skypack.dev/@adb-dev/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


npm run storybook

Storybook view

📄 Documentation



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


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)


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)


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


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



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()


Property Description Type Default
data Data fields array


Property Description Type Default
data Data groups fields array
dataIsLoading Loading state boolean false
onCreateCustomGroup() Callback function function()
onCreateCustomField() Callback function function()
onCustomGroupChange() Callback function function()
onDeleteField() Callback function function()
onCustomFieldOrderChange() Callback function function()
onDeleteGroup() Callback function function()
onCustomGroupOrderChange() Callback function function()
society Loading state object


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



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


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



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



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


Property Description Type Default
tel phone number string req


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



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