Olympe Interface

L'Interface Olympe est une librairire contenenant des modules, fonctions et ressources nécessaires à la création d'une instance d'Interface administrateur.

Installation

Le paquet est disponible sur NPM au nom de dv-olympe. Procéder comme suit pour l'utiliser :

  cd my-project
  npm install dv-olympe

Exemple d'utilisation

import { Olympe } from 'dv-olympe';

function App() {
  return <Olympe.Loader />;
} // Print Logo loader

function App() {
  return (
    <p style={{ color: Olympe.Color.primary}}>
      Hello World
    </p>)
  ;
} // Get color from Olympe

Modifier Olympe

Pour modifier le code source :

• Cloner le repo
• Executer les commandes

  npm install --save-dev @babel/core @babel/cli @babel/preset-env
  npm install -save @babel/polyfill   

🛠 Skills

Javascript, HTML, React, ES6...

Authors

• @damien-vergobbi

Documentation

Accessible depuis Olympe : | Name | Paramètres| Description | | ----------------- | --|------------------------------------------------------------------ | | Color | - | Liste des couleurs principales et logo. | | Interface | MainContext, ListItem | Principale interface. | | Wrapper | horizontal, centered | Conteneur de type page. | | SubItem | - | Item à insérer dans un Wrapper. | | LoginPage | - | Page de connexion. | | Fade | - | Composant animé d'une fondue. | | Chart | title, subtitle, chart, chartTitle, chartLegend, large | Conteneur de type item pour un graphique. | | GlobalStyles | - | Styles par défaut, à mettre au début du programme. | | ErrorPage | e.status, e.statusText | Page d'erreur, e est l'erreur. | | Tooltips | title, placement, notSpan, classes | Tooltips customisé. | | Item | - | Item par défaut | | ItemTitle | - | Titre de type h2 pour item. | | ItemChart | - | Item pour un graphique. | | ItemFullWidth | - | Item qui prend toute la largeur de son parent. | | ItemWithAvatar | - | Item avec une image sur la partie droite. | | Loader | text, show | Chargement avec Logo. | | MiniLoader | - | Petit chargement en rond. | | WrapPdf | - | Conteneur pour afficher un PDF (plus grand). | | Modal | title, content, loading, buttons, verifTxt, open, onClose, closeOnDocumentClick| Composant modal. |

Accessible depuis Olympe.List : | Name | Paramètres| Description | | ----------------- | --|------------------------------------------------------------------ | | Table | id, name, tableTitle, buttonLabel, buttonIcon, loading, colums, datas, handleSearch, search, placeholder, onClickRow, onClickBtn, sortAsc, sortId, forceButton | Composant table avec tableau. | | Menu | label, handleSearch, search, placeholder, content, uri, children, btnFct, btnIcon, btnTitle | Composant table avec liste. |

Accessible depuis Olympe.Table : | Name | Paramètres| Description | | ----------------- | --|------------------------------------------------------------------ | | Wrap | - | Styles customisés pour un react-data-table-component | | Empty | - | Styles customisés pour un tableau vide. | | Style | - | Styles customisés pour le thème d'un tableau. | | Pagination | - | Composant personnalisé pour la pagination des tableaux. | | Theme | - | Thème customisé pour un tableau.|

Accessible depuis Olympe.Input : | Name | Paramètres| Description | | ----------------- | --|------------------------------------------------------------------ | | Text | - | Champ de type text basic | | FormFile | - | Wrapper pour Olympe.Input.File. | | File | - | Champ de type text pour un formulaire de fichier. |

Accessible depuis Olympe.Button : | Name | Paramètres| Description | | ----------------- | --|------------------------------------------------------------------ | | Basic | toExecute, label, icon, anim, type | Bouton de base. | | FilePick | - | Styles customisés pour un champ de type file. | | FileUpload | - | Styles customisés pour un champ de type file non vide. | | FileCancel | - | Styles customisés pour l'annulation d'un fichier. |

Accessible depuis Olympe.Utils : | Name | Paramètres| Description | | ----------------- | --|------------------------------------------------------------------ | | renderHTML | rawHTML, classes | HTML code vers React, avec classes personnalisées. | | appHeight | - | Retourne la hauteur de l'écran. | | numberShorter | number | Transforme un nombre : 1000 => 1k | stringUpper | str | Retourne la chaine avec le premier caractère en majuscules. | | SentLogTime | lastSeenString, short | Retourne une durée depuis une date. | | AvatarSvg | seed | Retourne un avatar depuis une chaîne de caractères. | | AvatarSvgHtml | seed | Retourne un avatar dans un élément HTML depuis une chaîne de caractères. | | truncStr | str, len | Coupe une chaîne de caractère dans la longueur précisée. | | getFileSize | bytes | Retourne une chaîne de caractères depuis un nombre de bytes. | | enterInput | e | Arrête la propagation de la touche Entrer. | | downloadCSV | datas, filename | Transforme un tableau en fichier CSV. | | useWindowSize | - | Capture le changement de taille de fenêtre. |