1 | "use strict";
|
2 |
|
3 | require("core-js/modules/es.object.keys.js");
|
4 |
|
5 | require("core-js/modules/es.symbol.js");
|
6 |
|
7 | Object.defineProperty(exports, "__esModule", {
|
8 | value: true
|
9 | });
|
10 | exports.default = void 0;
|
11 |
|
12 | require("core-js/modules/es.object.assign.js");
|
13 |
|
14 | var _react = _interopRequireDefault(require("react"));
|
15 |
|
16 | var _excluded = ["children"],
|
17 | _excluded2 = ["children", "href", "target", "rel"],
|
18 | _excluded3 = ["children", "onClick"];
|
19 |
|
20 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
21 |
|
22 | function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
23 |
|
24 | function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
25 |
|
26 | function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
27 |
|
28 | var Main = function Main(props) {
|
29 | return _react.default.createElement("article", _extends({}, props, {
|
30 | style: {
|
31 | padding: 15,
|
32 | lineHeight: 1.4,
|
33 | fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
|
34 | backgroundColor: '#fff',
|
35 | color: '#000'
|
36 | }
|
37 | }));
|
38 | };
|
39 |
|
40 | var Title = function Title(_ref) {
|
41 | var children = _ref.children,
|
42 | props = _objectWithoutProperties(_ref, _excluded);
|
43 |
|
44 | return _react.default.createElement("h1", props, children);
|
45 | };
|
46 |
|
47 | var Note = function Note(props) {
|
48 | return _react.default.createElement("p", _extends({}, props, {
|
49 | style: {
|
50 | opacity: 0.5
|
51 | }
|
52 | }));
|
53 | };
|
54 |
|
55 | var InlineCode = function InlineCode(props) {
|
56 | return _react.default.createElement("code", _extends({}, props, {
|
57 | style: {
|
58 | fontSize: 15,
|
59 | fontWeight: 600,
|
60 | padding: '2px 5px',
|
61 | border: '1px solid #eae9e9',
|
62 | borderRadius: 4,
|
63 | backgroundColor: '#f3f2f2',
|
64 | color: '#3a3a3a'
|
65 | }
|
66 | }));
|
67 | };
|
68 |
|
69 | var Link = function Link(_ref2) {
|
70 | var children = _ref2.children,
|
71 | href = _ref2.href,
|
72 | target = _ref2.target,
|
73 | rel = _ref2.rel,
|
74 | props = _objectWithoutProperties(_ref2, _excluded2);
|
75 |
|
76 | return _react.default.createElement("a", _extends({
|
77 | href: href
|
78 | }, props, {
|
79 | target: target,
|
80 | rel: rel,
|
81 | style: {
|
82 | color: '#1474f3',
|
83 | textDecoration: 'none',
|
84 | borderBottom: '1px solid #1474f3',
|
85 | paddingBottom: 2
|
86 | }
|
87 | }), children);
|
88 | };
|
89 |
|
90 | var NavButton = function NavButton(_ref3) {
|
91 | var children = _ref3.children,
|
92 | onClick = _ref3.onClick,
|
93 | props = _objectWithoutProperties(_ref3, _excluded3);
|
94 |
|
95 | return _react.default.createElement("button", _extends({}, props, {
|
96 | type: "button",
|
97 | onClick: onClick,
|
98 | style: {
|
99 | color: '#1474f3',
|
100 | textDecoration: 'none',
|
101 | borderBottom: '1px solid #1474f3',
|
102 | paddingBottom: 2,
|
103 | borderTop: 'none',
|
104 | borderRight: 'none',
|
105 | borderLeft: 'none',
|
106 | backgroundColor: 'transparent',
|
107 | padding: 0,
|
108 | cursor: 'pointer',
|
109 | font: 'inherit'
|
110 | }
|
111 | }), children);
|
112 | };
|
113 |
|
114 | var Welcome = function Welcome(_ref4) {
|
115 | var showApp = _ref4.showApp;
|
116 | return _react.default.createElement(Main, null, _react.default.createElement(Title, null, "Welcome to storybook"), _react.default.createElement("p", null, "This is a UI component dev environment for your app."), _react.default.createElement("p", null, "We've added some basic stories inside the ", _react.default.createElement(InlineCode, null, "src/stories"), " directory.", _react.default.createElement("br", null), "A story is a single state of one or more UI components. You can have as many stories as you want.", _react.default.createElement("br", null), "(Basically a story is like a visual test case.)"), _react.default.createElement("p", null, "See these sample ", _react.default.createElement(NavButton, {
|
117 | onClick: showApp
|
118 | }, "stories"), " for a component called\xA0", _react.default.createElement(InlineCode, null, "Button"), "."), _react.default.createElement("p", null, "Just like that, you can add your own components as stories.", _react.default.createElement("br", null), "You can also edit those components and see changes right away.", _react.default.createElement("br", null), "(Try editing the ", _react.default.createElement(InlineCode, null, "Button"), " stories located at\xA0", _react.default.createElement(InlineCode, null, "src/stories/1-Button.stories.js"), ".)"), _react.default.createElement("p", null, "Usually we create stories with smaller UI components in the app.", _react.default.createElement("br", null), "Have a look at the\xA0", _react.default.createElement(Link, {
|
119 | href: "https://storybook.js.org/basics/writing-stories",
|
120 | target: "_blank",
|
121 | rel: "noopener noreferrer"
|
122 | }, "Writing Stories"), "\xA0section in our documentation."), _react.default.createElement(Note, null, _react.default.createElement("b", null, "NOTE:"), _react.default.createElement("br", null), "Have a look at the ", _react.default.createElement(InlineCode, null, ".storybook/webpack.config.js"), " to add webpack loaders and plugins you are using in this project."));
|
123 | };
|
124 |
|
125 | exports.default = Welcome;
|
126 | Welcome.displayName = 'Welcome'; |
\ | No newline at end of file |