[SDK] Testcase failing related to getDefaultColorName

[aaronreed708]

Problem/Concern

I ran through the SDK Tutorial and ran into an issue with some of the code that I wrote. getDefaultColorName is failing. Seems to be related to the fact that the colors are stored in a JS Map but we are treating it like an object to enumerate the keys. Will attach the testcase.

Proposed Solution

[aaronreed708]

Here is the testcase:

import {ThemeBuilder} from "@finos/a11y-theme-builder-sdk";

const DESIGN_SYSTEM_NAME="ds1";

async function main() {
    try {
        // create a theme builder instance
        const myThemeBuilder = await ThemeBuilder.create();
        if (!myThemeBuilder) {
            console.log("unable to create ThemeBuilder instance");
            return;
        }

        const myDesignSystem = await myThemeBuilder.addDesignSystem(DESIGN_SYSTEM_NAME)
        if (!myDesignSystem) {
            console.log("unable to create design system");
            return;
        }
        const ds1 = await myThemeBuilder.getDesignSystem(DESIGN_SYSTEM_NAME);
        if (!ds1) {
            console.log("unable to retrieve design system");
            return;
        }
        if (ds1.key !== myDesignSystem.key) {
            console.log("Design system keys don't match unexpectedly");
            return;
        }

        // add colors to the color palette
        ds1.atoms.colorPalette.addColor("blue", "#E2F3FF");
        ds1.atoms.colorPalette.addColor("red", "#DC143C");
        ds1.atoms.colorPalette.addColor("green", "#32CD32");

        // A node is initialized when all of its required properties (which
        //  DO NOT have default values) have values.
        // ColorPalette has one required property, defaultColorName, which will
        //  be set when the first color is added to the palette.
        const isPaletteInitialized = ds1.atoms.colorPalette.isInitialized();
        if (!isPaletteInitialized) {
            console.log("unable to initialize color palette");
            return;
        }

        // A node is enabled when all of its dependencies have been initialized.
        //   A design system's colorThemes object depends on the design system's
        //   color palette.
        const areThemesEnabled = ds1.atoms.colorThemes.isEnabled();
        if (!areThemesEnabled) {
            console.log("color themes not enabled");
            return;
        }

        // Creating the first theme in the design system.  The first theme will
        //  automatically become the default color theme.
        const myFirstTheme = ds1.atoms.colorThemes.createTheme("myFirstThemeName");
        let defaultTheme = ds1.atoms.colorThemes.getDefaultTheme();
        if (!defaultTheme || (defaultTheme.key !== myFirstTheme.key)) {
            console.log("default theme is unexpected");
            return;
        }
        const mySecondTheme = ds1.atoms.colorThemes.createTheme("mySecondThemeName");
        ds1.atoms.colorThemes.setDefaultTheme(mySecondTheme);
        defaultTheme = ds1.atoms.colorThemes.getDefaultTheme();
        if (!defaultTheme || (defaultTheme.key !== mySecondTheme.key)) {
            console.log("default theme is unexpected");
            return;
        }

        // Set the primary, secondary, and tertiary color shades for this theme.
        // The call to `getSelectableValues` returns an array of arrays of shades.
        // The first index selects the color.  Since we added 3 colors to our palette,
        // the index is 0, 1, or 2.  The second index identifies a shade of that color.
        // In this example, we always choose the first one available, but that need
        // not be the case.  Also note that the primary MUST be set first
        defaultTheme.primary.setValue(defaultTheme.primary.getSelectableValues()[0][0]);
        defaultTheme.secondary.setValue(defaultTheme.secondary.getSelectableValues()[1][0]);
        defaultTheme.tertiary.setValue(defaultTheme.tertiary.getSelectableValues()[2][0]);

        // Set the light and dark mode background color pairs.
        // The call to `getSelectableValues` returns an array of color pairs
        // from which to select.
        defaultTheme.lightModeBackground.setValue(defaultTheme.lightModeBackground.getSelectableValues()[1]);
        defaultTheme.darkModeBackground.setValue(defaultTheme.darkModeBackground.getSelectableValues()[0]);

        // Set the 2 gradients from and to color shades.
        // The call to `getSelectableValues` returns an array of arrays of allowable
        // shades, similar to those for primary, secondary, and tertiary.
        defaultTheme.gradient1.from.setValue(defaultTheme.gradient1.from.getSelectableValues()[0][0]);
        defaultTheme.gradient1.to.setValue(defaultTheme.gradient1.to.getSelectableValues()[0][2]);
        defaultTheme.gradient2.from.setValue(defaultTheme.gradient2.from.getSelectableValues()[1][0]);
        defaultTheme.gradient2.to.setValue(defaultTheme.gradient2.to.getSelectableValues()[1][2]);

        // Set the button color shade.
        defaultTheme.button.setValue(defaultTheme.button.getSelectableValues()[0][1]);

        // Set the icon color shade.
        defaultTheme.icon.setValue(defaultTheme.icon.getSelectableValues()[1][1]);

        // Set the gradient header text from and to colors
        defaultTheme.gradientHeaderText.from.setValue(defaultTheme.gradientHeaderText.from.getSelectableValues()[0][0]);
        defaultTheme.gradientHeaderText.to.setValue(defaultTheme.gradientHeaderText.to.getSelectableValues()[0][2]);

        // defaultTheme should not yet be initialized because the accent color is
        //  required for the color theme to be initialized.
        if (defaultTheme.isInitialized()) {
            console.log("Default color theme is unexpectedly initialized");
            return;
        }

        // Molecules should not yet be enabled because the accent color is
        //  required for the color theme to be initialized.
        if (ds1.molecules.isEnabled()) {
            console.log("Molecules are unexpectedly enabled");
            return;
        }

        // Set the accent color shade
        defaultTheme.accent.setValue(defaultTheme.accent.getSelectableValues()[2][1]);

        //TODO figure out issue
        if (!ds1.atoms.colorPalette.getDefaultColor()) {
            console.log("Color palette defaultColor unexpectedly not set");
            return;
        } else {
            console.log("Color palette defaultColor: ", myDesignSystem.atoms.colorPalette.getDefaultColor());
        }
        if (!ds1.atoms.colorPalette.getDefaultColorName()) {
            console.log("Color palette defaultColorName unexpectedly not set");
            return;
        } else {
            console.log("Color palette defaultColorName: ", myDesignSystem.atoms.colorPalette.getDefaultColorName());
        }
        //endTODO

        // default theme should now be initialized
        if (!defaultTheme.isInitialized()) {
            console.log("Default color theme is unexpectedly incomplete");
            return;
        }

        if (!ds1.molecules.isEnabled()) {
            console.log("Molecules are unexpectedly disabled");
            return;
        }

        // cleanup
        await myThemeBuilder.deleteDesignSystem(ds1.name);
    } catch (err:any) {
        console.error("Error encountered: ", err.getMessage ? err.getMessage() : "unknown");
    }
}

main();