Skip to content

Commit ea10f22

Browse files
HumanaiceHumanaice
committed
Feature: Created Storybooks for the components.
1 parent 25250b4 commit ea10f22

File tree

5 files changed

+385
-0
lines changed

5 files changed

+385
-0
lines changed

‎frontend/packages/volto-brwidgets/news/2.feature‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Created Storybooks for the components. @humanice

‎frontend/packages/volto-brwidgets/src/components/CEPWidget/CEPWidget.stories.jsx‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
/**
2+
* CEPWidget Storybook
3+
* @module components/CEPWidget/CEPWidget.stories
4+
*/
5+
import React from 'react';
6+
import { CEPWidget, CEPWidgetDisplay } from './CEPWidget';
7+
8+
export default {
9+
title: 'Widgets/CEPWidget',
10+
component: CEPWidget,
11+
argTypes: {
12+
onChange: { action: 'changed' },
13+
onBlur: { action: 'blurred' },
14+
onClick: { action: 'clicked' },
15+
},
16+
parameters: {
17+
docs: {
18+
description: {
19+
component:
20+
'Widget para entrada e formatação de CEP (Código de Endereçamento Postal) brasileiro.',
21+
},
22+
},
23+
},
24+
};
25+
26+
const Template = (args) => <CEPWidget {...args} />;
27+
28+
export const Default = Template.bind({});
29+
Default.args = {
30+
id: 'cep',
31+
title: 'CEP',
32+
description: 'Digite o CEP no formato 99999-999',
33+
required: false,
34+
value: '',
35+
placeholder: '00000-000',
36+
};
37+
38+
export const WithValue = Template.bind({});
39+
WithValue.args = {
40+
id: 'cep',
41+
title: 'CEP',
42+
description: 'CEP com valor preenchido',
43+
value: '01310100',
44+
};
45+
46+
export const Required = Template.bind({});
47+
Required.args = {
48+
id: 'cep',
49+
title: 'CEP',
50+
description: 'Campo obrigatório',
51+
required: true,
52+
value: '',
53+
};
54+
55+
export const Disabled = Template.bind({});
56+
Disabled.args = {
57+
id: 'cep',
58+
title: 'CEP',
59+
description: 'Campo desabilitado',
60+
value: '01310100',
61+
isDisabled: true,
62+
};
63+
64+
export const WithError = Template.bind({});
65+
WithError.args = {
66+
id: 'cep',
67+
title: 'CEP',
68+
description: 'Campo com erro de validação',
69+
value: '12345',
70+
error: ['CEP inválido'],
71+
};
72+
73+
// Display Component Stories
74+
const DisplayTemplate = (args) => <CEPWidgetDisplay {...args} />;
75+
76+
export const DisplayDefault = DisplayTemplate.bind({});
77+
DisplayDefault.args = {
78+
value: '01310100',
79+
className: '',
80+
};
81+
DisplayDefault.parameters = {
82+
docs: {
83+
description: {
84+
story: 'Componente de exibição do CEP formatado (somente leitura).',
85+
},
86+
},
87+
};

‎frontend/packages/volto-brwidgets/src/components/CNPJWidget/CNPJWidget.stories.jsx‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
/**
2+
* CNPJWidget Storybook
3+
* @module components/CNPJWidget/CNPJWidget.stories
4+
*/
5+
import React from 'react';
6+
import { CNPJWidget, CNPJWidgetDisplay } from './CNPJWidget';
7+
8+
export default {
9+
title: 'Widgets/CNPJWidget',
10+
component: CNPJWidget,
11+
argTypes: {
12+
onChange: { action: 'changed' },
13+
onBlur: { action: 'blurred' },
14+
onClick: { action: 'clicked' },
15+
},
16+
parameters: {
17+
docs: {
18+
description: {
19+
component:
20+
'Widget para entrada e formatação de CNPJ (Cadastro Nacional de Pessoa Jurídica) brasileiro.',
21+
},
22+
},
23+
},
24+
};
25+
26+
const Template = (args) => <CNPJWidget {...args} />;
27+
28+
export const Default = Template.bind({});
29+
Default.args = {
30+
id: 'cnpj',
31+
title: 'CNPJ',
32+
description: 'Digite o CNPJ no formato 99.999.999/9999-99',
33+
required: false,
34+
value: '',
35+
placeholder: '00.000.000/0000-00',
36+
};
37+
38+
export const WithValue = Template.bind({});
39+
WithValue.args = {
40+
id: 'cnpj',
41+
title: 'CNPJ',
42+
description: 'CNPJ com valor preenchido',
43+
value: '11222333000181',
44+
};
45+
46+
export const Required = Template.bind({});
47+
Required.args = {
48+
id: 'cnpj',
49+
title: 'CNPJ',
50+
description: 'Campo obrigatório',
51+
required: true,
52+
value: '',
53+
};
54+
55+
export const Disabled = Template.bind({});
56+
Disabled.args = {
57+
id: 'cnpj',
58+
title: 'CNPJ',
59+
description: 'Campo desabilitado',
60+
value: '11222333000181',
61+
isDisabled: true,
62+
};
63+
64+
export const WithError = Template.bind({});
65+
WithError.args = {
66+
id: 'cnpj',
67+
title: 'CNPJ',
68+
description: 'Campo com erro de validação',
69+
value: '11222333000180',
70+
error: ['CNPJ inválido'],
71+
};
72+
73+
// Display Component Stories
74+
const DisplayTemplate = (args) => <CNPJWidgetDisplay {...args} />;
75+
76+
export const DisplayDefault = DisplayTemplate.bind({});
77+
DisplayDefault.args = {
78+
value: '11222333000181',
79+
className: '',
80+
};
81+
DisplayDefault.parameters = {
82+
docs: {
83+
description: {
84+
story: 'Componente de exibição do CNPJ formatado (somente leitura).',
85+
},
86+
},
87+
};

‎frontend/packages/volto-brwidgets/src/components/CPFWidget/CPFWidget.stories.jsx‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
/**
2+
* CPFWidget Storybook
3+
* @module components/CPFWidget/CPFWidget.stories
4+
*/
5+
import React from 'react';
6+
import { CPFWidget, CPFWidgetDisplay } from './CPFWidget';
7+
8+
export default {
9+
title: 'Widgets/CPFWidget',
10+
component: CPFWidget,
11+
argTypes: {
12+
onChange: { action: 'changed' },
13+
onBlur: { action: 'blurred' },
14+
onClick: { action: 'clicked' },
15+
},
16+
parameters: {
17+
docs: {
18+
description: {
19+
component:
20+
'Widget para entrada e formatação de CPF (Cadastro de Pessoa Física) brasileiro.',
21+
},
22+
},
23+
},
24+
};
25+
26+
const Template = (args) => <CPFWidget {...args} />;
27+
28+
export const Default = Template.bind({});
29+
Default.args = {
30+
id: 'cpf',
31+
title: 'CPF',
32+
description: 'Digite o CPF no formato 999.999.999-999',
33+
required: false,
34+
value: '',
35+
placeholder: '000.000.000-00',
36+
};
37+
38+
export const WithValue = Template.bind({});
39+
WithValue.args = {
40+
id: 'cpf',
41+
title: 'CPF',
42+
description: 'CPF com valor preenchido',
43+
value: '12345678909',
44+
};
45+
46+
export const Required = Template.bind({});
47+
Required.args = {
48+
id: 'cpf',
49+
title: 'CPF',
50+
description: 'Campo obrigatório',
51+
required: true,
52+
value: '',
53+
};
54+
55+
export const Disabled = Template.bind({});
56+
Disabled.args = {
57+
id: 'cpf',
58+
title: 'CPF',
59+
description: 'Campo desabilitado',
60+
value: '12345678909',
61+
isDisabled: true,
62+
};
63+
64+
export const WithError = Template.bind({});
65+
WithError.args = {
66+
id: 'cpf',
67+
title: 'CPF',
68+
description: 'Campo com erro de validação',
69+
value: '12345678900',
70+
error: ['CPF inválido'],
71+
};
72+
73+
// Display Component Stories
74+
const DisplayTemplate = (args) => <CPFWidgetDisplay {...args} />;
75+
76+
export const DisplayDefault = DisplayTemplate.bind({});
77+
DisplayDefault.args = {
78+
value: '12345678909',
79+
className: '',
80+
};
81+
DisplayDefault.parameters = {
82+
docs: {
83+
description: {
84+
story: 'Componente de exibição do CPF formatado (somente leitura).',
85+
},
86+
},
87+
};
88+
89+
export const DisplayMasked = DisplayTemplate.bind({});
90+
DisplayMasked.args = {
91+
value: '***.***.***-09',
92+
className: '',
93+
};
94+
DisplayMasked.parameters = {
95+
docs: {
96+
description: {
97+
story: 'Componente de exibição do CPF com máscara de privacidade.',
98+
},
99+
},
100+
};

‎frontend/packages/volto-brwidgets/src/components/TelefoneWidget/TelefoneWidget.stories.jsx‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
/**
2+
* TelefoneWidget Storybook
3+
* @module components/TelefoneWidget/TelefoneWidget.stories
4+
*/
5+
import React from 'react';
6+
import { TelefoneWidget, TelefoneWidgetDisplay } from './TelefoneWidget';
7+
8+
export default {
9+
title: 'Widgets/TelefoneWidget',
10+
component: TelefoneWidget,
11+
argTypes: {
12+
onChange: { action: 'changed' },
13+
onBlur: { action: 'blurred' },
14+
onClick: { action: 'clicked' },
15+
},
16+
parameters: {
17+
docs: {
18+
description: {
19+
component:
20+
'Widget para entrada e formatação de números de telefone brasileiros (fixo e celular).',
21+
},
22+
},
23+
},
24+
};
25+
26+
const Template = (args) => <TelefoneWidget {...args} />;
27+
28+
export const Default = Template.bind({});
29+
Default.args = {
30+
id: 'telefone',
31+
title: 'Telefone',
32+
description: 'Digite o telefone com DDD',
33+
required: false,
34+
value: '',
35+
placeholder: '(00) 0000-0000',
36+
};
37+
38+
export const WithCelular = Template.bind({});
39+
WithCelular.args = {
40+
id: 'telefone',
41+
title: 'Telefone Celular',
42+
description: 'Número de celular com 9 dígitos',
43+
value: '11987654321',
44+
};
45+
46+
export const WithFixo = Template.bind({});
47+
WithFixo.args = {
48+
id: 'telefone',
49+
title: 'Telefone Fixo',
50+
description: 'Número de telefone fixo com 8 dígitos',
51+
value: '1133334444',
52+
};
53+
54+
export const Required = Template.bind({});
55+
Required.args = {
56+
id: 'telefone',
57+
title: 'Telefone',
58+
description: 'Campo obrigatório',
59+
required: true,
60+
value: '',
61+
};
62+
63+
export const Disabled = Template.bind({});
64+
Disabled.args = {
65+
id: 'telefone',
66+
title: 'Telefone',
67+
description: 'Campo desabilitado',
68+
value: '11987654321',
69+
isDisabled: true,
70+
};
71+
72+
export const WithError = Template.bind({});
73+
WithError.args = {
74+
id: 'telefone',
75+
title: 'Telefone',
76+
description: 'Campo com erro de validação',
77+
value: '1198765',
78+
error: ['Telefone inválido'],
79+
};
80+
81+
// Display Component Stories
82+
const DisplayTemplate = (args) => <TelefoneWidgetDisplay {...args} />;
83+
84+
export const DisplayCelular = DisplayTemplate.bind({});
85+
DisplayCelular.args = {
86+
value: '11987654321',
87+
className: '',
88+
};
89+
DisplayCelular.parameters = {
90+
docs: {
91+
description: {
92+
story:
93+
'Componente de exibição do telefone celular formatado (somente leitura).',
94+
},
95+
},
96+
};
97+
98+
export const DisplayFixo = DisplayTemplate.bind({});
99+
DisplayFixo.args = {
100+
value: '1133334444',
101+
className: '',
102+
};
103+
DisplayFixo.parameters = {
104+
docs: {
105+
description: {
106+
story:
107+
'Componente de exibição do telefone fixo formatado (somente leitura).',
108+
},
109+
},
110+
};

0 commit comments

Comments
 (0)