feat: UI components

packages/nitro-react/src/MainView.tsx

@@ -1,7 +1,7 @@
 import { InfoRetrieveComposer } from "@nitrodevco/nitro-shared";
 import { useEffect, useState } from "react";
 
-import { RoomWrapper } from "./components";
+import { NitroTooltip,RoomWrapper } from "./components";
 import { useWebSocketContext } from "./context";
 import { useNavigatorHandler, useUserInfoHandler } from "./handlers";
 import { ToolbarView } from "./views/toolbar/ToolbarView";
@@ -39,6 +39,7 @@ export const MainView = () => {
                 id="ui-container"
                 className="absolute top-0 left-0 z-10 overflow-hidden pointer-events-none size-full [image-rendering:pixelated]">
                 <ToolbarView />
+                <NitroTooltip id="nitro-tooltip" delay={100} />
             </div>
         </>
     );

packages/nitro-react/src/assets/components.css

@@ -0,0 +1,31 @@
+@layer components {
+    .nitro-tooltip {
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 1000;
+        max-width: 320px;
+        padding: 3px 6px;
+        border-radius: 10px;
+        background-color: rgb(0 0 0 / 0.8);
+        color: #fff;
+        font-size: 0.68rem;
+        line-height: 1.25;
+        overflow-wrap: anywhere;
+
+        pointer-events: none;
+
+        will-change: transform;
+        animation: nitro-tooltip-in 90ms ease-out;
+    }
+
+    @keyframes nitro-tooltip-in {
+        from {
+            opacity: 0;
+        }
+
+        to {
+            opacity: 1;
+        }
+    }
+}

packages/nitro-react/src/assets/icons.css

@@ -1,5 +1,5 @@
 .nitro-icon {
-    @apply inline-block outline-0 bg-transparent bg-no-repeat bg-center;
+    @apply outline-0 bg-transparent bg-no-repeat bg-center;
 
     &.icon-nitro-light {
         background-image: url('./flash/nitro/nitro-n-light.svg');

packages/nitro-react/src/components/AutoGrid.tsx

@@ -0,0 +1,34 @@
+import { forwardRef } from 'react';
+
+import { Grid, type GridProps } from './Grid';
+
+export interface AutoGridProps extends Omit<GridProps, 'columns'> {
+    columnMinWidth?: number;
+    columnMinHeight?: number;
+}
+
+export const AutoGrid = forwardRef<HTMLDivElement, AutoGridProps>(
+    ({
+        columnMinWidth = 40,
+        columnMinHeight = 40,
+        maxContent = true,
+        overflow = 'auto',
+        style,
+        ...props
+    }, ref) => (
+        <Grid
+            ref={ref}
+            columns="none"
+            maxContent={maxContent}
+            overflow={overflow}
+            {...props}
+            style={{
+                gridTemplateColumns: `repeat(auto-fill, minmax(${columnMinWidth}px, 1fr))`,
+                gridAutoRows: `minmax(${columnMinHeight}px, auto)`,
+                ...style
+            }}
+        />
+    )
+);
+
+AutoGrid.displayName = 'AutoGrid';

packages/nitro-react/src/components/Base.tsx

@@ -0,0 +1,105 @@
+import { forwardRef,type HTMLAttributes } from 'react';
+
+import { cn, cva } from '#base/utils';
+import { CursorType, DisplayType, FlexGrowType, FlexShrinkType, OverflowType, PositionType, TextColorType } from '#base/utils/styles';
+
+import { DEFAULT_TOOLTIP_ID, type NitroTooltipFollowType, type NitroTooltipPlacementType } from './NitroTooltip';
+
+const baseVariants = cva(
+    '',
+    {
+        variants: {
+            display: DisplayType,
+            grow: FlexGrowType,
+            shrink: FlexShrinkType,
+            overflow: OverflowType.all,
+            position: PositionType,
+            cursor: CursorType,
+            textColor: TextColorType
+        }
+    }
+);
+
+type BaseVariantProps = NonNullable<Parameters<typeof baseVariants>[0]>;
+
+interface TooltipProps {
+    tooltipId?: string;
+    tooltipContent?: string;
+    tooltipFollow?: NitroTooltipFollowType;
+    tooltipPlacement?: NitroTooltipPlacementType;
+    tooltipDelay?: number;
+    tooltipFixed?: boolean;
+    tooltipClassName?: string;
+}
+
+const tooltipAttributes = ({ tooltipId, tooltipContent, tooltipFollow, tooltipPlacement, tooltipDelay, tooltipFixed, tooltipClassName }: TooltipProps) => {
+    if ((tooltipContent == null) && (tooltipId == null)) return null;
+
+    return {
+        'data-tooltip-id': tooltipId ?? DEFAULT_TOOLTIP_ID,
+        'data-tooltip-content': tooltipContent,
+        'data-tooltip-follow': (tooltipFollow == null) ? undefined : String(tooltipFollow),
+        'data-tooltip-placement': tooltipPlacement,
+        'data-tooltip-delay': (tooltipDelay == null) ? undefined : String(tooltipDelay),
+        'data-tooltip-fixed': tooltipFixed ? '' : undefined,
+        'data-tooltip-class': tooltipClassName
+    };
+};
+
+export interface BaseProps extends HTMLAttributes<HTMLDivElement>, Omit<BaseVariantProps, 'className'>, TooltipProps {
+    className?: string;
+    fit?: boolean;
+    fullWidth?: boolean;
+    fullHeight?: boolean;
+    visible?: boolean;
+}
+
+export const Base = forwardRef<HTMLDivElement, BaseProps>(
+    ({
+        className,
+        fit,
+        fullWidth,
+        fullHeight,
+        visible,
+        display,
+        grow,
+        shrink,
+        overflow,
+        position,
+        cursor,
+        textColor,
+        tooltipId,
+        tooltipContent,
+        tooltipFollow,
+        tooltipPlacement,
+        tooltipDelay,
+        tooltipFixed,
+        tooltipClassName,
+        ...props
+    }, ref) => (
+        <div
+            ref={ref}
+            className={cn(
+                baseVariants({
+                    display,
+                    grow,
+                    shrink,
+                    overflow,
+                    position,
+                    cursor,
+                    textColor
+                }),
+                fit && 'size-fit',
+                fullWidth && 'w-full',
+                fullHeight && 'h-full',
+                (visible === true) && 'visible',
+                (visible === false) && 'invisible',
+                className
+            )}
+            {...tooltipAttributes({ tooltipId, tooltipContent, tooltipFollow, tooltipPlacement, tooltipDelay, tooltipFixed, tooltipClassName })}
+            {...props}
+        />
+    )
+);
+
+Base.displayName = 'Base';

packages/nitro-react/src/components/Column.tsx

@@ -0,0 +1,16 @@
+import { forwardRef } from 'react';
+
+import { Flex, type FlexProps } from './Flex';
+
+export type ColumnProps = Omit<FlexProps, 'direction' | 'column'>;
+
+export const Column = forwardRef<HTMLDivElement, ColumnProps>(
+    ({
+        gap = 2,
+        ...props
+    }, ref) => (
+        <Flex ref={ref} {...props} gap={gap} column />
+    )
+);
+
+Column.displayName = 'Column';

packages/nitro-react/src/components/Flex.tsx

@@ -0,0 +1,110 @@
+import { forwardRef } from 'react';
+
+import { cn, cva } from '#base/utils';
+import { AlignContentType, AlignItemsType, AlignSelfType, DisplayType, FlexDirectionType, FlexGrowType, FlexShrinkType, FlexType, FlexWrapType, GapType, JustifyContentType, JustifySelfType, OverflowType, PositionType } from '#base/utils/styles';
+
+import { Base, type BaseProps } from './Base';
+
+const flexVariants = cva(
+    '',
+    {
+        variants: {
+            display: DisplayType,
+            direction: FlexDirectionType,
+            justify: JustifyContentType,
+            align: AlignItemsType,
+            alignContent: AlignContentType,
+            alignSelf: AlignSelfType,
+            justifySelf: JustifySelfType,
+            wrap: FlexWrapType,
+            flex: FlexType,
+            grow: FlexGrowType,
+            shrink: FlexShrinkType,
+            gap: GapType.all,
+            gapX: GapType.x,
+            gapY: GapType.y,
+            overflow: OverflowType.all,
+            overflowX: OverflowType.x,
+            overflowY: OverflowType.y,
+            position: PositionType
+        },
+        defaultVariants: {
+            display: 'flex',
+            gap: 2
+        }
+    }
+);
+
+type FlexVariantProps = NonNullable<Parameters<typeof flexVariants>[0]>;
+
+export interface FlexProps extends Omit<BaseProps, 'display'>, Omit<FlexVariantProps, 'display' | 'className'> {
+    column?: boolean;
+    reverse?: boolean;
+    center?: boolean;
+    inline?: boolean;
+}
+
+export const Flex = forwardRef<HTMLDivElement, FlexProps>(
+    ({
+        className,
+        column,
+        reverse,
+        center,
+        inline,
+        direction,
+        justify,
+        align,
+        alignContent,
+        alignSelf,
+        justifySelf,
+        wrap,
+        flex,
+        grow,
+        shrink,
+        gap,
+        gapX,
+        gapY,
+        overflow,
+        overflowX,
+        overflowY,
+        position,
+        ...props
+    }, ref) => {
+        const resolvedDirection = direction ?? (column
+            ? (reverse ? 'colReverse' : 'col')
+            : (reverse ? 'rowReverse' : undefined)
+        );
+
+        return (
+            <Base
+                ref={ref}
+                className={cn(
+                    flexVariants({
+                        display: inline ? 'inlineFlex' : 'flex',
+                        direction: resolvedDirection,
+                        justify: justify ?? (center ? 'center' : undefined),
+                        align: align ?? (center ? 'center' : undefined),
+                        alignContent,
+                        alignSelf,
+                        justifySelf,
+                        wrap,
+                        flex,
+                        grow,
+                        shrink,
+                        gap,
+                        gapX,
+                        gapY,
+                        overflow,
+                        overflowX,
+                        overflowY,
+                        position
+                    }),
+                    className
+                )}
+                {...props}
+            />
+        );
+    }
+);
+
+Flex.displayName = 'Flex';