[UIK-5075][typography] rewrite component to TS

semcore/typography/package.json

@@ -9,7 +9,7 @@
   "author": "UI-kit team <ui-kit-team@semrush.com>",
   "license": "MIT",
   "scripts": {
-    "build": "pnpm semcore-builder --source=ts,js && pnpm vite build"
+    "build": "pnpm semcore-builder && pnpm vite build"
   },
   "exports": {
     "require": "./lib/cjs/index.js",

semcore/typography/src/components/Blockquote/Blockquote.tsx

@@ -0,0 +1,34 @@
+import { Box } from '@semcore/base-components';
+import type { Intergalactic } from '@semcore/core';
+import { createBaseComponent, Root, sstyled } from '@semcore/core';
+import isNode from '@semcore/core/lib/utils/isNode';
+import React from 'react';
+
+import type { BlockquoteComponent } from './Blockquote.type';
+import styles from '../../style/blockquote.shadow.css';
+
+function BlockquoteRoot(
+  props: Intergalactic.InternalTypings.InferComponentProps<BlockquoteComponent>,
+  ref: React.ForwardedRef<HTMLQuoteElement>,
+) {
+  const SBlockquote = Root;
+  const SDoubleQuotation = 'span';
+  const SAuthor = 'cite';
+  const { author, children } = props;
+
+  return sstyled(styles)(
+    <SBlockquote render={Box} tag='blockquote' ref={ref}>
+      <SDoubleQuotation>“</SDoubleQuotation>
+      <span>
+        {children as React.ReactNode}
+        {isNode(author) && <SAuthor>{author}</SAuthor>}
+      </span>
+    </SBlockquote>,
+  );
+}
+
+BlockquoteRoot.displayName = 'Blockquote';
+
+const Blockquote = createBaseComponent(BlockquoteRoot) as BlockquoteComponent;
+
+export default Blockquote;

semcore/typography/src/components/Blockquote/Blockquote.type.ts

@@ -0,0 +1,9 @@
+import type { BoxProps } from '@semcore/base-components';
+import type { Intergalactic } from '@semcore/core';
+
+export type BlockquoteProps = BoxProps & {
+  /** Source of the quote */
+  author?: React.ReactNode;
+};
+
+export type BlockquoteComponent = Intergalactic.Component<'blockquote', BlockquoteProps, {}, []>;

semcore/typography/src/List.jsx → semcore/typography/src/components/List/List.tsx

@@ -1,13 +1,21 @@
 import { Flex } from '@semcore/base-components';
+import type { Intergalactic } from '@semcore/core';
 import { createComponent, Component, Root, sstyled } from '@semcore/core';
 import { isAdvanceMode } from '@semcore/core/lib/utils/findComponent';
 import isNode from '@semcore/core/lib/utils/isNode';
 import React from 'react';
 
-import style from './style/list.shadow.css';
-import Text from './Text';
+import type {
+  ListComponent,
+  ListItemComponent,
+  ListItemContentComponent,
+  ListItemRootComponent,
+  ListRootComponent,
+} from './List.type';
+import style from '../../style/list.shadow.css';
+import Text from '../Text/Text';
 
-class ListRoot extends Component {
+class ListRoot extends Component<Intergalactic.InternalTypings.InferComponentProps<ListRootComponent>> {
   static displayName = 'List';
   static style = style;
   static defaultProps = {
@@ -28,13 +36,15 @@ class ListRoot extends Component {
   }
 }
 
-class ItemRoot extends Component {
+class ItemRoot extends Component<
+  Intergalactic.InternalTypings.InferChildComponentProps<ListItemRootComponent, typeof ListRoot, 'Item'>
+> {
   static style = style;
   static displayName = 'Item';
 
   render() {
     const SItem = Root;
-    const { styles, children, marker: markerNode, Children } = this.asProps;
+    const { styles, marker: markerNode, Children } = this.asProps;
     const SMarker = 'span';
     const SContent = 'div';
 
@@ -43,13 +53,13 @@ class ItemRoot extends Component {
     return sstyled(styles)(
       <SItem render={Text} tag='li'>
         {isNode(markerNode) && <SMarker aria-hidden='true'>{markerNode}</SMarker>}
-        {isAdvancedMode ? <Children /> : <SContent>{children}</SContent>}
+        {isAdvancedMode ? <Children /> : <SContent><Children /></SContent>}
       </SItem>,
     );
   }
 }
 
-function Content(props) {
+function Content(props: Intergalactic.InternalTypings.InferComponentProps<ListItemContentComponent>) {
   const { styles, children } = props;
   const SContent = Root;
 
@@ -58,8 +68,8 @@ function Content(props) {
 
 Content.displayName = 'Content';
 
-const Item = createComponent(ItemRoot, { Content });
+const Item = createComponent(ItemRoot, { Content }) as ListItemComponent;
 
-const List = createComponent(ListRoot, { Item });
+const List = createComponent(ListRoot, { Item }) as ListComponent;
 
 export default List;

semcore/typography/src/components/List/List.type.ts

@@ -0,0 +1,30 @@
+import type { Flex, FlexProps } from '@semcore/base-components';
+import type { Intergalactic } from '@semcore/core';
+import type React from 'react';
+
+import type { TextProps } from '../Text/Text.type';
+
+export type ListItemProps = TextProps & {
+  /** Individual marker of a list item */
+  marker?: React.ReactNode;
+};
+
+export type ListItemContentProps = FlexProps;
+
+export type ListProps = TextProps & {
+  /** Marker of the entire list
+   * @default • */
+  marker?: React.ReactNode;
+};
+
+export type ListItemRootComponent = Intergalactic.Component<'li', ListItemProps>;
+export type ListItemContentComponent = Intergalactic.Component<typeof Flex, ListItemContentProps>;
+
+export type ListItemComponent = ListItemRootComponent & {
+  Content: ListItemContentComponent;
+};
+
+export type ListRootComponent = Intergalactic.Component<'ul', ListProps>;
+export type ListComponent = ListRootComponent & {
+  Item: ListItemComponent;
+};

semcore/typography/src/Text.tsx → semcore/typography/src/components/Text/Text.tsx

@@ -1,16 +1,23 @@
 import { Ellipsis, Hint, Box, type EllipsisSettings } from '@semcore/base-components';
+import type { Intergalactic } from '@semcore/core';
 import { Root, sstyled, Component, createComponent } from '@semcore/core';
 import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
 import React from 'react';
 
-import type { TextEllipsisProps, TextProps } from './index';
-import styles from './style/text.shadow.css';
+import type { TextComponent, TextEllipsisProps, TextProps } from './Text.type';
+import styles from '../../style/text.shadow.css';
 
 type State = {
   isEllipsized: boolean;
 };
 
-class TextRoot extends Component<TextProps, typeof TextRoot.enhance, {}, {}, State> {
+class TextRoot extends Component<
+  Intergalactic.InternalTypings.InferComponentProps<TextComponent>,
+  typeof TextRoot.enhance,
+  {},
+  {},
+  State
+> {
   private ellipsis: Ellipsis | null = null;
   private innerRef = React.createRef<HTMLElement | null>();
 
@@ -59,7 +66,8 @@ class TextRoot extends Component<TextProps, typeof TextRoot.enhance, {}, {}, Sta
 
   render(): React.ReactNode {
     const SText = Root;
-    const { color, underline, lineThrough, hint, hintProps, children, ellipsis, ellipsisProps, resolveColor } = this.asProps;
+    const { color, underline, lineThrough, hint, hintProps, children, ellipsis, ellipsisProps, resolveColor } =
+      this.asProps;
     const { isEllipsized } = this.state;
 
     const cropPosition = ellipsisProps?.cropPosition ?? 'end';
@@ -84,7 +92,11 @@ class TextRoot extends Component<TextProps, typeof TextRoot.enhance, {}, {}, Sta
           maxLine={maxLineValue}
           trim={cropPosition}
         />
-        {isEllipsized && withHint && <Hint triggerRef={this.innerRef} {...hintProps}>{children}</Hint>}
+        {isEllipsized && withHint && (
+          <Hint triggerRef={this.innerRef} {...hintProps}>
+            {children}
+          </Hint>
+        )}
       </>,
     );
   }
@@ -98,7 +110,8 @@ class TextRoot extends Component<TextProps, typeof TextRoot.enhance, {}, {}, Sta
     const shouldInit = hint !== false || ellipsisProps?.cropPosition === 'middle';
 
     if (shouldInit && (ellipsis || ellipsisProps) && this.innerRef.current) {
-      this.ellipsis = ellipsis instanceof Ellipsis ? ellipsis : new Ellipsis(this.innerRef.current, ellipsisProps ?? {});
+      this.ellipsis =
+        ellipsis instanceof Ellipsis ? ellipsis : new Ellipsis(this.innerRef.current, ellipsisProps ?? {});
 
       this.ellipsis.on('isEllipsized', this.handleEllipsized);
     }
@@ -121,4 +134,6 @@ class TextRoot extends Component<TextProps, typeof TextRoot.enhance, {}, {}, Sta
   }
 }
 
-export default createComponent(TextRoot);
+const Text = createComponent(TextRoot) as TextComponent;
+
+export default Text;

semcore/typography/src/index.d.ts → semcore/typography/src/components/Text/Text.type.ts

@@ -1,7 +1,6 @@
-import type { BoxProps, Flex, FlexProps, EllipsisSettings, SimpleHintPopperProps, Ellipsis } from '@semcore/base-components';
-import type { PropGetterFn, Intergalactic } from '@semcore/core';
+import type { BoxProps, EllipsisSettings, SimpleHintPopperProps, Ellipsis } from '@semcore/base-components';
+import type { Intergalactic } from '@semcore/core';
 import type { Property } from 'csstype';
-import type React from 'react';
 
 export type TextHintProps = {
   /** Manually enabled/disabled Hint */
@@ -80,38 +79,4 @@ export type TextProps = BoxProps & BaseTextProps & (
   } & TextHintProps & TextEllipsisProps)
 );
 
-export type ListProps = TextProps & {
-  /** Marker of the entire list
-   * @default • */
-  marker?: React.ReactNode;
-};
-
-export type ListItemProps = TextProps & {
-  /** Individual marker of a list item */
-  marker?: React.ReactNode;
-};
-
-export type ListItemContentProps = FlexProps;
-
-export type ListContext = {
-  getItemProps: PropGetterFn;
-};
-
-export type BlockquoteProps = BoxProps & {
-  /** Source of the quote */
-  author?: React.ReactNode;
-};
-
-declare const Item: Intergalactic.Component<'li', ListItemProps> & {
-  Content: Intergalactic.Component<typeof Flex, ListItemContentProps>;
-};
-
-declare const List: Intergalactic.Component<'ul', ListProps> & {
-  Item: typeof Item;
-};
-
-declare const Text: Intergalactic.Component<'span', TextProps>;
-
-declare const Blockquote: Intergalactic.Component<'blockquote', BlockquoteProps>;
-
-export { Text, List, Blockquote };
+export type TextComponent = Intergalactic.Component<'span', TextProps>;

semcore/typography/src/index.ts

@@ -0,0 +1,7 @@
+export { default as Text } from './components/Text/Text';
+export { default as Blockquote } from './components/Blockquote/Blockquote';
+export { default as List } from './components/List/List';
+
+export * from './components/Text/Text.type';
+export * from './components/Blockquote/Blockquote.type';
+export * from './components/List/List.type';

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