Skip to content

README.md

Latest commit

 

History

History
274 lines (180 loc) · 6.12 KB

README.md

File metadata and controls

274 lines (180 loc) · 6.12 KB

Mining SDK

A developer-first toolkit providing pre-built components and seamless backend integration for building mining operations applications in days instead of weeks.

License

📋 Table of Contents

Overview

The Mining SDK is a comprehensive toolkit providing:

  • 150-200+ production-tested components (foundation + domain-specific)
  • 87+ API integration hooks (RTK Query-based)
  • 70+ custom React hooks for common patterns
  • Complete state management (Redux Toolkit)
  • Modern tech stack (React 19, shadcn/ui, React Hook Form, Zod)
  • 5x faster forms compared to legacy solutions

Key Benefits

  • 🚀 10x faster development - Build dashboards in days, not weeks
  • 🎨 Consistent UX - Uniform design patterns across all applications
  • 🔌 Seamless integration - Type-safe API client with intelligent caching
  • 🎯 Battle-tested - Extracted from production Mining OS codebase
  • 📦 Zero CSS-in-JS runtime - Better performance, smaller bundles

Packages

This monorepo contains 2 main packages in a simplified architecture:

@mining-sdk/core

Core UI components, utilities, types, and theme system. This package includes:

  • Radix UI primitives (Button, Dialog, Switch, etc.)
  • Core utilities (cn, formatters, validators)
  • Type definitions
  • Theme system with design tokens
  • SCSS-based styling

@mining-sdk/foundation

Complete foundation with features, state management, and utilities. This package includes:

  • Domain-specific components (mining operations)
  • Feature components (complete features)
  • Custom React hooks (70+ hooks)
  • API client (RTK Query integration)
  • State management (Redux Toolkit)
  • Test utilities

Demo App

Interactive demo showcasing all components.

  • Location: apps/demo
  • Run: pnpm --filter @mining-sdk/demo dev

📖 See docs/STRUCTURE.md for complete package details and dependency graph.

Getting Started

Prerequisites

  • Node.js 20+ (LTS)
  • pnpm 10+ (package manager)

Setup pnpm

This project uses pnpm as the package manager. Enable it using corepack (built into Node.js):

# Enable corepack (comes with Node.js)
corepack enable

# Verify pnpm is available
pnpm --version

Alternatively, you can use npx pnpm for all commands if you prefer not to enable corepack.

Installation

# Clone the repository
git clone https://github.com/tetherto/miningos-ui-kit.git
cd miningos-ui-kit

# Install dependencies
pnpm install

# Build all packages
pnpm build

Quick Start

# Development mode (watch all packages)
pnpm dev

# Run the demo app
pnpm dev:demo

# Build all packages
pnpm build

# Build specific package
pnpm --filter @mining-sdk/core build

# Type check all packages
pnpm typecheck

# Lint all packages
pnpm lint

# Lint and fix
pnpm lint:fix

Using @mining-sdk/core in Your App

  1. Add the dependency to your app's package.json:
{
  "dependencies": {
    "@mining-sdk/core": "workspace:*"
  }
}
  1. Import and use components:
import { Button, Dialog, Switch } from '@mining-sdk/core'
import '@mining-sdk/core/styles.css'

const App = () => {
  return <Button variant="secondary">Click me</Button>
}

See packages/core/USAGE.md for detailed usage examples.

Build & Development

Build Commands

# Build everything (TypeScript + SCSS)
pnpm build

# Build only TypeScript
pnpm build:ts

# Build only SCSS
pnpm build:scss

# Clean all build artifacts
pnpm clean

Watch Mode

# Watch all packages (TypeScript + SCSS)
pnpm dev

# Watch packages only (no demo)
pnpm dev:packages

# Watch only TypeScript
pnpm watch:ts

# Watch only SCSS
pnpm watch:scss

Development Workflows

Full Stack Development:

pnpm dev  # Watches all packages + runs demo

Package Development:

pnpm dev:packages  # Watches packages without demo

Demo App Only:

pnpm dev:demo  # Runs demo with HMR

For detailed information, see:

Documentation

Core Documentation

  • Architecture - System architecture, package structure, and technology stack
  • Structure - Complete package structure and dependency graph
  • Contributing - Contribution guidelines, development workflow, and coding standards

Build & Development

Package Documentation

Demo App

  • Demo App - Interactive component showcase

Examples

Support

License

Apache 2.0 - See LICENSE for details.

Acknowledgments

Built with contributions from the mining operations team.