@yoctotta/kaman

A React component library for the Kaman Frontend Microservice.

Installation

npm install @yoctotta/kaman
# or
yarn add @yoctotta/kaman

# Required peer dependencies
npm install react react-dom react-icons recharts lucide-react ace-builds react-ace
# or
yarn add react react-dom react-icons recharts lucide-react ace-builds react-ace

Usage

import { KamanExportComponent } from '@yoctotta/kaman';
// Import the CSS (important!)
import '@yoctotta/kaman/dist/kaman.css';

function App() {
  return (
    <KamanExportComponent 
      initialApplicationIndex={0}
      initialExpertIndex={0}
      userObj={{/* your user object */}}
      token="your-auth-token"
    />
  );
}

Styling

This library uses Tailwind CSS with a km- prefix to avoid conflicts with your application's styles. Make sure to import the CSS file:

import '@yoctotta/kaman/dist/kaman.css';

Troubleshooting

React Version Conflicts

If you encounter errors like "cannot read properties of null reading useState", you likely have multiple versions of React in your application.

To fix this:

1. Ensure you have only one version of React in your project
2. Check yarn why react or npm ls react for duplicates
3. If you see multiple versions, update your dependencies or use yarn's resolutions to force a single version

// In your package.json
"resolutions": {
  "react": "18.2.0",
  "react-dom": "18.2.0"
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | initialApplicationIndex | number | 0 | Initial application index to display | | initialExpertIndex | number | 0 | Initial expert index to display | | userObj | Object | required | User object for authentication | | token | string | required | Auth token for API calls |