From 8a884896854e6ca087d460a2bc96b27dbc615560 Mon Sep 17 00:00:00 2001 From: Slizhevsky Vladislav Date: Thu, 11 Jun 2026 12:19:21 +0200 Subject: [PATCH 1/2] [UIK-5199][widget-empty] rewrite component to TS --- semcore/widget-empty/package.json | 2 +- .../src/Error/{index.jsx => Error.tsx} | 18 +++++++-- semcore/widget-empty/src/Error/Error.type.ts | 24 ++++++++++++ .../__intergalactic-dynamic-locales.ts | 2 + .../src/NoData/{index.jsx => NoData.tsx} | 18 +++++++-- .../widget-empty/src/NoData/NoData.type.ts | 27 +++++++++++++ .../__intergalactic-dynamic-locales.ts | 2 + .../src/{WidgetEmpty.jsx => WidgetEmpty.tsx} | 15 +++++--- semcore/widget-empty/src/WidgetEmpty.type.ts | 29 ++++++++++++++ semcore/widget-empty/src/index.d.ts | 38 ------------------- semcore/widget-empty/src/index.js | 6 --- semcore/widget-empty/src/index.ts | 7 ++++ semcore/widget-empty/vite.config.ts | 2 +- .../tests/examples/basic_usage.tsx | 4 +- .../tests/examples/custom_icon_size.tsx | 4 +- .../tests/examples/widget_error_usage.tsx | 4 +- .../tests/examples/widget_nodata_usage.tsx | 4 +- .../widget-empty/widget-empty-api.md | 6 +-- 18 files changed, 142 insertions(+), 70 deletions(-) rename semcore/widget-empty/src/Error/{index.jsx => Error.tsx} (65%) create mode 100644 semcore/widget-empty/src/Error/Error.type.ts rename semcore/widget-empty/src/NoData/{index.jsx => NoData.tsx} (65%) create mode 100644 semcore/widget-empty/src/NoData/NoData.type.ts rename semcore/widget-empty/src/{WidgetEmpty.jsx => WidgetEmpty.tsx} (64%) create mode 100644 semcore/widget-empty/src/WidgetEmpty.type.ts delete mode 100644 semcore/widget-empty/src/index.d.ts delete mode 100644 semcore/widget-empty/src/index.js create mode 100644 semcore/widget-empty/src/index.ts diff --git a/semcore/widget-empty/package.json b/semcore/widget-empty/package.json index d632062453..f3e23de0e0 100644 --- a/semcore/widget-empty/package.json +++ b/semcore/widget-empty/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/widget-empty/src/Error/index.jsx b/semcore/widget-empty/src/Error/Error.tsx similarity index 65% rename from semcore/widget-empty/src/Error/index.jsx rename to semcore/widget-empty/src/Error/Error.tsx index ce02e0ac30..dcba556197 100644 --- a/semcore/widget-empty/src/Error/index.jsx +++ b/semcore/widget-empty/src/Error/Error.tsx @@ -1,18 +1,28 @@ +import type { Intergalactic } from '@semcore/core'; import { createComponent, Component, Root } from '@semcore/core'; +import type { WithI18nEnhanceProps } from '@semcore/core/lib/utils/enhances/i18nEnhance'; import i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance'; import React from 'react'; import WidgetEmpty, { getIconPath } from '../WidgetEmpty'; +import type { NSWidgetEmptyError } from './Error.type'; import { localizedMessages } from './translations/__intergalactic-dynamic-locales'; -class Error extends Component { +class Error extends Component< + Intergalactic.InternalTypings.InferComponentProps, + typeof Error.enhance, + {}, + WithI18nEnhanceProps, + {}, + NSWidgetEmptyError.DefaultProps +> { static displayName = 'WidgetError'; static defaultProps = { i18n: localizedMessages, locale: 'en', - }; + } as const; - static enhance = [i18nEnhance(localizedMessages)]; + static enhance = [i18nEnhance(localizedMessages)] as const; render() { const { Children, description, getI18nText } = this.asProps; @@ -34,4 +44,4 @@ class Error extends Component { * * {@link https://developer.semrush.com/intergalactic/components/widget-empty/widget-empty-api#error|API} | {@link https://developer.semrush.com/intergalactic/components/widget-empty/widget-empty-code/|Examples} */ -export default createComponent(Error); +export default createComponent(Error); diff --git a/semcore/widget-empty/src/Error/Error.type.ts b/semcore/widget-empty/src/Error/Error.type.ts new file mode 100644 index 0000000000..b97d3eebb6 --- /dev/null +++ b/semcore/widget-empty/src/Error/Error.type.ts @@ -0,0 +1,24 @@ +import type { Intergalactic } from '@semcore/core'; +import type { WithI18nEnhanceProps } from '@semcore/core/lib/utils/enhances/i18nEnhance'; + +import type { NSWidgetEmpty } from '../WidgetEmpty.type'; +import type { LocalizedMessages } from './translations/__intergalactic-dynamic-locales'; + +declare namespace NSWidgetEmptyError { + type Props = NSWidgetEmpty.Props & + WithI18nEnhanceProps & { + /** Error description. If it is absent, use the local default one */ + description?: React.ReactNode; + }; + type DefaultProps = { + i18n: LocalizedMessages; + locale: 'en'; + }; + + type Component = Intergalactic.Component<'div', Props>; +} + +/** @deprecated It will be removed in v18. */ +export type WidgetErrorProps = NSWidgetEmptyError.Props; + +export type { NSWidgetEmptyError }; diff --git a/semcore/widget-empty/src/Error/translations/__intergalactic-dynamic-locales.ts b/semcore/widget-empty/src/Error/translations/__intergalactic-dynamic-locales.ts index 01fec83b34..2edde3b546 100644 --- a/semcore/widget-empty/src/Error/translations/__intergalactic-dynamic-locales.ts +++ b/semcore/widget-empty/src/Error/translations/__intergalactic-dynamic-locales.ts @@ -31,3 +31,5 @@ export const localizedMessages = { pl, sv, }; + +export type LocalizedMessages = typeof localizedMessages; diff --git a/semcore/widget-empty/src/NoData/index.jsx b/semcore/widget-empty/src/NoData/NoData.tsx similarity index 65% rename from semcore/widget-empty/src/NoData/index.jsx rename to semcore/widget-empty/src/NoData/NoData.tsx index cef2aa6c0c..f33d983a8a 100644 --- a/semcore/widget-empty/src/NoData/index.jsx +++ b/semcore/widget-empty/src/NoData/NoData.tsx @@ -1,18 +1,28 @@ +import type { Intergalactic } from '@semcore/core'; import { createComponent, Component, Root } from '@semcore/core'; +import type { WithI18nEnhanceProps } from '@semcore/core/lib/utils/enhances/i18nEnhance'; import i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance'; import React from 'react'; import WidgetEmpty, { getIconPath } from '../WidgetEmpty'; +import type { NSWidgetEmptyNoData } from './NoData.type'; import { localizedMessages } from './translations/__intergalactic-dynamic-locales'; -class NoData extends Component { +class NoData extends Component< + Intergalactic.InternalTypings.InferComponentProps, + typeof NoData.enhance, + {}, + WithI18nEnhanceProps, + {}, + NSWidgetEmptyNoData.DefaultProps +> { static displayName = 'WidgetNoData'; - static enhance = [i18nEnhance(localizedMessages)]; + static enhance = [i18nEnhance(localizedMessages)] as const; static defaultProps = { i18n: localizedMessages, locale: 'en', type: 'other-data', - }; + } as const; render() { const { Children, type, description, getI18nText } = this.asProps; @@ -34,4 +44,4 @@ class NoData extends Component { * * {@link https://developer.semrush.com/intergalactic/components/widget-empty/widget-empty-api/|API} | {@link https://developer.semrush.com/intergalactic/components/widget-empty/widget-empty-code/|Examples} */ -export default createComponent(NoData); +export default createComponent(NoData); diff --git a/semcore/widget-empty/src/NoData/NoData.type.ts b/semcore/widget-empty/src/NoData/NoData.type.ts new file mode 100644 index 0000000000..f7dd837929 --- /dev/null +++ b/semcore/widget-empty/src/NoData/NoData.type.ts @@ -0,0 +1,27 @@ +import type { Intergalactic } from '@semcore/core'; +import type { WithI18nEnhanceProps } from '@semcore/core/lib/utils/enhances/i18nEnhance'; +import type { TIllustrationNamesWidgetEmpty } from '@semcore/illustration'; + +import type { NSWidgetEmpty } from '../WidgetEmpty.type'; +import type { LocalizedMessages } from './translations/__intergalactic-dynamic-locales'; + +declare namespace NSWidgetEmptyNoData { + type Props = NSWidgetEmpty.Props & WithI18nEnhanceProps & { + /** Error description. If it is absent, use the local default one */ + description?: React.ReactNode; + /** Data types */ + type?: TIllustrationNamesWidgetEmpty; + }; + type DefaultProps = { + i18n: LocalizedMessages; + locale: 'en'; + type: 'other-data'; + }; + + type Component = Intergalactic.Component<'div', Props>; +} + +/** @deprecated It will be removed in v18. */ +export type WidgetNoDataProps = NSWidgetEmptyNoData.Props; + +export type { NSWidgetEmptyNoData }; diff --git a/semcore/widget-empty/src/NoData/translations/__intergalactic-dynamic-locales.ts b/semcore/widget-empty/src/NoData/translations/__intergalactic-dynamic-locales.ts index 01fec83b34..2edde3b546 100644 --- a/semcore/widget-empty/src/NoData/translations/__intergalactic-dynamic-locales.ts +++ b/semcore/widget-empty/src/NoData/translations/__intergalactic-dynamic-locales.ts @@ -31,3 +31,5 @@ export const localizedMessages = { pl, sv, }; + +export type LocalizedMessages = typeof localizedMessages; diff --git a/semcore/widget-empty/src/WidgetEmpty.jsx b/semcore/widget-empty/src/WidgetEmpty.tsx similarity index 64% rename from semcore/widget-empty/src/WidgetEmpty.jsx rename to semcore/widget-empty/src/WidgetEmpty.tsx index ac42bfce16..1753e6f640 100644 --- a/semcore/widget-empty/src/WidgetEmpty.jsx +++ b/semcore/widget-empty/src/WidgetEmpty.tsx @@ -1,14 +1,19 @@ import { Box, Flex } from '@semcore/base-components'; +import type { Intergalactic } from '@semcore/core'; import { createComponent, Component, sstyled, Root } from '@semcore/core'; import isNode from '@semcore/core/lib/utils/isNode'; +import type { TIllustrationNamesWidgetEmpty } from '@semcore/illustration'; import { getIllustrationPath } from '@semcore/illustration'; import React from 'react'; import style from './style/widget-empty.shadow.css'; +import type { NSWidgetEmpty } from './WidgetEmpty.type'; -export const getIconPath = (name) => getIllustrationPath(name); +export const getIconPath = (name: TIllustrationNamesWidgetEmpty) => getIllustrationPath(name); -class WidgetEmpty extends Component { +class WidgetEmpty extends Component< + Intergalactic.InternalTypings.InferComponentProps +> { static displayName = 'WidgetEmpty'; static style = style; @@ -30,13 +35,13 @@ class WidgetEmpty extends Component { } } -function Title(props) { +function Title(props: Intergalactic.InternalTypings.InferComponentProps) { const STitle = Root; const { styles } = props; return sstyled(styles)(); } -function Description(props) { +function Description(props: Intergalactic.InternalTypings.InferComponentProps) { const SDescription = Root; const { styles } = props; return sstyled(styles)(); @@ -47,7 +52,7 @@ function Description(props) { * * {@link https://developer.semrush.com/intergalactic/components/widget-empty/widget-empty-api/|API} | {@link https://developer.semrush.com/intergalactic/components/widget-empty/widget-empty-code/|Examples} */ -export default createComponent(WidgetEmpty, { +export default createComponent(WidgetEmpty, { Title, Description, }); diff --git a/semcore/widget-empty/src/WidgetEmpty.type.ts b/semcore/widget-empty/src/WidgetEmpty.type.ts new file mode 100644 index 0000000000..1d2be40bdb --- /dev/null +++ b/semcore/widget-empty/src/WidgetEmpty.type.ts @@ -0,0 +1,29 @@ +import type { Box, FlexProps } from '@semcore/base-components'; +import type { Intergalactic } from '@semcore/core'; + +declare namespace NSWidgetEmpty { + type Props = FlexProps & { + /** + * URL before the icon or the whole component + */ + icon?: React.ReactNode; + }; + + namespace Title { + type Component = typeof Box; + } + + namespace Description { + type Component = typeof Box; + } + + type Component = Intergalactic.Component<'div', Props> & { + Title: Title.Component; + Description: Description.Component; + }; +} + +/** @deprecated It will be removed in v18. */ +export type WidgetEmptyProps = NSWidgetEmpty.Props; + +export type { NSWidgetEmpty }; diff --git a/semcore/widget-empty/src/index.d.ts b/semcore/widget-empty/src/index.d.ts deleted file mode 100644 index ee3cf912ff..0000000000 --- a/semcore/widget-empty/src/index.d.ts +++ /dev/null @@ -1,38 +0,0 @@ -import type { Box, FlexProps } from '@semcore/base-components'; -import type { Intergalactic } from '@semcore/core'; -import type { WithI18nEnhanceProps } from '@semcore/core/lib/utils/enhances/i18nEnhance'; -import type { TIllustrationNamesWidgetEmpty } from '@semcore/illustration'; - -export type iconNamesWidgetEmpty = TIllustrationNamesWidgetEmpty; - -export type WidgetEmptyProps = FlexProps & { - /** - * URL before the icon or the whole component - */ - icon?: React.ReactNode; -}; - -export type WidgetErrorProps = WidgetEmptyProps & - WithI18nEnhanceProps & { - /** Error description. If it is absent, use the local default one */ - description?: React.ReactNode; - }; - -export type WidgetNoDataProps = WidgetEmptyProps & - WithI18nEnhanceProps & { - /** Error description. If it is absent, use the local default one */ - description?: React.ReactNode; - /** Data types */ - type?: iconNamesWidgetEmpty; - }; - -declare const WidgetEmpty: Intergalactic.Component<'div', WidgetEmptyProps> & { - Title: typeof Box; - Description: typeof Box; -}; - -export declare const NoData: Intergalactic.Component<'div', WidgetNoDataProps>; -export declare const Error: Intergalactic.Component<'div', WidgetErrorProps>; -export declare const getIconPath: (name: string) => string; - -export default WidgetEmpty; diff --git a/semcore/widget-empty/src/index.js b/semcore/widget-empty/src/index.js deleted file mode 100644 index c58a9aef2d..0000000000 --- a/semcore/widget-empty/src/index.js +++ /dev/null @@ -1,6 +0,0 @@ -export { default } from './WidgetEmpty'; -export * from './WidgetEmpty'; - -export { default as NoData } from './NoData'; - -export { default as Error } from './Error'; diff --git a/semcore/widget-empty/src/index.ts b/semcore/widget-empty/src/index.ts new file mode 100644 index 0000000000..d425ec221c --- /dev/null +++ b/semcore/widget-empty/src/index.ts @@ -0,0 +1,7 @@ +export { default, getIconPath } from './WidgetEmpty'; +export { default as NoData } from './NoData/NoData'; +export { default as Error } from './Error/Error'; + +export * from './WidgetEmpty.type'; +export * from './NoData/NoData.type'; +export * from './Error/Error.type'; diff --git a/semcore/widget-empty/vite.config.ts b/semcore/widget-empty/vite.config.ts index 0991a16528..90f46b4cb2 100644 --- a/semcore/widget-empty/vite.config.ts +++ b/semcore/widget-empty/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/stories/components/widget-empty/tests/examples/basic_usage.tsx b/stories/components/widget-empty/tests/examples/basic_usage.tsx index 2c418dcdb5..dc057f1c2e 100644 --- a/stories/components/widget-empty/tests/examples/basic_usage.tsx +++ b/stories/components/widget-empty/tests/examples/basic_usage.tsx @@ -1,8 +1,8 @@ import WidgetEmpty, { getIconPath } from '@semcore/ui/widget-empty'; -import type { WidgetEmptyProps, iconNamesWidgetEmpty } from '@semcore/ui/widget-empty'; +import type { NSWidgetEmpty, iconNamesWidgetEmpty } from '@semcore/ui/widget-empty'; import React from 'react'; -export type BasicWidgetEmptyProps = WidgetEmptyProps & { +export type BasicWidgetEmptyProps = NSWidgetEmpty.Props & { iconName?: iconNamesWidgetEmpty; showTitle?: boolean; showDescription?: boolean; diff --git a/stories/components/widget-empty/tests/examples/custom_icon_size.tsx b/stories/components/widget-empty/tests/examples/custom_icon_size.tsx index 7894020fdf..2cec1bd62f 100644 --- a/stories/components/widget-empty/tests/examples/custom_icon_size.tsx +++ b/stories/components/widget-empty/tests/examples/custom_icon_size.tsx @@ -1,8 +1,8 @@ import WidgetEmpty from '@semcore/ui/widget-empty'; -import type { WidgetEmptyProps } from '@semcore/ui/widget-empty'; +import type { NSWidgetEmpty } from '@semcore/ui/widget-empty'; import React from 'react'; -export type CustomIconSizeProps = WidgetEmptyProps & { +export type CustomIconSizeProps = NSWidgetEmpty.Props & { iconWidth?: number; iconHeight?: number; }; diff --git a/stories/components/widget-empty/tests/examples/widget_error_usage.tsx b/stories/components/widget-empty/tests/examples/widget_error_usage.tsx index 71eae7f884..856fc08077 100644 --- a/stories/components/widget-empty/tests/examples/widget_error_usage.tsx +++ b/stories/components/widget-empty/tests/examples/widget_error_usage.tsx @@ -1,8 +1,8 @@ import { Error } from '@semcore/ui/widget-empty'; -import type { WidgetErrorProps } from '@semcore/ui/widget-empty'; +import type { NSWidgetEmptyError } from '@semcore/ui/widget-empty'; import React from 'react'; -export type BasicWidgetErrorProps = WidgetErrorProps & { +export type BasicWidgetErrorProps = NSWidgetEmptyError.Props & { showDescription?: boolean; customDescription?: string; showChildren?: boolean; diff --git a/stories/components/widget-empty/tests/examples/widget_nodata_usage.tsx b/stories/components/widget-empty/tests/examples/widget_nodata_usage.tsx index 2a840d6369..8e22a3df6d 100644 --- a/stories/components/widget-empty/tests/examples/widget_nodata_usage.tsx +++ b/stories/components/widget-empty/tests/examples/widget_nodata_usage.tsx @@ -1,8 +1,8 @@ import { NoData } from '@semcore/ui/widget-empty'; -import type { WidgetNoDataProps } from '@semcore/ui/widget-empty'; +import type { NSWidgetEmptyNoData } from '@semcore/ui/widget-empty'; import React from 'react'; -export type BasicWidgetNoDataProps = WidgetNoDataProps & { +export type BasicWidgetNoDataProps = NSWidgetEmptyNoData.Props & { showDescription?: boolean; customDescription?: string; showChildren?: boolean; diff --git a/website/docs/components/widget-empty/widget-empty-api.md b/website/docs/components/widget-empty/widget-empty-api.md index 2fdf80e976..493f909bac 100644 --- a/website/docs/components/widget-empty/widget-empty-api.md +++ b/website/docs/components/widget-empty/widget-empty-api.md @@ -13,7 +13,7 @@ import { NoData } from '@semcore/ui/widget-empty'; ; ``` - + ## Error @@ -24,7 +24,7 @@ import { Error } from '@semcore/ui/widget-empty'; ; ``` - + ## WidgetEmpty @@ -35,7 +35,7 @@ import WidgetEmpty from '@semcore/ui/widget-empty'; ; ``` - + ## Images From 8b06d7a74eda1348c321c8a898ffafb1c6cf2750 Mon Sep 17 00:00:00 2001 From: Slizhevsky Vladislav Date: Fri, 12 Jun 2026 11:41:37 +0200 Subject: [PATCH 2/2] [UIK-5199][widget-empty] rewrite component to TS --- semcore/widget-empty/src/NoData/NoData.type.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/semcore/widget-empty/src/NoData/NoData.type.ts b/semcore/widget-empty/src/NoData/NoData.type.ts index f7dd837929..62183b800b 100644 --- a/semcore/widget-empty/src/NoData/NoData.type.ts +++ b/semcore/widget-empty/src/NoData/NoData.type.ts @@ -23,5 +23,7 @@ declare namespace NSWidgetEmptyNoData { /** @deprecated It will be removed in v18. */ export type WidgetNoDataProps = NSWidgetEmptyNoData.Props; +/** @deprecated It will be removed in v18. */ +export type iconNamesWidgetEmpty = TIllustrationNamesWidgetEmpty; export type { NSWidgetEmptyNoData };