codegouv-web-poc's People
codegouv-web-poc's Issues
Mettre en place la documentation (guides, faq et forum)
Ajouter i18n
Permettre à l'utilisateur de s'authentifier sur code.gouv.fr
Permettre à l'utilisateur de s'authentifier sur code.gouv.fr en prenant en compte les spécifications suivantes :
- Authentification via email/MDP ou AgentConnect
- SSO code.gouv.fr/sill/forum
Mettre à jour l'API suite aux évolutions
Bloqué par #11
Corrections Catalogue
Corrections bloquantes
- Il y a une valeur (ligne) vide en haut des combo box des filtres + plusieurs valeurs en haut de la combo box du filtre
Organisation
(depuis que j'ai rajouté le tri côté back) - La valeur
Autorité de régulation
(filtreAdministration
) renvoie 0 dépôt (devrait être 14 d'après https://code.gouv.fr/public/#/groups?ministry=Autorit%C3%A9+de+R%C3%A9gulation+des+Communications+%C3%89lectroniques+et+des+Postes+(AAI)) : vérifier si c'est un problème côté UI (sinon back) car de plus elle n'est pas grisée- De même, la valeur
Analyse-Image_APC
(filtreOrganisation
) est grisée, alors qu'elle devrait renvoyer 6 dépôts d'après https://code.gouv.fr/public/#/groups?q=analyse-image : vérifier si c'est un problème côté UI (sinon back)
- De même, la valeur
Corrections majeures
- Les labels et les bordures des filtres ne sont pas alignés entre eux
- Revoir l'interaction de la combo box : le curseur devient parfois flèche (
default
), devient texte sur les bords, alors qu'il devrait être une main (pointer
) sauf dans la zone de texte - La taille de la liste des valeurs des combo box devrait s'adapter au contenu (sauf en version mobile) pour pouvoir lire les valeurs en entier (ex. filtre
Administrations
)
Améliorations
- Le filtre
Organisation
doit afficher comme valeurs leursname
(même si c'est l'id
qui est utilisé pour la relation avec le dépôt) - La carte doit rediriger vers le dépôt
- Tri par défaut :
Dernier mis à jour
- Filtres ouverts par défaut
-
Masquer les dépôts expérimentaux
par défaut - Les valeurs sélectionnées devraient être ramenées en haut des combo box des filtres
Nice to have
- Rajouter des checkbox dans les combo box des filtres
- Rajouter les informations manquantes dans les cartes
- Dans la zone de détail de la carte haute (
fr-card__detail
) : le ou les administrations associées et entre parenthèse le nom de l'oganisation
ex. Ministère de la Culture (Programme Vitam) - Dans les tags, ajouter la licence
- Les valeurs des filtres sélectionnées devraient apparaître comme des badges en haut des filtres (cf. UI Vinted)
- Revoir le filtre
Organisation
(utilité, utilisabilité) - Configurer la "fuzzinness" du champ de recherche
- Les filtres
Administrations
etLangages
devraient aussi être des champs de recherche ?
Développer le squelette de l'app et l'interface de la page d'accueil
Développer le squelette de l'app et l'interface de la page d'accueil (et des sous-pages définies ci-dessous) en suivant les maquettes ci-dessous et en prenant en compte les spécifications suivantes :
- Suivre le DSFR et les maquettes du SILL pour les dimensions et espacements
- La page doit s'adapter au format tablette/mobile
Header
- Le bouton de connexion doit être inactif ou caché
- Dans le menu, le lien
Services
est inactif dans l'ideal (sinon, il redirige vers une page vide) - Dans le menu, le lien
Logiciels (SILL)
redirige verssill.code.gouv.fr
- Dans le menu, le lien
Documentation
ouvre un sous-menu détaillé dans la maquette ci-dessous.- Dans le sous-menu, le premier lien redirige vers une nouvelle page
/doc
contenant les mêmes tuiles/cartes que https://code.gouv.fr/doc/ - Dans le sous-menu, le lien
FAQ
redirige vers une nouvelle page/faq
contenant un accordéon - Dans le sous-menu, le lien
Forum
est inactif
- Dans le sous-menu, le premier lien redirige vers une nouvelle page
- Dans le menu, le lien
Blog
est inactif - Dans le menu, le lien
Explorer !
redirige vers/public
(https://code.gouv.fr/public/) - Dans le menu, le lien
A propos
vers une nouvelle page/mission
vide
Bannière
- Pas d'arrière-plan
- Le bouton
En savoir plus
redirige vers la page/mission
- Les 2 tuiles contiennent du texte fictif et des liens inactifs
1ère section
- Similaire à la section "Quelques sélections de logiciels" de la page d'accueil du SILL (même arrière-plan, couleur et forme)
- Les 3 cartes contiennet du texte fictif et des liens inactifs
2ème section
- Similaire à la section "Le SILL en plusieurs chiffres" de la page d'accueil du SILL (même arrière-plan, couleur et forme)
- Les chiffres sont fictifs
3ème section
- Similaire aux sections "Pourquoi et quand utiliser le SILL ?" et "Aidez-nous à enrichir le catalogue" de la page d'accueil du SILL
- Toutes les tuiles contiennent du texte fictif et des liens inactifs
- Sauf les tuiles
Contribuez !
qui sont des liens pour envoyer un email (pré-rempli avec destinataire/sujet/contenu)
- Sauf les tuiles
Footer
- Les liens pour les newsletters ne contiennent pas de champ de saisie, seulement les boutons de redirection vers l'app d'abonnement
Maquette principale
Amélioration de la page ExploreCatalog, Explore et de l'interface générale
Avec comme base le zoning de #21, améliorer la page ExploreCatalog :
- Virtualisation de la liste des repos filtrés
- Responsive
- Le filtre de vitalité doit avoir sa borne maximale fixe (à 100). Seule la borne minimale est modifiable.
- Chaque filtre doit avoir un séparateur (graphiquement) pour le séparer des autres filtres, sauf le dernier de la ligne.
- Les multiSelect doivent avoir une taille maximale dans le viewport.
- Les tags des multiselect autoComplete doivent avoir une marge verticale.
- Les multiselect autoComplete doivent utiliser les styles des autres multiSelect (pas de border de MUI au hover)
- L'interface doit être utilisable sans mock de repositories (tester sur une ordinateur pas très puissant et sur mobile)
- Ajout de story des composants :
- RepoCard
- Virtualized listing
- Search
- MainSearch
- AutoCompleteInput
- MultiSelect
- Traduction du filtre Functions
- Splash screen
Corriger les retours de #24 :
- Le changement de tri fait planter l'app
- La flèche sur le bouton des filtres est inversée
- Supprimer le selector non utilisé DevStatus
- Constante pour MAX_VITALITY
- Dans
AutoCompleteInputMultiple.tsx
, intégrer le DSFR dans le calcul de la taille des éléments - Utiliser les classes DSFR pour la disposition en grille du catalogue
- Est-il possible de'ajouter, en plus du clic, la recherche à l'appui sur la touche Entrée ?
- Sur la page d'accueil Explore, est-il possible de gérer le retour arrirère du navigateur après un clic sur le bouton de recherche qui redirige vers la page Catalogue ?
Mettre en place le forum
Mettre en place l'environnement de développement pour code.gouv.fr
Mettre en place l'environnement de développement minimal pour code.gouv.fr sur la base de code de SILL web :
- App Front React
- Back : API + DB
- CI/CD (dont env de préprod ?)
Mettre en place la FAQ
- Développer l'interface de la page de FAQ en prenant en compte les spécifications suivantes :
- L'interface doit être conforme au DSFR
- Elle doit contenir en-tête, menu principal, pieds de page et bannière de titre
- Utiliser des composants Accordéon pour la FAQ (un composant par catégorie de questions)
- Ajouter le lien vers la page /faq dans le menu de navigation
- Peupler la FAQ (soit le fichier de données correspondant) avec le contenu du fichier faq du dépôt des guides
- Utiliser un fichier de données (ex. .yaml) séparé
- Les questions doivent être triées/catégorisées
Faire évoluer l'API de code.gouv.fr
Décrire les points d'API et les modèles de données actuels (si pas déjà fait)- Pour
repos.json
:- Expliciter les noms des champs dans les réponses
- Pour les champs existants :
name
: à garder dans la réponseorganization_name
: à garder ou à déduire de l'url ?platform
: à supprimer de la réponserepository_url
: à garderdescription
: à garderis_fork
: à garder si applicable sur d'autres plateformes que githubis_archived
: à garder tel quel ou à fusionner avec un champis_empty
dans un nouveau champis_experimental
last_update
: à garderstars_count
: à garder (quand applicable)forks_count
: à supprimer car seulement sur github ?license
: à garderlanguage
: à garderis_esr
: comment est-il calculé ?is_lib
: à supprimer (cf.type
)is_contrib
: à supprimeris_publiccode
: à compléter avec d'autres fichiers (par exempleREADME
,CONTRIBUTING
) ?reuses
: à supprimer
- Ajouter des champs :
id
?administrations
(champ multiple)version
oulatest_release
oulatest_tag
vitality
dont la valeur est calculée à partir de TBD (cf. https://github.com/italia/publiccode-crawler/blob/main/vitality-ranges.yml)status
dont la valeur (Concept, Alpha, Beta, RC, Stable) est calculée à partir du numéro de version (cf. SemVer) : à calculer côté back ou front ?type
dont la valeur correspond à TBD (champ multiple) : ce champ peut-il être déduit automatiquement ou rempli par l'utilisateur dans la future BDD ? Oui pour les lib, quid des autres types (logiciels, API, algos, etc.) ?sill_id
: ce champ doit-il être rempli automatiquement côté back ou front ?homepage
topics
software_heritage_url
- Compresser la réponse (si pas déjà fait) : de manière générale, il faudra surveiller la taille de la réponse après ces modifications et peut-être agir en conséquence (pagination ?)
- Créer les points d'API pour récupérer les valeurs des filtres : côté back ou front ?
- Administrations
- Catégories (
topics
) - Types
- Langages
- Licences
- Organisations : revoir le lien avec les administrations (1 orga, n admins)
- Dépendances
- Revoir le point d'API
stats
Développer l'interface des pages de sélection
Développer une interface commune pour les pages de sélection (ex. Par administration
), en prenant en compte les spécifications suivantes :
- UI : L'interface est celle du catalogue (réutiliser le composant d'affichage
catalogue
) sans la barre de recherche ni les filtres - Back/Données :
- Développer un nouveau filtre par
url
- Utiliser ce filtre pour récupérer depuis la liste des dépôts (dans le
state
) une sous-liste filtrée par une liste d'url. La liste des urls dépendra de la sélection. La liste d'url devra être facilement modifiable (TBD)
- Développer un nouveau filtre par
Développer l'interface d'accueil de la page "Explorer !"
Développer l'interface d'accueil de la page "Explorer !" (/public
) en suivant les maquettes ci-dessous et en prenant en compte les spécifications suivantes :
- Suivre le DSFR et les maquettes du SILL pour les dimensions et espacements
- La page doit s'adapter au format tablette/mobile
Données
- Utiliser l'adapteur
CodeGouvApiMock
TODO #17 pour récupérer :- Les chiffres
- Le contenu du catalogue
- Les valeurs des filtres suivants :
- Administrations
- Catégories (
topics
) - Langages
- Licences
- Organisations
- Dépendances
Interface
Bannière
- Similaire à la bannière du SILL
- Même organisation des éléments
- Pas de combo box, seule une barre de recherche
- Le bouton de recherche redirige vers la vue catalogue
- Le bouton
Se connecter
est remplacé par le boutonMode avancé
qui redirige vers la vue catalogue
1ère section
- Similaire à la section "Quelques sélections de logiciels" de la page d'accueil du SILL (même arrière-plan, couleur et forme) (et à la section similaire sur la page d'accueil de code.gouv.fr)
- Les tuiles contiennent des liens inactifs
2ème section
- Similaire à la section "Aidez-nous à enrichir le catalogue" de la page d'accueil du SILL (et à la section similaire sur la page d'accueil de code.gouv.fr)
- Les tuiles Contribuez ! qui sont des liens pour envoyer un email (pré-rempli avec destinataire/sujet/contenu)
3ème section
- Similaire à la section "Le SILL en plusieurs chiffres" de la page d'accueil du SILL (même arrière-plan, couleur et forme) (et à la section similaire sur la page d'accueil de code.gouv.fr)
Maquettes principales
Accueil
Développer l'interface de la vue catalogue de la page "Explorer"
Développer l'interface de la vue catalogue de la page "Explorer !" (/public/repos
) en suivant les maquettes ci-dessous et en prenant en compte les spécifications suivantes :
- Suivre le DSFR et les maquettes du SILL pour les dimensions et espacements
- La page doit s'adapter au format tablette/mobile
Données
-
Utiliser l'adapteur
CodeGouvApiMock
TODO #17 pour récupérer :- Les chiffres
- Le contenu du catalogue
- Les valeurs des filtres suivants :
- Administrations
- Catégories (
topics
) - Langages
- Licences
- Organisations
- Dépendances
-
La recherche, les filtres, le tri, la pagination sont fonctionnels
- En v1, recherche textuelle simple dans le nom
- Le numéro de page devrait appraître dans l'url
-
En v1, réutiliser la vue catalogue du SILL (ne pas se fier à la maquette)
- Même composants pour la recherche et les filtres
- Filtres en haut
- Ajouter les boutons pour le flux RSS et le téléchargement des données TBD liens
- Les cartes doivent contenir les données suivantes (tel que sur la maquette) :
- Indice de vitalité
- Logo
- Catégorie(s)
- Administration(s)
- Nom
- Langage
- Licence
- Version et date de dernière mise à jour
-
En v1, les cartes redirigent vers le dépôt
-
Les filtres
Dépendance
etOrganisation
doivent gérer l'autocomplétion- Si certains filtres (e.g.
Catégorie
) ont trop de valeurs ils pourront être remplacés par un champ de saisie avec autocomplétion
- Si certains filtres (e.g.
Maquettes principales
Développer l'interface de la page de blog
- Développer l'interface de la page de blog (
/blog
) en suivant les maquettes ci-dessous et en prenant en compte les spécifications suivantes :- L'interface doit être conforme au DSFR
- La recherche doit être fonctionnelle :
- Recherche dans le titre
- Le tri doit être fonctionnel
- Les filtres doivent êtres fonctionnels :
- Les valeurs du filtre
Catégories
doivent être récupérées du champtags
des entrées - Les valeurs du filtre
Type de contenu
doivent être récupérées du champtype
des entrées - Ne pas indiquer de valeurs pour le filtre
Les plus populaires
- Les valeurs du filtre
- La pagination doit être fonctionnelle
- Le lien du flux RSS doit être fonctionnel
- Les tuiles
Contribuez !
doivent être des liens d'email (pré-rempli avec destinataire/sujet/contenu) - Les contenus seront fictifs :
- Récupérer une liste de quelques fausses entrées depuis un faux point d'API
- Modèle d'une entrée (TBD) :
{
"type": "article|video|event",
"title": "",
"content": "",
"tags: [""]
}
-
- La redirection des cartes doit être fonctionnelle
- Les pages de contenu des entrées seront des pages simples contenant en-tête, menu principal, pieds de page et bannière de titre et informations et contenu de l'entrée (maquette TBD)
- La page doit être responsive (TBD)
- Ajouter le lien vers la page
/blog
dans le menu de navigation et les liens vers le dernier événement et la dernière entrée de blog sur la page d'accueil
Maquette principale :
Corrections Page d'accueil
-
En savoir plus
: rediriger versA propos
- Retirer les encadrés des RS et contact
- Est-il possible de ne pas scroll to top sur le clic bouton back du navigateur ? TBD
Développer un adapteur simple pour l'API actuelle de code.gouv.fr
Endpoints :
- repositories GET
- stats GET
- administrations GET
- categories GET
- languages GET
- licences GET
- organisations GET
- dependencies GET
Ajouter le routing dans storybook
Fusionner SILL-web et codegouv-web
- Créer un fork de sill-web
- Rapatrier l'historique de codegouv-web
- Vérifier que l'application se lance
- Que le SILL fonctionne
- Que la page catalogue de code.gouv.fr fonctionne
- Nettoyer le dépôt des duplications de code
- Mettre à jour la navigation :
- Page d'accueil : #12
Améliorer la recherche textuelle
Actuellement, seul le nom du dépôt est utilisé pour la recherche textuelle.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.