Feature: Created Storybooks for the components.

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

@@ -0,0 +1 @@
+Created Storybooks for the components. @humanice

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

@@ -0,0 +1,87 @@
+/**
+ * CEPWidget Storybook
+ * @module components/CEPWidget/CEPWidget.stories
+ */
+import React from 'react';
+import { CEPWidget, CEPWidgetDisplay } from './CEPWidget';
+
+export default {
+  title: 'Widgets/CEPWidget',
+  component: CEPWidget,
+  argTypes: {
+    onChange: { action: 'changed' },
+    onBlur: { action: 'blurred' },
+    onClick: { action: 'clicked' },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Widget para entrada e formatação de CEP (Código de Endereçamento Postal) brasileiro.',
+      },
+    },
+  },
+};
+
+const Template = (args) => <CEPWidget {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  id: 'cep',
+  title: 'CEP',
+  description: 'Digite o CEP no formato 99999-999',
+  required: false,
+  value: '',
+  placeholder: '00000-000',
+};
+
+export const WithValue = Template.bind({});
+WithValue.args = {
+  id: 'cep',
+  title: 'CEP',
+  description: 'CEP com valor preenchido',
+  value: '01310100',
+};
+
+export const Required = Template.bind({});
+Required.args = {
+  id: 'cep',
+  title: 'CEP',
+  description: 'Campo obrigatório',
+  required: true,
+  value: '',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  id: 'cep',
+  title: 'CEP',
+  description: 'Campo desabilitado',
+  value: '01310100',
+  isDisabled: true,
+};
+
+export const WithError = Template.bind({});
+WithError.args = {
+  id: 'cep',
+  title: 'CEP',
+  description: 'Campo com erro de validação',
+  value: '12345',
+  error: ['CEP inválido'],
+};
+
+// Display Component Stories
+const DisplayTemplate = (args) => <CEPWidgetDisplay {...args} />;
+
+export const DisplayDefault = DisplayTemplate.bind({});
+DisplayDefault.args = {
+  value: '01310100',
+  className: '',
+};
+DisplayDefault.parameters = {
+  docs: {
+    description: {
+      story: 'Componente de exibição do CEP formatado (somente leitura).',
+    },
+  },
+};

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

@@ -0,0 +1,87 @@
+/**
+ * CNPJWidget Storybook
+ * @module components/CNPJWidget/CNPJWidget.stories
+ */
+import React from 'react';
+import { CNPJWidget, CNPJWidgetDisplay } from './CNPJWidget';
+
+export default {
+  title: 'Widgets/CNPJWidget',
+  component: CNPJWidget,
+  argTypes: {
+    onChange: { action: 'changed' },
+    onBlur: { action: 'blurred' },
+    onClick: { action: 'clicked' },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Widget para entrada e formatação de CNPJ (Cadastro Nacional de Pessoa Jurídica) brasileiro.',
+      },
+    },
+  },
+};
+
+const Template = (args) => <CNPJWidget {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  id: 'cnpj',
+  title: 'CNPJ',
+  description: 'Digite o CNPJ no formato 99.999.999/9999-99',
+  required: false,
+  value: '',
+  placeholder: '00.000.000/0000-00',
+};
+
+export const WithValue = Template.bind({});
+WithValue.args = {
+  id: 'cnpj',
+  title: 'CNPJ',
+  description: 'CNPJ com valor preenchido',
+  value: '11222333000181',
+};
+
+export const Required = Template.bind({});
+Required.args = {
+  id: 'cnpj',
+  title: 'CNPJ',
+  description: 'Campo obrigatório',
+  required: true,
+  value: '',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  id: 'cnpj',
+  title: 'CNPJ',
+  description: 'Campo desabilitado',
+  value: '11222333000181',
+  isDisabled: true,
+};
+
+export const WithError = Template.bind({});
+WithError.args = {
+  id: 'cnpj',
+  title: 'CNPJ',
+  description: 'Campo com erro de validação',
+  value: '11222333000180',
+  error: ['CNPJ inválido'],
+};
+
+// Display Component Stories
+const DisplayTemplate = (args) => <CNPJWidgetDisplay {...args} />;
+
+export const DisplayDefault = DisplayTemplate.bind({});
+DisplayDefault.args = {
+  value: '11222333000181',
+  className: '',
+};
+DisplayDefault.parameters = {
+  docs: {
+    description: {
+      story: 'Componente de exibição do CNPJ formatado (somente leitura).',
+    },
+  },
+};

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

@@ -0,0 +1,100 @@
+/**
+ * CPFWidget Storybook
+ * @module components/CPFWidget/CPFWidget.stories
+ */
+import React from 'react';
+import { CPFWidget, CPFWidgetDisplay } from './CPFWidget';
+
+export default {
+  title: 'Widgets/CPFWidget',
+  component: CPFWidget,
+  argTypes: {
+    onChange: { action: 'changed' },
+    onBlur: { action: 'blurred' },
+    onClick: { action: 'clicked' },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Widget para entrada e formatação de CPF (Cadastro de Pessoa Física) brasileiro.',
+      },
+    },
+  },
+};
+
+const Template = (args) => <CPFWidget {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  id: 'cpf',
+  title: 'CPF',
+  description: 'Digite o CPF no formato 999.999.999-999',
+  required: false,
+  value: '',
+  placeholder: '000.000.000-00',
+};
+
+export const WithValue = Template.bind({});
+WithValue.args = {
+  id: 'cpf',
+  title: 'CPF',
+  description: 'CPF com valor preenchido',
+  value: '12345678909',
+};
+
+export const Required = Template.bind({});
+Required.args = {
+  id: 'cpf',
+  title: 'CPF',
+  description: 'Campo obrigatório',
+  required: true,
+  value: '',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  id: 'cpf',
+  title: 'CPF',
+  description: 'Campo desabilitado',
+  value: '12345678909',
+  isDisabled: true,
+};
+
+export const WithError = Template.bind({});
+WithError.args = {
+  id: 'cpf',
+  title: 'CPF',
+  description: 'Campo com erro de validação',
+  value: '12345678900',
+  error: ['CPF inválido'],
+};
+
+// Display Component Stories
+const DisplayTemplate = (args) => <CPFWidgetDisplay {...args} />;
+
+export const DisplayDefault = DisplayTemplate.bind({});
+DisplayDefault.args = {
+  value: '12345678909',
+  className: '',
+};
+DisplayDefault.parameters = {
+  docs: {
+    description: {
+      story: 'Componente de exibição do CPF formatado (somente leitura).',
+    },
+  },
+};
+
+export const DisplayMasked = DisplayTemplate.bind({});
+DisplayMasked.args = {
+  value: '***.***.***-09',
+  className: '',
+};
+DisplayMasked.parameters = {
+  docs: {
+    description: {
+      story: 'Componente de exibição do CPF com máscara de privacidade.',
+    },
+  },
+};

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

@@ -0,0 +1,110 @@
+/**
+ * TelefoneWidget Storybook
+ * @module components/TelefoneWidget/TelefoneWidget.stories
+ */
+import React from 'react';
+import { TelefoneWidget, TelefoneWidgetDisplay } from './TelefoneWidget';
+
+export default {
+  title: 'Widgets/TelefoneWidget',
+  component: TelefoneWidget,
+  argTypes: {
+    onChange: { action: 'changed' },
+    onBlur: { action: 'blurred' },
+    onClick: { action: 'clicked' },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Widget para entrada e formatação de números de telefone brasileiros (fixo e celular).',
+      },
+    },
+  },
+};
+
+const Template = (args) => <TelefoneWidget {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  id: 'telefone',
+  title: 'Telefone',
+  description: 'Digite o telefone com DDD',
+  required: false,
+  value: '',
+  placeholder: '(00) 0000-0000',
+};
+
+export const WithCelular = Template.bind({});
+WithCelular.args = {
+  id: 'telefone',
+  title: 'Telefone Celular',
+  description: 'Número de celular com 9 dígitos',
+  value: '11987654321',
+};
+
+export const WithFixo = Template.bind({});
+WithFixo.args = {
+  id: 'telefone',
+  title: 'Telefone Fixo',
+  description: 'Número de telefone fixo com 8 dígitos',
+  value: '1133334444',
+};
+
+export const Required = Template.bind({});
+Required.args = {
+  id: 'telefone',
+  title: 'Telefone',
+  description: 'Campo obrigatório',
+  required: true,
+  value: '',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  id: 'telefone',
+  title: 'Telefone',
+  description: 'Campo desabilitado',
+  value: '11987654321',
+  isDisabled: true,
+};
+
+export const WithError = Template.bind({});
+WithError.args = {
+  id: 'telefone',
+  title: 'Telefone',
+  description: 'Campo com erro de validação',
+  value: '1198765',
+  error: ['Telefone inválido'],
+};
+
+// Display Component Stories
+const DisplayTemplate = (args) => <TelefoneWidgetDisplay {...args} />;
+
+export const DisplayCelular = DisplayTemplate.bind({});
+DisplayCelular.args = {
+  value: '11987654321',
+  className: '',
+};
+DisplayCelular.parameters = {
+  docs: {
+    description: {
+      story:
+        'Componente de exibição do telefone celular formatado (somente leitura).',
+    },
+  },
+};
+
+export const DisplayFixo = DisplayTemplate.bind({});
+DisplayFixo.args = {
+  value: '1133334444',
+  className: '',
+};
+DisplayFixo.parameters = {
+  docs: {
+    description: {
+      story:
+        'Componente de exibição do telefone fixo formatado (somente leitura).',
+    },
+  },
+};