[UIK-5198][spin-container] rewrite component to TS

playground/entries/SpinContainer.tsx

@@ -1,6 +1,6 @@
 import { Flex } from '@semcore/ui/base-components';
 import Input from '@semcore/ui/input';
-import type { SpinContainerProps } from '@semcore/ui/spin-container';
+import type { NSSpinContainer } from '@semcore/ui/spin-container';
 import SpinContainer from '@semcore/ui/spin-container';
 import { Text } from '@semcore/ui/typography';
 import React from 'react';
@@ -9,7 +9,7 @@ import type { JSXProps } from '../types/JSXProps';
 import type { PlaygroundEntry } from '../types/Playground';
 import createGithubLink from '../utils/createGHLink';
 
-export type SpinContainerJSXProps = JSXProps<SpinContainerProps>;
+export type SpinContainerJSXProps = JSXProps<NSSpinContainer.Props>;
 
 function getJSX(props: SpinContainerJSXProps) {
   return (

semcore/spin-container/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/spin-container/src/SpinContainer.jsx → semcore/spin-container/src/SpinContainer.tsx

@@ -1,28 +1,43 @@
 import { FadeInOut, Box } from '@semcore/base-components';
+import type { Intergalactic } from '@semcore/core';
 import { createComponent, Component, sstyled, Root } from '@semcore/core';
 import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
 import { isAdvanceMode } from '@semcore/core/lib/utils/findComponent';
 import Spin from '@semcore/spin';
 import React from 'react';
 
+import type { NSSpinContainer } from './SpinContainer.type';
 import style from './style/spin-container.shadow.css';
 
-class SpinContainerRoot extends Component {
+type State = {
+  inert?: boolean;
+};
+
+class SpinContainerRoot extends Component<
+  Intergalactic.InternalTypings.InferComponentProps<NSSpinContainer.Component>,
+  typeof SpinContainerRoot.enhance,
+  {},
+  {},
+  State,
+  NSSpinContainer.DefaultProps
+> {
   static displayName = 'SpinContainer';
   static style = style;
   static defaultProps = {
     size: 'xxl',
     theme: 'dark',
     duration: 200,
-  };
+  } as const;
 
-  static enhance = [resolveColorEnhance()];
+  static enhance = [resolveColorEnhance()] as const;
 
-  state = {
+  state: State = {
     inert: this.props.loading,
   };
 
-  componentDidUpdate(prevProps) {
+  private inertTimer: ReturnType<typeof setTimeout> | null = null;
+
+  componentDidUpdate(prevProps: typeof this.asProps) {
     const { loading } = this.props;
     if (prevProps.loading !== loading) {
       if (this.inertTimer) {
@@ -85,8 +100,10 @@ class SpinContainerRoot extends Component {
   }
 }
 
-class Overlay extends Component {
-  static defaultProps = ({ size, theme }) => ({
+type OverlayProps = Intergalactic.InternalTypings.InferChildComponentProps<NSSpinContainer.Overlay.Component, typeof SpinContainerRoot, 'Overlay'>;
+
+class Overlay extends Component<OverlayProps> {
+  static defaultProps = ({ size, theme }: OverlayProps) => ({
     children: <Spin size={size} theme={theme} />,
   });
 
@@ -103,7 +120,7 @@ class Overlay extends Component {
   }
 }
 
-function Content(props) {
+function Content(props: Intergalactic.InternalTypings.InferComponentProps<NSSpinContainer.Content.Component>) {
   const SContent = Root;
   const { styles } = props;
   return sstyled(styles)(<SContent render={Box} />);
@@ -114,7 +131,10 @@ function Content(props) {
  *
  * {@link https://developer.semrush.com/intergalactic/components/spin-container/spin-container-api/|API} | {@link https://developer.semrush.com/intergalactic/components/spin-container/spin-container-code/|Examples}
  */
-const SpinContainer = createComponent(SpinContainerRoot, {
+const SpinContainer = createComponent<
+  NSSpinContainer.Component,
+  typeof SpinContainerRoot
+>(SpinContainerRoot, {
   Overlay,
   Content,
 });

semcore/spin-container/src/SpinContainer.type.ts

@@ -0,0 +1,65 @@
+import type { FadeInOutProps, BoxProps } from '@semcore/base-components';
+import type { PropGetterFn, Intergalactic } from '@semcore/core';
+import type { NSSpin } from '@semcore/spin';
+
+declare namespace NSSpinContainer {
+  type Props = BoxProps &
+    NSSpin.Props & {
+      /**
+       * Color of container spinner; you can use your own color
+       */
+      background?: string;
+      /** Duration of animation displaying in ms
+       * @default 200
+       */
+      duration?: number;
+      /**
+       * Property responsible for displaying the spinner
+       * */
+      loading?: boolean;
+    };
+  type DefaultProps = {
+    size: 'xxl';
+    theme: 'dark';
+    duration: 200;
+  };
+  type Ctx = {
+    getOverlayProps: PropGetterFn;
+  };
+
+  namespace Content {
+    type Props = BoxProps & FadeInOutProps;
+
+    type Component = Intergalactic.Component<'div', Props>;
+  }
+
+  namespace Overlay {
+    type Props = BoxProps & {
+      /**
+       * Css background; you can use your own color
+       */
+      background?: string;
+    };
+    type DefaultProps = {
+      children: React.JSX.Element;
+    };
+
+    type Component = Intergalactic.Component<'div', Props>;
+  }
+
+  type Component = Intergalactic.Component<'div', Props, Ctx> & {
+    Content: Content.Component;
+    Overlay: Overlay.Component;
+  };
+}
+
+/** @deprecated It will be removed in v18. */
+export type SpinContainerProps = NSSpinContainer.Props;
+/** @deprecated It will be removed in v18. */
+export type SpinContainerContext = NSSpinContainer.Ctx;
+/** @deprecated It will be removed in v18. */
+export type SpinOverlayProps = NSSpinContainer.Content.Props;
+/** @deprecated It will be removed in v18. */
+export type SpinContainerOverlayProps = NSSpinContainer.Overlay.Props;
+
+export type { NSSpinContainer };

semcore/spin-container/src/index.js → semcore/spin-container/src/index.ts

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

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

website/docs/components/spin-container/spin-container-api.md

@@ -11,7 +11,7 @@ import SpinContainer from '@semcore/ui/spin-container';
 <SpinContainer />;
 ```
 
-<TypesView type="SpinContainerProps" :types={...types} />
+<TypesView type="NSSpinContainer.Props" :types={...types} />
 
 ## SpinContainer.Content