Listo Design System

Le Listo Design System est une bibliothèque de composants UI/UX pour l'application de gestion de la paie Listo Paye.

Liens

Statut Publish to pub.dev & web
WidgetBook design.listo.pro
Pub.dev listo_design_system

Comment Utiliser le Projet

Installation

Pour utiliser le package listo_design_system, ajoutez-le comme dépendance dans votre fichier pubspec.yaml :

dependencies:
  listo_design_system:

Copier cette dépendance telle quelle dans votre fichier pubspec.yaml. L'utilisateur associé n'a que le droit de lecture sur le contenu du repository.

Utiliser le Main Theme

Pour utiliser le thème principal de Listo Design System, ajoutez le widget ListoTheme à votre application :

import 'package:flutter/material.dart';
import 'package:listo_design_system/listo_design_system.dart';

import 'router.dart';

class App extends StatelessWidget {
  App({super.key});

  @override
  Widget build(BuildContext context) {
      return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: F.title,
        theme: ListoDesignSystem.themes.main,
        home: const Scaffold(
          body: Center(
            child: Text('Hello World!'),
          ),
        ),
      );
  }
}

Lancement du Widgetbook

Pour lancer le projet Widgetbook :

  1. Naviguez vers le dossier du design system.
  2. Entrez dans le sous répertoire widgets_demo.
  3. Exécutez la commande flutter run -d chrome.

Libraries

atoms/adaptive/adaptative_dispatcher
atoms/adaptive/adaptive_mdd
atoms/adaptive/adaptive_mdd_navigator
atoms/adaptive/adaptive_module
atoms/adaptive/dashboard_desktop
atoms/alert
atoms/atoms_module
atoms/button
atoms/cards/cards_module
atoms/cards/client_card
atoms/cards/libelle_seul_card
atoms/cards/listo_card
atoms/cards/va_info_card
atoms/checkbox
atoms/form_panel
atoms/inputs/base_input_text
atoms/inputs/input_amount
atoms/inputs/input_text
atoms/inputs/inputs_module
atoms/inputs/text_area
atoms/labels/amount_title
atoms/labels/form_base_labels
atoms/labels/form_key_value_list
atoms/labels/form_label
atoms/labels/form_list
atoms/labels/form_note
atoms/labels/form_period_label
atoms/labels/form_title
atoms/labels/labels_module
atoms/popin
atoms/profil
atoms/progress_bar
atoms/search/search_anchor
atoms/search/search_module
atoms/tag
atoms/title_line
charts/charts_module
charts/chiffre_cle
charts/container
charts/indicator
charts/legend
charts/pie
extensions/context_extensions
extensions/extensions_module
extensions/size_extensions
extensions/widget_extensions
listo_design_system
molecules/affiliations_oc/affiliations_garantie_form
molecules/affiliations_oc/affiliations_oc_module
molecules/affiliations_oc/contrat_oc
molecules/affiliations_oc/contrat_oc_entity
molecules/affiliations_oc/employee
molecules/app_bar/app_bar_module
molecules/app_bar/legacy/app_bar
molecules/app_bar/legacy/profile_submenu_button
molecules/app_bar/logo_app_bar
molecules/app_bar/selection_button
molecules/card_list/card_list
molecules/card_list/card_list_module
molecules/card_list/client_card_v2
molecules/card_list/contracts_selector
molecules/checkbox_with_text
molecules/modals/confirmation_modal
molecules/modals/modals_module
molecules/molecules_module
molecules/navigation_menu/collapse_state
molecules/navigation_menu/destination_data
molecules/notifications/alert_banner
molecules/notifications/notifications_module
molecules/status_service/environment
molecules/status_service/micro_service_status
molecules/table/listo_data_table
molecules/tabs/tabs
molecules/upload/custom_file
molecules/upload/custom_file_wrapper
molecules/upload/file_list
molecules/upload/list_item_download
molecules/upload/upload_area
molecules/upload/upload_button
molecules/upload/upload_config
molecules/upload/upload_controller
molecules/upload/upload_dialog
molecules/upload/upload_module
svg/icon_account
svg/icon_change
svg/speech_bubble
svg/svg_module