From b33d89537dd54f433ece1381a59533a33a2c8e76 Mon Sep 17 00:00:00 2001 From: Slizhevsky Vladislav Date: Fri, 19 Jun 2026 12:40:17 +0200 Subject: [PATCH 1/3] [UIK-5337][input] rewrite component to TS --- playground/entries/Input.tsx | 4 +- playground/entries/InputMask.tsx | 4 +- playground/entries/InputTags.tsx | 4 +- .../src/components/AddFilterInput.tsx | 4 +- .../color-picker/src/PaletteManager.type.ts | 4 +- semcore/date-picker/src/index.d.ts | 8 +- semcore/input-mask/src/InputMask.tsx | 8 +- semcore/input-number/src/index.d.ts | 10 +- semcore/input-tags/src/InputTags.tsx | 6 +- semcore/input/package.json | 2 +- semcore/input/src/{Input.jsx => Input.tsx} | 39 +++++-- semcore/input/src/Input.type.ts | 101 ++++++++++++++++++ semcore/input/src/index.d.ts | 71 ------------ semcore/input/src/{index.js => index.ts} | 1 + semcore/input/vite.config.ts | 2 +- semcore/pagination/src/index.d.ts | 73 +++++++++++++ semcore/select/src/index.d.ts | 4 +- .../component/TimePicker/TimePicker.type.ts | 6 +- .../tests/examples/input.tsx | 4 +- .../tests/examples/input-base-example.tsx | 4 +- .../input/tests/examples/input-with-label.tsx | 4 +- .../examples/input-with-neighborlocation.tsx | 4 +- website/docs/components/input/input-api.md | 6 +- .../components/pagination/pagination-api.md | 2 +- .../style/design-tokens/design-tokens.json | 1 - 25 files changed, 250 insertions(+), 126 deletions(-) rename semcore/input/src/{Input.jsx => Input.tsx} (82%) create mode 100644 semcore/input/src/Input.type.ts delete mode 100644 semcore/input/src/index.d.ts rename semcore/input/src/{index.js => index.ts} (53%) create mode 100644 semcore/pagination/src/index.d.ts diff --git a/playground/entries/Input.tsx b/playground/entries/Input.tsx index df72f99718..abfc222c0c 100644 --- a/playground/entries/Input.tsx +++ b/playground/entries/Input.tsx @@ -2,7 +2,7 @@ import ArrowRightM from '@semcore/icon/ArrowRight/m'; import CheckM from '@semcore/icon/Check/m'; import { ButtonLink } from '@semcore/ui/button'; import Input from '@semcore/ui/input'; -import type { InputProps } from '@semcore/ui/input'; +import type { NSInput } from '@semcore/ui/input'; import React from 'react'; import type { JSXProps } from '../types/JSXProps'; @@ -14,7 +14,7 @@ type AdditionalJSXProps = { after: boolean; readOnly: boolean; }; -export type InputJSXProps = JSXProps & AdditionalJSXProps; +export type InputJSXProps = JSXProps & AdditionalJSXProps; function getJSX(props: InputJSXProps) { return ( diff --git a/playground/entries/InputMask.tsx b/playground/entries/InputMask.tsx index 74c6194b15..ae4ea6afee 100644 --- a/playground/entries/InputMask.tsx +++ b/playground/entries/InputMask.tsx @@ -1,4 +1,4 @@ -import type { InputProps } from '@semcore/ui/input'; +import type { NSInput } from '@semcore/ui/input'; import type { InputMaskValueProps } from '@semcore/ui/input-mask'; import InputMask from '@semcore/ui/input-mask'; import React from 'react'; @@ -7,7 +7,7 @@ import type { JSXProps } from '../types/JSXProps'; import type { PlaygroundEntry } from '../types/Playground'; import createGithubLink from '../utils/createGHLink'; -export type InputMaskJSXProps = JSXProps; +export type InputMaskJSXProps = JSXProps; function getJSX(props: InputMaskJSXProps) { return ( diff --git a/playground/entries/InputTags.tsx b/playground/entries/InputTags.tsx index 7dfb041e8a..83ee720fce 100644 --- a/playground/entries/InputTags.tsx +++ b/playground/entries/InputTags.tsx @@ -1,4 +1,4 @@ -import type { InputValueProps } from '@semcore/ui/input'; +import type { NSInput } from '@semcore/ui/input'; import InputTags from '@semcore/ui/input-tags'; import type { InputTagsProps } from '@semcore/ui/input-tags'; import React from 'react'; @@ -16,7 +16,7 @@ type AdditionalJSXProps = { closable: boolean; }; }; -export type InputTagsJSXProps = JSXProps & AdditionalJSXProps; +export type InputTagsJSXProps = JSXProps & AdditionalJSXProps; function getJSX(props: InputTagsJSXProps) { return ( diff --git a/semcore/add-filter/src/components/AddFilterInput.tsx b/semcore/add-filter/src/components/AddFilterInput.tsx index fc207be17d..49ed14fec9 100644 --- a/semcore/add-filter/src/components/AddFilterInput.tsx +++ b/semcore/add-filter/src/components/AddFilterInput.tsx @@ -1,7 +1,7 @@ import { ButtonLink } from '@semcore/button'; import { createComponent, Component, Root } from '@semcore/core'; import Input from '@semcore/input'; -import type { InputValueProps } from '@semcore/input'; +import type { NSInput } from '@semcore/input'; import React from 'react'; import type { AddFilterInputType, AddFilterItemProps } from '../AddFilter.types'; @@ -18,7 +18,7 @@ class AddFilterInputRoot extends Component { this.asProps.onUnmount?.(); } - getValueProps(props: InputValueProps) { + getValueProps(props: NSInput.Value.Props) { const { value, onClear, setFocusRef } = this.asProps as AsPropsWithOnClear; return { diff --git a/semcore/color-picker/src/PaletteManager.type.ts b/semcore/color-picker/src/PaletteManager.type.ts index ee00db5f20..90d8fc68c6 100644 --- a/semcore/color-picker/src/PaletteManager.type.ts +++ b/semcore/color-picker/src/PaletteManager.type.ts @@ -1,5 +1,5 @@ import type { PropGetterFn, Intergalactic } from '@semcore/core'; -import type { InputProps } from '@semcore/input'; +import type { NSInput } from '@semcore/input'; import type { NSColorPicker } from './ColorPicker.type'; import type { LocalizedMessages } from './translations/__intergalactic-dynamic-locales'; @@ -45,7 +45,7 @@ declare namespace NSPaletteManager { } namespace InputColor { - type Props = InputProps & { + type Props = NSInput.Props & { /** * Text value of input */ diff --git a/semcore/date-picker/src/index.d.ts b/semcore/date-picker/src/index.d.ts index bdaaa1ba94..c8698b9046 100644 --- a/semcore/date-picker/src/index.d.ts +++ b/semcore/date-picker/src/index.d.ts @@ -9,7 +9,7 @@ import type { UnknownProperties, Intergalactic, PropGetterFn } from '@semcore/co import type { WithI18nEnhanceProps } from '@semcore/core/lib/utils/enhances/i18nEnhance'; import type Divider from '@semcore/divider'; import type { DropdownProps, DropdownTriggerProps } from '@semcore/dropdown'; -import type { InputProps, InputValueProps } from '@semcore/input'; +import type { NSInput } from '@semcore/input'; import type Input from '@semcore/input'; import type { InputMaskValueProps } from '@semcore/input-mask'; import type { TooltipProps } from '@semcore/tooltip'; @@ -272,7 +272,7 @@ export type DatePickerHandlers = { visible: (index: boolean) => void; }; -export type BaseInputTriggerProps = InputProps & +export type BaseInputTriggerProps = NSInput.Props & TooltipProps & { /** * Date input placeholder characters @@ -313,7 +313,7 @@ declare const InputTrigger: Intergalactic.Component< > & { Addon: typeof Input.Addon; Value: typeof Input.Value; - SingleDateInput: Intergalactic.Component<'div', InputProps & SingleDateInputProps> & { + SingleDateInput: Intergalactic.Component<'div', NSInput.Props & SingleDateInputProps> & { Indicator: typeof Input.Addon; MaskedInput: Intergalactic.Component<'input', InputMaskValueProps & DatePickerMaskedInputProps>; }; @@ -325,7 +325,7 @@ declare const RangeInputTrigger: Intergalactic.Component< > & { Addon: typeof Input.Addon; Value: typeof Input.Value; - DateRange: Intergalactic.Component<'div', InputValueProps & DateRangeProps> & { + DateRange: Intergalactic.Component<'div', NSInput.Value.Props & DateRangeProps> & { Indicator: typeof Input.Addon; RangeSep: typeof Input.Addon; FromMaskedInput: Intergalactic.Component< diff --git a/semcore/input-mask/src/InputMask.tsx b/semcore/input-mask/src/InputMask.tsx index e29e25e201..ff5184c679 100644 --- a/semcore/input-mask/src/InputMask.tsx +++ b/semcore/input-mask/src/InputMask.tsx @@ -12,7 +12,7 @@ import getInputProps, { inputProps } from '@semcore/core/lib/utils/inputProps'; import logger from '@semcore/core/lib/utils/logger'; import { forkRef } from '@semcore/core/lib/utils/ref'; import uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID'; -import Input, { type InputProps, type InputValueProps } from '@semcore/input'; +import Input, { type NSInput } from '@semcore/input'; import React from 'react'; import * as mask from 'text-mask-core'; @@ -24,7 +24,7 @@ export type InputMaskAliases = { [s: string]: RegExp; }; -export type InputMaskValueProps = InputValueProps & { +export type InputMaskValueProps = NSInput.Value.Props & { /** * Mask for entering text */ @@ -85,7 +85,7 @@ type InputMaskCtx = { getValueProps: PropGetterFn; }; -type InputMaskComponent = Intergalactic.Component<'div', InputProps, InputMaskCtx> & { +type InputMaskComponent = Intergalactic.Component<'div', NSInput.Props, InputMaskCtx> & { Value: Intergalactic.Component<'input', InputMaskValueProps>; Addon: typeof Input.Addon; }; @@ -106,7 +106,7 @@ export function getAfterPositionValue(value: string, mask: any = ''): number { return afterPotionValue; } -class InputMask extends Component { +class InputMask extends Component { static displayName = 'InputMask'; static style = style; diff --git a/semcore/input-number/src/index.d.ts b/semcore/input-number/src/index.d.ts index bcd26cdff9..8c45e5f0a2 100644 --- a/semcore/input-number/src/index.d.ts +++ b/semcore/input-number/src/index.d.ts @@ -1,11 +1,11 @@ import type { Intergalactic, PropGetterFn } from '@semcore/core'; -import type { InputAddonProps, InputProps, InputValueProps } from '@semcore/input'; +import type { NSInput } from '@semcore/input'; import type React from 'react'; export type InputNumberValue = string; export type InputNumberSize = 'm' | 'l'; -export type InputNumberProps = InputProps & { +export type InputNumberProps = NSInput.Props & { /** Input size * @default m * */ @@ -16,7 +16,7 @@ export type InputNumberProps = InputProps & { locale?: string; }; -export type InputNumberValueProps = InputValueProps & { +export type InputNumberValueProps = NSInput.Value.Props & { /** Minimum value * @default Number.MIN_SAFE_INTEGER */ @@ -35,7 +35,7 @@ export type InputNumberValueProps = InputValueProps & { onChange?: (value: InputNumberValue, event?: React.SyntheticEvent) => void; }; -export type InputNumberControlsProps = InputAddonProps & { +export type InputNumberControlsProps = NSInput.Addon.Props & { /** Always displays controls (steppers) * @default false */ @@ -51,7 +51,7 @@ export type InputNumberCtx = { declare const InputNumber: Intergalactic.Component<'div', InputNumberProps, InputNumberCtx> & { Value: Intergalactic.Component<'input', InputNumberValueProps>; Controls: Intergalactic.Component<'div', InputNumberControlsProps>; - Addon: Intergalactic.Component<'div', InputAddonProps>; + Addon: Intergalactic.Component<'div', NSInput.Addon.Props>; }; export default InputNumber; diff --git a/semcore/input-tags/src/InputTags.tsx b/semcore/input-tags/src/InputTags.tsx index 13df42a711..c5d25ef62a 100644 --- a/semcore/input-tags/src/InputTags.tsx +++ b/semcore/input-tags/src/InputTags.tsx @@ -15,7 +15,7 @@ import { extractFrom, isAdvanceMode } from '@semcore/core/lib/utils/findComponen import fire from '@semcore/core/lib/utils/fire'; import { getAccessibleName } from '@semcore/core/lib/utils/getAccessibleName'; import uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID'; -import Input, { type InputProps, type InputValueProps } from '@semcore/input'; +import Input, { type NSInput } from '@semcore/input'; import Tag, { type NSTag, TagContainer } from '@semcore/tag'; import React from 'react'; @@ -23,11 +23,11 @@ import style from './style/input-tag.shadow.css'; import type { LocalizedMessages } from './translations/__intergalactic-dynamic-locales'; import { localizedMessages } from './translations/__intergalactic-dynamic-locales'; -export type InputTagsValueProps = InputValueProps & {}; +export type InputTagsValueProps = NSInput.Value.Props & {}; export type InputTagsSize = 'l' | 'm'; -export type InputTagsProps = Omit & +export type InputTagsProps = Omit & ScrollAreaProps & { /** * Component size diff --git a/semcore/input/package.json b/semcore/input/package.json index c52b238f22..70b0e441a8 100644 --- a/semcore/input/package.json +++ b/semcore/input/package.json @@ -9,7 +9,7 @@ "author": "UI-kit team ", "license": "MIT", "scripts": { - "build": "pnpm semcore-builder --source=js && pnpm vite build" + "build": "pnpm semcore-builder && pnpm vite build" }, "exports": { "types": "./lib/types/index.d.ts", diff --git a/semcore/input/src/Input.jsx b/semcore/input/src/Input.tsx similarity index 82% rename from semcore/input/src/Input.jsx rename to semcore/input/src/Input.tsx index 27ac36153e..a50a8bf00a 100644 --- a/semcore/input/src/Input.jsx +++ b/semcore/input/src/Input.tsx @@ -1,22 +1,31 @@ import { NeighborLocation, Box, InvalidStateBox } from '@semcore/base-components'; +import type { Intergalactic } from '@semcore/core'; import { createComponent, Component, sstyled, Root, lastInteraction } from '@semcore/core'; import React from 'react'; +import type { NSInput } from './Input.type'; import style from './style/input.shadow.css'; -class Input extends Component { +class Input extends Component< + Intergalactic.InternalTypings.InferComponentProps, + [], + {}, + {}, + {}, + NSInput.DefaultProps +> { static displayName = 'Input'; static defaultProps = { size: 'm', state: 'normal', - }; + } as const; static style = style; - inputRef = React.createRef(); + inputRef = React.createRef(); - handleMouseDownAddon = (event) => { + handleMouseDownAddon = (event: React.MouseEvent) => { event.preventDefault(); this.inputRef.current?.focus(); }; @@ -106,12 +115,19 @@ class Input extends Component { } } -class Value extends Component { +class Value extends Component< + Intergalactic.InternalTypings.InferChildComponentProps, + [], + NSInput.Value.Handlers, + {}, + {}, + NSInput.Value.DefaultProps +> { static defaultProps = { defaultValue: '', }; - inputRef = React.createRef(); + inputRef = React.createRef(); componentDidMount() { if (this.asProps.autoFocus) { @@ -123,7 +139,7 @@ class Value extends Component { uncontrolledProps() { return { - value: (e) => e.target.value, + value: (e: React.ChangeEvent) => e.target.value, }; } @@ -151,7 +167,9 @@ class Value extends Component { } } -function Addon(props) { +function Addon( + props: Intergalactic.InternalTypings.InferChildComponentProps, +) { const SAddon = Root; const { Children, styles, neighborLocation } = props; return ( @@ -171,7 +189,10 @@ function Addon(props) { * * {@link https://developer.semrush.com/intergalactic/components/input/input-api/|API} | {@link https://developer.semrush.com/intergalactic/components/input/input-code/|Examples} */ -export default createComponent(Input, { +export default createComponent< + NSInput.Component, + typeof Input +>(Input, { Addon, Value, }); diff --git a/semcore/input/src/Input.type.ts b/semcore/input/src/Input.type.ts new file mode 100644 index 0000000000..1ecbed64a3 --- /dev/null +++ b/semcore/input/src/Input.type.ts @@ -0,0 +1,101 @@ +import type { BoxProps, NeighborItemProps, NeighborLocationProps } from '@semcore/base-components'; +import type { Intergalactic, PropGetterFn } from '@semcore/core'; +import type React from 'react'; + +declare namespace NSInput { + type Size = 'm' | 'l'; + type Props = BoxProps & + NeighborItemProps & + NeighborLocationProps & { + /** + * Sets the input and addons to the disabled state + * */ + disabled?: boolean; + /** + * Input size + * @default m + */ + size?: NSInput.Size; + /** + * Sets the input state + * @default normal + */ + state?: 'normal' | 'invalid' | 'valid'; + }; + type DefaultProps = { + size: 'm'; + state: 'normal'; + }; + type Ctx = { + getValueProps: PropGetterFn; + getAddonProps: PropGetterFn; + }; + + namespace Value { + type Props = BoxProps & + NeighborItemProps & { + /** + * Input value + */ + value?: string; + /** + * Default value if `value` property is not provided + */ + defaultValue?: string; + /** + * Handler for changing the value + */ + onChange?: (value: string, event: React.SyntheticEvent) => void; + /** + * Sets the input to the read-only state + * */ + readOnly?: boolean; + /** + * Input size + * @default m + */ + size?: NSInput.Size; + /** + * Placeholder for input + */ + placeholder?: string; + /** + * Flag to enable autofocusing after component mounting + * @default false + */ + autoFocus?: boolean; + }; + type DefaultProps = { + defaultValue: ''; + }; + type Handlers = { + value: (e: React.ChangeEvent) => string; + }; + + type Component = Intergalactic.Component<'input', Props>; + } + + namespace Addon { + type Props = BoxProps & NeighborItemProps; + + type Component = Intergalactic.Component<'div', Props>; + } + + type Component = Intergalactic.Component<'div', Props, Ctx> & { + Value: Value.Component; + Addon: Addon.Component; + }; +} + +/** @deprecated It will be removed in v18. */ +export type InputSize = NSInput.Size; +/** @deprecated It will be removed in v18. */ +export type InputProps = NSInput.Props; +/** @deprecated It will be removed in v18. */ +export type InputValueProps = NSInput.Value.Props; +/** @deprecated It will be removed in v18. */ +export type InputAddonProps = NSInput.Addon.Props; +/** @deprecated It will be removed in v18. */ +export type InputCtx = NSInput.Ctx; + +export type { NSInput }; diff --git a/semcore/input/src/index.d.ts b/semcore/input/src/index.d.ts deleted file mode 100644 index e2b14ef333..0000000000 --- a/semcore/input/src/index.d.ts +++ /dev/null @@ -1,71 +0,0 @@ -import type { BoxProps, NeighborItemProps, NeighborLocationProps } from '@semcore/base-components'; -import type { Intergalactic, PropGetterFn } from '@semcore/core'; -import type React from 'react'; - -export type InputSize = 'm' | 'l'; - -export type InputProps = BoxProps & - NeighborItemProps & - NeighborLocationProps & { - /** - * Sets the input and addons to the disabled state - * */ - disabled?: boolean; - /** - * Input size - * @default m - */ - size?: InputSize; - /** - * Sets the input state - * @default normal - */ - state?: 'normal' | 'invalid' | 'valid'; - }; - -export type InputValueProps = BoxProps & - NeighborItemProps & { - /** - * Input value - */ - value?: string; - /** - * Default value if `value` property is not provided - */ - defaultValue?: string; - /** - * Handler for changing the value - */ - onChange?: (value: string, event: React.SyntheticEvent) => void; - /** - * Sets the input to the read-only state - * */ - readOnly?: boolean; - /** - * Input size - * @default m - */ - size?: InputSize; - /** - * Placeholder for input - */ - placeholder?: string; - /** - * Flag to enable autofocusing after component mounting - * @default false - */ - autoFocus?: boolean; - }; - -export type InputAddonProps = BoxProps & NeighborItemProps; - -export type InputCtx = { - getValueProps: PropGetterFn; - getAddonProps: PropGetterFn; -}; - -declare const Input: Intergalactic.Component<'div', InputProps, InputCtx> & { - Value: Intergalactic.Component<'input', InputValueProps>; - Addon: Intergalactic.Component<'div', InputAddonProps>; -}; -export default Input; diff --git a/semcore/input/src/index.js b/semcore/input/src/index.ts similarity index 53% rename from semcore/input/src/index.js rename to semcore/input/src/index.ts index a2e60496d0..b3c528ac06 100644 --- a/semcore/input/src/index.js +++ b/semcore/input/src/index.ts @@ -1 +1,2 @@ export { default } from './Input'; +export * from './Input.type'; diff --git a/semcore/input/vite.config.ts b/semcore/input/vite.config.ts index 0991a16528..90f46b4cb2 100644 --- a/semcore/input/vite.config.ts +++ b/semcore/input/vite.config.ts @@ -7,7 +7,7 @@ export default mergeConfig( defineConfig({ build: { lib: { - entry: './src/index.js', + entry: './src/index.ts', }, rollupOptions: { external: ['react', 'react-dom', 'react/jsx-runtime', /@babel\/runtime\/*/, /@semcore\/*/], diff --git a/semcore/pagination/src/index.d.ts b/semcore/pagination/src/index.d.ts new file mode 100644 index 0000000000..8b86356dce --- /dev/null +++ b/semcore/pagination/src/index.d.ts @@ -0,0 +1,73 @@ +import type { BoxProps } from '@semcore/base-components'; +import type Button from '@semcore/button'; +import type { PropGetterFn, Intergalactic } from '@semcore/core'; +import type { WithI18nEnhanceProps } from '@semcore/core/lib/utils/enhances/i18nEnhance'; +import type { NSInput } from '@semcore/input'; +import type Input from '@semcore/input'; +import type { NSText } from '@semcore/typography'; + +export type PaginationProps = BoxProps & + WithI18nEnhanceProps & { + /** + * Total number of pages + * @default 1 + */ + totalPages?: number; + /** + * Active page number + * @default 1 + */ + currentPage?: number; + /** + * Callback for changing the active page + * @param pageNumber + */ + onCurrentPageChange?: (pageNumber: number) => void; + /** Specifies the locale for i18n support */ + locale?: string; + /** + * Sizes for pagination panel + * @default 'm' + */ + size?: 'm' | 'l'; + }; + +export type TotalPagesProps = NSText.Props & WithI18nEnhanceProps & {}; + +export type PageInputProps = NSInput.Props & WithI18nEnhanceProps & {}; + +export type PaginationContext = { + getFirstPageProps: PropGetterFn; + getPrevPageProps: PropGetterFn; + getNextPageProps: PropGetterFn; + getPageInputProps: PropGetterFn; + getTotalPagesProps: PropGetterFn; +}; + +export type PaginationHandlers = { + totalPages: (value: number) => void; + currentPage: (value: number) => void; +}; + +declare const Pagination: Intergalactic.Component< + 'div', + PaginationProps, + PaginationContext, + [handlers: PaginationHandlers] +> & { + PrevPage: typeof Button; + NextPage: typeof Button; + FirstPage: typeof Button; + TotalPages: Intergalactic.Component< + 'button', + TotalPagesProps, + {}, + [handlers: PaginationHandlers] + >; + PageInput: Intergalactic.Component<'div', PageInputProps, {}, [handlers: PaginationHandlers]> & { + Value: typeof Input.Value; + Addon: typeof Input.Addon; + }; +}; + +export default Pagination; diff --git a/semcore/select/src/index.d.ts b/semcore/select/src/index.d.ts index 9003c3a6dc..c39a643fbb 100644 --- a/semcore/select/src/index.d.ts +++ b/semcore/select/src/index.d.ts @@ -12,12 +12,12 @@ import type { DropdownMenuTriggerProps, } from '@semcore/dropdown-menu'; import type DropdownMenu from '@semcore/dropdown-menu'; -import type { InputValueProps } from '@semcore/input'; +import type { NSInput } from '@semcore/input'; import type Input from '@semcore/input'; import type { Text } from '@semcore/typography'; import type React from 'react'; -export type SelectInputSearch = InputValueProps & {}; +export type SelectInputSearch = NSInput.Value.Props & {}; export type OptionValue = string | number; export type SelectValue = string | number | Array | null; diff --git a/semcore/time-picker/src/component/TimePicker/TimePicker.type.ts b/semcore/time-picker/src/component/TimePicker/TimePicker.type.ts index 44c4055368..d0bd4987e0 100644 --- a/semcore/time-picker/src/component/TimePicker/TimePicker.type.ts +++ b/semcore/time-picker/src/component/TimePicker/TimePicker.type.ts @@ -1,10 +1,10 @@ import type { Box } from '@semcore/base-components'; import type { PropGetterFn, Intergalactic } from '@semcore/core'; -import type { InputProps, InputValueProps } from '@semcore/input'; +import type { NSInput } from '@semcore/input'; import type { TimePickerFormatProps } from '../PickerFormat/PickerFormat.type'; -export type TimePickerProps = Omit & { +export type TimePickerProps = Omit & { /** Time in the hh:mm format */ value?: string; /** Default value if `value` property is not provided */ @@ -36,7 +36,7 @@ export type TimePickerSeparatorProps = { disabled?: boolean; }; -export type TimePickerItemProps = InputValueProps & { +export type TimePickerItemProps = NSInput.Value.Props & { /** Step for changing of the values in the dropdown list */ step?: number; }; diff --git a/stories/components/feature-highlight/tests/examples/input.tsx b/stories/components/feature-highlight/tests/examples/input.tsx index 181d97d134..e4dfa2cdf7 100644 --- a/stories/components/feature-highlight/tests/examples/input.tsx +++ b/stories/components/feature-highlight/tests/examples/input.tsx @@ -1,9 +1,9 @@ import { Flex, ScreenReaderOnly } from '@semcore/ui/base-components'; import { InputFH, BadgeFH } from '@semcore/ui/feature-highlight'; -import type { InputProps } from '@semcore/ui/input'; +import type { NSInput } from '@semcore/ui/input'; import React from 'react'; -export type InputFHAdvancedProps = InputProps & { +export type InputFHAdvancedProps = NSInput.Props & { placeholder?: string; showBadge?: boolean; badgeText?: string; diff --git a/stories/components/input/tests/examples/input-base-example.tsx b/stories/components/input/tests/examples/input-base-example.tsx index 22e08b13a5..75a4b87a20 100644 --- a/stories/components/input/tests/examples/input-base-example.tsx +++ b/stories/components/input/tests/examples/input-base-example.tsx @@ -2,12 +2,12 @@ import Search from '@semcore/icon/Search/m'; import Badge from '@semcore/ui/badge'; import { Flex } from '@semcore/ui/base-components'; import type { BoxProps } from '@semcore/ui/base-components'; -import type { InputProps, InputValueProps } from '@semcore/ui/input'; +import type { NSInput } from '@semcore/ui/input'; import Input from '@semcore/ui/input'; import { Text } from '@semcore/ui/typography'; import React from 'react'; -type BaseExampleProps = InputProps & InputValueProps & BoxProps; +type BaseExampleProps = NSInput.Props & NSInput.Value.Props & BoxProps; const Demo = (props: BaseExampleProps) => { return ( diff --git a/stories/components/input/tests/examples/input-with-label.tsx b/stories/components/input/tests/examples/input-with-label.tsx index 7fff5486c2..5078737026 100644 --- a/stories/components/input/tests/examples/input-with-label.tsx +++ b/stories/components/input/tests/examples/input-with-label.tsx @@ -3,7 +3,7 @@ import type { BoxProps } from '@semcore/ui/base-components'; import { LinkTrigger } from '@semcore/ui/base-trigger'; import Counter from '@semcore/ui/counter'; import Input from '@semcore/ui/input'; -import type { InputProps, InputValueProps } from '@semcore/ui/input'; +import type { NSInput } from '@semcore/ui/input'; import Select from '@semcore/ui/select'; import { Text } from '@semcore/ui/typography'; import React from 'react'; @@ -16,7 +16,7 @@ const options = Array(6) children: `Option ${index}`, })); -type WithLabelExampleProps = InputProps & InputValueProps & BoxProps; +type WithLabelExampleProps = NSInput.Props & NSInput.Value.Props & BoxProps; const Demo = (props: WithLabelExampleProps) => { return ( diff --git a/stories/components/input/tests/examples/input-with-neighborlocation.tsx b/stories/components/input/tests/examples/input-with-neighborlocation.tsx index e645abae5d..f561e6108f 100644 --- a/stories/components/input/tests/examples/input-with-neighborlocation.tsx +++ b/stories/components/input/tests/examples/input-with-neighborlocation.tsx @@ -2,11 +2,11 @@ import ShowYesM from '@semcore/icon/ShowYes/m'; import type { BoxProps } from '@semcore/ui/base-components'; import { Flex, NeighborLocation } from '@semcore/ui/base-components'; import { ButtonLink } from '@semcore/ui/button'; -import type { InputProps, InputValueProps } from '@semcore/ui/input'; +import type { NSInput } from '@semcore/ui/input'; import Input from '@semcore/ui/input'; import React from 'react'; -type WithNeighborLocationExampleProps = InputProps & InputValueProps & BoxProps; +type WithNeighborLocationExampleProps = NSInput.Props & NSInput.Value.Props & BoxProps; const Demo = (props: WithNeighborLocationExampleProps) => { return ( <> diff --git a/website/docs/components/input/input-api.md b/website/docs/components/input/input-api.md index 0107f5ecc0..669d5c3e68 100644 --- a/website/docs/components/input/input-api.md +++ b/website/docs/components/input/input-api.md @@ -13,7 +13,7 @@ import Input from '@semcore/ui/input'; ; ``` - + ## Input.Value @@ -24,7 +24,7 @@ import Input from '@semcore/ui/input'; ; ``` - + ## Input.Addon @@ -37,6 +37,6 @@ import Input from '@semcore/ui/input'; ; ``` - + diff --git a/website/docs/components/pagination/pagination-api.md b/website/docs/components/pagination/pagination-api.md index 42103e0c4c..3385c3dd61 100644 --- a/website/docs/components/pagination/pagination-api.md +++ b/website/docs/components/pagination/pagination-api.md @@ -46,7 +46,7 @@ import Pagination from '@semcore/ui/pagination'; ; ``` - + ## Pagination.PrevPage diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index 8b9ccea181..ec20b71495 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -418,7 +418,6 @@ "components": [ "button", "link", - "pagination", "tab-panel", "typography" ] From 07c06dd06651cd6af01c9a55852977230e29fd81 Mon Sep 17 00:00:00 2001 From: Slizhevsky Vladislav Date: Fri, 19 Jun 2026 12:45:05 +0200 Subject: [PATCH 2/3] [UIK-5337][input] rewrite component to TS --- website/docs/style/design-tokens/design-tokens.json | 1 + 1 file changed, 1 insertion(+) diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index ec20b71495..8b9ccea181 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -418,6 +418,7 @@ "components": [ "button", "link", + "pagination", "tab-panel", "typography" ] From 03cdede470fdb61a1ad34c32aad90115a66cbcb1 Mon Sep 17 00:00:00 2001 From: Slizhevsky Vladislav Date: Tue, 23 Jun 2026 16:18:22 +0200 Subject: [PATCH 3/3] [UIK-5337][input] rewrite component to TS --- semcore/pagination/src/index.d.ts | 73 ------------------------------- 1 file changed, 73 deletions(-) delete mode 100644 semcore/pagination/src/index.d.ts diff --git a/semcore/pagination/src/index.d.ts b/semcore/pagination/src/index.d.ts deleted file mode 100644 index 8b86356dce..0000000000 --- a/semcore/pagination/src/index.d.ts +++ /dev/null @@ -1,73 +0,0 @@ -import type { BoxProps } from '@semcore/base-components'; -import type Button from '@semcore/button'; -import type { PropGetterFn, Intergalactic } from '@semcore/core'; -import type { WithI18nEnhanceProps } from '@semcore/core/lib/utils/enhances/i18nEnhance'; -import type { NSInput } from '@semcore/input'; -import type Input from '@semcore/input'; -import type { NSText } from '@semcore/typography'; - -export type PaginationProps = BoxProps & - WithI18nEnhanceProps & { - /** - * Total number of pages - * @default 1 - */ - totalPages?: number; - /** - * Active page number - * @default 1 - */ - currentPage?: number; - /** - * Callback for changing the active page - * @param pageNumber - */ - onCurrentPageChange?: (pageNumber: number) => void; - /** Specifies the locale for i18n support */ - locale?: string; - /** - * Sizes for pagination panel - * @default 'm' - */ - size?: 'm' | 'l'; - }; - -export type TotalPagesProps = NSText.Props & WithI18nEnhanceProps & {}; - -export type PageInputProps = NSInput.Props & WithI18nEnhanceProps & {}; - -export type PaginationContext = { - getFirstPageProps: PropGetterFn; - getPrevPageProps: PropGetterFn; - getNextPageProps: PropGetterFn; - getPageInputProps: PropGetterFn; - getTotalPagesProps: PropGetterFn; -}; - -export type PaginationHandlers = { - totalPages: (value: number) => void; - currentPage: (value: number) => void; -}; - -declare const Pagination: Intergalactic.Component< - 'div', - PaginationProps, - PaginationContext, - [handlers: PaginationHandlers] -> & { - PrevPage: typeof Button; - NextPage: typeof Button; - FirstPage: typeof Button; - TotalPages: Intergalactic.Component< - 'button', - TotalPagesProps, - {}, - [handlers: PaginationHandlers] - >; - PageInput: Intergalactic.Component<'div', PageInputProps, {}, [handlers: PaginationHandlers]> & { - Value: typeof Input.Value; - Addon: typeof Input.Addon; - }; -}; - -export default Pagination;