@accessibility-rn-js/react-native-accessibility-toolkit 1.0.0

package/CHECKLIST.md

@@ -0,0 +1,228 @@
+# Pre-Publication Checklist
+
+## 🔍 Before Publishing to NPM
+
+### 1. Package Configuration
+- [ ] Update package name in `package.json` from `@yourorg/react-native-accessibility-toolkit` to your actual package name
+  - Example: `@mycompany/react-native-accessibility` or `react-native-my-accessibility`
+- [ ] Update author information
+  ```json
+  "author": "Your Name <your.email@example.com>"
+  ```
+- [ ] Update repository URLs
+  ```json
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yourusername/your-repo-name.git"
+  },
+  "bugs": {
+    "url": "https://github.com/yourusername/your-repo-name/issues"
+  },
+  "homepage": "https://github.com/yourusername/your-repo-name#readme"
+  ```
+- [ ] Set appropriate version (recommend starting with `0.1.0` or `1.0.0`)
+
+### 2. Test Locally
+```bash
+cd PLUGIN_SETUP
+npm install --legacy-peer-deps
+```
+
+- [ ] Check for any installation errors
+- [ ] Verify all peer dependencies are correct
+
+### 3. Test in Your Project
+```bash
+# From your main project directory
+npm install ../PLUGIN_SETUP
+```
+
+- [ ] Import and test basic functionality:
+  ```javascript
+  import { AccessibilityProvider, useAccessibility } from 'your-package-name';
+  ```
+- [ ] Verify AccessibleText component works
+- [ ] Verify AccessibilityButton appears
+- [ ] Test color hooks
+- [ ] Test TTS functionality
+
+### 4. Create .npmignore
+Create `.npmignore` file in PLUGIN_SETUP:
+```
+node_modules/
+.git/
+.DS_Store
+*.log
+__tests__/
+coverage/
+.vscode/
+.idea/
+PLUGIN_STATUS.md
+CHECKLIST.md
+```
+
+### 5. Add LICENSE File
+Create `LICENSE` file in PLUGIN_SETUP:
+```
+MIT License
+
+Copyright (c) 2026 Your Name
+
+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...
+```
+
+### 6. Version Control
+```bash
+cd PLUGIN_SETUP
+git init
+git add .
+git commit -m "Initial commit - Accessibility plugin v1.0.0"
+git remote add origin your-repo-url
+git push -u origin main
+```
+
+### 7. NPM Publishing
+
+#### First Time Setup
+```bash
+npm login
+# Enter your npm username, password, and email
+```
+
+#### Publish
+```bash
+cd PLUGIN_SETUP
+
+# Dry run first (see what will be published)
+npm publish --dry-run
+
+# If scoped package (recommended for organization)
+npm publish --access public
+
+# Or if unscoped
+npm publish
+```
+
+## ✅ Post-Publication
+
+### 1. Verify Package
+- [ ] Check package on npmjs.com: `https://www.npmjs.com/package/your-package-name`
+- [ ] Verify README displays correctly
+- [ ] Check version number
+
+### 2. Install from NPM
+```bash
+# In a test project
+npm install your-package-name
+```
+
+- [ ] Verify installation works
+- [ ] Test basic imports
+
+### 3. Update Main Project
+```bash
+# In your main project
+npm uninstall ../PLUGIN_SETUP
+npm install your-package-name
+```
+
+## 🔄 Updating the Package
+
+### For bug fixes (patch version)
+```bash
+npm version patch  # 1.0.0 -> 1.0.1
+npm publish
+```
+
+### For new features (minor version)
+```bash
+npm version minor  # 1.0.0 -> 1.1.0
+npm publish
+```
+
+### For breaking changes (major version)
+```bash
+npm version major  # 1.0.0 -> 2.0.0
+npm publish
+```
+
+## 📝 Recommended Package Names
+
+Good names follow this pattern:
+- `react-native-accessibility-toolkit`
+- `@mycompany/react-native-accessibility`
+- `react-native-my-accessibility-plugin`
+
+## ⚠️ Important Notes
+
+1. **Package names must be unique** on npm - check availability first:
+   ```bash
+   npm search your-proposed-package-name
+   ```
+
+2. **Peer dependencies** are correct - users will need to install:
+   - `react-native-tts`
+   - `@react-native-async-storage/async-storage`
+   - `react-native-vector-icons`
+
+3. **Version 0.1.0 suggestion**: Since not all components are migrated yet, consider publishing as beta:
+   ```json
+   "version": "0.1.0-beta.1"
+   ```
+
+4. **Scope packages** (@yourorg/package-name) require:
+   - npm organization account OR
+   - `--access public` flag when publishing
+
+## 🎯 Quick Publish Commands
+
+```bash
+# Navigate to plugin
+cd PLUGIN_SETUP
+
+# Update package.json with your details
+# (name, author, repository)
+
+# Install dependencies
+npm install --legacy-peer-deps
+
+# Login to npm (if not already)
+npm login
+
+# Publish
+npm publish --access public
+
+# Done! 🎉
+```
+
+## 📞 Troubleshooting
+
+### "Package name already exists"
+- Choose a different name
+- Add your org scope: `@yourorg/package-name`
+- Add a unique suffix
+
+### "You need to authorize this machine"
+```bash
+npm login
+npm publish --otp=123456  # Use 2FA code if enabled
+```
+
+### "Module not found" after installation
+- Ensure `"main": "src/index.js"` in package.json
+- Verify exports in src/index.js
+
+## ✨ Success Indicators
+
+You'll know it worked when:
+- ✅ Package appears on npmjs.com
+- ✅ `npm install your-package-name` works in any project
+- ✅ Can import: `import { AccessibilityProvider } from 'your-package-name'`
+- ✅ Components render without errors
+- ✅ Context provides accessibility state
+
+## 🚀 You're Ready!
+
+Once checklist is complete, your plugin will be published and usable in any React Native project!

package/INSTALLATION_GUIDE.md

@@ -0,0 +1,270 @@
+# Installation & Setup Guide
+
+## 📦 Converting Your Project to an NPM Package
+
+### Step 1: Prepare Your Code Structure
+
+1. **Copy accessibility files** from your current project:
+   ```
+   src/accessibility/ → PLUGIN_SETUP/src/
+   ```
+
+2. **Remove project-specific dependencies**:
+   - Remove references to `Global.js` (replace with Context API)
+   - Remove references to `GlobalStyles` (make them configurable)
+   - Remove references to `Colors` utility (use theme system)
+
+### Step 2: Make Code Generic
+
+Replace hardcoded paths and imports:
+
+**Before:**
+```javascript
+import Colors from '../utils/Colors';
+import GlobalStyles from '../utils/GlobalStyles';
+import Global from '../screens/Global';
+```
+
+**After:**
+```javascript
+import { useAccessibility } from './context/AccessibilityContext';
+```
+
+### Step 3: Setup Git Repository
+
+```bash
+cd PLUGIN_SETUP
+git init
+git add .
+git commit -m "Initial commit: React Native Accessibility Toolkit"
+```
+
+### Step 4: Create GitHub Repository
+
+1. Go to https://github.com/new
+2. Name it: `react-native-accessibility-toolkit`
+3. Push your code:
+
+```bash
+git remote add origin https://github.com/yourorg/react-native-accessibility-toolkit.git
+git branch -M main
+git push -u origin main
+```
+
+### Step 5: Publish to NPM
+
+1. **Create NPM Account**: https://www.npmjs.com/signup
+
+2. **Login to NPM**:
+   ```bash
+   npm login
+   ```
+
+3. **Publish Package**:
+   ```bash
+   cd PLUGIN_SETUP
+   npm publish --access public
+   ```
+
+4. **Update Version** (for future updates):
+   ```bash
+   npm version patch  # 1.0.0 → 1.0.1
+   npm version minor  # 1.0.0 → 1.1.0
+   npm version major  # 1.0.0 → 2.0.0
+   npm publish
+   ```
+
+## 🔧 Using the Plugin in Other Projects
+
+### Installation in New Project
+
+```bash
+# Create new React Native project
+npx react-native init MyAccessibleApp
+
+# Navigate to project
+cd MyAccessibleApp
+
+# Install your plugin
+npm install @yourorg/react-native-accessibility-toolkit
+
+# Install peer dependencies
+npm install react-native-tts @react-native-async-storage/async-storage react-native-draggable @miblanchard/react-native-slider react-native-element-dropdown
+
+# iOS setup
+cd ios && pod install && cd ..
+```
+
+### Setup in App.js
+
+```javascript
+import React from 'react';
+import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
+import { 
+  AccessibilityProvider, 
+  AccessibilityButton,
+  AccessibilityModal,
+  useAccessibility,
+  useDynamicColors 
+} from '@yourorg/react-native-accessibility-toolkit';
+
+function HomeScreen() {
+  const { fontScale, letterSpacing } = useAccessibility();
+  const colors = useDynamicColors();
+
+  return (
+    <View style={[styles.container, { backgroundColor: colors.defaultBackground }]}>
+      <Text 
+        style={{
+          fontSize: 20 * fontScale,
+          letterSpacing: letterSpacing,
+          color: colors.primaryTextColor,
+        }}
+      >
+        Welcome to My Accessible App!
+      </Text>
+      
+      {/* Floating accessibility button */}
+      <AccessibilityButton />
+      
+      {/* Settings modal */}
+      <AccessibilityModal />
+    </View>
+  );
+}
+
+export default function App() {
+  return (
+    <AccessibilityProvider>
+      <SafeAreaView style={{ flex: 1 }}>
+        <HomeScreen />
+      </SafeAreaView>
+    </AccessibilityProvider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+});
+```
+
+## 📱 Testing the Plugin
+
+### Test Locally Before Publishing
+
+Use `npm link` to test locally:
+
+```bash
+# In plugin directory
+cd PLUGIN_SETUP
+npm link
+
+# In your test app
+cd ../MyTestApp
+npm link @yourorg/react-native-accessibility-toolkit
+```
+
+### Unlink After Testing
+
+```bash
+npm unlink @yourorg/react-native-accessibility-toolkit
+```
+
+## 🚀 Distribution Options
+
+### Option 1: Public NPM Package
+- **Pros**: Easy to install, version control, wide reach
+- **Cons**: Public, requires NPM account
+- **Command**: `npm publish --access public`
+
+### Option 2: Private NPM Package
+- **Pros**: Private, controlled access
+- **Cons**: Requires paid NPM account ($7/month)
+- **Command**: `npm publish --access restricted`
+
+### Option 3: GitHub Package Registry
+- **Pros**: Free for public repos, integrated with GitHub
+- **Setup**: 
+  ```json
+  // Add to package.json
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com"
+  }
+  ```
+- **Publish**: `npm publish`
+
+### Option 4: Private Git Repository
+- **Pros**: Full control, no NPM needed
+- **Cons**: Manual version management
+- **Install**: 
+  ```bash
+  npm install git+https://github.com/yourorg/react-native-accessibility-toolkit.git
+  ```
+
+### Option 5: Compressed File (tar.gz)
+- **Create**: `npm pack`
+- **Install**: `npm install /path/to/package.tgz`
+
+## 📝 Checklist Before Publishing
+
+- [ ] All files are in correct structure
+- [ ] package.json is complete with all metadata
+- [ ] README.md has clear documentation
+- [ ] LICENSE file is included
+- [ ] .npmignore excludes unnecessary files
+- [ ] Code is tested in a separate project
+- [ ] Version number follows semver (1.0.0)
+- [ ] Git repository is created and pushed
+- [ ] NPM account is created and verified
+- [ ] Dependencies are listed correctly (peer vs regular)
+
+## 🔄 Updating the Plugin
+
+1. Make changes to code
+2. Update version: `npm version patch/minor/major`
+3. Commit changes: `git commit -am "Description"`
+4. Push to GitHub: `git push`
+5. Publish to NPM: `npm publish`
+
+## 💡 Pro Tips
+
+1. **Use Semantic Versioning**:
+   - MAJOR: Breaking changes (1.0.0 → 2.0.0)
+   - MINOR: New features (1.0.0 → 1.1.0)
+   - PATCH: Bug fixes (1.0.0 → 1.0.1)
+
+2. **Add TypeScript Definitions**:
+   - Create `index.d.ts` for better IDE support
+
+3. **Create Examples**:
+   - Add example projects in `examples/` folder
+
+4. **Setup CI/CD**:
+   - Use GitHub Actions for automated testing/publishing
+
+5. **Documentation**:
+   - Use JSDoc comments for better IntelliSense
+   - Create interactive docs with Docusaurus
+
+## 🆘 Troubleshooting
+
+**Issue**: Package not found after publishing
+- **Solution**: Wait 5-10 minutes for NPM to index
+
+**Issue**: Peer dependency warnings
+- **Solution**: Ensure peerDependencies are correctly specified
+
+**Issue**: Import errors in other projects
+- **Solution**: Check main entry point in package.json
+
+**Issue**: Native module linking issues
+- **Solution**: Run `cd ios && pod install` for iOS
+
+## 📞 Need Help?
+
+Open an issue on GitHub or contact support@example.com

package/PLUGIN_STATUS.md

@@ -0,0 +1,206 @@
+# Plugin Preparation Status
+
+## ✅ COMPLETED
+
+### Core Infrastructure
+- ✅ Created proper folder structure (components/, services/, utils/, context/, hooks/)
+- ✅ Removed ALL Global object dependencies
+- ✅ Created standalone utilities (Colors.js, Fonts.js, AccessibilityUtils.js)
+- ✅ Updated package.json with correct peer dependencies
+- ✅ Updated index.js exports
+
+### Services (Fully Migrated)
+- ✅ AccessibilityStorage.js - AsyncStorage for preferences
+- ✅ TTSService.js - Text-to-speech functionality
+- ✅ NativeAccessibilityBridge.js - Platform accessibility integration
+
+### Context (Fully Migrated)
+- ✅ AccessibilityContext.js - Core state management (NO Global dependency)
+
+### Hooks (Fully Migrated)
+- ✅ useDynamicColors.js - Color transformations
+- ✅ useThemeColors.js - Theme-aware colors
+- ✅ usePageRead.js - Text-to-speech reading
+
+### Components (Partially Migrated)
+- ✅ AccessibleText.js - Text with auto-scaling
+- ✅ AccessibilityButton.js - Floating menu button (uses react-native-vector-icons/Ionicons)
+
+### Documentation
+- ✅ Comprehensive README.md with full API documentation
+- ✅ Installation instructions
+- ✅ Quick start guide
+- ✅ Examples
+
+## ⚠️ REMAINING WORK
+
+### Complex Components to Migrate
+
+The following components still need to be copied from src/accessibility/ and refactored:
+
+1. **AccessibilityModal.js** (1364 lines) - PRIORITY HIGH
+   - Remove Global dependency
+   - Remove Fonts import (use inline styles or props)
+   - Remove TextControlsWithSlider dependency
+   - Simplify or inline complex sub-components
+
+2. **ReadModal.js** (~200 lines)
+   - Remove Global dependency
+   - Remove Colors/Fonts imports
+   - Update to use hooks
+
+3. **TextMagnifier.js**
+   - Standalone magnification component
+
+4. **DictionaryLookup.js**
+   - Remove Global dependency
+   - Remove Fonts import
+
+5. **ReadingGuide.js**
+   - Reading mask and line guide
+
+6. **ScreenReaderControls.js**
+   - Remove Fonts/Responsive imports
+
+7. **AccessibleImage.js**
+   - Remove Global dependency
+
+8. **AccessibleFilteredImage.js**
+   - Remove Global dependency
+   - Apply color filters to images
+
+9. **TextControlsWithSlider.js**
+   - Font controls component
+
+10. **ProfileTester.js**
+    - Testing component
+
+## 🚀 READY FOR BASIC PUBLICATION
+
+The plugin is **currently functional** for basic use cases:
+
+### What Works Now:
+```javascript
+import {
+  AccessibilityProvider,
+  useAccessibility,
+  AccessibleText,
+  AccessibilityButton,
+  useDynamicColors,
+  useThemeColors,
+  usePageRead,
+  TTSService,
+  ACCESSIBILITY_PROFILES,
+} from '@yourorg/react-native-accessibility-toolkit';
+
+// Full context API
+const { fontScale, textColor, updateSetting, setProfile } = useAccessibility();
+
+// Hooks work
+const colors = useDynamicColors();
+const pageRead = usePageRead("text content");
+
+// Basic components
+<AccessibleText baseFontSize={16}>Hello</AccessibleText>
+<AccessibilityButton />
+```
+
+### What's Missing:
+- AccessibilityModal (main settings UI)
+- Advanced components (magnifier, dictionary, reading guides)
+- Image accessibility components
+
+## 📝 TO PUBLISH NOW:
+
+### 1. Update Package Info
+```bash
+cd PLUGIN_SETUP
+```
+
+Edit `package.json`:
+- Change `@yourorg/react-native-accessibility-toolkit` to your actual package name
+- Update author email
+- Update repository URL
+
+### 2. Test Installation
+```bash
+npm install
+```
+
+### 3. Publish to NPM
+```bash
+npm login
+npm publish --access public
+```
+
+### 4. Install in Your Project
+```bash
+cd ../
+npm install ./PLUGIN_SETUP
+# or after publishing:
+# npm install @yourpackagename/react-native-accessibility-toolkit
+```
+
+## 🔧 TO COMPLETE FULL VERSION:
+
+### Option 1: Copy Remaining Components As-Is
+Copy all remaining components from `src/accessibility/` to `PLUGIN_SETUP/src/components/` and:
+1. Change imports from `./` to use the new structure
+2. Remove ALL instances of `Global.accessibility`
+3. Replace with `const { ... } = useAccessibility()` hook calls
+4. Remove `../utils/Fonts` imports (use props or inline styles)
+5. Remove `../utils/Colors` imports (use `useDynamicColors()` hook)
+6. Remove `../utils/Responsive` imports (calculate inline or use Dimensions)
+
+### Option 2: Simplify for MVP
+Create simplified versions of complex components:
+- Basic modal without all features
+- Simple reading tools
+- Core functionality only
+
+## 📦 Current Package Structure
+
+```
+PLUGIN_SETUP/
+├── package.json ✅
+├── README.md ✅
+└── src/
+    ├── index.js ✅ (exports)
+    ├── components/
+    │   ├── AccessibleText.js ✅
+    │   └── AccessibilityButton.js ✅
+    ├── context/
+    │   └── AccessibilityContext.js ✅
+    ├── hooks/
+    │   ├── useDynamicColors.js ✅
+    │   ├── useThemeColors.js ✅
+    │   └── usePageRead.js ✅
+    ├── services/
+    │   ├── AccessibilityStorage.js ✅
+    │   ├── TTSService.js ✅
+    │   └── NativeAccessibilityBridge.js ✅
+    └── utils/
+        ├── AccessibilityUtils.js ✅
+        ├── Colors.js ✅
+        └── Fonts.js ✅
+```
+
+## ✅ RECOMMENDATION
+
+**You can publish the current version as v0.1.0** (beta) since it provides:
+- Complete context and state management
+- All hooks working
+- Basic components
+- Full TTS support
+- Storage persistence
+- Native platform integration
+
+Then add the modal and advanced components in v0.2.0+.
+
+## 🎯 Next Steps
+
+1. **Test the plugin** - Install it in your main project
+2. **Update package name** in package.json
+3. **Publish v0.1.0-beta** to npm
+4. **Gradually migrate** remaining components
+5. **Release v1.0.0** when all features are complete