@simplysm/solid

A SolidJS UI component library for enterprise back-office applications such as ERP and MES. Provides components for data-intensive forms, tables, and sidebar layouts with Tailwind CSS styling, dark mode, and responsive design.

Installation

pnpm add @simplysm/solid

Peer Dependencies:

• solid-js ^1.9
• tailwindcss ^3.4

Optional Peer Dependencies:

• echarts ^6.0 -- Required for Echarts chart components

Configuration

Tailwind CSS

@simplysm/solid provides a Tailwind CSS preset. Register it as a preset in your app's tailwind.config.ts to automatically apply custom themes including semantic colors, field sizes, and z-index values.

// tailwind.config.ts
import simplysmPreset from "@simplysm/solid/tailwind.config";

export default {
  darkMode: "class",
  presets: [simplysmPreset],
  content: [
    "./src/**/*.{ts,tsx}",
    ...simplysmPreset.content,
  ],
};

Provider Setup

Use SystemProvider to wrap your app. It provides all infrastructure providers (config, theme, logger, notification, service client, etc.).

For programmatic dialogs and printing, add DialogProvider and/or PrintProvider separately. Place them below your own Providers if your dialog/print content needs access to them.

import { SystemProvider, DialogProvider, PrintProvider } from "@simplysm/solid";

function App() {
  return (
    <SystemProvider clientName="my-app">
      {/* Your Providers can go here */}
      <DialogProvider>
        <PrintProvider>
          <AppRoot />
        </PrintProvider>
      </DialogProvider>
    </SystemProvider>
  );
}

Why separate? DialogProvider and PrintProvider render user-provided components (via dialog.show(factory) / print.toPrinter(factory)). By placing them below your Providers, the factory content can access your contexts (e.g., auth, data stores). SystemProvider provides infrastructure that doesn't render user components.

| Provider | Required | Must be inside | Description | |----------|----------|----------------|-------------| | SystemProvider | Yes | (root) | Infrastructure: config, theme, logger, notification, busy, service client, shared data | | DialogProvider | If using useDialog() | SystemProvider | Programmatic dialog management | | PrintProvider | If using usePrint() | SystemProvider | Printing and PDF generation |

import { SystemProvider, DialogProvider, PrintProvider, useServiceClient, useSyncStorage, useLogger, useSharedData } from "@simplysm/solid";
import { onMount } from "solid-js";

function AppRoot() {
  const serviceClient = useServiceClient();

  onMount(async () => {
    await serviceClient.connect("main", { port: 3000 });
    useSyncStorage()!.configure((origin) => myStorageAdapter);
    useLogger().configure((origin) => myLogAdapter);
    useSharedData().configure((origin) => definitions);
  });
}

| Prop | Type | Default | Description | |------|------|---------|-------------| | clientName | string | (required) | Client identifier (used as storage key prefix) | | busyVariant | BusyVariant | "spinner" | Busy overlay display variant ("spinner" or "bar") |

StorageAdapter interface:

interface StorageAdapter {
  getItem(key: string): string | null | Promise<string | null>;
  setItem(key: string, value: string): void | Promise<unknown>;
  removeItem(key: string): void | Promise<void>;
}

LogAdapter interface:

interface LogAdapter {
  write(severity: "error" | "warn" | "info" | "log", ...data: any[]): Promise<void> | void;
}

Base CSS

Import the base CSS in your entry point:

// entry point (e.g., index.tsx)
import "@simplysm/solid/tailwind.css";

Components

Form Controls

• Button - Interactive button with Material Design ripple effect
• TextInput - Text input with format mask and IME composition support
• NumberInput - Number input with thousand separators and decimal places
• DatePicker - Date input supporting year, month, and date units (DateOnly type)
• DateTimePicker - Date-time input supporting minute and second units (DateTime type)
• TimePicker - Time input supporting minute and second units (Time type)
• DateRangePicker - Date range input with period type selection (day/month/range)
• Textarea - Multi-line text input with auto-height and IME support
• Select - Dropdown selection with single/multiple, hierarchical items, and compound components
• SelectList - List-style single selection with search, pagination, and slot customization
• DataSelectButton - Modal-based selection button with key-based loading
• SharedDataSelect - SharedData-connected Select wrapper
• SharedDataSelectButton - SharedData-connected DataSelectButton wrapper
• SharedDataSelectList - SharedData-connected SelectList wrapper
• Combobox - Autocomplete with async search and debouncing
• Checkbox / Radio - Checkbox and radio button
• CheckboxGroup / RadioGroup - Group components for multiple/single selection
• ColorPicker - Color selection component
• ThemeToggle - Dark/light/system theme cycle toggle
• RichTextEditor - Tiptap-based rich text editor with formatting, tables, images
• Invalid - Wrapper component for form validation using native browser validation
• Numpad - Numeric keypad for touch-based input
• StatePreset - Save/load screen state as presets

Data

• Table - Basic HTML table wrapper with consistent styling
• DataSheet - Advanced data table with sorting, pagination, selection, tree expansion, column resize, drag reorder
• List - Tree-view list with keyboard navigation
• Pagination - Page navigation component
• Calendar - Calendar-style data display
• PermissionTable - Hierarchical permission management table with cascading checks
• CrudSheet - CRUD data sheet with search, inline/modal editing, Excel import/export, and select mode
• CrudDetail - CRUD detail form with load, save, delete, and topbar action integration
• Kanban - Kanban board with drag-and-drop, lane collapse, multi-select

Layout

• Sidebar - Sidebar navigation with responsive mobile overlay
• Topbar - Top navigation bar with menus, user dropdown, and actions slot
• FormGroup - Form fields layout with labels (vertical/inline)
• FormTable - Table-based form layout

Display

• Card - Container with shadow effect
• Tag - Inline tag/badge component
• Link - Inline text link
• Alert - Block-level alert/notice component
• Icon - Tabler Icons wrapper (scales with surrounding text)
• Progress - Progress indicator
• Barcode - Barcode/QR code rendering (100+ barcode types)
• Echarts - Apache ECharts chart wrapper

Disclosure

• Tabs - Tab navigation component
• Collapse - Content collapse/expand animation
• Dropdown - Positioned dropdown popup
• Dialog - Modal dialog with drag, resize, floating mode, and programmatic useDialog

Feedback

• Notification - Notification system with banner and bell (useNotification)
• Busy - Busy overlay with spinner/bar variants (useBusy)
• Print - Browser printing and PDF generation (usePrint)

Hooks

• useTheme - Dark/light/system theme state access
• useLocalStorage - Local-only persistent storage (never syncs)
• useSyncConfig - Syncable config storage (cross-device sync support)
• useLogger - Logging with optional remote adapter
• useConfig - App-wide configuration access
• useNotification - Notification system access
• useBusy - Busy overlay control
• usePrint - Printing and PDF generation
• useServiceClient - WebSocket RPC client access
• useSharedData - Shared server-side data access
• useDialog - Programmatic dialog opening
• useDialogInstance - Access dialog instance for closing from inside dialog content
• createControllableSignal - Controlled/Uncontrolled signal pattern
• createControllableStore - Controlled/Uncontrolled store pattern (for objects/arrays)
• createMountTransition - Mount/unmount CSS animation hook
• createIMEHandler - IME composition delay handler
• createSlotSignal - Slot registration signal for compound components
• createTopbarActions - Register actions in nearest Topbar.Container scope
• useTopbarActionsAccessor - Direct access to topbar actions accessor
• useRouterLink - Navigation with Ctrl/Shift+click support

Providers

• SystemProvider - Infrastructure provider (config, theme, logger, notification, busy, service client, shared data)
• DialogProvider - Programmatic dialog provider (useDialog)
• PrintProvider - Printing and PDF generation provider (usePrint)

Styling

• Semantic Colors - primary, info, success, warning, danger, base
• Custom Sizes - Field height classes (h-field, h-field-xs, h-field-sm, h-field-lg, h-field-xl)
• z-index Layers - Sidebar, dropdown, modal z-index values
• Dark Mode - Class-based dark mode with auto-toggle
• Styling Patterns - clsx + twMerge usage patterns
• Exported Style Tokens - TypeScript style constants (ComponentSize, SemanticTheme, themeTokens, fieldSurface, etc.)

Helpers & Directives

• mergeStyles - Merge inline style strings and CSSProperties objects
• ripple - Material Design ripple effect directive
• createAppStructure - Declarative app structure (routing, menus, permissions)

Demo

Check out real-world usage examples of all components in the solid-demo package:

pnpm dev
# http://localhost:40081 (port may vary)

License

Apache-2.0