wix-storybook-utils
Version:
Utilities for automated component documentation within Storybook
202 lines • 8.29 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.storyPage = void 0;
var tslib_1 = require("tslib");
var story_section_1 = require("../../typings/story-section");
var tab_prop_types_1 = require("../../ui/Tabs/core/constants/tab-prop-types");
var example = function (props) {
return {
type: story_section_1.SectionType.Example,
title: 'Demo',
source: props.source,
compact: true,
hideCodeEditor: true,
loading: props.loading,
wide: true,
};
};
var examples = function (examplesContent, examplesCode, examplesConfig) {
if (!examplesContent || !examplesContent.length) {
return [];
}
return examplesContent
.map(function (item, index) { return ({
type: story_section_1.SectionType.Example,
key: index,
title: item.title,
text: item.description,
source: examplesCode[item.example],
compact: true,
wide: item.wide,
figmaLink: item.figmaLink,
examplesPreviewWrapper: examplesConfig === null || examplesConfig === void 0 ? void 0 : examplesConfig.examplesPreviewWrapper,
}); })
.filter(function (example) { return example.source; });
};
var description = function (props) { return ({
type: story_section_1.SectionType.Description,
text: props.description,
title: props.title,
loading: props.loading,
width: tab_prop_types_1.width,
}); };
var importExample = function (storyConfig, props) { return ({
title: 'Import',
type: story_section_1.SectionType.ImportExample,
source: storyConfig.exampleImport,
loading: props.loading,
}); };
var demo = function (props) {
var Demo = props.demo, loading = props.loading;
if (!Demo) {
return null;
}
return {
title: 'Demo',
type: story_section_1.SectionType.Demo,
loading: loading,
component: Demo,
};
};
var doDont = function (props) {
var _a, _b;
if (!((_a = props.do) === null || _a === void 0 ? void 0 : _a.length) && !((_b = props.dont) === null || _b === void 0 ? void 0 : _b.length)) {
return null;
}
return {
type: story_section_1.SectionType.DoDont,
do: props.do && { list: props.do },
dont: props.dont && { list: props.dont },
loading: props.loading,
};
};
var divider = function () { return ({ type: story_section_1.SectionType.Divider }); };
var title = function (text) { return ({ type: story_section_1.SectionType.Title, title: text }); };
var includedComponents = function (props) { return ({
title: 'Included Components',
type: story_section_1.SectionType.IncludedComponents,
component: props,
}); };
var designTab = function (props, storyConfig) {
var _a, _b, _c, _d, _e;
var content = props.content;
var showCommonUseCaseExamples = (_a = props.content.commonUseCaseExamples) === null || _a === void 0 ? void 0 : _a.length;
var showIncludedComponents = (_b = props.content.includedComponents) === null || _b === void 0 ? void 0 : _b.length;
var showDeveloperExamples = (_c = props.content.developerExamples) === null || _c === void 0 ? void 0 : _c.length;
var showAccessibilityExamples = (_d = props.content.accessibilityExamples) === null || _d === void 0 ? void 0 : _d.length;
var examplesConfig = {
examplesPreviewWrapper: (_e = storyConfig.story) === null || _e === void 0 ? void 0 : _e.examplesPreviewWrapper,
};
return {
title: 'Design',
type: story_section_1.SectionType.Tab,
sections: tslib_1.__spreadArray(tslib_1.__spreadArray(tslib_1.__spreadArray(tslib_1.__spreadArray(tslib_1.__spreadArray(tslib_1.__spreadArray(tslib_1.__spreadArray(tslib_1.__spreadArray([
typeof props.demo === 'string'
? example({ source: props.demo, loading: props.loading })
: demo({ demo: props.demo, loading: props.loading }),
description({
title: content.title || 'Usage',
description: content.description,
loading: props.loading,
width: '60%',
}),
doDont({ do: content.do, dont: content.dont, loading: props.loading }),
importExample(storyConfig, { loading: props.loading }),
showIncludedComponents && includedComponents(content.includedComponents),
divider(),
title('Variations')
], examples(props.content.featureExamples, props.examples, examplesConfig), true), [
showDeveloperExamples && divider(),
showDeveloperExamples && title('Developer examples')
], false), examples(props.content.developerExamples, props.examples, examplesConfig), true), [
showAccessibilityExamples && divider(),
showAccessibilityExamples && title('Accessibility considerations')
], false), examples(props.content.accessibilityExamples, props.examples, examplesConfig), true), [
showCommonUseCaseExamples && divider(),
showCommonUseCaseExamples && title('Common use cases')
], false), examples(props.content.commonUseCaseExamples, props.examples, examplesConfig), true), [
divider(),
title('Feedback'),
description({ description: storyConfig.config.feedbackText }),
], false).filter(function (item) { return !!item; }),
};
};
var apiTab = function () { return ({
title: 'API',
type: story_section_1.SectionType.Tab,
sections: [
{
type: story_section_1.SectionType.Api,
},
],
}); };
var testkitTab = function () { return ({
title: 'Testkit',
type: story_section_1.SectionType.Tab,
sections: [
{
type: story_section_1.SectionType.Testkit,
},
],
}); };
var playgroundTab = function (props, storyConfig) { return ({
title: 'Playground',
type: story_section_1.SectionType.Tab,
sections: [
{
type: story_section_1.SectionType.Playground,
},
],
}); };
var tabs = function (props, storyConfig) {
var defaultTabs = {
design: designTab(props, storyConfig),
api: apiTab(),
testkit: testkitTab(),
playground: playgroundTab(props, storyConfig),
};
var defaultUserTabsValue = function (defaultabs) { return [
defaultabs.design,
defaultabs.api,
defaultabs.testkit,
]; };
var _a = props.tabs, userTabs = _a === void 0 ? defaultUserTabsValue : _a;
return userTabs(defaultTabs)
.filter(function (item) { var _a, _b; return !(item.title === 'Testkit' && ((_b = (_a = storyConfig === null || storyConfig === void 0 ? void 0 : storyConfig.config) === null || _a === void 0 ? void 0 : _a.story) === null || _b === void 0 ? void 0 : _b.testkit) === false); })
.reduce(function (result, tab) {
if (!tab.title) {
return result;
}
if (defaultTabs[tab.title.toLowerCase()]) {
return tslib_1.__spreadArray(tslib_1.__spreadArray([], result, true), [defaultTabs[tab.title.toLowerCase()]], false);
}
var pluginSection = tab.node && {
type: story_section_1.SectionType.Plugin,
handler: function () { return tab.node; },
};
return tslib_1.__spreadArray(tslib_1.__spreadArray([], result, true), [
{
title: tab.title,
type: story_section_1.SectionType.Tab,
sections: tslib_1.__spreadArray(tslib_1.__spreadArray([], (tab.sections ? tab.sections : []), true), (tab.node ? [pluginSection] : []), true),
},
], false);
}, []);
};
var storyPage = function (props, storyConfig) {
var _a;
return [
{
type: story_section_1.SectionType.Header,
sourceUrl: "".concat(storyConfig.config.repoBaseURL, "/").concat(storyConfig.storyName),
source: (_a = storyConfig.config.story) === null || _a === void 0 ? void 0 : _a.source,
loading: props.loading,
},
{
type: story_section_1.SectionType.Tabs,
tabs: tabs(props, storyConfig),
},
];
};
exports.storyPage = storyPage;
//# sourceMappingURL=story-page.js.map