@crashbytes/react-version-compare 1.0.0

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,176 @@
+# React Compare
+
+A React component for comparing strings and arrays with precise word-level and item-level highlighting of differences.
+
+[![npm version](https://badge.fury.io/js/react-version-compare.svg)](https://badge.fury.io/js/react-version-compare)
+[![License](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](LICENSE)
+
+## Features
+
+- 🎯 **Precise Highlighting**: Only highlights the actual differences, not entire lines
+- 📝 **String Comparison**: Word-level diff for text content
+- 📋 **Array Comparison**: Item-level diff for arrays of strings
+- 🎨 **Clean Visual Design**: Clear red/green highlighting for changes
+- 📱 **Responsive**: Works on desktop and mobile devices
+- ⚡ **TypeScript Support**: Full TypeScript definitions included
+- 🎛️ **Multiple Views**: Side-by-side or inline comparison modes
+
+## Installation
+
+```bash
+npm install react-version-compare
+```
+
+```bash
+yarn add react-version-compare
+```
+
+## Basic Usage
+
+### String Comparison
+
+```tsx
+import React from 'react';
+import Compare from 'react-version-compare';
+import 'react-version-compare/dist/styles.css';
+
+const App = () => {
+  const original = 'I am Captain Kirk, Captain of the USS Enterprise.';
+  const modified = 'I am Captain Picard, Captain of the USS Enterprise.';
+
+  return (
+    <Compare 
+      original={original}
+      modified={modified}
+    />
+  );
+};
+```
+
+**Result**: Only "Kirk" (in red) and "Picard" (in green) will be highlighted.
+
+### Array Comparison
+
+```tsx
+const originalArray = [
+  'First item',
+  'Second item', 
+  'Third item'
+];
+
+const modifiedArray = [
+  'First item',
+  'Modified second item',
+  'Third item'
+];
+
+<Compare 
+  original={originalArray}
+  modified={modifiedArray}
+/>
+```
+
+## API Reference
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `original` | `string \| string[]` | **required** | The original content |
+| `modified` | `string \| string[]` | **required** | The modified content |
+| `viewMode` | `'side-by-side' \| 'inline'` | `'side-by-side'` | How to display the comparison |
+| `className` | `string` | `''` | Custom CSS class name |
+
+## Examples
+
+### Precise Word-Level Highlighting
+
+```tsx
+// Example 1: Minimal changes
+const original = 'I am Captain Kirk, Captain of the USS Enterprise.';
+const modified = 'I am Captain Picard, Captain of the USS Enterprise.';
+// Only "Kirk" → "Picard" highlighted
+
+// Example 2: Multiple changes  
+const original = 'I am Captain Kirk, Captain of the USS Enterprise.';
+const modified = 'I am Commander Benjamin Sisko, Commander of Deep Space 9.';
+// Highlights: "Captain Kirk, Captain of the USS Enterprise" → "Commander Benjamin Sisko, Commander of Deep Space 9"
+```
+
+### Array Comparison
+
+```tsx
+const original = ['Item A', 'Item B', 'Item C'];
+const modified = ['Item A', 'Modified Item B', 'Item C', 'Item D'];
+
+<Compare original={original} modified={modified} />
+```
+
+### Inline View
+
+```tsx
+<Compare 
+  original="Original text"
+  modified="Modified text"
+  viewMode="inline"
+/>
+```
+
+## Styling
+
+The component uses CSS classes that you can customize:
+
+```css
+.diff-removed {
+  /* Styling for removed content (red) */
+}
+
+.diff-added {
+  /* Styling for added content (green) */
+}
+
+.diff-unchanged {
+  /* Styling for unchanged content */
+}
+```
+
+## Use Cases
+
+- **Document revisions**: Compare different versions of text
+- **Code reviews**: Highlight changes in code snippets  
+- **Content management**: Show edits in articles or posts
+- **Data comparison**: Compare lists or arrays of items
+- **Translation work**: Compare original and translated text
+
+## How It Works
+
+- **String comparison**: Uses word-level diffing to identify precise changes
+- **Array comparison**: Compares items by position and content
+- **Smart highlighting**: Only highlights actual differences, not entire lines
+- **Type safety**: Ensures both inputs are the same type (both strings or both arrays)
+
+## License
+
+Apache License 2.0 - see the [LICENSE](LICENSE) file for details.
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## Support
+
+If you encounter any issues or have questions, please [open an issue](https://github.com/CrashBytes/react-version-compare/issues) on GitHub.
+
+## Changelog
+
+See [CHANGELOG.md](./CHANGELOG.md) for release history.
+
+## Versioning
+
+To bump the version, use [npm version](https://docs.npmjs.com/cli/v10/commands/npm-version):
+
+```sh
+npm version patch   # or 'minor' or 'major'
+```
+
+This will update `package.json`, create a git tag, and (optionally) commit the change.

package/dist/cjs/index.js

@@ -0,0 +1,148 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var diff = require('diff');
+
+const Compare = ({
+  original,
+  modified,
+  className = '',
+  viewMode = 'side-by-side',
+  caseSensitive = true // <-- Default true
+}) => {
+  // Handle string comparison
+  const renderStringDiff = (orig, mod) => {
+    const diff$1 = diff.diffWords(orig, mod, {
+      ignoreCase: !caseSensitive
+    });
+    const originalParts = [];
+    const modifiedParts = [];
+    for (const part of diff$1) {
+      if (part.removed) {
+        originalParts.push(jsxRuntime.jsx("span", {
+          className: "diff-removed",
+          children: part.value
+        }, originalParts.length));
+      } else if (part.added) {
+        modifiedParts.push(jsxRuntime.jsx("span", {
+          className: "diff-added",
+          children: part.value
+        }, modifiedParts.length));
+      } else {
+        originalParts.push(jsxRuntime.jsx("span", {
+          className: "diff-unchanged",
+          children: part.value
+        }, originalParts.length));
+        modifiedParts.push(jsxRuntime.jsx("span", {
+          className: "diff-unchanged",
+          children: part.value
+        }, modifiedParts.length));
+      }
+    }
+    return {
+      originalParts,
+      modifiedParts
+    };
+  };
+  // Handle array comparison
+  const renderArrayDiff = (orig, mod) => {
+    let origArr = orig;
+    let modArr = mod;
+    if (!caseSensitive) {
+      origArr = orig.map(s => typeof s === 'string' ? s.toLowerCase() : s);
+      modArr = mod.map(s => typeof s === 'string' ? s.toLowerCase() : s);
+    }
+    const diff$1 = diff.diffArrays(origArr, modArr);
+    const originalParts = [];
+    const modifiedParts = [];
+    for (const part of diff$1) {
+      if (part.removed) {
+        part.value.forEach((item, index) => {
+          originalParts.push(jsxRuntime.jsx("div", {
+            className: "diff-removed-line",
+            children: orig[origArr.indexOf(item, originalParts.length)] ?? item
+          }, `${originalParts.length}-${index}`));
+        });
+      } else if (part.added) {
+        part.value.forEach((item, index) => {
+          modifiedParts.push(jsxRuntime.jsx("div", {
+            className: "diff-added-line",
+            children: mod[modArr.indexOf(item, modifiedParts.length)] ?? item
+          }, `${modifiedParts.length}-${index}`));
+        });
+      } else {
+        part.value.forEach((item, index) => {
+          originalParts.push(jsxRuntime.jsx("div", {
+            className: "diff-unchanged-line",
+            children: orig[origArr.indexOf(item, originalParts.length)] ?? item
+          }, `${originalParts.length}-${index}`));
+          modifiedParts.push(jsxRuntime.jsx("div", {
+            className: "diff-unchanged-line",
+            children: mod[modArr.indexOf(item, modifiedParts.length)] ?? item
+          }, `${modifiedParts.length}-${index}`));
+        });
+      }
+    }
+    return {
+      originalParts,
+      modifiedParts
+    };
+  };
+  const isStringComparison = typeof original === 'string' && typeof modified === 'string';
+  const isArrayComparison = Array.isArray(original) && Array.isArray(modified);
+  if (!isStringComparison && !isArrayComparison) {
+    return jsxRuntime.jsx("div", {
+      className: `compare-error ${className}`,
+      children: "Error: Both inputs must be either strings or arrays of strings"
+    });
+  }
+  let originalParts, modifiedParts;
+  if (isStringComparison) {
+    ({
+      originalParts,
+      modifiedParts
+    } = renderStringDiff(original, modified));
+  } else {
+    ({
+      originalParts,
+      modifiedParts
+    } = renderArrayDiff(original, modified));
+  }
+  if (viewMode === 'inline') {
+    return jsxRuntime.jsx("div", {
+      className: `compare-inline ${className}`,
+      children: jsxRuntime.jsxs("div", {
+        className: "compare-content",
+        children: [originalParts, modifiedParts]
+      })
+    });
+  }
+  return jsxRuntime.jsxs("div", {
+    className: `compare-side-by-side ${className}`,
+    children: [jsxRuntime.jsxs("div", {
+      className: "compare-panel",
+      children: [jsxRuntime.jsx("div", {
+        className: "compare-header original-header",
+        children: "Original"
+      }), jsxRuntime.jsx("div", {
+        className: "compare-content original-content",
+        children: originalParts
+      })]
+    }), jsxRuntime.jsxs("div", {
+      className: "compare-panel",
+      children: [jsxRuntime.jsx("div", {
+        className: "compare-header modified-header",
+        children: "Modified"
+      }), jsxRuntime.jsx("div", {
+        className: "compare-content modified-content",
+        children: modifiedParts
+      })]
+    })]
+  });
+};
+
+exports.Compare = Compare;
+exports.default = Compare;
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/components/Compare.tsx"],"sourcesContent":["import { diffWords, diffArrays } from 'diff';\nimport React from 'react';\n\n// Types\nexport interface CompareProps {\n  original: string | string[];\n  modified: string | string[];\n  className?: string;\n  viewMode?: 'side-by-side' | 'inline';\n  caseSensitive?: boolean; // <-- Added\n}\n\nexport const Compare: React.FC<CompareProps> = ({\n  original,\n  modified,\n  className = '',\n  viewMode = 'side-by-side',\n  caseSensitive = true, // <-- Default true\n}) => {\n  // Handle string comparison\n  const renderStringDiff = (orig: string, mod: string) => {\n    const diff = diffWords(orig, mod, { ignoreCase: !caseSensitive });\n    const originalParts: any[] = [];\n    const modifiedParts: any[] = [];\n    for (const part of diff) {\n      if (part.removed) {\n        originalParts.push(\n          <span key={originalParts.length} className=\"diff-removed\">\n            {part.value}\n          </span>\n        );\n      } else if (part.added) {\n        modifiedParts.push(\n          <span key={modifiedParts.length} className=\"diff-added\">\n            {part.value}\n          </span>\n        );\n      } else {\n        originalParts.push(\n          <span key={originalParts.length} className=\"diff-unchanged\">\n            {part.value}\n          </span>\n        );\n        modifiedParts.push(\n          <span key={modifiedParts.length} className=\"diff-unchanged\">\n            {part.value}\n          </span>\n        );\n      }\n    }\n    return { originalParts, modifiedParts };\n  };\n\n  // Handle array comparison\n  const renderArrayDiff = (orig: string[], mod: string[]) => {\n    let origArr = orig;\n    let modArr = mod;\n    if (!caseSensitive) {\n      origArr = orig.map((s) => (typeof s === 'string' ? s.toLowerCase() : s));\n      modArr = mod.map((s) => (typeof s === 'string' ? s.toLowerCase() : s));\n    }\n    const diff = diffArrays(origArr, modArr);\n    const originalParts: any[] = [];\n    const modifiedParts: any[] = [];\n    for (const part of diff) {\n      if (part.removed) {\n        part.value.forEach((item: string, index: number) => {\n          originalParts.push(\n            <div key={`${originalParts.length}-${index}`} className=\"diff-removed-line\">\n              {orig[origArr.indexOf(item, originalParts.length)] ?? item}\n            </div>\n          );\n        });\n      } else if (part.added) {\n        part.value.forEach((item: string, index: number) => {\n          modifiedParts.push(\n            <div key={`${modifiedParts.length}-${index}`} className=\"diff-added-line\">\n              {mod[modArr.indexOf(item, modifiedParts.length)] ?? item}\n            </div>\n          );\n        });\n      } else {\n        part.value.forEach((item: string, index: number) => {\n          originalParts.push(\n            <div key={`${originalParts.length}-${index}`} className=\"diff-unchanged-line\">\n              {orig[origArr.indexOf(item, originalParts.length)] ?? item}\n            </div>\n          );\n          modifiedParts.push(\n            <div key={`${modifiedParts.length}-${index}`} className=\"diff-unchanged-line\">\n              {mod[modArr.indexOf(item, modifiedParts.length)] ?? item}\n            </div>\n          );\n        });\n      }\n    }\n    return { originalParts, modifiedParts };\n  };\n\n  const isStringComparison = typeof original === 'string' && typeof modified === 'string';\n  const isArrayComparison = Array.isArray(original) && Array.isArray(modified);\n\n  if (!isStringComparison && !isArrayComparison) {\n    return (\n      <div className={`compare-error ${className}`}>\n        Error: Both inputs must be either strings or arrays of strings\n      </div>\n    );\n  }\n\n  let originalParts: any[], modifiedParts: any[];\n  if (isStringComparison) {\n    ({ originalParts, modifiedParts } = renderStringDiff(original as string, modified as string));\n  } else {\n    ({ originalParts, modifiedParts } = renderArrayDiff(original as string[], modified as string[]));\n  }\n\n  if (viewMode === 'inline') {\n    return (\n      <div className={`compare-inline ${className}`}>\n        <div className=\"compare-content\">\n          {originalParts}\n          {modifiedParts}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className={`compare-side-by-side ${className}`}>\n      <div className=\"compare-panel\">\n        <div className=\"compare-header original-header\">Original</div>\n        <div className=\"compare-content original-content\">\n          {originalParts}\n        </div>\n      </div>\n      <div className=\"compare-panel\">\n        <div className=\"compare-header modified-header\">Modified</div>\n        <div className=\"compare-content modified-content\">\n          {modifiedParts}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default Compare;"],"names":["Compare","original","modified","className","viewMode","caseSensitive","renderStringDiff","orig","mod","diff","diffWords","ignoreCase","originalParts","modifiedParts","part","removed","push","_jsx","children","value","length","added","renderArrayDiff","origArr","modArr","map","s","toLowerCase","diffArrays","forEach","item","index","indexOf","isStringComparison","isArrayComparison","Array","isArray","_jsxs"],"mappings":"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"}

package/dist/esm/index.js

@@ -0,0 +1,143 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { diffWords, diffArrays } from 'diff';
+
+const Compare = ({
+  original,
+  modified,
+  className = '',
+  viewMode = 'side-by-side',
+  caseSensitive = true // <-- Default true
+}) => {
+  // Handle string comparison
+  const renderStringDiff = (orig, mod) => {
+    const diff = diffWords(orig, mod, {
+      ignoreCase: !caseSensitive
+    });
+    const originalParts = [];
+    const modifiedParts = [];
+    for (const part of diff) {
+      if (part.removed) {
+        originalParts.push(jsx("span", {
+          className: "diff-removed",
+          children: part.value
+        }, originalParts.length));
+      } else if (part.added) {
+        modifiedParts.push(jsx("span", {
+          className: "diff-added",
+          children: part.value
+        }, modifiedParts.length));
+      } else {
+        originalParts.push(jsx("span", {
+          className: "diff-unchanged",
+          children: part.value
+        }, originalParts.length));
+        modifiedParts.push(jsx("span", {
+          className: "diff-unchanged",
+          children: part.value
+        }, modifiedParts.length));
+      }
+    }
+    return {
+      originalParts,
+      modifiedParts
+    };
+  };
+  // Handle array comparison
+  const renderArrayDiff = (orig, mod) => {
+    let origArr = orig;
+    let modArr = mod;
+    if (!caseSensitive) {
+      origArr = orig.map(s => typeof s === 'string' ? s.toLowerCase() : s);
+      modArr = mod.map(s => typeof s === 'string' ? s.toLowerCase() : s);
+    }
+    const diff = diffArrays(origArr, modArr);
+    const originalParts = [];
+    const modifiedParts = [];
+    for (const part of diff) {
+      if (part.removed) {
+        part.value.forEach((item, index) => {
+          originalParts.push(jsx("div", {
+            className: "diff-removed-line",
+            children: orig[origArr.indexOf(item, originalParts.length)] ?? item
+          }, `${originalParts.length}-${index}`));
+        });
+      } else if (part.added) {
+        part.value.forEach((item, index) => {
+          modifiedParts.push(jsx("div", {
+            className: "diff-added-line",
+            children: mod[modArr.indexOf(item, modifiedParts.length)] ?? item
+          }, `${modifiedParts.length}-${index}`));
+        });
+      } else {
+        part.value.forEach((item, index) => {
+          originalParts.push(jsx("div", {
+            className: "diff-unchanged-line",
+            children: orig[origArr.indexOf(item, originalParts.length)] ?? item
+          }, `${originalParts.length}-${index}`));
+          modifiedParts.push(jsx("div", {
+            className: "diff-unchanged-line",
+            children: mod[modArr.indexOf(item, modifiedParts.length)] ?? item
+          }, `${modifiedParts.length}-${index}`));
+        });
+      }
+    }
+    return {
+      originalParts,
+      modifiedParts
+    };
+  };
+  const isStringComparison = typeof original === 'string' && typeof modified === 'string';
+  const isArrayComparison = Array.isArray(original) && Array.isArray(modified);
+  if (!isStringComparison && !isArrayComparison) {
+    return jsx("div", {
+      className: `compare-error ${className}`,
+      children: "Error: Both inputs must be either strings or arrays of strings"
+    });
+  }
+  let originalParts, modifiedParts;
+  if (isStringComparison) {
+    ({
+      originalParts,
+      modifiedParts
+    } = renderStringDiff(original, modified));
+  } else {
+    ({
+      originalParts,
+      modifiedParts
+    } = renderArrayDiff(original, modified));
+  }
+  if (viewMode === 'inline') {
+    return jsx("div", {
+      className: `compare-inline ${className}`,
+      children: jsxs("div", {
+        className: "compare-content",
+        children: [originalParts, modifiedParts]
+      })
+    });
+  }
+  return jsxs("div", {
+    className: `compare-side-by-side ${className}`,
+    children: [jsxs("div", {
+      className: "compare-panel",
+      children: [jsx("div", {
+        className: "compare-header original-header",
+        children: "Original"
+      }), jsx("div", {
+        className: "compare-content original-content",
+        children: originalParts
+      })]
+    }), jsxs("div", {
+      className: "compare-panel",
+      children: [jsx("div", {
+        className: "compare-header modified-header",
+        children: "Modified"
+      }), jsx("div", {
+        className: "compare-content modified-content",
+        children: modifiedParts
+      })]
+    })]
+  });
+};
+
+export { Compare, Compare as default };
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/components/Compare.tsx"],"sourcesContent":["import { diffWords, diffArrays } from 'diff';\nimport React from 'react';\n\n// Types\nexport interface CompareProps {\n  original: string | string[];\n  modified: string | string[];\n  className?: string;\n  viewMode?: 'side-by-side' | 'inline';\n  caseSensitive?: boolean; // <-- Added\n}\n\nexport const Compare: React.FC<CompareProps> = ({\n  original,\n  modified,\n  className = '',\n  viewMode = 'side-by-side',\n  caseSensitive = true, // <-- Default true\n}) => {\n  // Handle string comparison\n  const renderStringDiff = (orig: string, mod: string) => {\n    const diff = diffWords(orig, mod, { ignoreCase: !caseSensitive });\n    const originalParts: any[] = [];\n    const modifiedParts: any[] = [];\n    for (const part of diff) {\n      if (part.removed) {\n        originalParts.push(\n          <span key={originalParts.length} className=\"diff-removed\">\n            {part.value}\n          </span>\n        );\n      } else if (part.added) {\n        modifiedParts.push(\n          <span key={modifiedParts.length} className=\"diff-added\">\n            {part.value}\n          </span>\n        );\n      } else {\n        originalParts.push(\n          <span key={originalParts.length} className=\"diff-unchanged\">\n            {part.value}\n          </span>\n        );\n        modifiedParts.push(\n          <span key={modifiedParts.length} className=\"diff-unchanged\">\n            {part.value}\n          </span>\n        );\n      }\n    }\n    return { originalParts, modifiedParts };\n  };\n\n  // Handle array comparison\n  const renderArrayDiff = (orig: string[], mod: string[]) => {\n    let origArr = orig;\n    let modArr = mod;\n    if (!caseSensitive) {\n      origArr = orig.map((s) => (typeof s === 'string' ? s.toLowerCase() : s));\n      modArr = mod.map((s) => (typeof s === 'string' ? s.toLowerCase() : s));\n    }\n    const diff = diffArrays(origArr, modArr);\n    const originalParts: any[] = [];\n    const modifiedParts: any[] = [];\n    for (const part of diff) {\n      if (part.removed) {\n        part.value.forEach((item: string, index: number) => {\n          originalParts.push(\n            <div key={`${originalParts.length}-${index}`} className=\"diff-removed-line\">\n              {orig[origArr.indexOf(item, originalParts.length)] ?? item}\n            </div>\n          );\n        });\n      } else if (part.added) {\n        part.value.forEach((item: string, index: number) => {\n          modifiedParts.push(\n            <div key={`${modifiedParts.length}-${index}`} className=\"diff-added-line\">\n              {mod[modArr.indexOf(item, modifiedParts.length)] ?? item}\n            </div>\n          );\n        });\n      } else {\n        part.value.forEach((item: string, index: number) => {\n          originalParts.push(\n            <div key={`${originalParts.length}-${index}`} className=\"diff-unchanged-line\">\n              {orig[origArr.indexOf(item, originalParts.length)] ?? item}\n            </div>\n          );\n          modifiedParts.push(\n            <div key={`${modifiedParts.length}-${index}`} className=\"diff-unchanged-line\">\n              {mod[modArr.indexOf(item, modifiedParts.length)] ?? item}\n            </div>\n          );\n        });\n      }\n    }\n    return { originalParts, modifiedParts };\n  };\n\n  const isStringComparison = typeof original === 'string' && typeof modified === 'string';\n  const isArrayComparison = Array.isArray(original) && Array.isArray(modified);\n\n  if (!isStringComparison && !isArrayComparison) {\n    return (\n      <div className={`compare-error ${className}`}>\n        Error: Both inputs must be either strings or arrays of strings\n      </div>\n    );\n  }\n\n  let originalParts: any[], modifiedParts: any[];\n  if (isStringComparison) {\n    ({ originalParts, modifiedParts } = renderStringDiff(original as string, modified as string));\n  } else {\n    ({ originalParts, modifiedParts } = renderArrayDiff(original as string[], modified as string[]));\n  }\n\n  if (viewMode === 'inline') {\n    return (\n      <div className={`compare-inline ${className}`}>\n        <div className=\"compare-content\">\n          {originalParts}\n          {modifiedParts}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className={`compare-side-by-side ${className}`}>\n      <div className=\"compare-panel\">\n        <div className=\"compare-header original-header\">Original</div>\n        <div className=\"compare-content original-content\">\n          {originalParts}\n        </div>\n      </div>\n      <div className=\"compare-panel\">\n        <div className=\"compare-header modified-header\">Modified</div>\n        <div className=\"compare-content modified-content\">\n          {modifiedParts}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default Compare;"],"names":["Compare","original","modified","className","viewMode","caseSensitive","renderStringDiff","orig","mod","diff","diffWords","ignoreCase","originalParts","modifiedParts","part","removed","push","_jsx","children","value","length","added","renderArrayDiff","origArr","modArr","map","s","toLowerCase","diffArrays","forEach","item","index","indexOf","isStringComparison","isArrayComparison","Array","isArray","_jsxs"],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+
+interface CompareProps {
+    original: string | string[];
+    modified: string | string[];
+    className?: string;
+    viewMode?: 'side-by-side' | 'inline';
+    caseSensitive?: boolean;
+}
+declare const Compare: React.FC<CompareProps>;
+
+export { Compare, Compare as default };
+export type { CompareProps };

package/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "@crashbytes/react-version-compare",
+  "version": "1.0.0",
+  "description": "A React component for comparing strings and arrays with precise word-level and item-level highlighting of differences.",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "npm run clean && npm run build",
+    "lint": "eslint src --ext .ts,.tsx",
+    "type-check": "tsc --noEmit",
+    "demo": "vite",
+    "build-demo": "vite build"
+  },
+  "keywords": [
+    "react",
+    "diff",
+    "compare",
+    "comparison",
+    "side-by-side",
+    "word-diff",
+    "array-diff",
+    "typescript",
+    "highlight",
+    "changes"
+  ],
+  "author": "Your Name <your.email@example.com>",
+  "license": "Apache-2.0",
+  "homepage": "https://github.com/CrashBytes/react-version-compare#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/CrashBytes/react-version-compare.git"
+  },
+  "bugs": {
+    "url": "https://github.com/CrashBytes/react-version-compare/issues"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "dependencies": {
+    "diff": "^8.0.1",
+    "tslib": "^2.8.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.27.1",
+    "@babel/preset-env": "^7.27.2",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-typescript": "^7.27.1",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@testing-library/jest-dom": "^6.1.0",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.0",
+    "@types/jest": "^29.5.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.6.0",
+    "babel-jest": "^29.7.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup": "^4.40.2",
+    "rollup-plugin-dts": "^6.2.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "typescript": "^5.8.3",
+    "vite": "^7.0.2"
+  }
+}