wix-storybook-utils
Version:
Utilities for automated component documentation within Storybook
250 lines • 9.82 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.createStoryBuilder = void 0;
var tslib_1 = require("tslib");
var story_page_1 = require("./story-page");
var story_section_1 = require("../../typings/story-section");
var react_1 = tslib_1.__importDefault(require("react"));
var _structure = "<div style={{ height: '100px' }}><div/><div/><div/></div>";
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_1.default.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((0, story_page_1.storyPage)(buildInput(outputContent), outputConfig)),
output: JSON.stringify(buildOutput(outputContent)),
addExamples: function (examples) {
if (!content) {
defaultContent.examples = tslib_1.__assign(tslib_1.__assign({}, examples), { _structure: _structure });
return (0, exports.createStoryBuilder)(defaultContent);
}
content.examples = tslib_1.__assign(tslib_1.__assign({}, examples), { _structure: _structure });
console.log(content);
return (0, exports.createStoryBuilder)(content);
},
addFeatureExample: function (example) {
if (!content) {
defaultContent.featureExamples = [example];
return (0, exports.createStoryBuilder)(defaultContent);
}
content.featureExamples.push(example);
return (0, exports.createStoryBuilder)(content);
},
addCommonUseCasesExample: function (example) {
if (!content) {
defaultContent.commonUseCaseExamples = [example];
return (0, exports.createStoryBuilder)(defaultContent);
}
content.commonUseCaseExamples.push(example);
return (0, exports.createStoryBuilder)(content);
},
addAccessibilityExample: function (example) {
if (!content) {
defaultContent.accessibilityExmples = [example];
return (0, exports.createStoryBuilder)(defaultContent);
}
content.accessibilityExmples.push(example);
return (0, exports.createStoryBuilder)(content);
},
addDescription: function (description) {
if (!content) {
defaultContent.description = description;
return (0, exports.createStoryBuilder)(defaultContent);
}
content.description = description;
return (0, exports.createStoryBuilder)(content);
},
addDoDont: function (doDont) {
if (!content) {
defaultContent.do = doDont.do;
defaultContent.dont = doDont.dont;
return (0, exports.createStoryBuilder)(defaultContent);
}
content.do = doDont.do;
content.dont = doDont.dont;
return (0, exports.createStoryBuilder)(content);
},
addIncludedComponents: function (includedComponents) {
if (!content) {
defaultContent.includedComponents = includedComponents;
return (0, exports.createStoryBuilder)(defaultContent);
}
content.includedComponents = includedComponents;
return (0, exports.createStoryBuilder)(content);
},
addDemo: function (demo) {
if (!content) {
//@ts-expect-error
defaultContent.demo = demo;
return (0, exports.createStoryBuilder)(defaultContent);
}
content.demo = demo;
return (0, exports.createStoryBuilder)(content);
},
};
};
exports.createStoryBuilder = createStoryBuilder;
var buildInput = function (content) { return ({
type: story_section_1.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: tslib_1.__spreadArray(tslib_1.__spreadArray(tslib_1.__spreadArray(tslib_1.__spreadArray(tslib_1.__spreadArray(tslib_1.__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