Oboda Fiesta Component Library

A collection of reusable React components built with TypeScript, Tailwind CSS, and Radix UI.

Components Available

• Button Components: Button, CompoundButton, SplitButton, MenuButton
• UI Components: Accordion, Avatar, Badge, Card, Command, Dialog, etc.
• Form Components: Input, Select, Autocomplete, FileInput
• Data Components: Table, AuditLogs
• Layout Components: Tabs, ScrollArea, Popover

Local Development Setup

Prerequisites

• Node.js >= 18
• npm or pnpm
• Both oboda-fiesta-monorepo and enterprise-crocodile projects

Step-by-Step Setup

1. Link the oboda-fiesta package locally

In your oboda-fiesta-monorepo directory:

# Option A: Use the npm script (recommended)
npm run link:oboda

# Option B: Manual linking
cd packages/oboda-fiesta
npm link

This creates a global symlink to your local oboda-fiesta package.

2. Link in your consumer project

In your enterprise-crocodile directory:

# Option A: Use the npm script (recommended)  
npm run link:oboda

# Option B: Manual linking
cd apps/frontend
npm link oboda-fiesta

This links the global oboda-fiesta symlink to your frontend project's node_modules.

3. Verify the setup

Check that the link is working:

cd enterprise-crocodile/apps/frontend
ls -la node_modules/oboda-fiesta

You should see a symlink arrow pointing to your local oboda-fiesta package.

4. Development workflow

1. Make changes to components in oboda-fiesta-monorepo/packages/oboda-fiesta/
2. Changes are immediately available in enterprise-crocodile
3. No rebuild or reinstall required!

Unlinking (Restore to npm package)

When you want to go back to using the published npm package:

In your enterprise-crocodile directory:

# Option A: Use the npm script (recommended)
npm run unlink:oboda

# Option B: Manual unlinking
cd apps/frontend
npm unlink oboda-fiesta
npm install

This removes the local link and reinstalls the published version.

Usage Examples

Basic Import

import { Button } from 'oboda-fiesta'

function MyComponent() {
  return <Button variant="primary">Click me</Button>
}

Multiple Components

import { Button, Card, CardHeader, CardContent, Input } from 'oboda-fiesta'

function LoginForm() {
  return (
    <Card>
      <CardHeader>
        <h2>Login</h2>
      </CardHeader>
      <CardContent>
        <Input placeholder="Email" />
        <Button variant="primary">Sign In</Button>
      </CardContent>
    </Card>
  )
}

Utility Functions

import { cn } from 'oboda-fiesta'

// Use the cn utility for conditional classes
const buttonClass = cn(
  'base-button-class',
  variant === 'primary' && 'primary-styles',
  disabled && 'disabled-styles'
)

Scripts Available

In the oboda-fiesta-monorepo:

• npm run link:oboda - Links the oboda-fiesta package globally

In the enterprise-crocodile:

• npm run link:oboda - Links oboda-fiesta to the frontend project
• npm run unlink:oboda - Unlinks and restores npm package

Troubleshooting

Link not working

1. Check if link exists:

   npm list -g --depth=0 | grep oboda-fiesta

2. Re-create the link:

   # In oboda-fiesta-monorepo
   cd packages/oboda-fiesta
   npm unlink
   npm link
      
   # In enterprise-crocodile
   cd apps/frontend
   npm unlink oboda-fiesta
   npm link oboda-fiesta

TypeScript issues

If you see TypeScript errors:

1. Check import paths - Make sure you're importing from 'oboda-fiesta', not '@repo/oboda-fiesta'
2. Restart TypeScript server in your IDE
3. Clear TypeScript cache:

   rm -rf node_modules/.cache

Changes not reflecting

1. Verify the symlink:

   ls -la node_modules/oboda-fiesta

2. Restart your dev server:

   npm run dev

3. Check file watchers - Some editors may need to refresh or restart

Permission errors on macOS/Linux

If you get permission errors when linking:

# Fix npm permissions
sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}

Windows-specific issues

On Windows, you may need to:

1. Run as Administrator when creating links
2. Use Developer Mode in Windows 10/11 settings
3. Use WSL for better compatibility

Advanced Usage

Watch mode for development

You can set up file watching to automatically restart your dev server when components change:

# In enterprise-crocodile, install nodemon if not already installed
npm install -D nodemon

# Add to package.json scripts:
"dev:watch": "nodemon --watch ../oboda-fiesta-monorepo/packages/oboda-fiesta --ext ts,tsx --exec 'npm run dev'"

Multiple projects

If you have multiple projects using oboda-fiesta:

1. Link once from oboda-fiesta-monorepo
2. Link in each consumer project
3. All projects will use the same local version

Building for production

Before deploying:

1. Unlink all projects:

   npm run unlink:oboda

2. Ensure you're using the published version:

   npm list oboda-fiesta

3. Test thoroughly as the published version may differ from your local version

Contributing

When contributing to oboda-fiesta:

1. Make changes in oboda-fiesta-monorepo
2. Test with linked projects
3. Update version in package.json if needed
4. Publish to npm when ready

Support

If you encounter issues:

1. Check this README first
2. Verify your Node.js and npm versions
3. Try the troubleshooting steps above
4. Create an issue with detailed error messages and setup information