@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

🧰 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