App Studio Web Component Library

A comprehensive, accessible, and customizable React component library built with TypeScript and App Studio. This library provides a wide range of UI components designed to help you build beautiful and functional web applications quickly and efficiently.

🚀 What's Included

• 40+ UI Components: Complete component library for modern web applications
• ADK Agent Components: Specialized components for Agent Development Kit integration
• Full TypeScript Support: Complete type definitions and IntelliSense
• Production Ready: Battle-tested components used in real applications

📚 Documentation

• Getting Started - Quick introduction and setup
• Component Library - Complete component documentation
• ADK Components - Agent Development Kit integration
• API Integration - Backend integration guide
• Development Guide - Contributing and development

✨ Features

• 40+ UI Components: From basic elements to complex interactive components
• ADK Agent Integration: Complete Agent Development Kit compatibility
• Fully Typed: Built with TypeScript for better developer experience
• Accessible: Follows WCAG guidelines for accessibility
• Customizable: Easily theme and style components to match your brand
• Responsive: Works across all device sizes
• Form Integration: Seamless integration with Formik for form handling
• Modern Design: Clean, consistent design following best practices

Installation

npm install @app-studio/web
# or
yarn add @app-studio/web

Quick Start

import React from 'react';
import { Button, Text } from '@app-studio/web';

function App() {
  return (
    <div>
      <Text>Hello, world!</Text>
      <Button onClick={() => alert('Clicked!')}>Click me</Button>
    </div>
  );
}

Component Categories

Layout Components

• View
• Center
• Horizontal
• Vertical
• AspectRatio
• Separator
• Resizable

Form Components

• Checkbox
• Radio
• Select
• Switch
• TextArea
• TextField
• OTPInput

Navigation Components

• Accordion
• Menubar
• NavigationMenu
• Pagination
• Sidebar
• Tabs

Feedback Components

• Alert
• Modal
• Toast
• Tooltip

Data Display Components

• Avatar
• Badge
• Card
• Table
• Chart

Utility Components

• Button
• Gradient
• Loader
• Text

Interactive Components

• Carousel
• ContextMenu
• DropdownMenu
• HoverCard
• Slider
• Toggle
• ToggleGroup

Design System

All components follow a consistent design system with:

• Typography: Inter/Geist font, specific sizes/weights
• Spacing: 4px grid system
• Colors: Neutral palette with semantic colors
• Rounded corners: Consistent border radius
• Transitions: Subtle animations

Development

Prerequisites

• Node.js (>= 10.x)
• npm or yarn

Setup

1. Clone the repository

   git clone https://github.com/your-org/app-studio-web.git
   cd app-studio-web

2. Install dependencies

   npm install
   # or
   yarn

3. Start the development server

   npm start
   # or
   yarn start

Available Scripts

• npm start - Start the development server
• npm run build - Build the library for production
• npm test - Run tests
• npm run storybook - Start Storybook for component development
• npm run lint - Run ESLint
• npm run lint:fix - Fix ESLint issues
• npm run prettier - Run Prettier
• npm run prettier:fix - Fix Prettier issues

Contributing

We welcome contributions! Please see our Contributing Guide for more details.

Creating New Components

Use our component creation script to scaffold new components:

npm run create-structure -- --name=YourComponentName

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgements

• Built with React
• Styled with App Studio
• Form handling with Formik
• State management with Zustand