@su-labs • Angular Utility Libraries

A collection of lightweight, reactive Angular utilities built with modern practices. Each library is independently versioned and published to npm for easy integration into your Angular projects.

📚 Available Libraries

👀 @su-labs/visit-tracker

Track user visits with reactive signals, milestone detection, and localStorage persistence.

npm install @su-labs/visit-tracker

Features:

• 📊 Track visit counts automatically
• 🎯 Milestone detection (10th, 100th visit)
• 💾 localStorage persistence
• ⚡ Reactive signals API

📖 Documentation

---

🎨 @su-labs/theme

Comprehensive theme management with dark mode, system preferences, and CSS variables.

npm install @su-labs/theme

Features:

• 🌓 Light, dark, contrast themes
• 🖥️ System preference detection
• 🎨 CSS custom properties
• 💾 Persistent user preference

📖 Documentation

---

🔔 @su-labs/notifications

Beautiful toast notifications with multiple positions, icons, and auto-dismiss.

npm install @su-labs/notifications

Features:

• 🎯 6 position options
• 🎨 Multiple notification types
• 🖼️ Custom icons support
• ⏱️ Auto-dismiss timer

📖 Documentation

---

🔍 @su-labs/scroll-spy

Track active sections on scroll with IntersectionObserver for smooth navigation highlighting.

npm install @su-labs/scroll-spy

Features:

• 🚀 IntersectionObserver API
• ⚡ Reactive signals
• 🎯 Active section tracking
• 📱 Mobile-optimized

📖 Documentation

---

📏 @su-labs/font-size

Accessible font size controls with WCAG compliance and user preference persistence.

npm install @su-labs/font-size

Features:

• ♿ WCAG 2.1 AA compliant
• 🎨 CSS variables integration
• 💾 Persistent preferences
• 📏 Multiple size presets

📖 Documentation

---

💡 Why @su-labs?

Built for Modern Angular

• ✅ Angular 21+ - Latest features and optimizations
• ✅ Signals - Reactive, performant state management
• ✅ Standalone - No NgModules required
• ✅ TypeScript - Full type safety

Developer Experience

• 📦 Zero Dependencies - Lightweight bundles
• 🧪 Well Tested - Comprehensive test coverage
• 📝 Great Docs - Clear examples and API references
• 🔧 Easy to Use - Simple, intuitive APIs

Production Ready

• 🎯 Battle Tested - Used in real-world applications
• 🔒 Type Safe - Full TypeScript support
• ⚡ Performant - Optimized for speed
• 🌐 Cross-Browser - Works everywhere

---

🚀 Quick Start

1. Install a library

npm install @su-labs/theme

2. Initialize in your app

// app.config.ts
import { provideAppInitializer, inject } from '@angular/core';
import { SuThemeService } from '@su-labs/theme';

export const appConfig = {
  providers: [
    provideAppInitializer(() => {
      inject(SuThemeService).init();
    }),
  ],
};

3. Use in components

import { Component, inject } from '@angular/core';
import { SuThemeService } from '@su-labs/theme';

@Component({
  template: `<button (click)="themeService.setTheme('dark')">Dark Mode</button>`
})
export class AppComponent {
  themeService = inject(SuThemeService);
}

---

📖 Documentation

Each library has comprehensive documentation including:

• 🎯 Quick Start - Get up and running in minutes
• 📚 API Reference - Complete method and type documentation
• 💡 Examples - Real-world usage examples
• 🔧 Troubleshooting - Common issues and solutions
• ♿ Accessibility - WCAG compliance guidelines

Visit individual library READMEs for detailed documentation.

---

🛠️ Development

This is a monorepo workspace managed with Angular CLI.

Project Structure

settings-utils-lib/
├── projects/
│   └── su-labs/
│       ├── visit-tracker/
│       ├── theme/
│       ├── notifications/
│       ├── scroll-spy/
│       └── font-size/
├── dist/               # Build output
├── package.json        # Root dependencies
└── angular.json        # Workspace configuration

Build All Libraries

npm run build:all

Build Individual Library

npm run build:visit-tracker
npm run build:theme
npm run build:notifications
npm run build:scroll-spy
npm run build:font-size

Run Tests

npm test

---

🤝 Contributing

Contributions are welcome! Here's how you can help:

Reporting Issues

Found a bug or have a feature request?

1. Check existing issues
2. Create a new issue with a clear description
3. Include code examples and reproduction steps

Pull Requests

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Make your changes
4. Write/update tests
5. Commit your changes (git commit -m 'Add amazing feature')
6. Push to your branch (git push origin feature/amazing-feature)
7. Open a Pull Request

Code Standards

• ✅ Write TypeScript with strict mode
• ✅ Follow Angular style guide
• ✅ Include unit tests
• ✅ Update documentation
• ✅ Use conventional commits

---

📦 Publishing

Each library is independently versioned and published to npm.

Version Strategy

All libraries follow Angular's versioning:

• Major version matches Angular major version (e.g., v21.x.x for Angular 21)
• Minor version for new features
• Patch version for bug fixes

Publishing Process

# 1. Update version in package.json
cd projects/su-labs/library-name

# 2. Update CHANGELOG.md

# 3. Build from root
cd ../../..
npm run build:library-name

# 4. Publish
cd dist/su-labs/library-name
npm publish --access public

---

🌐 Browser Compatibility

All libraries support modern browsers:

Browser	Version
Chrome	≥ 90
Firefox	≥ 88
Safari	≥ 14
Edge	≥ 90

---

📄 License

MIT License © 2025 Yevheniy Alekseyev

See LICENSE file for details.

---

👤 Author

Yevheniy Alekseyev

• 📧 Email: [email protected]
• 🐙 GitHub: @Greezaaa
• 📦 NPM: @su-labs

---

💬 Support

• 🐛 Bug Reports: GitHub Issues
• 💡 Feature Requests: GitHub Discussions
• ⭐ Show Support: Star on GitHub
• 📧 Contact: [email protected]

---

🙏 Acknowledgments

Thanks to:

• The Angular team for the amazing framework
• The open-source community for inspiration
• All contributors and users of these libraries

---

Built with ❤️ using Angular

⬆ Back to Top