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

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

@@ -1,60 +1,60 @@
-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 } 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>;

package/src/components/TextWithInfo/index.ts

@@ -1,2 +1,2 @@
-export * from './TextWithInfo';
-export type { TextWithInfoStyles } from './TextWithInfo.styles';
+export * from './TextWithInfo';
+export type { TextWithInfoStyles } 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,19 @@
-import { ComponentStyles } from '../../types';
-
-export const styles = {
-  root: {
-    position: 'relative',
-  },
-
-  tooltip: {
-    zIndex: 9999,
-  },
-
-  clickable: {
-    cursor: 'pointer',
-  },
-
-  tweakTooltip: {},
-};
-
-export type TextWithTooltipStyles = ComponentStyles<typeof styles>;
+import { ComponentStyles } from '../../types';
+
+export const styles = {
+  root: {
+    position: 'relative',
+  },
+
+  tooltip: {
+    zIndex: 9999,
+  },
+
+  clickable: {
+    cursor: 'pointer',
+  },
+
+  tweakTooltip: {},
+};
+
+export type TextWithTooltipStyles = ComponentStyles<typeof styles>;

package/src/components/TextWithTooltip/index.ts

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

package/src/components/ThemedPreloader/ThemedPreloader.styles.ts

@@ -1,21 +1,21 @@
-import { ComponentStyles } from '../../types';
-
-export const styles = {
-  root: {
-    display: 'flex',
-  },
-
-  dots: {},
-
-  default: {},
-
-  logo: {},
-
-  currentColor: {
-    color: 'currentColor',
-  },
-
-  tweakPreloaderComponent: {},
-};
-
-export type ThemedPreloaderStyles = ComponentStyles<typeof styles>;
+import { ComponentStyles } from '../../types';
+
+export const styles = {
+  root: {
+    display: 'flex',
+  },
+
+  dots: {},
+
+  default: {},
+
+  logo: {},
+
+  currentColor: {
+    color: 'currentColor',
+  },
+
+  tweakPreloaderComponent: {},
+};
+
+export type ThemedPreloaderStyles = ComponentStyles<typeof styles>;

package/src/components/ThemedPreloader/components/DefaultPreloader/index.ts

@@ -1 +1 @@
-export * from './DefaultPreloader';
+export * from './DefaultPreloader';

package/src/components/ThemedPreloader/components/DotsPreloader/DotsPreloader.styles.ts

@@ -1,54 +1,54 @@
-import { ComponentStyles } from '../../../../types';
-
-export const styles = {
-  root: {
-    display: 'flex',
-    gap: 4,
-
-    '&::before, &::after': {
-      content: '""',
-      extend: 'fadedDot',
-    },
-
-    '&::before': {
-      animationDelay: '0',
-    },
-
-    '&::after': {
-      animationDelay: '360ms',
-    },
-  },
-
-  /* ----------- 3 DOTS ---------- */
-
-  '@keyframes FadedDots': {
-    '0%': {
-      opacity: 0.2,
-    },
-    '30%': {
-      opacity: 1,
-    },
-    '100%': {
-      opacity: 0.2,
-    },
-  },
-
-  // используется в .dot и в before и after элементах root
-  fadedDot: {
-    display: 'block',
-    animationDuration: 750,
-    animationIterationCount: 'infinite',
-    animationName: '$FadedDots',
-    borderRadius: '50%',
-    height: 8,
-    width: 8,
-    backgroundColor: 'currentColor',
-  },
-
-  dot: {
-    extend: 'fadedDot',
-    animationDelay: '180ms',
-  },
-};
-
-export type DotsPreloaderStyles = ComponentStyles<typeof styles>;
+import { ComponentStyles } from '../../../../types';
+
+export const styles = {
+  root: {
+    display: 'flex',
+    gap: 4,
+
+    '&::before, &::after': {
+      content: '""',
+      extend: 'fadedDot',
+    },
+
+    '&::before': {
+      animationDelay: '0',
+    },
+
+    '&::after': {
+      animationDelay: '360ms',
+    },
+  },
+
+  /* ----------- 3 DOTS ---------- */
+
+  '@keyframes FadedDots': {
+    '0%': {
+      opacity: 0.2,
+    },
+    '30%': {
+      opacity: 1,
+    },
+    '100%': {
+      opacity: 0.2,
+    },
+  },
+
+  // используется в .dot и в before и after элементах root
+  fadedDot: {
+    display: 'block',
+    animationDuration: 750,
+    animationIterationCount: 'infinite',
+    animationName: '$FadedDots',
+    borderRadius: '50%',
+    height: 8,
+    width: 8,
+    backgroundColor: 'currentColor',
+  },
+
+  dot: {
+    extend: 'fadedDot',
+    animationDelay: '180ms',
+  },
+};
+
+export type DotsPreloaderStyles = ComponentStyles<typeof styles>;

package/src/components/ThemedPreloader/components/DotsPreloader/index.ts

@@ -1,2 +1,2 @@
-export { DotsPreloader } from './DotsPreloader';
-export type { DotsPreloaderStyles } from './DotsPreloader.styles';
+export { DotsPreloader } from './DotsPreloader';
+export type { DotsPreloaderStyles } from './DotsPreloader.styles';

package/src/components/ThemedPreloader/components/SvgPreloader/SvgPreloader.styles.ts

@@ -1,11 +1,11 @@
-import { ComponentStyles } from '../../../../types';
-
-export const styles = {
-  root: {
-    display: 'flex',
-    width: '100%',
-    height: '100%',
-  },
-};
-
-export type SvgPreloaderStyles = ComponentStyles<typeof styles>;
+import { ComponentStyles } from '../../../../types';
+
+export const styles = {
+  root: {
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+  },
+};
+
+export type SvgPreloaderStyles = ComponentStyles<typeof styles>;

package/src/components/ThemedPreloader/components/SvgPreloader/index.ts

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

package/src/components/Toaster/Toaster.styles.ts

@@ -1,59 +1,59 @@
-import { colors } from '../../theme';
-import { ComponentStyles } from '../../types';
-
-export const styles = {
-  root: {
-    borderRadius: 8,
-    position: 'relative',
-    background: colors.CLASSIC_WHITE,
-    padding: [20, 40, 20, 20],
-    display: 'flex',
-  },
-
-  iconContainer: {
-    width: 20,
-    height: 20,
-    flexShrink: 0,
-    marginRight: 16,
-  },
-
-  error: {
-    color: colors.RED_WARNING,
-  },
-
-  info: {},
-
-  warning: {
-    color: colors.ORANGE_FOCUS,
-  },
-
-  ok: {
-    color: colors.GREEN_FOCUS,
-  },
-
-  'not-ok': {
-    color: colors.FONT_LABEL,
-  },
-
-  text: {},
-
-  title: {},
-
-  content: {
-    '&:not(:first-child):not(:empty)': {
-      marginTop: 16,
-    },
-  },
-
-  close: {
-    position: 'absolute',
-    top: 12,
-    right: 12,
-    width: 32,
-    height: 32,
-  },
-
-  tweakCloseButton: {},
-};
-
-export type ToasterStyles = ComponentStyles<typeof styles>;
+import { colors } from '../../theme';
+import { ComponentStyles } from '../../types';
+
+export const styles = {
+  root: {
+    borderRadius: 8,
+    position: 'relative',
+    background: colors.CLASSIC_WHITE,
+    padding: [20, 40, 20, 20],
+    display: 'flex',
+  },
+
+  iconContainer: {
+    width: 20,
+    height: 20,
+    flexShrink: 0,
+    marginRight: 16,
+  },
+
+  error: {
+    color: colors.RED_WARNING,
+  },
+
+  info: {},
+
+  warning: {
+    color: colors.ORANGE_FOCUS,
+  },
+
+  ok: {
+    color: colors.GREEN_FOCUS,
+  },
+
+  'not-ok': {
+    color: colors.FONT_LABEL,
+  },
+
+  text: {},
+
+  title: {},
+
+  content: {
+    '&:not(:first-child):not(:empty)': {
+      marginTop: 16,
+    },
+  },
+
+  close: {
+    position: 'absolute',
+    top: 12,
+    right: 12,
+    width: 32,
+    height: 32,
+  },
+
+  tweakCloseButton: {},
+};
+
+export type ToasterStyles = ComponentStyles<typeof styles>;

package/src/components/Tooltip/types.ts

@@ -1 +1 @@
-export type ITooltipType = 'info' | 'warning';
+export type ITooltipType = 'info' | 'warning';

package/src/components/index.ts

@@ -1,36 +1,36 @@
-export * from './AccountInfo';
-export * from './AddButton';
-export * from './Button';
-export * from './Checkbox';
-export * from './CloseButton';
-export * from './Colors';
-export * from './CssBaseline';
-export * from './DateInput';
-export * from './DatePicker';
-export * from './Description';
-export * from './FiltersPane';
-export * from './Flag';
-export * from './FlexibleTable';
-export * from './Icon';
-export * from './IncrementInput';
-export * from './Input';
-export * from './List';
-export * from './Modal';
-export * from './MoreMenu';
-export * from './MultiSelect';
-export * from './MultiSelectList';
-export * from './Notification';
-export * from './NumberInput';
-export * from './SearchInput';
-export * from './SmartInput';
-export * from './PhoneInput';
-export * from './RadioButton';
-export * from './Select';
-export * from './Switch';
-export * from './TextArea';
-export * from './TextWithInfo';
-export * from './TextWithTooltip';
-export * from './ThemedPreloader';
-export * from './Toaster';
-export * from './Tooltip';
-export * from './ScrollIntoViewIfNeeded';
+export * from './AccountInfo';
+export * from './AddButton';
+export * from './Button';
+export * from './Checkbox';
+export * from './CloseButton';
+export * from './Colors';
+export * from './CssBaseline';
+export * from './DateInput';
+export * from './DatePicker';
+export * from './Description';
+export * from './FiltersPane';
+export * from './Flag';
+export * from './FlexibleTable';
+export * from './Icon';
+export * from './IncrementInput';
+export * from './Input';
+export * from './List';
+export * from './Modal';
+export * from './MoreMenu';
+export * from './MultiSelect';
+export * from './MultiSelectList';
+export * from './Notification';
+export * from './NumberInput';
+export * from './SearchInput';
+export * from './SmartInput';
+export * from './PhoneInput';
+export * from './RadioButton';
+export * from './Select';
+export * from './Switch';
+export * from './TextArea';
+export * from './TextWithInfo';
+export * from './TextWithTooltip';
+export * from './ThemedPreloader';
+export * from './Toaster';
+export * from './Tooltip';
+export * from './ScrollIntoViewIfNeeded';