pixedi 1.0.0 → 1.0.2

package/README.md

@@ -1,75 +1,80 @@
-# React + TypeScript + Vite
+# pixedi
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+A lightweight, embeddable React image editor component.
 
-Currently, two official plugins are available:
+`pixedi` provides a ready-to-use image editing UI with cropping, resizing, filters, horizontal/vertical flip, undo/redo, and social-media presets. It is built for React applications.
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+## Features
 
-## React Compiler
+- Crop with free or fixed-ratio selection
+- Resize by exact pixel dimensions
+- Horizontal and vertical flip
+- Image filters (brightness, contrast, saturation, etc.)
+- Undo/redo history
+- Social-media size presets (Facebook, Instagram, LinkedIn)
+- React component
+- TypeScript declarations included
 
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+## Installation
 
-## Expanding the ESLint configuration
+```bash
+npm install pixedi
+# or
+pnpm add pixedi
+# or
+yarn add pixedi
+```
 
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+`pixedi` requires the following peer dependencies:
 
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
+```bash
+npm install react react-dom
+```
 
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
+## React Component
 
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+### Import
 
+```tsx
+import { ImageEditor } from "pixedi";
 ```
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+### Usage
+
+```tsx
+import { ImageEditor } from "pixedi";
 
+function App() {
+  return (
+    <div style={{ width: "100vw", height: "100vh" }}>
+      <ImageEditor
+        image="https://example.com/photo.jpg"
+        onSave={async (base64) => {
+          // Upload or persist the edited image
+          console.log(base64);
+        }}
+        onBack={() => {
+          // Handle back/cancel action
+          console.log("User cancelled editing");
+        }}
+      />
+    </div>
+  );
+}
 ```
+
+### Props
+
+| Prop     | Type                          | Description                                                            |
+| -------- | ----------------------------- | ---------------------------------------------------------------------- |
+| `image`  | `string`                      | URL or base64 data URI of the image to edit.                             |
+| `onSave` | `(base64: string) => void \| Promise<void>` | Called when the user clicks Save. Receives the edited image as base64.   |
+| `onBack` | `() => void`                  | Called when the user clicks Back/Cancel.                                 |
+
+## TypeScript
+
+TypeScript declarations are included under `dist/lib/index.d.ts`. No additional `@types` package is required.
+
+## License
+
+MIT

package/README.npm.md

@@ -0,0 +1,80 @@
+# pixedi
+
+A lightweight, embeddable React image editor component.
+
+`pixedi` provides a ready-to-use image editing UI with cropping, resizing, filters, horizontal/vertical flip, undo/redo, and social-media presets. It is built for React applications.
+
+## Features
+
+- Crop with free or fixed-ratio selection
+- Resize by exact pixel dimensions
+- Horizontal and vertical flip
+- Image filters (brightness, contrast, saturation, etc.)
+- Undo/redo history
+- Social-media size presets (Facebook, Instagram, LinkedIn)
+- React component
+- TypeScript declarations included
+
+## Installation
+
+```bash
+npm install pixedi
+# or
+pnpm add pixedi
+# or
+yarn add pixedi
+```
+
+`pixedi` requires the following peer dependencies:
+
+```bash
+npm install react react-dom
+```
+
+## React Component
+
+### Import
+
+```tsx
+import { ImageEditor } from "pixedi";
+```
+
+### Usage
+
+```tsx
+import { ImageEditor } from "pixedi";
+
+function App() {
+  return (
+    <div style={{ width: "100vw", height: "100vh" }}>
+      <ImageEditor
+        image="https://example.com/photo.jpg"
+        onSave={async (base64) => {
+          // Upload or persist the edited image
+          console.log(base64);
+        }}
+        onBack={() => {
+          // Handle back/cancel action
+          console.log("User cancelled editing");
+        }}
+      />
+    </div>
+  );
+}
+```
+
+### Props
+
+| Prop     | Type                          | Description                                                            |
+| -------- | ----------------------------- | ---------------------------------------------------------------------- |
+| `image`  | `string`                      | URL or base64 data URI of the image to edit.                             |
+| `onSave` | `(base64: string) => void \| Promise<void>` | Called when the user clicks Save. Receives the edited image as base64.   |
+| `onBack` | `() => void`                  | Called when the user clicks Back/Cancel.                                 |
+
+## TypeScript
+
+TypeScript declarations are included under `dist/lib/index.d.ts`. No additional `@types` package is required.
+
+## License
+
+MIT