Pattern Library Module

The pattern library module allows developers to test different configurations of a component. This is similar to the well known storybook tool.

It is advised to add the module only for development configurations for example like:


if (builder.Environment.IsDevelopment())
{
    moduleBuilder.AddModule<PatternLibraryModule>();
}

When the module is added, the pattern library is available as page component or can be reached at /.mod/api/confinity-pattern-library.

In order to see your components you must provide a valid configuration. This can be done by implementing IConfinityContentConfiguration<T> which has the attribute [PatternLibraryArea()]. In addition, a placeholder page must be configured for this component. To test all possible layouts. This should be done for each layout.

Configuration


services.Configure<PatternLibraryOptions>(options =>
{
    // the link to the idea ide sometimes needs path fixing when the project is in a sub-folder.
    options.ViewPrefix = (assembly) => "src/DocsDemo/" + assembly?.GetName().Name;

    // maps the Pattern Library controller
    options.MapRoute = true;

    // Add startup actions wich run once on startup. This can be used to generate links to each configuration.
    // This is often used for automated accessibility testing or ui regression tests.
    options.StartupActions.Add((tests) =>
    {
        // File.WriteAllText("...");
    });
});

Example

Component


[ConfinityLabel("Image Component")]
public sealed class TitleComponentModel : PageComponentModel, IConfinityContentConfiguration<TitleComponentModel>
{
    public required string Title { get; set; } = "";

    public void Configure(IConfinityContentBuilder<TitleComponentModel> builder)
    {
        builder
            .Description("An example title component")
            .Icon(Icon.H1)
            .Editor(e =>
            {
                e.AddTab(tab =>
                {
                    tab.AddInput(x => x.Title)
                        .Label("Heading")
                        .Comment("Some helpful text to this property.")
                        .Validate(v => v.NotEmpty());
                });
            });
    }
}

Pattern Library Configuration


[PatternLibraryArea("My Layout")]
public class TitleComponentModelPatternLibrary : IPatternLibraryComponent
{
    public string Label() => "Title";

    public IEnumerable<Item> ComponentConfigurations()
    {
        yield return new ConfinityContentItem("short title", new TitleComponentModel() { Title = "Welcome!" });
        yield return new ConfinityContentItem("long title",
            new TitleComponentModel()
            {
                Title =
                    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut " +
                    "labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco " +
                    "laboris nisi ut aliquip ex ea commodo consequat. "
            });
    }
}