@smst/edu-tools

A comprehensive collection of educational tools and utilities as reusable React components

A modern, lightweight, and fully-featured library of educational tools built with React. Perfect for building educational platforms, learning management systems, or any application that needs interactive educational components.

✨ Features

• 🎨 15 Ready-to-Use Tools - From calculators to equation editors
• 🔌 Zero Configuration - Import and use immediately
• 📦 Tree-Shakeable - Only bundle what you use
• 🎯 TypeScript Support - Full type definitions included
• 🎭 Modern UI - Beautiful, responsive components with Tailwind CSS
• ♿ Accessible - Built with accessibility in mind
• 🪟 Draggable Windows - Optional window management system

📦 Installation

npm install @smst/edu-tools

Requirements

Peer Dependencies (you need to install these):

npm install react react-dom

Bundled Dependencies (installed automatically, no action needed):

• ✅ framer-motion - Animations
• ✅ zustand - State management
• ✅ react-rnd - Drag and resize
• ✅ lucide-react - Icons
• ✅ mathlive - Equation editor
• ✅ And more...

That's it! Everything else is included.

🚀 Quick Start

For Next.js (Recommended)

Create a client component:

"use client";

import { ToolsDock } from "@smst/edu-tools";
import "@smst/edu-tools/styles";

export default function App() {
  return (
    <div>
      <h1>My Educational App</h1>
      <ToolsDock />
    </div>
  );
}

For React (Vite, CRA, etc.)

import { ToolsDock } from "@smst/edu-tools";
import "@smst/edu-tools/styles";

function App() {
  return (
    <div>
      <h1>My Educational App</h1>
      <ToolsDock />
    </div>
  );
}

What you get:

• ✅ All 15 educational tools
• ✅ Draggable, resizable windows
• ✅ Bottom dock with tool buttons
• ✅ Theme toggle
• ✅ Beautiful UI with proper styling
• ✅ Zero configuration required

⚙️ Configuration (Optional)

ToolsDock works out of the box. When you need control, pass props to choose tools, override labels/window settings, or set theme behavior.

Props

• tools?: ToolId[] — choose and order tools to display
• overrides?: Record<ToolId, { label?: string; window?: Partial<CreateWindowParams> }>
• theme?: { initial?: 'light' | 'dark' | 'system'; persist?: boolean }

Supported ToolId values: "setsquare" | "tts" | "todo" | "calculator" | "periodic" | "ruler" | "protractor" | "equation" | "magnifier" | "geogebra" | "dictionary" | "browser" | "context7" | "askai" | "annotator".

Example: pick tools and order

import { ToolsDock } from "@smst/edu-tools";
import "@smst/edu-tools/styles";

export default function App() {
  return <ToolsDock tools={["equation", "calculator", "ruler", "annotator"]} />;
}

Example: override labels and window settings

<ToolsDock
  tools={["equation", "periodic", "ruler", "tts"]}
  overrides={{
    equation: {
      label: "Math",
      window: {
        initialBounds: { width: 820, height: 540, x: 120, y: 120 },
        minWidth: 800,
        minHeight: 520,
      },
    },
    ruler: {
      label: "Measure",
      window: { isFrameless: true, isResizable: false },
    },
  }}
/>

Example: theme initialization and persistence

<ToolsDock
  theme={{
    initial: "system", // 'light' | 'dark' | 'system'
    persist: true, // save last choice in localStorage (default: true)
    showToggle: true, // show/hide theme button in dock (default: true)
  }}
/>

Example: combine everything

<ToolsDock
  tools={["equation", "calculator", "periodic", "dictionary"]}
  theme={{ initial: "dark", persist: false }}
  overrides={{
    dictionary: {
      label: "Lexicon",
      window: { initialBounds: { width: 560, height: 520, x: 160, y: 160 } },
    },
  }}
/>

🧰 Available Tools

Math & Science

• Calculator - Full-featured calculator with keyboard support
• EquationEditor - LaTeX-based mathematical equation editor powered by MathLive
• PeriodicTable - Interactive periodic table of elements
• Protractor - Rotatable protractor for angle measurement
• Ruler - Interactive ruler with inches and centimeters
• SetSquare - Drawing tool for geometry
• GeoGebra - Interactive geometry and graphing tool

Productivity

• Todo - Task management component
• Magnifier - Text magnification tool for accessibility
• TTSReader - Text-to-speech functionality
• Browser - Embedded browser component
• Dictionary - Word lookup and definitions
• Annotator - Text annotation and highlighting tool

AI & Learning

• AskAI - AI assistant interface for answering questions
• Context7 - Integrated documentation browser

💡 How It Works

The ToolsDock automatically includes:

1. Bottom Dock Bar - Shows all tool icons, click to open any tool
2. Draggable Windows - Each tool opens in a resizable, movable window
3. Window Management - Close, minimize, bring to front automatically handled
4. Theme Toggle - Built-in dark/light mode switcher
5. Responsive UI - Works on all screen sizes

That's it! No configuration, no props, no setup required.

🎨 Styling

The styles are included when you import @smst/edu-tools/styles. The package includes:

• Professional UI - Clean, modern design
• Dark/Light themes - Built-in theme switcher
• Responsive layout - Works on desktop, tablet, and mobile
• Custom CSS - You can override styles with your own CSS if needed

All styling is self-contained - no conflicts with your existing styles.

🔧 TypeScript Support

Full TypeScript definitions are included:

import { ToolsDock } from "@smst/edu-tools";
// Types are automatically available

🌐 Browser Support

• Chrome/Edge (latest 2 versions)
• Firefox (latest 2 versions)
• Safari (latest 2 versions)
• Mobile browsers (iOS Safari, Chrome Mobile)

🤝 Contributing

We welcome contributions! See DEVELOPMENT.md for developer documentation.

📄 License

MIT © SMST

🔗 Links

• NPM Package
• GitHub Repository
• Report Issues
• Developer Guide

💬 Support

• 🐛 Report a Bug
• 💡 Request a Feature
• 📖 Documentation

Made with ❤️ for educators and learners

⭐ Star us on GitHub | 📦 Install from NPM