Shared React component library for Crit-Fumble projects
npm install @crit-fumble/reactShared React component library for Crit-Fumble Gaming projects.
``bash`
npm install @crit-fumble/react
This package requires the following peer dependencies:
`bash
npm install @crit-fumble/core clsx react react-dom
Entry Points
The package provides multiple entry points for different use cases:
`typescript
// All components
import { Button, Card, ChatWindow, Desktop } from '@crit-fumble/react'// Shared components only (atoms, molecules, economy - NO desktop)
import { Button, Card, CritCoin } from '@crit-fumble/react/shared'
// Desktop components (requires framer-motion, react-rnd, zustand)
import { Desktop, Window, WindowManager } from '@crit-fumble/react/desktop'
// Web components (website-specific + shared)
import { MainLayout, Button } from '@crit-fumble/react/web'
// Activity components (Discord activity-specific + shared)
import { ChatWindow, FloatingChat, TabNav } from '@crit-fumble/react/activity'
// Styles (required)
import '@crit-fumble/react/styles'
// Tailwind config (for extending in your project)
import { baseConfig } from '@crit-fumble/react/tailwind'
`Activity Components
For Discord Activities and FumbleBot integrations:
`typescript
import {
// Pages
LoadingPage,
ErrorPage,
WebLoginPage, // Organisms
FloatingChat,
ChatPanel,
AdminDashboardPage,
// Molecules
TabNav,
Card, CardHeader, CardTitle, CardContent,
Modal, ModalFooter,
FormField,
EmptyState,
// Atoms
Button,
Input,
Toggle,
Badge,
Spinner,
Textarea,
// Types
type ChatMessage,
type Tab,
} from '@crit-fumble/react/activity'
`Types from @crit-fumble/core
The activity entry point re-exports commonly used types from
@crit-fumble/core:`typescript
import type {
// User & Auth
DiscordUser, User, Guild, DiscordContext, DiscordAuth, // Discord config
DiscordChannel, DiscordRole, ChannelLinks, BotSettings, GuildSettings,
// Campaign & Session
Campaign, CampaignMember, Character, GameSession, SessionMessage,
// Schedule/Party
Party, PartySchedule, PartyMember, PartyMemberRole,
// Adventure
Adventure, AdventureStatus, AdventureMessage, AdventureMessageType,
// Game Content
RandomTableEntry, GameRandomTable, DialogueNode, GameDialogueTree,
// Container
ContainerStatus, ContainerStartRequest, ContainerStartResponse,
} from '@crit-fumble/react/activity'
`Tailwind Configuration
Extend your Tailwind config with the CFG brand theme:
`javascript
// tailwind.config.js
import { baseConfig } from '@crit-fumble/react/tailwind'export default {
...baseConfig,
content: [
'./src/*/.{js,ts,jsx,tsx}',
'./node_modules/@crit-fumble/react/dist/*/.js',
],
}
`$3
The config provides CFG brand colors via Tailwind classes:
`typescript
// Primary colors
'cfg-primary' // #552e66 - Main brand purple
'cfg-primary-hover' // #3d1f4a - Darker variant
'cfg-accent' // #7a4599 - Lighter accent// Status colors
'cfg-green' // #248046 - Success
'cfg-red' // #da373c - Error/danger
'cfg-yellow' // #f0b232 - Warning
// Background colors
'cfg-background-primary' // #1a1a2e
'cfg-background-secondary' // #16213e
'cfg-background-tertiary' // #0f0f1a
'cfg-background-floating' // #1f1f3a
// Text colors
'cfg-text-normal' // #e8e8f0
'cfg-text-muted' // #9090a8
'cfg-text-link' // #7a4599
// Border
'cfg-border' // #3a3a5a
`$3
`typescript
'font-sans' // IBM Plex Sans, Inter
'font-display' // Changa, Rubik (headings, buttons)
'font-mono' // IBM Plex Mono
`Example Usage
$3
`typescript
// App.tsx
import { useState } from 'react'
import {
LoadingPage,
ErrorPage,
FloatingChat,
type ChatMessage,
} from '@crit-fumble/react/activity'
import '@crit-fumble/react/styles'function App() {
const [isLoading, setIsLoading] = useState(true)
const [error, setError] = useState(null)
const [messages, setMessages] = useState([])
if (isLoading) {
return
}
if (error) {
return window.location.reload()} />
}
return (
messages={messages}
onSendMessage={(content) => {
// Handle message sending
}}
/>
)
}
`$3
`typescript
// AdminPanel.tsx
import {
TabNav,
Card, CardHeader, CardTitle, CardContent,
Button, Input, Toggle, Badge,
type Tab,
} from '@crit-fumble/react/activity'const tabs: Tab[] = [
{ id: 'settings', label: 'Settings' },
{ id: 'users', label: 'Users' },
{ id: 'campaigns', label: 'Campaigns' },
]
function AdminPanel() {
const [activeTab, setActiveTab] = useState('settings')
return (
Server Settings
)
}
``Apache-2.0