Implementando Storybook en la Librería

Al momento de crear un componente en la librería, es posible crear un ejemplo de uso para el mismo en Storybook. Esto es bastante útil para visualizar cómo se comporta el componente en diferentes estados y configuraciones, permitiendo iterar rápidamente en su desarrollo.

Para crear un ejemplo de uso de un componente, sigue estos pasos:

1. Crea un archivo .stories.tsx: En la misma carpeta donde se define el componente, crea un archivo con el mismo nombre del componente y la extensión .stories.tsx. Por ejemplo, si tienes un componente BaseButton.tsx, crea BaseButton.stories.tsx.

2. Definir los Meta y StoryObj:

   • Define el objeto Meta que describe el componente, sus propiedades, y los controles que estarán disponibles en la interfaz de Storybook.
   • Usa StoryObj para cada historia (estado o configuración) específica de tu componente.

3. Agregar args y decorators:

   • Define los valores por defecto (args) para cada historia que ilustran diferentes configuraciones del componente.
   • Agrega decorators si es necesario personalizar el entorno de visualización de las historias, como el contenedor View centrado.

---

Ejemplo de Story para BaseButton

import type { Meta, StoryObj } from "@storybook/react";
import { BaseButton, ThemeTemplate } from "atomic_components_explorax";
import { ImageSourcePropType, Platform, View } from "react-native";

// Meta configuración del componente
const MyButtonMeta: Meta<typeof BaseButton> = {
  title: "Buttons/BaseButton",
  component: BaseButton,
  argTypes: {
    onPress: { action: "pressed the button" },
  },
  args: {
    text: "Hello world",
    initialDelay: 3000,
    playBrillo: false,
    brilloStyle: undefined,
  },
  decorators: [
    (Story) => (
      <View style={{ alignItems: "center", justifyContent: "center", flex: 1 }}>
        <Story />
      </View>
    ),
  ],
};

export default MyButtonMeta;

// Ejemplo 1: Configuración básica
export const AnotherExample: StoryObj<typeof BaseButton> = {
  args: {
    title: "Another example",
    colorCombination: "answers",
    playBrillo: false,
    isCorrect: true,
    brilloStyle: {
      width: 300,
      height: 300,
      flexDirection: "row",
      justifyContent: "center",
      alignItems: "center",
    },
  },
};

// Ejemplo 2: Indicador de Correcto
export const CorrectIndicator: StoryObj<typeof BaseButton> = {
  args: {
    title: "Correct Indicator",
    colorCombination: "answers",
    showIndicator: true,
    isCorrect: true,
    disable: true,
  },
};

// Ejemplo 3: Indicador de Incorrecto
export const IncorrectIndicator: StoryObj<typeof BaseButton> = {
  args: {
    title: "Incorrect Indicator",
    colorCombination: "answers",
    showIndicator: true,
    isCorrect: false,
  },
};

// Ejemplo 4: Con delay inicial aplicado
export const WithInitialDelay: StoryObj<typeof BaseButton> = {
  args: {
    title: "With Initial Delay",
    colorCombination: "default",
    playBrillo: false,
    initialDelay: 2000,
  },
};

// Ejemplo 5: Botón con Icono y Texto
const googleIcon: ImageSourcePropType = require("atomic_components_explorax/assets/icons/icon_google.png");

export const IconAndText: StoryObj<typeof BaseButton> = {
  args: {
    title: "Inicia sesión con Google",
    colorCombination: {
      fontColor: "#000000",
      frontColor: "#FFFFFF",
      depthColor: "#f0f0f0",
      disable: false,
      otherStyles: {
        fontSize: 14,
        textAlign: "center",
        fontFamily: "lato-bold",
      },
    },
    icon: googleIcon,
    containerStyles: {
      minWidth: 150,
      height: Platform.OS === "web" ? 50 : 48,
      paddingVertical: 15,
      paddingHorizontal: 12,
      borderRadius: 15,
    },
    iconStyle: {
      width: 18,
      height: 18,
      resizeMode: "contain",
      marginRight: 10,
    },
    textStyle: {
      color: "#000000",
      fontFamily: "lato-bold",
      fontSize: 14,
      textAlign: "center",
    },
  },
};

Consideraciones

• args: Define valores específicos para cada historia, simulando diferentes configuraciones de tu componente.
• decorators: Envuélven cada Story en un View centrado para facilitar su visualización.
• actions: Usa el atributo action en argTypes para simular interacciones, como en el evento onPress.

Ambiente de Desarrollo

Storybook debe ejecutarse en un entorno de desarrollo. En este caso, utiliza la carpeta example dentro del proyecto, donde se configura Storybook para visualizar y probar tus componentes. Coloca las historias en .storybook/stories para mantener una organización clara de los ejemplos.