@arche-mc2/arche-controls
Version:
We know that there are a ton of react UI library projects to choose from. Our hope with this one is to provide the next generation of react components that you can use to bootstrap your next project, or as a reference for building a UIKit. Read on to get
188 lines • 8.76 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var UpLoadingIndicator_1 = require("./UpLoadingIndicator");
var stories_1 = require("../../../Common/stories");
var addon_knobs_1 = require("@storybook/addon-knobs");
exports.default = {
title: 'Components/Display/UpLoadingIndicator',
decorators: [addon_knobs_1.withKnobs, stories_1.getRootContainer('UpLoadingIndicator')],
component: UpLoadingIndicator_1.LoadingIndicator
};
var styles = {
main: {
margin: 15,
maxWidth: 600,
lineHeight: 1.4,
fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
},
logo: {
width: 200,
},
link: {
color: '#1474f3',
textDecoration: 'none',
borderBottom: '1px solid #1474f3',
paddingBottom: 2,
},
code: {
fontSize: 15,
fontWeight: 600,
padding: '2px 5px',
border: '1px solid #eae9e9',
borderRadius: 4,
backgroundColor: '#f3f2f2',
color: '#3a3a3a',
},
note: {
opacity: 0.5,
},
};
exports.General = function () { return (React.createElement(UpLoadingIndicator_1.default, { isLoading: true, message: "Chargement en cours" })); };
exports.Modal = function () { return (React.createElement("div", { style: styles.main },
React.createElement(UpLoadingIndicator_1.default, { isLoading: true, displayMode: "modal", message: "Chargement en cours" }),
React.createElement("h1", null, "Welcome to STORYBOOK"),
React.createElement("p", null, "This is a UI component dev environment for your app."),
React.createElement("p", null,
"We've added some basic stories inside the",
' ',
React.createElement("code", { style: styles.code }, "src/stories"),
' ',
"directory.",
React.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.createElement("br", null),
"(Basically a story is like a visual test case.)"),
React.createElement("p", null,
"See these sample",
' ',
React.createElement("a", { style: styles.link, href: "#" }, "stories"),
' ',
"for a component called",
' ',
React.createElement("code", { style: styles.code }, "Button")),
React.createElement("p", null,
"Just like that, you can add your own components as stories.",
React.createElement("br", null),
"You can also edit those components and see changes right away.",
React.createElement("br", null),
"(Try editing the ",
React.createElement("code", { style: styles.code }, "Button"),
" component located at ",
React.createElement("code", { style: styles.code }, "src/stories/Button.js"),
".)"),
React.createElement("p", null,
"This is just one thing you can do with Storybook.",
React.createElement("br", null),
"Have a look at the",
' ',
React.createElement("a", { style: styles.link, href: "https://github.com/storybooks/storybook", target: "_blank" }, "Storybook"),
' ',
"repo for more information."),
React.createElement("p", { style: styles.note },
React.createElement("b", null, "NOTE:"),
React.createElement("br", null),
"Have a look at the",
' ',
React.createElement("code", { style: styles.code }, ".storybook/webpack.config.js"),
' ',
"to add webpack loaders and plugins you are using in this project."))); };
exports.Layer = function () { return (React.createElement("div", { style: styles.main },
React.createElement(UpLoadingIndicator_1.default, { isLoading: true, displayMode: "layer", message: "Chargement en cours" }),
React.createElement("h1", null, "Welcome to STORYBOOK"),
React.createElement("p", null, "This is a UI component dev environment for your app."),
React.createElement("p", null,
"We've added some basic stories inside the",
' ',
React.createElement("code", { style: styles.code }, "src/stories"),
' ',
"directory.",
React.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.createElement("br", null),
"(Basically a story is like a visual test case.)"),
React.createElement("p", null,
"See these sample",
' ',
React.createElement("a", { style: styles.link, href: "#" }, "stories"),
' ',
"for a component called",
' ',
React.createElement("code", { style: styles.code }, "Button")),
React.createElement("p", null,
"Just like that, you can add your own components as stories.",
React.createElement("br", null),
"You can also edit those components and see changes right away.",
React.createElement("br", null),
"(Try editing the ",
React.createElement("code", { style: styles.code }, "Button"),
" component located at ",
React.createElement("code", { style: styles.code }, "src/stories/Button.js"),
".)"),
React.createElement("p", null,
"This is just one thing you can do with Storybook.",
React.createElement("br", null),
"Have a look at the",
' ',
React.createElement("a", { style: styles.link, href: "https://github.com/storybooks/storybook", target: "_blank" }, "Storybook"),
' ',
"repo for more information."),
React.createElement("p", { style: styles.note },
React.createElement("b", null, "NOTE:"),
React.createElement("br", null),
"Have a look at the",
' ',
React.createElement("code", { style: styles.code }, ".storybook/webpack.config.js"),
' ',
"to add webpack loaders and plugins you are using in this project."))); };
exports.Zone = function () { return (React.createElement("div", { style: styles.main },
React.createElement("h1", null, "Welcome to STORYBOOK"),
React.createElement("p", null, "This is a UI component dev environment for your app."),
React.createElement("p", null,
"We've added some basic stories inside the",
' ',
React.createElement("code", { style: styles.code }, "src/stories"),
' ',
" directory.",
React.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.createElement("br", null),
"(Basically a story is like a visual test case.)"),
React.createElement("p", null,
"See these sample",
' ',
React.createElement("a", { style: styles.link, href: "#" }, "stories"),
' ',
"for a component called",
' ',
React.createElement("code", { style: styles.code }, "Button"),
". "),
React.createElement("p", null,
"Just like that, you can add your own components as stories.",
React.createElement("br", null),
"You can also edit those components and see changes right away.",
React.createElement("br", null),
"(Try editing the ",
React.createElement("code", { style: styles.code }, "Button"),
" component located at ",
React.createElement("code", { style: styles.code }, "src/stories/Button.js"),
".)"),
React.createElement("div", { style: { position: "relative" } },
React.createElement(UpLoadingIndicator_1.default, { isLoading: true, displayMode: "modal", message: "Chargement en cours" }),
React.createElement("p", null,
"This is just one thing you can do with Storybook.",
React.createElement("br", null),
"Have a look at the",
' ',
React.createElement("a", { style: styles.link, href: "https://github.com/storybooks/storybook", target: "_blank" }, "Storybook"),
' ',
"repo for more information."),
React.createElement("p", { style: styles.note },
React.createElement("b", null, "NOTE:"),
React.createElement("br", null),
"Have a look at the",
' ',
React.createElement("code", { style: styles.code }, ".storybook/webpack.config.js"),
' ',
"to add webpack loaders and plugins you are using in this project.")))); };
//# sourceMappingURL=index.stories.js.map