@lion-npm/ui 0.0.0-stage → 1.0.1

package/src/components/buttons/BootstrapButton.tsx

@@ -0,0 +1,50 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+import { VariantTypes } from "../../types/VariantTypes.tsx";
+import { SizeTypes } from "../../types/SizeTypes.tsx";
+import { ButtonTypes } from "../../types/ButtonTypes.tsx";
+import { BootstrapStyleTypes } from "../../types/Web/BootstrapStyleTypes.tsx";
+import { BootstrapShapeTypes } from "../../types/Web/BootstrapShapeTypes.tsx";
+
+export interface BootstrapButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "size"> {
+    children?: ReactNode;
+    variant?: VariantTypes;
+    styleType?: BootstrapStyleTypes;
+    shape?: BootstrapShapeTypes;
+    size?: SizeTypes;
+    type?: ButtonTypes;
+    className?: string;
+}
+
+export default function BootstrapButton({
+                                            children,
+                                            variant = "primary" as VariantTypes,
+                                            styleType = BootstrapStyleTypes.FILLED,
+                                            shape = BootstrapShapeTypes.DEFAULT,
+                                            size = "md" as SizeTypes,
+                                            type = "button" as ButtonTypes,
+                                            className = "",
+                                            ...props
+                                        }: BootstrapButtonProps) {
+    // Construct standard Bootstrap button classes
+    const stylePrefix = styleType === BootstrapStyleTypes.OUTLINED ? "btn-outline-" : "btn-";
+    const variantClass = variant ? `${stylePrefix}${variant}` : "";
+    const sizeClass = size && size !== "md" ? `btn-${size}` : "";
+
+    // Mapping custom shape types to Bootstrap utilities or extended CSS
+    const shapeClass =
+        shape === BootstrapShapeTypes.PILL
+            ? "rounded-pill"
+            : shape === BootstrapShapeTypes.SQUARE
+                ? "rounded-0"
+                : "";
+
+    return (
+        <button
+            type={type}
+            className={`btn ${variantClass} ${sizeClass} ${shapeClass} ${className}`.trim()}
+            {...props}
+        >
+            {children}
+        </button>
+    );
+}

package/src/components/buttons/IOSButton.tsx

@@ -0,0 +1,42 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+import { VariantTypes } from "../../types/VariantTypes";
+import { SizeTypes } from "../../types/SizeTypes";
+import { ButtonTypes } from "../../types/ButtonTypes";
+import { IOSStyleTypes } from "../../types/IOS/IOSStyleTypes";
+import { IOSShapeTypes } from "../../types/IOS/IOSShapeTypes";
+
+export interface IOSButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "size"> {
+    children?: ReactNode;
+    variant?: VariantTypes;
+    styleType?: IOSStyleTypes;
+    shape?: IOSShapeTypes;
+    size?: SizeTypes;
+    type?: ButtonTypes;
+    className?: string;
+}
+
+export default function IOSButton({
+                                      children,
+                                      variant = VariantTypes.PRIMARY,
+                                      styleType = IOSStyleTypes.FILLED,
+                                      shape = IOSShapeTypes.ROUNDED,
+                                      size = SizeTypes.MD,
+                                      type = ButtonTypes.BUTTON,
+                                      className = "",
+                                      ...props
+                                  }: IOSButtonProps) {
+    // Construct dynamic iOS class names
+    const styleClass = `ios-btn-${styleType}`;
+    const shapeClass = `ios-btn-${shape}`;
+    const variantClass = variant ? `btn-${variant}` : "";
+
+    return (
+        <button
+            type={type}
+            className={`ios-btn ios-btn-${size} ${styleClass} ${shapeClass} ${variantClass} ${className}`.trim()}
+            {...props}
+        >
+            <span className="ios-btn-content">{children}</span>
+        </button>
+    );
+}

package/src/components/buttons/LionButton.tsx

@@ -0,0 +1,76 @@
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+import { useLionUI } from '../../context/LionUIComponentsContext.tsx';
+import { PlatformTypes } from "../../types/PlatformTypes.tsx";
+// @ts-ignore
+import { SizeTypes } from "../../types/SizeTypes.tsx";
+import type { AndroidStyleTypes } from "../../types/Android/AndroidStyleTypes.tsx";
+import type { AndroidShapeTypes } from "../../types/Android/AndroidShapeTypes.tsx";
+import type { BootstrapShapeTypes } from "../../types/Web/BootstrapShapeTypes.tsx";
+import type { BootstrapStyleTypes } from "../../types/Web/BootstrapStyleTypes.tsx";
+import type { IOSShapeTypes } from "../../types/IOS/IOSShapeTypes.tsx";
+import type { IOSStyleTypes } from "../../types/IOS/IOSStyleTypes.tsx";
+import AndroidButton from "./AndroidButton.tsx";
+import IOSButton from "./IOSButton.tsx";
+import BootstrapButton from "./BootstrapButton.tsx";
+
+type PlatformMapping<T> = {
+    [PlatformTypes.ANDROID]?: T;
+    [PlatformTypes.IOS]?: T;
+    [PlatformTypes.WEB]?: T;
+    android?: T;
+    ios?: T;
+    web?: T;
+};
+
+export type LionButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    children: ReactNode;
+    variant?: string;
+    platform?: string;
+    // @ts-ignore
+    size?: SizeTypes.SM | SizeTypes.MD | SizeTypes.LG;
+    shape?: BootstrapShapeTypes | AndroidShapeTypes | IOSShapeTypes | string | PlatformMapping<BootstrapShapeTypes | AndroidShapeTypes | IOSShapeTypes | string>;
+    styleType?: BootstrapStyleTypes | AndroidStyleTypes | IOSStyleTypes | string | PlatformMapping<BootstrapStyleTypes | AndroidStyleTypes | IOSStyleTypes | string>;
+};
+
+export default function LionButton({
+                                       children,
+                                       shape,
+                                       styleType,
+                                       // @ts-ignore
+                                       platform = null,
+                                       ...props
+                                   }: LionButtonProps) {
+    const { state } = useLionUI();
+
+    const activePlatform = platform ?? state.platform;
+
+    const resolvePlatformProp = <T,>(propValue?: T | PlatformMapping<T>): T | undefined => {
+        if (typeof propValue === 'object' && propValue !== null) {
+            const map = propValue as PlatformMapping<T>;
+            return map[activePlatform as keyof PlatformMapping<T>] ?? map[activePlatform.toLowerCase() as keyof PlatformMapping<T>];
+        }
+        return propValue as T;
+    };
+
+    const resolvedShape = resolvePlatformProp(shape);
+    const resolvedStyleType = resolvePlatformProp(styleType);
+
+    const buttonProps = {
+        ...props,
+        ...(resolvedShape !== undefined && { shape: resolvedShape }),
+        ...(resolvedStyleType !== undefined && { styleType: resolvedStyleType }),
+    };
+
+    switch (activePlatform) {
+        case PlatformTypes.ANDROID:
+            return <AndroidButton {...(buttonProps as any)}>{children}</AndroidButton>;
+
+        case PlatformTypes.IOS:
+            return <IOSButton {...(buttonProps as any)}>{children}</IOSButton>;
+
+        case PlatformTypes.WEB:
+        case PlatformTypes.DESKTOP:
+        default:
+            return <BootstrapButton {...(buttonProps as any)}>{children}</BootstrapButton>;
+    }
+}

package/src/components/inputs/AndroidInput.tsx

@@ -0,0 +1,158 @@
+import { InputTypes } from "../../types/InputTypes";
+import { AndroidInputStyleTypes } from "../../types/Android/AndroidInputStyleTypes.tsx";
+import { AndroidInputShapeTypes } from "../../types/Android/AndroidInputShapeTypes.tsx";
+import {type ChangeEvent, type InputHTMLAttributes, type ReactNode, useId, useState} from "react";
+
+export interface AndroidInputProps
+    extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "shape"> {
+    type?: InputTypes;
+    styleType?: AndroidInputStyleTypes;
+    shape?: AndroidInputShapeTypes;
+    variant?: string;
+    label?: string;
+    required?: boolean;
+    helperText?: string;
+    error?: boolean | string;
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
+    prefixText?: string;
+    suffixText?: string;
+    counter?: boolean | number;
+}
+
+export default function AndroidInput({
+                                         type = InputTypes.TEXT,
+                                         styleType = AndroidInputStyleTypes.OUTLINED,
+                                         shape = AndroidInputShapeTypes.NORMAL,
+                                         variant = "primary",
+                                         label,
+                                         required = false,
+                                         helperText,
+                                         error,
+                                         startIcon,
+                                         endIcon,
+                                         prefixText,
+                                         suffixText,
+                                         counter,
+                                         disabled = false,
+                                         readOnly = false,
+                                         value,
+                                         defaultValue,
+                                         onChange,
+                                         onFocus,
+                                         onBlur,
+                                         id,
+                                         className = "",
+                                         maxLength,
+                                         placeholder = " ",
+                                         ...rest
+                                     }: AndroidInputProps) {
+    const generatedId = useId();
+    const inputId = id || generatedId;
+
+    const [isFocused, setIsFocused] = useState(false);
+    const [internalValue, setInternalValue] = useState(value ?? defaultValue ?? "");
+
+    const hasError = Boolean(error);
+    const errorMessage = typeof error === "string" ? error : undefined;
+
+    const normalizedStyle = String(styleType).toLowerCase().replace(/_/g, "-");
+    const normalizedShape = String(shape).toLowerCase();
+
+    const containerClasses = [
+        "android-input-container",
+        `android-variant-${variant}`,
+        className,
+    ].filter(Boolean).join(" ");
+
+    const wrapperClasses = [
+        "android-input-field-wrapper",
+        `android-style-${normalizedStyle}`,
+        `android-size-${normalizedShape}`,
+        isFocused ? "is-focused" : "",
+        hasError ? "has-error" : "",
+        disabled ? "is-disabled" : "",
+        readOnly ? "is-readonly" : "",
+    ].filter(Boolean).join(" ");
+
+    const inputClasses = [
+        "android-input-element",
+        hasError ? "is-invalid" : "",
+    ].filter(Boolean).join(" ");
+
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+        setInternalValue(e.target.value);
+        if (onChange) onChange(e);
+    };
+
+    const handleFocus = (e: FocusEvent) => {
+        setIsFocused(true);
+        if (onFocus) { // @ts-ignore
+            onFocus(e);
+        }
+    };
+
+    const handleBlur = (e: FocusEvent) => {
+        setIsFocused(false);
+        if (onBlur) { // @ts-ignore
+            onBlur(e);
+        }
+    };
+
+    const currentValue = value !== undefined ? value : internalValue;
+    const currentLength = String(currentValue || "").length;
+    const maxLen = typeof counter === "number" ? counter : maxLength;
+    
+    return (
+        <div className={containerClasses}>
+            <div className={wrapperClasses}>
+                {startIcon && <div className="android-input-start-icon">{startIcon}</div>}
+                {prefixText && <span className="android-input-prefix">{prefixText}</span>}
+
+                <input
+                    id={inputId}
+                    type={type}
+                    value={currentValue}
+                    required={required}
+                    disabled={disabled}
+                    readOnly={readOnly}
+                    maxLength={maxLen}
+                    placeholder={placeholder}
+                    onChange={handleChange}
+                    // @ts-ignore
+                    onFocus={handleFocus}
+                    // @ts-ignore
+                    onBlur={handleBlur}
+                    className={inputClasses}
+                    {...rest}
+                />
+
+                {label && (
+                    <label htmlFor={inputId} className="android-input-label">
+                        {label}
+                        {required && <span className="text-danger ms-1">*</span>}
+                    </label>
+                )}
+
+                {suffixText && <span className="android-input-suffix">{suffixText}</span>}
+                {endIcon && <div className="android-input-end-icon">{endIcon}</div>}
+            </div>
+
+            {(helperText || errorMessage || counter) && (
+                <div className="android-input-subtext-container">
+                    {hasError ? (
+                        <div className="android-input-error-text">{errorMessage}</div>
+                    ) : helperText ? (
+                        <div className="android-input-helper-text">{helperText}</div>
+                    ) : <div />}
+
+                    {counter && (
+                        <span className="android-input-counter">
+                            {currentLength}{maxLen ? `/${maxLen}` : ""}
+                        </span>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}

package/src/components/inputs/BootstrapInput.tsx

@@ -0,0 +1,106 @@
+import { InputHTMLAttributes, useId} from "react";
+import { InputTypes } from "../../types/InputTypes";
+import {BootstrapInputShapeTypes} from "../../types/Web/BootstrapInputShapeTypes.tsx";
+import {BootstrapInputStyleTypes} from "../../types/Web/BootstrapInputStyleTypes.tsx";
+
+export interface BootstrapInputProps
+    extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "shape"> {
+    type?: InputTypes;
+    styleType?: BootstrapInputStyleTypes;
+    shape?: BootstrapInputShapeTypes;
+    variant?: string;
+    sizeType?: "sm" | "md" | "lg";
+    label?: string;
+    required?: boolean;
+    helperText?: string;
+    error?: boolean | string;
+}
+
+export default function BootstrapInput({
+                                   type = InputTypes.TEXT,
+                                   styleType = BootstrapInputStyleTypes.FLOATING,
+                                   shape = BootstrapInputShapeTypes.ROUNDED,
+                                   variant = "primary",
+                                   sizeType = "md",
+                                   label,
+                                   required = false,
+                                   helperText,
+                                   error,
+                                   disabled = false,
+                                   readOnly = false,
+                                   id,
+                                   className = "",
+                                   placeholder = " ",
+                                   ...rest
+                               }: BootstrapInputProps) {
+    const generatedId = useId();
+    const inputId = id || generatedId;
+
+    const hasError = Boolean(error);
+    const errorMessage = typeof error === "string" ? error : undefined;
+
+    const sizeClass = sizeType === "sm" ? "form-control-sm" : sizeType === "lg" ? "form-control-lg" : "";
+    const variantClass = `bootstrap-variant-${variant}`;
+
+    const inputClasses = [
+        "form-control",
+        shape,
+        sizeClass,
+        variantClass,
+        hasError ? "is-invalid" : "",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+
+    const isFloating = styleType === BootstrapInputStyleTypes.FLOATING;
+
+    return (
+        <div className="mb-3 w-100">
+            {!isFloating && label && (
+                <label htmlFor={inputId} className="form-label">
+                    {label}
+                    {required && <span className="text-danger ms-1">*</span>}
+                </label>
+            )}
+
+            {isFloating ? (
+                <div className="form-floating">
+                    <input
+                        id={inputId}
+                        type={type}
+                        className={inputClasses}
+                        placeholder={placeholder}
+                        disabled={disabled}
+                        readOnly={readOnly}
+                        required={required}
+                        {...rest}
+                    />
+                    {label && (
+                        <label htmlFor={inputId}>
+                            {label}
+                            {required && <span className="text-danger ms-1">*</span>}
+                        </label>
+                    )}
+                </div>
+            ) : (
+                <input
+                    id={inputId}
+                    type={type}
+                    className={inputClasses}
+                    placeholder={placeholder}
+                    disabled={disabled}
+                    readOnly={readOnly}
+                    required={required}
+                    {...rest}
+                />
+            )}
+
+            {hasError ? (
+                <div className="invalid-feedback d-block">{errorMessage}</div>
+            ) : helperText ? (
+                <div className="form-text">{helperText}</div>
+            ) : null}
+        </div>
+    );
+}

package/src/components/inputs/IOSInput.tsx

@@ -0,0 +1,163 @@
+import React, { useId, useState } from "react";
+import { InputTypes } from "../../types/InputTypes";
+import { iOSInputStyleTypes } from "../../types/IOS/iOSInputStyleTypes.tsx";
+import { iOSInputShapeTypes } from "../../types/IOS/iOSInputShapeTypes.tsx";
+
+export interface IOSInputProps
+    extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "shape"> {
+    type?: InputTypes;
+    styleType?: iOSInputStyleTypes;
+    shape?: iOSInputShapeTypes;
+    variant?: string;
+    sizeType?: "sx" | "sm" | "md" | "lg";
+    label?: string;
+    required?: boolean;
+    helperText?: string;
+    error?: boolean | string;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    prefixText?: string;
+    suffixText?: string;
+    clearable?: boolean;
+}
+
+export default function IOSInput({
+                             type = InputTypes.TEXT,
+                             styleType = iOSInputStyleTypes.ROUNDED_BORDER,
+                             shape = iOSInputShapeTypes.ROUNDED,
+                             variant = "primary",
+                             sizeType = "md",
+                             label,
+                             required = false,
+                             helperText,
+                             error,
+                             startIcon,
+                             endIcon,
+                             prefixText,
+                             suffixText,
+                             clearable = false,
+                             disabled = false,
+                             readOnly = false,
+                             value,
+                             defaultValue,
+                             onChange,
+                             onFocus,
+                             onBlur,
+                             id,
+                             className = "",
+                             maxLength,
+                             placeholder,
+                             ...rest
+                         }: IOSInputProps) {
+    const generatedId = useId();
+    const inputId = id || generatedId;
+
+    const [isFocused, setIsFocused] = useState(false);
+    const [internalValue, setInternalValue] = useState(value ?? defaultValue ?? "");
+
+    const hasError = Boolean(error);
+    const errorMessage = typeof error === "string" ? error : undefined;
+
+    const normalizedStyle = String(styleType).toLowerCase().replace(/_/g, "-");
+    const normalizedShape = String(shape).toLowerCase();
+
+    const containerClasses = [
+        "ios-input-container",
+        `ios-variant-${variant}`,
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+
+    const wrapperClasses = [
+        "ios-input-wrapper",
+        `ios-style-${normalizedStyle}`,
+        `ios-shape-${normalizedShape}`,
+        `ios-size-${sizeType}`,
+        isFocused ? "is-focused" : "",
+        hasError ? "has-error" : "",
+        disabled ? "is-disabled" : "",
+        readOnly ? "is-readonly" : "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+
+    const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
+        setIsFocused(true);
+        if (onFocus) onFocus(e);
+    };
+
+    const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+        setIsFocused(false);
+        if (onBlur) onBlur(e);
+    };
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setInternalValue(e.target.value);
+        if (onChange) onChange(e);
+    };
+
+    const handleClear = () => {
+        setInternalValue("");
+        if (onChange) {
+            const event = {
+                target: { value: "" },
+            } as React.ChangeEvent<HTMLInputElement>;
+            onChange(event);
+        }
+    };
+
+    const currentValue = value !== undefined ? value : internalValue;
+
+    return (
+        <div className={containerClasses}>
+            {label && (
+                <label htmlFor={inputId} className="ios-input-label">
+                    {label}
+                    {required && <span className="text-danger ms-1">*</span>}
+                </label>
+            )}
+
+            <div className={wrapperClasses}>
+                {startIcon && <div className="ios-input-icon-left">{startIcon}</div>}
+                {prefixText && <span className="input-prefix">{prefixText}</span>}
+
+                <input
+                    id={inputId}
+                    type={type}
+                    value={currentValue}
+                    required={required}
+                    disabled={disabled}
+                    readOnly={readOnly}
+                    maxLength={maxLength}
+                    placeholder={placeholder}
+                    onChange={handleChange}
+                    onFocus={handleFocus}
+                    onBlur={handleBlur}
+                    className="ios-input-element"
+                    {...rest}
+                />
+
+                {clearable && Boolean(currentValue) && !disabled && !readOnly && (
+                    <button
+                        type="button"
+                        className="ios-clear-button"
+                        onClick={handleClear}
+                        tabIndex={-1}
+                    >
+                        <i className="bi bi-x"></i>
+                    </button>
+                )}
+
+                {suffixText && <span className="input-suffix">{suffixText}</span>}
+                {endIcon && <div className="ios-input-icon-right">{endIcon}</div>}
+            </div>
+
+            {hasError ? (
+                <div className="ios-input-error-text">{errorMessage}</div>
+            ) : helperText ? (
+                <div className="ios-input-helper-text">{helperText}</div>
+            ) : null}
+        </div>
+    );
+}

package/src/components/loadings/LoadingBar.tsx

@@ -0,0 +1,21 @@
+import {useLionUI} from "../../context/LionUIComponentsContext.tsx";
+import {VariantTypes} from "../../types/VariantTypes.tsx";
+
+export interface LoadingBarProps {
+    variant?: VariantTypes | string;
+}
+
+export default function LoadingBar({ variant = VariantTypes.PRIMARY }: LoadingBarProps) {
+    const { state } = useLionUI();
+
+    const normalizedVariant = String(variant).toLowerCase().replace(/_/g, "-");
+    const variantClass = variant ? `loading-variant-${normalizedVariant}` : "";
+
+    return state.loading ? (
+        <div className="sticky-top">
+            <div className={`custom-progress-bar ${variantClass}`}>
+                <div className="indeterminate"></div>
+            </div>
+        </div>
+    ) : null;
+}