apptise-component/dist/stories/NotificationChannelInput.stories.js

React components for Apprise notification channel configuration

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { NotificationChannelInput } from '../components/NotificationChannelInput';
import { getChannelByProtocol } from '../data/channels/index';
const meta = {
    title: 'Components/NotificationChannelInput',
    component: NotificationChannelInput,
    parameters: {
        layout: 'padded',
    },
    tags: ['autodocs'],
    argTypes: {
        value: {
            control: 'text',
            description: 'Current notification URL value',
        },
        onChange: {
            action: 'changed',
            description: 'Callback fired when the input value changes',
        },
        placeholder: {
            control: 'text',
            description: 'Placeholder text for the input field',
        },
        disabled: {
            control: 'boolean',
            description: 'Whether the input is disabled',
        },
        channels: {
            control: 'object',
            description: 'Array of available notification channels (optional)',
        },
        labels: {
            control: 'object',
            description: 'Custom labels for internationalization',
        },
        styles: {
            control: 'object',
            description: 'Custom CSS classes for styling',
        },
    },
};
export default meta;
// Wrapper component to manage state
const NotificationChannelInputWrapper = (args) => {
    const [value, setValue] = useState(args.value || '');
    return (_jsx(NotificationChannelInput, { ...args, value: value, onChange: setValue }));
};
export const Default = {
    render: NotificationChannelInputWrapper,
    args: {
        placeholder: 'Enter notification URL or click configure button',
    },
};
export const WithInitialValue = {
    render: NotificationChannelInputWrapper,
    args: {
        value: 'discord://123456789/abcdefghijklmnop/',
        placeholder: 'Enter notification URL or click configure button',
    },
};
export const WithLimitedChannels = {
    render: NotificationChannelInputWrapper,
    args: {
        placeholder: 'Only Discord and Telegram available',
        channels: [
            getChannelByProtocol('discord'),
            getChannelByProtocol('tgram'),
        ].filter((channel) => channel !== undefined),
    },
};
export const Disabled = {
    render: NotificationChannelInputWrapper,
    args: {
        value: 'discord://123456789/abcdefghijklmnop/',
        disabled: true,
        placeholder: 'This input is disabled',
    },
};
// Internationalization example with Chinese labels
export const WithChineseLabels = {
    render: NotificationChannelInputWrapper,
    args: {
        placeholder: '请输入通知URL或点击配置按钮',
        labels: {
            enterUrl: '请输入通知URL或点击配置按钮',
            configureButton: '配置通知渠道',
            configureChannelTitle: '配置通知渠道',
            selectChannel: '选择通知渠道',
            searchChannels: '搜索渠道...',
            noChannelsFound: '未找到匹配的渠道',
            cancel: '取消',
            confirm: '确认',
            generatedUrl: '生成的URL:',
            closeModal: '关闭弹窗',
            required: '必填',
            optional: '可选',
        },
    },
};
// Custom styling example
export const WithCustomStyles = {
    render: NotificationChannelInputWrapper,
    args: {
        placeholder: 'Styled notification input',
        styles: {
            container: 'border-2 border-blue-500 rounded-lg p-4 bg-blue-50',
            input: 'border-blue-300 focus:border-blue-600 focus:ring-2 focus:ring-blue-200',
            button: 'bg-blue-600 hover:bg-blue-700 text-white font-semibold',
            modal: 'shadow-2xl border-2 border-blue-200',
            header: 'bg-blue-600 text-white',
            buttonPrimary: 'bg-blue-600 hover:bg-blue-700 text-white font-bold',
            buttonSecondary: 'bg-gray-300 hover:bg-gray-400 text-gray-800',
        },
    },
};
export const Interactive = {
    render: () => {
        const [value, setValue] = useState('');
        const [log, setLog] = useState([]);
        const handleChange = (newValue) => {
            setValue(newValue);
            setLog(prev => [...prev, `URL changed: ${newValue}`].slice(-5));
        };
        return (_jsxs("div", { style: { width: '500px' }, children: [_jsx(NotificationChannelInput, { value: value, onChange: handleChange, placeholder: "Try configuring different notification channels" }), _jsxs("div", { style: { marginTop: '20px', padding: '12px', backgroundColor: '#f3f4f6', borderRadius: '6px' }, children: [_jsx("h4", { style: { margin: '0 0 8px 0', fontSize: '14px', fontWeight: '600' }, children: "Current URL:" }), _jsx("code", { style: { fontSize: '12px', wordBreak: 'break-all' }, children: value || '(empty)' })] }), log.length > 0 && (_jsxs("div", { style: { marginTop: '12px', padding: '12px', backgroundColor: '#f0f9ff', borderRadius: '6px' }, children: [_jsx("h4", { style: { margin: '0 0 8px 0', fontSize: '14px', fontWeight: '600' }, children: "Change Log:" }), log.map((entry, index) => (_jsx("div", { style: { fontSize: '12px', color: '#374151', marginBottom: '4px' }, children: entry }, index)))] }))] }));
    },
};
//# sourceMappingURL=NotificationChannelInput.stories.js.map