[UIK-5011][checkbox] rewrite component to ts

semcore/checkbox/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": {
     "require": "./lib/cjs/index.js",

semcore/checkbox/src/Checkbox.jsx → semcore/checkbox/src/Checkbox.tsx

@@ -1,4 +1,5 @@
 import { Box, Flex, InvalidStateBox } from '@semcore/base-components';
+import type { IRootComponentProps } from '@semcore/core';
 import { createComponent, Component, sstyled, Root } from '@semcore/core';
 import { callAllEventHandlers } from '@semcore/core/lib/utils/assignProps';
 import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
@@ -8,9 +9,14 @@ import { useColorResolver } from '@semcore/core/lib/utils/use/useColorResolver';
 import { Text as TypographyText } from '@semcore/typography';
 import React from 'react';
 
+import type { CheckboxComponent, CheckboxProps, CheckboxTextProps, CheckboxValueCheckMarkProps, CheckboxValueComponent, CheckboxValueControlProps, CheckboxValueProps } from './Checkbox.type';
 import style from './style/checkbox.shadow.css';
 
-class CheckboxRoot extends Component {
+type State = {
+  hoistedDisabled?: boolean;
+};
+
+class CheckboxRoot extends Component<CheckboxProps, never, {}, State> {
   static displayName = 'Checkbox';
   static style = style;
 
@@ -24,7 +30,7 @@ class CheckboxRoot extends Component {
     hoistedDisabled: undefined,
   };
 
-  hoistDisabled = (disabled) => {
+  hoistDisabled = (disabled: CheckboxProps['disabled']) => {
     logger.warn(
       true,
       `Don't set disabled on Checkbox.Value or Checkbox.Text, set it on Checkbox instead. Otherwise it will produce wrong SSR output.`,
@@ -100,31 +106,30 @@ class CheckboxRoot extends Component {
   }
 }
 
-class ValueRoot extends Component {
-  static defaultProps = (props) => {
+type ValuePropsFromRoot = ReturnType<InstanceType<typeof CheckboxRoot>['getValueProps']>;
+class ValueRoot extends Component<
+  ValuePropsFromRoot & CheckboxValueProps,
+  typeof ValueRoot.enhance,
+  { checked: (e: React.ChangeEvent<HTMLInputElement>) => boolean }
+> {
+  static defaultProps = () => {
     return {
-      includeInputProps: [
-        ...inputProps,
-        ...(props.includeInputProps ?? []),
-        'aria-label',
-        'aria-labelledby',
-        'aria-describedby',
-      ],
+      includeInputProps: [...inputProps, 'aria-label', 'aria-labelledby', 'aria-describedby'],
     };
   };
 
-  static enhance = [resolveColorEnhance()];
+  static enhance = [resolveColorEnhance()] as const;
   static displayName = 'Value';
   static style = style;
 
-  handleClick(e) {
+  handleClick(e: React.MouseEvent) {
     // idk for what it exists, leaving just in case it saves us from some bugs
     e.stopPropagation();
   }
 
   uncontrolledProps() {
     return {
-      checked: (e) => e.target.checked,
+      checked: (e: React.ChangeEvent<HTMLInputElement>) => e.target.checked,
     };
   }
 
@@ -151,19 +156,21 @@ class ValueRoot extends Component {
       indeterminate,
       includeInputProps,
       resolveColor,
+      children,
+      Children,
       ...other
     } = this.asProps;
     const [, checkMarkProps] = getInputProps(other, includeInputProps);
-    const { children: _children, Children: _Children, ...propsWithoutChildren } = checkMarkProps;
+
     return {
-      theme,
+      theme: resolveColor(theme),
       size,
       state,
       // keyboardFocused,
       checked,
       indeterminate,
       resolveColor,
-      ...propsWithoutChildren,
+      ...checkMarkProps,
     };
   }
 
@@ -195,13 +202,16 @@ class ValueRoot extends Component {
   }
 }
 
-function Control(props) {
+type ControlPropsFromRoot = ReturnType<InstanceType<typeof ValueRoot>['getControlProps']>;
+function Control(props: IRootComponentProps & ControlPropsFromRoot & CheckboxValueControlProps) {
   const SControl = Root;
   const { indeterminate, styles, state } = props;
-  const checkboxRef = React.useRef(null);
+  const checkboxRef = React.useRef<HTMLInputElement>(null);
 
   React.useEffect(() => {
     if (checkboxRef.current) {
+      if (indeterminate === undefined) return;
+
       checkboxRef.current.indeterminate = indeterminate;
     }
   }, [indeterminate, checkboxRef]);
@@ -218,24 +228,28 @@ function Control(props) {
 }
 Control.displayName = 'Control';
 
-function CheckMark(props) {
+type CheckMarkPropsFromRoot = ReturnType<InstanceType<typeof ValueRoot>['getCheckMarkProps']>;
+function CheckMark(props: IRootComponentProps & CheckMarkPropsFromRoot & CheckboxValueCheckMarkProps) {
   const SCheckbox = Root;
   const SInvalidPattern = InvalidStateBox;
-  const { theme, styles, resolveColor, state, checked, indeterminate } = props;
+  const { styles, state, checked, indeterminate } = props;
   return sstyled(styles)(
-    <SCheckbox render={Flex} tag='span' use:theme={resolveColor(theme)}>
+    <SCheckbox render={Flex} tag='span'>
       {state === 'invalid' && !checked && !indeterminate && <SInvalidPattern />}
     </SCheckbox>,
   );
 }
 CheckMark.displayName = 'CheckMark';
 
-function Text(props) {
+type TextPropsFromRoot = ReturnType<InstanceType<typeof CheckboxRoot>['getTextProps']>;
+function Text(props: IRootComponentProps & TextPropsFromRoot & CheckboxTextProps) {
   const SText = Root;
   const { styles, color } = props;
 
   React.useEffect(() => {
     if (props.rootDisabled !== props.disabled) {
+      if (props.disabled === undefined) return;
+
       props.hoistDisabled(props.disabled);
     }
   }, [props.rootDisabled, props.disabled, props.hoistDisabled]);
@@ -251,11 +265,11 @@ Text.displayName = 'Text';
 const Value = createComponent(ValueRoot, {
   Control,
   CheckMark,
-});
+}) as CheckboxValueComponent;
 
 const Checkbox = createComponent(CheckboxRoot, {
   Text,
   Value,
-});
-export { inputProps };
+}) as CheckboxComponent;
+
 export default Checkbox;

semcore/checkbox/src/index.d.ts → semcore/checkbox/src/Checkbox.type.ts

@@ -46,12 +46,12 @@ export type CheckboxContext = {
 
 export type CheckboxTextProps = TextProps;
 
-declare const Checkbox: Intergalactic.Component<'label', CheckboxProps, CheckboxContext> & {
-  Text: Intergalactic.Component<'span', CheckboxTextProps>;
-  Value: Intergalactic.Component<'input', CheckboxValueProps> & {
-    Control: Intergalactic.Component<'input', CheckboxValueControlProps>;
-    CheckMark: Intergalactic.Component<typeof Box, CheckboxValueCheckMarkProps>;
-  };
+export type CheckboxValueComponent = Intergalactic.Component<'input', CheckboxValueProps> & {
+  Control: Intergalactic.Component<'input', CheckboxValueControlProps>;
+  CheckMark: Intergalactic.Component<typeof Box, CheckboxValueCheckMarkProps>;
 };
 
-export default Checkbox;
+export type CheckboxComponent = Intergalactic.Component<'label', CheckboxProps, CheckboxContext> & {
+  Text: Intergalactic.Component<'span', CheckboxTextProps>;
+  Value: CheckboxValueComponent;
+};

semcore/checkbox/src/index.js → semcore/checkbox/src/index.ts

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

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

semcore/core/src/core-types/Component.ts

@@ -45,10 +45,17 @@ type BaseAsProps<Props = {}, Enhance extends readonly ((...args: any[]) => any)[
   InnerProps
 >;
 
+type UncontrolledPropValue<V> =
+  | V
+  | null
+  | ((value: V, e?: any) => void | boolean | V)
+  | ((value: V, e?: any) => void | boolean | V)[]
+  | ((e?: any) => void | boolean | V);
+
 export abstract class Component<
   Props = {},
   Enhance extends readonly ((...args: any[]) => any)[] = [],
-  Uncontrolled extends Readonly<{ [key in keyof Props]?: Props[key] | null | ((value: Props[key], e?: any) => void | boolean | Props[key]) | ((value: Props[key], e?: any) => void | boolean | Props[key])[] }> = never,
+  Uncontrolled extends Readonly<{ [key in keyof Props]?: UncontrolledPropValue<Props[key]> }> = never,
   InnerProps = {},
   State = {},
 > extends PureComponent<Props, State> {