albinasoft-ui-package 1.0.1 → 1.0.3

package/src/components/CustomForm.tsx

@@ -1,327 +0,0 @@
-import React, { useRef } from 'react';
-import { toast } from 'react-toastify';
-import CustomButton from './CustomButton';
-import CustomInput from './CustomInput';
-import CustomTextarea from './CustomTextarea';
-import CustomCheckbox from './CustomCheckbox';
-import CustomRadioButton from './CustomRadioButton';
-import CustomSelect from './CustomSelect';
-import CustomDateTimePicker from './CustomDateTimePicker';
-import CustomText from './CustomText';
-import CustomDivider from './CustomDivider';
-import CustomRichTextbox from './CustomRichTextbox';
-import CustomUploader from './CustomUploader';
-
-enum ElementType {
-  INPUT = 'input',
-  TEXTAREA = 'textarea',
-  CHECKBOX = 'checkbox',
-  RADIO = 'radio',
-  SELECT = 'select',
-  DATETIMEPICKER = 'datetimepicker',
-  TEXT = 'text',
-  DIVIDER = 'divider',
-  RICHTEXTBOX = 'richtextbox',
-  UPLOADER = 'uploader',
-}
-
-// Form Elemanlarının Türleri
-interface InputElement {
-  id?: string;
-  type: ElementType;
-  label: string;
-  value: string;
-  rowId?: number; // Hangi satır
-  colId?: number; // Hangi sütun
-  innerRowId?: number; // Hangi iç satır
-  colClass?: string; // Bootstrap sütun genişliği
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-}
-
-interface TextareaElement {
-  id?: string;
-  type: ElementType.TEXTAREA;
-  label: string;
-  value: string;
-  rowId?: number; // Hangi satır
-  colId?: number; // Hangi sütun
-  innerRowId?: number; // Hangi iç satır
-  colClass?: string; // Bootstrap sütun genişliği
-  onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
-}
-
-interface CheckboxElement {
-  id?: string;
-  type: ElementType.CHECKBOX;
-  label: string;
-  value: boolean;
-  rowId?: number; // Hangi satır
-  colId?: number; // Hangi sütun
-  innerRowId?: number; // Hangi iç satır
-  colClass?: string; // Bootstrap sütun genişliği
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-}
-
-interface RadioButtonElement {
-  id?: string;
-  type: ElementType.RADIO;
-  label: string;
-  value: string;
-  options: {
-    id: string;
-    label: string;
-    value: string;
-  }[];
-  rowId?: number; // Hangi satır
-  colId?: number; // Hangi sütun
-  innerRowId?: number; // Hangi iç satır
-  colClass?: string; // Bootstrap sütun genişliği
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-}
-
-interface SelectElement {
-  id?: string;
-  type: ElementType.SELECT;
-  label: string;
-  value: string[];
-  options: {
-    id: string;
-    label: string;
-    value: string;
-  }[];
-  rowId?: number; // Hangi satır
-  colId?: number; // Hangi sütun
-  innerRowId?: number; // Hangi iç satır
-  colClass?: string; // Bootstrap sütun genişliği
-  onChange: (value: string | string[]) => void;
-}
-
-interface DateTimePickerElement {
-  id?: string;
-  type: ElementType.DATETIMEPICKER;
-  label: string;
-  value: Date | null;
-  rowId?: number; // Hangi satır
-  colId?: number; // Hangi sütun
-  innerRowId?: number; // Hangi iç satır
-  colClass?: string; // Bootstrap sütun genişliği
-  onChange: (e: Date | null) => void;
-}
-
-interface TextElement {
-  id: string;
-  type: ElementType;
-  value: string;
-  rowId?: number; // Hangi satır
-  colId?: number; // Hangi sütun
-  innerRowId?: number; // Hangi iç satır
-  colClass?: string; // Bootstrap sütun genişliği
-  style?: React.CSSProperties;
-  className?: string;
-}
-
-interface DividerElement {
-  id?: string;
-  type: ElementType.DIVIDER;
-  //value: string;
-  rowId?: number; // Hangi satır
-  colId?: number; // Hangi sütun
-  innerRowId?: number; // Hangi iç satır
-  colClass?: string; // Bootstrap sütun genişliği
-  className?: string;
-  style?: React.CSSProperties;
-}
-
-interface RichTextboxElement {
-  id?: string;
-  type: ElementType.RICHTEXTBOX;
-  label: string;
-  value: string;
-  rowId?: number;
-  colId?: number;
-  innerRowId?: number;
-  colClass?: string;
-  onChange: (value: string) => void;
-}
-
-// interface UploaderElement {
-//   id: string;
-//   type: ElementType.UPLOADER; // Uploader bileşeni türü
-//   label: string; // Etiket
-//   value?: FileInfo[]; // Varsayılan değer
-//   rowId?: number; // Satır numarası
-//   colId?: number; // Sütun numarası
-//   innerRowId?: number; // İç satır numarası
-//   colClass?: string; // CSS sınıfı (ör. Bootstrap sütun genişliği)
-//   onChange: (files: FileInfo[]) => void; // Değişiklik olayları için callback
-//   onError?: (errorType: UploadError, file?: File) => void; // Hata işleyici (isteğe bağlı)
-// }
-
-// Mevcut Türlerle Birleştirme
-type FormElement =
-  | InputElement
-  | TextareaElement
-  | CheckboxElement
-  | RadioButtonElement
-  | SelectElement
-  | DateTimePickerElement
-  | TextElement
-  | DividerElement
-  | RichTextboxElement;
-  // | UploaderElement;
-
-interface CustomFormProps {
-  elements: FormElement[];
-  onSubmit: (formValues: Record<string, any>) => void;
-  confirmLabel?: string; // Confirm butonu etiketi
-  cancelLabel?: string; // Cancel butonu etiketi
-  handleCancel?: () => void; // Cancel butonu işlevi
-  showConfirmButton?: boolean; // Confirm butonunun görünürlüğü
-  showCancelButton?: boolean; // Cancel butonunun görünürlüğü
-}
-
-const CustomForm: React.FC<CustomFormProps> = ({
-  elements,
-  onSubmit,
-  confirmLabel = 'Confirm', // Varsayılan değer
-  cancelLabel = 'Cancel',   // Varsayılan değer
-  handleCancel,
-  showConfirmButton = true, // Varsayılan olarak görünür
-  showCancelButton = false,  // Varsayılan olarak görünür
-}) => {
-  const formRef = useRef<HTMLFormElement>(null);
-
-  const handleConfirm = (e: React.FormEvent) => {
-    e.preventDefault();
-
-    const form = formRef.current;
-    if (!form) return;
-
-    const isValid = form.checkValidity();
-    if (isValid) {
-      const formValues: Record<string, any> = {};
-
-      Array.from(form.elements).forEach((element) => {
-        if (
-          element instanceof HTMLInputElement ||
-          element instanceof HTMLTextAreaElement ||
-          element instanceof HTMLSelectElement
-        ) {
-          if (element.id) { //RichTextbox boş göndermemesi için
-            const name = element.name || element.id;
-
-            if (element instanceof HTMLInputElement && element.type === ElementType.RADIO) {
-              if (element.checked) {
-                formValues[name] = element.value;
-              }
-            } else if (element instanceof HTMLInputElement && element.type === ElementType.CHECKBOX) {
-              formValues[name] = element.checked;
-            } else if (element instanceof HTMLSelectElement && element.multiple) {
-              const selectedOptions = Array.from(element.selectedOptions).map(
-                (option) => option.value
-              );
-              formValues[name] = selectedOptions;
-            } else if (element instanceof HTMLSelectElement) {
-              formValues[name] = [element.value]; // Tekli seçim bile array olarak döner
-            }
-            else {
-              formValues[name] = element.value;
-            }
-
-          }
-        }
-      });
-
-      // CustomForm elemanlarını kontrol etme
-      elements.forEach((element) => {
-        if (element.type === ElementType.RICHTEXTBOX) {
-          formValues[element.id!] = element.value; // RichTextbox değerini ekleme
-        }
-      });
-
-      // Form verilerini JSON olarak çıktıya yazdır
-      console.log(JSON.stringify(formValues, null, 2));
-
-      onSubmit(formValues);
-    } else {
-      toast.error('Gerekli tüm alanları doldurunuz.');
-      form.classList.add('was-validated');
-    }
-  };
-
-  // Elemanları satır, sütun ve iç satıra göre gruplama
-  const groupedElements = elements.reduce<Record<number, Record<number, Record<number, FormElement[]>>>>(
-    (acc, el) => {
-      const row = el.rowId || 0;
-      const col = el.colId || 0;
-      const innerRow = el.innerRowId || 0;
-
-      if (!acc[row]) acc[row] = {};
-      if (!acc[row][col]) acc[row][col] = {};
-      if (!acc[row][col][innerRow]) acc[row][col][innerRow] = [];
-
-      acc[row][col][innerRow].push(el);
-      return acc;
-    },
-    {}
-  );
-
-  return (
-    <form ref={formRef} noValidate className="needs-validation" autoComplete="off">
-      {Object.entries(groupedElements).map(([rowId, columns]) => (
-        <div className="row" key={`row-${rowId}`}>
-          {Object.entries(columns).map(([colId, innerRows]) => (
-            <div className="col" key={`col-${rowId}-${colId}`}>
-              {Object.entries(innerRows).map(([innerRowId, elements]) => (
-                <div className="row" key={`inner-row-${rowId}-${colId}-${innerRowId}`}>
-                  {elements.map((element) => (
-                    <div className={element.colClass || 'col-12'} key={element.id}>
-                      {element.type === ElementType.TEXT ? (
-                        <CustomText {...(element as TextElement)} />
-                      ) : element.type === ElementType.INPUT ? (
-                        <CustomInput {...(element as InputElement)} />
-                      ) : element.type === ElementType.TEXTAREA ? (
-                        <CustomTextarea {...(element as TextareaElement)} />
-                      ) : element.type === ElementType.CHECKBOX ? (
-                        <CustomCheckbox {...(element as CheckboxElement)} />
-                      ) : element.type === ElementType.RADIO ? (
-                        <CustomRadioButton {...(element as RadioButtonElement)} />
-                      ) : element.type === ElementType.SELECT ? (
-                        <CustomSelect {...(element as SelectElement)} />
-                      ) : element.type === ElementType.DATETIMEPICKER ? (
-                        <CustomDateTimePicker {...(element as DateTimePickerElement)} />
-                      ) : element.type === ElementType.DIVIDER ? (
-                        <CustomDivider {...(element as DividerElement)} />
-                      ) : element.type === ElementType.RICHTEXTBOX ? (
-                        <CustomRichTextbox {...(element as RichTextboxElement)} />
-                      // ) : element.type === ElementType.UPLOADER ? (
-                      //   <CustomUploader {...(element as UploaderElement)} />
-                      ) : null}
-                    </div>
-                  ))}
-                </div>
-              ))}
-            </div>
-          ))}
-        </div>
-      ))}
-      <div className="card-footer mt-3">
-        <div className="form-actions mt-3">
-          {showCancelButton && (
-            <CustomButton
-              label={cancelLabel}
-              className="btn btn-secondary"
-              onClick={handleCancel || (() => { })}
-            />
-          )}
-          {showConfirmButton && (
-            <CustomButton label={confirmLabel} onClick={handleConfirm} />
-          )}
-        </div>
-      </div>
-    </form>
-  );
-};
-
-export { CustomForm, ElementType };
-export default CustomForm;

package/src/components/CustomInput.tsx

@@ -1,180 +0,0 @@
-import React, { useState } from 'react';
-import { OverlayTrigger, Tooltip } from 'react-bootstrap';
-import { FaExclamationTriangle, FaEye, FaEyeSlash, FaInfoCircle } from 'react-icons/fa';
-
-enum InputType {
-  TEXT = 'text',
-  NUMBER = 'number',
-  TEL = 'tel',
-  PASSWORD = 'password',
-  EMAIL = 'email',
-  FILE = 'file'
-}
-
-interface CustomInputProps {
-  id?: string;
-  name?: string;
-  label: string;
-  inputType?: InputType;
-  value: string;
-  placeholder?: string;
-  required?: boolean;
-  errorMessage?: string;
-  conditionalErrorVisible?: boolean;
-  conditionalErrorMessage?: string;
-  disabled?: boolean;
-  readOnly?: boolean;
-  buttonIcon?: React.ReactNode;
-  buttonTooltip?: string;
-  description?: string | null;
-  tooltip?: string;
-  style?: React.CSSProperties;
-  className?: string;
-  buttonOnClick?: () => void;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-}
-
-const CustomInput: React.FC<CustomInputProps> = ({
-  id,
-  name,
-  label,
-  inputType = InputType.TEXT,
-  value,
-  placeholder,
-  required = false,
-  errorMessage,
-  conditionalErrorVisible = false,
-  conditionalErrorMessage,
-  disabled = false,
-  readOnly = false,
-  buttonIcon,
-  buttonTooltip,
-  description,
-  tooltip,
-  style,
-  className,
-  buttonOnClick,
-  onChange
-}) => {
-  const [showPassword, setShowPassword] = useState(false);
-  const handleType = inputType === InputType.PASSWORD && showPassword ? InputType.TEXT : inputType;
-
-  const togglePasswordVisibility = () => {
-    setShowPassword((prev) => !prev);
-  };
-
-  return (
-    <div className={className}>
-      <div className="form-group">
-        <label htmlFor={id} className="form-label">
-          {label}
-        </label>
-        <div className="input-group position-relative">
-
-          {tooltip ? (
-            <OverlayTrigger
-              placement="bottom"
-              overlay={<Tooltip id={`tooltip-${tooltip}`}>{tooltip}</Tooltip>}
-            >
-              <input
-                id={id}
-                name={name}
-                type={handleType}
-                value={value}
-                placeholder={placeholder}
-                onChange={onChange}
-                className="form-control"
-                style={style}
-                required={required}
-                disabled={disabled}
-                autoComplete="new-password" // Modern tarayıcılarda autocomplete autofill engellemek için
-              />
-            </OverlayTrigger>
-          ) : (
-            <input
-              id={id}
-              name={name}
-              type={handleType}
-              value={value}
-              placeholder={placeholder}
-              onChange={onChange}
-              className="form-control"
-              style={style}
-              required={required}
-              disabled={disabled}
-              autoComplete="new-password" // Modern tarayıcılarda autocomplete autofill engellemek için
-            />
-          )}
-
-          {/* Parola göster/gizle ikonu */}
-          {inputType === InputType.PASSWORD && (
-            <button
-              type="button"
-              onClick={togglePasswordVisibility}
-              className="btn btn-outline-secondary"
-              title={showPassword ? "Parolayı Gizle" : "Parolayı Göster"}
-            >
-              {showPassword ? <FaEyeSlash /> : <FaEye />}
-            </button>
-          )}
-
-          {/* Özel Buton */}
-          {buttonIcon && buttonOnClick && (
-            <button
-              type="button"
-              onClick={buttonOnClick}
-              className="btn btn-outline-secondary"
-              title={buttonTooltip || ""}
-            >
-              {buttonIcon}
-            </button>
-          )}
-
-          {required && (
-            <div className="invalid-feedback text-danger">
-              <div className="description-icon">
-                <FaExclamationTriangle />
-              </div>
-              <div className="description-text">
-                <span>
-                  {errorMessage || 'Bu alan boş bırakılamaz.'}
-                </span>
-              </div>
-            </div>
-          )}
-
-          {conditionalErrorVisible && (
-            <div className="conditional-error-message text-warning">
-              <div className="description-icon">
-                <FaExclamationTriangle />
-              </div>
-              <div className="description-text">
-                <span>
-                  {conditionalErrorMessage}
-                </span>
-              </div>
-            </div>
-          )}
-
-          {description && (
-            <div className="form-description text-secondary">
-              <div className="description-icon">
-                <FaInfoCircle />
-              </div>
-              <div className="description-text">
-                <span>
-                  {description}
-                </span>
-              </div>
-            </div>
-          )}
-
-        </div>
-      </div>
-    </div>
-  );
-
-};
-
-export { CustomInput, InputType };
-export default CustomInput;

package/src/components/CustomModal.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import { Modal } from 'react-bootstrap';
-
-interface CustomModalProps {
-  show: boolean; // Modalın açık/kapalı durumu
-  title?: string; // Modal başlığı
-  size?: 'sm' | 'lg' | 'xl' | 'fullscreen'; // Modal boyutu ve fullscreen seçeneği
-  onHide: () => void; // Modalı kapatma fonksiyonu
-  children?: React.ReactNode; // Modal içeriği
-  footer?: React.ReactNode; // Modal footer içeriği (isteğe bağlı)
-  style?: React.CSSProperties; // Modalın özel stilleri
-  bodyStyle?: React.CSSProperties; // Modal.Body için stil özelliği
-}
-
-const CustomModal: React.FC<CustomModalProps> = ({
-  show,
-  title = 'Default Title',
-  size = 'lg',
-  onHide,
-  children,
-  footer,
-  style,
-  bodyStyle, // Modal.Body için özel stil
-}) => {
-  return (
-    <Modal
-      show={show}
-      onHide={onHide}
-      size={size !== 'fullscreen' ? size : undefined} // Tam ekran haricinde boyut seçimi
-      fullscreen={size === 'fullscreen' ? true : undefined} // React-Bootstrap'ın fullscreen özelliği
-      centered={size !== 'fullscreen'} // Tam ekran dışında merkezleme
-      style={style} // Stil özelliği eklendi
-    >
-      <Modal.Header closeButton>
-        <Modal.Title>{title}</Modal.Title>
-      </Modal.Header>
-      <Modal.Body style={bodyStyle}>{children}</Modal.Body>
-      {footer && <Modal.Footer>{footer}</Modal.Footer>}
-    </Modal>
-  );
-};
-
-export default CustomModal;

package/src/components/CustomRadioButton.tsx

@@ -1,119 +0,0 @@
-import React from 'react';
-import { OverlayTrigger, Tooltip } from 'react-bootstrap';
-import { FaExclamationTriangle, FaInfoCircle } from 'react-icons/fa';
-
-interface CustomRadioButtonOption {
-    id: string;
-    label: string;
-    value: string;
-}
-
-interface CustomRadioButtonProps {
-    id?: string;
-    name?: string;
-    label: string;
-    options: CustomRadioButtonOption[];
-    value: string;
-    required?: boolean;
-    errorMessage?: string;
-    conditionalErrorVisible?: boolean;
-    conditionalErrorMessage?: string;
-    tooltip?: string;
-    description?: string | null;
-    disabled?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-}
-
-const CustomRadioButton: React.FC<CustomRadioButtonProps> = ({
-    id,
-    name,
-    label,
-    options,
-    value,
-    required = false,
-    errorMessage,
-    conditionalErrorVisible,
-    conditionalErrorMessage,
-    tooltip,
-    description,
-    disabled = false,
-    className,
-    style,
-    onChange,
-}) => {
-    return (
-        <div className={className} style={style}>
-            <div className="form-group">
-                <label className="form-label">{label}</label>
-                <div className="radio-options">
-                    {options.map((option, index) => (
-                        <div key={option.id} className="form-check">
-                            <OverlayTrigger
-                                placement="bottom"
-                                overlay={
-                                    tooltip ? (
-                                        <Tooltip id={`tooltip-${option.id}`}>
-                                            {tooltip}
-                                        </Tooltip>
-                                    ) : <></>
-                                }
-                            >
-                                <input
-                                    id={option.id}
-                                    name={name || id} 
-                                    type="radio"
-                                    className="form-check-input"
-                                    value={option.value}
-                                    checked={value === option.value}
-                                    disabled={disabled}
-                                    onChange={onChange}
-                                    required={required}
-                                />
-                            </OverlayTrigger>
-                            <label htmlFor={option.id} className="form-check-label">
-                                {option.label}
-                            </label>
-
-                            {required && !value && index === options.length - 1 && (
-                                <div className="invalid-feedback text-danger mt-2">
-                                    <div className="description-icon">
-                                        <FaExclamationTriangle />
-                                    </div>
-                                    <div className="description-text">
-                                        <span>{errorMessage || 'Seçim yapılması gerekmektedir.'}</span>
-                                    </div>
-                                </div>
-                            )}
-
-                            {conditionalErrorVisible && index === options.length - 1 && (
-                                <div className="conditional-error-message text-warning mt-2">
-                                    <div className="description-icon">
-                                        <FaExclamationTriangle />
-                                    </div>
-                                    <div className="description-text">
-                                        <span>{conditionalErrorMessage}</span>
-                                    </div>
-                                </div>
-                            )}
-
-                            {description && index === options.length - 1 && (
-                                <div className="form-description text-secondary mt-2">
-                                    <div className="description-icon">
-                                        <FaInfoCircle />
-                                    </div>
-                                    <div className="description-text">
-                                        <span>{description}</span>
-                                    </div>
-                                </div>
-                            )}
-                        </div>
-                    ))}
-                </div>
-            </div>
-        </div>
-    );
-};
-
-export default CustomRadioButton;