@lion-npm/ui 0.0.0-stage → 1.0.1

package/src/components/modals/LionModal.tsx

@@ -0,0 +1,157 @@
+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?: 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>
+
+            {/* state.loading && <LoadingBar /> */}
+
+            <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

@@ -0,0 +1,65 @@
+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 === 'ios' || capPlatform === 'android') {
+                initialPlatform = capPlatform as PlatformTypes;
+            }
+        }
+
+        return {
+            platform: initialPlatform,
+            loading: false,
+            reload: false,
+            modal: null,
+        };
+    });
+
+    const updateState = (partial: Partial<LionUIState>) => {
+        setState((prev) => ({ ...prev, ...partial }));
+    };
+
+    useEffect(() => {
+        if (!defaultPlatform) {
+            const capPlatform = Capacitor.getPlatform();
+
+            const detected: PlatformTypes = capPlatform === 'ios' || capPlatform === '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

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

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

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

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

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

@@ -0,0 +1,77 @@
+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.DEFAULT },
+    { 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>
+    );
+}