feat: agregamos semantic-versioning

dist/components/MyLabel.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import "./mylabel.css";
+export interface MyLabelProps {
+    /**
+     * Text to display in the label
+     */
+    label: string;
+    /**
+     * Label size
+     */
+    size: "normal" | "h1" | "h2" | "h3";
+    /**
+     * Change label text to CAPS
+     */
+    allCaps: boolean;
+    /**
+     * Change label color
+     */
+    color: "primary" | "secondary" | "tertiary";
+    /**
+     * Customize font color
+     */
+    fontColor?: string;
+    /**
+     * Customize background color
+     */
+    backgroundColor?: string;
+}
+export declare const MyLabel: ({ allCaps, color, label, size, fontColor, backgroundColor, }: MyLabelProps) => JSX.Element;

dist/components/MyLabel.js

@@ -0,0 +1,21 @@
+"use strict";
+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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MyLabel = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+require("./mylabel.css");
+var MyLabel = function (_a) {
+    var _b = _a.allCaps, allCaps = _b === void 0 ? false : _b, _c = _a.color, color = _c === void 0 ? "primary" : _c, _d = _a.label, label = _d === void 0 ? "No Label" : _d, _e = _a.size, size = _e === void 0 ? "normal" : _e, fontColor = _a.fontColor, _f = _a.backgroundColor, backgroundColor = _f === void 0 ? "transparent" : _f;
+    return ((0, jsx_runtime_1.jsx)("span", __assign({ className: "label ".concat(size, " text-").concat(color), style: { color: fontColor, backgroundColor: backgroundColor } }, { children: allCaps ? label.toUpperCase() : label })));
+};
+exports.MyLabel = MyLabel;

dist/components/mylabel.css

@@ -0,0 +1,27 @@
+.label {
+  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
+    "Lucida Sans", Arial, sans-serif;
+}
+
+.normal {
+  font-size: 14px;
+}
+.h1 {
+  font-size: 30px;
+}
+.h2 {
+  font-size: 25px;
+}
+.h3 {
+  font-size: 20px;
+}
+
+.text-primary {
+  color: #3d5a80;
+}
+.text-secondary {
+  color: #98c1d9;
+}
+.text-tertiary {
+  color: #ee6c4d;
+}

dist/index.d.ts

@@ -0,0 +1,4 @@
+export { Button } from "./stories/Button";
+export { Header } from "./stories/Header";
+export { MyLabel } from "./components/MyLabel";
+export { Page } from "./stories/Page";

dist/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Page = exports.MyLabel = exports.Header = exports.Button = void 0;
+var Button_1 = require("./stories/Button");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
+var Header_1 = require("./stories/Header");
+Object.defineProperty(exports, "Header", { enumerable: true, get: function () { return Header_1.Header; } });
+var MyLabel_1 = require("./components/MyLabel");
+Object.defineProperty(exports, "MyLabel", { enumerable: true, get: function () { return MyLabel_1.MyLabel; } });
+var Page_1 = require("./stories/Page");
+Object.defineProperty(exports, "Page", { enumerable: true, get: function () { return Page_1.Page; } });

dist/stories/Button.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import "./button.css";
+export interface ButtonProps {
+    /**
+     * Is this the principal call to action on the page?
+     */
+    primary?: boolean;
+    /**
+     * What background color to use
+     */
+    backgroundColor?: string;
+    /**
+     * How large should the button be?
+     */
+    size?: "small" | "medium" | "large";
+    /**
+     * Button contents
+     */
+    label: string;
+    /**
+     * Optional click handler
+     */
+    onClick?: () => void;
+}
+/**
+ * Primary UI component for user interaction
+ */
+export declare const Button: ({ primary, size, backgroundColor, label, ...props }: ButtonProps) => JSX.Element;

dist/stories/Button.js

@@ -0,0 +1,38 @@
+"use strict";
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+require("./button.css");
+/**
+ * Primary UI component for user interaction
+ */
+var Button = function (_a) {
+    var _b = _a.primary, primary = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? "medium" : _c, backgroundColor = _a.backgroundColor, label = _a.label, props = __rest(_a, ["primary", "size", "backgroundColor", "label"]);
+    var mode = primary
+        ? "storybook-button--primary"
+        : "storybook-button--secondary";
+    return ((0, jsx_runtime_1.jsx)("button", __assign({ type: "button", className: ["storybook-button", "storybook-button--".concat(size), mode].join(" "), style: { backgroundColor: backgroundColor } }, props, { children: label })));
+};
+exports.Button = Button;

dist/stories/Button.stories.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+declare const _default: ComponentMeta<({ primary, size, backgroundColor, label, ...props }: import("./Button").ButtonProps) => JSX.Element>;
+export default _default;
+export declare const Primary: ComponentStory<({ primary, size, backgroundColor, label, ...props }: import("./Button").ButtonProps) => JSX.Element>;
+export declare const Secondary: ComponentStory<({ primary, size, backgroundColor, label, ...props }: import("./Button").ButtonProps) => JSX.Element>;
+export declare const Large: ComponentStory<({ primary, size, backgroundColor, label, ...props }: import("./Button").ButtonProps) => JSX.Element>;
+export declare const Small: ComponentStory<({ primary, size, backgroundColor, label, ...props }: import("./Button").ButtonProps) => JSX.Element>;

dist/stories/Button.stories.js

@@ -0,0 +1,47 @@
+"use strict";
+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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Small = exports.Large = exports.Secondary = exports.Primary = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Button_1 = require("./Button");
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+exports.default = {
+    title: "Example/Button",
+    component: Button_1.Button,
+    // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+    argTypes: {
+        backgroundColor: { control: "color" },
+    },
+};
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+var Template = function (args) { return (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({}, args)); };
+exports.Primary = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+exports.Primary.args = {
+    primary: true,
+    label: "Button",
+};
+exports.Secondary = Template.bind({});
+exports.Secondary.args = {
+    label: "Button",
+};
+exports.Large = Template.bind({});
+exports.Large.args = {
+    size: "large",
+    label: "Button",
+};
+exports.Small = Template.bind({});
+exports.Small.args = {
+    size: "small",
+    label: "Button",
+};

dist/stories/Header.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import "./header.css";
+declare type User = {
+    name: string;
+};
+export interface HeaderProps {
+    user?: User;
+    onLogin: () => void;
+    onLogout: () => void;
+    onCreateAccount: () => void;
+}
+export declare const Header: ({ user, onLogin, onLogout, onCreateAccount, }: HeaderProps) => JSX.Element;
+export {};

dist/stories/Header.js

@@ -0,0 +1,22 @@
+"use strict";
+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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Button_1 = require("./Button");
+require("./header.css");
+var Header = function (_a) {
+    var user = _a.user, onLogin = _a.onLogin, onLogout = _a.onLogout, onCreateAccount = _a.onCreateAccount;
+    return ((0, jsx_runtime_1.jsx)("header", { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "wrapper" }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsxs)("g", __assign({ fill: "none", fillRule: "evenodd" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z", fill: "#FFF" }), (0, jsx_runtime_1.jsx)("path", { d: "M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z", fill: "#555AB9" }), (0, jsx_runtime_1.jsx)("path", { d: "M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z", fill: "#91BAF8" })] })) })), (0, jsx_runtime_1.jsx)("h1", { children: "Acme" })] }), (0, jsx_runtime_1.jsx)("div", { children: user ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("span", __assign({ className: "welcome" }, { children: ["Welcome, ", (0, jsx_runtime_1.jsx)("b", { children: user.name }), "!"] })), (0, jsx_runtime_1.jsx)(Button_1.Button, { size: "small", onClick: onLogout, label: "Log out" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { size: "small", onClick: onLogin, label: "Log in" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { primary: true, size: "small", onClick: onCreateAccount, label: "Sign up" })] })) })] })) }));
+};
+exports.Header = Header;

dist/stories/Header.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<({ user, onLogin, onLogout, onCreateAccount, }: import("./Header").HeaderProps) => JSX.Element>;
+export default _default;
+export declare const LoggedIn: ComponentStory<({ user, onLogin, onLogout, onCreateAccount, }: import("./Header").HeaderProps) => JSX.Element>;
+export declare const LoggedOut: ComponentStory<({ user, onLogin, onLogout, onCreateAccount, }: import("./Header").HeaderProps) => JSX.Element>;

dist/stories/Header.stories.js

@@ -0,0 +1,33 @@
+"use strict";
+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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoggedOut = exports.LoggedIn = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Header_1 = require("./Header");
+exports.default = {
+    title: 'Example/Header',
+    component: Header_1.Header,
+    parameters: {
+        // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+        layout: 'fullscreen',
+    },
+};
+var Template = function (args) { return (0, jsx_runtime_1.jsx)(Header_1.Header, __assign({}, args)); };
+exports.LoggedIn = Template.bind({});
+exports.LoggedIn.args = {
+    user: {
+        name: 'Jane Doe',
+    },
+};
+exports.LoggedOut = Template.bind({});
+exports.LoggedOut.args = {};

dist/stories/Page.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import './page.css';
+export declare const Page: React.VFC;

dist/stories/Page.stories.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<React.VFC<{}>>;
+export default _default;
+export declare const LoggedOut: ComponentStory<React.VFC<{}>>;
+export declare const LoggedIn: ComponentStory<React.VFC<{}>>;