Trellis UI Component Library

Trellis is Rentvine's private UI component library built with React and Vite, providing a comprehensive suite of reusable components for internal application development.

Features

• 🎨 Dual theming support: Stealth (current) and Rentvine 3.0 (future)
• 🧱 Built on shadcn/ui components
• 📚 Storybook integration for component development and testing
• 🎯 Figma-first design system
• ⚛️ React + Vite foundation
• 🎭 TypeScript support

Installation

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

Development

Prerequisites

• Node.js (LTS version)
• npm/yarn
• Git

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run lint - Run ESLint
• npm run preview - Preview production build
• npm run storybook - Start Storybook development server
• npm run build-storybook - Build Storybook for deployment
• npm run chromatic - Run Chromatic for visual testing

Component Development

1. Components should be developed in isolation using Storybook
2. Follow the Figma designs for component specifications
3. Support both Stealth and Rentvine 3.0 themes
4. Include proper TypeScript types
5. Write stories for all component variants

Technology Stack

• Framework: React 18 with Vite
• Styling: Tailwind CSS
• Component Base: shadcn/ui
• Development Environment: Storybook 8
• Type Checking: TypeScript
• Form Handling: React Hook Form
• Data Fetching: TanStack Query
• Date Handling: date-fns
• Icons: Lucide React

Project Structure

trellis/
├── src/
│   ├── assets/          # Static assets
│   │   ├── css/         # CSS styles
│   │   │   └── themes/  # Theme CSS files
│   │   └── images/      # Image assets
│   ├── components/      # Components
│   │   ├── composites/  # Composites
│   │   ├── themes/      # Theme configurations
│   │   └── ui/          # UI components 
│   ├── hooks/           # Custom hooks
│   ├── lib/             # Utility libraries
│   ├── routes/          # React Router routes
│   └── stories/         # Storybook stories
├── .storybook/          # Storybook configuration
└── public/              # Static assets

Theme Usage

Stealth Theme

Current production theme used across existing applications.

import { ThemeProvider } from "./themes"

function App() {
	return (
		<ThemeProvider theme="stealth">
			<YourApp />
		</ThemeProvider>
	)
}

Rentvine 3.0 Theme

Future theme implementation.

import { ThemeProvider } from "./themes"

function App() {
	return (
		<ThemeProvider theme="rentvine-v3">
			<YourApp />
		</ThemeProvider>
	)
}

Contributing

1. Follow the established component patterns
2. Ensure components are responsive and accessible
3. Add proper documentation and stories
4. Test across supported browsers
5. Maintain theme compatibility

Internal Use Only

This is a private repository for Rentvine's internal development team use only. Do not share or distribute outside the organization.