config: tsx,stats,packages (4 files)

frontends/nextjs/src/components/atoms/feedback/ErrorBoundary.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Alert, Box, Button, Typography } from '@mui/material'
+import { Alert, Button, Typography } from '@/fakemui'
 import React, { Component, ReactNode } from 'react'
 
 import { logError, LogLevel } from '@/lib/errors/log-error'
@@ -58,19 +58,19 @@ export class ErrorBoundary extends Component<Props, State> {
 
       // Default error UI
       return (
-        <Box sx={{ p: 3 }}>
-          <Alert severity="error" sx={{ mb: 2 }}>
-            <Typography variant="h6" gutterBottom>
+        <div style={{ padding: '1.5rem' }}>
+          <Alert severity="error" style={{ marginBottom: '1rem' }}>
+            <Typography variant="h6">
               Something went wrong
             </Typography>
-            <Typography variant="body2" sx={{ mb: 2 }}>
+            <Typography variant="body2" style={{ marginBottom: '1rem' }}>
               {this.state.error?.message || 'An unexpected error occurred'}
             </Typography>
-            <Button variant="contained" color="primary" onClick={this.handleReset} size="small">
+            <Button variant="primary" onClick={this.handleReset} size="sm">
               Try Again
             </Button>
           </Alert>
-        </Box>
+        </div>
       )
     }
 

frontends/nextjs/src/components/atoms/inputs/Select.tsx

@@ -1,11 +1,6 @@
 'use client'
 
-import {
-  FormControl,
-  MenuItem,
-  Select as MuiSelect,
-  SelectProps as MuiSelectProps,
-} from '@mui/material'
+import { Select as FakemuiSelect } from '@/fakemui'
 import { forwardRef } from 'react'
 
 export interface SelectOption {
@@ -14,46 +9,48 @@ export interface SelectOption {
   disabled?: boolean
 }
 
-export interface SelectProps extends Omit<MuiSelectProps, 'children'> {
+/**
+ * Props for the Select component
+ * Wrapper around fakemui Select to maintain API compatibility
+ */
+export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'children'> {
+  /** Array of select options */
   options: SelectOption[]
+  /** Placeholder text */
   placeholder?: string
+  /** Error state */
+  error?: boolean
+  /** Full width */
+  fullWidth?: boolean
+  /** MUI sx prop - converted to className for compatibility */
+  sx?: any
+  /** MUI displayEmpty prop (ignored for compatibility) */
+  displayEmpty?: boolean
 }
 
-const Select = forwardRef<HTMLDivElement, SelectProps>(
-  ({ options, error, fullWidth = true, placeholder, ...props }, ref) => {
+const Select = forwardRef<HTMLSelectElement, SelectProps>(
+  ({ options, error, fullWidth = true, placeholder, sx, className, displayEmpty, ...props }, ref) => {
+    // Combine className with any sx-based classes
+    const combinedClassName = [className, sx?.className, error ? 'select--error' : ''].filter(Boolean).join(' ')
+
     return (
-      <FormControl fullWidth={fullWidth} error={error}>
-        <MuiSelect
-          ref={ref}
-          displayEmpty={!!placeholder}
-          sx={{
-            fontSize: '0.875rem',
-            bgcolor: 'background.paper',
-            '& .MuiOutlinedInput-notchedOutline': {
-              borderColor: error ? 'error.main' : 'divider',
-            },
-            '&:hover .MuiOutlinedInput-notchedOutline': {
-              borderColor: error ? 'error.main' : 'text.secondary',
-            },
-            '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-              borderColor: error ? 'error.main' : 'primary.main',
-              borderWidth: 2,
-            },
-          }}
-          {...props}
-        >
-          {placeholder && (
-            <MenuItem value="" disabled>
-              {placeholder}
-            </MenuItem>
-          )}
-          {options.map(option => (
-            <MenuItem key={option.value} value={option.value} disabled={option.disabled}>
-              {option.label}
-            </MenuItem>
-          ))}
-        </MuiSelect>
-      </FormControl>
+      <FakemuiSelect
+        ref={ref}
+        fullWidth={fullWidth}
+        className={combinedClassName}
+        {...props}
+      >
+        {placeholder && (
+          <option value="" disabled>
+            {placeholder}
+          </option>
+        )}
+        {options.map(option => (
+          <option key={option.value} value={option.value} disabled={option.disabled}>
+            {option.label}
+          </option>
+        ))}
+      </FakemuiSelect>
     )
   }
 )

packages/stats_grid/seed/scripts/config.json

@@ -0,0 +1,14 @@
+{
+  "defaultGridClass": "grid gap-4 md:grid-cols-3 lg:grid-cols-6",
+  "defaultCardClass": "bg-black/40 border-white/10",
+  "colorClasses": {
+    "white": "text-white",
+    "red": "text-red-400",
+    "yellow": "text-yellow-400",
+    "blue": "text-blue-400",
+    "green": "text-green-400",
+    "orange": "text-orange-400",
+    "purple": "text-purple-400",
+    "gray": "text-gray-400"
+  }
+}

packages/stats_grid/seed/scripts/stats/types.lua

@@ -0,0 +1,33 @@
+-- Type definitions for stats grid
+
+---@alias StatColor "white"|"red"|"yellow"|"blue"|"green"|"orange"|"purple"|"gray"
+
+---@class StatItem
+---@field key string
+---@field label string
+---@field value number
+---@field color StatColor
+
+---@class StatsData
+---@field [string] number
+
+---@class StatConfig
+---@field key string
+---@field label string
+---@field color StatColor
+
+---@class StatsGridProps
+---@field stats StatsData
+---@field config? StatConfig[]
+---@field gridClass? string
+---@field cardClass? string
+
+---@class GridConfig
+---@field defaultGridClass string
+---@field defaultCardClass string
+---@field colorClasses table<StatColor, string>
+
+---@class UIComponent
+---@field type string
+---@field props? table
+---@field children? UIComponent[]