@lion-npm/ui 0.0.0-stage → 1.0.2

package/src/features/modals/components/ModalsIOSSection.tsx

@@ -0,0 +1,106 @@
+import { Fragment } from "react";
+import { ButtonTypes } from "../../../types/ButtonTypes.tsx";
+import { VariantTypes } from "../../../types/VariantTypes.tsx";
+import { PlatformTypes } from "../../../types/PlatformTypes.tsx";
+import { SizeTypes } from "../../../types/SizeTypes.tsx";
+import { useLionUI } from "../../../context/LionUIComponentsContext.tsx";
+import LionModal from "../../../components/modals/LionModal.tsx";
+import ModalsDefaultForm from "./ModalsDefaultForm.tsx";
+import LionButton from "../../../components/buttons/LionButton.tsx";
+import {IOSStyleTypes} from "../../../types/IOS/IOSStyleTypes.tsx";
+import {IOSShapeTypes} from "../../../types/IOS/IOSShapeTypes.tsx";
+
+const variantsList = [
+    { type: VariantTypes.SUCCESS, name: "Success" },
+    { type: VariantTypes.INFO, name: "Info" },
+    { type: VariantTypes.PRIMARY, name: "Primary" },
+    { type: VariantTypes.DANGER, name: "Danger" },
+    { type: VariantTypes.WARNING, name: "Warning" },
+    { type: VariantTypes.LIGHT, name: "Light" },
+    { type: VariantTypes.LINK, name: "Link" },
+    { type: VariantTypes.DARK, name: "Dark" },
+    { type: VariantTypes.LION_PACKAGES, name: "Lion Packages" },
+    { type: VariantTypes.LION_PARKING, name: "Lion Parking" },
+    { type: VariantTypes.LION_TECH, name: "Lion Tech" },
+    { type: VariantTypes.LION_GLAM, name: "Lion Glam" },
+];
+
+const sizesList = [
+    { size: SizeTypes.SM, label: "SM", titleSuffix: "Small Modal" },
+    { size: SizeTypes.LG, label: "LG", titleSuffix: "Large Modal" },
+    { size: SizeTypes.XL, label: "XL", titleSuffix: "Extra Large Modal" },
+    { size: SizeTypes.LG, label: "Full", titleSuffix: "Fullscreen Modal", fullscreen: true as const },
+];
+
+const modalsConfig = variantsList.flatMap((variantObj) =>
+    sizesList.map((sizeObj) => ({
+        id: `ios-modal-${variantObj.type}-${sizeObj.label.toLowerCase()}`,
+        label: sizeObj.label,
+        size: sizeObj.size,
+        fullscreen: sizeObj.fullscreen,
+        variant: variantObj.type,
+        title: `iOS ${variantObj.name} ${sizeObj.titleSuffix}`,
+    }))
+);
+
+export default function ModalsIOSSection() {
+    const { updateState } = useLionUI();
+
+    return (
+        <Fragment>
+            <h2>Modals (iOS)</h2>
+
+            {variantsList.map((variantObj) => {
+                const variantModals = modalsConfig.filter(
+                    (modal) => modal.variant === variantObj.type
+                );
+
+                return (
+                    <div key={variantObj.type} className="mb-4">
+                        <h5 className="text-muted mb-2">{variantObj.name}</h5>
+                        <div className="d-flex gap-3 flex-wrap">
+                            {variantModals.map((modal) => (
+                                <LionButton
+                                    key={modal.id}
+                                    platform={PlatformTypes.IOS}
+                                    variant={modal.variant}
+                                    styleType={IOSStyleTypes.TINTED}
+                                    shape={IOSShapeTypes.ROUNDED}
+                                    // @ts-ignore
+                                    type={ButtonTypes.BUTTON}
+                                    onClick={() => updateState({ modal: modal.id })}
+                                >
+                                    {modal.label}
+                                </LionButton>
+                            ))}
+                        </div>
+                    </div>
+                );
+            })}
+
+            {modalsConfig.map((modal) => (
+                <LionModal
+                    key={modal.id}
+                    backdrop={"static"}
+                    platform={PlatformTypes.IOS}
+                    modalId={modal.id}
+                    variant={modal.variant}
+                    title={modal.title}
+                    size={modal.size}
+                    fullscreen={modal.fullscreen}
+                    body={<ModalsDefaultForm platform={PlatformTypes.IOS} variant={modal.variant} />}
+                    buttons={(
+                        <LionButton
+                            variant={VariantTypes.MODAL}
+                            //@ts-ignore
+                            type={ButtonTypes.BUTTON}
+                            onClick={() => alert("Clicked")}
+                        >
+                            Click
+                        </LionButton>
+                    )}
+                />
+            ))}
+        </Fragment>
+    );
+}

package/src/features/modals/components/ModalsWebSection.tsx

@@ -0,0 +1,104 @@
+import { Fragment } from "react";
+import { ButtonTypes } from "../../../types/ButtonTypes.tsx";
+import { VariantTypes } from "../../../types/VariantTypes.tsx";
+import { PlatformTypes } from "../../../types/PlatformTypes.tsx";
+import { SizeTypes } from "../../../types/SizeTypes.tsx";
+import { useLionUI } from "../../../context/LionUIComponentsContext.tsx";
+import LionModal from "../../../components/modals/LionModal.tsx";
+import ModalsDefaultForm from "./ModalsDefaultForm.tsx";
+import LionButton from "../../../components/buttons/LionButton.tsx";
+
+const variantsList = [
+    { type: VariantTypes.SUCCESS, name: "Success" },
+    { type: VariantTypes.INFO, name: "Info" },
+    { type: VariantTypes.PRIMARY, name: "Primary" },
+    { type: VariantTypes.DANGER, name: "Danger" },
+    { type: VariantTypes.WARNING, name: "Warning" },
+    { type: VariantTypes.LIGHT, name: "Light" },
+    { type: VariantTypes.LINK, name: "Link" },
+    { type: VariantTypes.DARK, name: "Dark" },
+    { type: VariantTypes.LION_PACKAGES, name: "Lion Packages" },
+    { type: VariantTypes.LION_PARKING, name: "Lion Parking" },
+    { type: VariantTypes.LION_TECH, name: "Lion Tech" },
+    { type: VariantTypes.LION_GLAM, name: "Lion Glam" },
+];
+
+const sizesList = [
+    { size: SizeTypes.SM, label: "SM", titleSuffix: "Small Modal" },
+    { size: SizeTypes.LG, label: "LG", titleSuffix: "Large Modal" },
+    { size: SizeTypes.XL, label: "XL", titleSuffix: "Extra Large Modal" },
+    { size: SizeTypes.LG, label: "Full", titleSuffix: "Fullscreen Modal", fullscreen: true as const },
+];
+
+const modalsConfig = variantsList.flatMap((variantObj) =>
+    sizesList.map((sizeObj) => ({
+        id: `web-modal-${variantObj.type}-${sizeObj.label.toLowerCase()}`,
+        label: sizeObj.label,
+        size: sizeObj.size,
+        fullscreen: sizeObj.fullscreen,
+        variant: variantObj.type,
+        title: `Web ${variantObj.name} ${sizeObj.titleSuffix}`,
+    }))
+);
+
+export default function ModalsWebSection() {
+    const { updateState } = useLionUI();
+
+    return (
+        <Fragment>
+            <h2>Modals (Web)</h2>
+
+            {variantsList.map((variantObj) => {
+                const variantModals = modalsConfig.filter(
+                    (modal) => modal.variant === variantObj.type
+                );
+
+                return (
+                    <div key={variantObj.type} className="mb-4">
+                        <h5 className="text-muted mb-2">{variantObj.name}</h5>
+                        <div className="d-flex gap-3 flex-wrap">
+                            {variantModals.map((modal) => (
+                                <LionButton
+                                    key={modal.id}
+                                    platform={PlatformTypes.WEB}
+                                    variant={modal.variant}
+                                    type={ButtonTypes.BUTTON}
+                                    onClick={() => updateState({ modal: modal.id })}
+                                >
+                                    {modal.label}
+                                </LionButton>
+                            ))}
+                        </div>
+                    </div>
+                );
+            })}
+
+            {modalsConfig.map((modal) => (
+                <LionModal
+                    key={modal.id}
+                    platform={PlatformTypes.WEB}
+                    modalId={modal.id}
+                    variant={modal.variant}
+                    title={modal.title}
+                    size={modal.size}
+                    fullscreen={modal.fullscreen}
+                    body={(
+                        <ModalsDefaultForm
+                            platform={PlatformTypes.WEB}
+                            variant={modal.variant}
+                        />
+                    )}
+                    buttons={(
+                        <LionButton
+                            variant={VariantTypes.MODAL}
+                            type={ButtonTypes.BUTTON}
+                            onClick={() => alert("Clicked")}
+                        >
+                            Click
+                        </LionButton>
+                    )}
+                />
+            ))}
+        </Fragment>
+    );
+}

package/src/index.ts

@@ -0,0 +1,27 @@
+import "./assets/css/index.css";
+import "./assets/css/buttons/buttons-android.css";
+import "./assets/css/buttons/buttons-ios.css";
+import "./assets/css/buttons/buttons-web.css";
+import "./assets/css/inputs/inputs-android.css";
+import "./assets/css/inputs/inputs-ios.css";
+import "./assets/css/inputs/inputs-bootstrap.css";
+import "./assets/css/modals/modals.css";
+import "./assets/css/loadings/loading-bar.css";
+
+export { LionUIComponentsProvider } from './context/LionUIComponentsContext';
+export { default as AndroidButton } from './components/buttons/AndroidButton';
+export { default as BootstrapButton } from './components/buttons/BootstrapButton';
+export { default as IOSButton } from './components/buttons/IOSButton';
+export { default as LionButton } from './components/buttons/LionButton';
+export { default as AndroidInput } from './components/inputs/AndroidInput';
+export { default as BootstrapInput } from './components/inputs/BootstrapInput';
+export { default as IOSInput } from './components/inputs/IOSInput';
+export { default as LionInput } from './components/inputs/LionInput';
+export { default as LoadingBar } from './components/loadings/LoadingBar';
+export { default as LionModal } from './components/modals/LionModal';
+
+export * from './types/ButtonTypes';
+export * from './types/InputTypes';
+export * from './types/PlatformTypes';
+export * from './types/SizeTypes';
+export * from './types/VariantTypes';

package/src/interfaces/LionUIComponentsProviderProps.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+import type { PlatformTypes } from "../types/PlatformTypes.tsx";
+
+export interface LionUIComponentsProviderProps {
+    children: React.ReactNode;
+    defaultPlatform?: PlatformTypes;
+}

package/src/interfaces/LionUIContextProps.tsx

@@ -0,0 +1,6 @@
+import type { LionUIState } from "./LionUIState.tsx";
+
+export interface LionUIContextProps {
+    state: LionUIState;
+    updateState: (partial: Partial<LionUIState>) => void;
+}

package/src/interfaces/LionUIState.tsx

@@ -0,0 +1,13 @@
+import type { PlatformTypes } from "../types/PlatformTypes.tsx";
+
+export interface LionUIState {
+    platform: PlatformTypes;
+    loading: boolean;
+    reload: boolean;
+    booting: boolean;
+    sidebar: boolean;
+    version: string | null,
+    modal?: string | null;
+    logo: File | string | null;
+    background: File | string | null;
+}

package/src/main.tsx

@@ -0,0 +1,9 @@
+import { createRoot } from 'react-dom/client'
+import App from "./App.tsx";
+import {BrowserRouter} from 'react-router-dom';
+
+createRoot(document.getElementById('root')!).render(
+    <BrowserRouter>
+        <App />
+    </BrowserRouter>,
+)

package/src/types/Android/AndroidInputShapeTypes.tsx

@@ -0,0 +1,7 @@
+export const AndroidInputShapeTypes = {
+    SMALL: "small",
+    NORMAL: "normal",
+} as const;
+
+export type AndroidInputShapeTypes =
+    (typeof AndroidInputShapeTypes)[keyof typeof AndroidInputShapeTypes];

package/src/types/Android/AndroidInputStyleTypes.tsx

@@ -0,0 +1,7 @@
+export const AndroidInputStyleTypes = {
+    FILLED: "filled",
+    OUTLINED: "outlined",
+} as const;
+
+export type AndroidInputStyleTypes =
+    (typeof AndroidInputStyleTypes)[keyof typeof AndroidInputStyleTypes];

package/src/types/Android/AndroidShapeTypes.tsx

@@ -0,0 +1,6 @@
+export const AndroidShapeTypes = {
+    PILL: "pill",
+    ROUNDED: "rounded",
+} as const;
+
+export type AndroidShapeTypes = (typeof AndroidShapeTypes)[keyof typeof AndroidShapeTypes];

package/src/types/Android/AndroidStyleTypes.tsx

@@ -0,0 +1,9 @@
+export const AndroidStyleTypes = {
+    FILLED: "filled",
+    ELEVATED: "elevated",
+    TONAL: "tonal",
+    OUTLINED: "outlined",
+    TEXT: "text",
+} as const;
+
+export type AndroidStyleTypes = (typeof AndroidStyleTypes)[keyof typeof AndroidStyleTypes];

package/src/types/ButtonTypes.tsx

@@ -0,0 +1,9 @@
+export const ButtonTypes = {
+    SUBMIT: "submit",
+    BUTTON: "button",
+    RESET: "reset",
+    UNDEFINED: undefined,
+} as const;
+
+export type ButtonTypes =
+    (typeof ButtonTypes)[keyof typeof ButtonTypes];

package/src/types/IOS/IOSInputShapeTypes.tsx

@@ -0,0 +1,9 @@
+// Official iOS / SwiftUI layout shapes and corner radiuses
+export const IOSInputShapeTypes = {
+    ROUNDED: "rounded", // Standard continuous iOS rounded corner
+    PILL: "pill",       // Capsule shape
+    SQUARE: "square",   // Sharp edges
+} as const;
+
+export type IOSInputShapeTypes =
+    (typeof IOSInputShapeTypes)[keyof typeof IOSInputShapeTypes];

package/src/types/IOS/IOSInputStyleTypes.tsx

@@ -0,0 +1,11 @@
+// Official SwiftUI TextFieldStyle representations from Apple Documentation
+export const IOSInputStyleTypes = {
+    FORM: "form",                     // SwiftUI Form/List row style (Horizontal Label + Input/Prompt)
+    ROUNDED_BORDER: "rounded-border", // SwiftUI .textFieldStyle(.roundedBorder)
+    FILLED: "filled",                 // iOS Native filled field style (Background tinted)
+    OUTLINED: "outlined",             // Custom outlined border style
+    PLAIN: "plain",                   // SwiftUI .textFieldStyle(.plain)
+} as const;
+
+export type IOSInputStyleTypes =
+    (typeof IOSInputStyleTypes)[keyof typeof IOSInputStyleTypes];

package/src/types/IOS/IOSShapeTypes.tsx

@@ -0,0 +1,7 @@
+// iOS HIG Corner Styles
+export const IOSShapeTypes = {
+    ROUNDED: "rounded", // Standard squircle (rounded rectangle)
+    CAPSULE: "capsule", // Fully rounded pill shape
+} as const;
+
+export type IOSShapeTypes = (typeof IOSShapeTypes)[keyof typeof IOSShapeTypes];

package/src/types/IOS/IOSStyleTypes.tsx

@@ -0,0 +1,9 @@
+// iOS HIG Button Styles
+export const IOSStyleTypes = {
+    FILLED: "filled", // Prominent background fill (High emphasis)
+    TINTED: "tinted", // Semi-transparent colored background (Medium emphasis)
+    GRAY: "gray",     // Neutral background tint
+    PLAIN: "plain",   // Borderless text button (Low emphasis)
+} as const;
+
+export type IOSStyleTypes = (typeof IOSStyleTypes)[keyof typeof IOSStyleTypes];

package/src/types/InputTypes.tsx

@@ -0,0 +1,13 @@
+export const InputTypes = {
+    TEXT: "text",
+    PASSWORD: "password",
+    EMAIL: "email",
+    NUMBER: "number",
+    TEL: "tel",
+    URL: "url",
+    DATE: "date",
+    DATETIME: "datetime",
+} as const;
+
+export type InputTypes =
+    (typeof InputTypes)[keyof typeof InputTypes];

package/src/types/PlatformTypes.tsx

@@ -0,0 +1,9 @@
+export const PlatformTypes = {
+    WEB: "web",
+    ANDROID: "android",
+    IOS: "ios",
+    DESKTOP: "desktop",
+};
+
+export type PlatformTypes =
+    (typeof PlatformTypes)[keyof typeof PlatformTypes];

package/src/types/SizeTypes.tsx

@@ -0,0 +1,11 @@
+export const SizeTypes = {
+    SX: "sx",
+    SM: "sm",
+    MD: "md",
+    LG: "lg",
+    XL: "lg",
+    XXL: "lg",
+} as const;
+
+export type SizeTypes =
+    (typeof SizeTypes)[keyof typeof SizeTypes];

package/src/types/VariantTypes.tsx

@@ -0,0 +1,19 @@
+    export const VariantTypes = {
+        SECONDARY: "secondary",
+        PRIMARY: "primary",
+        SUCCESS: "success",
+        DANGER: "danger",
+        WARNING: "warning",
+        INFO: "info",
+        LIGHT: "light",
+        LINK: "link",
+        DARK: "dark",
+        MODAL: "modal",
+        LION_PACKAGES: "lion-packages",
+        LION_PARKING: "lion-parking",
+        LION_TECH: "lion-tech",
+        LION_GLAM: "lion-glam",
+    } as const;
+
+    export type VariantTypes =
+        (typeof VariantTypes)[keyof typeof VariantTypes];

package/src/types/Web/BootstrapInputShapeTypes.tsx

@@ -0,0 +1,9 @@
+// Official Bootstrap 5 layout shapes matching border-radius utilities
+export const BootstrapInputShapeTypes = {
+    ROUNDED: "rounded",       // Default Bootstrap border-radius
+    PILL: "rounded-pill",     // Native Bootstrap .rounded-pill class
+    SQUARE: "rounded-0",      // Native Bootstrap .rounded-0 class
+} as const;
+
+export type BootstrapInputShapeTypes =
+    (typeof BootstrapInputShapeTypes)[keyof typeof BootstrapInputShapeTypes];

package/src/types/Web/BootstrapInputStyleTypes.tsx

@@ -0,0 +1,8 @@
+// Official Bootstrap 5 Input Style representations
+export const BootstrapInputStyleTypes = {
+    FLOATING: "floating",     // Native Bootstrap 5 .form-floating
+    STANDARD: "standard",     // Native Bootstrap 5 .form-label + .form-control
+} as const;
+
+export type BootstrapInputStyleTypes =
+    (typeof BootstrapInputStyleTypes)[keyof typeof BootstrapInputStyleTypes];

package/src/types/Web/BootstrapShapeTypes.tsx

@@ -0,0 +1,8 @@
+// Bootstrap 5 Corner Radius Options
+export const BootstrapShapeTypes = {
+    STANDARD: "standard", // Standard Bootstrap border radius (~0.375rem)
+    PILL: "pill",       // Fully rounded pill shape (.rounded-pill)
+    SQUARE: "square",   // Sharp corners (.rounded-0)
+} as const;
+
+export type BootstrapShapeTypes = (typeof BootstrapShapeTypes)[keyof typeof BootstrapShapeTypes];

package/src/types/Web/BootstrapStyleTypes.tsx

@@ -0,0 +1,7 @@
+// Bootstrap 5 Button Styles
+export const BootstrapStyleTypes = {
+    FILLED: "filled",     // Standard solid Bootstrap button (e.g., .btn-primary)
+    OUTLINED: "outlined", // Bordered transparent button (e.g., .btn-outline-primary)
+} as const;
+
+export type BootstrapStyleTypes = (typeof BootstrapStyleTypes)[keyof typeof BootstrapStyleTypes];

package/tsconfig.app.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023", "DOM"],
+    "module": "esnext",
+    "types": ["vite/client"],
+    "allowArbitraryExtensions": true,
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "module": "nodenext",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { resolve } from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'LionUI',
+      fileName: 'index',
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom', 'react/jsx-runtime'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          'react/jsx-runtime': 'react/jsx-runtime',
+        },
+        assetFileNames: (assetInfo) => {
+          if (assetInfo.name && assetInfo.name.endsWith('.css')) {
+            return 'style.css';
+          }
+          return 'assets/[name]-[hash][extname]';
+        },
+      },
+    },
+  },
+});