[UIK-5647][input-mask] rewrite component to NS (#3093)

## Changelog

### @semcore/input-mask

#### Changed

- Refactor component types. Deprecated atomic types. Atomic types are
part of `NSInputMask` namespace.

<!--- Provide a general summary of your changes in the Title above -->

## Motivation and Context

Refactor component types. Deprecated atomic types in favor namespaces.
Nothing changed in how component works.

## How has this been tested?

<!--- Please describe in detail how you tested your changes. -->
<!--- For example: -->
<!--- I have added unit tests -->
<!--- I have added Voice Over tests -->
<!--- Code cannot be tested automatically so I have tested it only
manually -->

## Screenshots (if appropriate):

## Types of changes

<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->

- [ ] Bug fix (non-breaking change which fixes an issue).
- [ ] New feature (non-breaking change which adds functionality).
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected).
- [x] Nice improve.

## Checklist:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

- [x] I have updated the documentation accordingly.
- [ ] I have added new tests on added of fixed functionality.

Co-authored-by: Valeria-Zimnitskaya <valeryia.zimnitskaya@semrush.com>

Author: slizhevskyv-semrush

playground/entries/InputMask.tsx

@@ -1,13 +1,13 @@
 import type { NSInput } from '@semcore/ui/input';
-import type { InputMaskValueProps } from '@semcore/ui/input-mask';
+import type { NSInputMask } from '@semcore/ui/input-mask';
 import InputMask from '@semcore/ui/input-mask';
 import React from 'react';
 
 import type { JSXProps } from '../types/JSXProps';
 import type { PlaygroundEntry } from '../types/Playground';
 import createGithubLink from '../utils/createGHLink';
 
-export type InputMaskJSXProps = JSXProps<NSInput.Props & InputMaskValueProps>;
+export type InputMaskJSXProps = JSXProps<NSInput.Props & NSInputMask.Value.Props>;
 
 function getJSX(props: InputMaskJSXProps) {
   return (

semcore/date-picker/src/index.d.ts

@@ -10,7 +10,7 @@ import type Divider from '@semcore/divider';
 import type { DropdownProps, DropdownTriggerProps } from '@semcore/dropdown';
 import type { NSInput } from '@semcore/input';
 import type Input from '@semcore/input';
-import type { InputMaskValueProps } from '@semcore/input-mask';
+import type { NSInputMask } from '@semcore/input-mask';
 import type { TooltipProps } from '@semcore/tooltip';
 import type dayjs from 'dayjs';
 import type { ChangeEvent } from 'react';
@@ -314,7 +314,7 @@ declare const InputTrigger: Intergalactic.Component<
   Value: typeof Input.Value;
   SingleDateInput: Intergalactic.Component<'div', NSInput.Props & SingleDateInputProps> & {
     Indicator: typeof Input.Addon;
-    MaskedInput: Intergalactic.Component<'input', InputMaskValueProps & DatePickerMaskedInputProps>;
+    MaskedInput: Intergalactic.Component<'input', NSInputMask.Value.Props & DatePickerMaskedInputProps>;
   };
 };
 
@@ -329,11 +329,11 @@ declare const RangeInputTrigger: Intergalactic.Component<
     RangeSep: typeof Input.Addon;
     FromMaskedInput: Intergalactic.Component<
       'input',
-      InputMaskValueProps & DatePickerMaskedInputProps
+      NSInputMask.Value.Props & DatePickerMaskedInputProps
     >;
     ToMaskedInput: Intergalactic.Component<
       'input',
-      InputMaskValueProps & DatePickerMaskedInputProps
+      NSInputMask.Value.Props & DatePickerMaskedInputProps
     >;
   };
 };

semcore/input-mask/src/InputMask.tsx

@@ -1,12 +1,6 @@
 import { NeighborLocation, Box, Flex, ScreenReaderOnly } from '@semcore/base-components';
-import {
-  createComponent,
-  Component,
-  sstyled,
-  Root,
-  type PropGetterFn,
-  type Intergalactic,
-} from '@semcore/core';
+import type { Intergalactic } from '@semcore/core';
+import { createComponent, Component, sstyled, Root } from '@semcore/core';
 import fire from '@semcore/core/lib/utils/fire';
 import getInputProps, { inputProps } from '@semcore/core/lib/utils/inputProps';
 import logger from '@semcore/core/lib/utils/logger';
@@ -16,80 +10,9 @@ import Input, { type NSInput } from '@semcore/input';
 import React from 'react';
 import * as mask from 'text-mask-core';
 
+import type { NSInputMask } from './InputMask.type';
 import style from './style/input-mask.shadow.css';
 
-export type IInputMaskAsFn = (rawValue?: string) => string | RegExp[];
-
-export type InputMaskAliases = {
-  [s: string]: RegExp;
-};
-
-export type InputMaskValueProps = NSInput.Value.Props & {
-  /**
-   * Mask for entering text
-   */
-  mask?: string | boolean | IInputMaskAsFn;
-  /**
-   * The property for visibility of the mask
-   * @default false
-   */
-  hideMask?: boolean;
-  /**
-   * This function allows you to change the input value before it is displayed on the screen.
-   */
-  pipe?: (
-    conformedValue: string,
-    config: {
-      rawValue: string;
-    },
-  ) => string | false | { value: string; indexesOfPipedChars: number[] };
-  /** Internal */
-  keepCharPositions?: boolean;
-  /**
-   * The aliases object for the mask values. The key is the symbol used in the mask,
-   * and the value is the regular expression that this symbol must match
-   * @default {'9': /\d/, 'a': /[a-zA-Zа-яА-Я]/, '*': /[\da-zA-Zа-яА-Я]/}
-   */
-  aliases?: InputMaskAliases;
-  /**
-   * Event that is called when the input value fully matches the mask
-   */
-  onSuccess?: (value: string) => void;
-  /**
-   * A field that explains the mask for blind users
-   * */
-  title?: string;
-
-  /** Specifies which props to pass to input element */
-  includeInputProps?: string[];
-
-  /**
-   * Field for describe which symbols will use as mask
-   * @default `{_: true}`
-   */
-  maskOnlySymbols?: Record<string, boolean>;
-
-  /**
-   * Overrids width of the input field
-   */
-  inputW?: string | number;
-
-  /**
-   * Aria role for input
-   */
-  inputRole?: string;
-};
-
-type InputMaskCtx = {
-  getInputProps: PropGetterFn;
-  getValueProps: PropGetterFn;
-};
-
-type InputMaskComponent = Intergalactic.Component<'div', NSInput.Props, InputMaskCtx> & {
-  Value: Intergalactic.Component<'input', InputMaskValueProps>;
-  Addon: typeof Input.Addon;
-};
-
 const { createTextMaskInputElement } = mask;
 
 export function getAfterPositionValue(value: string, mask: any = ''): number {
@@ -106,7 +29,9 @@ export function getAfterPositionValue(value: string, mask: any = ''): number {
   return afterPotionValue;
 }
 
-class InputMask extends Component<NSInput.Props> {
+class InputMask extends Component<
+  Intergalactic.InternalTypings.InferComponentProps<NSInputMask.Component>
+> {
   static displayName = 'InputMask';
   static style = style;
 
@@ -115,8 +40,12 @@ class InputMask extends Component<NSInput.Props> {
   }
 }
 
-class Value extends Component<InputMaskValueProps, typeof Value.enhance, { value: Array<(value?: string) => string> }> {
-  static defaultProps = {
+class Value extends Component<
+  Intergalactic.InternalTypings.InferComponentProps<NSInputMask.Value.Component>,
+  typeof Value.enhance,
+  NSInputMask.Value.Handlers
+> {
+  static defaultProps: NSInputMask.Value.DefaultProps = {
     includeInputProps: inputProps,
     defaultValue: '',
     hideMask: false,
@@ -138,16 +67,7 @@ class Value extends Component<InputMaskValueProps, typeof Value.enhance, { value
   textMaskCoreInstance: any = undefined;
   usedMask: any = undefined;
   prevConfirmedValue: any = undefined;
-  state: {
-    lastConformed:
-      | {
-        all: string;
-        userInput: string;
-        maskOnly: string;
-      }
-      | undefined;
-    maskWidth: number | undefined;
-  } = {
+  state: NSInputMask.Value.State = {
     lastConformed: undefined,
     maskWidth: undefined,
   };
@@ -159,7 +79,7 @@ class Value extends Component<InputMaskValueProps, typeof Value.enhance, { value
     });
   }
 
-  componentDidUpdate(prevProps: any) {
+  componentDidUpdate(prevProps: typeof this.asProps) {
     const maskConfigProps = ['mask', 'hideMask', 'pipe', 'keepCharPositions'] as const;
     const maskConfigChanged = maskConfigProps.some(
       (prop) => this.asProps[prop] !== prevProps[prop],
@@ -403,7 +323,7 @@ class Value extends Component<InputMaskValueProps, typeof Value.enhance, { value
  *
  * {@link https://developer.semrush.com/intergalactic/components/input-mask/input-mask-api/|API} | {@link https://developer.semrush.com/intergalactic/components/input-mask/input-mask-code/|Examples}
  */
-export default createComponent<InputMaskComponent, typeof InputMask>(InputMask, {
+export default createComponent<NSInputMask.Component, typeof InputMask>(InputMask, {
   Value,
   Addon: Input.Addon,
 });

semcore/input-mask/src/InputMask.type.ts

@@ -0,0 +1,119 @@
+import type { PropGetterFn, Intergalactic } from '@semcore/core';
+import type { NSInput } from '@semcore/input';
+
+declare namespace NSInputMask {
+  type Props = NSInput.Props;
+  type Ctx = {
+    getInputProps: PropGetterFn;
+    getValueProps: PropGetterFn;
+  };
+
+  namespace Value {
+    type Props = NSInput.Value.Props & {
+      /**
+       * Mask for entering text
+       */
+      mask?: string | boolean | ((rawValue?: string) => string | RegExp[]);
+      /**
+       * The property for visibility of the mask
+       * @default false
+       */
+      hideMask?: boolean;
+      /**
+       * This function allows you to change the input value before it is displayed on the screen.
+       */
+      pipe?: (
+        conformedValue: string,
+        config: {
+          rawValue: string;
+        },
+      ) => string | false | { value: string; indexesOfPipedChars: number[] };
+      /** Internal */
+      keepCharPositions?: boolean;
+      /**
+       * The aliases object for the mask values. The key is the symbol used in the mask,
+       * and the value is the regular expression that this symbol must match
+       * @default {'9': /\d/, 'a': /[a-zA-Zа-яА-Я]/, '*': /[\da-zA-Zа-яА-Я]/}
+       */
+      aliases?: {
+        [s: string]: RegExp;
+      };
+      /**
+       * Event that is called when the input value fully matches the mask
+       */
+      onSuccess?: (value: string) => void;
+      /**
+       * A field that explains the mask for blind users
+       * */
+      title?: string;
+
+      /** Specifies which props to pass to input element */
+      includeInputProps?: string[];
+
+      /**
+       * Field for describe which symbols will use as mask
+       * @default `{_: true}`
+       */
+      maskOnlySymbols?: Record<string, boolean>;
+
+      /**
+       * Overrids width of the input field
+       */
+      inputW?: string | number;
+
+      /**
+       * Aria role for input
+       */
+      inputRole?: string;
+    };
+    type DefaultProps = {
+      includeInputProps: Array<string>;
+      defaultValue: '';
+      hideMask: false;
+      keepCharPositions: false;
+      aliases: {
+        '9': RegExp;
+        'a': RegExp;
+        '*': RegExp;
+      };
+      maskOnlySymbols: {
+        _: boolean;
+      };
+    };
+    type Handlers = {
+      value: Array<(value?: string) => string>;
+    };
+    type State = {
+      lastConformed:
+        | {
+          all: string;
+          userInput: string;
+          maskOnly: string;
+        }
+        | undefined;
+      maskWidth: number | undefined;
+    };
+
+    type Component = Intergalactic.Component<'input', Props>;
+  }
+
+  namespace Addon {
+    type Component = NSInput.Addon.Component;
+  }
+
+  type Component = Intergalactic.Component<'div', Props, Ctx> & {
+    Value: Value.Component;
+    Addon: Addon.Component;
+  };
+}
+
+/** @deprecated It will be removed in v19. */
+export type InputMaskValueProps = NSInputMask.Value.Props;
+/** @deprecated It will be removed in v19. */
+export type InputMaskAliases = {
+  [s: string]: RegExp;
+};
+/** @deprecated It will be removed in v19. */
+export type IInputMaskAsFn = (rawValue?: string) => string | RegExp[];
+
+export type { NSInputMask };

semcore/input-mask/src/index.tsx

@@ -1,2 +1,3 @@
 export { default } from './InputMask';
 export * from './InputMask';
+export * from './InputMask.type';

website/docs/components/input-mask/input-mask-api.md

@@ -23,7 +23,7 @@ import InputMask from '@semcore/ui/input-mask';
 <InputMask.Value />;
 ```
 
-<TypesView type="InputMaskValueProps" :types={...types} />
+<TypesView type="NSInputMask.Value.Props" :types={...types} />
 
 ## InputMask.Addon