tobby-my-storybook-components/dist/stories/components/MyLabel.stories.js

Para practicar React Components + Storybook + NPM Publish

import { jsx as _jsx } from "react/jsx-runtime";
import { MyLabel } from "../../components/MyLabel";
// const meta: Meta<typeof MyLabel> = {
//     // title: 'UI/Etiquetas/MyLabel',
//     title: 'UI/MyLabel',
//     component: MyLabel,
// };
// Lo de arriba tambien se puede escribir así:
const meta = {
    // title: 'UI/Etiquetas/MyLabel',
    title: 'UI/MyLabel',
    component: MyLabel,
    // Habilita la documentación generada automáticamente para la historia del componente
    tags: ['autodocs'],
    // I. Se puede definir argumentos a nivel de componente; se aplicarán a todas las historias del componente a
    // menos que despues se sobrescriban.
    //
    // Crea tipos especificos específicos:
    argTypes: {
        // Con esto le cambio el tipo de control a size para que en la documentacion se mueste con un select en
        // lugar de un option. Ademas le podemos indicar las opciones que pueden ser distintas a las definidas en
        // el componente o solo algunas de ellas.
        // size: {control: 'select', options: ['Otra opcion']}
        size: { control: 'select' },
        color: { control: 'select' },
        fontColor: { control: 'color' }, // con control:'color', se muestra un selector de colores.
    },
    // Argumenos para todos.
    args: {},
    // F.
};
export default meta;
export const Basic = {
    render: (args) => _jsx(MyLabel, { ...args }),
    // Con esto le indicamos un valor por defecto en size.
    args: {
        size: 'normal',
        allCaps: false // true para capitalizar toda la palabra.
    },
};
// Esta es otra forma de pasar un valor por defecto.
// Basic.args = {
//     size: 'normal'
// }
export const AllCaps = {
    render: (args) => _jsx(MyLabel, { ...args }),
    args: {
        size: 'normal',
        allCaps: true
    },
};
export const Secondary = {
    render: (args) => _jsx(MyLabel, { ...args }),
    args: {
        size: 'normal',
        color: 'secondary'
    },
};
export const Tertiary = {
    render: (args) => _jsx(MyLabel, { ...args }),
    args: {
        size: 'normal',
        color: 'tertiary'
    },
};
export const CustomFontColor = {
    render: (args) => _jsx(MyLabel, { ...args }),
    args: {
        size: 'h1',
        fontColor: '#5517ac'
    },
};