feat: add ecosystem packages, built-in plugins, and documentation

- Built-in plugins: autoPlay, pagination, parallaxImage
- Image gallery with zoom and swipe-to-dismiss
- Onboarding carousel with progress and skip
- Theme system with 4 built-in themes (light, dark, vibrant, minimal)
- RTL layout support utilities
- Performance monitor dev overlay
- CLI preview command for local demos
- Playground app with Expo Router (preset gallery, benchmarks, custom builder)
- Docusaurus documentation site with 20+ pages
- VS Code extension with 8 code snippets
- E2E test setup with Detox
- Storybook stories for visual testing
- CI workflows for bundle size checking and E2E tests
- Build, release, benchmark, and docs generation scripts
- Bump to v1.0.0

Author: toankhontech

.github/workflows/e2e.yml

@@ -0,0 +1,28 @@
+name: E2E Tests
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  e2e-ios:
+    runs-on: macos-14
+    timeout-minutes: 60
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'yarn'
+      - run: yarn install --frozen-lockfile
+      - run: yarn build
+      - name: Install Detox CLI
+        run: npm install -g detox-cli
+      - name: Build Detox app
+        working-directory: examples/expo-example
+        run: detox build --configuration ios.sim.release
+      - name: Run Detox tests
+        working-directory: examples/expo-example
+        run: detox test --configuration ios.sim.release --cleanup

.github/workflows/size-check.yml

@@ -0,0 +1,20 @@
+name: Bundle Size
+
+on:
+  pull_request:
+    branches: [main]
+
+jobs:
+  size:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'yarn'
+      - run: yarn install --frozen-lockfile
+      - run: yarn build
+      - uses: andresz1/size-limit-action@v1
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}

packages/cli/src/commands/preview.ts

@@ -0,0 +1,37 @@
+/**
+ * @file preview command
+ * @description Launches a local preview server to demo all presets
+ */
+
+import chalk from 'chalk';
+import { execSync } from 'child_process';
+import path from 'path';
+import fs from 'fs-extra';
+
+interface PreviewOptions {
+  port?: string;
+}
+
+export const previewCommand = (options: PreviewOptions): void => {
+  const port = options.port || '8081';
+  const playgroundDir = path.resolve(__dirname, '..', '..', '..', 'playground');
+
+  if (!fs.existsSync(playgroundDir)) {
+    console.log(chalk.red('\n  Playground app not found.'));
+    console.log(chalk.dim('  Run from the monorepo root, or install the playground package.\n'));
+    return;
+  }
+
+  console.log(chalk.bold('\n  Starting Ultra Carousel Preview...\n'));
+  console.log(chalk.dim(`  Port: ${port}`));
+  console.log(chalk.dim(`  Directory: ${playgroundDir}\n`));
+
+  try {
+    execSync(`npx expo start --port ${port} --web`, {
+      cwd: playgroundDir,
+      stdio: 'inherit',
+    });
+  } catch {
+    console.log(chalk.yellow('\n  Preview server stopped.\n'));
+  }
+};

packages/cli/src/index.ts

@@ -7,13 +7,14 @@ import { Command } from 'commander';
 import { initCommand } from './commands/init';
 import { addCommand } from './commands/add';
 import { listCommand } from './commands/list';
+import { previewCommand } from './commands/preview';
 
 const program = new Command();
 
 program
   .name('ultra-carousel')
   .description('CLI tool for react-native-ultra-carousel')
-  .version('0.1.0');
+  .version('0.5.0');
 
 program
   .command('init')
@@ -33,4 +34,10 @@ program
   .option('-c, --category <name>', 'filter by category (basic, advanced, creative)')
   .action(listCommand);
 
+program
+  .command('preview')
+  .description('Launch local preview of all presets')
+  .option('-p, --port <number>', 'port number', '8081')
+  .action(previewCommand);
+
 program.parse();

packages/core/.storybook/main.ts

@@ -0,0 +1,8 @@
+import type { StorybookConfig } from '@storybook/react-native';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [],
+};
+
+export default config;

packages/core/__tests__/e2e/.detoxrc.js

@@ -0,0 +1,44 @@
+/** @type {Detox.DetoxConfig} */
+module.exports = {
+  testRunner: {
+    args: {
+      $0: 'jest',
+      config: 'packages/core/__tests__/e2e/jest.config.js',
+    },
+    jest: {
+      setupTimeout: 120000,
+    },
+  },
+  apps: {
+    'ios.release': {
+      type: 'ios.app',
+      binaryPath: 'ios/build/Build/Products/Release-iphonesimulator/UltraCarouselExample.app',
+      build: 'xcodebuild -workspace ios/UltraCarouselExample.xcworkspace -scheme UltraCarouselExample -configuration Release -sdk iphonesimulator -derivedDataPath ios/build',
+    },
+    'android.release': {
+      type: 'android.apk',
+      binaryPath: 'android/app/build/outputs/apk/release/app-release.apk',
+      build: 'cd android && ./gradlew assembleRelease assembleAndroidTest -DtestBuildType=release',
+    },
+  },
+  devices: {
+    simulator: {
+      type: 'ios.simulator',
+      device: { type: 'iPhone 15' },
+    },
+    emulator: {
+      type: 'android.emulator',
+      device: { avdName: 'Pixel_5_API_34' },
+    },
+  },
+  configurations: {
+    'ios.sim.release': {
+      device: 'simulator',
+      app: 'ios.release',
+    },
+    'android.emu.release': {
+      device: 'emulator',
+      app: 'android.release',
+    },
+  },
+};

packages/core/__tests__/e2e/carousel.e2e.ts

@@ -0,0 +1,48 @@
+/**
+ * @file Carousel E2E tests
+ * @description End-to-end tests for core carousel functionality
+ */
+
+import { device, element, by, expect } from 'detox';
+
+describe('Carousel', () => {
+  beforeAll(async () => {
+    await device.launchApp();
+  });
+
+  beforeEach(async () => {
+    await device.reloadReactNative();
+  });
+
+  it('should render carousel with items', async () => {
+    await expect(element(by.id('carousel'))).toBeVisible();
+    await expect(element(by.text('Slide 1'))).toBeVisible();
+  });
+
+  it('should swipe to next item', async () => {
+    await element(by.id('carousel')).swipe('left');
+    await expect(element(by.text('Slide 2'))).toBeVisible();
+  });
+
+  it('should swipe to previous item', async () => {
+    await element(by.id('carousel')).swipe('left');
+    await element(by.id('carousel')).swipe('right');
+    await expect(element(by.text('Slide 1'))).toBeVisible();
+  });
+
+  it('should show pagination dots', async () => {
+    await expect(element(by.id('pagination'))).toBeVisible();
+  });
+
+  it('should change preset', async () => {
+    await element(by.text('fade')).tap();
+    await expect(element(by.text('fade'))).toBeVisible();
+  });
+
+  it('should handle rapid swipes', async () => {
+    await element(by.id('carousel')).swipe('left');
+    await element(by.id('carousel')).swipe('left');
+    await element(by.id('carousel')).swipe('left');
+    await expect(element(by.text('Slide 4'))).toBeVisible();
+  });
+});

packages/core/__tests__/e2e/jest.config.js

@@ -0,0 +1,12 @@
+/** @type {import('jest').Config} */
+module.exports = {
+  rootDir: '../..',
+  testMatch: ['<rootDir>/__tests__/e2e/**/*.e2e.ts'],
+  testTimeout: 120000,
+  maxWorkers: 1,
+  globalSetup: 'detox/runners/jest/globalSetup',
+  globalTeardown: 'detox/runners/jest/globalTeardown',
+  reporters: ['detox/runners/jest/reporter'],
+  testEnvironment: 'detox/runners/jest/testEnvironment',
+  verbose: true,
+};

packages/core/__tests__/e2e/presets.e2e.ts

@@ -0,0 +1,32 @@
+/**
+ * @file Animation preset E2E tests
+ * @description Tests for individual animation presets
+ */
+
+import { device, element, by, expect } from 'detox';
+
+const PRESETS_TO_TEST = ['slide', 'fade', 'coverflow', 'cube', 'tinder', 'stack', 'newspaper', 'wave'];
+
+describe('Animation Presets', () => {
+  beforeAll(async () => {
+    await device.launchApp();
+  });
+
+  beforeEach(async () => {
+    await device.reloadReactNative();
+  });
+
+  PRESETS_TO_TEST.forEach((preset) => {
+    it(`should render ${preset} preset without crashing`, async () => {
+      // Select the preset
+      await element(by.text(preset)).tap();
+
+      // Verify carousel is still visible
+      await expect(element(by.id('carousel'))).toBeVisible();
+
+      // Swipe to test animation runs without crash
+      await element(by.id('carousel')).swipe('left');
+      await element(by.id('carousel')).swipe('right');
+    });
+  });
+});

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ultra-carousel",
-  "version": "0.5.0",
+  "version": "1.0.0",
   "description": "The Ultimate Carousel Ecosystem for React Native. 35+ animation presets, plugin system, CLI tool. Built on Reanimated.",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",