@adb-dev/adb-tools

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';
</script>

README

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

CustomGroupsFields

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

CustomGroupsFieldsCard

Property Description Type Default
data Data fields array

CustomGroupsFieldsEditor

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

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

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