fix: runtime undefined error when choosing pickers from sidebar in fast-explore-website

[bougwal]

🐛 Bug Report

Fast explorer website sidebar picker elements are not accessible.

💻 Repro or Code Sample

Error message: Uncaught TypeError: Cannot read properties of undefined (reading 'scenarios')

🤔 Expected Behavior

Accessing picker components as the rest of the explorer website components such as Button or Accordion

😯 Current Behavior

The routing (navigation) is not working due to runtime undefined error when users choose any picker element from the sidebar

💁 Possible Solution

Re-check the react wrapper for the "scenarios" property

🔦 Context

I am trying to test and explore Fast picker components from the Fast explorer website.

🌍 Your Environment

• OS & Device: Windows
• Browser: Google Chrome
• Version: 103.0.5060.114 (Build officiel) (64 bits)

[EisenbergEffect]

Thanks for reporting this @walidBouguima. We are in a transition right now, moving away from the FAST Components and towards a new CLI that would enable quickly building custom design system. The components site is a bit of "legacy" content.

@chrisdholt @janechu How do we want to address this? Is there a quick fix we can make? I think that several community members have hit this issue.

[KingOfTac]

@EisenbergEffect as a sidenote, Search is having the same issue and disclosure loads but doesn't work properly.

[chrisdholt]

Thanks for reporting this @walidBouguima. We are in a transition right now, moving away from the FAST Components and towards a new CLI that would enable quickly building custom design system. The components site is a bit of "legacy" content.

@chrisdholt @janechu How do we want to address this? Is there a quick fix we can make? I think that several community members have hit this issue.

I don't know if there is a quick fix - the fix would need to happen in the fast-components archive I believe, especially if there is a component issue. I think the consideration here is that we need to get the CLI up and then we need some way to help get folks routed there for the components.

[EisenbergEffect]

@chrisdholt Should we use the CLI to generate a default Storybook with our base styles and then point the components link to that?

[chrisdholt]

@chrisdholt Should we use the CLI to generate a default Storybook with our base styles and then point the components link to that?

I think that sounds good - We'll likely want to have some kind of intro which details that these are the default components delivered via CLI. It would be great if we likewise exposed a few "knobs" via Storybook that allowed changing a few of the token values.

[EisenbergEffect]

@janechu @bheston What do you two think of creating a Storybook plugin that can manipulate some design tokens? We could use this for our default CLI setup as well as our components site.

[chrisdholt]

@janechu @bheston What do you two think of creating a Storybook plugin that can manipulate some design tokens? We could use this for our default CLI setup as well as our components site.

Just a note that for initial work, we can likely just use the current add ons which support some basic setting of things like theme, and we can probably do a "select" for accent color to start. That would get us off the ground and we could create a customized picker or whatnot if we want. If the consideration is immediacy with low overhead, I'd probably suggest starting with the existing addons support which has a model we've used internally such as:

export const globalTypes = {
    theme: {
        defaultValue: "light",
        toolbar: {
            items: ["light", "dark"],
            showName: true,
        },
    },
    direction: {
        defaultValue: "ltr",
        toolbar: {
            items: ["ltr", "rtl"],
            showName: true,
        },
    },
};

const themeLuminance = {
    dark: StandardLuminance.DarkMode,
    light: StandardLuminance.LightMode,
};

export const decorators = [
    (Story, { globals }) => {
        const root = document.body;
        const renderedStory = Story();

        provideDesignSystem().withDesignTokenRoot(root);

        baseLayerLuminance.setValueFor(root, themeLuminance[globals.theme]);
        direction.setValueFor(root, globals.direction);
        fillColor.setValueFor(root, neutralLayer1);

        root.style.setProperty("background-color", fillColor.createCSS().toString());
        root.setAttribute("dir", globals.direction);

        return renderedStory;
    },
];