@crashbytes/react-version-compare 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +12 -4
  2. package/dist/cjs/index.js +21 -19
  3. package/dist/cjs/index.js.map +1 -1
  4. package/dist/esm/index.js +21 -19
  5. package/dist/esm/index.js.map +1 -1
  6. package/dist/styles.css +132 -0
  7. package/package.json +13 -4
package/README.md CHANGED
@@ -5,6 +5,14 @@ A React component for comparing strings and arrays with precise word-level and i
5
5
  [![npm version](https://badge.fury.io/js/react-version-compare.svg)](https://badge.fury.io/js/react-version-compare)
6
6
  [![License](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](LICENSE)
7
7
 
8
+ ## Live Storybook Demo
9
+
10
+ You can explore and interact with all features of this component in the live Storybook:
11
+
12
+ 👉 **[Live Storybook Demo](https://crashbytes.github.io/react-version-compare/)**
13
+
14
+ The Storybook provides interactive examples for all comparison scenarios. You can adjust the inputs and props using the controls panel to see how the component behaves with different data. This is the best way to preview, test, and understand the capabilities of `react-version-compare` without writing any code.
15
+
8
16
  ## Features
9
17
 
10
18
  - 🎯 **Precise Highlighting**: Only highlights the actual differences, not entire lines
@@ -18,11 +26,11 @@ A React component for comparing strings and arrays with precise word-level and i
18
26
  ## Installation
19
27
 
20
28
  ```bash
21
- npm install react-version-compare
29
+ npm install @crashbytes/react-version-compare
22
30
  ```
23
31
 
24
32
  ```bash
25
- yarn add react-version-compare
33
+ yarn add @crashbytes/react-version-compare
26
34
  ```
27
35
 
28
36
  ## Basic Usage
@@ -31,8 +39,8 @@ yarn add react-version-compare
31
39
 
32
40
  ```tsx
33
41
  import React from 'react';
34
- import Compare from 'react-version-compare';
35
- import 'react-version-compare/dist/styles.css';
42
+ import Compare from '@crashbytes/react-version-compare';
43
+ import '@crashbytes/react-version-compare/dist/styles.css';
36
44
 
37
45
  const App = () => {
38
46
  const original = 'I am Captain Kirk, Captain of the USS Enterprise.';
package/dist/cjs/index.js CHANGED
@@ -2,8 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var jsxRuntime = require('react/jsx-runtime');
6
5
  var diff = require('diff');
6
+ require('react');
7
+ var jsxRuntime = require('react/jsx-runtime');
7
8
 
8
9
  const Compare = ({
9
10
  original,
@@ -21,21 +22,21 @@ const Compare = ({
21
22
  const modifiedParts = [];
22
23
  for (const part of diff$1) {
23
24
  if (part.removed) {
24
- originalParts.push(jsxRuntime.jsx("span", {
25
+ originalParts.push(/*#__PURE__*/jsxRuntime.jsx("span", {
25
26
  className: "diff-removed",
26
27
  children: part.value
27
28
  }, originalParts.length));
28
29
  } else if (part.added) {
29
- modifiedParts.push(jsxRuntime.jsx("span", {
30
+ modifiedParts.push(/*#__PURE__*/jsxRuntime.jsx("span", {
30
31
  className: "diff-added",
31
32
  children: part.value
32
33
  }, modifiedParts.length));
33
34
  } else {
34
- originalParts.push(jsxRuntime.jsx("span", {
35
+ originalParts.push(/*#__PURE__*/jsxRuntime.jsx("span", {
35
36
  className: "diff-unchanged",
36
37
  children: part.value
37
38
  }, originalParts.length));
38
- modifiedParts.push(jsxRuntime.jsx("span", {
39
+ modifiedParts.push(/*#__PURE__*/jsxRuntime.jsx("span", {
39
40
  className: "diff-unchanged",
40
41
  children: part.value
41
42
  }, modifiedParts.length));
@@ -46,6 +47,7 @@ const Compare = ({
46
47
  modifiedParts
47
48
  };
48
49
  };
50
+
49
51
  // Handle array comparison
50
52
  const renderArrayDiff = (orig, mod) => {
51
53
  let origArr = orig;
@@ -60,25 +62,25 @@ const Compare = ({
60
62
  for (const part of diff$1) {
61
63
  if (part.removed) {
62
64
  part.value.forEach((item, index) => {
63
- originalParts.push(jsxRuntime.jsx("div", {
65
+ originalParts.push(/*#__PURE__*/jsxRuntime.jsx("div", {
64
66
  className: "diff-removed-line",
65
67
  children: orig[origArr.indexOf(item, originalParts.length)] ?? item
66
68
  }, `${originalParts.length}-${index}`));
67
69
  });
68
70
  } else if (part.added) {
69
71
  part.value.forEach((item, index) => {
70
- modifiedParts.push(jsxRuntime.jsx("div", {
72
+ modifiedParts.push(/*#__PURE__*/jsxRuntime.jsx("div", {
71
73
  className: "diff-added-line",
72
74
  children: mod[modArr.indexOf(item, modifiedParts.length)] ?? item
73
75
  }, `${modifiedParts.length}-${index}`));
74
76
  });
75
77
  } else {
76
78
  part.value.forEach((item, index) => {
77
- originalParts.push(jsxRuntime.jsx("div", {
79
+ originalParts.push(/*#__PURE__*/jsxRuntime.jsx("div", {
78
80
  className: "diff-unchanged-line",
79
81
  children: orig[origArr.indexOf(item, originalParts.length)] ?? item
80
82
  }, `${originalParts.length}-${index}`));
81
- modifiedParts.push(jsxRuntime.jsx("div", {
83
+ modifiedParts.push(/*#__PURE__*/jsxRuntime.jsx("div", {
82
84
  className: "diff-unchanged-line",
83
85
  children: mod[modArr.indexOf(item, modifiedParts.length)] ?? item
84
86
  }, `${modifiedParts.length}-${index}`));
@@ -93,7 +95,7 @@ const Compare = ({
93
95
  const isStringComparison = typeof original === 'string' && typeof modified === 'string';
94
96
  const isArrayComparison = Array.isArray(original) && Array.isArray(modified);
95
97
  if (!isStringComparison && !isArrayComparison) {
96
- return jsxRuntime.jsx("div", {
98
+ return /*#__PURE__*/jsxRuntime.jsx("div", {
97
99
  className: `compare-error ${className}`,
98
100
  children: "Error: Both inputs must be either strings or arrays of strings"
99
101
  });
@@ -111,31 +113,31 @@ const Compare = ({
111
113
  } = renderArrayDiff(original, modified));
112
114
  }
113
115
  if (viewMode === 'inline') {
114
- return jsxRuntime.jsx("div", {
116
+ return /*#__PURE__*/jsxRuntime.jsx("div", {
115
117
  className: `compare-inline ${className}`,
116
- children: jsxRuntime.jsxs("div", {
118
+ children: /*#__PURE__*/jsxRuntime.jsxs("div", {
117
119
  className: "compare-content",
118
120
  children: [originalParts, modifiedParts]
119
121
  })
120
122
  });
121
123
  }
122
- return jsxRuntime.jsxs("div", {
124
+ return /*#__PURE__*/jsxRuntime.jsxs("div", {
123
125
  className: `compare-side-by-side ${className}`,
124
- children: [jsxRuntime.jsxs("div", {
126
+ children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
125
127
  className: "compare-panel",
126
- children: [jsxRuntime.jsx("div", {
128
+ children: [/*#__PURE__*/jsxRuntime.jsx("div", {
127
129
  className: "compare-header original-header",
128
130
  children: "Original"
129
- }), jsxRuntime.jsx("div", {
131
+ }), /*#__PURE__*/jsxRuntime.jsx("div", {
130
132
  className: "compare-content original-content",
131
133
  children: originalParts
132
134
  })]
133
- }), jsxRuntime.jsxs("div", {
135
+ }), /*#__PURE__*/jsxRuntime.jsxs("div", {
134
136
  className: "compare-panel",
135
- children: [jsxRuntime.jsx("div", {
137
+ children: [/*#__PURE__*/jsxRuntime.jsx("div", {
136
138
  className: "compare-header modified-header",
137
139
  children: "Modified"
138
- }), jsxRuntime.jsx("div", {
140
+ }), /*#__PURE__*/jsxRuntime.jsx("div", {
139
141
  className: "compare-content modified-content",
140
142
  children: modifiedParts
141
143
  })]
package/dist/cjs/index.js.map CHANGED
@@ -1 +1 @@
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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"}
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 CHANGED
@@ -1,5 +1,6 @@
1
- import { jsx, jsxs } from 'react/jsx-runtime';
2
1
  import { diffWords, diffArrays } from 'diff';
2
+ import 'react';
3
+ import { jsx, jsxs } from 'react/jsx-runtime';
3
4
 
4
5
  const Compare = ({
5
6
  original,
@@ -17,21 +18,21 @@ const Compare = ({
17
18
  const modifiedParts = [];
18
19
  for (const part of diff) {
19
20
  if (part.removed) {
20
- originalParts.push(jsx("span", {
21
+ originalParts.push(/*#__PURE__*/jsx("span", {
21
22
  className: "diff-removed",
22
23
  children: part.value
23
24
  }, originalParts.length));
24
25
  } else if (part.added) {
25
- modifiedParts.push(jsx("span", {
26
+ modifiedParts.push(/*#__PURE__*/jsx("span", {
26
27
  className: "diff-added",
27
28
  children: part.value
28
29
  }, modifiedParts.length));
29
30
  } else {
30
- originalParts.push(jsx("span", {
31
+ originalParts.push(/*#__PURE__*/jsx("span", {
31
32
  className: "diff-unchanged",
32
33
  children: part.value
33
34
  }, originalParts.length));
34
- modifiedParts.push(jsx("span", {
35
+ modifiedParts.push(/*#__PURE__*/jsx("span", {
35
36
  className: "diff-unchanged",
36
37
  children: part.value
37
38
  }, modifiedParts.length));
@@ -42,6 +43,7 @@ const Compare = ({
42
43
  modifiedParts
43
44
  };
44
45
  };
46
+
45
47
  // Handle array comparison
46
48
  const renderArrayDiff = (orig, mod) => {
47
49
  let origArr = orig;
@@ -56,25 +58,25 @@ const Compare = ({
56
58
  for (const part of diff) {
57
59
  if (part.removed) {
58
60
  part.value.forEach((item, index) => {
59
- originalParts.push(jsx("div", {
61
+ originalParts.push(/*#__PURE__*/jsx("div", {
60
62
  className: "diff-removed-line",
61
63
  children: orig[origArr.indexOf(item, originalParts.length)] ?? item
62
64
  }, `${originalParts.length}-${index}`));
63
65
  });
64
66
  } else if (part.added) {
65
67
  part.value.forEach((item, index) => {
66
- modifiedParts.push(jsx("div", {
68
+ modifiedParts.push(/*#__PURE__*/jsx("div", {
67
69
  className: "diff-added-line",
68
70
  children: mod[modArr.indexOf(item, modifiedParts.length)] ?? item
69
71
  }, `${modifiedParts.length}-${index}`));
70
72
  });
71
73
  } else {
72
74
  part.value.forEach((item, index) => {
73
- originalParts.push(jsx("div", {
75
+ originalParts.push(/*#__PURE__*/jsx("div", {
74
76
  className: "diff-unchanged-line",
75
77
  children: orig[origArr.indexOf(item, originalParts.length)] ?? item
76
78
  }, `${originalParts.length}-${index}`));
77
- modifiedParts.push(jsx("div", {
79
+ modifiedParts.push(/*#__PURE__*/jsx("div", {
78
80
  className: "diff-unchanged-line",
79
81
  children: mod[modArr.indexOf(item, modifiedParts.length)] ?? item
80
82
  }, `${modifiedParts.length}-${index}`));
@@ -89,7 +91,7 @@ const Compare = ({
89
91
  const isStringComparison = typeof original === 'string' && typeof modified === 'string';
90
92
  const isArrayComparison = Array.isArray(original) && Array.isArray(modified);
91
93
  if (!isStringComparison && !isArrayComparison) {
92
- return jsx("div", {
94
+ return /*#__PURE__*/jsx("div", {
93
95
  className: `compare-error ${className}`,
94
96
  children: "Error: Both inputs must be either strings or arrays of strings"
95
97
  });
@@ -107,31 +109,31 @@ const Compare = ({
107
109
  } = renderArrayDiff(original, modified));
108
110
  }
109
111
  if (viewMode === 'inline') {
110
- return jsx("div", {
112
+ return /*#__PURE__*/jsx("div", {
111
113
  className: `compare-inline ${className}`,
112
- children: jsxs("div", {
114
+ children: /*#__PURE__*/jsxs("div", {
113
115
  className: "compare-content",
114
116
  children: [originalParts, modifiedParts]
115
117
  })
116
118
  });
117
119
  }
118
- return jsxs("div", {
120
+ return /*#__PURE__*/jsxs("div", {
119
121
  className: `compare-side-by-side ${className}`,
120
- children: [jsxs("div", {
122
+ children: [/*#__PURE__*/jsxs("div", {
121
123
  className: "compare-panel",
122
- children: [jsx("div", {
124
+ children: [/*#__PURE__*/jsx("div", {
123
125
  className: "compare-header original-header",
124
126
  children: "Original"
125
- }), jsx("div", {
127
+ }), /*#__PURE__*/jsx("div", {
126
128
  className: "compare-content original-content",
127
129
  children: originalParts
128
130
  })]
129
- }), jsxs("div", {
131
+ }), /*#__PURE__*/jsxs("div", {
130
132
  className: "compare-panel",
131
- children: [jsx("div", {
133
+ children: [/*#__PURE__*/jsx("div", {
132
134
  className: "compare-header modified-header",
133
135
  children: "Modified"
134
- }), jsx("div", {
136
+ }), /*#__PURE__*/jsx("div", {
135
137
  className: "compare-content modified-content",
136
138
  children: modifiedParts
137
139
  })]
package/dist/esm/index.js.map CHANGED
@@ -1 +1 @@
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":";;;AAYO,MAAMA,OAAO,GAA2BA,CAAC;EAC9CC,QAAQ;EACRC,QAAQ;AACRC,EAAAA,SAAS,GAAG,EAAE;AACdC,EAAAA,QAAQ,GAAG,cAAc;EACzBC,aAAa,GAAG,IAAI;AACrB,CAAA,KAAI;AACH;AACA,EAAA,MAAMC,gBAAgB,GAAGA,CAACC,IAAY,EAAEC,GAAW,KAAI;AACrD,IAAA,MAAMC,IAAI,GAAGC,SAAS,CAACH,IAAI,EAAEC,GAAG,EAAE;AAAEG,MAAAA,UAAU,EAAE,CAACN;AAAa,KAAE,CAAC;IACjE,MAAMO,aAAa,GAAU,EAAE;IAC/B,MAAMC,aAAa,GAAU,EAAE;AAC/B,IAAA,KAAK,MAAMC,IAAI,IAAIL,IAAI,EAAE;MACvB,IAAIK,IAAI,CAACC,OAAO,EAAE;AAChBH,QAAAA,aAAa,CAACI,IAAI,CAChBC,GAAiC,CAAA,MAAA,EAAA;AAAAd,UAAAA,SAAS,EAAC,cAAc;UAAAe,QAAA,EACtDJ,IAAI,CAACK;AADG,SAAA,EAAAP,aAAa,CAACQ,MAAM,CAExB,CACR;AACH,OAAC,MAAM,IAAIN,IAAI,CAACO,KAAK,EAAE;AACrBR,QAAAA,aAAa,CAACG,IAAI,CAChBC,GAAiC,CAAA,MAAA,EAAA;AAAAd,UAAAA,SAAS,EAAC,YAAY;UAAAe,QAAA,EACpDJ,IAAI,CAACK;AADG,SAAA,EAAAN,aAAa,CAACO,MAAM,CAExB,CACR;AACH,OAAC,MAAM;AACLR,QAAAA,aAAa,CAACI,IAAI,CAChBC,GAAiC,CAAA,MAAA,EAAA;AAAAd,UAAAA,SAAS,EAAC,gBAAgB;UAAAe,QAAA,EACxDJ,IAAI,CAACK;AADG,SAAA,EAAAP,aAAa,CAACQ,MAAM,CAExB,CACR;AACDP,QAAAA,aAAa,CAACG,IAAI,CAChBC,GAAiC,CAAA,MAAA,EAAA;AAAAd,UAAAA,SAAS,EAAC,gBAAgB;UAAAe,QAAA,EACxDJ,IAAI,CAACK;AADG,SAAA,EAAAN,aAAa,CAACO,MAAM,CAExB,CACR;AACH;AACF;IACA,OAAO;MAAER,aAAa;AAAEC,MAAAA;KAAe;GACxC;AAED;AACA,EAAA,MAAMS,eAAe,GAAGA,CAACf,IAAc,EAAEC,GAAa,KAAI;IACxD,IAAIe,OAAO,GAAGhB,IAAI;IAClB,IAAIiB,MAAM,GAAGhB,GAAG;IAChB,IAAI,CAACH,aAAa,EAAE;AAClBkB,MAAAA,OAAO,GAAGhB,IAAI,CAACkB,GAAG,CAAEC,CAAC,IAAM,OAAOA,CAAC,KAAK,QAAQ,GAAGA,CAAC,CAACC,WAAW,EAAE,GAAGD,CAAE,CAAC;AACxEF,MAAAA,MAAM,GAAGhB,GAAG,CAACiB,GAAG,CAAEC,CAAC,IAAM,OAAOA,CAAC,KAAK,QAAQ,GAAGA,CAAC,CAACC,WAAW,EAAE,GAAGD,CAAE,CAAC;AACxE;AACA,IAAA,MAAMjB,IAAI,GAAGmB,UAAU,CAACL,OAAO,EAAEC,MAAM,CAAC;IACxC,MAAMZ,aAAa,GAAU,EAAE;IAC/B,MAAMC,aAAa,GAAU,EAAE;AAC/B,IAAA,KAAK,MAAMC,IAAI,IAAIL,IAAI,EAAE;MACvB,IAAIK,IAAI,CAACC,OAAO,EAAE;QAChBD,IAAI,CAACK,KAAK,CAACU,OAAO,CAAC,CAACC,IAAY,EAAEC,KAAa,KAAI;AACjDnB,UAAAA,aAAa,CAACI,IAAI,CAChBC,GAAA,CAAA,KAAA,EAAA;AAA8Cd,YAAAA,SAAS,EAAC,mBAAmB;AACxEe,YAAAA,QAAA,EAAAX,IAAI,CAACgB,OAAO,CAACS,OAAO,CAACF,IAAI,EAAElB,aAAa,CAACQ,MAAM,CAAC,CAAC,IAAIU;WAD9C,EAAA,GAAGlB,aAAa,CAACQ,MAAM,CAAIW,CAAAA,EAAAA,KAAK,CAAE,CAAA,CAEtC,CACP;AACH,SAAC,CAAC;AACJ,OAAC,MAAM,IAAIjB,IAAI,CAACO,KAAK,EAAE;QACrBP,IAAI,CAACK,KAAK,CAACU,OAAO,CAAC,CAACC,IAAY,EAAEC,KAAa,KAAI;AACjDlB,UAAAA,aAAa,CAACG,IAAI,CAChBC,GAAA,CAAA,KAAA,EAAA;AAA8Cd,YAAAA,SAAS,EAAC,iBAAiB;AACtEe,YAAAA,QAAA,EAAAV,GAAG,CAACgB,MAAM,CAACQ,OAAO,CAACF,IAAI,EAAEjB,aAAa,CAACO,MAAM,CAAC,CAAC,IAAIU;WAD5C,EAAA,GAAGjB,aAAa,CAACO,MAAM,CAAIW,CAAAA,EAAAA,KAAK,CAAE,CAAA,CAEtC,CACP;AACH,SAAC,CAAC;AACJ,OAAC,MAAM;QACLjB,IAAI,CAACK,KAAK,CAACU,OAAO,CAAC,CAACC,IAAY,EAAEC,KAAa,KAAI;AACjDnB,UAAAA,aAAa,CAACI,IAAI,CAChBC,GAAA,CAAA,KAAA,EAAA;AAA8Cd,YAAAA,SAAS,EAAC,qBAAqB;AAC1Ee,YAAAA,QAAA,EAAAX,IAAI,CAACgB,OAAO,CAACS,OAAO,CAACF,IAAI,EAAElB,aAAa,CAACQ,MAAM,CAAC,CAAC,IAAIU;WAD9C,EAAA,GAAGlB,aAAa,CAACQ,MAAM,CAAIW,CAAAA,EAAAA,KAAK,CAAE,CAAA,CAEtC,CACP;AACDlB,UAAAA,aAAa,CAACG,IAAI,CAChBC,GAAA,CAAA,KAAA,EAAA;AAA8Cd,YAAAA,SAAS,EAAC,qBAAqB;AAC1Ee,YAAAA,QAAA,EAAAV,GAAG,CAACgB,MAAM,CAACQ,OAAO,CAACF,IAAI,EAAEjB,aAAa,CAACO,MAAM,CAAC,CAAC,IAAIU;WAD5C,EAAA,GAAGjB,aAAa,CAACO,MAAM,CAAIW,CAAAA,EAAAA,KAAK,CAAE,CAAA,CAEtC,CACP;AACH,SAAC,CAAC;AACJ;AACF;IACA,OAAO;MAAEnB,aAAa;AAAEC,MAAAA;KAAe;GACxC;EAED,MAAMoB,kBAAkB,GAAG,OAAOhC,QAAQ,KAAK,QAAQ,IAAI,OAAOC,QAAQ,KAAK,QAAQ;AACvF,EAAA,MAAMgC,iBAAiB,GAAGC,KAAK,CAACC,OAAO,CAACnC,QAAQ,CAAC,IAAIkC,KAAK,CAACC,OAAO,CAAClC,QAAQ,CAAC;AAE5E,EAAA,IAAI,CAAC+B,kBAAkB,IAAI,CAACC,iBAAiB,EAAE;IAC7C,OACEjB;MAAKd,SAAS,EAAE,CAAiBA,cAAAA,EAAAA,SAAS,CAAE,CAAA;AAEtCe,MAAAA,QAAA,EAAA;AAAA,KAAA,CAAA;AAEV;EAEA,IAAIN,aAAoB,EAAEC,aAAoB;AAC9C,EAAA,IAAIoB,kBAAkB,EAAE;IACtB,CAAC;MAAErB,aAAa;AAAEC,MAAAA;AAAe,KAAA,GAAGP,gBAAgB,CAACL,QAAkB,EAAEC,QAAkB,CAAC;AAC9F,GAAC,MAAM;IACL,CAAC;MAAEU,aAAa;AAAEC,MAAAA;AAAe,KAAA,GAAGS,eAAe,CAACrB,QAAoB,EAAEC,QAAoB,CAAC;AACjG;EAEA,IAAIE,QAAQ,KAAK,QAAQ,EAAE;IACzB,OACEa,GAAK,CAAA,KAAA,EAAA;MAAAd,SAAS,EAAE,CAAkBA,eAAAA,EAAAA,SAAS,CAAE,CAAA;AAC3Ce,MAAAA,QAAA,EAAAmB,IAAA,CAAA,KAAA,EAAA;AAAKlC,QAAAA,SAAS,EAAC,iBAAiB;mBAC7BS,aAAa,EACbC,aAAa;OACV;AAAA,KAAA,CACF;AAEV;EAEA,OACEwB;IAAKlC,SAAS,EAAE,CAAwBA,qBAAAA,EAAAA,SAAS,CAAE,CAAA;AACjDe,IAAAA,QAAA,EAAA,CAAAmB,IAAA,CAAA,KAAA,EAAA;AAAKlC,MAAAA,SAAS,EAAC,eAAe;AAC5Be,MAAAA,QAAA,EAAA,CAAAD,GAAA,CAAA,KAAA,EAAA;AAAKd,QAAAA,SAAS,EAAC,gCAAgC;;QAAe,EAC9Dc,GAAA,CAAA,KAAA,EAAA;AAAKd,QAAAA,SAAS,EAAC,kCAAkC;AAAAe,QAAAA,QAAA,EAC9CN;AACG,OAAA,CAAA;AAAA,KAAA,CACF,EACNyB,IAAK,CAAA,KAAA,EAAA;AAAAlC,MAAAA,SAAS,EAAC,eAAe;AAAAe,MAAAA,QAAA,EAAA,CAC5BD,GAAK,CAAA,KAAA,EAAA;AAAAd,QAAAA,SAAS,EAAC,gCAAgC;;QAAe,EAC9Dc,GAAA,CAAA,KAAA,EAAA;AAAKd,QAAAA,SAAS,EAAC,kCAAkC;AAAAe,QAAAA,QAAA,EAC9CL;AACG,OAAA,CAAA;AAAA,KAAA,CACF;AACF,GAAA,CAAA;AAEV;;;;"}
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/styles.css ADDED
@@ -0,0 +1,132 @@
1
+ /* Compare.css */
2
+ .compare-side-by-side {
3
+ display: flex;
4
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
5
+ 'Open Sans', 'Helvetica Neue', sans-serif;
6
+ border: 1px solid #ddd;
7
+ border-radius: 6px;
8
+ overflow: hidden;
9
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
10
+ }
11
+
12
+ .compare-inline {
13
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
14
+ 'Open Sans', 'Helvetica Neue', sans-serif;
15
+ border: 1px solid #ddd;
16
+ border-radius: 6px;
17
+ overflow: hidden;
18
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
19
+ padding: 16px;
20
+ }
21
+
22
+ .compare-panel {
23
+ flex: 1;
24
+ display: flex;
25
+ flex-direction: column;
26
+ }
27
+
28
+ .compare-panel:first-child {
29
+ border-right: 1px solid #ddd;
30
+ }
31
+
32
+ .compare-header {
33
+ padding: 12px 16px;
34
+ background-color: #f6f8fa;
35
+ border-bottom: 1px solid #ddd;
36
+ font-weight: 600;
37
+ font-size: 14px;
38
+ color: #24292e;
39
+ }
40
+
41
+ .original-header {
42
+ background-color: #ffeef0;
43
+ color: #d73a49;
44
+ }
45
+
46
+ .modified-header {
47
+ background-color: #e6ffec;
48
+ color: #28a745;
49
+ }
50
+
51
+ .compare-content {
52
+ padding: 16px;
53
+ line-height: 1.5;
54
+ min-height: 100px;
55
+ flex: 1;
56
+ }
57
+
58
+ .original-content {
59
+ background-color: #fefefe;
60
+ }
61
+
62
+ .modified-content {
63
+ background-color: #fefefe;
64
+ }
65
+
66
+ /* String diff styling */
67
+ .diff-removed {
68
+ background-color: #ffeef0;
69
+ color: #d73a49;
70
+ text-decoration: line-through;
71
+ padding: 2px 4px;
72
+ border-radius: 3px;
73
+ margin: 0 1px;
74
+ }
75
+
76
+ .diff-added {
77
+ background-color: #e6ffec;
78
+ color: #28a745;
79
+ padding: 2px 4px;
80
+ border-radius: 3px;
81
+ margin: 0 1px;
82
+ }
83
+
84
+ .diff-unchanged {
85
+ /* No special styling for unchanged text */
86
+ }
87
+
88
+ /* Array diff styling */
89
+ .diff-removed-line {
90
+ background-color: #ffeef0;
91
+ color: #d73a49;
92
+ padding: 4px 8px;
93
+ margin: 2px 0;
94
+ border-radius: 3px;
95
+ border-left: 3px solid #d73a49;
96
+ }
97
+
98
+ .diff-added-line {
99
+ background-color: #e6ffec;
100
+ color: #28a745;
101
+ padding: 4px 8px;
102
+ margin: 2px 0;
103
+ border-radius: 3px;
104
+ border-left: 3px solid #28a745;
105
+ }
106
+
107
+ .diff-unchanged-line {
108
+ padding: 4px 8px;
109
+ margin: 2px 0;
110
+ color: #24292e;
111
+ }
112
+
113
+ .compare-error {
114
+ padding: 16px;
115
+ background-color: #ffeef0;
116
+ border: 1px solid #d73a49;
117
+ border-radius: 6px;
118
+ color: #d73a49;
119
+ font-weight: 500;
120
+ }
121
+
122
+ /* Responsive design */
123
+ @media (max-width: 768px) {
124
+ .compare-side-by-side {
125
+ flex-direction: column;
126
+ }
127
+
128
+ .compare-panel:first-child {
129
+ border-right: none;
130
+ border-bottom: 1px solid #ddd;
131
+ }
132
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@crashbytes/react-version-compare",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "A React component for comparing strings and arrays with precise word-level and item-level highlighting of differences.",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
@@ -13,7 +13,7 @@
13
13
  "README.md"
14
14
  ],
15
15
  "scripts": {
16
- "build": "rollup -c",
16
+ "build": "rollup -c && cp src/styles/Compare.css dist/styles.css",
17
17
  "dev": "rollup -c -w",
18
18
  "test": "jest",
19
19
  "test:watch": "jest --watch",
@@ -22,7 +22,11 @@
22
22
  "lint": "eslint src --ext .ts,.tsx",
23
23
  "type-check": "tsc --noEmit",
24
24
  "demo": "vite",
25
- "build-demo": "vite build"
25
+ "build-demo": "vite build",
26
+ "storybook": "storybook dev -p 6006",
27
+ "build-storybook": "storybook build",
28
+ "storybook:build": "storybook build",
29
+ "storybook:deploy": "storybook build && gh-pages -d storybook-static"
26
30
  },
27
31
  "keywords": [
28
32
  "react",
@@ -63,6 +67,9 @@
63
67
  "@rollup/plugin-commonjs": "^28.0.3",
64
68
  "@rollup/plugin-node-resolve": "^16.0.1",
65
69
  "@rollup/plugin-typescript": "^12.1.2",
70
+ "@storybook/addon-docs": "^9.0.15",
71
+ "@storybook/addon-onboarding": "^9.0.15",
72
+ "@storybook/react-vite": "^9.0.15",
66
73
  "@testing-library/jest-dom": "^6.1.0",
67
74
  "@testing-library/react": "^14.0.0",
68
75
  "@testing-library/user-event": "^14.5.0",
@@ -71,6 +78,7 @@
71
78
  "@types/react-dom": "^18.2.0",
72
79
  "@vitejs/plugin-react": "^4.6.0",
73
80
  "babel-jest": "^29.7.0",
81
+ "gh-pages": "^6.3.0",
74
82
  "identity-obj-proxy": "^3.0.0",
75
83
  "jest": "^29.7.0",
76
84
  "jest-environment-jsdom": "^29.7.0",
@@ -80,7 +88,8 @@
80
88
  "rollup-plugin-dts": "^6.2.1",
81
89
  "rollup-plugin-peer-deps-external": "^2.2.4",
82
90
  "rollup-plugin-postcss": "^4.0.2",
91
+ "storybook": "^9.0.15",
83
92
  "typescript": "^5.8.3",
84
93
  "vite": "^7.0.2"
85
94
  }
86
- }
95
+ }