albinasoft-ui-package 1.0.2 → 1.0.4

package/src/assets/images/albinasoft/albinasoft_logo.svg

@@ -1,22 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="108.000000pt" height="108.000000pt" viewBox="0 0 108.000000 108.000000"
- preserveAspectRatio="xMidYMid meet">
-
-<g transform="translate(0.000000,108.000000) scale(0.100000,-0.100000)"
-fill="#000000" stroke="none">
-<path d="M397 1045 c-138 -38 -272 -146 -332 -269 -69 -139 -80 -287 -31 -421
-l21 -60 290 4 c426 5 429 7 124 64 -140 27 -258 52 -262 56 -17 17 -26 136
--16 211 24 171 124 315 275 398 l59 31 -40 0 c-22 -1 -62 -7 -88 -14z"/>
-<path d="M547 1038 c-8 -13 -72 -131 -142 -263 -70 -132 -139 -260 -152 -285
--30 -54 -47 -72 180 193 117 137 167 187 182 187 44 0 167 -72 229 -134 105
--105 156 -229 156 -381 l1 -80 19 35 c33 61 53 174 47 260 -17 223 -169 410
--386 474 -78 23 -117 21 -134 -6z"/>
-<path d="M624 805 c4 -11 46 -128 92 -259 l84 -240 -31 -32 c-61 -63 -191
--118 -306 -129 -111 -11 -247 26 -352 96 l-34 23 13 -25 c30 -54 135 -146 210
--181 167 -80 329 -77 491 8 65 34 189 149 189 175 0 10 -336 557 -353 574 -7
-7 -7 3 -3 -10z"/>
-</g>
-</svg>

package/src/assets/images/albinasoft/albinasoft_logo_blue.svg

@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="108" height="108" viewBox="0 0 108 108">
-  <g transform="translate(0,108) scale(0.1,-0.1)" fill="#3a57e8" stroke="none">
-    <path d="M397 1045 c-138 -38 -272 -146 -332 -269 -69 -139 -80 -287 -31 -421 l21 -60 290 4 c426 5 429 7 124 64 -140 27 -258 52 -262 56 -17 17 -26 136 -16 211 24 171 124 315 275 398 l59 31 -40 0 c-22 -1 -62 -7 -88 -14z"/>
-    <path d="M547 1038 c-8 -13 -72 -131 -142 -263 -70 -132 -139 -260 -152 -285 -30 -54 -47 -72 180 193 117 137 167 187 182 187 44 0 167 -72 229 -134 105 -105 156 -229 156 -381 l1 -80 19 35 c33 61 53 174 47 260 -17 223 -169 410 -386 474 -78 23 -117 21 -134 -6z"/>
-    <path d="M624 805 c4 -11 46 -128 92 -259 l84 -240 -31 -32 c-61 -63 -191 -118 -306 -129 -111 -11 -247 26 -352 96 l-34 23 13 -25 c30 -54 135 -146 210 -181 167 -80 329 -77 491 8 65 34 189 149 189 175 0 10 -336 557 -353 574 -7 7 -7 3 -3 -10z"/>
-  </g>
-</svg>

package/src/assets/images/albinasoft/albinasoft_logo_white.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="108" height="108" viewBox="0 0 108 108"><g transform="translate(0,108) scale(0.1,-0.1)" fill="white" stroke="none"><path d="M397 1045 c-138 -38 -272 -146 -332 -269 -69 -139 -80 -287 -31 -421 l21 -60 290 4 c426 5 429 7 124 64 -140 27 -258 52 -262 56 -17 17 -26 136 -16 211 24 171 124 315 275 398 l59 31 -40 0 c-22 -1 -62 -7 -88 -14z"/><path d="M547 1038 c-8 -13 -72 -131 -142 -263 -70 -132 -139 -260 -152 -285 -30 -54 -47 -72 180 193 117 137 167 187 182 187 44 0 167 -72 229 -134 105 -105 156 -229 156 -381 l1 -80 19 35 c33 61 53 174 47 260 -17 223 -169 410 -386 474 -78 23 -117 21 -134 -6z"/><path d="M624 805 c4 -11 46 -128 92 -259 l84 -240 -31 -32 c-61 -63 -191 -118 -306 -129 -111 -11 -247 26 -352 96 l-34 23 13 -25 c30 -54 135 -146 210 -181 167 -80 329 -77 491 8 65 34 189 149 189 175 0 10 -336 557 -353 574 -7 7 -7 3 -3 -10z"/></g></svg>

package/src/components/CustomButton.tsx

@@ -1,74 +0,0 @@
-import React, { useState } from 'react';
-import { OverlayTrigger, Tooltip } from 'react-bootstrap';
-
-interface CustomButtonProps {
-    id?:string;
-    label: React.ReactNode; 
-    name?:string;
-    onClick: (event: React.FormEvent) => void; 
-    style?: React.CSSProperties; 
-    className?: string;
-    tooltip?: string; 
-    disabled?: boolean;
-}
-
-const CustomButton: React.FC<CustomButtonProps> = ({ 
-    id,
-    name,
-    label,
-    onClick,
-    style,
-    className,
-    tooltip,
-    disabled}) => {
-    const [isLoading, setIsLoading] = useState(false);
-
-    const handleClick = async (event: React.FormEvent) => {
-        setIsLoading(true);
-        try {
-            await onClick(event);
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    const buttonClassName = className || 'btn btn-primary';
-
-    return tooltip ? (
-        <OverlayTrigger
-            placement="top"
-            overlay={<Tooltip id={`tooltip-${tooltip}`}>{tooltip}</Tooltip>}
-        >
-            <span>
-                <button
-                    className={buttonClassName}
-                    onClick={handleClick}
-                    disabled={isLoading || disabled}
-                    style={style}
-                >
-                    {isLoading ? (
-                        <span className="spinner spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                    ) : (
-                        label
-                    )}
-                </button>
-            </span>
-        </OverlayTrigger>
-    ) : (
-        <button
-            className={buttonClassName}
-            onClick={handleClick}
-            disabled={isLoading || disabled}
-            style={style}
-        >
-            {isLoading ? (
-                <span className="spinner spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-            ) : (
-                label
-            )}
-        </button>
-    );
-};
-
-export default CustomButton;
-export {};

package/src/components/CustomCheckbox.tsx

@@ -1,122 +0,0 @@
-import React from 'react';
-import { OverlayTrigger, Tooltip } from 'react-bootstrap';
-import { FaExclamationTriangle, FaInfoCircle } from 'react-icons/fa';
-
-interface CustomCheckboxProps {
-    id?: string;
-    name?: string;
-    label: string;
-    value: boolean;
-    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 CustomCheckbox: React.FC<CustomCheckboxProps> = ({
-    id,
-    name,
-    label,
-    value,
-    required = false,
-    errorMessage,
-    conditionalErrorVisible,
-    conditionalErrorMessage,
-    tooltip,
-    description,
-    disabled = false,
-    className,
-    style,
-    onChange,
-}) => {
-    return (
-        <div className={className}>
-            <div className="form-check form-group" style={style}>
-
-                {tooltip ? (
-                    <OverlayTrigger
-                        placement="bottom"
-                        overlay={
-                            tooltip ? <Tooltip id={`tooltip-${id || name}`}>{tooltip}</Tooltip> : <></>
-                        }
-                    >
-                        <input
-                            id={id}
-                            name={name}
-                            type="checkbox"
-                            className="form-check-input"
-                            checked={value}
-                            disabled={disabled}
-                            onChange={onChange}
-                            required={required}
-                        />
-                    </OverlayTrigger>
-                ) : (
-                    <input
-                        id={id}
-                        name={name}
-                        type="checkbox"
-                        className="form-check-input"
-                        checked={value}
-                        disabled={disabled}
-                        onChange={onChange}
-                        required={required}
-                    />
-                )}
-
-                <label htmlFor={id} className="form-check-label">
-                    {label}
-                </label>
-
-                {required && (
-                    <div className="invalid-feedback text-danger">
-                        <div className="description-icon">
-                            <FaExclamationTriangle />
-                        </div>
-                        <div className="description-text">
-                            <span>
-                                {errorMessage || 'Bu seçim zorunludur.'}
-                            </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>
-
-    );
-};
-
-export default CustomCheckbox;

package/src/components/CustomDateTimePicker.tsx

@@ -1,127 +0,0 @@
-import React from 'react';
-import DatePicker from 'react-datepicker';
-import 'react-datepicker/dist/react-datepicker.css';
-import { OverlayTrigger, Tooltip } from 'react-bootstrap';
-import { FaExclamationTriangle, FaInfoCircle } from 'react-icons/fa';
-
-enum TimeFormat {
-    H = 'HH',
-    M = 'mm',
-    HM = 'HH:mm',
-}
-
-interface CustomDateTimePickerProps {
-    id?: string;
-    name?: string;
-    label: string;
-    value: Date | null;
-    placeholder?: string;
-    required?: boolean;
-    errorMessage?: string;
-    conditionalErrorVisible?: boolean;
-    conditionalErrorMessage?: string;
-    tooltip?: string;
-    description?: string | null;
-    disabled?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-    showTimeSelect?: boolean;
-    showTimeSelectOnly?: boolean;
-    timeFormat?: TimeFormat;
-    timeIntervals?: number;
-    onChange: (date: Date | null) => void;
-}
-
-const CustomDateTimePicker: React.FC<CustomDateTimePickerProps> = ({
-    id,
-    name,
-    label,
-    value,
-    placeholder,
-    required = false,
-    errorMessage,
-    conditionalErrorVisible = false,
-    conditionalErrorMessage,
-    tooltip,
-    description,
-    disabled = false,
-    className,
-    style,
-    showTimeSelect,
-    showTimeSelectOnly,
-    timeFormat = TimeFormat.HM,
-    timeIntervals,
-    onChange,
-}) => {
-
-    return (
-        <div className={className}>
-            <div className="form-group">
-                <label htmlFor={id} className="form-label">
-                    {label}
-                </label>
-                <div className="position-relative">
-                    <OverlayTrigger
-                        placement="bottom"
-                        overlay={tooltip ? <Tooltip id={`tooltip-${id}`}>{tooltip}</Tooltip> : <></>}
-                    >
-                        <div>
-                            <DatePicker
-                                id={id}
-                                name={name}
-                                selected={value}
-                                onChange={onChange}
-                                className={`form-control ${className || ''}`}
-                                placeholderText={placeholder}
-                                disabled={disabled}
-                                required={required}
-                                showTimeSelect={showTimeSelect || false}
-                                showTimeSelectOnly={showTimeSelectOnly || false}
-                                showTimeCaption={false}
-                                timeFormat={timeFormat}
-                                dateFormat={showTimeSelectOnly ? timeFormat : showTimeSelect ? "dd.MM.yyyy HH:mm" : "dd.MM.yyyy"}
-                                timeIntervals={timeFormat == TimeFormat.H ? 60 : timeFormat == TimeFormat.M ? 1 : timeIntervals ? timeIntervals : 30}
-                            />
-                        </div>
-                    </OverlayTrigger>
-
-                    {required && !value && (
-                        <div className="invalid-feedback text-danger mt-2">
-                            <div className="description-icon">
-                                <FaExclamationTriangle />
-                            </div>
-                            <div className="description-text">
-                                <span>{errorMessage || 'This field is required.'}</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 { CustomDateTimePicker, TimeFormat };
-export default CustomDateTimePicker;

package/src/components/CustomDivider.tsx

@@ -1,90 +0,0 @@
-import React from 'react';
-
-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',
-}
-
-enum Alignment {
-    LEFT = 'left',
-    CENTER = 'center',
-    RIGHT = 'right',
-}
-
-enum Thickness {
-    T1 = '1px',
-    T2 = '2px',    
-    T3 = '3px',
-    T4 = '4px',
-    T5 = '5px',
-    T6 = '6px',
-    T8 = '8px',
-    T10 = '10px',
-    T12 = '12px',
-    T16 = '16px',
-    T24 = '24px',
-  }
-
-  enum Width {
-    W10 = '10%',
-    W25 = '25%',    
-    W33 = '33%',
-    W50 = '50%',
-    W66 = '66%',
-    W75 = '75%',
-    W100 = '100%',
-  }
-
-interface CustomDividerProps {
-  id?: string;
-  color?: Color; // Çizginin rengi
-  thickness?: Thickness; // Çizginin kalınlığı
-  width?: Width; // Çizginin genişliği
-  alignment?: Alignment; // Hizalama: 'left', 'center', 'right'
-  className?: string; // Ekstra CSS sınıfları
-  style?: React.CSSProperties; // Inline stiller
-}
-
-const CustomDivider: React.FC<CustomDividerProps> = ({
-  id,
-  color = Color.DEFAULT, // Varsayılan renk (gri ton)
-  thickness = Thickness.T1, // Varsayılan kalınlık
-  width = Width.W100, // Varsayılan genişlik
-  alignment = Alignment.CENTER, // Varsayılan hizalama
-  className = '',
-  style = {},
-}) => {
-
-    const combinedClassName = `${color} ${className}`.trim();
-
-    // Hizalama stilini belirleme
-    const alignmentStyle: React.CSSProperties = {
-      marginLeft: alignment === 'left' ? '0' : 'auto',
-      marginRight: alignment === 'right' ? '0' : 'auto',
-    };
-  
-    return (
-      <hr
-        id={id || `custom-divider-${Date.now()}`}
-        //className={`custom-divider ${className}`.trim()}
-        className={`custom-divider ${combinedClassName}`}
-        style={{
-          border: 'none', // Çizginin varsayılan kenarlığını kaldır
-          borderTop: `${thickness} solid`, // Çizgiyi oluştur
-          width, // Genişlik uygula
-          ...alignmentStyle, // Hizalamayı uygula
-          ...style, // Ekstra stil
-        }}
-      />
-    );
-  };
-  
-  export { CustomDivider, Color, Alignment, Thickness, Width };
-  export default CustomDivider;