@mriqbox/ui-kit 3.3.1 → 3.4.0

package/bin/cli.js

@@ -51,13 +51,17 @@ const COMPONENT_MAP = {
     'MriSectionHeader': 'molecules',
     'MriDatePicker': 'molecules',
     'MriDrawer': 'molecules',
+    'MriPlayerVitals': 'molecules',
+    'MriVitalAdjustModal': 'molecules',
 
     // Organisms
     'MriCalendar': 'organisms',
     'MriKeyboardVisualizer': 'organisms',
     'MriPageHeader': 'organisms',
     'MriSidebar': 'organisms',
+    'MriTopbar': 'organisms',
     'MriTable': 'organisms',
+    'MriPlayerScreenStream': 'organisms',
 };
 
 function toPascalCase(str) {
@@ -173,7 +177,7 @@ async function checkDependencies(filePath, installDir) {
 program
     .name('mri-ui')
     .description('Add Mri UI components to your project')
-    .version('3.3.1');
+    .version('3.4.0');
 
 program
     .command('add <component>')

package/dist/components/atoms/MriScrollArea.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { MriScrollArea } from './MriScrollArea';
+
+declare const meta: Meta<typeof MriScrollArea>;
+export default meta;
+type Story = StoryObj<typeof MriScrollArea>;
+export declare const Vertical: Story;
+export declare const Horizontal: Story;

package/dist/components/molecules/MriPlayerVitals.d.ts

@@ -0,0 +1,26 @@
+export interface VitalsData {
+    health: number;
+    armor: number;
+    metadata?: {
+        hunger?: number;
+        thirst?: number;
+        stress?: number;
+        isdead?: boolean;
+        [key: string]: unknown;
+    };
+    [key: string]: unknown;
+}
+export interface MriPlayerVitalsProps {
+    vitals: VitalsData;
+    size?: 'mini' | 'compact' | 'full';
+    onAction?: (vital: string, label: string, value: number) => void;
+    className?: string;
+    labels?: {
+        health?: string;
+        armor?: string;
+        hunger?: string;
+        thirst?: string;
+        stress?: string;
+    };
+}
+export declare function MriPlayerVitals({ vitals, size, onAction, className, labels }: MriPlayerVitalsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/MriPlayerVitals.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { MriPlayerVitals } from './MriPlayerVitals';
+
+declare const meta: Meta<typeof MriPlayerVitals>;
+export default meta;
+type Story = StoryObj<typeof MriPlayerVitals>;
+export declare const Compact: Story;
+export declare const Mini: Story;
+export declare const Full: Story;
+export declare const CriticalState: Story;

package/dist/components/molecules/MriVitalAdjustModal.d.ts

@@ -0,0 +1,19 @@
+export interface MriVitalAdjustModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSubmit: (value: number) => void;
+    vital: 'health' | 'armor' | 'hunger' | 'thirst' | 'stress';
+    currentValue: number;
+    playerName: string;
+    labels?: {
+        health?: string;
+        armor?: string;
+        hunger?: string;
+        thirst?: string;
+        stress?: string;
+        newValue?: string;
+        confirm?: string;
+        cancel?: string;
+    };
+}
+export declare function MriVitalAdjustModal({ isOpen, onClose, onSubmit, vital, currentValue, playerName, labels }: MriVitalAdjustModalProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/molecules/MriVitalAdjustModal.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { MriVitalAdjustModal } from './MriVitalAdjustModal';
+
+declare const meta: Meta<typeof MriVitalAdjustModal>;
+export default meta;
+type Story = StoryObj<typeof MriVitalAdjustModal>;
+export declare const Health: Story;
+export declare const Armor: Story;
+export declare const Hunger: Story;
+export declare const Thirst: Story;
+export declare const Stress: Story;

package/dist/components/organisms/MriPlayerScreenStream.d.ts

@@ -0,0 +1,41 @@
+export interface MriPlayerScreenStreamProps {
+    playerId: number | string;
+    playerName?: string;
+    className?: string;
+    onFpsUpdate?: (fps: number) => void;
+    autoPlay?: boolean;
+    muted?: boolean;
+    isMock?: boolean;
+    showKeyboard?: boolean;
+    onSendNui?: (method: string, data?: unknown) => Promise<unknown>;
+    onNuiEvent?: (event: string, callback: (data: unknown) => void) => () => void;
+    signaling?: {
+        init: (url: string | null, id: string, provider: string) => void;
+        disconnect: () => void;
+        send: (msg: unknown) => void;
+        onMessage: (callback: (msg: unknown) => void) => () => void;
+        onConnect: (callback: () => void) => void;
+        isConnected?: () => boolean;
+    };
+    subscribeFromCF?: (sessionId: string, trackName: string) => Promise<{
+        pc: RTCPeerConnection;
+        stream: MediaStream;
+    }>;
+    webrtcConfig?: {
+        url: string | null;
+        provider: 'websocket' | 'fivem-native' | 'cloudflare-sfu';
+        iceServers?: RTCIceServer[];
+    };
+    selfId?: string | number;
+    labels?: {
+        connecting?: string;
+        error_title?: string;
+        error_desc?: string;
+        retry?: string;
+        live?: string;
+        stable?: string;
+        mock_active?: string;
+        simulator?: string;
+    };
+}
+export declare function MriPlayerScreenStream({ playerId, className, onFpsUpdate, autoPlay, muted, isMock, showKeyboard, onSendNui, onNuiEvent, signaling, subscribeFromCF, webrtcConfig, selfId, labels }: MriPlayerScreenStreamProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/organisms/MriPlayerScreenStream.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { MriPlayerScreenStream } from './MriPlayerScreenStream';
+
+declare const meta: Meta<typeof MriPlayerScreenStream>;
+export default meta;
+type Story = StoryObj<typeof MriPlayerScreenStream>;
+export declare const MockFeed: Story;
+export declare const WithKeyboard: Story;
+export declare const Loading: Story;

package/dist/components/organisms/MriTopbar.d.ts

@@ -0,0 +1,19 @@
+import { ElementType, ReactNode } from 'react';
+
+export interface MriTopbarItem {
+    label: string;
+    route?: string;
+    icon: ElementType;
+    onClick?: () => void;
+    divider?: boolean;
+}
+export interface MriTopbarProps {
+    items: MriTopbarItem[];
+    activeRoute?: string;
+    onNavigate?: (route: string) => void;
+    logo?: ReactNode;
+    rightContent?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+}
+export declare function MriTopbar({ items, activeRoute, onNavigate, logo, rightContent, children, className }: MriTopbarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/organisms/MriTopbar.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { MriTopbar } from './MriTopbar';
+
+declare const meta: Meta<typeof MriTopbar>;
+export default meta;
+export declare const Default: StoryObj<typeof MriTopbar>;

package/dist/index.d.ts

@@ -29,9 +29,13 @@ export * from './components/molecules/MriSectionHeader';
 export * from './components/molecules/MriDatePicker';
 export * from './components/molecules/MriColorPicker';
 export * from './components/molecules/MriCreatableCombobox';
+export * from './components/molecules/MriPlayerVitals';
+export * from './components/molecules/MriVitalAdjustModal';
 export * from './components/organisms/MriCalendar';
 export * from './components/organisms/MriPageHeader';
 export * from './components/organisms/MriSidebar';
-export * from './components/organisms/MriTable';
+export * from './components/organisms/MriTopbar';
+export * from './components/organisms/MriTopbar';
 export * from './components/organisms/MriKeyboardVisualizer';
+export * from './components/organisms/MriPlayerScreenStream';
 export * from './lib/utils';