albinasoft-ui-package 1.0.2 → 1.0.4

package/src/components/CustomRichTextbox.tsx

@@ -1,123 +0,0 @@
-import React from 'react';
-import ReactQuill, { Quill } from 'react-quill';
-import 'react-quill/dist/quill.snow.css'; // Quill'in varsayılan stil dosyası
-import { OverlayTrigger, Tooltip } from 'react-bootstrap';
-import { FaExclamationTriangle, FaInfoCircle } from 'react-icons/fa';
-
-interface CustomRichTextboxProps {
-  id?: string;
-  name?: string;
-  label: string;
-  value: string;
-  placeholder?: string;
-  required?: boolean;
-  errorMessage?: string;
-  conditionalErrorVisible?: boolean;
-  conditionalErrorMessage?: string;
-  description?: string | null;
-  tooltip?: string;
-  disabled?: boolean;
-  style?: React.CSSProperties;
-  className?: string;
-  onChange: (value: string) => void; // Zengin metin değeri döndürür
-}
-
-const CustomRichTextbox: React.FC<CustomRichTextboxProps> = ({
-  id,
-  name,
-  label,
-  value,
-  placeholder,
-  required = false,
-  errorMessage,
-  conditionalErrorVisible = false,
-  conditionalErrorMessage,
-  description,
-  tooltip,
-  disabled = false,
-  style = {border:'none'},
-  className,
-  onChange,
-}) => {
-  const handleChange = (content: string) => {
-    onChange(content);
-  };
-
-  return (
-    <div className={className}>
-      <div className="form-group">
-        <label htmlFor={id} className="form-label">
-          {label}
-        </label>
-        <div className="position-relative">
-          {tooltip && (
-            <OverlayTrigger
-              placement="bottom"
-              overlay={<Tooltip id={`tooltip-${id}`}>{tooltip}</Tooltip>}
-            >
-              <div>
-                <ReactQuill
-                  id={id}
-                  value={value}
-                  placeholder={placeholder}
-                  readOnly={disabled}
-                  onChange={handleChange}
-                  className="form-control"
-                  style={style}
-                  theme="snow" // Kullanılan tema
-                />
-              </div>
-            </OverlayTrigger>
-          )}
-          {!tooltip && (
-            <ReactQuill
-              id={id}
-              value={value}
-              placeholder={placeholder}
-              readOnly={disabled}
-              onChange={handleChange}
-              className="form-control"
-              style={style}
-              theme="snow"
-            />
-          )}
-
-          {required && !value && (
-            <div className="invalid-feedback text-danger mt-2">
-              <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 mt-2">
-              <div className="description-icon">
-                <FaExclamationTriangle />
-              </div>
-              <div className="description-text">
-                <span>{conditionalErrorMessage}</span>
-              </div>
-            </div>
-          )}
-
-          {description && (
-            <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>
-  );
-};
-
-export default CustomRichTextbox;

package/src/components/CustomSelect.tsx

@@ -1,134 +0,0 @@
-import React, { ChangeEvent, useRef } from 'react';
-import { OverlayTrigger, Tooltip } from 'react-bootstrap';
-import { FaExclamationTriangle, FaInfoCircle } from 'react-icons/fa';
-
-interface CustomSelectOption {
-  id: string;
-  label: string;
-  value: string;
-}
-
-interface CustomSelectProps {
-  id?: string;
-  name?: string;
-  label: string;
-  options: CustomSelectOption[];
-  value: string | string[];
-  required?: boolean;
-  multiple?: boolean;
-  errorMessage?: string;
-  conditionalErrorVisible?: boolean;
-  conditionalErrorMessage?: string;
-  tooltip?: string;
-  description?: string | null;
-  disabled?: boolean;
-  className?: string;
-  style?: React.CSSProperties;
-  onChange: (value: string | string[]) => void; // Updated
-}
-
-const CustomSelect: React.FC<CustomSelectProps> = ({
-  id,
-  name,
-  label,
-  options,
-  value,
-  required = false,
-  multiple = false,
-  errorMessage,
-  conditionalErrorVisible,
-  conditionalErrorMessage,
-  tooltip,
-  description,
-  disabled = false,
-  className,
-  style,
-  onChange,
-}) => {
-
-  const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {
-    const selectedOptions = multiple
-      ? Array.from(e.target.selectedOptions).map((option) => option.value)
-      : e.target.value;
-
-    onChange(selectedOptions); // Pass string or string[] as needed
-  };
-
-  return (
-    <div className={className} style={style}>
-      <div className="form-group">
-        <label htmlFor={id} className="form-label">
-          {label}
-        </label>
-        <div className="select-container">
-          <OverlayTrigger
-            placement="bottom"
-            overlay={
-              tooltip ? (
-                <Tooltip id={`tooltip-${id || name}`}>
-                  {tooltip}
-                </Tooltip>
-              ) : <></>
-            }
-          >
-            <select
-              id={id}
-              name={name}
-              className="form-select"
-              value={value}
-              multiple={multiple}
-              required={required}
-              disabled={disabled}
-              onChange={handleChange} // Yeni handleChange
-            >
-              {!multiple && (
-                <option value="" disabled>
-                  Seçiniz
-                </option>
-              )}
-              {options.map((option) => (
-                <option key={option.id} value={option.value}>
-                  {option.label}
-                </option>
-              ))}
-            </select>
-          </OverlayTrigger>
-
-          <div className="invalid-feedback text-danger mt-2">
-              <div className="description-icon">
-                <FaExclamationTriangle />
-              </div>
-              <div className="description-text">
-                <span>{errorMessage || 'Lütfen bir seçim yapınız.'}</span>
-              </div>
-            </div>
-
-          {conditionalErrorVisible && (
-            <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 && (
-            <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>
-  );
-};
-
-
-export default CustomSelect;

package/src/components/CustomText.tsx

@@ -1,199 +0,0 @@
-import React from 'react';
-
-enum TextType {
-  BOLDHEAD = 'boldhead',
-  HEADING = 'heading',
-  SUBHEADING = 'subheading',
-  PARAGRAPH = 'paragraph',
-
-}
-
-enum TextAlign {
-  START = 'start',
-  CENTER = 'center',
-  END = 'end',
-}
-
-enum FontSize {
-  XXXXL = '96px',
-  XXXL = '72px',
-  XXL = '48px',
-  XL = '32px',
-  L = '24px',
-  M = '20px',
-  S = '18px',
-  XS = '16px',
-  XXS = '14px',
-  XXXS = '12px',
-  XXXXS = '10px',
-}
-
-enum LineHeight {
-  XXL = '5',
-  XL = '4',
-  L = '3',
-  M = '2.5',
-  S = '2',
-  XS = '1.5',
-  XXS = '1',
-}
-
-enum FontWeight {
-  BOLD = '800',
-  NORMAL = '600',
-  THIN = '400',
-}
-
-enum Color {
-  DEFAULT = "currentColor",
-  PRIMARY = 'text-primary',
-  SECONDARY = 'text-secondary',
-  SUCCESS = 'text-success',
-  WARNING = 'text-warning',
-  DANGER = 'text-danger',
-  INFO = 'text-info',
-  DARK = 'text-dark',
-  LIGHT = 'text-light',
-}
-
-interface CustomTextProps {
-  id?: string;
-  value: string;
-  className?: string;
-  style?: React.CSSProperties;
-  textType?: TextType;
-  color?: Color;
-  textAlign?: TextAlign;
-  fontSize?: FontSize;
-  lineHeight?: LineHeight;
-  fontWeight?: FontWeight;
-  underline?: boolean;
-  overline?: boolean;
-  linethrough?: boolean;
-  italic?: boolean;
-  textAlignClass?: string;
-  linkText?: string;
-}
-
-const CustomText: React.FC<CustomTextProps> = ({
-  id,
-  value,
-  className = '',
-  style = {},
-  textType = TextType.PARAGRAPH, // Varsayılan olarak 'paragraph'
-  color,
-  textAlign,
-  fontSize,
-  lineHeight,
-  fontWeight,
-  underline = false,
-  overline = false,
-  linethrough = false,
-  italic = false,
-  textAlignClass,
-  linkText,
-}) => {
-  // Varsayılan stiller
-  const defaultStyles: Record<TextType, React.CSSProperties> = {
-    [TextType.BOLDHEAD]: {
-      fontSize: FontSize.XL,
-      lineHeight: LineHeight.S,
-      fontWeight: FontWeight.BOLD,
-    },
-    [TextType.HEADING]: {
-      fontSize: FontSize.XL,
-      lineHeight: LineHeight.S,
-      fontWeight: FontWeight.NORMAL,
-    },
-    [TextType.SUBHEADING]: {
-      fontSize: FontSize.L,
-      lineHeight: LineHeight.XS,
-      fontWeight: FontWeight.NORMAL,
-    },
-    [TextType.PARAGRAPH]: {
-      fontSize: FontSize.XS,
-      lineHeight: LineHeight.XXS,
-      fontWeight: FontWeight.THIN,
-    },
-  };
-
-  // Dinamik sınıf ekleme
-  if (textType == TextType.BOLDHEAD && !color) {
-    color = Color.DARK;
-  } else if (textType == TextType.HEADING && !color) {
-    color = Color.DARK;
-  } else if (textType == TextType.SUBHEADING && !color) {
-    color = Color.DARK;
-  } else if (textType == TextType.PARAGRAPH && !color) {
-    color = Color.DEFAULT;
-  }
-
-  if (textAlign == TextAlign.START) {
-    textAlignClass = "text-start";
-  } else if (textAlign == TextAlign.CENTER) {
-    textAlignClass = "text-center";
-  } else if (textAlign == TextAlign.END) {
-    textAlignClass = "text-end";
-  }
-
-  // Text decoration birleştirme
-  const textDecoration = [
-    underline ? 'underline' : '',
-    overline ? 'overline' : '',
-    linethrough ? 'line-through' : '',
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  // Varsayılan stil ile kullanıcı stilini birleştir
-  const combinedStyle: React.CSSProperties = {
-    ...defaultStyles[textType],
-    textAlign: textAlign ?? defaultStyles[textType].textAlign,
-    fontSize: fontSize ?? defaultStyles[textType].fontSize,
-    lineHeight: lineHeight ?? defaultStyles[textType].lineHeight,
-    fontWeight: fontWeight ?? defaultStyles[textType].fontWeight,
-    textDecoration: textDecoration || undefined,
-    fontStyle: italic ? 'italic' : undefined,
-    ...style, // Kullanıcıdan gelen stil
-  };
-
-  const combinedClassName = `${color} ${className}`.trim();
-
-  // URL'leri tıklanabilir hale getirme
-  const renderWithLinks = (text: string, linkText?: string) => {
-    const urlRegex = /(https?:\/\/[^\s]+|www\.[^\s]+)/g; // URL'leri algılayan RegEx
-    const parts = text.split(urlRegex);
-  
-    return parts.map((part, index) =>
-      urlRegex.test(part) ? (
-        <a
-          key={index}
-          href={part.startsWith('http') ? part : `https://${part}`} // Eğer http yoksa başına ekle
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          {linkText || part.replace(/https?:\/\/|www\.|\/$/g, '')} {/* linkText varsa kullan */}
-        </a>
-      ) : (
-        part
-      )
-    );
-  };
-  
-  return (
-    <div
-      className={`${textAlignClass}`} //TextAlign sınıf olarak ekleniyor
-    >
-      <span
-        id={id || `custom-text-${Date.now()}`}
-        className={`custom-text ${combinedClassName}`} // Color sınıf olarak ekleniyor
-        style={combinedStyle} // Geri kalan stiller
-      >
-        {renderWithLinks(value, linkText)} {/* URL'ler işlenerek render ediliyor */}
-      </span>
-    </div>
-  );
-};
-
-export { CustomText, TextType, TextAlign, FontSize, LineHeight, FontWeight, Color };
-export default CustomText;

package/src/components/CustomTextarea.tsx

@@ -1,131 +0,0 @@
-import React from 'react';
-import { OverlayTrigger, Tooltip } from 'react-bootstrap';
-import { FaExclamationTriangle, FaInfoCircle } from 'react-icons/fa';
-
-interface CustomTextareaProps {
-  id?: string;
-  name?: string;
-  label: string;
-  value: string;
-  placeholder?: string;
-  required?: boolean;
-  errorMessage?: string;
-  conditionalErrorVisible?: boolean;
-  conditionalErrorMessage?: string;
-  disabled?: boolean;
-  readOnly?: boolean;
-  rows?: number;
-  description?: string | null;
-  tooltip?: string;
-  style?: React.CSSProperties;
-  className?: string;
-  onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
-}
-
-const CustomTextarea: React.FC<CustomTextareaProps> = ({
-  id,
-  name,
-  label,
-  value,
-  placeholder,
-  required = false,
-  errorMessage,
-  conditionalErrorVisible = false,
-  conditionalErrorMessage,
-  disabled = false,
-  readOnly = false,
-  rows = 3,
-  description,
-  tooltip,
-  style,
-  className,
-  onChange,
-}) => {
-  return (
-    <div className={className}>
-      <div className="form-group">
-        <label htmlFor={id} className="form-label">
-          {label}
-        </label>
-        <div className="position-relative">
-          {tooltip ? (
-            <OverlayTrigger
-              placement="bottom"
-              overlay={<Tooltip id={`tooltip-${tooltip}`}>{tooltip}</Tooltip>}
-            >
-              <textarea
-                id={id}
-                name={name}
-                value={value}
-                placeholder={placeholder}
-                onChange={onChange}
-                className="form-control"
-                style={style}
-                required={required}
-                disabled={disabled}
-                readOnly={readOnly}
-                rows={rows}
-              />
-            </OverlayTrigger>
-          ) : (
-            <textarea
-              id={id}
-              name={name}
-              value={value}
-              placeholder={placeholder}
-              onChange={onChange}
-              className="form-control"
-              style={style}
-              required={required}
-              disabled={disabled}
-              readOnly={readOnly}
-              rows={rows}
-            />
-          )}
-
-{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 default CustomTextarea;

package/src/components/CustomUploader.tsx

@@ -1,125 +0,0 @@
-import React, { useState } from 'react';
-import { FaCloudUploadAlt, FaTimes } from 'react-icons/fa';
-import { toast } from 'react-toastify';
-
-export enum UploadError {
-  INVALID_TYPE = 'INVALID_TYPE',
-  EXCEEDS_SIZE = 'EXCEEDS_SIZE',
-}
-
-interface FileInfo {
-  name: string;
-  size: number; // bytes
-  type: string;
-}
-
-interface CustomUploaderProps {
-  id: string;
-  label: string;
-  fileTypes: string[]; // Yüklenebilir dosya türleri
-  maxFileSize: number; // Maksimum dosya boyutu (MB)
-  multiple?: boolean; // Çoklu dosya yükleme seçeneği
-  required?: boolean;
-  description?: string;
-  tooltip?: string;
-  value?: FileInfo[]; // Yüklü dosyalar
-  onChange: (files: FileInfo[]) => void;
-  onError?: (errorType: UploadError, file?: File) => void; // Hata işleyici
-}
-
-const CustomUploader: React.FC<CustomUploaderProps> = ({
-  id,
-  label,
-  fileTypes,
-  maxFileSize,
-  multiple = false,
-  required = false,
-  description,
-  tooltip,
-  value = [],
-  onChange,
-  onError,
-}) => {
-  const [files, setFiles] = useState<FileInfo[]>(value);
-
-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const selectedFiles = Array.from(e.target.files || []);
-    const newFiles: FileInfo[] = [];
-    const errors: { type: UploadError; file?: File }[] = [];
-
-    selectedFiles.forEach((file) => {
-      const fileType = file.type;
-      const fileSizeMB = file.size / (1024 * 1024);
-
-      if (!fileTypes.includes(fileType)) {
-        errors.push({ type: UploadError.INVALID_TYPE, file });
-        onError?.(UploadError.INVALID_TYPE, file);
-      } else if (fileSizeMB > maxFileSize) {
-        errors.push({ type: UploadError.EXCEEDS_SIZE, file });
-        onError?.(UploadError.EXCEEDS_SIZE, file);
-      } else {
-        newFiles.push({
-          name: file.name,
-          size: file.size,
-          type: file.type,
-        });
-      }
-    });
-
-    if (errors.length > 0) {
-      errors.forEach(({ type, file }) => {
-        const fileName = file?.name || 'Unknown';
-        if (type === UploadError.INVALID_TYPE) {
-          toast.error(`Invalid file type: ${fileName}`);
-        } else if (type === UploadError.EXCEEDS_SIZE) {
-          toast.error(`File exceeds size limit: ${fileName}`);
-        }
-      });
-    }
-
-    const updatedFiles = multiple ? [...files, ...newFiles] : newFiles;
-    setFiles(updatedFiles);
-    onChange(updatedFiles);
-  };
-
-  const handleRemoveFile = (fileName: string) => {
-    const updatedFiles = files.filter((file) => file.name !== fileName);
-    setFiles(updatedFiles);
-    onChange(updatedFiles);
-  };
-
-  return (
-    <div className="form-group">
-      <label htmlFor={id} className="form-label">
-        {label} {tooltip && <span className="ms-2" title={tooltip}>ℹ️</span>}
-      </label>
-      <div className="uploader-container">
-        <input
-          id={id}
-          type="file"
-          multiple={multiple}
-          onChange={handleFileChange}
-          className="form-control"
-        />
-        {description && <small className="form-text text-muted">{description}</small>}
-        {required && files.length === 0 && (
-          <div className="invalid-feedback">This field is required.</div>
-        )}
-        <div className="file-preview mt-3">
-          {files.map((file) => (
-            <div key={file.name} className="file-item">
-              <FaCloudUploadAlt className="me-2" />
-              <span>{file.name} ({(file.size / (1024 * 1024)).toFixed(2)} MB)</span>
-              <FaTimes
-                className="remove-icon text-danger ms-3"
-                onClick={() => handleRemoveFile(file.name)}
-              />
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default CustomUploader;