abstract.factory.js

// Factories for creating new btns
// app/components/btnDefaultFactory.js
export default const btnDefaultFactory = (customOpts) => {
    const defaultOpts = {
        size: 12,
        color: 'powderblue',
        state: 'brand new'
    };

    return { ...defaultOpts, ...customOpts };
};

// app/components/btnLabeledFactory.js
export default const btnLabeledFactory = (customOpts) => {
    const defaultOpts = {
        size: 12,
        color: 'aqua',
        state: 'brand new',
        label: 'Custom label'
    };

    return { ...defaultOpts, ...customOpts };
};
// ... more buttons

// The encapsulating of creation into abstract factory
// app/components/btnAbstractFactory.js
export default const btnAbstractFactory = (() => {
    // Storage for our btns types
    const types = {};

    return {
        getBtn(type, customizations) {
            const factory = types[type];

            return (factory ? factory(customizations) : null);
        },

        registerBtn(type, factory) {
            types[type] = factory;

            return btnAbstractFactory;
        }
    };
})();

// Usage:
// Register
// app/components/cartForm.js
btnAbstractFactory.registerBtn('default', btnDefaultFactory);
btnAbstractFactory.registerBtn('labeled', btnLabeledFactory);

// Instantiate a new btns based on the type
const appBtnDefault = btnAbstractFactory.getBtn('default', {
    color: 'lime green',
    state: 'like new'
});

const appBtnLabeled = btnAbstractFactory.getBtn('labeled', {
    labelFontSize: '14',
    color: 'neon yellow'
});

log(appBtnDefault); //{"size":12,"color":"powderblue","state":"like new"}
log(appBtnLabeled); //{"size":12,"color":"aqua","state":"brand new", label: "Custom label", "labelFontSize":"14"}