@revel8/core

Shared components, utilities, and types for Revel8 applications.

Overview

This package provides common functionality shared between:

• revel8-explorer - Web application for exploring the Intuition knowledge graph
• intuition-extension - Browser extension for Intuition insights

Installation

# Using pnpm (recommended)
pnpm add @revel8/core

# Using npm
npm install @revel8/core

# For local development (link)
cd revel8-core && pnpm link
cd ../revel8-explorer && pnpm link @revel8/core

Usage

Utilities

import { cn, truncateId, ipfsToHttp, formatCompact } from '@revel8/core'

// Merge Tailwind classes
cn('px-4 py-2', isActive && 'bg-blue-500')

// Truncate atom/triple IDs for display
truncateId('0x123456789098765432') // '12345'

// Convert IPFS URIs to HTTP
ipfsToHttp('ipfs://QmHash123') // 'https://ipfs.io/ipfs/QmHash123'

// Format large numbers
formatCompact(1500000) // '1.5M'

Components

// UI primitives (as they are added)
import { Button, Card } from '@revel8/core/components/ui'

// Display components (as they are added)
import { AtomIcon, Avatar } from '@revel8/core/components/display'

Tailwind Configuration

Extend the shared Tailwind config in your app:

// tailwind.config.js
const sharedConfig = require('@revel8/core/tailwind.config')

module.exports = {
  presets: [sharedConfig],
  content: [
    './src/**/*.{ts,tsx}',
    './node_modules/@revel8/core/dist/**/*.js',
  ],
  // Your app-specific extensions...
}

Development

# Install dependencies
pnpm install

# Build the package
pnpm build

# Watch mode for development
pnpm dev

# Type check
pnpm typecheck

Package Structure

revel8-core/
├── src/
│   ├── index.ts              # Main entry point
│   ├── components/
│   │   ├── ui/               # shadcn/ui primitives
│   │   │   └── index.ts
│   │   └── display/          # Intuition display components
│   │       └── index.ts
│   ├── utils/
│   │   ├── index.ts
│   │   ├── cn.ts             # Class name utility
│   │   └── formatting.ts     # Formatting helpers
│   └── types/
│       └── index.ts          # Shared TypeScript types
├── tailwind.config.js        # Shared Tailwind configuration
├── tsconfig.json
├── tsup.config.ts            # Build configuration
└── package.json

Exports

The package provides multiple entry points:

| Import Path | Contents | |-------------|----------| | @revel8/core | Everything (utils, components, types) | | @revel8/core/utils | Utility functions only | | @revel8/core/components/ui | UI primitives | | @revel8/core/components/display | Display components |

Peer Dependencies

This package requires the following peer dependencies:

| Package | Version | |---------|---------| | react | ^18.0.0 || ^19.0.0 | | react-dom | ^18.0.0 || ^19.0.0 | | tailwindcss | ^3.0.0 || ^4.0.0 (optional) |

Adding New Components

1. Create the component in the appropriate directory
2. Export it from the directory's index.ts
3. Rebuild the package: pnpm build
4. Update consuming apps to use the new component

Migration Checklist

When migrating a component from a consuming app:

• [ ] Copy component to src/components/
• [ ] Update imports to use relative paths (no @/ or ~/ aliases)
• [ ] Ensure it only depends on:
  • Other @revel8/core exports
  • Peer dependencies (React, etc.)
  • Direct dependencies listed in package.json
• [ ] Add export to the appropriate barrel file
• [ ] Test in both consuming apps
• [ ] Remove original from consuming apps

License

ISC © Kylan Hurt