@true-engineering/true-react-common-ui-kit 2.6.0 → 3.0.0-alpha.0

package/dist/types.d.ts

@@ -1,12 +1,13 @@
 import { ReactElement } from 'react';
-import { Styles } from 'react-jss';
 import { Modifier, Placement } from 'react-overlays/usePopper';
-import type { ICommonIcon, IComplexIcon, IIconType, IPreloaderSvgType, ISvgIcon } from './components';
+import type { IIconType } from './components';
 export interface IDataAttributes {
     [key: string]: unknown;
 }
-export interface ICommonProps {
+export interface ICommonProps<TweakStyles> {
     data?: IDataAttributes;
+    testId?: string;
+    tweakStyles?: TweakStyles;
 }
 export interface IDropdownWithPopperOptions {
     shouldUsePopper?: boolean;
@@ -19,22 +20,3 @@ export interface IDropdownWithPopperOptions {
     flipOptions?: Record<string, any>;
 }
 export declare type IIcon = IIconType | ReactElement;
-export declare type ComponentStyles<StyleSheet, Props = unknown> = Partial<Styles<keyof StyleSheet, Props>>;
-export declare type ComponentName = 'AccountInfo' | 'AddButton' | 'Button' | 'CloseButton' | 'Checkbox' | 'CssBaseline' | 'Colors' | 'DateInput' | 'DatePicker' | 'DatePickerHeader' | 'Description' | 'DotsPreloader' | 'SvgPreloader' | 'FiltersPane' | 'FilterInterval' | 'FilterSelect' | 'FilterWithDates' | 'FilterWithPeriod' | 'FilterWrapper' | 'FilterValueView' | 'FiltersPaneSearch' | 'Flag' | 'FlexibleTable' | 'Icon' | 'IncrementInput' | 'Input' | 'List' | 'Modal' | 'MoreMenu' | 'MultiSelect' | 'MultiSelectInput' | 'MultiSelectList' | 'Notification' | 'PhoneInput' | 'PhoneInputCountryList' | 'RadioButton' | 'SearchInput' | 'Select' | 'SelectList' | 'ScrollIntoViewIfNeeded' | 'Switch' | 'TextArea' | 'TextWithInfo' | 'TextWithTooltip' | 'ThemedPreloader' | 'Tooltip' | 'Toaster';
-export declare type UiKitAnimations = Record<string, any>;
-export declare type UiKitHelpers = Record<string, Styles | (() => Styles)>;
-export interface UiKitTheme {
-    name: string;
-    components?: Partial<Record<ComponentName, ComponentStyles<any, any>>>;
-    /**
-     * Для переопределения иконок, которые есть в UiKit
-     */
-    icons?: Partial<Record<ICommonIcon, ISvgIcon>>;
-    complexIcons?: Partial<Record<IComplexIcon, string>>;
-    preloaders?: Partial<Record<IPreloaderSvgType, string>>;
-    animations?: UiKitAnimations;
-    colors?: Record<string, string>;
-    dimensions?: Record<string, number>;
-    boxShadows?: Record<string, string>;
-    helpers?: UiKitHelpers;
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "2.6.0",
+  "version": "3.0.0-alpha.0",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [
@@ -42,7 +42,7 @@
     "types-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@true-engineering/true-react-platform-helpers": "0.0.5",
+    "@true-engineering/true-react-platform-helpers": "0.0.6",
     "clsx": "1.2.1",
     "country-flag-icons": "1.5.5",
     "date-fns": "2.29.3",

package/src/components/AccountInfo/AccountInfo.styles.ts

@@ -1,9 +1,7 @@
-import { animations } from '../../theme';
-import { ComponentStyles } from '../../types';
+import { animations, createThemedStyles, ITweakStyles } from '../../theme';
+import { IListStyles } from '../List';
 
-//
-
-export const styles = {
+export const useStyles = createThemedStyles('AccountInfo', {
   root: {
     display: 'flex',
   },
@@ -48,8 +46,6 @@ export const styles = {
   },
 
   ...animations.slideUp,
+});
 
-  tweakList: {},
-};
-
-export type AccountInfoStyles = ComponentStyles<typeof styles>;
+export type IAccountInfoStyles = ITweakStyles<typeof useStyles, { tweakList: IListStyles }>;

package/src/components/AccountInfo/AccountInfo.tsx

@@ -1,16 +1,16 @@
 import { FC, ReactNode, useRef, useState, MouseEvent } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import clsx from 'clsx';
+import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
-import { useOnClickOutsideWithRef, useTheme, useTweakStyles } from '../../hooks';
+import { useOnClickOutsideWithRef, useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
 import { IListProps, List } from '../List';
 import { ANIMATION_TIMEOUT } from './constants';
-import { AccountInfoStyles, styles } from './AccountInfo.styles';
+import { useStyles, IAccountInfoStyles } from './AccountInfo.styles';
 
-export interface IAccountInfoProps extends ICommonProps {
-  tweakStyles?: AccountInfoStyles;
+export interface IAccountInfoProps extends ICommonProps<IAccountInfoStyles> {
   avatar?: ReactNode;
   accountName: ReactNode;
   options: IListProps['items'];
@@ -18,15 +18,20 @@ export interface IAccountInfoProps extends ICommonProps {
 
 export const AccountInfo: FC<IAccountInfoProps> = ({
   data,
+  testId,
   avatar,
   tweakStyles,
   accountName,
   options,
 }) => {
-  // TODO: потестить
-  const { classes, componentStyles } = useTheme('AccountInfo', styles, tweakStyles, {
-    timeout: ANIMATION_TIMEOUT,
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakListStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakList',
+    currentComponentName: 'AccountInfo',
   });
+
   const nameRef = useRef<HTMLDivElement>(null);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
@@ -39,10 +44,8 @@ export const AccountInfo: FC<IAccountInfoProps> = ({
 
   useOnClickOutsideWithRef(dropdownRef, () => setIsMenuOpen(false), nameRef);
 
-  const tweakListStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakList');
-
   return (
-    <div className={classes.root} {...addDataAttributes(data)} tabIndex={0}>
+    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
       {avatar ?? (
         <div className={classes.avatarIcon}>
           <Icon type="avatar" />

package/src/components/AccountInfo/constants.ts

@@ -1 +1 @@
-export const ANIMATION_TIMEOUT = 150;
+export const ANIMATION_TIMEOUT = 150; // такой же тайминг должен быть в стилях анимации

package/src/components/AccountInfo/index.ts

@@ -1,2 +1,2 @@
 export * from './AccountInfo';
-export type { AccountInfoStyles } from './AccountInfo.styles';
+export type { IAccountInfoStyles } from './AccountInfo.styles';

package/src/components/AddButton/AddButton.styles.ts

@@ -1,6 +1,6 @@
-import { ComponentStyles } from '../../types';
+import { createThemedStyles, ITweakStyles } from '../../theme';
 
-export const styles = {
+export const useStyles = createThemedStyles('AddButton', {
   root: {
     display: 'flex',
     alignItems: 'center',
@@ -29,6 +29,6 @@ export const styles = {
   fullWidth: {
     width: '100%',
   },
-};
+});
 
-export type AddButtonStyles = ComponentStyles<typeof styles>;
+export type IAddButtonStyles = ITweakStyles<typeof useStyles>;

package/src/components/AddButton/AddButton.tsx

@@ -1,13 +1,12 @@
 import { FC } from 'react';
 import clsx from 'clsx';
+import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
-import { useTheme } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
-import { AddButtonStyles, styles } from './AddButton.styles';
+import { useStyles, IAddButtonStyles } from './AddButton.styles';
 
-export interface IAddButtonProps extends ICommonProps {
-  tweakStyles?: AddButtonStyles;
+export interface IAddButtonProps extends ICommonProps<IAddButtonStyles> {
   text: string;
   type?: 'submit' | 'button';
   isDisabled?: boolean;
@@ -23,9 +22,10 @@ export const AddButton: FC<IAddButtonProps> = ({
   onClick,
   isFullWidth,
   data,
+  testId,
   tweakStyles,
 }) => {
-  const { classes } = useTheme('AddButton', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
 
   return (
     <button
@@ -37,10 +37,11 @@ export const AddButton: FC<IAddButtonProps> = ({
       )}
       onClick={!isDisabled ? onClick : undefined}
       disabled={isDisabled}
+      {...addDataTestId(testId)}
       {...addDataAttributes(data)}
     >
       <div className={classes.icon}>
-        <Icon type={'plus'} />
+        <Icon type="plus" />
       </div>
       <div>{text}</div>
     </button>

package/src/components/AddButton/index.ts

@@ -1,2 +1,2 @@
 export * from './AddButton';
-export type { AddButtonStyles } from './AddButton.styles';
+export type { IAddButtonStyles } from './AddButton.styles';

package/src/components/Button/Button.styles.ts

@@ -1,7 +1,8 @@
-import { ComponentStyles } from '../../types';
-import { ThemedPreloaderStyles } from '../ThemedPreloader';
+import { createThemedStyles, ITweakStyles } from '../../theme';
+import { IThemedPreloaderStyles } from '../ThemedPreloader';
+import { IButtonSize } from './types';
 
-export const styles = {
+export const useStyles = createThemedStyles('Button', {
   root: {
     display: 'flex',
     justifyContent: 'center',
@@ -180,12 +181,10 @@ export const styles = {
   },
 
   disabled: {},
+});
 
-  tweakPreloader: {},
-};
-
-export const dotsPreloaderStyles: ThemedPreloaderStyles = {
-  tweakPreloaderComponent: {
+const dotsPreloaderStyles: IThemedPreloaderStyles = {
+  tweakDotsPreloader: {
     fadedDot: {
       width: 6,
       height: 6,
@@ -193,4 +192,10 @@ export const dotsPreloaderStyles: ThemedPreloaderStyles = {
   },
 };
 
-export type ButtonStyles = ComponentStyles<typeof styles>;
+export const getPreloaderStyles = (size: IButtonSize): IThemedPreloaderStyles | undefined =>
+  size === 's' || size === 'm' ? dotsPreloaderStyles : undefined;
+
+export type IButtonStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakPreloader: IThemedPreloaderStyles }
+>;

package/src/components/Button/Button.tsx

@@ -1,17 +1,15 @@
-import { useMemo, ReactNode, ButtonHTMLAttributes, MouseEvent, forwardRef } from 'react';
+import { ReactNode, ButtonHTMLAttributes, MouseEvent, forwardRef } from 'react';
 import clsx from 'clsx';
-import merge from 'lodash-es/merge';
 import { addDataTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
 import { renderIcon } from '../../helpers/snippets';
-import { useTheme } from '../../hooks';
+import { useTweakStyles } from '../../hooks';
 import { ICommonProps, IIcon } from '../../types';
-import { ThemedPreloader, IThemedPreloaderProps, ThemedPreloaderStyles } from '../ThemedPreloader';
+import { ThemedPreloader, IThemedPreloaderProps } from '../ThemedPreloader';
 import { IButtonSize, IButtonView } from './types';
-import { ButtonStyles, styles, dotsPreloaderStyles } from './Button.styles';
+import { useStyles, IButtonStyles, getPreloaderStyles } from './Button.styles';
 
-export interface IButtonProps extends ICommonProps {
-  tweakStyles?: ButtonStyles;
+export interface IButtonProps extends ICommonProps<IButtonStyles> {
   children?: ReactNode;
   /**
    * @default `button`
@@ -60,7 +58,6 @@ export interface IButtonProps extends ICommonProps {
    * @default `dots`
    */
   preloaderType?: IThemedPreloaderProps['type'];
-  testId?: string;
   onClick?(event: MouseEvent<HTMLButtonElement>): void | Promise<void>;
   onMouseDown?(event: MouseEvent<HTMLButtonElement>): void | Promise<void>;
 }
@@ -89,18 +86,14 @@ export const Button = forwardRef<HTMLButtonElement, IButtonProps>(
     },
     ref,
   ) => {
-    const { classes, componentStyles } = useTheme('Button', styles, tweakStyles);
+    const classes = useStyles({ theme: tweakStyles });
 
-    const tweakPreloaderStyles = useMemo(
-      () =>
-        merge(
-          {},
-          size === 's' || size === 'm' ? dotsPreloaderStyles : undefined,
-          componentStyles.tweakPreloader,
-          tweakStyles?.tweakPreloader,
-        ) as ThemedPreloaderStyles,
-      [tweakStyles?.tweakPreloader, size],
-    );
+    const tweakPreloaderStyles = useTweakStyles({
+      innerStyles: getPreloaderStyles(size),
+      tweakStyles,
+      className: 'tweakPreloader',
+      currentComponentName: 'Button',
+    });
 
     const hasIcon = isReactNodeNotEmpty(icon);
     const hasChildren = isReactNodeNotEmpty(children);

package/src/components/Button/index.ts

@@ -1,3 +1,3 @@
 export * from './Button';
 export * from './types';
-export type { ButtonStyles } from './Button.styles';
+export type { IButtonStyles } from './Button.styles';

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -6,18 +6,12 @@ export default {
   component: Checkbox,
   args: {
     value: 'value',
-    size: 18,
-    alignItems: 'center',
     labelPosition: 'right',
     isReadonly: false,
     isInvalid: false,
     isDisabled: false,
     isSemiChecked: false,
   },
-  argTypes: {
-    value: { control: 'text' },
-    alignItems: { control: 'inline-radio', options: ['top', 'center'] },
-  },
   parameters: {
     controls: {
       exclude: ['data', 'tweakStyles', 'testId', 'onSelect'],
@@ -26,7 +20,9 @@ export default {
 } as ComponentMeta<typeof Checkbox>;
 
 export const Default: ComponentStory<typeof Checkbox> = (args) => (
-  <Checkbox {...args} onSelect={(value) => console.log('Value was selected', value)}>
-    <div>some text</div>
-  </Checkbox>
+  <div style={{ width: 200 }}>
+    <Checkbox {...args} onSelect={(value) => console.log('Value was selected', value)}>
+      <div>Some text</div>
+    </Checkbox>
+  </div>
 );

package/src/components/Checkbox/Checkbox.styles.ts

@@ -1,18 +1,11 @@
-import { ComponentStyles } from '../../types';
-import type { ICheckboxProps } from './Checkbox';
+import { createThemedStyles, ITweakStyles } from '../../theme';
 
-interface IStyleProps {
-  size: NonNullable<ICheckboxProps<unknown>['size']>;
-  alignItems: NonNullable<ICheckboxProps<unknown>['alignItems']>;
-  textMargin: ICheckboxProps<unknown>['textMargin'];
-}
-
-export const styles = {
+export const useStyles = createThemedStyles('Checkbox', {
   root: {
     cursor: 'pointer',
     display: 'flex',
-    alignItems: ({ alignItems }: IStyleProps): string =>
-      alignItems === 'top' ? 'flex-start' : 'center',
+    gap: 14,
+    width: 'fit-content',
   },
 
   disabled: {
@@ -28,18 +21,15 @@ export const styles = {
   },
 
   children: {
-    maxWidth: 'calc(100% - 32px)',
     display: 'flex',
     alignItems: 'center',
   },
 
   check: {
-    width: ({ size }: IStyleProps): number => size,
-    height: ({ size }: IStyleProps): number => size,
+    width: 18,
+    height: 18,
     borderRadius: 2,
     flexShrink: 0,
-    marginRight: ({ size, textMargin }: IStyleProps): number =>
-      textMargin !== undefined ? textMargin : size - 4,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
@@ -50,13 +40,7 @@ export const styles = {
 
   labelPositionLeft: {
     flexDirection: 'row-reverse',
-
-    '& $check': {
-      marginRight: 0,
-      marginLeft: ({ size, textMargin }: IStyleProps): number =>
-        textMargin !== undefined ? textMargin : size - 4,
-    },
   },
-};
+});
 
-export type CheckboxStyles = ComponentStyles<typeof styles, IStyleProps>;
+export type ICheckboxStyles = ITweakStyles<typeof useStyles>;

package/src/components/Checkbox/Checkbox.tsx

@@ -6,13 +6,11 @@ import {
   isReactNodeNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
-import { useTheme } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
-import { CheckboxStyles, styles } from './Checkbox.styles';
+import { useStyles, ICheckboxStyles } from './Checkbox.styles';
 
-export interface ICheckboxProps<V> extends ICommonProps {
-  tweakStyles?: CheckboxStyles;
+export interface ICheckboxProps<V> extends ICommonProps<ICheckboxStyles> {
   children?: ReactNode;
   isChecked?: boolean;
   isSemiChecked?: boolean;
@@ -20,23 +18,10 @@ export interface ICheckboxProps<V> extends ICommonProps {
   isReadonly?: boolean;
   isInvalid?: boolean;
   value: V;
-  /**
-   * @default 18
-   */
-  size?: number;
-  /**
-   * @default `center`
-   */
-  alignItems?: 'top' | 'center';
-  /**
-   * @default `size - 4px`
-   */
-  textMargin?: number;
   /**
    * @default `right`
    */
   labelPosition?: 'right' | 'left';
-  testId?: string;
   onSelect(value: { value: V; isSelected: boolean }): void;
 }
 
@@ -46,9 +31,6 @@ export function Checkbox<V>({
   isReadonly,
   isChecked = false,
   value,
-  size = 18,
-  alignItems = 'center',
-  textMargin,
   data,
   testId,
   isSemiChecked,
@@ -56,11 +38,7 @@ export function Checkbox<V>({
   tweakStyles,
   onSelect,
 }: ICheckboxProps<V>): JSX.Element {
-  const { classes } = useTheme('Checkbox', styles, tweakStyles, {
-    size,
-    alignItems,
-    textMargin,
-  });
+  const classes = useStyles({ theme: tweakStyles });
 
   const [isSelected, setIsSelected] = useState(false);
 

package/src/components/Checkbox/index.ts

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

package/src/components/CloseButton/CloseButton.styles.ts

@@ -1,8 +1,7 @@
 import { rgba } from '../../helpers';
-import { colors } from '../../theme';
-import { ComponentStyles } from '../../types';
+import { colors, createThemedStyles, ITweakStyles } from '../../theme';
 
-export const styles = {
+export const useStyles = createThemedStyles('CloseButton', {
   root: {
     width: 40,
     height: 40,
@@ -29,6 +28,6 @@ export const styles = {
       backgroundColor: rgba(colors.FONT_DISABLED, 0.5),
     },
   },
-};
+});
 
-export type CloseButtonStyles = ComponentStyles<typeof styles>;
+export type ICloseButtonStyles = ITweakStyles<typeof useStyles>;

package/src/components/CloseButton/CloseButton.tsx

@@ -1,15 +1,13 @@
 import { FC } from 'react';
+import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
-import { useTheme } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
-import { CloseButtonStyles, styles } from './CloseButton.styles';
+import { useStyles, ICloseButtonStyles } from './CloseButton.styles';
 
-export interface ICloseButtonProps extends ICommonProps {
-  tweakStyles?: CloseButtonStyles;
-  testId?: string;
-  onClose?: () => void;
+export interface ICloseButtonProps extends ICommonProps<ICloseButtonStyles> {
   iconType?: 'close' | 'close-large' | 'close-window';
+  onClose?(): void;
 }
 
 export const CloseButton: FC<ICloseButtonProps> = ({
@@ -19,14 +17,14 @@ export const CloseButton: FC<ICloseButtonProps> = ({
   iconType = 'close',
   onClose,
 }) => {
-  const { classes } = useTheme('CloseButton', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
 
   return (
     <button
       type="button"
       className={classes.root}
       onClick={onClose}
-      data-testid={testId}
+      {...addDataTestId(testId)}
       {...addDataAttributes(data)}
     >
       <Icon type={iconType} />

package/src/components/CloseButton/index.ts

@@ -1,2 +1,2 @@
 export * from './CloseButton';
-export type { CloseButtonStyles } from './CloseButton.styles';
+export type { ICloseButtonStyles } from './CloseButton.styles';

package/src/components/Colors/Colors.styles.ts

@@ -1,6 +1,6 @@
-import { ComponentStyles } from '../../types';
+import { createThemedStyles } from '../../theme';
 
-export const styles = {
+export const useStyles = createThemedStyles({
   root: {
     display: 'flex',
     flexWrap: 'wrap',
@@ -33,6 +33,4 @@ export const styles = {
     fontWeight: 'bold',
     padding: [0, 6, 6],
   },
-};
-
-export type ColorsStyles = ComponentStyles<typeof styles>;
+});

package/src/components/Colors/Colors.tsx

@@ -1,11 +1,11 @@
 import { FC, useContext } from 'react';
-import { useTheme, ThemeContext } from '../../hooks';
-import { styles } from './Colors.styles';
+import { ThemeContext } from '../../theme';
+import { useStyles } from './Colors.styles';
 
 // TODO: А зачем нужен то этот компонент кроме как ради сторис?????? мб его толкьо в сторис оформить?
 
 export const Colors: FC = () => {
-  const { classes } = useTheme('Colors', styles);
+  const classes = useStyles();
   const { theme } = useContext(ThemeContext);
   const { colors = {} } = theme;
 

package/src/components/Colors/index.ts

@@ -1,2 +1 @@
 export * from './Colors';
-export type { ColorsStyles } from './Colors.styles';

package/src/components/CssBaseline/CssBaseline.styles.ts

@@ -1,7 +1,6 @@
-import { colors } from '../../theme';
-import { ComponentStyles } from '../../types';
+import { colors, ITweakStyles, createThemedStyles } from '../../theme';
 
-export const styles = {
+export const useStyles = createThemedStyles('CssBaseline', {
   '@global html, body': {
     fontFamily: 'Arial, sans-serif',
     color: colors.FONT_MAIN,
@@ -10,6 +9,6 @@ export const styles = {
   },
 
   root: {},
-};
+});
 
-export type CssBaselineStyles = ComponentStyles<typeof styles>;
+export type ICssBaselineStyles = ITweakStyles<typeof useStyles>;

package/src/components/CssBaseline/CssBaseline.tsx

@@ -1,15 +1,13 @@
 import { FC } from 'react';
+import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
-import { useTheme } from '../../hooks';
 import { ICommonProps } from '../../types';
-import { CssBaselineStyles, styles } from './CssBaseline.styles';
+import { useStyles, ICssBaselineStyles } from './CssBaseline.styles';
 
-export interface ICssBaselineProps extends ICommonProps {
-  tweakStyles?: CssBaselineStyles;
-}
+export type ICssBaselineProps = ICommonProps<ICssBaselineStyles>;
 
-export const CssBaseline: FC<ICssBaselineProps> = ({ data, tweakStyles }) => {
-  const { classes } = useTheme('CssBaseline', styles, tweakStyles);
+export const CssBaseline: FC<ICssBaselineProps> = ({ data, testId, tweakStyles }) => {
+  const classes = useStyles({ theme: tweakStyles });
 
-  return <div className={classes.root} {...addDataAttributes(data)} />;
+  return <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)} />;
 };

package/src/components/CssBaseline/index.ts

@@ -1,2 +1,2 @@
 export * from './CssBaseline';
-export type { CssBaselineStyles } from './CssBaseline.styles';
+export type { ICssBaselineStyles } from './CssBaseline.styles';

package/src/components/DateInput/DateInput.styles.ts

@@ -1,14 +1,18 @@
-import { ComponentStyles } from '../../types';
+import { ITweakStyles, createThemedStyles } from '../../theme';
+import { IInputStyles } from '../Input';
 
-export const styles = {
+export const useStyles = createThemedStyles('DateInput', {
   root: {
     width: '100%',
     height: '100%',
     cursor: 'pointer',
     position: 'relative',
   },
+});
 
-  tweakInput: {},
-};
-
-export type DateInputStyles = ComponentStyles<typeof styles>;
+export type IDateInputStyles = ITweakStyles<
+  typeof useStyles,
+  {
+    tweakInput: IInputStyles;
+  }
+>;