[UIK-3464][time-picker] rewrote component to ts/refactoring time picker component/added unit tests for core time picker elements

semcore/core/__tests__/decorators.test.ts

@@ -1,7 +1,7 @@
 import { describe, it, expect, vi, Test } from '@semcore/testing-utils/vitest';
 
+import propsObserver from '../src/decorators/propsObserver';
 import reactive from '../src/decorators/reactive';
-import trackPropsChanges from '../src/decorators/trackPropsChanges';
 
 interface TestProps {
   name: string;
@@ -31,7 +31,7 @@ describe('@reactive', () => {
       class TestClass {
         name = 'TestInstance';
 
-        @reactive(function (this: TestClass) {
+        @reactive(function () {
           capturedThis = this;
         })
         value = 10;
@@ -78,6 +78,7 @@ describe('@reactive', () => {
       expect(callback).toHaveBeenCalledWith('name', 'Jane');
       expect(callback).toHaveBeenCalledTimes(1);
     });
+
     it('should NOT call callback when non-watched field changes', () => {
       const callback = vi.fn();
 
@@ -118,7 +119,7 @@ describe('@reactive', () => {
       class TestClass {
         id = 'test-123';
 
-        @reactive(['value'], function (this: TestClass) {
+        @reactive(['value'], function () {
           capturedThis = this;
         })
         readonly data = { value: 0 };
@@ -193,16 +194,17 @@ describe('@reactive', () => {
 
       class TestClass {
         @reactive([], callback)
-        readonly data = { value: 0 };
+        readonly data = { value: 0, name: 'test' };
       }
 
       const instance = new TestClass();
       instance.data.value = 42;
+      instance.data.name = 'updated name';
 
-      expect(callback).toHaveBeenCalledOnce();
+      expect(callback).toHaveBeenCalledTimes(2);
     });
 
-    it('should work when setting same value multiple times', () => {
+    it('should call only once for the same value', () => {
       const callback = vi.fn();
 
       class TestClass {
@@ -220,12 +222,12 @@ describe('@reactive', () => {
   });
 });
 
-describe('@trackPropsChanges', () => {
+describe('@propsObserver', () => {
   describe('Basic functionality', () => {
     it('should track specified props changes', () => {
       const onPropsChangeSpy = vi.fn();
 
-      @trackPropsChanges(['name', 'age'])
+      @propsObserver(['name', 'age'])
       class TestComponent {
         props: TestProps;
 
@@ -257,7 +259,7 @@ describe('@trackPropsChanges', () => {
     it('should detect multiple props changes', () => {
       const onPropsChangeSpy = vi.fn();
 
-      @trackPropsChanges(['name', 'age'])
+      @propsObserver(['name', 'age'])
       class TestComponent {
         props: TestProps;
 
@@ -286,7 +288,7 @@ describe('@trackPropsChanges', () => {
     it('should not call onPropsChange when no tracked props changed', () => {
       const onPropsChangeSpy = vi.fn();
 
-      @trackPropsChanges(['name'])
+      @propsObserver(['name'])
       class TestComponent {
         props: TestProps;
 
@@ -321,7 +323,7 @@ describe('@trackPropsChanges', () => {
         user: { name: string };
       }
 
-      @trackPropsChanges(['user'])
+      @propsObserver(['user'])
       class TestComponent {
         props: ObjectProps;
 
@@ -358,7 +360,7 @@ describe('@trackPropsChanges', () => {
         items: string[];
       }
 
-      @trackPropsChanges(['items'])
+      @propsObserver(['items'])
       class TestComponent {
         props: ArrayProps;
 
@@ -390,7 +392,7 @@ describe('@trackPropsChanges', () => {
     it('should handle empty propsToWatch array', () => {
       const onPropsChangeSpy = vi.fn();
 
-      @trackPropsChanges([])
+      @propsObserver([])
       class TestComponent {
         props: TestProps;
 
@@ -408,19 +410,18 @@ describe('@trackPropsChanges', () => {
       }
 
       const component = new TestComponent({ name: 'John', age: 30 });
-
       component.render();
 
       component.props = { name: 'Jane', age: 25 };
       component.render();
 
-      expect(onPropsChangeSpy).not.toHaveBeenCalled();
+      expect(onPropsChangeSpy).toHaveBeenCalledTimes(1);
     });
 
     it('should work with multiple renders without prop changes', () => {
       const onPropsChangeSpy = vi.fn();
 
-      @trackPropsChanges(['name'])
+      @propsObserver(['name'])
       class TestComponent {
         props: TestProps;
 
@@ -451,7 +452,7 @@ describe('@trackPropsChanges', () => {
     it('should call onPropsChange before parent render', () => {
       const callOrder: string[] = [];
 
-      @trackPropsChanges(['name'])
+      @propsObserver(['name'])
       class TestComponent {
         props: TestProps;
 

semcore/core/package.json

@@ -305,6 +305,16 @@
       "require": "./lib/utils/use/useScrollBarWidth.js",
       "import": "./lib/utils/use/useScrollBarWidth.mjs",
       "types": "./lib/utils/use/useScrollBarWidth.d.ts"
+    },
+    "./lib/decorators/reactive": {
+      "require": "./lib/decorators/reactive.js",
+      "import": "./lib/decorators/reactive.mjs",
+      "types": "./lib/decorators/reactive.d.ts"
+    },
+    "./lib/decorators/propsObserver": {
+      "require": "./lib/decorators/propsObserver.js",
+      "import": "./lib/decorators/propsObserver.mjs",
+      "types": "./lib/decorators/propsObserver.d.ts"
     }
   },
   "dependencies": {

semcore/core/src/decorators/trackPropsChanges.ts → semcore/core/src/decorators/propsObserver.ts

@@ -1,12 +1,12 @@
-type WatchedProps<Props> = { [key in keyof Props]?: any };
+type WatchedProps<Props> = { [key in keyof Props]?: unknown };
 
-type Constructor<Props> = new (...args: any) => {
+type Constructor<Props> = new (...args: any[]) => {
   props: Props;
   onPropsChange(changedProps: WatchedProps<Props>): void;
-  render(): any;
+  render(): React.ReactNode;
 };
 
-function trackPropsChanges<
+function propsObserver<
   P,
   C extends Constructor<P> = Constructor<P>,
 >(propsToWatch: Array<keyof P>) {
@@ -17,18 +17,20 @@ function trackPropsChanges<
       constructor(...args: any[]) {
         super(...args);
 
-        propsToWatch.reduce((acc, prop) => {
-          acc[prop] = this.props?.[prop];
+        if (!this.props) return;
 
-          return acc;
-        }, watchedProps);
+        const propKeys = propsToWatch.length === 0 ? Object.keys(this.props) as Array<keyof P> : [...propsToWatch];
+
+        propKeys.forEach((prop) => {
+          watchedProps[prop] = this.props[prop];
+        });
       }
 
       onPropsChange(_?: WatchedProps<P>) {
         let shouldCallFunc = false;
         const changedProps: WatchedProps<P> = {};
 
-        propsToWatch.forEach((prop) => {
+        (Object.keys(watchedProps) as Array<keyof P>).forEach((prop) => {
           const isPropValueEqual = Object.is(watchedProps[prop], this.props[prop]);
 
           if (!isPropValueEqual) {
@@ -53,4 +55,4 @@ function trackPropsChanges<
   };
 }
 
-export default trackPropsChanges;
+export default propsObserver;

semcore/core/src/decorators/reactive.ts

@@ -4,7 +4,7 @@ type IsReadonly<This, Property extends keyof This> =
   (<F>() => F extends { -readonly [P in Property]: This[Property] } ? 1 : 2)
     ? false
     : true;
-type Callback<This> = (this: This, field: string | symbol, newValue: any) => void;
+type Callback<This> = (this: This, field: string | symbol, newValue: unknown) => void;
 type ReturnType<
   This,
   Property extends keyof This = keyof This,
@@ -14,7 +14,7 @@ type ReturnType<
     ? (_: undefined, ctx: ClassFieldDecoratorContext<This, This[Property]>) => void
     : never;
 
-const isPrimitiveValue = (value: any) => value !== Object(value);
+const isPrimitiveValue = (value: unknown) => value !== Object(value);
 
 function reactive<This>(cb: Callback<This>): ReturnType<This>;
 function reactive<

semcore/time-picker/__tests__/index.test.tsx

@@ -62,13 +62,6 @@ describe('TimePickerEntity', () => {
 
       expect(entity.hours).toBe('02');
     });
-
-    it('should format 23:59 as 11:59', () => {
-      const entity = new TimePickerEntity('23:59', true);
-
-      expect(entity.hours).toBe('11');
-      expect(entity.minutes).toBe('59');
-    });
   });
 
   describe('24-hour format', () => {
@@ -86,74 +79,32 @@ describe('TimePickerEntity', () => {
 
     it('should convert 12 AM to 00:00 in 24-hour format', () => {
       const entity = new TimePickerEntity('12:00', false);
-      entity.meridiem = 'AM';
 
       expect(entity.hours).toBe('00');
     });
 
     it('should convert 12 PM to 12:00 in 24-hour format', () => {
       const entity = new TimePickerEntity('12:00', false);
-      entity.meridiem = 'PM';
+      entity.toggleMeridiem();
 
       expect(entity.hours).toBe('12');
     });
 
     it('should convert PM hours correctly', () => {
       const entity = new TimePickerEntity('3:00', false);
-      entity.meridiem = 'PM';
+      entity.toggleMeridiem();
 
       expect(entity.hours).toBe('15');
     });
 
     it('should keep AM hours unchanged (except 12)', () => {
       const entity = new TimePickerEntity('9:00', false);
-      entity.meridiem = 'AM';
 
       expect(entity.hours).toBe('09');
     });
   });
 
-  describe('getters and setters', () => {
-    it('should update hours via setter', () => {
-      const entity = new TimePickerEntity('10:00', false);
-      entity.hours = '15';
-
-      expect(entity.hours).toBe('15');
-    });
-
-    it('should update minutes via setter', () => {
-      const entity = new TimePickerEntity('10:00', false);
-      entity.minutes = '45';
-
-      expect(entity.minutes).toBe('45');
-    });
-
-    it('should update meridiem via setter', () => {
-      const entity = new TimePickerEntity('10:00', true);
-      entity.meridiem = 'PM';
-
-      expect(entity.meridiem).toBe('PM');
-    });
-  });
-
   describe('toggleMeridiem', () => {
-    it('should toggle from AM to PM', () => {
-      const entity = new TimePickerEntity('10:00', true);
-
-      entity.toggleMeridiem();
-
-      expect(entity.meridiem).toBe('PM');
-    });
-
-    it('should toggle from PM to AM', () => {
-      const entity = new TimePickerEntity('10:00', true);
-      entity.meridiem = 'PM';
-
-      entity.toggleMeridiem();
-
-      expect(entity.meridiem).toBe('AM');
-    });
-
     it('should toggle multiple times correctly', () => {
       const entity = new TimePickerEntity('10:00', true);
 
@@ -177,21 +128,20 @@ describe('TimePickerEntity', () => {
 
     it('should convert to 24-hour format string when is12Hour is true', () => {
       const entity = new TimePickerEntity('2:30', true);
-      entity.meridiem = 'PM';
+      entity.toggleMeridiem();
 
       expect(entity.toString()).toBe('14:30');
     });
 
     it('should handle midnight (12 AM) conversion', () => {
       const entity = new TimePickerEntity('12:00', true);
-      entity.meridiem = 'AM';
 
       expect(entity.toString()).toBe('00:00');
     });
 
     it('should handle noon (12 PM) conversion', () => {
       const entity = new TimePickerEntity('12:00', true);
-      entity.meridiem = 'PM';
+      entity.toggleMeridiem();
 
       expect(entity.toString()).toBe('12:00');
     });

semcore/time-picker/src/component/PickerFormat/PickerFormat.type.ts

@@ -6,14 +6,14 @@ import type { TimePickerMeridiem } from '../TimePicker/TimePicker.type';
 export type TimePickerFormatProps = BoxProps & {};
 
 export type TimePickerFormatPropsInternal = {
-  /** Internal */
+  /** @Internal */
   getI18nText: ReturnType<typeof useI18n>;
-  /** Internal */
+  /** @Internal */
   size: 'm' | 'l';
-  /** Internal */
+  /** @Internal */
   disabled: boolean;
-  /** Internal */
+  /** @Internal */
   meridiem: TimePickerMeridiem;
-  /** Internal */
+  /** @Internal */
   onClick: (event: React.SyntheticEvent) => void;
 };

semcore/time-picker/src/component/TimePicker/TimePicker.tsx

@@ -1,6 +1,6 @@
 import { createComponent, Component, sstyled, Root } from '@semcore/core';
+import propsObserver from '@semcore/core/lib/decorators/propsObserver';
 import reactive from '@semcore/core/lib/decorators/reactive';
-import trackPropsChanges from '@semcore/core/lib/decorators/trackPropsChanges';
 import i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';
 import { Box } from '@semcore/flex-box';
 import Input from '@semcore/input';
@@ -18,7 +18,7 @@
 import Format from '../PickerFormat/PickerFormat';
 import { Hours, Minutes } from '../PickerInput/PickerInput';
 
-@trackPropsChanges(['value'])
+@propsObserver(['value'])
 class TimePickerRoot extends Component<TimePickerProps, {}, {}, typeof TimePickerRoot.enhance> {
   static displayName = 'TimePicker';
   static style = style;

semcore/time-picker/src/component/TimePicker/TimePicker.type.ts

@@ -23,9 +23,9 @@ export type TimePickerProps = Omit<InputProps, 'size'> & {
 };
 
 export type TimePickerSeparatorProps = {
-  /** Internal */
+  /** @Internal */
   hoursInputRef: React.RefObject<HTMLElement>;
-  /** Internal */
+  /** @Internal */
   disabled?: boolean;
 };