@true-engineering/true-react-common-ui-kit 3.7.0 → 3.8.0

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

@@ -1,3 +1,3 @@
-export * from './DotsPreloader';
-export * from './SvgPreloader';
-export * from './DefaultPreloader';
+export * from './DotsPreloader';
+export * from './SvgPreloader';
+export * from './DefaultPreloader';

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.stories.tsx

@@ -5,7 +5,7 @@ import { Toaster } from './Toaster';
 const types = ['error', 'info', 'warning', 'ok', 'not-ok'];
 
 export default {
-  title: 'Toaster',
+  title: 'Feedback/Toaster',
   component: Toaster,
   args: {
     title: 'Произошла очень страшная ошибка',

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.stories.tsx

@@ -2,7 +2,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { Tooltip } from './Tooltip';
 
 export default {
-  title: 'Tooltip',
+  title: 'Data Display/Tooltip',
   component: Tooltip,
   args: {
     text: 'Tooltip Text',

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

@@ -0,0 +1,76 @@
+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,
+};
+
+Default.parameters = {
+  controls: {
+    exclude: ['trigger', 'data', 'testId', 'middlewares', 'children', 'eventType'],
+  },
+};

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

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

package/src/components/WithPopup/WithPopup.tsx

@@ -0,0 +1,118 @@
+import { FC, ReactNode, useState, MouseEvent } from 'react';
+import clsx from 'clsx';
+import { addDataTestId, isFunction } from '@true-engineering/true-react-platform-helpers';
+import {
+  autoUpdate,
+  useFloating,
+  useClick,
+  useDismiss,
+  useHover,
+  useInteractions,
+  Placement,
+  Middleware,
+  FloatingPortal,
+  offset,
+} from '@floating-ui/react';
+import { addDataAttributes } from '../../helpers';
+import { ICommonProps } from '../../types';
+import { DEFAULT_OFFSET } from './constants';
+import { IPopupEventType } from './types';
+import { useStyles, IWithPopupStyles } from './WithPopup.styles';
+
+export interface IWithPopupProps extends ICommonProps<IWithPopupStyles> {
+  trigger: ReactNode | FC<{ isActive: boolean }>;
+  children: ReactNode | FC<{ onClose: () => void }>;
+  middlewares?: Middleware[];
+  /** @default eventType === 'click' ? 'bottom-end' : 'top' */
+  placement?: Placement;
+  /** @default true */
+  shouldRenderInBody?: boolean;
+  /** @default 'click' */
+  eventType?: IPopupEventType;
+  /** @default 0 */
+  hoverDelay?: number;
+  /** @default 6 */
+  popupOffset?: number;
+  /** @default false */
+  isDisabled?: boolean;
+  onToggle?: (isActive: boolean) => void;
+}
+
+export const WithPopup: FC<IWithPopupProps> = ({
+  trigger,
+  children,
+  middlewares,
+  eventType = 'click',
+  placement = eventType === 'click' ? 'bottom-end' : 'top',
+  shouldRenderInBody = false,
+  hoverDelay = 0,
+  popupOffset = DEFAULT_OFFSET,
+  isDisabled = false,
+  tweakStyles,
+  data,
+  testId,
+  onToggle,
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const Trigger = trigger;
+  const Popup = children;
+
+  const handleToggle = (isActive: boolean, event?: MouseEvent | Event) => {
+    event?.stopPropagation();
+    if (!isDisabled) {
+      onToggle?.(isActive);
+      setIsOpen(isActive);
+    }
+  };
+
+  const handleClose = () => {
+    handleToggle(false);
+  };
+
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpen,
+    middleware: [offset(popupOffset), ...(middlewares ?? [])],
+    whileElementsMounted: autoUpdate,
+    placement,
+    onOpenChange: handleToggle,
+  });
+
+  const hover = useHover(context, {
+    enabled: eventType === 'hover',
+    delay: { open: hoverDelay },
+  });
+  const click = useClick(context, { enabled: eventType === 'click', toggle: false });
+  const dismiss = useDismiss(context, { enabled: eventType === 'click' });
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([hover, click, dismiss]);
+
+  return (
+    <div
+      ref={refs.setReference}
+      {...getReferenceProps}
+      className={clsx(classes.root, { [classes.disabled]: isDisabled })}
+      {...addDataTestId(testId)}
+      {...addDataAttributes(data)}
+    >
+      <div
+        className={classes.trigger}
+        onClick={eventType === 'click' ? (e) => handleToggle(!isOpen, e) : undefined}
+      >
+        {isFunction(Trigger) ? <Trigger isActive={isOpen} /> : Trigger}
+      </div>
+
+      {isOpen && (
+        <FloatingPortal
+          root={!shouldRenderInBody ? (refs.reference.current as HTMLDivElement) : undefined}
+        >
+          <div style={floatingStyles} ref={refs.setFloating} {...getFloatingProps()}>
+            {isFunction(Popup) ? <Popup onClose={handleClose} /> : Popup}
+          </div>
+        </FloatingPortal>
+      )}
+    </div>
+  );
+};

package/src/components/WithPopup/constants.ts

@@ -0,0 +1,3 @@
+export const DEFAULT_OFFSET = 6;
+
+export const POPUP_EVENT_TYPES = ['hover', 'click'] as const;

package/src/components/WithPopup/index.ts

@@ -0,0 +1,2 @@
+export * from './WithPopup';
+export type { IWithPopupStyles } from './WithPopup.styles';

package/src/components/WithPopup/types.ts

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

package/src/components/index.ts

@@ -1,40 +1,42 @@
-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 './PhoneInput';
-export * from './RadioButton';
-export * from './ScrollIntoViewIfNeeded';
-export * from './SearchInput';
-export * from './Select';
-export * from './Selector';
-export * from './Skeleton';
-export * from './SmartInput';
-export * from './Status';
-export * from './Switch';
-export * from './TextArea';
-export * from './TextButton';
-export * from './TextWithInfo';
-export * from './TextWithTooltip';
-export * from './ThemedPreloader';
-export * from './Toaster';
-export * from './Tooltip';
+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 './PhoneInput';
+export * from './RadioButton';
+export * from './ScrollIntoViewIfNeeded';
+export * from './SearchInput';
+export * from './Select';
+export * from './Selector';
+export * from './Skeleton';
+export * from './SmartInput';
+export * from './Status';
+export * from './Switch';
+export * from './TextArea';
+export * from './TextButton';
+export * from './TextWithInfo';
+export * from './TextWithTooltip';
+export * from './ThemedPreloader';
+export * from './Toaster';
+export * from './Tooltip';
+export * from './NewMoreMenu';
+export * from './WithPopup';

package/src/constants/index.ts

@@ -1 +1 @@
-export * from './phone-info';
+export * from './phone-info';