Mountain UI

A comprehensive UI component library for ERP systems built with Svelte. Features an extensive registry system for managing field types, entities, and custom UI components.

Features

• 🎨 Field Type Registry: Manage and display different field types (text, numbers, dates, links, calculations, lists, etc.)
• 📦 Entity Registry: Create and manage entity models with automatic form generation
• 🔧 Component System: Pre-built components for forms, cards, buttons, and icons
• 🎯 Type-Safe: Built with Svelte 5 and full runes support
• 📝 Form Context: Advanced form state management with context system
• 🔗 Relationships: Support for linked entities and relational data

Installation

npm install mountain-ui

Quick Start

Basic Usage

import {
	fieldTypeRegistry,
	entityRegistry,
	registerDefaultFieldTypes,
	EntityForm
} from 'mountain-ui';

// Register default field types
registerDefaultFieldTypes();

// Use entity form component
import EntityForm from 'mountain-ui/EntityForm.svelte';

Components

Field Type Components

• FieldTypeIcon - Icon for field types
• FieldTypeButton - Button component for field types
• FieldTypeCard - Card display for field types
• FieldTypeInput - Input component for field types
• Label - Label component
• Line - Line separator component

Entity Components

• EntityButton - Button for entity actions
• EntityCard - Card display for entities
• EntityForm - Complete form for entity data
• FieldButton - Button for field actions
• FieldCard - Card for field display
• FieldIcon - Icon for fields
• FieldInput - Input for field values
• FieldIsRequiredIcon - Indicator for required fields
• FieldIsSecretIcon - Indicator for secret fields
• FieldIsUniqueIcon - Indicator for unique fields
• FormCtx - Form context provider
• LinkIcon - Icon for linked fields

Registries

Field Type Registry

import { fieldTypeRegistry, createFieldType } from 'mountain-ui';

// Create custom field type
const customFieldType = createFieldType({
	id: 'custom',
	name: 'Custom Field',
	icon: 'icon-path'
});

// Register it
fieldTypeRegistry.register(customFieldType);

Entity Registry

import { entityRegistry, createEntity } from 'mountain-ui';

// Create entity
const entity = createEntity({
  id: 'user',
  name: 'User',
  fields: [...]
});

// Register it
entityRegistry.register(entity);

Dependencies

• Svelte ^5.56.1
• hamzus-ui ^0.0.255

Requirements

• Node.js >= 18.0.0

License

MIT

Author

Mountain Team

Repository

GitHub Repository

Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Building

To create a production version of your app:

npm run build

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.