@true-engineering/true-react-common-ui-kit 4.0.0-alpha4 → 4.0.0-alpha40

package/src/components/FloatDocActions/FloatDocActions.stories.tsx

@@ -0,0 +1,117 @@
+import { FC, useState } from 'react';
+import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from '../Button';
+import { Checkbox, ICheckboxProps } from '../Checkbox';
+import { NewMoreMenu } from '../NewMoreMenu';
+import { TextButton } from '../TextButton';
+import {
+  FloatDocActions as FloatDocActionsComponent,
+  IFloatDocActionsProps,
+} from './FloatDocActions';
+import { DOC_ACTIONS_VIEWS } from './components';
+
+const DATA_LENGTH = 300;
+
+const Actions: FC = () => (
+  <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+    <TextButton icon="trash-can" view="custom">
+      Удалить
+    </TextButton>
+    <TextButton icon="pencil">Редактировать</TextButton>
+    <Button view="secondary">Отказать</Button>
+    <Button>Одобрить</Button>
+    <NewMoreMenu items={[]} />
+  </div>
+);
+
+const DocActionsWithData: FC<IFloatDocActionsProps> = (props) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [state, setState] = useState<Set<number>>(new Set());
+
+  const handleToggle = () => {
+    setIsOpen((prevState) => !prevState);
+  };
+
+  const handleSelectRow: ICheckboxProps<number>['onSelect'] = ({ value }) => {
+    if (isNotEmpty(value)) {
+      setState((prev) => {
+        const newSet = new Set(prev);
+        if (newSet.has(value)) {
+          newSet.delete(value);
+        } else {
+          newSet.add(value);
+        }
+        return newSet;
+      });
+    }
+  };
+
+  const handleSelectAll: ICheckboxProps<never>['onSelect'] = ({ isSelected }) => {
+    console.log('isSelected:', isSelected);
+
+    setState(
+      isSelected ? new Set<number>(Array.from({ length: DATA_LENGTH }, (_, i) => i)) : new Set(),
+    );
+  };
+
+  const isAllRowsSelected = state.size === DATA_LENGTH;
+  const title = props.title + ': ' + state.size;
+
+  return (
+    <div style={{ display: 'flex', gap: '50px' }}>
+      <div style={{ position: 'sticky', top: '50px', height: '50px' }}>
+        <Button onClick={handleToggle}>Toggle</Button>
+      </div>
+      <div style={{ width: '1000px' }}>
+        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+          {Array.from({ length: DATA_LENGTH }, (_, index) => (
+            <tr key={index} style={{ border: '1px solid skyblue' }}>
+              <td style={{ padding: '5px', display: 'flex', gap: '12px' }}>
+                {isOpen && (
+                  <Checkbox value={index} isChecked={state.has(index)} onSelect={handleSelectRow} />
+                )}
+                <div>Строка {index + 1}</div>
+              </td>
+            </tr>
+          ))}
+        </table>
+        <div style={{ position: 'sticky', bottom: '12px', left: '8px', right: '18px' }}>
+          <FloatDocActionsComponent
+            {...props}
+            title={title}
+            isOpen={isOpen}
+            isChecked={isAllRowsSelected}
+            isSemiChecked={!isAllRowsSelected && state.size !== 0}
+            onSelect={handleSelectAll}
+          >
+            <Actions />
+          </FloatDocActionsComponent>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const meta: Meta<typeof DocActionsWithData> = {
+  title: 'Table/FloatDocActions',
+  component: DocActionsWithData,
+  args: {
+    title: 'Выбрано',
+    view: 'neutral',
+  },
+  argTypes: {
+    view: { options: DOC_ACTIONS_VIEWS, control: 'inline-radio' },
+  },
+  parameters: {
+    controls: {
+      exclude: ['actions'],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FloatDocActionsComponent>;
+
+export const Default: Story = {};

package/src/components/FloatDocActions/FloatDocActions.styles.ts

@@ -0,0 +1,12 @@
+import { createUseStyles } from 'react-jss';
+import { animations, ITweakStyles } from '../../theme';
+import { IDocActionsStyles } from './components';
+
+export const useStyles = createUseStyles({
+  ...animations.slideUp,
+});
+
+export type IFloatDocActionsStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakDocActions: IDocActionsStyles }
+>;

package/src/components/FloatDocActions/FloatDocActions.tsx

@@ -0,0 +1,34 @@
+import { FC } from 'react';
+import { CSSTransition } from 'react-transition-group';
+import { DocActions, IDocActionsProps } from './components';
+import { DEFAULT_TIMEOUT } from './constants';
+import { useStyles } from './FloatDocActions.styles';
+
+export interface IFloatDocActionsProps extends IDocActionsProps {
+  isOpen: boolean;
+}
+
+export const FloatDocActions: FC<IFloatDocActionsProps> = ({
+  isOpen,
+  children,
+  ...docActionsProps
+}) => {
+  const classes = useStyles();
+
+  return (
+    <CSSTransition
+      in={isOpen}
+      timeout={DEFAULT_TIMEOUT}
+      mountOnEnter
+      unmountOnExit
+      classNames={{
+        enter: classes['slide-up-enter'],
+        enterActive: classes['slide-up-enter-active'],
+        exit: classes['slide-up-exit'],
+        exitActive: classes['slide-up-exit-active'],
+      }}
+    >
+      <DocActions {...docActionsProps}>{children}</DocActions>
+    </CSSTransition>
+  );
+};

package/src/components/FloatDocActions/components/DocActions/DocActions.styles.ts

@@ -0,0 +1,29 @@
+import { createThemedStyles, ITweakStyles } from '../../../../theme';
+import { ICheckboxStyles } from '../../../Checkbox';
+
+export const useStyles = createThemedStyles('DocActions', {
+  docActions: {
+    display: 'grid',
+    alignItems: 'center',
+    gridTemplateColumns: 'max-content 1fr',
+  },
+
+  neutral: {},
+
+  inverse: {},
+
+  counterWrapper: {},
+
+  title: {},
+
+  actionsWrapper: {
+    justifySelf: 'end',
+  },
+});
+
+export type IDocActionsStyles = ITweakStyles<
+  typeof useStyles,
+  {
+    tweakCheckbox: ICheckboxStyles;
+  }
+>;

package/src/components/FloatDocActions/components/DocActions/DocActions.tsx

@@ -0,0 +1,43 @@
+import { FC, ReactNode } from 'react';
+import clsx from 'clsx';
+import { useTweakStyles } from '../../../../hooks';
+import { ICommonProps } from '../../../../types';
+import { Checkbox, ICheckboxProps } from '../../../Checkbox';
+import { IDocActionsView } from './types';
+import { IDocActionsStyles, useStyles } from './DocActions.styles';
+
+export interface IDocActionsProps
+  extends Omit<ICheckboxProps<never>, 'tweakStyles'>,
+    ICommonProps<IDocActionsStyles> {
+  title: string;
+  /** @default 'neutral' */
+  view?: IDocActionsView;
+  children: ReactNode;
+}
+
+export const DocActions: FC<IDocActionsProps> = ({
+  title,
+  view = 'neutral',
+  children,
+  tweakStyles,
+  ...checkBoxProps
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakCheckboxStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakCheckbox',
+    currentComponentName: 'DocActions',
+  });
+
+  return (
+    <div className={clsx(classes.docActions, classes[view])}>
+      <div className={classes.counterWrapper}>
+        <Checkbox tweakStyles={tweakCheckboxStyles} {...checkBoxProps}>
+          <span className={classes.title}>{title}</span>
+        </Checkbox>
+      </div>
+      <div className={classes.actionsWrapper}>{children}</div>
+    </div>
+  );
+};

package/src/components/FloatDocActions/components/DocActions/constants.ts

@@ -0,0 +1 @@
+export const DOC_ACTIONS_VIEWS = ['neutral', 'inverse'] as const;

package/src/components/FloatDocActions/components/DocActions/index.ts

@@ -0,0 +1,4 @@
+export * from './DocActions';
+export * from './types';
+export * from './constants';
+export type { IDocActionsStyles } from './DocActions.styles';

package/src/components/FloatDocActions/components/DocActions/types.ts

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

package/src/components/FloatDocActions/components/index.ts

@@ -0,0 +1 @@
+export * from './DocActions';

package/src/components/FloatDocActions/constants.ts

@@ -0,0 +1 @@
+export const DEFAULT_TIMEOUT = 150;

package/src/components/FloatDocActions/index.ts

@@ -0,0 +1,3 @@
+export * from './FloatDocActions';
+export * from './components';
+export type { IFloatDocActionsStyles } from './FloatDocActions.styles';

package/src/components/Icon/Icon.stories.tsx

@@ -1,86 +1,95 @@
-import { Icon } from './Icon';
-import { complexIcons } from './complexIcons';
-import { iconsList } from './icons-list';
-import { IIconType } from './types';
-
-const types: IIconType[] = [...Object.keys(iconsList), ...Object.keys(complexIcons)] as IIconType[];
-
-export default {
-  title: 'Data Display/Icon',
-};
-
-export const Default = () => (
-  <div
-    style={{
-      border: '1px dotted rgba(0,0,0,.2)',
-      // color: color('Container color', colors.GREEN_FOCUS),
-      display: 'flex',
-      // width: number('Container width', 40, {
-      //   range: true,
-      //   min: 0,
-      //   max: 200,
-      //   step: 10,
-      // }),
-      // height: number('Container height', 40, {
-      //   range: true,
-      //   min: 0,
-      //   max: 200,
-      //   step: 10,
-      // }),
-    }}
-  >
-    {/* <Icon type={select('type', types, types[0])} /> */}
-  </div>
-);
-
-export const Gallery = () => (
-  <div
-    style={{
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      flexWrap: 'wrap',
-      width: '80vw',
-    }}
-  >
-    {types.map((type) => (
-      <div
-        key={type}
-        style={{
-          width: 100,
-          height: 100,
-          margin: 1,
-          background: '#f7f7f7',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          flexDirection: 'column',
-        }}
-      >
-        <div
-          style={{
-            width: 32,
-            height: 32,
-            margin: '10px 0',
-            display: 'flex',
-            alignItems: 'center',
-            color: '#888',
-          }}
-        >
-          <Icon type={type} />
-        </div>
-        <div
-          style={{
-            fontFamily: 'Arial',
-            fontSize: 13,
-            color: '#747679',
-            overflow: 'hidden',
-            padding: '0 5px',
-          }}
-        >
-          {type}
-        </div>
-      </div>
-    ))}
-  </div>
-);
+import { FC } from 'react';
+import { isArrayNotEmpty, isEmpty } from '@true-engineering/true-react-platform-helpers';
+import { useTheme } from '../../theme';
+import { Icon } from './Icon';
+import { iconsMap } from './icons';
+import { IIconType } from './types';
+
+export default {
+  title: 'Data Display/Icon',
+};
+
+const GalleryIcon: FC<{ type: IIconType }> = ({ type }) => (
+  <div
+    key={type}
+    style={{
+      width: 100,
+      height: 100,
+      margin: 1,
+      background: '#f7f7f7',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexDirection: 'column',
+    }}
+  >
+    <div
+      style={{
+        width: 32,
+        height: 32,
+        margin: '10px 0',
+        display: 'flex',
+        alignItems: 'center',
+        color: '#888',
+      }}
+    >
+      <Icon type={type} />
+    </div>
+    <div
+      style={{
+        fontFamily: 'Arial',
+        fontSize: 13,
+        color: '#747679',
+        overflow: 'hidden',
+        padding: '0 5px',
+      }}
+    >
+      {type}
+    </div>
+  </div>
+);
+
+export const Gallery = () => {
+  const theme = useTheme();
+  const notCustomizedIcons = Object.keys(iconsMap).filter((icon) =>
+    isEmpty(theme.icons?.[icon]),
+  ) as IIconType[];
+  const customizedIcons = Object.keys(theme.icons ?? {}) as IIconType[];
+
+  return (
+    <div>
+      {isArrayNotEmpty(notCustomizedIcons) && (
+        <div>
+          <h1>Китовые иконки</h1>
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              flexWrap: 'wrap',
+              width: '80vw',
+            }}
+          >
+            {notCustomizedIcons.map((type) => (
+              <GalleryIcon type={type} key={type} />
+            ))}
+          </div>
+        </div>
+      )}
+      <div>
+        <h1>Кастомизированные иконки</h1>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            flexWrap: 'wrap',
+            width: '80vw',
+          }}
+        >
+          {customizedIcons.map((type) => (
+            <GalleryIcon type={type} key={type} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -1,10 +1,10 @@
-import { ITweakStyles, createThemedStyles } from '../../theme';
-
-export const useStyles = createThemedStyles('Icon', {
-  root: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-});
-
-export type IIconStyles = ITweakStyles<typeof useStyles>;
+import { createThemedStyles, ITweakStyles } from '../../theme';
+
+export const useStyles = createThemedStyles('Icon', {
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+});
+
+export type IIconStyles = ITweakStyles<typeof useStyles>;

package/src/components/Icon/Icon.tsx

@@ -1,26 +1,31 @@
-import { FC } from 'react';
-import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { ICommonProps } from '../../types';
-import { ComplexIconBoilerplate, IconBoilerplate } from './components';
-import { isComplexIcon } from './helpers';
-import { IIconType } from './types';
-import { useStyles, IIconStyles } from './Icon.styles';
-
-export interface IIconProps extends ICommonProps<IIconStyles> {
-  type: IIconType;
-}
-
-export const Icon: FC<IIconProps> = ({ type, data, testId, tweakStyles }) => {
-  const classes = useStyles({ theme: tweakStyles });
-
-  return (
-    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
-      {isComplexIcon(type) ? (
-        <ComplexIconBoilerplate type={type} />
-      ) : (
-        <IconBoilerplate type={type} />
-      )}
-    </div>
-  );
-};
+import { FC } from 'react';
+import { addDataAttributes, isEmpty } from '@true-engineering/true-react-platform-helpers';
+import { useTheme } from '../../theme';
+import { ICommonProps } from '../../types';
+import { iconsMap } from './icons';
+import { IIconType } from './types';
+import { IIconStyles, useStyles } from './Icon.styles';
+
+export interface IIconProps extends ICommonProps<IIconStyles> {
+  type: IIconType;
+}
+
+export const Icon: FC<IIconProps> = ({ type, data, testId, tweakStyles }) => {
+  const classes = useStyles({ theme: tweakStyles });
+  const theme = useTheme();
+
+  const icon = theme.icons?.[type] ?? iconsMap[type];
+
+  if (isEmpty(icon)) {
+    console.error(`Иконки ${type} не существует`);
+    return null;
+  }
+
+  return (
+    <div
+      className={classes.root}
+      {...addDataAttributes(data, testId)}
+      dangerouslySetInnerHTML={{ __html: icon }}
+    />
+  );
+};

package/src/components/Icon/{complexIcons/avatarGreen.svg → icons/avatar.svg}

@@ -1,58 +1,58 @@
-  <svg
-    width="100%"
-    height="100%"
-    viewBox="0 0 32 32"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <circle opacity="0.5" cx="16" cy="16" r="16" fill="#DDE3ED" />
-    <mask
-      id="mask0_0_12744"
-      style="mask-type: 'alpha';"
-      maskUnits="userSpaceOnUse"
-      x="0"
-      y="0"
-      width="32"
-      height="32"
-    >
-      <circle cx="16" cy="16" r="16" fill="white" />
-    </mask>
-    <g mask="url(#mask0_0_12744)">
-      <circle cx="16" cy="29" r="13" fill="url(#paint0_linear_0_12744)" />
-      <mask
-        id="mask1_0_12744"
-        style="mask-type: 'alpha';"
-        maskUnits="userSpaceOnUse"
-        x="3"
-        y="16"
-        width="26"
-        height="26"
-      >
-        <circle cx="16" cy="29" r="13" fill="white" />
-      </mask>
-      <g mask="url(#mask1_0_12744)">
-        <ellipse
-          cx="16"
-          cy="17.5"
-          rx="6"
-          ry="7.5"
-          fill="#505F79"
-          fill-opacity="0.204983"
-        />
-      </g>
-    </g>
-    <ellipse cx="16" cy="13" rx="6" ry="7" fill="white" />
-    <defs>
-      <linearGradient
-        id="paint0_linear_0_12744"
-        x1="13.347"
-        y1="46.279"
-        x2="33.5318"
-        y2="30.8088"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stop-color="#ABD229" />
-        <stop offset="1" stop-color="#9CD03F" />
-      </linearGradient>
-    </defs>
+  <svg
+    width="100%"
+    height="100%"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle opacity="0.5" cx="16" cy="16" r="16" fill="#DDE3ED" />
+    <mask
+      id="mask0_0_12744"
+      style="mask-type: 'alpha';"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="32"
+      height="32"
+    >
+      <circle cx="16" cy="16" r="16" fill="white" />
+    </mask>
+    <g mask="url(#mask0_0_12744)">
+      <circle cx="16" cy="29" r="13" fill="url(#paint0_linear_0_12744)" />
+      <mask
+        id="mask1_0_12744"
+        style="mask-type: 'alpha';"
+        maskUnits="userSpaceOnUse"
+        x="3"
+        y="16"
+        width="26"
+        height="26"
+      >
+        <circle cx="16" cy="29" r="13" fill="white" />
+      </mask>
+      <g mask="url(#mask1_0_12744)">
+        <ellipse
+          cx="16"
+          cy="17.5"
+          rx="6"
+          ry="7.5"
+          fill="#505F79"
+          fill-opacity="0.204983"
+        />
+      </g>
+    </g>
+    <ellipse cx="16" cy="13" rx="6" ry="7" fill="white" />
+    <defs>
+      <linearGradient
+        id="paint0_linear_0_12744"
+        x1="13.347"
+        y1="46.279"
+        x2="33.5318"
+        y2="30.8088"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#ABD229" />
+        <stop offset="1" stop-color="#9CD03F" />
+      </linearGradient>
+    </defs>
   </svg>

package/src/components/Icon/icons/calendar.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="M6 12h3V9H6v3zm-2 4V7h12l.002 9H4zM16 4h-1V3c0-.552-.448-1-1-1s-1 .448-1 1v1H7V3c0-.552-.448-1-1-1s-1 .448-1 1v1H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2z"></path></svg>

package/src/components/Icon/icons/check.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="m7.5 13.086 7.793-7.793a1 1 0 1 1 1.414 1.414l-8.5 8.5a1 1 0 0 1-1.414 0l-3.5-3.5a1 1 0 1 1 1.414-1.414L7.5 13.086Z"></path></svg>

package/src/components/Icon/icons/chevron-down-small.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="M8.24512 8.84751L11.038 6.05461C11.4285 5.66409 12.0617 5.66409 12.4522 6.05461C12.8427 6.44514 12.8427 7.0783 12.4522 7.46883L8.95222 10.9688C8.5617 11.3593 7.92853 11.3593 7.53801 10.9688L4.03801 7.46883C3.64749 7.0783 3.64749 6.44514 4.03801 6.05461C4.42853 5.66409 5.0617 5.66409 5.45222 6.05461L8.24512 8.84751Z"></path></svg>

package/src/components/Icon/icons/chevron-down.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="M10.0029 11.6053L5.71004 7.31242C5.31951 6.9219 4.68635 6.9219 4.29582 7.31242C3.9053 7.70295 3.9053 8.33611 4.29582 8.72664L9.29582 13.7266C9.68635 14.1172 10.3195 14.1172 10.71 13.7266L15.71 8.72664C16.1006 8.33611 16.1006 7.70295 15.71 7.31242C15.3195 6.9219 14.6863 6.9219 14.2958 7.31242L10.0029 11.6053Z"></path></svg>