@true-engineering/true-react-common-ui-kit 3.9.0 → 3.9.2

package/src/components/ThemedPreloader/constants.ts

@@ -1 +1 @@
-export const svgTypes = ['default', 'logo'] as const;
+export const svgTypes = ['default', 'logo'] as const;

package/src/components/ThemedPreloader/index.ts

@@ -1,4 +1,4 @@
-export * from './ThemedPreloader';
-export * from './types';
-export type { IThemedPreloaderStyles } from './ThemedPreloader.styles';
-export type { IDotsPreloaderStyles, ISvgPreloaderStyles } from './components';
+export * from './ThemedPreloader';
+export * from './types';
+export type { IThemedPreloaderStyles } from './ThemedPreloader.styles';
+export type { IDotsPreloaderStyles, ISvgPreloaderStyles } from './components';

package/src/components/ThemedPreloader/types.ts

@@ -1,3 +1,3 @@
-import { svgTypes } from './constants';
-
-export type IPreloaderSvgType = (typeof svgTypes)[number];
+import { svgTypes } from './constants';
+
+export type IPreloaderSvgType = (typeof svgTypes)[number];

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

@@ -1,60 +1,60 @@
-import { colors, ITweakStyles, createThemedStyles } from '../../theme';
-import { ICloseButtonStyles } from '../CloseButton';
-
-export const useStyles = createThemedStyles('Toaster', {
-  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,
-  },
-});
-
-export type IToasterStyles = ITweakStyles<
-  typeof useStyles,
-  { tweakCloseButton: ICloseButtonStyles }
->;
+import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+import { ICloseButtonStyles } from '../CloseButton';
+
+export const useStyles = createThemedStyles('Toaster', {
+  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,
+  },
+});
+
+export type IToasterStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakCloseButton: ICloseButtonStyles }
+>;

package/src/components/Toaster/constants.ts

@@ -1 +1 @@
-export const DEFAULT_TIMEOUT = 7 * 1000; // 7 seconds
+export const DEFAULT_TIMEOUT = 7 * 1000; // 7 seconds

package/src/components/Toaster/index.ts

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

package/src/components/Toaster/types.ts

@@ -1 +1 @@
-export type IToasterType = 'error' | 'info' | 'warning' | 'ok' | 'not-ok';
+export type IToasterType = 'error' | 'info' | 'warning' | 'ok' | 'not-ok';

package/src/components/Tooltip/Tooltip.styles.ts

@@ -1,49 +1,49 @@
-import { rgba } from '../../helpers';
-import { colors, createThemedStyles, dimensions, ITweakStyles } from '../../theme';
-
-export const useStyles = createThemedStyles('Tooltip', {
-  root: {
-    display: 'inline-block',
-    boxSizing: 'border-box',
-  },
-
-  tooltip: {
-    fontSize: 14,
-    padding: [18, 20],
-    letterSpacing: 0.15,
-    backgroundColor: colors.CLASSIC_WHITE,
-    color: colors.FONT_MAIN,
-    boxShadow: `0 0 1px ${rgba(colors.FONT_MAIN, 0.4)}, 0 -2px 6px ${rgba(
-      colors.FONT_MAIN,
-      0.06,
-    )}, 0 8px 32px -8px ${rgba(colors.FONT_MAIN, 0.3)}`,
-    borderRadius: 12,
-    lineHeight: 1.4,
-    maxWidth: 320,
-  },
-
-  hint: {
-    whiteSpace: 'nowrap',
-    fontSize: 12,
-    padding: [8, 12],
-    borderRadius: dimensions.BORDER_RADIUS_SMALL,
-    backgroundColor: colors.FONT_MEDIUM,
-    color: colors.CLASSIC_WHITE,
-    letterSpacing: 0.2,
-  },
-
-  info: {},
-
-  error: {
-    '&$tooltip': {
-      backgroundColor: colors.RED_WARNING,
-      color: colors.CLASSIC_WHITE,
-    },
-
-    '&$hint': {
-      backgroundColor: colors.RED_WARNING,
-    },
-  },
-});
-
-export type ITooltipStyles = ITweakStyles<typeof useStyles>;
+import { rgba } from '../../helpers';
+import { colors, createThemedStyles, dimensions, ITweakStyles } from '../../theme';
+
+export const useStyles = createThemedStyles('Tooltip', {
+  root: {
+    display: 'inline-block',
+    boxSizing: 'border-box',
+  },
+
+  tooltip: {
+    fontSize: 14,
+    padding: [18, 20],
+    letterSpacing: 0.15,
+    backgroundColor: colors.CLASSIC_WHITE,
+    color: colors.FONT_MAIN,
+    boxShadow: `0 0 1px ${rgba(colors.FONT_MAIN, 0.4)}, 0 -2px 6px ${rgba(
+      colors.FONT_MAIN,
+      0.06,
+    )}, 0 8px 32px -8px ${rgba(colors.FONT_MAIN, 0.3)}`,
+    borderRadius: 12,
+    lineHeight: 1.4,
+    maxWidth: 320,
+  },
+
+  hint: {
+    whiteSpace: 'nowrap',
+    fontSize: 12,
+    padding: [8, 12],
+    borderRadius: dimensions.BORDER_RADIUS_SMALL,
+    backgroundColor: colors.FONT_MEDIUM,
+    color: colors.CLASSIC_WHITE,
+    letterSpacing: 0.2,
+  },
+
+  info: {},
+
+  error: {
+    '&$tooltip': {
+      backgroundColor: colors.RED_WARNING,
+      color: colors.CLASSIC_WHITE,
+    },
+
+    '&$hint': {
+      backgroundColor: colors.RED_WARNING,
+    },
+  },
+});
+
+export type ITooltipStyles = ITweakStyles<typeof useStyles>;

package/src/components/Tooltip/index.ts

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

package/src/components/WithPopup/WithPopup.stories.tsx

@@ -1,77 +1,77 @@
-import { ComponentStory } from '@storybook/react';
-import { Button } from '../Button';
-import { List } from '../List';
-import { Tooltip } from '../Tooltip';
-import { WithPopup } from './WithPopup';
-
-const positions = [
-  undefined,
-  'top',
-  'bottom',
-  'right',
-  'left',
-  'top-start',
-  'top-end',
-  'bottom-start',
-  'bottom-end',
-  'right-start',
-  'right-end',
-  'left-start',
-  'left-end',
-];
-
-export default {
-  title: 'Data Display/WithPopup',
-  component: WithPopup,
-  argTypes: {
-    placement: { control: 'select', options: positions },
-    eventType: { control: 'inline-radio', options: ['hover', 'click'] },
-  },
-};
-
-const Template: ComponentStory<typeof WithPopup> = (args) => (
-  <div
-    style={{
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      flexDirection: 'column',
-      gap: 32,
-      width: 600,
-      height: 400,
-    }}
-  >
-    <WithPopup
-      {...args}
-      eventType="hover"
-      trigger={({ isActive }) => <Button isActive={isActive}>Button</Button>}
-    >
-      <Tooltip text="Тултип" view="hint" />
-    </WithPopup>
-    <WithPopup {...args} eventType="click" trigger={<Button>Button</Button>}>
-      {({ onClose }) => (
-        <List
-          items={[
-            { item: 'Create Item', onClick: () => null },
-            { item: 'Copy Item', onClick: () => null },
-          ]}
-          onClick={onClose}
-        />
-      )}
-    </WithPopup>
-  </div>
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  isDisabled: false,
-  shouldRenderInBody: true,
-  shouldHideOnScroll: false,
-};
-
-Default.parameters = {
-  controls: {
-    exclude: ['trigger', 'data', 'testId', 'middlewares', 'children', 'eventType'],
-  },
-};
+import { ComponentStory } from '@storybook/react';
+import { Button } from '../Button';
+import { List } from '../List';
+import { Tooltip } from '../Tooltip';
+import { WithPopup } from './WithPopup';
+
+const positions = [
+  undefined,
+  'top',
+  'bottom',
+  'right',
+  'left',
+  'top-start',
+  'top-end',
+  'bottom-start',
+  'bottom-end',
+  'right-start',
+  'right-end',
+  'left-start',
+  'left-end',
+];
+
+export default {
+  title: 'Data Display/WithPopup',
+  component: WithPopup,
+  argTypes: {
+    placement: { control: 'select', options: positions },
+    eventType: { control: 'inline-radio', options: ['hover', 'click'] },
+  },
+};
+
+const Template: ComponentStory<typeof WithPopup> = (args) => (
+  <div
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexDirection: 'column',
+      gap: 32,
+      width: 600,
+      height: 400,
+    }}
+  >
+    <WithPopup
+      {...args}
+      eventType="hover"
+      trigger={({ isActive }) => <Button isActive={isActive}>Button</Button>}
+    >
+      <Tooltip text="Тултип" view="hint" />
+    </WithPopup>
+    <WithPopup {...args} eventType="click" trigger={<Button>Button</Button>}>
+      {({ onClose }) => (
+        <List
+          items={[
+            { item: 'Create Item', onClick: () => null },
+            { item: 'Copy Item', onClick: () => null },
+          ]}
+          onClick={onClose}
+        />
+      )}
+    </WithPopup>
+  </div>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  isDisabled: false,
+  shouldRenderInBody: true,
+  shouldHideOnScroll: false,
+};
+
+Default.parameters = {
+  controls: {
+    exclude: ['trigger', 'data', 'testId', 'middlewares', 'children', 'eventType'],
+  },
+};

package/src/components/WithPopup/WithPopup.styles.ts

@@ -1,21 +1,21 @@
-import { createThemedStyles, ITweakStyles } from '../../theme';
-
-export const useStyles = createThemedStyles('WithPopup', {
-  root: {},
-
-  disabled: {
-    '& > $trigger': {
-      cursor: 'default',
-    },
-  },
-
-  trigger: {
-    cursor: 'pointer',
-  },
-
-  popup: {
-    zIndex: 5,
-  },
-});
-
-export type IWithPopupStyles = ITweakStyles<typeof useStyles>;
+import { createThemedStyles, ITweakStyles } from '../../theme';
+
+export const useStyles = createThemedStyles('WithPopup', {
+  root: {},
+
+  disabled: {
+    '& > $trigger': {
+      cursor: 'default',
+    },
+  },
+
+  trigger: {
+    cursor: 'pointer',
+  },
+
+  popup: {
+    zIndex: 5,
+  },
+});
+
+export type IWithPopupStyles = ITweakStyles<typeof useStyles>;