Nefariously Programmed Mecha

    TypeScript icon, indicating that this package has built-in type declarations

    1.2.1 • Public • Published

    Cartographer Common

    Include common controls, types, constants, etc for Cartographer libraries

    Running (Launches Storybook)

    • Run npm run dev


    • Update version and changelog
    • Run npm run build
    • Run npm publish


    Cartographer No Harm

    Performing general no-harm testing on Cartographer is done by completing the following routines in their appropriate development environment. Testing these routines will provide insight into the health of Cartographer as it functions as widget UI for Serenity.

    Load Storybook

    • From the appropriate environment, via a feature branch (QA) or Master (Prod) load the story and ensure the component loads on the page and there are no errors

    Interact with the component’s UI

    • Clicking buttons, opening drawers, etc

    Storybook Controls

    Storybook Controls gives you a graphical UI to interact with a component's arguments dynamically without needing to code

    • Interact with the component’s Controls as much as possible. Using these controls will update the component's UI to test different scenarios. Keep in mind that each story will have its own unique controls.
    • Set booleans for different states such as Onboarding and ZeroStates
    • Edit key values


    Test component compliance with web accessibility standards

    • Ensure there are no Accessibility violations in the Accessibility tab of Control. Frequently check this tab each time you update the component’s UI
    • Ensure using a screen reader the content is accessible and has context

    Storybook toolbar

    • Dark Mode. This toolbar item lets you change the theme and toggle between light and dark mode

      • Ensure the components can be loaded in dark mode
      • Ensure the components can be loaded in light mode
    • View Port. The Viewport toolbar item allows you to adjust the dimensions of the iframe

      • Ensure the component is responsive and can be loaded in Small Mobile View
      • Ensure the component is responsive and can be loaded in Large Mobile View
      • Ensure the component is responsive and can be loaded in Tablet View


    • Check for console errors
    • Check for expected console messages. Console messages serve as analytic events when buttons are clicked. NOTE: There is no need to check network requests as the UI is not connected to any MX databases. Any network request you see is being made by Storybook not the component.




    npm i @mx-cartographer/common

    DownloadsWeekly Downloads






    Unpacked Size

    315 kB

    Total Files


    Last publish


    • jgerlach
    • lem_mx
    • igor.morgunov
    • jsfowles
    • mattcbodily
    • kelliegreen
    • shalyn.huetter123
    • william.bridegroom
    • stephanie.stamm
    • drewwarren
    • stevencreates
    • garrowp