albinasoft-ui-package 1.0.0

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

@@ -0,0 +1,22 @@
+<?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

@@ -0,0 +1,7 @@
+<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

@@ -0,0 +1 @@
+<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

@@ -0,0 +1,73 @@
+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;

package/src/components/CustomCheckbox.tsx

@@ -0,0 +1,122 @@
+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

@@ -0,0 +1,127 @@
+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

@@ -0,0 +1,90 @@
+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;