AI DIAL UI Kit

The AI DIAL UI Kit is an production-ready React component library designed to streamline your development process. It features a collection of base components, such as Buttons, Inputs, Dropdowns, and more — allowing you to effortlessly reuse elements, quick and easy.

Table of Contents

• ✨ Highlights
• 📖 Documentation
• 🚀 Quick Start
  • Prerequisites
  • Installation
  • Basic Usage
• Development
  • Prerequisites
  • Development Setup
  • Project Structure
• 🎨 Theming & Customization
• 📖 Storybook
  • Development Mode
  • Production Build
• 🚀 Usage in Projects
  • Next.js Integration
  • Tree Shaking
• 🤝 Contributing
• 🔒 Security
• 📄 License
• 🌟 Related Projects

✨ Highlights

• 🎨 Unified User Experience: Ui Kit usage helps with design consistency across AI DIAL applications
• ⚡ Modern Stack: Built with latest React, TypeScript, Vite, and Tailwind CSS
• 🎨 Highly Customizable: Deep theming capabilities with CSS custom properties
• 🧪 Well-Tested: Comprehensive test coverage (70%+) with Vitest and React Testing Library
• 📚 Storybook Ready: Includes interactive component documentation and development playground
• 🛠️ Developer Experience: Leverage ESLint, Prettier, Husky for maintainable code quality
• 📦 Distribution Ready: Deployed as NPM package ready for easy integration

📖 Documentation

Explore our components and their usage in our interactive Storybook documentation.

🚀 Quick Start

Prerequisites

• Node.js >= 22.2.0
• npm >= 10.7.0

Installation

npm install @epam/ai-dial-ui-kit

Basic Usage

import { DialButton } from '@epam/ai-dial-ui-kit';
import '@epam/ai-dial-ui-kit/styles.css';

function App() {
  return (
    <div>
      <DialButton 
        cssClass="dial-primary-button"
        onClick={() => alert('Hello AI DIAL!')}
      />
    </div>
  );
}

Development

Prerequisites

• Node.js >= 22.2.0
• npm >= 10.7.0
• Git

Development Setup

1. Clone the repo

   git clone https://github.com/epam/ai-dial-ui-kit.git
   cd ai-dial-ui-kit

2. Install Dependencies

   npm install

3. Start Development Environment

   # Start Storybook for component development
   npm run storybook
   
   # Run tests in watch mode
   npm run test -- --watch
   
   # Start Vite dev server
   npm run dev

Running Tests

# Run all tests with coverage
npm run test

Project Structure

src/
├── components/          # React components
│   ├── Button/         # Example component
│   │   ├── Button.tsx
│   │   ├── Button.spec.tsx
│   │   └── Button.stories.tsx
│   └── ...
├── styles/             # Global styles and Tailwind configuration
│   ├── buttons.scss
│   ├── typography.scss
│   └── tailwind-entry.scss
├── types/              # TypeScript type definitions
└── index.ts            # Main entry point

🎨 Theming & Customization

The library uses CSS custom properties for comprehensive theming. Override these variables to match your brand:

:root {
  /* Background layers */
  --bg-layer-0: #000000;
  --bg-layer-1: #090D13;
  --bg-layer-2: #171B21;
  
  /* Text colors */
  --text-primary: #F3F4F6;
  --text-secondary: #9CA3AF;
  --text-tertiary: #6B7280;
   ...
}

Full list of variables is available here

📖 Storybook

Storybook is a handy library for documenting and developing of UI components.

Stories

To run fully interactive storybook:

Development mode

npm run storybook
# Open http://localhost:6006

Production Build

npm run build-storybook

Production start

npx http-server ./storybook-static
# Open http://127.0.0.1:8080/

Documents

To run documents only:

Development mode

npm run storybook-docs
# Open http://localhost:54800/

Production build

npm run build-storybook-docs

Production start

npx http-server ./storybook-static
# Open http://127.0.0.1:8080/

Storybook provides:

• 📖 Interactive component documentation
• 🎨 Visual testing playground
• ♿ Accessibility testing tools
• 📱 Responsive design testing
• 🎯 Component isolation

🚀 Usage in Projects

Next.js Integration

1. Install the package and peer dependencies that are not currently in your project

npm install @epam/ai-dial-ui-kit
npm install react react-dom  @tabler/icons-react classnames
npm install @floating-ui/react monaco-editor @monaco-editor/react

2. Import style in the root layout of the project:

// app/layout.tsx
import "@epam/ai-dial-ui-kit/styles.css";

3. Usage example

// app/page.tsx
"use client";
import { DialButton } from "@epam/ai-dial-ui-kit";

export default function Home() {
  return (
    <div className="w-full h-full flex flex-col gap-3 items-center justify-center">
      <h1>Test library</h1>
      <DialButton
        onClick={() => console.log("Next.js + AI DIAL UI Kit!")}
        title="Click me"
        cssClass="dial-primary-button"
      />
    </div>
  );
}

Tree Shaking

Import only the components you need:

// ✅ Good - Tree shakable imports
import { DialButton, DialInput } from '@epam/ai-dial-ui-kit';
import '@epam/ai-dial-ui-kit/styles.css'; // Import styles separately

// ❌ Avoid - Imports entire library
import * as UIKit from '@epam/ai-dial-ui-kit';

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details on:

• Code style guidelines
• Testing requirements
• Pull request process

🔒 Security

If you discover a security vulnerability, please refer to our Security Policy.

📄 License

Apache 2.0 - see the LICENSE file for details.

🌟 Related Projects

• AI-DIAL - Entrypoint for all AI Dial projects

---

Made with ❤️ by EPAM Systems