[UIK-5136][chore] rewrite slider/color-picker/counter component to TS. Core types update

playground/entries/ColorPicker.tsx

@@ -1,12 +1,12 @@
-import type { ColorPickerProps } from '@semcore/ui/color-picker';
+import type { NSColorPicker } from '@semcore/ui/color-picker';
 import ColorPicker from '@semcore/ui/color-picker';
 import React from 'react';
 
 import type { JSXProps } from '../types/JSXProps';
 import type { PlaygroundEntry } from '../types/Playground';
 import createGithubLink from '../utils/createGHLink';
 
-export type ColorPickerJSXProps = JSXProps<ColorPickerProps>;
+export type ColorPickerJSXProps = JSXProps<NSColorPicker.Props>;
 
 function getJSX({ handleControlChange, ...colorPickerProps }: ColorPickerJSXProps) {
   return <ColorPicker {...colorPickerProps} />;

playground/entries/Counter.tsx

@@ -1,12 +1,12 @@
-import type { CounterProps } from '@semcore/ui/counter';
+import type { NSCounter } from '@semcore/ui/counter';
 import Counter from '@semcore/ui/counter';
 import React from 'react';
 
 import type { JSXProps } from '../types/JSXProps';
 import type { PlaygroundEntry } from '../types/Playground';
 import createGithubLink from '../utils/createGHLink';
 
-export type CounterJSXProps = JSXProps<CounterProps>;
+export type CounterJSXProps = JSXProps<NSCounter.Props>;
 
 function getJSX({ handleControlChange, ...counterProps }: CounterJSXProps) {
   return <Counter {...counterProps} />;

semcore/accordion/src/Accordion.tsx

@@ -14,13 +14,16 @@ import style from './style/accordion.shadow.css';
 class RootAccordion extends Component<
   Intergalactic.InternalTypings.InferComponentProps<NSAccordion.Component>,
   typeof RootAccordion.enhance,
-  NSAccordion.Handlers
+  NSAccordion.Handlers,
+  {},
+  {},
+  NSAccordion.DefaultProps
 > {
   static displayName = 'Accordion';
   static style = style;
   static defaultProps = {
     defaultValue: [],
-    use: 'secondary',
+    use: 'secondary' as const,
   };
 
   static enhance = [
@@ -209,16 +212,22 @@ function Collapse(
   );
 }
 
-const Item = createComponent(RootItem, {
+const Item = createComponent<
+  NSAccordion.Item.Component,
+  typeof RootItem
+>(RootItem, {
   Toggle,
   Chevron,
   ToggleButton,
   Collapse,
-}) as NSAccordion.Item.Component;
+});
 
-const Accordion = createComponent(RootAccordion, {
+const Accordion = createComponent<
+  NSAccordion.Component,
+  typeof RootAccordion
+>(RootAccordion, {
   Item,
-}) as unknown as NSAccordion.Component;
+});
 
 export const wrapAccordion = <PropsExtending extends {}>(
   wrapper: (

semcore/accordion/src/Accordion.type.ts

@@ -8,23 +8,23 @@ declare namespace NSAccordion {
   type Value = null | number | string | Array<number | string | null>;
   type Props<V extends NSAccordion.Value = NSAccordion.Value> = FlexProps & {
   /** Value for the active tab. Can be set as stroke, number, null or as array.
-   * @type AccordionValue
+   * @type NSAccordion.Value
    * */
     value?: V;
     /**
    * Value of the active tabs selected by default
-   * @type AccordionValue
+   * @type NSAccordion.Value
    * @default []
    */
     defaultValue?: V;
     /** Called when the selection is changed
-   * @type (value: AccordionValue, event?: React.SyntheticEvent) => void
+   * @type (value: NSAccordion.Value, event?: React.SyntheticEvent) => void
    * */
     onChange?:
       | ((value: V, event?: React.SyntheticEvent) => void)
       | React.Dispatch<React.SetStateAction<V>>;
     /** Animation duration of each Accordion.Item inside
-   * @default 350 */
+   * @default 200 */
     duration?: number;
     /**
    * Changes the visual appearance of the component
@@ -38,6 +38,10 @@ declare namespace NSAccordion {
   type Handlers = {
     value: Props['value'];
   };
+  type DefaultProps = {
+    defaultValue: Value;
+    use: 'secondary';
+  };
   namespace Item {
     type Props = {
       /** Tab value */

semcore/add-filter/package.json

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

semcore/add-filter/src/AddFilter.tsx

@@ -1,6 +1,7 @@
 import { Flex, ScreenReaderOnly } from '@semcore/base-components';
 import Button from '@semcore/button';
 import { createComponent, Component, Root, lastInteraction } from '@semcore/core';
+import type { WithI18nEnhanceProps } from '@semcore/core/lib/utils/enhances/i18nEnhance';
 import i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';
 import { extractFrom } from '@semcore/core/lib/utils/findComponent';
 import DropdownMenu from '@semcore/dropdown-menu';
@@ -9,7 +10,7 @@ import MathPlusM from '@semcore/icon/MathPlus/m';
 import type { SelectProps } from '@semcore/select';
 import React from 'react';
 
-import type { AddFilterType, AddFilterProps, AddFilterItemProps, AddFilterKey } from './AddFilter.types';
+import type { AddFilterType, AddFilterProps, AddFilterItemProps, AddFilterKey, AddFilterDefaultProps } from './AddFilter.types';
 import AddFilterDropdown from './components/AddFilterDropdown';
 import AddFilterInput from './components/AddFilterInput';
 import AddFilterSelect from './components/AddFilterSelect';
@@ -39,10 +40,9 @@ class RootAddFilter extends Component<
   AddFilterProps,
   typeof RootAddFilter.enhance,
   { visibleFilters: null },
-  {
-    visibleFilters: Exclude<AddFilterProps['visibleFilters'], undefined>;
-  },
-  AddFilterState
+  WithI18nEnhanceProps,
+  AddFilterState,
+  AddFilterDefaultProps
 > {
   addFilterTrigger = React.createRef<HTMLButtonElement>();
   filtersFocusMap: Map<string | undefined, HTMLElement> = new Map();
@@ -51,7 +51,8 @@ class RootAddFilter extends Component<
 
   static displayName = 'AddFilter';
   static enhance = [i18nEnhance(localizedMessages)] as const;
-  static defaultProps = {
+
+  static defaultProps: AddFilterDefaultProps = {
     i18n: localizedMessages,
     locale: 'en',
     defaultVisibleFilters: [],
@@ -305,10 +306,13 @@ function ClearAllFilters({ hasFilterData, clearAll, getI18nText }: ClearAllFilte
     : null;
 }
 
-const AddFilter = createComponent(RootAddFilter, {
+const AddFilter = createComponent<
+  AddFilterType,
+  typeof RootAddFilter
+>(RootAddFilter, {
   Select: AddFilterSelect,
   Input: AddFilterInput,
   Dropdown: AddFilterDropdown,
-}) as AddFilterType;
+});
 
 export default AddFilter;

semcore/add-filter/src/AddFilter.types.ts

@@ -7,6 +7,8 @@ import type { DropdownTriggerProps } from '@semcore/dropdown';
 import type Input from '@semcore/input';
 import type Select from '@semcore/select';
 
+import type { LocalizedMessages } from './translations/__intergalactic-dynamic-locales';
+
 export type AddFilterKey = string;
 
 export type AddFilterItemProps = {
@@ -74,6 +76,11 @@ export type AddFilterProps = FlexProps & {
    */
   onVisibleFiltersChange?: (visibleFilters: AddFilterKey[]) => void;
 };
+export type AddFilterDefaultProps = {
+  i18n: LocalizedMessages;
+  locale: 'en';
+  defaultVisibleFilters: AddFilterProps['visibleFilters'];
+};
 
 export type AddFilterType = Intergalactic.Component<'div', AddFilterProps> & {
   Dropdown: typeof AddFilterDropdownType;

semcore/add-filter/src/components/AddFilterDropdown.tsx

@@ -3,22 +3,30 @@ import { createComponent, Component, Root } from '@semcore/core';
 import Dropdown from '@semcore/dropdown';
 import React from 'react';
 
-import type { AddFilterItemProps } from '../AddFilter.types';
+import type { AddFilterDropdownType, AddFilterItemProps } from '../AddFilter.types';
 
 type AsPropsTypeWithHandlers<T> = T & {
   onClear: () => void;
   unsetFocusRef: () => void;
   setFocusRef: (el: HTMLElement) => {};
 };
 
-class AddFilterDropdownRoot extends Component<AddFilterItemProps, [], { visible: null }> {
+type DefaultProps = {
+  defaultVisible: true;
+};
+class AddFilterDropdownRoot extends Component<
+  AddFilterItemProps,
+  [],
+  { visible: null },
+  {},
+  {},
+  DefaultProps
+> {
   static displayName = 'AddFilterDropdown';
 
-  static defaultProps = () => {
-    return {
-      defaultVisible: true,
-    };
-  };
+  static defaultProps = {
+    defaultVisible: true,
+  } as const;
 
   uncontrolledProps() {
     return {
@@ -64,7 +72,10 @@ class AddFilterDropdownRoot extends Component<AddFilterItemProps, [], { visible:
   }
 }
 
-const AddFilterDropdown = createComponent(AddFilterDropdownRoot, {
+const AddFilterDropdown = createComponent<
+  typeof AddFilterDropdownType,
+  typeof AddFilterDropdownRoot
+>(AddFilterDropdownRoot, {
   Trigger: Dropdown.Trigger,
   Popper: Dropdown.Popper,
 });

semcore/add-filter/src/components/AddFilterInput.tsx

@@ -4,7 +4,7 @@ import Input from '@semcore/input';
 import type { InputValueProps } from '@semcore/input';
 import React from 'react';
 
-import type { AddFilterItemProps } from '../AddFilter.types';
+import type { AddFilterInputType, AddFilterItemProps } from '../AddFilter.types';
 
 type AsPropsWithOnClear<T> = T & {
   onClear: () => void;
@@ -55,7 +55,10 @@ function Clear() {
   return <Root render={ButtonLink} />;
 }
 
-const AddFilterInput = createComponent(AddFilterInputRoot, {
+const AddFilterInput = createComponent<
+  typeof AddFilterInputType,
+  typeof AddFilterInputRoot
+>(AddFilterInputRoot, {
   Value: Input.Value,
   Addon: Input.Addon,
   Clear,

semcore/add-filter/src/components/AddFilterSelect.tsx

@@ -10,14 +10,24 @@ type AsPropsWithOnClear<T> = T & {
   unsetFocusRef: () => void;
   setFocusRef: (el: HTMLElement) => {};
 };
-class AddFilterSelectRoot extends Component<SelectProps & AddFilterItemProps, [], { visible: null }> {
+
+type DefaultProps = {
+  defaultVisible: true;
+};
+
+class AddFilterSelectRoot extends Component<
+  SelectProps & AddFilterItemProps,
+  [],
+  { visible: null },
+  {},
+  {},
+  DefaultProps
+> {
   static displayName = 'AddFilterSelect';
 
-  static defaultProps = () => {
-    return {
-      defaultVisible: true,
-    };
-  };
+  static defaultProps = {
+    defaultVisible: true,
+  } as const;
 
   componentWillUnmount() {
     this.asProps.onUnmount?.();
@@ -64,7 +74,10 @@ class AddFilterSelectRoot extends Component<SelectProps & AddFilterItemProps, []
   }
 }
 
-const AddFilterSelect = createComponent(AddFilterSelectRoot, {
+const AddFilterSelect: typeof AddFilterSelectType = createComponent<
+  typeof AddFilterSelectType,
+  typeof AddFilterSelectRoot
+>(AddFilterSelectRoot, {
   Trigger: Select.Trigger,
   Menu: Select.Menu,
   Option: [
@@ -76,6 +89,6 @@ const AddFilterSelect = createComponent(AddFilterSelectRoot, {
   List: Select.List,
   Popper: Select.Popper,
   InputSearch: Select.InputSearch,
-}) as typeof AddFilterSelectType;
+});
 
 export default AddFilterSelect;

semcore/add-filter/src/translations/__intergalactic-dynamic-locales.ts

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

semcore/badge/src/Badge.tsx

@@ -1,5 +1,6 @@
 import type { BoxProps } from '@semcore/base-components';
 import { Box } from '@semcore/base-components';
+import type { Intergalactic } from '@semcore/core';
 import { createComponent, Component, Root, sstyled } from '@semcore/core';
 import i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';
 import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
@@ -49,6 +50,8 @@ export type BadgeProps = BadgeMargins & {
   color?: 'white' | 'gray20' | string;
 };
 
+type BadgeComponent = Intergalactic.Component<'span', BadgeProps>;
+
 class RootBadge extends Component<BadgeProps, typeof RootBadge.enhance> {
   static displayName = 'Badge';
   static style = style;
@@ -115,4 +118,7 @@ class RootBadge extends Component<BadgeProps, typeof RootBadge.enhance> {
   }
 }
 
-export const Badge = createComponent<'span', BadgeProps>(RootBadge);
+export const Badge = createComponent<
+  BadgeComponent,
+  typeof RootBadge
+>(RootBadge);