design-system-simplefi
Version:
Design System for SimpleFi Applications
66 lines • 3.48 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import React, { useContext } from 'react';
import { DocsContext, DocsStory, Heading, Anchor, Subheading, Description, Canvas, Story, } from '@storybook/addon-docs';
import { TabsState } from '@storybook/components';
import { Design } from 'storybook-addon-designs/blocks';
import { isNonEmptyString } from 'ramda-adjunct';
import styled from 'styled-components';
var ImplementationBlock = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding-top: 25px;\n"], ["\n padding-top: 25px;\n"])));
var getDocsStories = function (context) {
var storyStore = context.storyStore, kind = context.kind;
if (!storyStore) {
return [];
}
return storyStore
.getStoriesForKind(kind)
.filter(function (s) { var _a, _b; return !((_b = (_a = s.parameters) === null || _a === void 0 ? void 0 : _a.docs) === null || _b === void 0 ? void 0 : _b.disable); });
};
export var StoriesWithDesign = function (_a) {
var title = _a.title, _b = _a.includePrimary, includePrimary = _b === void 0 ? false : _b;
var context = useContext(DocsContext);
var componentStories = getDocsStories(context);
var stories = componentStories;
if (!includePrimary)
stories = stories.slice(1);
if (!stories || stories.length === 0) {
return null;
}
return (React.createElement(React.Fragment, null,
React.createElement(Heading, null, title),
stories.map(function (story) {
var _a;
if (story) {
var id = story.id, name_1 = story.name, withToolbar = story.withToolbar, _b = story.parameters, docs = _b.docs, design = _b.design;
var description = (_a = docs.description) === null || _a === void 0 ? void 0 : _a.story;
return isNonEmptyString(design === null || design === void 0 ? void 0 : design.url) ? (React.createElement(Anchor, { storyId: id, key: id },
name_1 && React.createElement(Subheading, null, name_1),
description && React.createElement(Description, { markdown: description }),
React.createElement(TabsState, { initial: "implementation" },
React.createElement("div", { id: "implementation", title: "Implementation" },
React.createElement(Canvas, { withToolbar: withToolbar },
React.createElement(Story, { id: id }))),
React.createElement("div", { id: "design", title: "Design" },
React.createElement(Design, { storyId: id }))))) : React.createElement(DocsStory, __assign({ key: story.id }, story, { expanded: true }));
}
return null;
})));
};
StoriesWithDesign.defaultProps = {
title: 'Stories',
};
var templateObject_1;
//# sourceMappingURL=StoriesWithDesign.js.map