myquizbot-react 1.0.0

package/README.md

@@ -0,0 +1,195 @@
+# @myquizbot/react
+
+A React component library for embedding interactive quizzes with API integration and event handling.
+
+## Installation
+
+```bash
+npm install @myquizbot/react
+```
+
+## Usage
+
+```jsx
+import { Quiz } from '@myquizbot/react';
+import '@myquizbot/react/dist/style.css';
+
+function App() {
+  return (
+    <Quiz
+      quizId="procrastinacao"
+      apiKey="pk_live"
+      mode="steps"
+      onStart={(e) => {
+        console.log('Quiz started:', e);
+      }}
+      onAnswer={(e) => {
+        console.log('Question answered:', e);
+      }}
+      onProgress={(e) => {
+        console.log('Progress:', e.percentage + '%');
+      }}
+      onComplete={(e) => {
+        console.log('Quiz completed:', e);
+      }}
+      onError={(e) => {
+        console.error('Error:', e.message);
+      }}
+    />
+  );
+}
+```
+
+## Props
+
+### Required Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `quizId` | `string` | Unique identifier for the quiz to load |
+| `apiKey` | `string` | API key for authentication |
+
+### Optional Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `mode` | `'steps' \| 'single' \| 'flow'` | `'steps'` | Render mode for the quiz |
+| `baseUrl` | `string` | `http://localhost:5003` | Base URL for API calls |
+| `className` | `string` | - | Custom CSS class name |
+| `style` | `React.CSSProperties` | - | Custom inline styles |
+
+### Event Handlers
+
+| Handler | Type | Description |
+|---------|------|-------------|
+| `onStart` | `(event: QuizStartEvent) => void` | Called when the quiz starts |
+| `onAnswer` | `(event: QuizAnswerEvent) => void` | Called when a question is answered |
+| `onProgress` | `(event: QuizProgressEvent) => void` | Called when progress is made |
+| `onComplete` | `(event: QuizCompleteEvent) => void` | Called when the quiz is completed |
+| `onError` | `(event: QuizErrorEvent) => void` | Called when an error occurs |
+
+## Event Types
+
+### QuizStartEvent
+
+```typescript
+interface QuizStartEvent {
+  quizId: string;
+  timestamp: number;
+}
+```
+
+### QuizAnswerEvent
+
+```typescript
+interface QuizAnswerEvent {
+  questionId: string;
+  answer: any;
+  timestamp: number;
+}
+```
+
+### QuizProgressEvent
+
+```typescript
+interface QuizProgressEvent {
+  currentStep: number;
+  totalSteps: number;
+  percentage: number;
+}
+```
+
+### QuizCompleteEvent
+
+```typescript
+interface QuizCompleteEvent {
+  quizId: string;
+  answers: Record<string, any>;
+  timestamp: number;
+  sessionId?: string;
+}
+```
+
+### QuizErrorEvent
+
+```typescript
+interface QuizErrorEvent {
+  error: Error;
+  message: string;
+  timestamp: number;
+}
+```
+
+## Modes
+
+### Steps Mode (default)
+
+Displays questions one at a time with a progress bar and navigation.
+
+```jsx
+<Quiz quizId="my-quiz" apiKey="pk_live" mode="steps" />
+```
+
+### Single Mode
+
+*(Coming soon)* Displays all questions on a single page.
+
+### Flow Mode
+
+*(Coming soon)* Displays questions in a visual flow diagram.
+
+## Customization
+
+You can customize the appearance using CSS:
+
+```css
+/* Override default styles */
+.quiz-container {
+  max-width: 1000px;
+}
+
+.quiz-steps-option {
+  background: #your-color;
+}
+```
+
+Or pass custom styles via props:
+
+```jsx
+<Quiz
+  quizId="my-quiz"
+  apiKey="pk_live"
+  className="my-custom-quiz"
+  style={{ maxWidth: '600px' }}
+/>
+```
+
+## API Configuration
+
+By default, the component uses `http://localhost:5003` as the base URL. You can override this:
+
+```jsx
+<Quiz
+  quizId="my-quiz"
+  apiKey="pk_live"
+  baseUrl="https://api.myquizbot.com"
+/>
+```
+
+Or set it via environment variable:
+
+```bash
+VITE_API_BASE_URL=https://api.myquizbot.com
+```
+
+## TypeScript Support
+
+The library is written in TypeScript and includes full type definitions. Import types as needed:
+
+```typescript
+import { Quiz, QuizProps, QuizCompleteEvent } from '@myquizbot/react';
+```
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1 @@
+export {}