@up-group/react-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
139 lines • 6.99 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var react_1 = require("@storybook/react");
var theming_1 = require("../../../Common/theming");
var themedComponents_1 = require("../../../Common/theming/themedComponents");
var _1 = require("./");
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,
},
};
react_1.storiesOf('UpLoadingIndicator', module)
.addWithInfo('Simple usage', 'Utilisation du composant en lui passant les données à afficher', function () { return (React.createElement(themedComponents_1.ThemeProvider, { theme: theming_1.default },
React.createElement(_1.default, { isLoading: true, message: "Chargement en cours" }))); }).addWithInfo('Modal', 'Utilisation du composant modal', function () { return (React.createElement(themedComponents_1.ThemeProvider, { theme: theming_1.default },
React.createElement("div", { style: styles.main },
React.createElement(_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.")))); }).addWithInfo('Modal sur une zone', 'Utilisation du composant modal', function () { return (React.createElement(themedComponents_1.ThemeProvider, { theme: theming_1.default },
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(_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