[UIK-5136][chore] experimental implmentation

semcore/core/src/core-types/Component.ts

@@ -52,12 +52,19 @@ type UncontrolledPropValue<V> =
   | ((value: V, e?: any) => void | boolean | V)[]
   | ((e?: any) => void | boolean | V);
 
+type StripDefaultPrefix<K> = K extends `default${infer Rest}` ? Uncapitalize<Rest> : K;
+
 export abstract class Component<
   Props = {},
   Enhance extends readonly ((...args: any[]) => any)[] = [],
   Uncontrolled extends Readonly<{ [key in keyof Props]?: UncontrolledPropValue<Props[key]> }> = never,
   InnerProps = {},
   State = {},
+  DefaultProps extends {
+    [K in keyof DefaultProps]: StripDefaultPrefix<K> extends keyof Props
+      ? Props[StripDefaultPrefix<K>]
+      : never;
+  } = {},
 > extends PureComponent<Props, State> {
   protected uncontrolledProps(): [Uncontrolled] extends [never] ? never : Uncontrolled {
     // @ts-ignore. This is a default value. Should be defined in related classes.
@@ -79,7 +86,12 @@ export abstract class Component<
     return {} as Readonly<
       { Root: RootResult<any> } &
       BaseAsProps<Props, Enhance, InnerProps> &
-      Intergalactic.InternalTypings.EfficientOmit<AllHTMLAttributes<any>, keyof BaseAsProps<Props, Enhance, InnerProps>>
+      Intergalactic.InternalTypings.EfficientOmit<AllHTMLAttributes<any>, keyof BaseAsProps<Props, Enhance, InnerProps>> &
+      {
+        [DefaultPropKey in keyof DefaultProps as StripDefaultPrefix<DefaultPropKey>]: StripDefaultPrefix<DefaultPropKey> extends keyof Props
+          ? Exclude<Props[StripDefaultPrefix<DefaultPropKey>], undefined>
+          : never;
+      }
     >;
   }
 

semcore/slider/src/Slider.tsx

@@ -7,50 +7,69 @@ import React from 'react';
 import type { NSSlider } from './Slider.type';
 import style from './style/slider.shadow.css';
 
-const FALLBACK_MIN_VALUE = 0;
-const FALLBACK_MAX_VALUE = 100;
-const FALLBACK_STEP_VALUE = 1;
-
-const getNumericValue = ({ value, fallback }: { value?: NSSlider.Value; fallback: number }): number => {
-  if (!value) return fallback;
-
-  const numericValue = Number(value);
-
-  return isNaN(numericValue) ? fallback : numericValue;
-};
+const FALLBACK_VALUE = 0;
 
 const convertValueToPercent = (value: number, min: number, max: number) => {
   if (value > max) return 100;
   if (value < min) return 0;
   return ((value - min) / (max - min)) * 100;
 };
 
+type StripDefaultPrefix<K> = K extends `default${infer Rest}` ? Uncapitalize<Rest> : K;
+type DefaultProps<P, DP> = {
+  [K in keyof DP]: StripDefaultPrefix<K> extends keyof P
+    ? P[StripDefaultPrefix<K>]
+    : never
+};
+
+type DefaultPropsValue<P, DP> = [P] extends [never]
+  ? never
+  : [DP] extends [never]
+      ? never
+      : DefaultProps<P, DP> | ((props: P) => DefaultProps<P, DP>);
+
+export function withDefaultProps<
+  P = never,
+  DP = never,
+>(value: NoInfer<DefaultPropsValue<P, DP>>) {
+  return function <T extends new (...args: any[]) => any>(
+    target: T,
+    _context: ClassDecoratorContext<T>,
+  ) {
+    return class extends target {
+      static defaultProps = value;
+    };
+  };
+}
+
+@withDefaultProps<NSSlider.Props, NSSlider.DefaultProps>(() => ({
+  defaultValue: 0,
+  min: 0,
+  max: 100,
+  step: 1,
+  children: (
+    <>
+      <Slider.Bar />
+      <Slider.Knob />
+      <Slider.Options>
+        <Slider.Item />
+      </Slider.Options>
+    </>
+  ),
+}))
 class SliderRoot extends Component<
-  Intergalactic.InternalTypings.InferComponentProps<NSSlider.Component>,
-  [],
-  NSSlider.Handlers
-> {
+    Intergalactic.InternalTypings.InferComponentProps<NSSlider.Component>,
+    [],
+    NSSlider.Handlers,
+    {},
+    {},
+    NSSlider.DefaultProps
+  > {
   static displayName = 'Slider';
   static style = style;
 
   sliderRef = React.createRef() as React.MutableRefObject<HTMLButtonElement | null>;
 
-  static defaultProps = () => ({
-    defaultValue: FALLBACK_MIN_VALUE,
-    min: FALLBACK_MIN_VALUE,
-    max: FALLBACK_MAX_VALUE,
-    step: FALLBACK_STEP_VALUE,
-    children: (
-      <>
-        <Slider.Bar />
-        <Slider.Knob />
-        <Slider.Options>
-          <Slider.Item />
-        </Slider.Options>
-      </>
-    ),
-  });
-
   handleRef = (node: HTMLButtonElement) => {
     this.sliderRef.current = node;
   };
@@ -66,8 +85,8 @@ class SliderRoot extends Component<
 
     return {
       value: this.getNumericValue(),
-      min: getNumericValue({ value: min, fallback: FALLBACK_MIN_VALUE }),
-      max: getNumericValue({ value: max, fallback: FALLBACK_MAX_VALUE }),
+      min,
+      max,
       disabled,
       options,
     };
@@ -78,8 +97,8 @@ class SliderRoot extends Component<
 
     return {
       value: this.getNumericValue(),
-      min: getNumericValue({ value: min, fallback: FALLBACK_MIN_VALUE }),
-      max: getNumericValue({ value: max, fallback: FALLBACK_MAX_VALUE }),
+      min,
+      max,
       disabled,
       options,
     };
@@ -134,7 +153,7 @@ class SliderRoot extends Component<
       const lastOption = options?.[options?.length - 1];
       const resolvedMax = options ? lastOption?.value : max;
       this.handlers.value(resolvedMax, event);
-    } else if (step !== undefined && max !== undefined && min !== undefined) {
+    } else {
       const relativeValue = newLeft / sliderSize;
       const relativeStep = step / (max - min);
       const countSteps = Math.round(relativeValue / relativeStep);
@@ -164,7 +183,7 @@ class SliderRoot extends Component<
   handleSlideStep(event: React.KeyboardEvent<HTMLButtonElement>) {
     event.preventDefault();
 
-    const { min, max, step = FALLBACK_STEP_VALUE, options } = this.asProps;
+    const { min, max, step, options } = this.asProps;
     const direction = event.key === 'ArrowLeft' || event.key === 'ArrowDown' ? -1 : 1;
     let value = this.getNumericValue() + step * direction;
 
@@ -182,7 +201,7 @@ class SliderRoot extends Component<
     event.preventDefault();
 
     const { min, options } = this.asProps;
-    let value: NSSlider.Value = min ?? FALLBACK_MIN_VALUE;
+    let value: NSSlider.Value = min;
 
     if (options) {
       value = options[0].value;
@@ -195,7 +214,7 @@ class SliderRoot extends Component<
     event.preventDefault();
 
     const { max, options } = this.asProps;
-    let value: NSSlider.Value = max ?? FALLBACK_MAX_VALUE;
+    let value: NSSlider.Value = max;
 
     if (options) {
       value = options[options.length - 1].value;
@@ -214,18 +233,17 @@ class SliderRoot extends Component<
       const numericDefault = Number(defaultValue);
       if (!isNaN(numericDefault)) return numericDefault;
 
-      return FALLBACK_MIN_VALUE;
+      return FALLBACK_VALUE;
     }
 
     const index = options.findIndex((option) => option.value === value);
 
     if (index === -1) {
       const numericDefault = Number(defaultValue);
-      return isNaN(numericDefault) ? FALLBACK_MIN_VALUE : numericDefault;
+      return isNaN(numericDefault) ? FALLBACK_VALUE : numericDefault;
     }
 
-    const offset = min ?? FALLBACK_MIN_VALUE;
-    const result = index + offset;
+    const result = index + min;
 
     if (min !== undefined && index < min) return min;
     if (max !== undefined && result > max) return max;

semcore/slider/src/Slider.type.ts

@@ -48,6 +48,14 @@ declare namespace NSSlider {
     options?: NSSlider.Option<V>[];
   };
 
+  type DefaultProps = {
+    defaultValue: number;
+    min: number;
+    max: number;
+    step: number;
+    children: React.ReactNode;
+  };
+
   namespace Knob {
     type Component = typeof Box;
   }