TextField improvement + RenderFragment improvement + some other stuff

[WimVdSElia]

Changes

v.1.0.0-preview.38

• Improve: Add support for the text type to have a dropdown list of predefined values.
• Improve: Added the possibility to use the full way of RenderFragment (only EditForm and/or InputBase doesn't work)
• Improve: Added the possibility to add theming to the BlazingStoryApp component.
• Improve: Added the possibility to only show all the properties of a component or only those used in Args.
• Improve: Added the possibility to add some Description to a story.

Extra

Text Options

<Story Name="Select - No Value">
    <Template>
        <Stack>
            <TextParameterController Key="key"
                                     Parameter="Select"
                                     Value="_Select1"
                                     Options="_Options"
                                     OnInput="arg => _Select1 = arg.Value">
            </TextParameterController>
            <ResetButton OnClick="() => _Select1 = Unknown.Value" />
        </Stack>
        <p>@(_Select1?.ToString() ?? "(null)")</p>
    </Template>
</Story>

@code {
    private readonly ComponentParameter Select = SampleComponent.CreateParameter(nameof(SampleComponent.Select), ControlType.Select);

    private string[] _Options = new[] { "Option 1", "Option 2", "Option 3" };

    private object? _Select1 = Unknown.Value;
}

RenderFragment

Some examples:

@code {
    RenderFragment _childContent = @<text>Click me</text>;
}

@code {
    RenderFragment _childContentSpan = @<span>Click me Span</span>;
}

@code {
    RenderFragment _childContentSpan => __builder =>
    {
        <div style="color:red;">
            <span>Click me Span inside div with style</span>
        </div>
    };
}

@code {
    RenderFragment _childContentComponent => __builder =>
    {
        <CornerButton>Click me Component</CornerButton>
    };
}

@code {
    RenderFragment _childContnetComponent => __builder =>
    {
        <IconButton Icon="Internals.Components.Icons.SvgIconType.Folder" />
    };
}

Themable

Add a script to your story project like extraFunction.js the method must be themableCanvasFrame

/**
 * Checks if the given string is null, undefined, or consists only of whitespace.
 *
 * @param str - The string to check.
 * @returns true if the string is null, undefined, or whitespace; otherwise, false.
 */
function isNullOrWhitespace(str) {
    // Check if the string is null or undefined
    if (str === null) {
        return true;
    }

    // Trim the string and check if it's empty
    return str.trim().length === 0;
}

window.themableCanvasFrame = (theme) => {
    const doc = document;

    if (!isNullOrWhitespace(theme) && theme !== "None") {
        doc.body.classList.remove("dark");
        doc.body.classList.remove("light");
        doc.documentElement.classList.remove("dark");
        doc.documentElement.classList.remove("light");

        doc.body.classList.add(theme.toLowerCase());
        doc.documentElement.classList.add(theme.toLowerCase());
    } else {
        doc.body.classList.remove("dark");
        doc.body.classList.remove("light");
        doc.documentElement.classList.remove("dark");
        doc.documentElement.classList.remove("light");
    }
};

Then add to iframe.html

<!--
If you need to add <script> elements to include JavaScript files for canvas views of your Stories,
YOU SHOULD PLACE THEM HERE, not in the "index.html" file.
-->
<script src="js/extraFunctions.js"></script>

Last change the App.razor

<BlazingStoryApp Assemblies="new []{ typeof(App).Assembly }"
                              DefaultLayout="typeof(DefaultLayout)"
                              EnableHotReloading="true"
                              Title="Test Story"
                              ThemeType="typeof(ThemeMode)">
</BlazingStoryApp>

@code {
    public enum ThemeMode
    {
        None,
        Light,
        Dark
    }
}

[Zettersten]

This is a biggy. Good work @WimVdSElia. Seems like you need to update your MS packages.

@jsakamoto what are your toughts on this impl?

[WimVdSElia]

Updated the Ms Package + the pr text

[jsakamoto]

I apologize for the long delay, but I returned to the "Blazing Story" project! And @WimVdSElia, thank you for your contributions!

Unfortunately, I don't want to say this, but I couldn't accept this pull request directly😥. However, the reasons for that are not intrinsic. It is my preference for coding style. The changes I could not accept are below:

• Surrounding code fragments with the "#region" pragma.
• Using the "code behind" style (separating "@code" block to individual "*.razor.cs" file)

I respect your preference for coding style and agree that the style above may be much better than mine. However, this is my hobby work, and I don't want to spend my time arguing and discussing which coding style we should use. I'd appreciate your understanding.

Anyway, the essential changes in your pull request will be helpful and acceptable to me. But could you please make a small pull request for each feature instead of one big one, including various changes? And I'd appreciate it keeping the coding style.

I hope you understand my point and keep contributing. And thanks, @Zettersten, for your escort!

[jsakamoto]

By the way, hey @WimVdSElia, I'm looking forward to seeing your lovely account icon in the "Contributors" list. My little son said your account icon is funny😊 and very nice!👍