[UIK-5199][widget-empty] rewrite component to TS

semcore/widget-empty/package.json

@@ -9,7 +9,7 @@
   "author": "UI-kit team <ui-kit-team@semrush.com>",
   "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",

semcore/widget-empty/src/Error/index.jsx → 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<NSWidgetEmptyError.Component>,
+  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<NSWidgetEmptyError.Component, typeof Error>(Error);

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 };

semcore/widget-empty/src/Error/translations/__intergalactic-dynamic-locales.ts

@@ -31,3 +31,5 @@ export const localizedMessages = {
   pl,
   sv,
 };
+
+export type LocalizedMessages = typeof localizedMessages;

semcore/widget-empty/src/NoData/index.jsx → 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<NSWidgetEmptyNoData.Component>,
+  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<NSWidgetEmptyNoData.Component, typeof NoData>(NoData);

semcore/widget-empty/src/NoData/NoData.type.ts

@@ -0,0 +1,29 @@
+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;
+/** @deprecated It will be removed in v18. */
+export type iconNamesWidgetEmpty = TIllustrationNamesWidgetEmpty;
+
+export type { NSWidgetEmptyNoData };

semcore/widget-empty/src/NoData/translations/__intergalactic-dynamic-locales.ts

@@ -31,3 +31,5 @@ export const localizedMessages = {
   pl,
   sv,
 };
+
+export type LocalizedMessages = typeof localizedMessages;

semcore/widget-empty/src/WidgetEmpty.jsx → 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<NSWidgetEmpty.Component>
+> {
   static displayName = 'WidgetEmpty';
   static style = style;
 
@@ -30,13 +35,13 @@ class WidgetEmpty extends Component {
   }
 }
 
-function Title(props) {
+function Title(props: Intergalactic.InternalTypings.InferComponentProps<NSWidgetEmpty.Title.Component>) {
   const STitle = Root;
   const { styles } = props;
   return sstyled(styles)(<STitle render={Box} />);
 }
 
-function Description(props) {
+function Description(props: Intergalactic.InternalTypings.InferComponentProps<NSWidgetEmpty.Description.Component>) {
   const SDescription = Root;
   const { styles } = props;
   return sstyled(styles)(<SDescription render={Box} />);
@@ -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<NSWidgetEmpty.Component, typeof WidgetEmpty>(WidgetEmpty, {
   Title,
   Description,
 });

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 };

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';

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\/*/],

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;

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;
 };

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;

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;

website/docs/components/widget-empty/widget-empty-api.md

@@ -13,7 +13,7 @@ import { NoData } from '@semcore/ui/widget-empty';
 <NoData />;
 ```
 
-<TypesView type="WidgetNoDataProps" :types={...types} />
+<TypesView type="NSWidgetEmptyNoData.Props" :types={...types} />
 
 ## Error
 
@@ -24,7 +24,7 @@ import { Error } from '@semcore/ui/widget-empty';
 <Error />;
 ```
 
-<TypesView type="WidgetErrorProps" :types={...types} />
+<TypesView type="NSWidgetEmptyError.Props" :types={...types} />
 
 ## WidgetEmpty
 
@@ -35,7 +35,7 @@ import WidgetEmpty from '@semcore/ui/widget-empty';
 <WidgetEmpty />;
 ```
 
-<TypesView type="WidgetEmptyProps" :types={...types} />
+<TypesView type="NSWidgetEmpty.Props" :types={...types} />
 
 ## Images