lsoft-ui 0.0.1

package/dist/stories/Londrisoft/Components/CustomTextarea.stories.d.ts

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import CustomTextarea from "../../../components/CustomTextarea";
+declare const meta: Meta<typeof CustomTextarea>;
+export default meta;
+type Story = StoryObj<typeof CustomTextarea>;
+/** 💡 Exemplo com tooltip informativo */
+export declare const WithTooltip: Story;
+/** 🎨 Exemplo com label customizado */
+export declare const CustomLabel: Story;
+/** 🔧 Exemplo com todas as funcionalidades */
+export declare const CompleteExample: Story;
+/** 🎯 Exemplo padrão do CustomTextarea */
+export declare const Default: Story;
+/** 📝 Comparação de estilos de label */
+export declare const LabelStyles: Story;
+/** ❗ Exemplo com erro exibido */
+export declare const WithError: Story;
+/** 🚫 Textarea desabilitado */
+export declare const Disabled: Story;
+/** 🛠️ Sem FormControl */
+export declare const WithoutFormControl: Story;

package/dist/stories/Londrisoft/Components/CustomTextarea.stories.js

@@ -0,0 +1,408 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import CustomTextarea from "../../../components/CustomTextarea";
+const meta = {
+    title: "Londrisoft/Components/Textarea",
+    component: CustomTextarea,
+    tags: ["autodocs"],
+    args: {
+        label: "Descrição",
+        placeholder: "Digite sua mensagem...",
+        error: "",
+        showError: true,
+        withFormControl: true,
+        isDisabled: false,
+        value: "",
+        tooltip: "",
+        labelColor: "neutral.400",
+        labelBold: true,
+    },
+    argTypes: {
+        label: {
+            control: "text",
+            description: "Texto exibido como rótulo acima do textarea.",
+            table: { category: "Content" },
+        },
+        placeholder: {
+            control: "text",
+            description: "Texto exibido quando o campo está vazio.",
+            table: { category: "Behavior" },
+        },
+        error: {
+            control: "text",
+            description: "Mensagem de erro exibida abaixo do textarea.",
+            table: { category: "State" },
+        },
+        showError: {
+            control: "boolean",
+            description: "Controla a exibição da mensagem de erro.",
+            table: { category: "Behavior" },
+        },
+        withFormControl: {
+            control: "boolean",
+            description: "Envolve o textarea em um FormControl para validação.",
+            table: { category: "Behavior" },
+        },
+        isDisabled: {
+            control: "boolean",
+            description: "Desabilita o textarea, tornando-o somente leitura.",
+            table: { category: "Behavior" },
+        },
+        value: {
+            control: "text",
+            description: "Valor atual do textarea (modo controlado).",
+            table: { category: "State" },
+        },
+        tooltip: {
+            control: "text",
+            description: "Tooltip informativo exibido ao lado do label.",
+            table: { category: "Content" },
+        },
+        labelColor: {
+            control: "color",
+            description: "Cor do label do textarea.",
+            table: { category: "Appearance" },
+        },
+        labelBold: {
+            control: "boolean",
+            description: "Define se o label deve ser exibido em negrito.",
+            table: { category: "Appearance" },
+        },
+        onChange: {
+            action: "onChange",
+            table: { disable: true },
+        },
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: "Textarea customizado com suporte a label em negrito, tooltips informativos, exibição de mensagens de erro, desabilitação e integração com Chakra UI. O componente oferece flexibilidade total para customização visual e funcional.",
+            },
+        },
+        backgrounds: {
+            default: "light",
+            values: [
+                { name: "light", value: "#ffffff" },
+                { name: "dark", value: "#000000" },
+            ],
+        },
+        a11y: {
+            element: "#root",
+        },
+    },
+};
+export default meta;
+/** 💡 Exemplo com tooltip informativo */
+export const WithTooltip = {
+    args: {
+        label: "Biografia",
+        placeholder: "Conte-nos sobre você...",
+        tooltip: "Esta informação será exibida no seu perfil público",
+        labelBold: true,
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: `
+import React, { useState } from 'react';
+import CustomTextarea from './CustomTextarea';
+
+// Textarea com tooltip informativo
+const TextareaWithTooltip = () => {
+    const [value, setValue] = useState('');
+
+    return (
+        <CustomTextarea
+            label="Biografia"
+            placeholder="Conte-nos sobre você..."
+            tooltip="Esta informação será exibida no seu perfil público"
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            labelBold={true}
+            withFormControl={true}
+        />
+    );
+};
+        `,
+                language: "tsx",
+            },
+        },
+    },
+};
+/** 🎨 Exemplo com label customizado */
+export const CustomLabel = {
+    args: {
+        label: "Comentário",
+        placeholder: "Digite seu comentário...",
+        labelColor: "#2B6CB0",
+        labelBold: true,
+        tooltip: "Seus comentários nos ajudam a melhorar",
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: `
+import React, { useState } from 'react';
+import CustomTextarea from './CustomTextarea';
+
+// Textarea com label customizado
+const CustomLabelTextarea = () => {
+    const [value, setValue] = useState('');
+
+    return (
+        <CustomTextarea
+            label="Comentário"
+            placeholder="Digite seu comentário..."
+            labelColor="blue.500"
+            labelBold={true}
+            tooltip="Seus comentários nos ajudam a melhorar"
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            withFormControl={true}
+        />
+    );
+};
+        `,
+                language: "tsx",
+            },
+        },
+    },
+};
+/** 🔧 Exemplo com todas as funcionalidades */
+export const CompleteExample = {
+    args: {
+        label: "Descrição Completa",
+        placeholder: "Digite uma descrição detalhada...",
+        tooltip: "Inclua todos os detalhes relevantes. Mínimo 20 caracteres.",
+        labelColor: "#2D3748",
+        labelBold: true,
+        required: true,
+        rows: 6,
+        maxLength: 1000,
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: `
+import React, { useState } from 'react';
+import CustomTextarea from './CustomTextarea';
+
+// Textarea completo com todas as funcionalidades
+const CompleteTextarea = () => {
+    const [value, setValue] = useState('');
+    const [error, setError] = useState('');
+
+    const handleChange = (e) => {
+        const newValue = e.target.value;
+        setValue(newValue);
+        
+        // Validação
+        if (newValue.length > 0 && newValue.length < 20) {
+            setError('Mínimo 20 caracteres');
+        } else {
+            setError('');
+        }
+    };
+
+    return (
+        <CustomTextarea
+            label="Descrição Completa"
+            placeholder="Digite uma descrição detalhada..."
+            tooltip="Inclua todos os detalhes relevantes. Mínimo 20 caracteres."
+            labelColor="neutral.400"
+            labelBold={true}
+            required={true}
+            rows={6}
+            maxLength={1000}
+            value={value}
+            onChange={handleChange}
+            error={error}
+            showError={true}
+            withFormControl={true}
+        />
+    );
+};
+        `,
+                language: "tsx",
+            },
+        },
+    },
+};
+/** 🎯 Exemplo padrão do CustomTextarea */
+export const Default = {
+    parameters: {
+        docs: {
+            source: {
+                code: `
+import React, { useState } from 'react';
+import CustomTextarea from './CustomTextarea';
+
+// Textarea básico
+const BasicTextarea = () => {
+    const [value, setValue] = useState('');
+
+    return (
+        <CustomTextarea
+            label="Descrição"
+            placeholder="Digite sua mensagem..."
+            tooltip="Informação adicional sobre o campo"
+            labelColor="blue.500"
+            labelBold={true}
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            error=""
+            showError={true}
+            withFormControl={true}
+            isDisabled={false}
+        />
+    );
+};
+        `,
+                language: "tsx",
+            },
+        },
+    },
+};
+/** 📝 Comparação de estilos de label */
+export const LabelStyles = {
+    render: () => (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "20px" }, children: [_jsx(CustomTextarea, { label: "Label em Negrito (Padr\u00E3o)", placeholder: "Este label est\u00E1 em negrito...", tooltip: "Label com labelBold={true}", labelBold: true, withFormControl: true }), _jsx(CustomTextarea, { label: "Label Normal", placeholder: "Este label est\u00E1 em peso normal...", tooltip: "Label com labelBold={false}", labelBold: false, withFormControl: true }), _jsx(CustomTextarea, { label: "Label Colorido", placeholder: "Este label tem cor customizada...", tooltip: "Label com cor personalizada", labelColor: "blue.500", labelBold: true, withFormControl: true })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: `
+import React from 'react';
+import CustomTextarea from './CustomTextarea';
+
+const LabelStylesExample = () => {
+    return (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+            <CustomTextarea
+                label="Label em Negrito (Padrão)"
+                placeholder="Este label está em negrito..."
+                tooltip="Label com labelBold={true}"
+                labelBold={true}
+                withFormControl={true}
+            />
+            
+            <CustomTextarea
+                label="Label Normal"
+                placeholder="Este label está em peso normal..."
+                tooltip="Label com labelBold={false}"
+                labelBold={false}
+                withFormControl={true}
+            />
+            
+            <CustomTextarea
+                label="Label Colorido"
+                placeholder="Este label tem cor customizada..."
+                tooltip="Label com cor personalizada"
+                labelColor="blue.500"
+                labelBold={true}
+                withFormControl={true}
+            />
+        </div>
+    );
+};
+        `,
+                language: "tsx",
+            },
+        },
+    },
+};
+/** ❗ Exemplo com erro exibido */
+export const WithError = {
+    args: {
+        error: "Campo obrigatório",
+        showError: true,
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: `
+import React, { useState } from 'react';
+import CustomTextarea from './CustomTextarea';
+
+// Textarea com erro
+const TextareaWithError = () => {
+    const [value, setValue] = useState('');
+    const [error, setError] = useState('Campo obrigatório');
+
+    return (
+        <CustomTextarea
+            label="Descrição"
+            placeholder="Digite sua mensagem..."
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            error={error}
+            showError={true}
+            withFormControl={true}
+        />
+    );
+};
+        `,
+                language: "tsx",
+            },
+        },
+    },
+};
+/** 🚫 Textarea desabilitado */
+export const Disabled = {
+    args: {
+        isDisabled: true,
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: `
+import React, { useState } from 'react';
+import CustomTextarea from './CustomTextarea';
+
+// Textarea desabilitado
+const DisabledTextarea = () => {
+    return (
+        <CustomTextarea
+            label="Descrição"
+            placeholder="Este campo está desabilitado..."
+            value="Conteúdo somente leitura"
+            isDisabled={true}
+            withFormControl={true}
+        />
+    );
+};
+        `,
+                language: "tsx",
+            },
+        },
+    },
+};
+/** 🛠️ Sem FormControl */
+export const WithoutFormControl = {
+    args: {
+        withFormControl: false,
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: `
+import React, { useState } from 'react';
+import CustomTextarea from './CustomTextarea';
+
+// Textarea sem FormControl
+const TextareaWithoutFormControl = () => {
+    const [value, setValue] = useState('');
+
+    return (
+        <CustomTextarea
+            label="Descrição"
+            placeholder="Digite sua mensagem..."
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            withFormControl={false}
+        />
+    );
+};
+        `,
+                language: "tsx",
+            },
+        },
+    },
+};

package/dist/stories/Londrisoft/Components/CustomToast.stories.d.ts

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import CustomToast from "../../../components/CustomToast";
+declare const meta: Meta<typeof CustomToast>;
+export default meta;
+type Story = StoryObj<typeof CustomToast>;
+/** 🎯 Exemplo básico do CustomToast */
+export declare const Default: Story;
+/** 📧 Exemplo com ícone */
+export declare const WithIcon: Story;
+/** 🎨 Exemplo com todas as cores de alert */
+export declare const AllAlertColors: Story;
+/** 🎯 Exemplo com ícones e cores de alert */
+export declare const AlertWithIcons: Story;
+/** 🎨 Exemplo com variações de cores */
+export declare const ColorVariations: Story;
+/** 🔄 Exemplo de integração com ações */
+export declare const ActionIntegration: Story;
+/** 📱 Exemplo de toasts para mobile */
+export declare const MobileOptimized: Story;
+/** 🎯 Exemplo de toasts para formulários */
+export declare const FormValidation: Story;