@vibeship/ui
v0.1.12
Published
Shared UI components for Vibeship DevTools
Readme
@vibeship/ui
Shared UI components for Vibeship DevTools.
Installation
npm install @vibeship/uiSetup
1. Import CSS
Import the CSS file in your app's root layout or entry point:
// app/layout.tsx or pages/_app.tsx
import '@vibeship/ui/styles';2. Configure Tailwind
Add the UI package to your Tailwind content paths:
// tailwind.config.js
module.exports = {
content: [
// ... your other content paths
'./node_modules/@vibeship/ui/dist/**/*.{js,mjs}',
],
// ... rest of your config
};3. Wrap with Providers
Wrap your app with the necessary providers:
import { SettingsProvider, AISettingsProvider } from '@vibeship/ui';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<SettingsProvider>
<AISettingsProvider>
{children}
</AISettingsProvider>
</SettingsProvider>
</body>
</html>
);
}Usage
Core Components
import { Button, Card, Alert, Badge, Progress, Tabs } from '@vibeship/ui';
// Button
<Button variant="primary" size="lg">
Click me
</Button>
// Card
<Card>
<CardHeader>
<CardTitle>Card Title</CardTitle>
</CardHeader>
<CardContent>
Card content goes here
</CardContent>
</Card>
// Alert
<Alert variant="info">
This is an informational alert
</Alert>
// Badge
<Badge variant="success">Active</Badge>
// Progress
<Progress value={75} max={100} />
// Tabs
<Tabs defaultValue="tab1">
<TabsList>
<TabsTrigger value="tab1">Tab 1</TabsTrigger>
<TabsTrigger value="tab2">Tab 2</TabsTrigger>
</TabsList>
<TabsContent value="tab1">Content 1</TabsContent>
<TabsContent value="tab2">Content 2</TabsContent>
</Tabs>Complex Components
import {
TaskPanelOverlay,
UnifiedCommandPalette,
HierarchicalTaskPanel,
AIChatInterface,
MarkdownFileEditor,
CombinedSettingsPanel
} from '@vibeship/ui';
// Task Panel Overlay
<TaskPanelOverlay
getProjectTasks={fetchTasks}
sseEndpoint="/api/tasks/stream"
chatApiEndpoint="/api/ai/chat"
/>
// Command Palette
<UnifiedCommandPalette
onClose={() => setOpen(false)}
currentPath="/current/path"
onPathChange={handlePathChange}
/>
// Hierarchical Task Panel
<HierarchicalTaskPanel
tasks={tasks}
onTaskClick={handleTaskClick}
/>
// AI Chat Interface
<AIChatInterface
apiEndpoint="/api/ai/chat"
onLoadApiKey={loadApiKey}
/>
// Markdown Editor
<MarkdownFileEditor
initialContent={content}
onSave={handleSave}
filePath="/path/to/file.md"
/>
// Settings Panel
<CombinedSettingsPanel
apiEndpoint="/api/settings"
onLoadApiKey={loadApiKey}
/>Hooks
import { useUIState, useSettings, useAISettings } from '@vibeship/ui';
// UI State Hook
const { isOpen, toggle, open, close } = useUIState();
// Settings Hook
const { settings, updateSettings } = useSettings();
// AI Settings Hook
const { aiSettings, updateAISettings } = useAISettings();TypeScript
All components are fully typed. Import types as needed:
import type { ButtonProps, CardProps, TaskType } from '@vibeship/ui';Storybook
View component documentation and examples:
cd packages/ui
npm run storybookLicense
MIT