@lion-npm/ui 1.0.2 → 1.0.4

package/src/components/inputs/BootstrapInput.tsx

@@ -1,106 +0,0 @@
-import { type 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

@@ -1,163 +0,0 @@
-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/inputs/LionInput.tsx

@@ -1,81 +0,0 @@
-import { type InputHTMLAttributes, type ReactNode } from "react";
-import { useLionUI } from "../../context/LionUIComponentsContext.tsx";
-import { PlatformTypes } from "../../types/PlatformTypes.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 AndroidInput from "./AndroidInput.tsx";
-import IOSInput from "./IOSInput.tsx";
-import BootstrapInput from "./BootstrapInput.tsx";
-
-type PlatformMapping<T> = {
-    [PlatformTypes.ANDROID]?: T;
-    [PlatformTypes.IOS]?: T;
-    [PlatformTypes.WEB]?: T;
-};
-
-export type LionInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "shape"> & {
-    variant?: string;
-    platform?: string;
-    sizeType?: string;
-    shape?: BootstrapShapeTypes | AndroidShapeTypes | IOSShapeTypes | string | PlatformMapping<BootstrapShapeTypes | AndroidShapeTypes | IOSShapeTypes | string>;
-    styleType?: BootstrapStyleTypes | AndroidStyleTypes | IOSStyleTypes | string | PlatformMapping<BootstrapStyleTypes | AndroidStyleTypes | IOSStyleTypes | string>;
-    label?: string;
-    required?: boolean;
-    helperText?: string;
-    error?: boolean | string;
-    startIcon?: ReactNode;
-    endIcon?: ReactNode;
-    prefixText?: string;
-    suffixText?: string;
-    counter?: boolean | number;
-    clearable?: boolean;
-};
-
-export default function LionInput({
-                                      shape,
-                                      styleType,
-                                      // @ts-ignore
-                                      platform = null,
-                                      ...props
-                                  }: LionInputProps) {
-    const { state } = useLionUI();
-
-    // Resolve active platform from props or global context
-    const activePlatform = platform ?? state.platform;
-
-    // Helper function to resolve platform-specific property mappings
-    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 inputProps = {
-        ...props,
-        ...(resolvedShape !== undefined && { shape: resolvedShape }),
-        ...(resolvedStyleType !== undefined && { styleType: resolvedStyleType }),
-    };
-
-    // Render the appropriate input component based on the active platform
-    switch (activePlatform) {
-        case PlatformTypes.ANDROID:
-            return <AndroidInput {...(inputProps as any)} />;
-
-        case PlatformTypes.IOS:
-            return <IOSInput {...(inputProps as any)} />;
-
-        case PlatformTypes.WEB:
-        case PlatformTypes.DESKTOP:
-        default:
-            return <BootstrapInput {...(inputProps as any)} />;
-    }
-}

package/src/components/loadings/LoadingBar.tsx

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

package/src/components/modals/LionModal.tsx

@@ -1,155 +0,0 @@
-import type { FC, ReactNode } from "react";
-import { Button, Modal } from "react-bootstrap";
-import { VariantTypes } from "../../types/VariantTypes.tsx";
-import { PlatformTypes } from "../../types/PlatformTypes.tsx";
-import { ButtonTypes } from "../../types/ButtonTypes.tsx";
-import { SizeTypes } from "../../types/SizeTypes.tsx";
-import { useLionUI } from "../../context/LionUIComponentsContext.tsx";
-
-export interface LionModalProps {
-    modalId: string;
-    title: string;
-    body: ReactNode;
-    buttons?: ReactNode;
-    backdrop?: string;
-    fullscreen?: true | "sm" | "md" | "lg" | "xl" | "xxl" | "sm-down" | "md-down" | "lg-down" | "xl-down" | "xxl-down";
-    // @ts-ignore
-    size?: SizeTypes.SM | SizeTypes.LG | SizeTypes.XL;
-    variant?: VariantTypes | string;
-    platform?: PlatformTypes | string;
-    cancelButtonIcon?: ReactNode;
-    cancelButtonText?: string;
-}
-
-export default function LionModal({
-                                      modalId,
-                                      title,
-                                      body,
-                                      buttons,
-                                      backdrop = "static",
-                                      fullscreen = "sm-down",
-                                      size = SizeTypes.LG,
-                                      variant = VariantTypes.LIGHT,
-                                      platform = undefined,
-                                      cancelButtonIcon = null,
-                                      cancelButtonText = "Cancel",
-                                  }: LionModalProps) {
-    const { state, updateState } = useLionUI();
-    const platformDefined = platform || state.platform;
-    const isIOS = platformDefined === PlatformTypes.IOS;
-    const isAndroid = platformDefined === PlatformTypes.ANDROID;
-
-    const modalPlatformClass = isIOS
-        ? "ios-modal"
-        : isAndroid
-            ? "android-modal"
-            : "web-modal";
-
-    const getHeaderTextColor = (variantType: VariantTypes | string | undefined): string => {
-        switch (variantType) {
-            case VariantTypes.LIGHT:
-            case VariantTypes.LINK:
-            case VariantTypes.WARNING:
-            case VariantTypes.INFO:
-                return "text-dark";
-            case VariantTypes.PRIMARY:
-            case VariantTypes.SECONDARY:
-            case VariantTypes.SUCCESS:
-            case VariantTypes.DANGER:
-            case VariantTypes.DARK:
-            case VariantTypes.LION_GLAM:
-            case VariantTypes.LION_TECH:
-            case VariantTypes.LION_PACKAGES:
-            case VariantTypes.LION_PARKING:
-            default:
-                return "text-white";
-        }
-    };
-
-    const getCancelButtonTextColor = (variantType: VariantTypes | string | undefined): string => {
-        switch (variantType) {
-            case VariantTypes.LIGHT:
-            case VariantTypes.LINK:
-            case VariantTypes.DARK:
-            case VariantTypes.MODAL:
-                return "text-dark";
-            case VariantTypes.WARNING:
-                return "text-warning";
-            case VariantTypes.PRIMARY:
-                return "text-primary";
-            case VariantTypes.INFO:
-                return "text-info";
-            case VariantTypes.SECONDARY:
-                return "text-secondary";
-            case VariantTypes.DANGER:
-                return "text-danger";
-            case VariantTypes.SUCCESS:
-                return "text-success";
-            case VariantTypes.LION_PARKING:
-            case VariantTypes.LION_PACKAGES:
-                return "text-lion-packages";
-            case VariantTypes.LION_TECH:
-                return "text-lion-tech";
-            case VariantTypes.LION_GLAM:
-                return "text-lion-glam";
-            default:
-                return "text-white";
-        }
-    };
-
-    const textColorClass = getHeaderTextColor(variant);
-    const cancelTextColorClass = getCancelButtonTextColor(variant);
-
-    const CancelButton: FC = () => (
-        <Button
-            // @ts-ignore
-            type={ButtonTypes.BUTTON}
-            variant={VariantTypes.MODAL}
-            id={"modal-cancel-button"}
-            className={`btn-modal btn-modal-cancel ${cancelTextColorClass}`}
-            onClick={() => updateState({ modal: null })}
-            disabled={state.reload || state.loading}
-        >
-            {cancelButtonIcon ?? cancelButtonText}
-        </Button>
-    );
-
-    return (
-        <Modal
-            // @ts-ignore
-            backdrop={backdrop}
-            id={modalId}
-            show={modalId === state.modal}
-            fullscreen={fullscreen}
-            onHide={() => updateState({ modal: null })}
-            size={size}
-            scrollable
-            centered
-            className={modalPlatformClass}
-        >
-            <Modal.Header
-                closeButton={!state.reload || !state.loading}
-                className={`custom-modal-header py-3 px-4 bg-${variant} ${textColorClass}`}
-            >
-                <Modal.Title
-                    className={`custom-modal-title w-100 ${textColorClass} ${
-                        isIOS ? "text-center fw-semibold" : "text-start fw-bold"
-                    }`}
-                >
-                    {title}
-                </Modal.Title>
-            </Modal.Header>
-
-            <Modal.Body className="custom-modal-body px-4 py-3">
-                {modalId === state.modal ? body : null}
-            </Modal.Body>
-
-            <Modal.Footer className="custom-modal-footer p-0">
-                <div className="custom-btn-group w-100 d-flex align-items-stretch">
-                    <CancelButton />
-                    {buttons}
-                </div>
-            </Modal.Footer>
-        </Modal>
-    );
-}

package/src/context/LionUIComponentsContext.tsx

@@ -1,73 +0,0 @@
-import { createContext, type FC, useContext, useEffect, useState } from 'react';
-import { Capacitor } from '@capacitor/core';
-import { PlatformTypes } from "../types/PlatformTypes.tsx";
-import type { LionUIContextProps } from "../interfaces/LionUIContextProps.tsx";
-import type { LionUIComponentsProviderProps } from "../interfaces/LionUIComponentsProviderProps.tsx";
-import type { LionUIState } from "../interfaces/LionUIState.tsx";
-
-const LionUIComponentsContext = createContext<LionUIContextProps | undefined>(undefined);
-
-export const LionUIComponentsProvider: FC<LionUIComponentsProviderProps> = ({
-                                                                                      children,
-                                                                                      defaultPlatform,
-                                                                                  }) => {
-    const [state, setState] = useState<LionUIState>(() => {
-        let initialPlatform: PlatformTypes = PlatformTypes.WEB;
-
-        if (defaultPlatform) {
-            initialPlatform = defaultPlatform;
-        } else {
-            const capPlatform = Capacitor.getPlatform();
-            if (capPlatform === PlatformTypes.IOS || capPlatform === PlatformTypes.ANDROID) {
-                initialPlatform = capPlatform as PlatformTypes;
-            }
-        }
-
-        return {
-            platform: initialPlatform,
-            loading: false,
-            reload: false,
-            booting: false,
-            sidebar: false,
-            version: null,
-            modal: null,
-            logo: null,
-            background: null,
-        };
-    });
-
-    const updateState = (partial: Partial<LionUIState>) => {
-        setState((prev) => ({ ...prev, ...partial }));
-    };
-
-    useEffect(() => {
-        if (!defaultPlatform) {
-            const capPlatform = Capacitor.getPlatform();
-
-            const detected: PlatformTypes =
-                capPlatform === PlatformTypes.IOS || capPlatform === PlatformTypes.ANDROID
-                    ? (capPlatform as PlatformTypes)
-                    : PlatformTypes.WEB;
-
-            if (detected !== state.platform) {
-                setState((prev) => ({ ...prev, platform: detected }));
-            }
-        }
-    }, [defaultPlatform, state.platform]);
-
-    return (
-        <LionUIComponentsContext.Provider value={{ state, updateState }}>
-            {children}
-        </LionUIComponentsContext.Provider>
-    );
-};
-
-export const useLionUI = (): LionUIContextProps => {
-    const context = useContext(LionUIComponentsContext);
-
-    if (!context) {
-        throw new Error('useLionUI debe ser utilizado dentro de un LionUIComponentsProvider');
-    }
-
-    return context;
-};

package/src/features/Header.tsx

@@ -1,83 +0,0 @@
-import Container from 'react-bootstrap/Container';
-import Nav from 'react-bootstrap/Nav';
-import Navbar from 'react-bootstrap/Navbar';
-import NavDropdown from 'react-bootstrap/NavDropdown';
-import {Link} from "react-router-dom";
-
-export default function Header() {
-    return (
-        <Navbar expand="lg" className="bg-body-tertiary">
-            <Container>
-                <Navbar.Brand as={Link} to={"/"} href={"#"}>
-                    Lion-UI
-                </Navbar.Brand>
-
-                <Navbar.Toggle aria-controls="lion-ui-navbar-nav" />
-
-                <Navbar.Collapse id="lion-ui-navbar-nav">
-                    <Nav className="ms-auto">
-                        <NavDropdown title="Buttons" id="buttons-nav-dropdown">
-                            <NavDropdown.Item as={Link} to={"/buttons/custom"} href={"#"}>
-                                Custom
-                            </NavDropdown.Item>
-
-                            <NavDropdown.Divider />
-
-                            <NavDropdown.Item as={Link} to={"/buttons/android"} href={"#"}>
-                                Android
-                            </NavDropdown.Item>
-
-                            <NavDropdown.Item as={Link} to={"/buttons/ios"} href={"#"}>
-                                IOS
-                            </NavDropdown.Item>
-
-                            <NavDropdown.Item as={Link} to={"/buttons/web"} href={"#"}>
-                                Web
-                            </NavDropdown.Item>
-                        </NavDropdown>
-
-                        <NavDropdown title="Inputs" id="inputs-nav-dropdown">
-                            <NavDropdown.Item as={Link} to={"/inputs/custom"} href={"#"}>
-                                Custom
-                            </NavDropdown.Item>
-
-                            <NavDropdown.Divider />
-
-                            <NavDropdown.Item as={Link} to={"/inputs/android"} href={"#"}>
-                                Android
-                            </NavDropdown.Item>
-
-                            <NavDropdown.Item as={Link} to={"/inputs/ios"} href={"#"}>
-                                IOS
-                            </NavDropdown.Item>
-
-                            <NavDropdown.Item as={Link} to={"/inputs/web"} href={"#"}>
-                                Web
-                            </NavDropdown.Item>
-                        </NavDropdown>
-
-                        <NavDropdown title="Modals" id="modals-nav-dropdown">
-                            <NavDropdown.Item as={Link} to={"/modals/android"} href={"#"}>
-                                Android
-                            </NavDropdown.Item>
-
-                            <NavDropdown.Item as={Link} to={"/modals/ios"} href={"#"}>
-                                IOS
-                            </NavDropdown.Item>
-
-                            <NavDropdown.Item as={Link} to={"/modals/web"} href={"#"}>
-                                Web
-                            </NavDropdown.Item>
-                        </NavDropdown>
-
-                        <NavDropdown title="Loadings" id="loadings-nav-dropdown">
-                            <NavDropdown.Item as={Link} to={"/loadings/bar"} href={"#"}>
-                                Bar
-                            </NavDropdown.Item>
-                        </NavDropdown>
-                    </Nav>
-                </Navbar.Collapse>
-            </Container>
-        </Navbar>
-    );
-}