@true-engineering/true-react-common-ui-kit 2.4.0 → 2.5.0

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

@@ -1,62 +1,62 @@
-import { ComponentStyles } from '../../types';
-import type { ICheckboxProps } from './Checkbox';
-
-interface IStyleProps {
-  size: NonNullable<ICheckboxProps<unknown>['size']>;
-  alignItems: NonNullable<ICheckboxProps<unknown>['alignItems']>;
-  textMargin: ICheckboxProps<unknown>['textMargin'];
-}
-
-export const styles = {
-  root: {
-    cursor: 'pointer',
-    display: 'flex',
-    alignItems: ({ alignItems }: IStyleProps): string =>
-      alignItems === 'top' ? 'flex-start' : 'center',
-  },
-
-  disabled: {
-    cursor: 'default',
-    pointerEvents: 'none',
-  },
-
-  input: {
-    width: 1,
-    height: 1,
-    position: 'absolute',
-    opacity: 0,
-  },
-
-  children: {
-    maxWidth: 'calc(100% - 32px)',
-    display: 'flex',
-    alignItems: 'center',
-  },
-
-  check: {
-    width: ({ size }: IStyleProps): number => size,
-    height: ({ size }: IStyleProps): number => size,
-    borderRadius: 2,
-    flexShrink: 0,
-    marginRight: ({ size, textMargin }: IStyleProps): number =>
-      textMargin !== undefined ? textMargin : size - 4,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    boxSizing: 'border-box',
-  },
-
-  checked: {},
-
-  labelPositionLeft: {
-    flexDirection: 'row-reverse',
-
-    '& $check': {
-      marginRight: 0,
-      marginLeft: ({ size, textMargin }: IStyleProps): number =>
-        textMargin !== undefined ? textMargin : size - 4,
-    },
-  },
-};
-
-export type CheckboxStyles = ComponentStyles<typeof styles, IStyleProps>;
+import { ComponentStyles } from '../../types';
+import type { ICheckboxProps } from './Checkbox';
+
+interface IStyleProps {
+  size: NonNullable<ICheckboxProps<unknown>['size']>;
+  alignItems: NonNullable<ICheckboxProps<unknown>['alignItems']>;
+  textMargin: ICheckboxProps<unknown>['textMargin'];
+}
+
+export const styles = {
+  root: {
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: ({ alignItems }: IStyleProps): string =>
+      alignItems === 'top' ? 'flex-start' : 'center',
+  },
+
+  disabled: {
+    cursor: 'default',
+    pointerEvents: 'none',
+  },
+
+  input: {
+    width: 1,
+    height: 1,
+    position: 'absolute',
+    opacity: 0,
+  },
+
+  children: {
+    maxWidth: 'calc(100% - 32px)',
+    display: 'flex',
+    alignItems: 'center',
+  },
+
+  check: {
+    width: ({ size }: IStyleProps): number => size,
+    height: ({ size }: IStyleProps): number => size,
+    borderRadius: 2,
+    flexShrink: 0,
+    marginRight: ({ size, textMargin }: IStyleProps): number =>
+      textMargin !== undefined ? textMargin : size - 4,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxSizing: 'border-box',
+  },
+
+  checked: {},
+
+  labelPositionLeft: {
+    flexDirection: 'row-reverse',
+
+    '& $check': {
+      marginRight: 0,
+      marginLeft: ({ size, textMargin }: IStyleProps): number =>
+        textMargin !== undefined ? textMargin : size - 4,
+    },
+  },
+};
+
+export type CheckboxStyles = ComponentStyles<typeof styles, IStyleProps>;

package/src/components/Checkbox/index.ts

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

package/src/components/CloseButton/index.ts

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

package/src/components/Colors/Colors.stories.tsx

@@ -1,7 +1,7 @@
-import { Colors } from './Colors';
-
-export default {
-  title: 'Colors',
-};
-
-export const Default = (): JSX.Element => <Colors />;
+import { Colors } from './Colors';
+
+export default {
+  title: 'Colors',
+};
+
+export const Default = (): JSX.Element => <Colors />;

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

@@ -1,38 +1,38 @@
-import { ComponentStyles } from '../../types';
-
-export const styles = {
-  root: {
-    display: 'flex',
-    flexWrap: 'wrap',
-  },
-
-  colorCard: {
-    width: 120,
-    border: 'solid 1px #dde3ed',
-    borderRadius: 8,
-    color: '#222a37',
-    fontSize: 14,
-    margin: 6,
-  },
-
-  color: {
-    height: 120,
-    borderTopLeftRadius: 8,
-    borderTopRightRadius: 8,
-  },
-
-  colorName: {
-    marginBottom: 6,
-    padding: 6,
-    overflow: 'hidden',
-  },
-
-  hex: {
-    marginTop: 6,
-    textTransform: 'uppercase',
-    fontWeight: 'bold',
-    padding: [0, 6, 6],
-  },
-};
-
-export type ColorsStyles = ComponentStyles<typeof styles>;
+import { ComponentStyles } from '../../types';
+
+export const styles = {
+  root: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+
+  colorCard: {
+    width: 120,
+    border: 'solid 1px #dde3ed',
+    borderRadius: 8,
+    color: '#222a37',
+    fontSize: 14,
+    margin: 6,
+  },
+
+  color: {
+    height: 120,
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+  },
+
+  colorName: {
+    marginBottom: 6,
+    padding: 6,
+    overflow: 'hidden',
+  },
+
+  hex: {
+    marginTop: 6,
+    textTransform: 'uppercase',
+    fontWeight: 'bold',
+    padding: [0, 6, 6],
+  },
+};
+
+export type ColorsStyles = ComponentStyles<typeof styles>;

package/src/components/Colors/index.ts

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

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

@@ -1,15 +1,15 @@
-import { colors } from '../../theme';
-import { ComponentStyles } from '../../types';
-
-export const styles = {
-  '@global html, body': {
-    fontFamily: 'Arial, sans-serif',
-    color: colors.FONT_MAIN,
-    padding: 0,
-    margin: 0,
-  },
-
-  root: {},
-};
-
-export type CssBaselineStyles = ComponentStyles<typeof styles>;
+import { colors } from '../../theme';
+import { ComponentStyles } from '../../types';
+
+export const styles = {
+  '@global html, body': {
+    fontFamily: 'Arial, sans-serif',
+    color: colors.FONT_MAIN,
+    padding: 0,
+    margin: 0,
+  },
+
+  root: {},
+};
+
+export type CssBaselineStyles = ComponentStyles<typeof styles>;

package/src/components/CssBaseline/index.ts

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

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

@@ -1,14 +1,14 @@
-import { ComponentStyles } from '../../types';
-
-export const styles = {
-  root: {
-    width: '100%',
-    height: '100%',
-    cursor: 'pointer',
-    position: 'relative',
-  },
-
-  tweakInput: {},
-};
-
-export type DateInputStyles = ComponentStyles<typeof styles>;
+import { ComponentStyles } from '../../types';
+
+export const styles = {
+  root: {
+    width: '100%',
+    height: '100%',
+    cursor: 'pointer',
+    position: 'relative',
+  },
+
+  tweakInput: {},
+};
+
+export type DateInputStyles = ComponentStyles<typeof styles>;

package/src/components/DateInput/constants.ts

@@ -1,2 +1,2 @@
-export const EMPTY_DATE_INPUT_VALUE = '__.__.____';
-export const EMPTY_DATE_RANGE_INPUT_VALUE = `${EMPTY_DATE_INPUT_VALUE} - ${EMPTY_DATE_INPUT_VALUE}`;
+export const EMPTY_DATE_INPUT_VALUE = '__.__.____';
+export const EMPTY_DATE_RANGE_INPUT_VALUE = `${EMPTY_DATE_INPUT_VALUE} - ${EMPTY_DATE_INPUT_VALUE}`;

package/src/components/DateInput/index.ts

@@ -1,3 +1,3 @@
-export * from './DateInput';
-export type { DateInputStyles } from './DateInput.styles';
-export * from './constants';
+export * from './DateInput';
+export type { DateInputStyles } from './DateInput.styles';
+export * from './constants';

package/src/components/DatePicker/DatePicker.styles.ts

@@ -1,7 +1,7 @@
 import { ComponentStyles } from '../../types';
 import type { IDatePickerProps } from './DatePicker';
 
-interface IStyleProps {
+export interface IDatePickerStyleProps {
   topPosition: NonNullable<IDatePickerProps['topPosition']>;
   leftPosition: NonNullable<IDatePickerProps['leftPosition']>;
 }
@@ -18,8 +18,8 @@ export const styles = {
 
   popper: {
     zIndex: 10,
-    marginTop: ({ topPosition }: IStyleProps): number => topPosition,
-    marginLeft: ({ leftPosition }: IStyleProps): number => leftPosition,
+    marginTop: ({ topPosition }: IDatePickerStyleProps): number => topPosition,
+    marginLeft: ({ leftPosition }: IDatePickerStyleProps): number => leftPosition,
 
     '&[data-placement^="bottom"]': {
       paddingTop: 6,
@@ -41,4 +41,4 @@ export const styles = {
   tweakDateInput: {},
 };
 
-export type DatePickerStyles = ComponentStyles<typeof styles, IStyleProps>;
+export type DatePickerStyles = ComponentStyles<typeof styles, IDatePickerStyleProps>;

package/src/components/Description/Description.styles.ts

@@ -1,31 +1,31 @@
-import { colors } from '../../theme';
-import { ComponentStyles } from '../../types';
-
-export const styles = {
-  root: {},
-
-  button: {
-    cursor: 'pointer',
-    display: 'inline-block',
-    color: colors.FONT_MEDIUM,
-    marginTop: 18,
-    textTransform: 'capitalize',
-    borderBottom: [1, 'dashed', colors.FONT_MEDIUM],
-
-    '&:hover': {
-      color: colors.FONT_MAIN,
-    },
-  },
-
-  link: {
-    color: colors.FONT_MEDIUM,
-    textDecoration: 'none',
-    borderBottom: [1, 'dashed', colors.FONT_MEDIUM],
-
-    '&:hover': {
-      color: colors.FONT_MAIN,
-    },
-  },
-};
-
-export type DescriptionStyles = ComponentStyles<typeof styles>;
+import { colors } from '../../theme';
+import { ComponentStyles } from '../../types';
+
+export const styles = {
+  root: {},
+
+  button: {
+    cursor: 'pointer',
+    display: 'inline-block',
+    color: colors.FONT_MEDIUM,
+    marginTop: 18,
+    textTransform: 'capitalize',
+    borderBottom: [1, 'dashed', colors.FONT_MEDIUM],
+
+    '&:hover': {
+      color: colors.FONT_MAIN,
+    },
+  },
+
+  link: {
+    color: colors.FONT_MEDIUM,
+    textDecoration: 'none',
+    borderBottom: [1, 'dashed', colors.FONT_MEDIUM],
+
+    '&:hover': {
+      color: colors.FONT_MAIN,
+    },
+  },
+};
+
+export type DescriptionStyles = ComponentStyles<typeof styles>;

package/src/components/Description/index.ts

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

package/src/components/FiltersPane/FiltersPane.styles.ts

@@ -1,71 +1,71 @@
-import { colors } from '../../theme';
-import { ComponentStyles } from '../../types';
-
-export const FILTER_HEIGHT = 36;
-
-export const styles = {
-  root: {
-    display: 'flex',
-    flexWrap: 'wrap',
-    gap: 8,
-    width: '100%',
-  },
-
-  settings: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 18,
-    boxSizing: 'border-box',
-    width: 40,
-    height: FILTER_HEIGHT,
-    cursor: 'pointer',
-    transition: 'background-color 0.25s ease-in-out',
-  },
-
-  settingsIcon: {
-    width: 16,
-    height: 16,
-  },
-
-  clear: {
-    display: 'flex',
-    alignItems: 'center',
-    height: FILTER_HEIGHT,
-  },
-
-  filterWithClearButton: {
-    display: 'flex',
-    gap: 16,
-    minWidth: 0,
-  },
-
-  // TODO: удалить когда появятся текстовые кнопки
-  tweakClearButton: {
-    s: {
-      paddingLeft: 0,
-      paddingRight: 0,
-      minWidth: 'unset',
-    },
-
-    text: {
-      background: 'none',
-      color: colors.GREY_ACTIVE,
-
-      '&:hover, &:focus': {
-        color: colors.FONT_MEDIUM,
-      },
-
-      '&:active': {
-        color: colors.FONT_MAIN,
-      },
-
-      '&:hover, &:focus, &:active': {
-        background: 'none',
-        borderColor: 'transparent',
-      },
-    },
-  },
-};
-
-export type FiltersPaneStyles = ComponentStyles<typeof styles>;
+import { colors } from '../../theme';
+import { ComponentStyles } from '../../types';
+
+export const FILTER_HEIGHT = 36;
+
+export const styles = {
+  root: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: 8,
+    width: '100%',
+  },
+
+  settings: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 18,
+    boxSizing: 'border-box',
+    width: 40,
+    height: FILTER_HEIGHT,
+    cursor: 'pointer',
+    transition: 'background-color 0.25s ease-in-out',
+  },
+
+  settingsIcon: {
+    width: 16,
+    height: 16,
+  },
+
+  clear: {
+    display: 'flex',
+    alignItems: 'center',
+    height: FILTER_HEIGHT,
+  },
+
+  filterWithClearButton: {
+    display: 'flex',
+    gap: 16,
+    minWidth: 0,
+  },
+
+  // TODO: удалить когда появятся текстовые кнопки
+  tweakClearButton: {
+    s: {
+      paddingLeft: 0,
+      paddingRight: 0,
+      minWidth: 'unset',
+    },
+
+    text: {
+      background: 'none',
+      color: colors.GREY_ACTIVE,
+
+      '&:hover, &:focus': {
+        color: colors.FONT_MEDIUM,
+      },
+
+      '&:active': {
+        color: colors.FONT_MAIN,
+      },
+
+      '&:hover, &:focus, &:active': {
+        background: 'none',
+        borderColor: 'transparent',
+      },
+    },
+  },
+};
+
+export type FiltersPaneStyles = ComponentStyles<typeof styles>;

package/src/components/FiltersPane/index.ts

@@ -2,3 +2,4 @@ export * from './FiltersPane';
 export * from './types';
 // TODO : подумать над тем чтобы вынести это все наружу
 export * from './components';
+export type { FiltersPaneStyles } from './FiltersPane.styles';

package/src/components/Flag/Flag.styles.ts

@@ -1,18 +1,18 @@
-import { colors } from '../../theme';
-import { ComponentStyles } from '../../types';
-
-export const styles = {
-  root: {
-    // приходится хардкодить в компоненте, тк либа Flags выдает флаги с 2-3 пиксельным отступом снизу
-    // если будет нужно, то можно вынести border на уровень пропсов
-    border: [1, 'solid', colors.BORDER_MAIN],
-    borderRadius: 2,
-  },
-
-  noFlag: {
-    width: 20,
-    color: colors.FONT_MEDIUM,
-  },
-};
-
-export type FlagStyles = ComponentStyles<typeof styles>;
+import { colors } from '../../theme';
+import { ComponentStyles } from '../../types';
+
+export const styles = {
+  root: {
+    // приходится хардкодить в компоненте, тк либа Flags выдает флаги с 2-3 пиксельным отступом снизу
+    // если будет нужно, то можно вынести border на уровень пропсов
+    border: [1, 'solid', colors.BORDER_MAIN],
+    borderRadius: 2,
+  },
+
+  noFlag: {
+    width: 20,
+    color: colors.FONT_MEDIUM,
+  },
+};
+
+export type FlagStyles = ComponentStyles<typeof styles>;

package/src/components/Flag/augment.d.ts

@@ -1 +1 @@
-declare module 'country-flag-icons/react/3x2';
+declare module 'country-flag-icons/react/3x2';

package/src/components/Flag/index.ts

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

package/src/components/FlexibleTable/index.ts

@@ -1,3 +1,3 @@
-export * from './FlexibleTable';
-export * from './types';
-export type { FlexibleTableStyles } from './FlexibleTable.styles';
+export * from './FlexibleTable';
+export * from './types';
+export type { FlexibleTableStyles } from './FlexibleTable.styles';

package/src/components/Icon/Icon.styles.ts

@@ -1,10 +1,10 @@
-import { ComponentStyles } from '../../types';
-
-export const styles = {
-  root: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-};
-
-export type IconStyles = ComponentStyles<typeof styles>;
+import { ComponentStyles } from '../../types';
+
+export const styles = {
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+};
+
+export type IconStyles = ComponentStyles<typeof styles>;

package/src/components/Icon/complexIcons/augment.d.ts

@@ -1 +1 @@
-declare module '*.svg?raw';
+declare module '*.svg?raw';