@docsplain-kit/utilities

A collection of modern React UI utilities built with TypeScript and Tailwind CSS. This package provides reusable components for common UI patterns including Calendar and RightClickMenu.

🚀 Features

• 📅 Calendar Component: Interactive date picker with single date and range selection
• 🖱️ RightClickMenu Component: Context menu with customizable options
• ⚡ TypeScript Support: Full type safety and IntelliSense
• 🎨 Tailwind CSS: Modern styling with utility classes
• 📱 Responsive Design: Mobile-first approach
• ♿ Accessibility: WCAG compliant components

📦 Installation

npm install @docsplain-kit/utilities

🎯 Quick Start

Calendar Component

import React from 'react';
import { Calendar } from '@docsplain-kit/utilities';

function App() {
  const handleDateChange = (event) => {
    console.log('Selected date:', event.calendarDate);
  };

  return (
    <Calendar
      variant="simple"
      selectedDate={new Date()}
      onChange={handleDateChange}
      size="medium"
    />
  );
}

Range Selection Calendar

import React from 'react';
import { Calendar } from '@docsplain-kit/utilities';

function App() {
  const handleRangeChange = (event) => {
    console.log('Start:', event.start?.calendarDate);
    console.log('End:', event.end?.calendarDate);
  };

  return (
    <Calendar
      variant="range"
      selectedDate={new Date()}
      onChange={handleRangeChange}
      size="medium"
    />
  );
}

RightClickMenu Component

import React from 'react';
import { RightClickMenu } from '@docsplain-kit/utilities';

const menuItems = [
  { label: 'Copy', onClick: () => console.log('Copy') },
  { label: 'Paste', onClick: () => console.log('Paste') },
  { label: 'Delete', onClick: () => console.log('Delete') },
];

function App() {
  return (
    <RightClickMenu menuItems={menuItems}>
      <div>Right-click me!</div>
    </RightClickMenu>
  );
}

📚 API Reference

Calendar Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | 'simple' \| 'range' | 'simple' | Calendar interaction type | | selectedDate | Date | new Date() | Initially selected date | | dateFormat | string | 'YYYY-MM-DD' | Date format for display | | size | 'tiny' \| 'small' \| 'medium' \| 'large' \| 'huge' | 'medium' | Calendar size | | holidays | string[] | [] | Array of holiday dates | | disablePreviousMonths | boolean | false | Disable previous month navigation | | disableSubsequentMonths | boolean | false | Disable next month navigation | | disablePreviousDays | boolean | false | Disable past date selection | | disableSubsequentDays | boolean | false | Disable future date selection | | onChange | (event: CalendarEvent) => void | - | Date selection callback | | dateRange | string[] | [] | Pre-selected date range | | defaultDaysSelected | number | - | Default number of days for range | | canSelectYear | boolean | true | Enable year selection | | canSelectMonth | boolean | true | Enable month selection | | showGoToToday | boolean | false | Show "Go to Today" button |

RightClickMenu Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | menuItems | MenuItem[] | [] | Array of menu items | | wrapperClassName | string | - | Custom wrapper class | | className | string | - | Custom menu class | | headerInfo | ReactNode | - | Header content for menu |

MenuItem Type

interface MenuItem {
  label: string;
  onClick: () => void;
  disabled?: boolean;
  submenu?: MenuItem[];
}

🎨 Styling

This package uses Tailwind CSS for styling. Make sure to include Tailwind CSS in your project:

npm install tailwindcss

Tailwind Configuration

// tailwind.config.js
const withUiKit = require('@docsplain-kit/core/withUiKit');

module.exports = withUiKit({
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@docsplain-kit/utilities/**/*.{js,ts,jsx,tsx}',
  ],
  // ... rest of your config
});

📖 Storybook

This package includes Storybook for component documentation and testing:

# Install dependencies
npm install

# Run Storybook locally
npm run dev:storybook

# Build Storybook for deployment
npm run build:storybook

The built Storybook will be available in the storybook-static directory and can be deployed to any static hosting service.

🛠️ Development

Prerequisites

• Node.js 16+
• npm or yarn

Setup

# Clone the repository
git clone https://github.com/docsplain/docsplain-ui-utilities.git

# Install dependencies
npm install

# Run Storybook
npm run dev:storybook

Building

# Build the package
npm run build

# Clean build artifacts
npm run clean

📄 License

MIT © Docsplain Company

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📞 Support

For support, email [email protected] or create an issue on GitHub.

Made with ❤️ by the Docsplain team