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

package/src/components/TextArea/TextArea.styles.ts

@@ -1,153 +1,153 @@
-import { ComponentStyles } from '../../types';
-
-const PADDING_X = 12;
-
-export const styles = {
-  root: {
-    width: '100%',
-    height: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-  },
-
-  wrapper: {
-    display: 'flex',
-    position: 'relative',
-    width: '100%',
-    flexGrow: 1,
-    boxSizing: 'border-box',
-    transition: '0.25s ease-in-out',
-    transitionProperty: 'border-color',
-    backgroundColor: 'white',
-    border: ['solid', 1, 'lightgray'],
-  },
-
-  textarea: {
-    width: '100%',
-    height: '100%',
-    outline: 'none',
-    boxSizing: 'border-box',
-    outlineStyle: 'none',
-    fontFamily: 'inherit',
-    fontSize: 16,
-    padding: [14, PADDING_X, 8],
-    transition: '0.25s ease-in-out',
-    transitionProperty: 'background-color',
-    border: 'none',
-    resize: 'none',
-    overflow: 'auto',
-
-    '&::placeholder': {
-      opacity: 1,
-    },
-
-    MozAppearance: 'textfield',
-    '&::-webkit-inner-spin-button,&::-webkit-outer-spin-button': {
-      WebkitAppearance: 'none',
-      margin: 0,
-    },
-  },
-
-  focused: {
-    position: 'relative',
-    zIndex: 1,
-  },
-
-  withFloatingLabel: {
-    paddingTop: 24,
-  },
-
-  floating: {},
-
-  activeLabel: {
-    display: 'none',
-
-    '&$floating': {
-      display: 'block',
-      transform: 'scale(0.75) translateY(-120%)',
-    },
-  },
-
-  required: {
-    '&:before': {
-      content: '""',
-      position: 'absolute',
-      left: -12,
-      top: 20,
-      width: 6,
-      height: 6,
-      borderRadius: '50%',
-
-      backgroundColor: 'red',
-    },
-  },
-
-  disabled: {},
-
-  label: {
-    position: 'absolute',
-    pointerEvents: 'none',
-    left: PADDING_X,
-    top: PADDING_X * 2,
-    transformOrigin: 'top left',
-    transform: 'translateY(-50%)',
-    transition: '0.25s ease-in-out',
-    transitionProperty: 'transform, color',
-    fontSize: 16,
-  },
-
-  invalid: {
-    borderColor: 'red',
-  },
-
-  invalidLabel: {
-    color: 'red',
-  },
-
-  error: {
-    fontSize: 12,
-    paddingTop: 4,
-    paddingLeft: 13,
-    color: 'red',
-  },
-
-  requiredLabel: {
-    '&:after': {
-      content: '""',
-      position: 'absolute',
-      right: -8,
-      top: 4,
-      transform: 'translate(0, -50%)',
-      width: 6,
-      height: 6,
-      borderRadius: '50%',
-      backgroundColor: 'red',
-    },
-  },
-
-  symbolsCount: {
-    display: 'block',
-    textAlign: 'right',
-    marginTop: 4,
-    fontSize: 12,
-    marginLeft: 'auto',
-    paddingLeft: 32,
-    whiteSpace: 'nowrap',
-  },
-
-  symbolsCountError: {
-    color: 'red',
-  },
-
-  footer: {
-    display: 'flex',
-  },
-
-  info: {
-    fontSize: 12,
-    paddingTop: 4,
-    paddingLeft: 13,
-  },
-};
-
-export type TextAreaStyles = ComponentStyles<typeof styles>;
+import { ITweakStyles, createThemedStyles } from '../../theme';
+
+const PADDING_X = 12;
+
+export const useStyles = createThemedStyles('TextArea', {
+  root: {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+
+  wrapper: {
+    display: 'flex',
+    position: 'relative',
+    width: '100%',
+    flexGrow: 1,
+    boxSizing: 'border-box',
+    transition: '0.25s ease-in-out',
+    transitionProperty: 'border-color',
+    backgroundColor: 'white',
+    border: ['solid', 1, 'lightgray'],
+  },
+
+  textarea: {
+    width: '100%',
+    height: '100%',
+    outline: 'none',
+    boxSizing: 'border-box',
+    outlineStyle: 'none',
+    fontFamily: 'inherit',
+    fontSize: 16,
+    padding: [14, PADDING_X, 8],
+    transition: '0.25s ease-in-out',
+    transitionProperty: 'background-color',
+    border: 'none',
+    resize: 'none',
+    overflow: 'auto',
+
+    '&::placeholder': {
+      opacity: 1,
+    },
+
+    MozAppearance: 'textfield',
+    '&::-webkit-inner-spin-button,&::-webkit-outer-spin-button': {
+      WebkitAppearance: 'none',
+      margin: 0,
+    },
+  },
+
+  focused: {
+    position: 'relative',
+    zIndex: 1,
+  },
+
+  withFloatingLabel: {
+    paddingTop: 24,
+  },
+
+  floating: {},
+
+  activeLabel: {
+    display: 'none',
+
+    '&$floating': {
+      display: 'block',
+      transform: 'scale(0.75) translateY(-120%)',
+    },
+  },
+
+  required: {
+    '&:before': {
+      content: '""',
+      position: 'absolute',
+      left: -12,
+      top: 20,
+      width: 6,
+      height: 6,
+      borderRadius: '50%',
+
+      backgroundColor: 'red',
+    },
+  },
+
+  disabled: {},
+
+  label: {
+    position: 'absolute',
+    pointerEvents: 'none',
+    left: PADDING_X,
+    top: PADDING_X * 2,
+    transformOrigin: 'top left',
+    transform: 'translateY(-50%)',
+    transition: '0.25s ease-in-out',
+    transitionProperty: 'transform, color',
+    fontSize: 16,
+  },
+
+  invalid: {
+    borderColor: 'red',
+  },
+
+  invalidLabel: {
+    color: 'red',
+  },
+
+  error: {
+    fontSize: 12,
+    paddingTop: 4,
+    paddingLeft: 13,
+    color: 'red',
+  },
+
+  requiredLabel: {
+    '&:after': {
+      content: '""',
+      position: 'absolute',
+      right: -8,
+      top: 4,
+      transform: 'translate(0, -50%)',
+      width: 6,
+      height: 6,
+      borderRadius: '50%',
+      backgroundColor: 'red',
+    },
+  },
+
+  symbolsCount: {
+    display: 'block',
+    textAlign: 'right',
+    marginTop: 4,
+    fontSize: 12,
+    marginLeft: 'auto',
+    paddingLeft: 32,
+    whiteSpace: 'nowrap',
+  },
+
+  symbolsCountError: {
+    color: 'red',
+  },
+
+  footer: {
+    display: 'flex',
+  },
+
+  info: {
+    fontSize: 12,
+    paddingTop: 4,
+    paddingLeft: 13,
+  },
+});
+
+export type ITextAreaStyles = ITweakStyles<typeof useStyles>;

package/src/components/TextArea/TextArea.tsx

@@ -10,12 +10,10 @@ import {
 } from 'react';
 import clsx from 'clsx';
 import { addDataAttributes, trimStringToMaxLength } from '../../helpers';
-import { useTheme } from '../../hooks';
 import { ICommonProps } from '../../types';
-import { styles, TextAreaStyles } from './TextArea.styles';
+import { useStyles, ITextAreaStyles } from './TextArea.styles';
 
-export interface ITextAreaProps extends ICommonProps {
-  tweakStyles?: TextAreaStyles;
+export interface ITextAreaProps extends ICommonProps<ITextAreaStyles> {
   value?: string;
   label?: string;
   placeholder?: string;
@@ -33,7 +31,6 @@ export interface ITextAreaProps extends ICommonProps {
   shouldTrimAfterMaxLength?: boolean;
   maxLength?: number;
   rows?: number;
-  testId?: string;
   onChange(value: string, event?: FormEvent<HTMLTextAreaElement>): void;
   onFocus?(event: FocusEvent<HTMLTextAreaElement>): void;
   onBlur?(event: FocusEvent<HTMLTextAreaElement>): void;
@@ -68,7 +65,7 @@ export const TextArea: FC<ITextAreaProps> = ({
   onFocus,
   onBlur,
 }) => {
-  const { classes } = useTheme('TextArea', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
   const [isFocused, setFocused] = useState(false);
   const ref = useRef<HTMLTextAreaElement>(null);
 

package/src/components/TextArea/index.ts

@@ -1,2 +1,2 @@
-export * from './TextArea';
-export type { TextAreaStyles } from './TextArea.styles';
+export * from './TextArea';
+export type { ITextAreaStyles } from './TextArea.styles';

package/src/components/TextWithInfo/TextWithInfo.styles.ts

@@ -1,60 +1,59 @@
-import { colors } from '../../theme';
-import { ComponentStyles } from '../../types';
-
-export const styles = {
-  root: {
-    display: 'inline-block',
-    height: 40,
-    padding: [0, 18],
-    borderRadius: 20,
-    boxSizing: 'border-box',
-    color: colors.FONT_MEDIUM,
-
-    '&:hover': {
-      backgroundColor: colors.GREY_FOCUS,
-    },
-  },
-
-  container: {
-    display: 'flex',
-    height: '100%',
-    alignItems: 'center',
-  },
-
-  selected: {
-    backgroundColor: colors.GREY_FOCUS,
-  },
-
-  text: {
-    cursor: 'pointer',
-    fontSize: 16,
-  },
-
-  info: {
-    width: 20,
-    marginLeft: 4,
-    color: colors.FONT_DISABLED,
-    cursor: 'pointer',
-    borderRadius: '50%',
-
-    '&:link': {
-      color: colors.FONT_DISABLED,
-    },
-
-    '&:hover': {
-      color: colors.CLASSIC_WHITE,
-      backgroundColor: colors.FONT_DISABLED,
-    },
-
-    '&:visited': {
-      color: colors.FONT_DISABLED,
-
-      '&:hover': {
-        color: colors.CLASSIC_WHITE,
-        backgroundColor: colors.FONT_DISABLED,
-      },
-    },
-  },
-};
-
-export type TextWithInfoStyles = ComponentStyles<typeof styles>;
+import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+
+export const useStyles = createThemedStyles('TextWithInfo', {
+  root: {
+    display: 'inline-block',
+    height: 40,
+    padding: [0, 18],
+    borderRadius: 20,
+    boxSizing: 'border-box',
+    color: colors.FONT_MEDIUM,
+
+    '&:hover': {
+      backgroundColor: colors.GREY_FOCUS,
+    },
+  },
+
+  container: {
+    display: 'flex',
+    height: '100%',
+    alignItems: 'center',
+  },
+
+  selected: {
+    backgroundColor: colors.GREY_FOCUS,
+  },
+
+  text: {
+    cursor: 'pointer',
+    fontSize: 16,
+  },
+
+  info: {
+    width: 20,
+    marginLeft: 4,
+    color: colors.FONT_DISABLED,
+    cursor: 'pointer',
+    borderRadius: '50%',
+
+    '&:link': {
+      color: colors.FONT_DISABLED,
+    },
+
+    '&:hover': {
+      color: colors.CLASSIC_WHITE,
+      backgroundColor: colors.FONT_DISABLED,
+    },
+
+    '&:visited': {
+      color: colors.FONT_DISABLED,
+
+      '&:hover': {
+        color: colors.CLASSIC_WHITE,
+        backgroundColor: colors.FONT_DISABLED,
+      },
+    },
+  },
+});
+
+export type ITextWithInfoStyles = ITweakStyles<typeof useStyles>;

package/src/components/TextWithInfo/TextWithInfo.tsx

@@ -1,14 +1,13 @@
 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 { TextWithTooltip } from '../TextWithTooltip';
-import { styles, TextWithInfoStyles } from './TextWithInfo.styles';
+import { useStyles, ITextWithInfoStyles } from './TextWithInfo.styles';
 
-export interface ITextWithInfoProps extends ICommonProps {
-  tweakStyles?: TextWithInfoStyles;
+export interface ITextWithInfoProps extends ICommonProps<ITextWithInfoStyles> {
   text: string;
   isSelected?: boolean;
   textTooltip?: string;
@@ -25,14 +24,16 @@ export const TextWithInfo: FC<ITextWithInfoProps> = ({
   info,
   textTooltip,
   onClick,
+  testId,
   data,
   tweakStyles,
 }) => {
-  const { classes } = useTheme('TextWithInfo', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
 
   return (
     <div
       className={clsx(classes.root, isSelected && classes.selected)}
+      {...addDataTestId(testId)}
       {...addDataAttributes(data)}
     >
       <div className={classes.container}>

package/src/components/TextWithInfo/index.ts

@@ -1,2 +1,2 @@
-export * from './TextWithInfo';
-export type { TextWithInfoStyles } from './TextWithInfo.styles';
+export * from './TextWithInfo';
+export type { ITextWithInfoStyles } from './TextWithInfo.styles';

package/src/components/TextWithTooltip/TextWithTooltip.stories.tsx

@@ -1,58 +1,58 @@
-import { ComponentStory } from '@storybook/react';
-import { TextWithTooltip } from './TextWithTooltip';
-
-const positions = [
-  'top',
-  'bottom',
-  'right',
-  'left',
-  'top-start',
-  'top-end',
-  'bottom-start',
-  'bottom-end',
-  'right-start',
-  'right-end',
-  'left-start',
-  'left-end',
-  'auto',
-  'auto-start',
-  'auto-end',
-];
-
-export default {
-  title: 'TextWithTooltip',
-  component: TextWithTooltip,
-  argTypes: {
-    tooltipPosition: { control: 'select', options: positions },
-    tooltipView: { control: 'inline-radio', options: ['tooltip', 'hint'] },
-    tooltipType: { control: 'inline-radio', options: ['info', 'error'] },
-    mouseEventType: { control: 'inline-radio', options: ['hover', 'click'] },
-  },
-};
-
-const Template: ComponentStory<typeof TextWithTooltip> = (args) => (
-  <div
-    style={{
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      width: 600,
-      height: 400,
-    }}
-  >
-    <TextWithTooltip {...args} />
-  </div>
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  children: 'Наведи на меня - появится тултип',
-  tooltipText: 'Текст тултипа',
-  tooltipPosition: 'top',
-  tooltipView: 'tooltip',
-  tooltipType: 'info',
-  isDisabled: false,
-  mouseEventType: 'hover',
-  shouldRenderInBody: true,
-};
+import { ComponentStory } from '@storybook/react';
+import { TextWithTooltip } from './TextWithTooltip';
+
+const positions = [
+  'top',
+  'bottom',
+  'right',
+  'left',
+  'top-start',
+  'top-end',
+  'bottom-start',
+  'bottom-end',
+  'right-start',
+  'right-end',
+  'left-start',
+  'left-end',
+  'auto',
+  'auto-start',
+  'auto-end',
+];
+
+export default {
+  title: 'TextWithTooltip',
+  component: TextWithTooltip,
+  argTypes: {
+    tooltipPosition: { control: 'select', options: positions },
+    tooltipView: { control: 'inline-radio', options: ['tooltip', 'hint'] },
+    tooltipType: { control: 'inline-radio', options: ['info', 'error'] },
+    mouseEventType: { control: 'inline-radio', options: ['hover', 'click'] },
+  },
+};
+
+const Template: ComponentStory<typeof TextWithTooltip> = (args) => (
+  <div
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: 600,
+      height: 400,
+    }}
+  >
+    <TextWithTooltip {...args} />
+  </div>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  children: 'Наведи на меня - появится тултип',
+  tooltipText: 'Текст тултипа',
+  tooltipPosition: 'top',
+  tooltipView: 'tooltip',
+  tooltipType: 'info',
+  isDisabled: false,
+  mouseEventType: 'hover',
+  shouldRenderInBody: true,
+};

package/src/components/TextWithTooltip/TextWithTooltip.styles.ts

@@ -1,19 +1,21 @@
-import { ComponentStyles } from '../../types';
-
-export const styles = {
-  root: {
-    position: 'relative',
-  },
-
-  tooltip: {
-    zIndex: 9999,
-  },
-
-  clickable: {
-    cursor: 'pointer',
-  },
-
-  tweakTooltip: {},
-};
-
-export type TextWithTooltipStyles = ComponentStyles<typeof styles>;
+import { ITweakStyles, createThemedStyles } from '../../theme';
+import { ITooltipStyles } from '../Tooltip';
+
+export const useStyles = createThemedStyles('TextWithTooltip', {
+  root: {
+    position: 'relative',
+  },
+
+  tooltip: {
+    zIndex: 9999,
+  },
+
+  clickable: {
+    cursor: 'pointer',
+  },
+});
+
+export type ITextWithTooltipStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakTooltip: ITooltipStyles }
+>;