bnk-components/dist/examples/AutoFormExample.js

Reusable React components for Issaglam UI - Modern, responsive UI components with TypeScript support

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { AutoForm } from '../components/AutoForm';
const AutoFormExample = () => {
    const [formData, setFormData] = useState({});
    const handleFormSubmit = (data) => {
        console.log('Form submitted:', data);
        setFormData(data);
    };
    const sampleMetadata = {
        fields: [
            {
                name: 'firstName',
                label: 'Ad',
                type: 'string',
                required: true,
                placeholder: 'Adınızı giriniz'
            },
            {
                name: 'lastName',
                label: 'Soyad',
                type: 'string',
                required: true,
                placeholder: 'Soyadınızı giriniz'
            },
            {
                name: 'email',
                label: 'E-posta',
                type: 'email',
                required: true,
                placeholder: 'E-posta adresinizi giriniz'
            },
            {
                name: 'age',
                label: 'Yaş',
                type: 'number',
                placeholder: 'Yaşınızı giriniz'
            },
            {
                name: 'department',
                label: 'Departman',
                type: 'enum',
                enumValues: [
                    { value: 'it', label: 'Bilgi Teknolojileri' },
                    { value: 'hr', label: 'İnsan Kaynakları' },
                    { value: 'finance', label: 'Finans' },
                    { value: 'marketing', label: 'Pazarlama' }
                ],
                required: true
            },
            {
                name: 'isActive',
                label: 'Aktif',
                type: 'boolean'
            }
        ]
    };
    return (_jsxs("div", { className: "example-page", children: [_jsxs("div", { className: "example-header", children: [_jsx("h1", { children: "Auto Form Bile\u015Feni" }), _jsx("p", { children: "Otomatik form olu\u015Fturma bile\u015Feni \u00F6rnekleri" })] }), _jsxs("div", { className: "example-section", children: [_jsx("h2", { children: "Temel Kullan\u0131m" }), _jsx("p", { children: "AutoForm bile\u015Feni, metadata tan\u0131m\u0131na g\u00F6re otomatik olarak form alanlar\u0131 olu\u015Fturur." }), _jsx("div", { className: "code-block", children: `import { AutoForm } from 'bnk-components';

const metadata = {
  fields: [
    {
      name: 'firstName',
      label: 'Ad',
      type: 'text',
      required: true
    }
  ]
};

<AutoForm 
  metadata={metadata}
  onSubmit={handleSubmit}
/>` }), _jsx("div", { style: { marginTop: '2rem' }, children: _jsx(AutoForm, { metadata: sampleMetadata, data: {}, onChange: (fieldName, value) => {
                                console.log(fieldName, value);
                            }, onSubmit: handleFormSubmit }) }), Object.keys(formData).length > 0 && (_jsxs("div", { style: { marginTop: '2rem' }, children: [_jsx("h3", { children: "G\u00F6nderilen Veri:" }), _jsx("pre", { style: { background: '#f8f9fa', padding: '1rem', borderRadius: '8px' }, children: JSON.stringify(formData, null, 2) })] }))] }), _jsxs("div", { className: "example-section", children: [_jsx("h2", { children: "Props" }), _jsxs("table", { className: "props-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Prop" }), _jsx("th", { children: "Tip" }), _jsx("th", { children: "Zorunlu" }), _jsx("th", { children: "A\u00E7\u0131klama" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "metadata" }) }), _jsx("td", { children: _jsx("code", { children: "FormMetadata" }) }), _jsx("td", { children: "Evet" }), _jsx("td", { children: "Form alanlar\u0131n\u0131n tan\u0131m\u0131" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "onSubmit" }) }), _jsx("td", { children: _jsx("code", { children: "(data: any) => void" }) }), _jsx("td", { children: "Evet" }), _jsx("td", { children: "Form g\u00F6nderildi\u011Finde \u00E7a\u011Fr\u0131lan fonksiyon" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "initialValues" }) }), _jsx("td", { children: _jsx("code", { children: "Record<string, any>" }) }), _jsx("td", { children: "Hay\u0131r" }), _jsx("td", { children: "Form alanlar\u0131n\u0131n ba\u015Flang\u0131\u00E7 de\u011Ferleri" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "className" }) }), _jsx("td", { children: _jsx("code", { children: "string" }) }), _jsx("td", { children: "Hay\u0131r" }), _jsx("td", { children: "CSS s\u0131n\u0131f ad\u0131" })] })] })] })] }), _jsxs("div", { className: "example-section", children: [_jsx("h2", { children: "Desteklenen Alan Tipleri" }), _jsxs("ul", { children: [_jsxs("li", { children: [_jsx("strong", { children: "text" }), " - Metin giri\u015Fi"] }), _jsxs("li", { children: [_jsx("strong", { children: "email" }), " - E-posta giri\u015Fi"] }), _jsxs("li", { children: [_jsx("strong", { children: "password" }), " - \u015Eifre giri\u015Fi"] }), _jsxs("li", { children: [_jsx("strong", { children: "number" }), " - Say\u0131 giri\u015Fi"] }), _jsxs("li", { children: [_jsx("strong", { children: "textarea" }), " - \u00C7ok sat\u0131rl\u0131 metin"] }), _jsxs("li", { children: [_jsx("strong", { children: "select" }), " - A\u00E7\u0131l\u0131r liste"] }), _jsxs("li", { children: [_jsx("strong", { children: "checkbox" }), " - Onay kutusu"] }), _jsxs("li", { children: [_jsx("strong", { children: "radio" }), " - Radyo d\u00FC\u011Fmesi"] }), _jsxs("li", { children: [_jsx("strong", { children: "date" }), " - Tarih se\u00E7ici"] }), _jsxs("li", { children: [_jsx("strong", { children: "datetime-local" }), " - Tarih ve saat se\u00E7ici"] })] })] })] }));
};
export default AutoFormExample;