lsoft-ui 0.0.1

package/dist/stories/Londrisoft/Components/Radio/CustomRadioGroup.stories.js

@@ -0,0 +1,766 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// src/components/CustomRadioGroup/CustomRadioGroup.stories.tsx
+import { useState } from "react";
+import { Stack } from "@chakra-ui/react";
+import CustomRadioGroup from "../../../../components/CustomRadioGroup";
+const options = [
+    { value: "opcao1", label: "Opção 1" },
+    { value: "opcao2", label: "Opção 2" },
+    { value: "opcao3", label: "Opção 3" },
+];
+const meta = {
+    title: "Londrisoft/Components/Radio/Radio-Group",
+    component: CustomRadioGroup,
+    tags: ["autodocs"],
+    decorators: [
+        (Story) => (_jsx("div", { style: { maxWidth: 400, margin: "2rem auto" }, children: _jsx(Story, {}) })),
+    ],
+    parameters: {
+        docs: {
+            description: {
+                component: `
+Grupo de radios customizado com:
+- **label**, **helperText** e **error** em nível de grupo  
+- **fieldSize** (sm/md/lg)  
+- **direction** (row/column) e **spacing**  
+        `,
+            },
+        },
+    },
+    argTypes: {
+        label: {
+            control: "text",
+            description: "Rótulo exibido acima do grupo de radios.",
+            defaultValue: "Escolha uma opção",
+        },
+        helperText: {
+            control: "text",
+            description: "Texto de ajuda exibido abaixo do grupo (se não houver erro).",
+        },
+        error: {
+            control: "text",
+            description: "Mensagem de erro exibida abaixo do grupo.",
+        },
+        options: {
+            control: "object",
+            description: "Array de opções com `value` e `label`.",
+            defaultValue: options,
+        },
+        fieldSize: {
+            control: "radio",
+            options: ["sm", "md", "lg"],
+            description: "Tamanho dos radios.",
+            defaultValue: "md",
+        },
+        direction: {
+            control: "radio",
+            options: ["column", "row"],
+            description: "Direção do Stack interno.",
+            defaultValue: "column",
+        },
+        spacing: {
+            control: { type: "number", min: 0, max: 10, step: 1 },
+            description: "Espaçamento entre itens do Stack.",
+            defaultValue: 4,
+        },
+        isDisabled: {
+            control: "boolean",
+            description: "Desabilita todos os radios do grupo.",
+            defaultValue: false,
+        },
+        defaultValue: {
+            control: "inline-radio",
+            options: options.map((o) => o.value),
+            description: "Valor inicial (uncontrolled).",
+        },
+        value: {
+            table: { disable: true },
+            description: "Valor selecionado (controlled).",
+        },
+        onChange: {
+            action: "onChange",
+            table: { disable: true },
+            description: "Callback disparado ao alterar seleção.",
+        },
+        colorScheme: {
+            control: "select",
+            options: [
+                "whiteAlpha",
+                "blackAlpha",
+                "gray",
+                "red",
+                "orange",
+                "yellow",
+                "green",
+                "teal",
+                "blue",
+                "cyan",
+                "purple",
+                "pink",
+                "linkedin",
+                "facebook",
+                "messenger",
+                "whatsapp",
+                "twitter",
+                "telegram",
+                "primary",
+                "secondary",
+                "success",
+                "warning",
+                "danger",
+            ],
+            description: "Cor de destaque do Radio quando selecionado.",
+            defaultValue: "blue",
+        },
+        style: {
+            control: "object",
+            description: "Estilos customizados para cada Radio.",
+        },
+    },
+};
+export default meta;
+export const Controlled = {
+    render: (args) => {
+        var _a;
+        const [val, setVal] = useState((_a = args.defaultValue) !== null && _a !== void 0 ? _a : "");
+        return (_jsx(CustomRadioGroup, Object.assign({}, args, { value: val, onChange: (newVal) => setVal(newVal) })));
+    },
+    args: {
+        label: "Opção controlada",
+        helperText: "Clique para alternar",
+        options,
+        defaultValue: "opcao1",
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: `
+import React, { useState } from 'react';
+import CustomRadioGroup, { RadioOption } from './CustomRadioGroup';
+
+// Radio group controlado básico
+const BasicControlledRadioGroup = () => {
+    const [value, setValue] = useState("opcao1");
+    
+    const options: RadioOption[] = [
+        { value: "opcao1", label: "Opção 1" },
+        { value: "opcao2", label: "Opção 2" },
+        { value: "opcao3", label: "Opção 3" },
+    ];
+
+    return (
+        <CustomRadioGroup
+            label="Opção controlada"
+            helperText="Clique para alternar"
+            options={options}
+            value={value}
+            onChange={(newVal) => setValue(newVal)}
+        />
+    );
+};
+
+// Radio group com valores iniciais
+const ControlledWithInitialValues = () => {
+    const [value, setValue] = useState("opcao2");
+    
+    const options: RadioOption[] = [
+        { value: "masculino", label: "Masculino" },
+        { value: "feminino", label: "Feminino" },
+        { value: "outro", label: "Outro" },
+    ];
+
+    return (
+        <CustomRadioGroup
+            label="Gênero"
+            helperText="Selecione seu gênero"
+            options={options}
+            value={value}
+            onChange={(newVal) => setValue(newVal)}
+        />
+    );
+};
+
+// Radio group com validação
+const ValidatedRadioGroup = () => {
+    const [value, setValue] = useState("");
+    const [error, setError] = useState("");
+
+    const options: RadioOption[] = [
+        { value: "basico", label: "Plano Básico" },
+        { value: "pro", label: "Plano Pro" },
+        { value: "enterprise", label: "Plano Enterprise" },
+    ];
+
+    const handleChange = (newVal: string) => {
+        setValue(newVal);
+        
+        // Validação
+        if (!newVal) {
+            setError("Você deve selecionar um plano");
+        } else {
+            setError("");
+        }
+    };
+
+    return (
+        <CustomRadioGroup
+            label="Escolha seu plano"
+            helperText="Selecione um plano"
+            error={error}
+            options={options}
+            value={value}
+            onChange={handleChange}
+        />
+    );
+};
+
+// Radio group para formulário
+const FormRadioGroup = () => {
+    const [formData, setFormData] = useState({
+        plan: "",
+        region: "",
+        payment: ""
+    });
+
+    const planOptions: RadioOption[] = [
+        { value: "gratuito", label: "Gratuito" },
+        { value: "basico", label: "Básico" },
+        { value: "premium", label: "Premium" },
+    ];
+
+    const regionOptions: RadioOption[] = [
+        { value: "br", label: "Brasil" },
+        { value: "us", label: "Estados Unidos" },
+        { value: "eu", label: "Europa" },
+    ];
+
+    const paymentOptions: RadioOption[] = [
+        { value: "credito", label: "Cartão de Crédito" },
+        { value: "pix", label: "PIX" },
+        { value: "boleto", label: "Boleto" },
+    ];
+
+    const handleChange = (field: string) => (newVal: string) => {
+        setFormData({
+            ...formData,
+            [field]: newVal
+        });
+    };
+
+    return (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+            <CustomRadioGroup
+                label="Plano"
+                helperText="Escolha um plano"
+                options={planOptions}
+                value={formData.plan}
+                onChange={handleChange('plan')}
+            />
+            
+            <CustomRadioGroup
+                label="Região"
+                helperText="Selecione a região do servidor"
+                options={regionOptions}
+                value={formData.region}
+                onChange={handleChange('region')}
+            />
+            
+            <CustomRadioGroup
+                label="Forma de Pagamento"
+                helperText="Escolha uma forma de pagamento"
+                options={paymentOptions}
+                value={formData.payment}
+                onChange={handleChange('payment')}
+            />
+        </div>
+    );
+};
+
+// Radio group com layout horizontal
+const HorizontalRadioGroup = () => {
+    const [value, setValue] = useState("");
+
+    const options: RadioOption[] = [
+        { value: "pequeno", label: "Pequeno" },
+        { value: "medio", label: "Médio" },
+        { value: "grande", label: "Grande" },
+    ];
+
+    return (
+        <CustomRadioGroup
+            label="Tamanho"
+            helperText="Escolha um tamanho"
+            options={options}
+            direction="row"
+            spacing={6}
+            value={value}
+            onChange={(newVal) => setValue(newVal)}
+        />
+    );
+};
+                `,
+                language: "tsx",
+            },
+        },
+    },
+};
+/**
+ * Exemplo com helperText (sem erro).
+ */
+export const WithHelperText = {
+    args: {
+        label: "Com ajuda",
+        helperText: "Esse texto some se houver erro",
+        options,
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: `
+import React from 'react';
+import CustomRadioGroup, { RadioOption } from './CustomRadioGroup';
+
+// Radio group com texto auxiliar
+const RadioGroupWithHelperText = () => {
+    const options: RadioOption[] = [
+        { value: "opcao1", label: "Opção 1" },
+        { value: "opcao2", label: "Opção 2" },
+        { value: "opcao3", label: "Opção 3" },
+    ];
+
+    return (
+        <CustomRadioGroup
+            label="Com ajuda"
+            helperText="Esse texto some se houver erro"
+            options={options}
+        />
+    );
+};
+
+// Radio groups com diferentes tipos de texto auxiliar
+const RadioGroupsWithDifferentHelperTexts = () => {
+    const techOptions: RadioOption[] = [
+        { value: "js", label: "JavaScript" },
+        { value: "ts", label: "TypeScript" },
+        { value: "react", label: "React" },
+    ];
+
+    const notificationOptions: RadioOption[] = [
+        { value: "email", label: "Email" },
+        { value: "sms", label: "SMS" },
+        { value: "push", label: "Push" },
+    ];
+
+    return (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+            <CustomRadioGroup
+                label="Tecnologias"
+                helperText="Selecione as tecnologias que você conhece"
+                options={techOptions}
+            />
+            
+            <CustomRadioGroup
+                label="Notificações"
+                helperText="Como você gostaria de receber notificações?"
+                options={notificationOptions}
+            />
+        </div>
+    );
+};
+
+// Radio group com texto auxiliar informativo
+const RadioGroupWithInformativeHelperText = () => {
+    const policyOptions: RadioOption[] = [
+        { value: "terms", label: "Termos de Uso" },
+        { value: "privacy", label: "Política de Privacidade" },
+        { value: "cookies", label: "Cookies" },
+    ];
+
+    return (
+        <CustomRadioGroup
+            label="Políticas"
+            helperText="Leia e aceite as políticas necessárias para continuar"
+            options={policyOptions}
+        />
+    );
+};
+
+// Radio group com texto auxiliar condicional
+const RadioGroupWithConditionalHelperText = () => {
+    const advancedOptions: RadioOption[] = [
+        { value: "advanced", label: "Configurações Avançadas" },
+        { value: "developer", label: "Modo Desenvolvedor" },
+        { value: "logs", label: "Logs Detalhados" },
+    ];
+
+    return (
+        <CustomRadioGroup
+            label="Configurações"
+            helperText="Recomendado apenas para usuários experientes"
+            options={advancedOptions}
+        />
+    );
+};
+                `,
+                language: "tsx",
+            },
+        },
+    },
+};
+/**
+ * Exemplo exibindo mensagem de erro (helperText é ignorado).
+ */
+export const WithError = {
+    args: {
+        label: "Com erro",
+        helperText: "Não aparece quando há erro",
+        error: "Selecione uma opção",
+        options,
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: `
+import React from 'react';
+import CustomRadioGroup, { RadioOption } from './CustomRadioGroup';
+
+// Radio group com erro
+const RadioGroupWithError = () => {
+    const options: RadioOption[] = [
+        { value: "opcao1", label: "Opção 1" },
+        { value: "opcao2", label: "Opção 2" },
+        { value: "opcao3", label: "Opção 3" },
+    ];
+
+    return (
+        <CustomRadioGroup
+            label="Com erro"
+            helperText="Não aparece quando há erro"
+            error="Selecione uma opção"
+            options={options}
+        />
+    );
+};
+
+// Radio groups com diferentes tipos de erro
+const RadioGroupsWithDifferentErrors = () => {
+    const policyOptions: RadioOption[] = [
+        { value: "terms", label: "Termos de Uso" },
+        { value: "privacy", label: "Política de Privacidade" },
+        { value: "cookies", label: "Cookies" },
+    ];
+
+    const techOptions: RadioOption[] = [
+        { value: "js", label: "JavaScript" },
+        { value: "ts", label: "TypeScript" },
+        { value: "react", label: "React" },
+    ];
+
+    return (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+            <CustomRadioGroup
+                label="Políticas"
+                error="Você deve aceitar pelo menos uma política"
+                options={policyOptions}
+            />
+            
+            <CustomRadioGroup
+                label="Tecnologias"
+                error="Selecione pelo menos uma tecnologia"
+                options={techOptions}
+            />
+        </div>
+    );
+};
+
+// Radio group com validação de erro
+const ValidationErrorRadioGroup = () => {
+    const requiredOptions: RadioOption[] = [
+        { value: "aceitar", label: "Aceitar Termos" },
+        { value: "aceitar_privacy", label: "Aceitar Privacidade" },
+        { value: "aceitar_cookies", label: "Aceitar Cookies" },
+    ];
+
+    return (
+        <CustomRadioGroup
+            label="Aceitar políticas"
+            error="É necessário aceitar pelo menos uma política para continuar"
+            helperText="Este texto não aparece quando há erro"
+            options={requiredOptions}
+        />
+    );
+};
+
+// Radio group com erro condicional
+const ConditionalErrorRadioGroup = () => {
+    const advancedOptions: RadioOption[] = [
+        { value: "advanced", label: "Configurações Avançadas" },
+        { value: "developer", label: "Modo Desenvolvedor" },
+        { value: "logs", label: "Logs Detalhados" },
+    ];
+
+    return (
+        <CustomRadioGroup
+            label="Configurações Avançadas"
+            error="Você deve aceitar os riscos das configurações avançadas"
+            options={advancedOptions}
+        />
+    );
+};
+                `,
+                language: "tsx",
+            },
+        },
+    },
+};
+/**
+ * Exemplo de grupo desabilitado.
+ */
+export const Disabled = {
+    args: {
+        label: "Desabilitado",
+        options,
+        isDisabled: true,
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: `
+import React from 'react';
+import CustomRadioGroup, { RadioOption } from './CustomRadioGroup';
+
+// Radio group desabilitado básico
+const BasicDisabledRadioGroup = () => {
+    const options: RadioOption[] = [
+        { value: "opcao1", label: "Opção 1" },
+        { value: "opcao2", label: "Opção 2" },
+        { value: "opcao3", label: "Opção 3" },
+    ];
+
+    return (
+        <CustomRadioGroup
+            label="Desabilitado"
+            options={options}
+            isDisabled={true}
+        />
+    );
+};
+
+// Radio groups desabilitados com diferentes estilos
+const DisabledRadioGroupsWithDifferentStyles = () => {
+    const systemOptions: RadioOption[] = [
+        { value: "backup", label: "Backup Automático" },
+        { value: "logs", label: "Logs Detalhados" },
+        { value: "safe", label: "Modo Seguro" },
+    ];
+
+    const userOptions: RadioOption[] = [
+        { value: "notifications", label: "Notificações" },
+        { value: "dark", label: "Modo Escuro" },
+        { value: "autosave", label: "Auto-save" },
+    ];
+
+    return (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+            <CustomRadioGroup
+                label="Configurações do Sistema"
+                options={systemOptions}
+                isDisabled={true}
+            />
+            
+            <CustomRadioGroup
+                label="Preferências do Usuário"
+                options={userOptions}
+                isDisabled={true}
+            />
+        </div>
+    );
+};
+
+// Radio group desabilitado com valores
+const DisabledWithValues = () => {
+    const options: RadioOption[] = [
+        { value: "config1", label: "Configuração 1" },
+        { value: "config2", label: "Configuração 2" },
+        { value: "config3", label: "Configuração 3" },
+    ];
+
+    return (
+        <CustomRadioGroup
+            label="Configurações do Sistema"
+            options={options}
+            isDisabled={true}
+            defaultValue="config1"
+        />
+    );
+};
+
+// Radio group desabilitado com erro
+const DisabledWithError = () => {
+    const options: RadioOption[] = [
+        { value: "blocked1", label: "Configuração Bloqueada 1" },
+        { value: "blocked2", label: "Configuração Bloqueada 2" },
+        { value: "blocked3", label: "Configuração Bloqueada 3" },
+    ];
+
+    return (
+        <CustomRadioGroup
+            label="Configurações Bloqueadas"
+            options={options}
+            isDisabled={true}
+            error="Estas configurações não podem ser alteradas no momento"
+        />
+    );
+};
+
+// Radio group desabilitado para configurações
+const SettingsDisabledRadioGroup = () => {
+    const adminOptions: RadioOption[] = [
+        { value: "admin", label: "Modo Administrador" },
+        { value: "root", label: "Acesso Root" },
+        { value: "system_logs", label: "Logs de Sistema" },
+    ];
+
+    return (
+        <CustomRadioGroup
+            label="Configurações Administrativas"
+            helperText="Estas configurações são gerenciadas pelo sistema"
+            options={adminOptions}
+            isDisabled={true}
+            defaultValue="admin"
+        />
+    );
+};
+                `,
+                language: "tsx",
+            },
+        },
+    },
+};
+/**
+ * Demonstração de tamanhos diferentes.
+ */
+export const FieldSizes = {
+    render: () => (_jsxs(Stack, { spacing: 6, children: [_jsx(CustomRadioGroup, { label: "Size sm", options: options, defaultValue: "opcao1", fieldSize: "sm" }), _jsx(CustomRadioGroup, { label: "Size md", options: options, defaultValue: "opcao2", fieldSize: "md" }), _jsx(CustomRadioGroup, { label: "Size lg", options: options, defaultValue: "opcao3", fieldSize: "lg" })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: `
+import React from 'react';
+import { Stack } from '@chakra-ui/react';
+import CustomRadioGroup, { RadioOption } from './CustomRadioGroup';
+
+// Demonstração de diferentes tamanhos
+const FieldSizesDemo = () => {
+    const options: RadioOption[] = [
+        { value: "opcao1", label: "Opção 1" },
+        { value: "opcao2", label: "Opção 2" },
+        { value: "opcao3", label: "Opção 3" },
+    ];
+
+    return (
+        <Stack spacing={6}>
+            <CustomRadioGroup
+                label="Size sm"
+                options={options}
+                defaultValue="opcao1"
+                fieldSize="sm"
+            />
+            <CustomRadioGroup
+                label="Size md"
+                options={options}
+                defaultValue="opcao2"
+                fieldSize="md"
+            />
+            <CustomRadioGroup
+                label="Size lg"
+                options={options}
+                defaultValue="opcao3"
+                fieldSize="lg"
+            />
+        </Stack>
+    );
+};
+
+// Radio groups com diferentes tamanhos
+const MultiSizeRadioGroups = () => {
+    const smallOptions: RadioOption[] = [
+        { value: "small1", label: "Pequeno 1" },
+        { value: "small2", label: "Pequeno 2" },
+    ];
+
+    const mediumOptions: RadioOption[] = [
+        { value: "medium1", label: "Médio 1" },
+        { value: "medium2", label: "Médio 2" },
+        { value: "medium3", label: "Médio 3" },
+    ];
+
+    const largeOptions: RadioOption[] = [
+        { value: "large1", label: "Grande 1" },
+        { value: "large2", label: "Grande 2" },
+        { value: "large3", label: "Grande 3" },
+        { value: "large4", label: "Grande 4" },
+    ];
+
+    return (
+        <Stack spacing={6}>
+            <CustomRadioGroup
+                label="Opções Pequenas"
+                options={smallOptions}
+                fieldSize="sm"
+            />
+            
+            <CustomRadioGroup
+                label="Opções Médias"
+                options={mediumOptions}
+                fieldSize="md"
+            />
+            
+            <CustomRadioGroup
+                label="Opções Grandes"
+                options={largeOptions}
+                fieldSize="lg"
+            />
+        </Stack>
+    );
+};
+
+// Radio groups responsivos
+const ResponsiveRadioGroups = () => {
+    const techOptions: RadioOption[] = [
+        { value: "js", label: "JavaScript" },
+        { value: "ts", label: "TypeScript" },
+        { value: "react", label: "React" },
+    ];
+
+    return (
+        <Stack spacing={6}>
+            <CustomRadioGroup
+                label="Tecnologias (Pequeno)"
+                options={techOptions}
+                fieldSize="sm"
+                defaultValue="js"
+            />
+            
+            <CustomRadioGroup
+                label="Tecnologias (Médio)"
+                options={techOptions}
+                fieldSize="md"
+                defaultValue="ts"
+            />
+            
+            <CustomRadioGroup
+                label="Tecnologias (Grande)"
+                options={techOptions}
+                fieldSize="lg"
+                defaultValue="react"
+            />
+        </Stack>
+    );
+};
+                `,
+                language: "tsx",
+            },
+        },
+    },
+};