Toolio Components

Web components for the Toolio Design System.

Installation

npm install toolio-components

Components

ToolioButton

A simple button component with primary/secondary variants.

<!-- Basic Usage -->
<toolio-button>Click me</toolio-button>
<toolio-button variant="secondary">Cancel</toolio-button>

<!-- Event Handling -->
<toolio-button button-id="myBtn">Save</toolio-button>
<script>
  document.querySelector('toolio-button').addEventListener('press', (event) => {
    console.log('Button pressed!');
  });
</script>

Properties:

• variant: 'primary' | 'secondary' - Button style variant
• disabled: boolean - Disables the button
• buttonId: string - Button identifier

Events:

• press: Emitted when button is pressed (CustomEvent)

Development

npm install    # Install dependencies
npm start      # Start dev server
npm test       # Run tests
npm run build  # Build for production

Publishing

To publish a new version to npm:

1. Update version in package.json
2. Build the project:

npm run build

3. Publish to npm:

npm publish

Publishing Checklist

• [ ] Update version in package.json
• [ ] Run tests: npm test
• [ ] Build project: npm run build
• [ ] Check dist folder contents
• [ ] Publish: npm publish
• [ ] Create git tag: git tag v0.0.x
• [ ] Push tag: git push origin v0.0.x

AI-Assisted Development

This project is optimized for AI-assisted development using Cursor IDE with Claude. Follow these guidelines for the best development experience:

Recommended Setup

1. Use Cursor IDE as your primary development environment
2. Configure Cursor to use either:
   • Claude-3.5-Sonnet (recommended)
   • Claude-4-Sonnet (if available)

Best Practices

1. Minimize Manual Code Changes

   • Let AI handle code modifications when possible
   • AI understands the project structure and maintains consistency
   • Manual changes may miss important patterns or conventions

2. Use AI for:

   • Code modifications and refactoring
   • Bug fixes and testing
   • Documentation updates
   • Code review suggestions
   • Understanding existing code

3. When to Code Manually:

   • Critical business logic that requires human oversight
   • Security-sensitive features
   • Complex architectural decisions
   • Performance optimizations

Working with AI

1. Clear Communication

   • Describe what you want to achieve, not how to do it
   • Provide context when requesting changes
   • Ask for explanations if the AI's changes are unclear

2. Code Review

   • Have AI review your manual changes
   • Ask AI to explain any changes it makes
   • Use AI to verify test coverage

License

MIT