@i-am-shashikant-d/core

Shared utilities, types, and event system for Shiro UI Components. This package provides framework-agnostic utilities and types that can be used across React, Angular, and other framework implementations.

Installation

npm install @i-am-shashikant-d/core

Features

• 🎯 Event Management System - Unified event handling with debouncing, priority, and cleanup
• 🔧 TypeScript Types - Comprehensive type definitions for all components
• 🎨 Shared Styles - SCSS variables, mixins, and base styles
• ⚛️ React Hooks - Custom hooks for keyboard shortcuts and utilities
• 🅰️ Angular Services - Injectable services for Angular applications
• 🌐 Framework Agnostic - Core utilities work with any framework

Usage

TypeScript/JavaScript

import {
  globalEventManager,
  ShiroEventType,
  ButtonProps,
  CardProps
} from '@i-am-shashikant-d/core';

// Subscribe to events
const subscription = globalEventManager.addEventListener(
  'onClick',
  (eventData) => {
    console.log('Button clicked:', eventData);
  },
  {
    debounce: 300,
    priority: 'high'
  }
);

// Dispatch custom events
globalEventManager.dispatchEvent('onClick', {
  timestamp: Date.now(),
  target: event.target
});

// Cleanup
subscription.unsubscribe();

React

import { useKeyboardShortcut } from '@i-am-shashikant-d/core';

function MyComponent() {
  useKeyboardShortcut('ctrl+s', () => {
    console.log('Save triggered!');
  });

  return <div>Press Ctrl+S to save</div>;
}

Angular

import { KeyboardShortcutService } from '@i-am-shashikant-d/core';

@Component({
  selector: 'app-my-component',
  template: '<div>Press Ctrl+S to save</div>'
})
export class MyComponent implements OnInit, OnDestroy {
  constructor(private keyboardService: KeyboardShortcutService) {}

  ngOnInit() {
    this.keyboardService.registerShortcut('ctrl+s', () => {
      console.log('Save triggered!');
    });
  }

  ngOnDestroy() {
    this.keyboardService.cleanup();
  }
}

SCSS Styles

// Import all styles
@import '@i-am-shashikant-d/core/dist/index.css';

// Or import SCSS for customization
@import '@i-am-shashikant-d/core/styles/variables';
@import '@i-am-shashikant-d/core/styles/mixins';

Development

Build

# Install dependencies
npm install

# Build for production
npm run build

# Build for development (with source maps)
npm run build:dev

# Watch mode
npm run watch

Type Checking

npm run typecheck

Linting

npm run lint

Package Structure

dist/
├── index.cjs.js      # CommonJS bundle
├── index.esm.js      # ES Module bundle
├── index.umd.js      # UMD bundle (browser)
├── index.css         # Compiled CSS
└── types/            # TypeScript declarations

Exports

Types

• Event types and interfaces
• Component prop types (Button, Card, Header, etc.)
• Keyboard shortcut types

Event System

• globalEventManager - Global event manager instance
• ShiroEventManager - Event manager class
• Event utilities and helpers

Utilities

• Responsive design utilities
• Theme utilities
• Keyboard shortcut manager
• React hooks for keyboard shortcuts
• Angular services for keyboard shortcuts
• Card action utilities

Browser Support

• Chrome (last 2 versions)
• Firefox (last 2 versions + ESR)
• Safari (last 2 versions)
• Edge (last 2 versions)

License

ISC

Contributing

Contributions are welcome! Please read our contributing guidelines before submitting PRs.