@lion-npm/ui 1.0.2 → 1.0.3

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>
-    );
-}

package/src/features/VariantList.tsx

@@ -1,19 +0,0 @@
-import {VariantTypes} from "../types/VariantTypes.tsx";
-
-const VariantList: Array<VariantTypes> = [
-    VariantTypes.SECONDARY,
-    VariantTypes.PRIMARY,
-    VariantTypes.SUCCESS,
-    VariantTypes.DANGER,
-    VariantTypes.WARNING,
-    VariantTypes.INFO,
-    VariantTypes.LIGHT,
-    VariantTypes.LINK,
-    VariantTypes.DARK,
-    VariantTypes.LION_PACKAGES,
-    VariantTypes.LION_PARKING,
-    VariantTypes.LION_TECH,
-    VariantTypes.LION_GLAM,
-];
-
-export default VariantList;

package/src/features/buttons/ButtonsSection.tsx

@@ -1,7 +0,0 @@
-import {Outlet} from "react-router-dom";
-
-export default function ButtonsSection() {
-    return (
-        <Outlet />
-    );
-}

package/src/features/buttons/components/ButtonsAndroidSection.tsx

@@ -1,79 +0,0 @@
-import { AndroidStyleTypes } from "../../../types/Android/AndroidStyleTypes.tsx";
-import { AndroidShapeTypes } from "../../../types/Android/AndroidShapeTypes.tsx";
-import { ButtonTypes } from "../../../types/ButtonTypes.tsx";
-import VariantList from "../../VariantList.tsx";
-
-import { Fragment } from "react";
-import AndroidButton from "../../../components/buttons/AndroidButton.tsx";
-
-// List of Material Design 3 styles
-const StyleTypeList: Array<{ label: string; styleType: AndroidStyleTypes }> = [
-    { label: "Filled", styleType: AndroidStyleTypes.FILLED },
-    { label: "Elevated", styleType: AndroidStyleTypes.ELEVATED },
-    { label: "Tonal", styleType: AndroidStyleTypes.TONAL },
-    { label: "Outlined", styleType: AndroidStyleTypes.OUTLINED },
-    { label: "Text", styleType: AndroidStyleTypes.TEXT },
-];
-
-// List of supported button shapes
-const ShapeList: Array<{ label: string; shape: AndroidShapeTypes }> = [
-    { label: "Pill Shape", shape: AndroidShapeTypes.PILL },
-    { label: "Rounded Shape", shape: AndroidShapeTypes.ROUNDED },
-];
-
-export default function ButtonsAndroidSection() {
-    return (
-        <Fragment>
-            <h2>Buttons (Android MD3)</h2>
-
-            {StyleTypeList.map(({ label: styleLabel, styleType }) => (
-                <div key={styleType} className="my-4">
-                    <h4 className="text-primary mb-3">{styleLabel} Buttons</h4>
-
-                    {ShapeList.map(({ label: shapeLabel, shape }) => (
-                        <div key={`${styleType}-${shape}`} className="ms-3 mb-4">
-                            <h6 className="text-secondary mb-2">{shapeLabel}</h6>
-
-                            {/* Enabled State */}
-                            <div className="mb-3">
-                                <span className="text-muted d-block mb-1 small">Enabled</span>
-                                <div className="d-flex flex-wrap gap-2 py-1">
-                                    {VariantList.map((variant) => (
-                                        <AndroidButton
-                                            key={`${styleType}-${shape}-${variant}-enabled`}
-                                            type={ButtonTypes.BUTTON}
-                                            styleType={styleType}
-                                            shape={shape}
-                                            variant={variant}
-                                        >
-                                            {variant}
-                                        </AndroidButton>
-                                    ))}
-                                </div>
-                            </div>
-
-                            {/* Disabled State */}
-                            <div>
-                                <span className="text-muted d-block mb-1 small">Disabled</span>
-                                <div className="d-flex flex-wrap gap-2 py-1">
-                                    {VariantList.map((variant) => (
-                                        <AndroidButton
-                                            key={`${styleType}-${shape}-${variant}-disabled`}
-                                            type={ButtonTypes.BUTTON}
-                                            styleType={styleType}
-                                            shape={shape}
-                                            variant={variant}
-                                            disabled={true}
-                                        >
-                                            {variant}
-                                        </AndroidButton>
-                                    ))}
-                                </div>
-                            </div>
-                        </div>
-                    ))}
-                </div>
-            ))}
-        </Fragment>
-    );
-}

package/src/features/buttons/components/ButtonsBootstrapSection.tsx

@@ -1,77 +0,0 @@
-import { ButtonTypes } from "../../../types/ButtonTypes.tsx";
-import VariantList from "../../VariantList.tsx";
-import { BootstrapStyleTypes } from "../../../types/Web/BootstrapStyleTypes.tsx";
-import { BootstrapShapeTypes } from "../../../types/Web/BootstrapShapeTypes.tsx";
-
-import { Fragment } from "react";
-import BootstrapButton from "../../../components/buttons/BootstrapButton.tsx";
-
-// List of Bootstrap styles
-const StyleTypeList: Array<{ label: string; styleType: BootstrapStyleTypes }> = [
-    { label: "Filled", styleType: BootstrapStyleTypes.FILLED },
-    { label: "Outlined", styleType: BootstrapStyleTypes.OUTLINED },
-];
-
-// List of supported Bootstrap shapes
-const ShapeList: Array<{ label: string; shape: BootstrapShapeTypes }> = [
-    { label: "Default Shape", shape: BootstrapShapeTypes.STANDARD },
-    { label: "Pill Shape", shape: BootstrapShapeTypes.PILL },
-    { label: "Square Shape", shape: BootstrapShapeTypes.SQUARE },
-];
-
-export default function ButtonsBootstrapSection() {
-    return (
-        <Fragment>
-            <h2>Buttons (Bootstrap Web / Desktop)</h2>
-
-            {StyleTypeList.map(({ label: styleLabel, styleType }) => (
-                <div key={styleType} className="my-4">
-                    <h4 className="text-primary mb-3">{styleLabel} Buttons</h4>
-
-                    {ShapeList.map(({ label: shapeLabel, shape }) => (
-                        <div key={`${styleType}-${shape}`} className="ms-3 mb-4">
-                            <h6 className="text-secondary mb-2">{shapeLabel}</h6>
-
-                            {/* Enabled State */}
-                            <div className="mb-3">
-                                <span className="text-muted d-block mb-1 small">Enabled</span>
-                                <div className="d-flex flex-wrap gap-2 py-1">
-                                    {VariantList.map((variant) => (
-                                        <BootstrapButton
-                                            key={`${styleType}-${shape}-${variant}-enabled`}
-                                            type={ButtonTypes.BUTTON}
-                                            styleType={styleType}
-                                            shape={shape}
-                                            variant={variant}
-                                        >
-                                            {variant}
-                                        </BootstrapButton>
-                                    ))}
-                                </div>
-                            </div>
-
-                            {/* Disabled State */}
-                            <div>
-                                <span className="text-muted d-block mb-1 small">Disabled</span>
-                                <div className="d-flex flex-wrap gap-2 py-1">
-                                    {VariantList.map((variant) => (
-                                        <BootstrapButton
-                                            key={`${styleType}-${shape}-${variant}-disabled`}
-                                            type={ButtonTypes.BUTTON}
-                                            styleType={styleType}
-                                            shape={shape}
-                                            variant={variant}
-                                            disabled={true}
-                                        >
-                                            {variant}
-                                        </BootstrapButton>
-                                    ))}
-                                </div>
-                            </div>
-                        </div>
-                    ))}
-                </div>
-            ))}
-        </Fragment>
-    );
-}