jw-ui-kit

v1.0.6

Published

2 months ago

A modern, TypeScript-based UI component library built with Web Components. This library provides customizable, framework-agnostic components that work seamlessly in any web application.

0High
0Medium
0Low

abhi024

JW UI Kit

A modern, TypeScript-based UI component library built with Web Components. This library provides customizable, framework-agnostic components that work seamlessly in any web application.

Features

TypeScript Support: Full TypeScript definitions included
Web Components: Framework-agnostic, works with React, Vue, Angular, or vanilla JavaScript
Customizable: Extensive styling options via CSS custom properties
Lightweight: No external dependencies, built with modern web standards
Accessible: Built with accessibility best practices

Components

JwButton

A customizable button component with hover effects and various styling options.

Attributes:

label - Button text content
bg-color - Background color
color - Text color
padding - Button padding
border-radius - Border radius
bg-hover-color - Hover background color

JwLoading

A spinning loader component for indicating loading states.

JwAnimatedBox (Burger Menu)

An animated hamburger menu component with smooth transitions.

Attributes:

size - Component size
color - Icon color
bg-color - Background color
hover-color - Hover background color
active-color - Active state color
duration - Animation duration
border-radius - Border radius
thickness - Line thickness

JwCalendar

A full-featured calendar component with event support and theming.

Methods:

setEvents(events: CalendarEvent[]) - Set calendar events

Installation

npm install jw-ui-kit

Usage

As Custom Elements (Recommended)

<!DOCTYPE html>
<html>
<head>
  <script type="module" src="node_modules/jw-ui-kit/dist/index.js"></script>
</head>
<body>
  <jw-button label="Click me!" bg-color="#007bff"></jw-button>
  <jw-loading></jw-loading>
  <jw-burger-menu></jw-burger-menu>
  <jw-calendar></jw-calendar>
</body>
</html>

In React

import React from 'react';
import 'jw-ui-kit';

function App() {
  return (
    <div>
      <jw-button label="Click me!" bg-color="#007bff"></jw-button>
      <jw-loading></jw-loading>
      <jw-burger-menu></jw-burger-menu>
      <jw-calendar></jw-calendar>
    </div>
  );
}

Programmatic Usage

import { JwButton, JwLoading, JwAnimatedBox, CustomCalendar } from 'jw-ui-kit';

// Register custom elements
customElements.define('jw-button', JwButton);
customElements.define('jw-loading', JwLoading);
customElements.define('jw-burger-menu', JwAnimatedBox);
customElements.define('jw-calendar', CustomCalendar);

// Create instances
const button = document.createElement('jw-button');
button.setAttribute('label', 'Dynamic Button');
document.body.appendChild(button);

TypeScript Support

This library is written in TypeScript and includes full type definitions. When using with TypeScript, you'll get:

IntelliSense and autocompletion
Type checking for component attributes
Proper typing for event handlers
Interface definitions for complex props (like calendar events)

import { CustomCalendar, CalendarEvent } from 'jw-ui-kit';

const calendar = document.querySelector('jw-calendar') as CustomCalendar;
const events: CalendarEvent[] = [
  { date: '2024-01-15', title: 'Meeting' },
  { date: '2024-01-20', title: 'Deadline' }
];
calendar.setEvents(events);

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Type checking
npm run type-check

# Build for production
npm run build

Browser Support

Chrome 67+
Firefox 63+
Safari 12.1+
Edge 79+

License

MIT