Merge pull request #124 from turistikrota/util/find-diff

util/find-diff: add the findDiff utility

apps/docs/package.json

@@ -14,7 +14,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@turistikrota/ui": "^0.2.2",
+    "@turistikrota/ui": "^0.2.4",
     "boxicons": "^2.1.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

apps/docs/src/stories/utils/find-diff/FindDiff.mdx

@@ -0,0 +1,27 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title='Utils/Find Diff' />
+
+# Find Diff
+
+Find diff between two objects
+
+## findDiff(obj1, obj2)
+
+```js
+import { findDiff } from '@turistikrota/ui/utils'
+
+const obj1 = { a: 1, b: 2, c: 3 }
+const obj2 = { a: 1, b: 2, c: 3 }
+
+findDiff(obj1, obj2) // {}
+
+const obj3 = { a: 1, b: 2, c: 3 }
+const obj4 = { a: 1, b: 2, c: 4 }
+
+findDiff(obj3, obj4) // { c: 4 }
+
+const obj1 = { a: [1, 2], b: 3 }
+const obj2 = { a: [1, 2, 3], b: 4 }
+const result = findDiff(obj1, obj2) // { a: [1, 2, 3], b: 4 }
+```

apps/docs/src/stories/utils/find-diff/FindDiff.test.tsx

@@ -0,0 +1,38 @@
+import { findDiff } from '@turistikrota/ui/utils'
+
+describe('findDiff', () => {
+  it('should return an empty object for two identical flat objects', () => {
+    const obj1 = { a: 1, b: 2 }
+    const obj2 = { a: 1, b: 2 }
+    const result = findDiff(obj1, obj2)
+    expect(result).toEqual({})
+  })
+
+  it('should return the differences for two flat objects', () => {
+    const obj1 = { a: 1, b: 2 }
+    const obj2 = { a: 2, b: 2, c: 3 }
+    const result = findDiff(obj1, obj2)
+    expect(result).toEqual({ a: 2, c: 3 })
+  })
+
+  it('should return the differences for nested objects', () => {
+    const obj1 = { a: 1, nested: { b: 2, c: 3 } }
+    const obj2 = { a: 1, nested: { b: 3, d: 4 } }
+    const result = findDiff(obj1, obj2)
+    expect(result).toEqual({ nested: { b: 3, d: 4 } })
+  })
+
+  it('should return the differences when an item is removed', () => {
+    const obj1 = { a: 1, b: 2, c: 3 }
+    const obj2 = { a: 1, b: 2 }
+    const result = findDiff(obj1, obj2)
+    expect(result).toEqual({ c: undefined })
+  })
+
+  it('should handle arrays correctly', () => {
+    const obj1 = { a: [1, 2], b: 3 }
+    const obj2 = { a: [1, 2, 3], b: 4 }
+    const result = findDiff(obj1, obj2)
+    expect(result).toEqual({ a: [1, 2, 3], b: 4 })
+  })
+})

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@turistikrota/ui",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "the turistikrota ui library for React",
   "main": "./cjs/index.js",
   "module": "./index.js",

packages/ui/src/utils/index.ts

@@ -46,3 +46,34 @@ export const deepMerge = <T extends AnyObject, S extends AnyObject>(target: T, s
 
   return merged as T & S
 }
+
+type NestedObject = { [key: string]: NestedValue }
+type NestedValue = string | number | boolean | null | NestedObject | NestedValue[]
+
+export function findDiff(obj1: NestedObject, obj2: NestedObject): NestedObject {
+  const diff: NestedObject = {}
+
+  const keys = new Set([...Object.keys(obj1), ...Object.keys(obj2)])
+
+  for (const key of keys) {
+    if (Array.isArray(obj1[key]) && Array.isArray(obj2[key])) {
+      if (JSON.stringify(obj1[key]) !== JSON.stringify(obj2[key])) {
+        diff[key] = obj2[key]
+      }
+    } else if (
+      typeof obj1[key] === 'object' &&
+      obj1[key] !== null &&
+      typeof obj2[key] === 'object' &&
+      obj2[key] !== null
+    ) {
+      const nestedDiff = findDiff(obj1[key] as NestedObject, obj2[key] as NestedObject)
+      if (Object.keys(nestedDiff).length > 0) {
+        diff[key] = nestedDiff
+      }
+    } else if (obj1[key] !== obj2[key]) {
+      diff[key] = obj2[key]
+    }
+  }
+
+  return diff
+}