@umituz/react-native-mascot 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ümit UZ
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,370 @@
+# @umituz/react-native-mascot
+
+Interactive mascot system for React Native apps - Customizable animated characters with Lottie and SVG support, mood system, and easy integration.
+
+## Features
+
+- ✅ **Pre-built Templates** - Ready-to-use mascot characters
+- ✅ **Lottie Animations** - Professional JSON animations
+- ✅ **SVG Rendering** - Custom vector graphics
+- ✅ **Mood System** - Dynamic personality and emotions
+- ✅ **Interactive** - Touch-enabled mascots
+- ✅ **Animation Queue** - Sequence animations
+- ✅ **Custom Accessories** - Add glasses, hats, etc.
+- ✅ **Dynamic Colors** - Customize appearance
+- ✅ **Type-Safe** - Full TypeScript support
+- ✅ **DDD Architecture** - Domain-driven design
+
+## Installation
+
+```bash
+npm install @umituz/react-native-mascot
+```
+
+### Dependencies
+
+```bash
+npm install lottie-react-native react-native-reanimated react-native-svg
+```
+
+## Quick Start
+
+### Basic Usage
+
+```tsx
+import React from 'react';
+import { View } from 'react-native';
+import { useMascot, MascotView } from '@umituz/react-native-mascot';
+
+function MyApp() {
+  const mascot = useMascot({
+    template: 'friendly-bot',
+    autoInitialize: true
+  });
+
+  return (
+    <View>
+      <MascotView
+        mascot={mascot.mascot}
+        size={200}
+        onPress={() => mascot.playAnimation('wave')}
+      />
+    </View>
+  );
+}
+```
+
+### Using Template
+
+```tsx
+import { MascotFactory, MascotView } from '@umituz/react-native-mascot';
+
+function MyScreen() {
+  const mascot = MascotFactory.createFromTemplate('cute-pet', {
+    appearance: {
+      baseColor: '#FFB6C1',
+      accentColor: '#FF69B4'
+    }
+  });
+
+  return <MascotView mascot={mascot} size={150} />;
+}
+```
+
+### Custom Mascot
+
+```tsx
+import { Mascot, MascotView } from '@umituz/react-native-mascot';
+
+function CustomMascotScreen() {
+  const mascot = new Mascot({
+    id: 'my-mascot',
+    name: 'My Mascot',
+    type: 'svg',
+    personality: {
+      mood: 'happy',
+      energy: 0.8,
+      friendliness: 0.9,
+      playfulness: 0.7
+    },
+    appearance: {
+      baseColor: '#4A90E2',
+      accentColor: '#50E3C2',
+      accessories: [],
+      style: 'cartoon',
+      scale: 1
+    },
+    animations: [],
+    interactive: true,
+    touchEnabled: true
+  });
+
+  return <MascotView mascot={mascot} />;
+}
+```
+
+## Available Templates
+
+| Template | Style | Personality |
+|----------|-------|-------------|
+| `friendly-bot` | Cartoon | Happy & Friendly |
+| `cute-pet` | Cartoon | Excited & Playful |
+| `wise-owl` | Realistic | Thinking & Calm |
+| `pixel-hero` | Pixel Art | Happy & Brave |
+
+## API Reference
+
+### useMascot Hook
+
+```tsx
+const mascot = useMascot({
+  config?: MascotConfig,
+  template?: string,
+  autoInitialize?: boolean
+});
+```
+
+**Returns:**
+
+```tsx
+{
+  mascot: Mascot | null,
+  isReady: boolean,
+  isPlaying: boolean,
+  currentAnimation: string | null,
+  initialize: (config: MascotConfig) => void,
+  initializeFromTemplate: (template: string) => void,
+  setMood: (mood: MascotMood) => void,
+  setEnergy: (energy: number) => void,
+  playAnimation: (animationId: string) => Promise<void>,
+  stopAnimation: () => void,
+  updateAppearance: (appearance: Partial<MascotAppearance>) => void,
+  setBaseColor: (color: string) => void,
+  setAccentColor: (color: string) => void,
+  addAccessory: (accessory) => void,
+  removeAccessory: (accessoryId: string) => void,
+  setVisible: (visible: boolean) => void,
+  setPosition: (position: { x: number, y: number }) => void
+}
+```
+
+### MascotView Component
+
+```tsx
+<MascotView
+  mascot={mascot}
+  animation={animation}
+  size={200}
+  style={style}
+  onPress={() => {}}
+  onLongPress={() => {}}
+  onAnimationFinish={() => {}}
+  resizeMode="contain"
+/>
+```
+
+### MascotFactory
+
+```tsx
+// Create from template
+const mascot = MascotFactory.createFromTemplate('friendly-bot', customizations);
+
+// Create custom
+const mascot = MascotFactory.createCustom(config);
+
+// Create simple
+const mascot = MascotFactory.createSimple({
+  id: 'my-mascot',
+  name: 'My Mascot',
+  baseColor: '#FF6B6B'
+});
+```
+
+## Mood System
+
+```tsx
+// Change mascot mood
+mascot.setMood('excited');
+
+// Available moods
+type MascotMood =
+  | 'happy'
+  | 'sad'
+  | 'excited'
+  | 'thinking'
+  | 'angry'
+  | 'neutral'
+  | 'surprised';
+```
+
+## Animation Control
+
+```tsx
+// Play animation
+await mascot.playAnimation('jump');
+
+// Built-in animations: 'idle', 'wave', 'jump', 'success', 'error', 'dance'
+
+// Stop animation
+mascot.stopAnimation();
+
+// With options
+await mascot.playAnimation('wave', {
+  speed: 1.5,
+  loop: false,
+  onStart: () => console.log('Started'),
+  onFinish: () => console.log('Finished')
+});
+```
+
+## Customization
+
+### Appearance
+
+```tsx
+// Update appearance
+mascot.updateAppearance({
+  baseColor: '#FF6B6B',
+  accentColor: '#4ECDC4',
+  scale: 1.2
+});
+
+// Set colors
+mascot.setBaseColor('#FF6B6B');
+mascot.setAccentColor('#4ECDC4');
+
+// Add accessories
+mascot.addAccessory({
+  id: 'glasses',
+  type: 'glasses',
+  color: '#333',
+  position: { x: 0, y: -10 }
+});
+
+// Remove accessory
+mascot.removeAccessory('glasses');
+```
+
+### Personality
+
+```tsx
+// Set mood
+mascot.setMood('happy');
+
+// Set energy (0-1)
+mascot.setEnergy(0.9);
+
+// Set friendliness (0-1)
+mascot.setFriendliness(1.0);
+
+// Set playfulness (0-1)
+mascot.setPlayfulness(0.8);
+```
+
+## Context Provider
+
+```tsx
+import { MascotProvider, useMascotContext } from '@umituz/react-native-mascot';
+
+function App() {
+  return (
+    <MascotProvider template="friendly-bot">
+      <MyScreen />
+    </MascotProvider>
+  );
+}
+
+function MyScreen() {
+  const { mascot, playAnimation, setMood } = useMascotContext();
+
+  return (
+    <>
+      <MascotView mascot={mascot} />
+      <Button onPress={() => playAnimation('wave')} title="Wave" />
+      <Button onPress={() => setMood('excited')} title="Get Excited" />
+    </>
+  );
+}
+```
+
+## Examples
+
+### Animated Mascot Response
+
+```tsx
+function SuccessScreen() {
+  const mascot = useMascot({ template: 'friendly-bot' });
+
+  const handleSuccess = async () => {
+    mascot.setMood('happy');
+    await mascot.playAnimation('success');
+    await mascot.playAnimation('dance');
+  };
+
+  return (
+    <View>
+      <MascotView mascot={mascot.mascot} size={200} />
+      <Button onPress={handleSuccess} title="Success!" />
+    </View>
+  );
+}
+```
+
+### Interactive Mascot
+
+```tsx
+function InteractiveMascot() {
+  const mascot = useMascot({ template: 'cute-pet' });
+
+  return (
+    <View>
+      <MascotView
+        mascot={mascot.mascot}
+        size={250}
+        onPress={() => mascot.playAnimation('jump')}
+        onLongPress={() => mascot.setMood('excited')}
+      />
+    </View>
+  );
+}
+```
+
+### Custom Animated Mascot
+
+```tsx
+import { useMascotAnimation } from '@umituz/react-native-mascot';
+
+function AnimatedMascot() {
+  const mascot = useMascot({ template: 'pixel-hero' });
+  const { play, queueAnimation, playSequence } = useMascotAnimation({
+    mascot: mascot.mascot
+  });
+
+  const performSequence = async () => {
+    await playSequence(['wave', 'jump', 'dance']);
+  };
+
+  return (
+    <View>
+      <MascotView mascot={mascot.mascot} />
+      <Button onPress={performSequence} title="Perform Sequence" />
+    </View>
+  );
+}
+```
+
+## Architecture
+
+This package follows **Domain-Driven Design (DDD)** principles:
+
+- **Domain Layer**: Entities, value objects, interfaces
+- **Infrastructure Layer**: Repositories, controllers, managers
+- **Presentation Layer**: Components, hooks, contexts
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## License
+
+MIT © Ümit UZ

package/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "@umituz/react-native-mascot",
+  "version": "1.0.1",
+  "description": "Interactive mascot system for React Native apps - Customizable animated characters with Lottie and SVG support, mood system, and easy integration",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "react-native": "./src/index.ts",
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./assets": {
+      "react-native": "./src/assets/index.ts",
+      "types": "./src/assets/index.ts",
+      "default": "./src/assets/index.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit --skipLibCheck",
+    "lint": "eslint src --ext .ts,.tsx --max-warnings 0",
+    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "version:patch": "npm version patch -m 'chore: release v%s'",
+    "version:minor": "npm version minor -m 'chore: release v%s'",
+    "version:major": "npm version major -m 'chore: release v%s'",
+    "setup:skill": "node -e \"const fs = require('fs'); const path = require('path'); const skillDir = path.join(process.env.HOME, '.claude', 'skills', 'react-native-mascot'); fs.mkdirSync(skillDir, {recursive: true}); fs.copyFileSync(path.join(__dirname, 'skills/SKILL.md'), path.join(skillDir, 'SKILL.md')); console.log('✅ @umituz/react-native-mascot setup skill installed to Claude Code!');\""
+  },
+  "keywords": [
+    "react-native",
+    "mascot",
+    "avatar",
+    "character",
+    "animation",
+    "lottie",
+    "svg",
+    "interactive",
+    "gamification",
+    "engagement",
+    "ddd",
+    "domain-driven-design",
+    "type-safe"
+  ],
+  "author": "Ümit UZ <umit@umituz.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umituz/react-native-mascot"
+  },
+  "dependencies": {
+    "lottie-react-native": "^7.3.4",
+    "react-native-reanimated": "^3.16.2"
+  },
+  "peerDependencies": {
+    "@umituz/react-native-design-system": "*",
+    "expo": ">=54.0.0",
+    "react": ">=19.0.0",
+    "react-native": "*",
+    "react-native-svg": ">=15.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@umituz/react-native-design-system": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "~19.1.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.0",
+    "@typescript-eslint/parser": "^7.0.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-native": "^5.0.0",
+    "react": "19.1.0",
+    "react-native": "0.81.4",
+    "react-native-svg": "^15.12.1",
+    "typescript": "~5.9.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src",
+    "skills",
+    "README.md",
+    "LICENSE"
+  ]
+}

package/skills/SKILL.md

@@ -0,0 +1,188 @@
+# react-native-mascot
+
+## Overview
+Interactive mascot system for React Native apps - Customizable animated characters with Lottie and SVG support, mood system, and easy integration.
+
+## Installation
+
+```bash
+npm install @umituz/react-native-mascot
+# or
+yarn add @umituz/react-native-mascot
+```
+
+## Dependencies
+```bash
+npm install lottie-react-native react-native-reanimated react-native-svg
+```
+
+## Quick Start
+
+### Basic Usage
+
+```typescript
+import { useMascot, MascotView } from '@umituz/react-native-mascot';
+
+function MyApp() {
+  const mascot = useMascot({
+    template: 'friendly-bot',
+    autoInitialize: true
+  });
+
+  return (
+    <MascotView
+      mascot={mascot.mascot}
+      animation={mascot.currentAnimation}
+      size={200}
+      onPress={() => mascot.playAnimation('wave')}
+    />
+  );
+}
+```
+
+### Using Template
+
+```typescript
+import { MascotFactory, MascotView } from '@umituz/react-native-mascot';
+
+function MyScreen() {
+  const mascot = MascotFactory.createFromTemplate('cute-pet', {
+    appearance: {
+      baseColor: '#FFB6C1',
+      accentColor: '#FF69B4'
+    }
+  });
+
+  return <MascotView mascot={mascot} size={150} />;
+}
+```
+
+### Custom Mascot
+
+```typescript
+import { Mascot, MascotView } from '@umituz/react-native-mascot';
+
+function CustomMascotScreen() {
+  const mascot = new Mascot({
+    id: 'my-mascot',
+    name: 'My Mascot',
+    type: 'svg',
+    personality: {
+      mood: 'happy',
+      energy: 0.8,
+      friendliness: 0.9,
+      playfulness: 0.7
+    },
+    appearance: {
+      baseColor: '#4A90E2',
+      accentColor: '#50E3C2',
+      accessories: [],
+      style: 'cartoon',
+      scale: 1
+    },
+    animations: [],
+    interactive: true,
+    touchEnabled: true
+  });
+
+  return <MascotView mascot={mascot} />;
+}
+```
+
+## Available Templates
+
+- `friendly-bot` - Friendly robot mascot
+- `cute-pet` - Adorable pet character
+- `wise-owl` - Wise owl mentor
+- `pixel-hero` - Pixel art style hero
+
+## Mood System
+
+```typescript
+// Change mascot mood
+mascot.setMood('excited');
+
+// Available moods: 'happy', 'sad', 'excited', 'thinking', 'angry', 'neutral', 'surprised'
+```
+
+## Animation Control
+
+```typescript
+// Play animation
+await mascot.playAnimation('jump');
+
+// Stop animation
+mascot.stopAnimation();
+
+// Built-in animations: 'idle', 'wave', 'jump', 'success', 'error', 'dance'
+```
+
+## Customization
+
+### Appearance
+
+```typescript
+mascot.updateAppearance({
+  baseColor: '#FF6B6B',
+  accentColor: '#4ECDC4'
+});
+
+// Add accessories
+mascot.addAccessory({
+  id: 'glasses',
+  type: 'glasses',
+  color: '#333'
+});
+
+// Remove accessory
+mascot.removeAccessory('glasses');
+```
+
+### Personality
+
+```typescript
+mascot.setEnergy(0.9);
+mascot.setFriendliness(1.0);
+```
+
+## Context Provider
+
+```typescript
+import { MascotProvider, useMascotContext } from '@umituz/react-native-mascot';
+
+function App() {
+  return (
+    <MascotProvider template="friendly-bot">
+      <MyScreen />
+    </MascotProvider>
+  );
+}
+
+function MyScreen() {
+  const { mascot, playAnimation, setMood } = useMascotContext();
+
+  return (
+    <>
+      <MascotView mascot={mascot} />
+      <Button onPress={() => playAnimation('wave')} title="Wave" />
+    </>
+  );
+}
+```
+
+## Features
+
+✅ Pre-built mascot templates
+✅ Lottie animation support
+✅ SVG rendering
+✅ Mood and personality system
+✅ Interactive touch support
+✅ Animation queuing
+✅ Custom accessories
+✅ Dynamic color customization
+✅ Type-safe TypeScript
+✅ DDD architecture
+
+## License
+
+MIT