Escribir historias CSF3
Exporte un objeto meta predeterminado e historias con nombre mediante Component Story Format 3.
Escribir historias CSF3 es una lección gratuita de React Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.
¿Qué es CSF3?
Component Story Format 3 (CSF3) es el formato actual de stories de Storybook. Las stories son objetos simples de JavaScript/TypeScript; en los casos sencillos no necesitan una función de renderizado.
La exportación Meta
Cada archivo de stories debe tener una exportación predeterminada —el objeto Meta— que describe el componente y establece la configuración compartida de las stories.
import type { Meta } from '@storybook/react';
import { Button } from './Button';
const meta: Meta<typeof Button> = {
title: 'UI/Button', // Storybook sidebar path
component: Button,
tags: ['autodocs'], // enables auto-generated docs page
};
export default meta;Exportaciones con nombre de stories
Cada exportación con nombre del archivo es una story. En CSF3, una story es un objeto con una propiedad args, que contiene las props del componente.
import type { StoryObj } from '@storybook/react';
type Story = StoryObj<typeof Button>;
export const Primary: Story = {
args: { label: 'Click me', variant: 'primary' },
};
export const Secondary: Story = {
args: { label: 'Cancel', variant: 'secondary' },
};
export const Disabled: Story = {
args: { label: 'Unavailable', disabled: true },
};Herencia de stories
Las stories heredan los args del objeto meta. Establezca los valores predeterminados compartidos en meta.args y sobrescríbalos por story cuando sea necesario.
const meta: Meta<typeof Button> = {
component: Button,
args: {
onClick: fn(), // from @storybook/test
disabled: false,
},
};
export const Large: Story = {
args: { size: 'large', label: 'Large Button' }, // merges with meta args
};Sobrescribir la función de renderizado
Proporcione una función render en una story para los casos complejos que necesiten un envoltorio JSX personalizado o varias instancias.
export const WithIcon: Story = {
render: (args) => (
<div style={{ display: 'flex', gap: 8 }}>
<Button {...args} icon={<StarIcon />} />
<Button {...args} icon={<HeartIcon />} />
</div>
),
args: { label: 'Action' },
};Decorators en stories individuales
Añada un array decorators a una story para envolverla en providers adicionales o aplicar un layout únicamente a esa story.
export const InsideCard: Story = {
decorators: [
(Story) => (
<div style={{ padding: 24, background: '#f5f5f5' }}>
<Story />
</div>
),
],
args: { label: 'Card Button' },
};Parámetros de las stories
Use parameters para configurar los addons por story, por ejemplo, para establecer el fondo o el viewport de un estado específico.
export const DarkMode: Story = {
parameters: {
backgrounds: { default: 'dark' },
},
args: { label: 'Dark Button', variant: 'primary' },
};La etiqueta autodocs
Añadir tags: ['autodocs'] al meta genera una página de documentación automática con una tabla de props y ejemplos interactivos de todas las stories con nombre.
Una story para cada estado
Escriba una story para cada estado significativo del componente: vacío, cargando, error, un solo elemento, muchos elementos, diseño RTL, etc.
export const Loading: Story = { args: { isLoading: true } };
export const Error: Story = { args: { error: 'Failed to load' } };
export const Empty: Story = { args: { items: [] } };
export const WithData: Story = { args: { items: mockUsers } };Convenciones de nombres
Use nombres de stories en PascalCase que describan el estado. Evite nombres genéricos como Default; sea específico: PrimaryDisabled, SecondaryWithIcon.
Agrupar stories con title
La propiedad title del meta utiliza una notación con barras para crear grupos anidados en la barra lateral de Storybook: 'Forms/Input' crea un grupo Forms con un subgrupo Input.
const meta: Meta<typeof TextInput> = {
title: 'Forms/TextInput',
component: TextInput,
};
// Sidebar: Forms → TextInput → Primary, Error, Disabled...Reutilizar stories en las pruebas
Las stories de CSF3 son objetos simples, por lo que puede importarlas y combinarlas en pruebas unitarias u otras stories.
import { Primary } from './Button.stories';
test('renders primary button', () => {
render(<Button {...Primary.args} />);
expect(screen.getByText('Click me')).toBeInTheDocument();
});Comprobación rápida
En CSF3, ¿cómo se definen las props o el estado de una story?
Resumen
Las stories de CSF3 son objetos tipados con args. Establezca los valores predeterminados compartidos en meta.args, sobrescríbalos por story, use render para JSX personalizado y añada tags: ['autodocs'] para generar documentación automáticamente. Escriba una story para cada estado significativo del componente.
Preguntas frecuentes
¿La lección «Escribir historias CSF3» es gratis?
Sí — el texto completo de «Escribir historias CSF3» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Escribir historias CSF3»?
Exporte un objeto meta predeterminado e historias con nombre mediante Component Story Format 3. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar React Academy?
No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Escribir historias CSF3»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de React Academy?
Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Configurar Storybook en un proyecto de React
- Escribir historias CSF3
- Args, Controls y el addon Actions
- Pruebas de Storybook y regresión visual