wix-storybook-utils/dist/es/src/Sections/views/story-page.driver.js

Utilities for automated component documentation within Storybook

import { __assign, __spreadArray } from "tslib";
import { storyPage } from './story-page';
import { SectionType } from '../../typings/story-section';
import React from 'react';
var _structure = "<div style={{ height: '100px' }}><div/><div/><div/></div>";
export var createStoryBuilder = function (content, config) {
    var defaultContent = {
        description: 'This is description',
        do: ['this', 'that'],
        dont: ['one', 'two'],
        featureExamples: [
            {
                title: 'Structure',
                description: 'Radio button consists of a radio itself and a label on the side.',
                example: '_structure',
            },
        ],
        includedComponents: [],
        commonUseCaseExamples: [],
        accessibilityExmples: [],
        examples: { _structure: _structure },
        demo: React.createElement("div", null),
    };
    var defaultConfig = {
        config: {
            repoBaseURL: '',
            story: {
                testkit: true,
                source: true,
            },
        },
        story: defaultContent,
        exampleImport: 'import',
        storyName: 'Story',
    };
    var outputContent = content || defaultContent;
    var outputConfig = config || defaultConfig;
    return {
        input: JSON.stringify(storyPage(buildInput(outputContent), outputConfig)),
        output: JSON.stringify(buildOutput(outputContent)),
        addExamples: function (examples) {
            if (!content) {
                defaultContent.examples = __assign(__assign({}, examples), { _structure: _structure });
                return createStoryBuilder(defaultContent);
            }
            content.examples = __assign(__assign({}, examples), { _structure: _structure });
            console.log(content);
            return createStoryBuilder(content);
        },
        addFeatureExample: function (example) {
            if (!content) {
                defaultContent.featureExamples = [example];
                return createStoryBuilder(defaultContent);
            }
            content.featureExamples.push(example);
            return createStoryBuilder(content);
        },
        addCommonUseCasesExample: function (example) {
            if (!content) {
                defaultContent.commonUseCaseExamples = [example];
                return createStoryBuilder(defaultContent);
            }
            content.commonUseCaseExamples.push(example);
            return createStoryBuilder(content);
        },
        addAccessibilityExample: function (example) {
            if (!content) {
                defaultContent.accessibilityExmples = [example];
                return createStoryBuilder(defaultContent);
            }
            content.accessibilityExmples.push(example);
            return createStoryBuilder(content);
        },
        addDescription: function (description) {
            if (!content) {
                defaultContent.description = description;
                return createStoryBuilder(defaultContent);
            }
            content.description = description;
            return createStoryBuilder(content);
        },
        addDoDont: function (doDont) {
            if (!content) {
                defaultContent.do = doDont.do;
                defaultContent.dont = doDont.dont;
                return createStoryBuilder(defaultContent);
            }
            content.do = doDont.do;
            content.dont = doDont.dont;
            return createStoryBuilder(content);
        },
        addIncludedComponents: function (includedComponents) {
            if (!content) {
                defaultContent.includedComponents = includedComponents;
                return createStoryBuilder(defaultContent);
            }
            content.includedComponents = includedComponents;
            return createStoryBuilder(content);
        },
        addDemo: function (demo) {
            if (!content) {
                //@ts-expect-error
                defaultContent.demo = demo;
                return createStoryBuilder(defaultContent);
            }
            content.demo = demo;
            return createStoryBuilder(content);
        },
    };
};
var buildInput = function (content) { return ({
    type: SectionType.StoryPage,
    content: {
        description: content.description,
        do: content.do,
        dont: content.dont,
        featureExamples: content.featureExamples,
        includedComponents: content.includedComponents,
        accessibilityExmples: content.accessibilityExmples,
        commonUseCaseExamples: content.commonUseCaseExamples,
    },
    examples: content.examples,
    demo: content.demo,
}); };
var buildOutput = function (content) {
    var featureExamples = content.featureExamples
        .map(function (example, index) { return ({
        type: 'example',
        key: index,
        title: example.title,
        text: example.description,
        source: content.examples[example.example],
        compact: true,
        wide: example.wide,
    }); })
        .filter(function (example) { return example.source; });
    var commonUseCaseExamples = content.commonUseCaseExamples
        .map(function (example, index) { return ({
        type: 'example',
        key: index,
        title: example.title,
        text: example.description,
        source: content.examples[example.example],
        compact: true,
        wide: example.wide,
    }); })
        .filter(function (example) { return example.source; });
    var accessibilityExmples = content.accessibilityExmples
        .map(function (example, index) { return ({
        type: 'example',
        key: index,
        title: example.title,
        text: example.description,
        source: content.examples[example.example],
        compact: true,
        wide: example.wide,
    }); })
        .filter(function (example) { return example.source; });
    var doDontModule = function () {
        if (!content.do.length && !content.dont.length) {
            return null;
        }
        return {
            type: 'doDont',
            do: { list: content.do },
            dont: { list: content.dont },
        };
    };
    var demoModule = function () {
        if (!content.demo) {
            return null;
        }
        if (typeof content.demo === 'string') {
            return {
                type: 'example',
                title: 'Demo',
                source: content.demo,
                compact: true,
                hideCodeEditor: true,
                wide: true,
            };
        }
        return {
            title: 'Demo',
            type: 'demo',
            component: content.demo,
        };
    };
    var includedComponentsModule = function () {
        if (!content.includedComponents) {
            return null;
        }
        return {
            title: 'Included Components',
            type: 'includedComponents',
            component: content.includedComponents,
        };
    };
    var showCommonUseCaseExamples = content.commonUseCaseExamples.length;
    var showAccessibilityExmples = content.accessibilityExmples.length;
    var showIncludedComponents = content.includedComponents.length;
    return [
        { type: 'header', sourceUrl: '/Story', source: true },
        {
            type: 'tabs',
            tabs: [
                {
                    title: 'Design',
                    type: 'tab',
                    sections: __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([
                        demoModule(),
                        {
                            type: 'description',
                            text: content.description || 'This is description',
                            title: 'Usage',
                        },
                        doDontModule(),
                        { title: 'Import', type: 'importExample', source: 'import' },
                        showIncludedComponents && includedComponentsModule(),
                        { type: 'divider' },
                        { type: 'title', title: 'Variations' }
                    ], featureExamples, true), [
                        showCommonUseCaseExamples && { type: 'divider' },
                        showCommonUseCaseExamples && {
                            type: 'title',
                            title: 'Common use cases',
                        }
                    ], false), commonUseCaseExamples, true), [
                        showAccessibilityExmples && { type: 'divider' },
                        showAccessibilityExmples && {
                            type: 'title',
                            title: 'Accessibility Considerations',
                        }
                    ], false), accessibilityExmples, true), [
                        { type: 'divider' },
                        { type: 'title', title: 'Feedback' },
                        { type: 'description' },
                    ], false).filter(function (item) { return !!item; }),
                },
                { title: 'API', type: 'tab', sections: [{ type: 'api' }] },
                { title: 'Testkit', type: 'tab', sections: [{ type: 'testkit' }] },
            ],
        },
    ];
};
//# sourceMappingURL=story-page.driver.js.map