v7.1.8

Header

Le Header a été refactoré en plusieurs petits composants indépendants. Le Header par défaut, posé par le Layout, est maintenant défini ainsi :

export const Header = observer(() => (
    <HeaderScrolling canDeploy={applicationStore.canDeploy}>
        <HeaderTopRow>
            <HeaderBarLeft>
                {applicationStore.barLeft}
            </HeaderBarLeft>
            <HeaderBarRight>
                {applicationStore.barRight}
            </HeaderBarRight>
            <HeaderSummary>
                {applicationStore.summary}
            </HeaderSummary>
        </HeaderTopRow>
        <HeaderContent>
            {applicationStore.cartridge}
        </HeaderContent>
        <HeaderActions
            primary={applicationStore.actions.primary}
            secondary={applicationStore.actions.secondary}
        />
    </HeaderScrolling>
));

L'idée à terme est de se débarrasser de l'applicationStore pour gérer le header de la même manière que le Main de l'application. Tout est maintenant prêt pour le faire, il vous suffit simplement de reconstruire ce Header à partir de vos propres composants, routes, états... à la place des appels à l'applicationStore.

En attendant, le header et son fonctionnement restent identique, donc vous pouvez faire la mise à jour sans problème.

v7.1.4

Les boutons d'actions primaires (applicationStore.actions.primary) peuvent maintenant être munis d'une Tooltip. Pour contrôler ce qu'on met dedans, il faut utiliser les props tooltip.... Le texte de la Tooltip est géré par tooltip et non label et elle ne s'affiche que si la tooltip est renseignée.

v7.1

Recherche

L'API de création du SearchStore a été modifiée pour ne prendre qu'un seul service (et qui sera utilisé pour typer le store) et pour spécifier des critères par défaut (au lieu de les spécifier après la création, ce qui avait le mauvais goût de lancer une recherche).

Le constructeur à maintenant la signature suivante :

constructor(service: SearchService<T>, initialProperties: SearchProperties, criteria?: [C, Entity])

et s'utilise comme ceci :

new SearchStore(service, {scope: "myScope"}, [{} as CriteriaNode, CriteriaEntity]);

Maj Typescript

focus4 est passé à Typescript 2.4 et vous devriez aussi faire la montée de version. Au programme : support de import() et des breaking changes sur des comportements qui n'auraient dû jamais marcher.

Le reste

La release s'accompagne également des bug fix des version 7.0.6 -> 7.0.11 qui n'ont pas bénéficié de la release note.

v7.0.5

Ajout focus4/config, pour l'instant on ne peut que configurer le délai (debounce) de la recherche lorsqu'on saisi le champ de recherche textuel (et le délai à été enlevé sur les clics de facettes, tri...).

v7

Le plan initial n'était pas de faire une version majeure maintenant, mais certaines évolutions on dû en tirer d'autres jusqu'au point critique où il n'était plus raisonnable d'appeler ça une version mineure...

Cette version majeure correspond au point critique "de non retour" dans la migration vers React-Toolbox, pour laquelle le travail préliminaire avait déjà été réalisé dans les versions mineures précédentes. Beaucoup de composants ont été ajoutés, repris, wrappés et se trouve dans le dossier components ; ce dossier à pour vocation de disparaître au profit d'un nouveau package, probablement nommé @kleegroup/components, qui contiendra l'ensemble de React-Toolbox ainsi que les surcouches dont on a besoin. La création de ce package est la prochaine étape dans la roadmap.

Refonte des fields

Tous les inputs utilisent (et doivent utiliser) maintenant React-Toolbox. L'InputText et l'InputTextarea sont tous les deux remplacés par l'Input de RT (qui est le composant par défaut), le Select a été réécrit, l'InputDate a été réécrit, et la Checkbox et le Switch ont été wrappés dans components. Cela doit couvrir l'ensemble des composants courants.

De plus, la définition du formatter a été changée dans les domaines : maintenant, le displayFormatter s'applique pour la consulation, le inputFormatter s'applique pour l'édition, et le unformatter permet d'appliquer (à priori) la transformation inverse de l'inputFormatter.

Nouveau Panel

Le panel a été réécrit et possède presque la même API que l'ancien, à l'exception près qu'il faut lui passer buttonsPosition: "none" pour ne pas afficher les boutons au lieu de Buttons: null. La fonction getPanelButtonProps a été renommée en getPanelProps dans l'AutoForm pour plus d'exactitude. L'ancien Panel est toujours utilisable mais ça serait bien de migrer.

En plus...

• La snackbar du MessageCenter a été portée vers RT
• Les z-index ont été normalisés avec les valeurs de RT.
• Le CSS de la popin et de la barre de recherche ont été alignés avec RT.
• Corrections de bugs divers...

v6.4.3

• Corrections de bugs (dont #27)
• Tous les composants sont maintenant, dans leurs propres fichiers, exportés en default avec le style et en nommé sans le style. Cela ne change pas l'usage habituel qui consiste à importer les composants depuis le module parent, mais cela permet de récupérer le composant sans style si besoin est (en particulier pour étendre la classe car le composant stylé est wrappé par un HoC).

import {ActionBar} from "focus4/search"; // ActionBar avec style
import {ActionBar} from "focus4/search/components"; // ActionBar avec style
import {ActionBar} from "focus4/search/components/action-bar"; // ActionBar SANS style
import ActionBar from "focus4/search/components/action-bar"; // ActionBar AVEC style

v6.4

React-Toolbox

Première release avec React-Toolbox, qui a vocation à terme à remplacer Focus Components. Pour l'instant, l'usage est limité à ses variables CSS (Focus récupère le thème, les couleurs, les ombres...), et les composants d'actions transverses du header ont été portés vers RT.

L'api de ces derniers change un peu pour avoir accès à toutes les props des boutons et toutes les props des items de dropdown dans les actions, histoire de bénéficier au maximum de RT.

React-Toolbox partage la même configuration de CSS que Focus donc si vous avez déjà fait la mise à jour précédente il n'y a normalement rien à faire. Il est possible de modifier des variables RT comme les variables Focus et d'injecter des composants de thème dans la Layout comme c'était déjà fait.

Pour ceux qui veulent persister dans le CSS global (...), vous devriez remplacer la fonction de génération des noms de classes CSS dans webpack par :

const getLocalIdent = require("css-loader/lib/getLocalIdent");

/* .... */

{
    loader: 'css-loader',
    options: {
        modules: true,
        localIdentName: "[path][name]-[local]",
        getLocalIdent: (loaderContext, localIdentName, localName, options) => {
            const name = getLocalIdent(loaderContext, localIdentName, localName, options);
            if (name.includes("focus4")) {
                return `focus-${name.split("-").slice(-3).filter(s => s !== "__style__").join("-")}`;
            } else if (name.includes("toolbox")) {
                return `rt-${name.split("-").slice(-3).join("-")}`;
            } else {
                return name;
            }
        },
        importLoaders: 1
    }
},

qui à priori devrait faire l'affaire.

Evolutions recherche

Facettes

Les facettes avec une seule valeur ne sont maintenant plus affichées par défaut, pour retrouver le comportement précédent, utiliser la prop showSingleValuedFacets.

FacetBox dans l'ActionBar

• Pour suivre le point précédent, le bouton "Filtrer" n'apparait plus lorsqu'il n'y a pas de facettes et si le panneau était ouvert alors il va se fermer.
• L'icône du bouton "Filtrer" s'inverse quand le panneau est ouvert, et une croix est apparue en haut à droite
• Il y a des séparateurs entre les facettes (à voir si ça suffit)
• Le panneau à été refait avec react-motion pour s'aligner sur l'animation des composants de détail.

Empty state

Une nouvelle prop EmptyComponent a été ajoutée à la liste (et donc à la recherche) pour lui donner un composant à afficher lorsque la liste est vide. Ce composant reçoit le addItemHandler en props. S'il n'est pas renseigné, le texte "Aucun élément" s'affiche à la place.

v6.3.3

L'ActionBar et l'AdvancedSearch ont maintenant une prop hasGrouping qui permet d'afficher ou non la fonctionnalité de grouping. Par défaut, elle est donc maintenant masquée.

(Fix #26)

v6.3

Migration vers PostCSS (CSSNext)

Afin de se préparer pour la suite et d'encourager les projets à migrer, le CSS de Focus v4 utilise maintenant PostCSS et CSSNext (via postcss-cssnext).

CSSNext est le nom qu'on donne à l'ensemble des nouvelles features du standard CSS qui sont en cours d'implémentation dans les navigateurs. On y retrouve une bonne partie les fonctionnalités du SCSS comme les variables et le nesting, à la différence près qu'on est dans le standard, un peu à l'image du Javascript qu'on écrit aujourd'hui, et qu'on appelle souvent ESNext d'ailleurs.

Puisque les navigateurs ne supportent pas forcéments ces features, il va donc être nécessaire de compiler ce CSS avec webpack :

1) Ajouter les dépendances suivantes : (package.json)

"postcss": "6.0.1",
"postcss-cssnext": "2.11.0",
"postcss-import": "10.0.0",
"postcss-loader": "2.0.5",

(les numéros de versions correspondent aux dernières au moment de la release)

2) Mettre à jour la règle CSS de webpack : (webpack.config.js)

{
    test: /\.css$/,
    use: [
        {loader: 'style-loader'},
        {
            loader: 'css-loader',
            options: {
                modules: true,
                localIdentName: "[name]-[local]--[hash:base64:5]", // Ou ce que vous avez déjà ici
                importLoaders: 1
            }
        },
        {
            loader: "postcss-loader",
            options: {
                plugins: () => [
                    require("postcss-import")(),
                    require("postcss-cssnext")()
                ]
            }
        }
    ]
},

Variables CSS

Puisqu'on utilise maintenant CSSNext, on a désormais accès à des variables CSS, et certaines valeurs "en dur" du framework ont été exposées dans des variables qu'il vous est possible de surcharger, ce qui peut remplacer du CSS custom simple n'ayant vocation que de changer une simple couleur par exemple.

Si vous n'utilisez pas PostCSS-CSSNext pour transpiler parce que votre navigateur supporte déjà les features (les variables sont supportées nativement par les dernières versions de Chrome, Firefox, Edge et Safari), alors il suffit de redéfinir les variables dans une feuille CSS quelconque incluse dans le projet.

Malheureusement, on ne peut pas trop compter sur ce support dans la grande majorité des cas, donc on va utiliser une fonctionnalité de PostCSS-CSSNext pour surcharger les variables, qui va donc passer par la config webpack (et donc nécessiter un rebuild à chaque modification de variable...).

Dans la section plugins des options de postcss-loader, il faut passer un objet variables comme ceci en remplaçant require('postcss-cssnext')() par :

const variables = require('./css-variables');

/* ... */

require("postcss-cssnext")({
    features: {
        customProperties: {
            variables
        }
    }
})

Et le contenu du fichier de surcharge se présente ainsi :

const css = require("focus4/style");

module.exports = css({
    actionBarBackground: "#ddd",
    actionBarShadow: "none",
    advancedSearchFacetsWidth: "260px",
    headerActionsMarginRight: "320px",
    headerColor: "white",
    headerMarginBottom: "15px",
    headerToprowBackground: "#007a31",
    headerShadow: "none",
    layoutBackground: "#e8e8e8",
    menuBackground: "#001107",
    menuItemActiveBackground: "#6fad2d",
    menuItemActiveColor: "#001107",
    menuItemColor: "white"
});

La fonction css propose de l'autocomplétion pour toutes les variables qu'il est possible de surcharger. N'hésitez pas à demander s'il vous semble qu'il en manque.

Icônes dans i18n

Les icônes utilisées par les différents composants du framework sont maintenant dans i18n, pour donner la possibilité aux projets de les surcharger.

La config par défaut doit ressembler à ça :

import {fr, icons} from "focus4/translation";

export const translation = {
    focus: {
        ...fr,
        icons
    },
   /* ... */

A noter que le préfixe i18n personnalisé est également utilisé par les icônes, donc il faudra respécifier les icônes pour chacun de vos préfixes.

v6.2

Ajoute le détail accordéon dans la liste.