Args, controles e o complemento Actions
Use args para tornar as histórias interativas e o complemento actions para registrar eventos dos componentes.
Args, controles e o complemento Actions é uma aula grátis de React Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.
O que são os argumentos
Os argumentos são as entradas, ou propriedades, de uma história. O Storybook usa o objeto args para renderizar o componente e alimentar o painel Controls — um editor de propriedades ao vivo na interface do Storybook.
Definindo argumentos
Defina os argumentos no objeto da história. O Storybook deduz o tipo de controle a partir do tipo da propriedade no TypeScript.
export const Primary: Story = {
args: {
label: 'Click me',
variant: 'primary',
size: 'medium',
disabled: false,
},
};O painel Controls
Quando os argumentos são definidos, o Storybook renderiza controles interativos no painel Controls, abaixo da área de visualização. Alterar um controle renderiza novamente a história com novas propriedades — sem precisar modificar o código.
ArgTypes para personalização de controles
Use argTypes no meta para personalizar como uma propriedade aparece em Controls: tipo, opções, descrição e valor padrão.
const meta: Meta<typeof Button> = {
component: Button,
argTypes: {
variant: {
control: 'select',
options: ['primary', 'secondary', 'danger'],
description: 'Visual style of the button',
},
size: {
control: { type: 'radio' },
options: ['small', 'medium', 'large'],
},
disabled: { control: 'boolean' },
label: { control: 'text' },
},
};Ocultando argumentos em Controls
Defina control: false em argTypes para ocultar uma propriedade do painel Controls — útil para propriedades internas ou funções.
argTypes: {
onClick: { control: false },
className: { table: { disable: true } },
},O complemento Actions
O complemento Actions, que faz parte de addon-essentials, registra as chamadas de funções das propriedades no painel Actions. Use fn() de @storybook/test para criar funções espiãs que aparecem no painel.
import { fn } from '@storybook/test';
const meta: Meta<typeof Button> = {
component: Button,
args: {
onClick: fn(), // click events appear in Actions panel
onHover: fn(),
},
};Associando ações automaticamente com argTypes
Use argTypes: { onClick: { action: 'clicked' } } para criar automaticamente um manipulador de ação sem importar fn().
const meta: Meta<typeof Select> = {
component: Select,
argTypes: {
onChange: { action: 'changed' },
onBlur: { action: 'blurred' },
},
};Argumentos globais
Defina argumentos em preview.ts para aplicá-los globalmente a todas as histórias — útil para argumentos de tema, localidade ou área de visualização que afetam cada componente.
// .storybook/preview.ts
export const globalTypes = {
locale: {
description: 'Internationalization locale',
defaultValue: 'en',
toolbar: {
icon: 'globe',
items: ['en', 'fr', 'de'],
},
},
};Barra de ferramentas do Storybook
Os argumentos globais com a configuração toolbar aparecem como botões na barra de ferramentas do Storybook, permitindo alternar globalmente entre temas, localidades ou pontos de quebra.
Composição de argumentos
Espalhe os argumentos de outra história para usá-los como base. Isso reduz a duplicação ao criar histórias de variações.
export const Primary: Story = {
args: { label: 'Save', variant: 'primary' },
};
export const PrimaryLoading: Story = {
args: { ...Primary.args, loading: true },
};
export const PrimaryDisabled: Story = {
args: { ...Primary.args, disabled: true },
};Mapeando valores de controle
Use mapping em argTypes para mapear opções de controle legíveis para valores reais de propriedades, como ícones ou componentes.
argTypes: {
icon: {
options: ['Star', 'Heart', 'None'],
mapping: { Star: <StarIcon />, Heart: <HeartIcon />, None: null },
control: { type: 'select' },
},
},Verificação rápida
O que a função fn() de @storybook/test faz quando é usada como um argumento de história?
Recapitulação
Os argumentos alimentam tanto o painel de Controles (editor de propriedades em tempo real) quanto o complemento de Ações (registrador de eventos). Defina tipos de argumentos com argTypes para obter controles mais completos, use fn() de @storybook/test para registrar ações e combine argumentos entre histórias para reduzir a duplicação.
Perguntas Frequentes
A aula “Args, controles e o complemento Actions” é grátis?
Sim — o texto completo de “Args, controles e o complemento Actions” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.
O que vou aprender em “Args, controles e o complemento Actions”?
Use args para tornar as histórias interativas e o complemento actions para registrar eventos dos componentes. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar React Academy?
Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Args, controles e o complemento Actions”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de React Academy?
Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Configurando o Storybook em um projeto React
- Escrevendo histórias CSF3
- Args, controles e o complemento Actions
- Testes do Storybook e regressão visual