feat: agregamos semantic-versioning

.gitignore

@@ -9,7 +9,7 @@ lerna-debug.log*
 build-storybook.log
 
 node_modules
-dist
+
 dist-ssr
 *.local
 /storybook-static

dist/components/MyLabel.d.ts

@@ -0,0 +1,31 @@
+import './mylabel.css';
+export interface MyLabelProps {
+    /**
+     * Este es el mensaje que va a mostrar en la etiqueta
+     */
+    label: string;
+    /**
+     * Este es el tamaño por defecto del etiqueta
+     */
+    size?: 'normal' | 'h1' | 'h2' | 'h3';
+    /**
+     * Si quieres todo Capitalizado
+     */
+    allCaps?: boolean;
+    /**
+     * Colores de la etiqueta
+     */
+    color?: 'primary' | 'secundary' | 'tertiary';
+    /**
+     * Color personalizado de la fuente
+     */
+    fontColor?: string;
+    /**
+     * Color de fondo personalizado de la fuente
+     */
+    backgroundColor?: string;
+}
+/**
+ * Primera prueba para el StoryBook, una etiqueta
+ */
+export declare const MyLabel: ({ label, size, color, allCaps, fontColor, backgroundColor }: MyLabelProps) => import("react/jsx-runtime").JSX.Element;

dist/components/MyLabel.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './mylabel.css';
+/**
+ * Primera prueba para el StoryBook, una etiqueta
+ */
+export const MyLabel = ({ label = 'No label', size = 'normal', color = 'primary', allCaps = false, fontColor, backgroundColor = 'transparent' }) => {
+    return (_jsx("span", { className: `${size} label text-${color}`, style: { color: fontColor, backgroundColor }, children: allCaps ? label.toUpperCase() : label }));
+};

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,4 @@
+export { Button } from "./stories/Button";
+export { Header } from "./stories/Header";
+export { MyLabel } from "./components/MyLabel";
+export { Page } from "./stories/Page";

dist/stories/Button.d.ts

@@ -0,0 +1,27 @@
+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) => import("react/jsx-runtime").JSX.Element;

dist/stories/Button.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './button.css';
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({ primary = false, size = 'medium', backgroundColor, label, ...props }) => {
+    const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+    return (_jsx("button", { type: "button", className: ['storybook-button', `storybook-button--${size}`, mode].join(' '), style: { backgroundColor }, ...props, children: label }));
+};

dist/stories/Button.stories.d.ts

@@ -0,0 +1,17 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ primary, size, backgroundColor, label, ...props }: import("./Button").ButtonProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    argTypes: {
+        backgroundColor: {
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Large: Story;
+export declare const Small: Story;

dist/stories/Button.stories.js

@@ -0,0 +1,35 @@
+import { Button } from './Button';
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta = {
+    title: 'Example/Button',
+    component: Button,
+    tags: ['autodocs'],
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+};
+export default meta;
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Primary = {
+    args: {
+        primary: true,
+        label: 'Button',
+    },
+};
+export const Secondary = {
+    args: {
+        label: 'Button',
+    },
+};
+export const Large = {
+    args: {
+        size: 'large',
+        label: 'Button',
+    },
+};
+export const Small = {
+    args: {
+        size: 'small',
+        label: 'Button',
+    },
+};

dist/stories/Header.d.ts

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

dist/stories/Header.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ user, onLogin, onLogout, onCreateAccount }: import("./Header").HeaderProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LoggedIn: Story;
+export declare const LoggedOut: Story;

dist/stories/Header.stories.js

@@ -0,0 +1,20 @@
+import { Header } from './Header';
+const meta = {
+    title: 'Example/Header',
+    component: Header,
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+    tags: ['autodocs'],
+    parameters: {
+        // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+export const LoggedIn = {
+    args: {
+        user: {
+            name: 'Jane Doe',
+        },
+    },
+};
+export const LoggedOut = {};

dist/stories/Page.d.ts

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

dist/stories/Page.stories.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").FC<{}>;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LoggedOut: Story;
+export declare const LoggedIn: Story;

dist/stories/Page.stories.js

@@ -0,0 +1,22 @@
+import { within, userEvent } from '@storybook/testing-library';
+import { Page } from './Page';
+const meta = {
+    title: 'Example/Page',
+    component: Page,
+    parameters: {
+        // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+export const LoggedOut = {};
+// More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
+export const LoggedIn = {
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const loginButton = await canvas.getByRole('button', {
+            name: /Log in/i,
+        });
+        await userEvent.click(loginButton);
+    },
+};

dist/stories/button.css

@@ -0,0 +1,30 @@
+.storybook-button {
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-weight: 700;
+  border: 0;
+  border-radius: 3em;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 1;
+}
+.storybook-button--primary {
+  color: white;
+  background-color: #1ea7fd;
+}
+.storybook-button--secondary {
+  color: #333;
+  background-color: transparent;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+}
+.storybook-button--small {
+  font-size: 12px;
+  padding: 10px 16px;
+}
+.storybook-button--medium {
+  font-size: 14px;
+  padding: 11px 20px;
+}
+.storybook-button--large {
+  font-size: 16px;
+  padding: 12px 24px;
+}

dist/stories/components/MyLabel.stories.d.ts

@@ -0,0 +1,25 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ label, size, color, allCaps, fontColor, backgroundColor }: import("../../components/MyLabel").MyLabelProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    argTypes: {
+        color: {
+            control: string;
+        };
+        fontColor: {
+            control: string;
+        };
+        backgroundColor: {
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Basic: Story;
+export declare const AllCaps: Story;
+export declare const Secondary: Story;
+export declare const Tertiary: Story;
+export declare const CustomFontColor: Story;
+export declare const CustomBackgroundColor: Story;

dist/stories/components/MyLabel.stories.js

@@ -0,0 +1,58 @@
+import { MyLabel } from "../../components/MyLabel";
+const meta = {
+    title: 'UI/MyLabel',
+    component: MyLabel,
+    tags: ['autodocs'],
+    argTypes: {
+        color: { control: 'select' },
+        fontColor: { control: 'color' },
+        backgroundColor: { control: 'color' },
+    },
+};
+export default meta;
+export const Basic = {
+    args: {
+        label: 'No label',
+        size: 'normal',
+        allCaps: false //true: capitalizar toda la Etiqueta 
+    }
+};
+export const AllCaps = {
+    args: {
+        label: 'No label',
+        size: 'normal',
+        allCaps: true
+    }
+};
+export const Secondary = {
+    args: {
+        label: 'No label',
+        size: 'normal',
+        color: 'secundary'
+    }
+};
+export const Tertiary = {
+    args: {
+        label: 'No label',
+        size: 'normal',
+        color: 'tertiary'
+    }
+};
+// TODO: Tarea: CustomFontColor
+// fontColor: #5517ac
+// size: 'h1'
+export const CustomFontColor = {
+    args: {
+        label: 'No label',
+        size: 'h1',
+        fontColor: '#5517ac'
+    }
+};
+export const CustomBackgroundColor = {
+    args: {
+        label: 'No label',
+        size: 'h1',
+        fontColor: 'white',
+        backgroundColor: 'black'
+    }
+};