@alfalab/core-components 41.6.0 → 41.7.0-beta.2

package/icon-view/modern/components/base-shape/component.d.ts

@@ -2,11 +2,19 @@
 import React from 'react';
 import { ElementType, ReactNode } from "react";
 import { PathsMap } from "./utils";
+type Border = {
+    width?: number;
+    color?: string;
+    style?: 'solid' | 'dashed' | 'dotted';
+};
 type BaseShapeProps = {
     /**
      * Размер компонента
      */
-    size?: number;
+    size?: number | {
+        width: number;
+        height: number;
+    };
     /**
      * Цвет заливки
      * @default #f3f4f5
@@ -16,7 +24,7 @@ type BaseShapeProps = {
      * Видимость обводки
      * @default false
      */
-    border?: boolean;
+    border?: boolean | Border;
     /**
      * Фоновое изображение. Имеет приоритет над иконкой и заливкой
      */
@@ -53,6 +61,10 @@ type BaseShapeProps = {
      * Дочерние элементы.
      */
     children?: ReactNode;
+    /**
+     * Текст
+     */
+    text?: ReactNode;
 };
 declare const BaseShape: React.ForwardRefExoticComponent<BaseShapeProps & React.RefAttributes<HTMLDivElement>>;
 export { BaseShapeProps, BaseShape };

package/icon-view/modern/components/base-shape/component.js

@@ -3,22 +3,23 @@ import cn from 'classnames';
 import { useId } from '@alfalab/hooks';
 import { getPath } from './utils.js';
 
-const styles = {"componentWrapper":"icon-view__componentWrapper_v8rdw","component":"icon-view__component_v8rdw","bg":"icon-view__bg_v8rdw","border":"icon-view__border_v8rdw","children":"icon-view__children_v8rdw","addons":"icon-view__addons_v8rdw","size_128":"icon-view__size_128_v8rdw","topAddons":"icon-view__topAddons_v8rdw","bottomAddons":"icon-view__bottomAddons_v8rdw","size_80":"icon-view__size_80_v8rdw","indicator":"icon-view__indicator_v8rdw","size_64":"icon-view__size_64_v8rdw","size_48":"icon-view__size_48_v8rdw","size_40":"icon-view__size_40_v8rdw","size_32":"icon-view__size_32_v8rdw","size_24":"icon-view__size_24_v8rdw","size_20":"icon-view__size_20_v8rdw"};
+const styles = {"componentWrapper":"icon-view__componentWrapper_j6ogi","component":"icon-view__component_j6ogi","bg":"icon-view__bg_j6ogi","border":"icon-view__border_j6ogi","text":"icon-view__text_j6ogi","children":"icon-view__children_j6ogi","addons":"icon-view__addons_j6ogi","size_128":"icon-view__size_128_j6ogi","topAddons":"icon-view__topAddons_j6ogi","bottomAddons":"icon-view__bottomAddons_j6ogi","size_80":"icon-view__size_80_j6ogi","indicator":"icon-view__indicator_j6ogi","size_64":"icon-view__size_64_j6ogi","size_48":"icon-view__size_48_j6ogi","size_40":"icon-view__size_40_j6ogi","size_32":"icon-view__size_32_j6ogi","size_24":"icon-view__size_24_j6ogi","size_20":"icon-view__size_20_j6ogi"};
 require('./index.css');
 
-const BaseShape = forwardRef(({ size = 64, border = false, backgroundColor, imageUrl, backgroundIcon: Icon, className, children, topAddons, bottomAddons, indicator, pathsMap, dataTestId, }, ref) => {
+const BaseShape = forwardRef(({ size = 64, border = false, backgroundColor, imageUrl, backgroundIcon: Icon, className, text, children, topAddons, bottomAddons, indicator, pathsMap, dataTestId, }, ref) => {
+    const [width, height] = typeof size === 'object' ? [size.width, size.height] : [size, size];
     const imagePatternId = useId();
-    const svgPatternId = Icon && `svg_${size}`;
-    const hasTopAddons = Boolean(topAddons) && size > 32;
-    const hasBottomAddons = Boolean(bottomAddons) && size > 32;
-    const hasIndicator = Boolean(indicator) && size < 128;
-    return (React.createElement("div", { className: cn(styles.componentWrapper, styles[`size_${size}`], className), ref: ref, "data-test-id": dataTestId },
+    const svgPatternId = useId();
+    const hasTopAddons = Boolean(topAddons) && width > 32;
+    const hasBottomAddons = Boolean(bottomAddons) && width > 32;
+    const hasIndicator = Boolean(indicator) && width < 128;
+    return (React.createElement("div", { className: cn(styles.componentWrapper, styles[`size_${Math.max(width, height)}`], className), ref: ref, "data-test-id": dataTestId },
         React.createElement("div", { className: styles.component },
-            React.createElement("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, xmlns: 'http://www.w3.org/2000/svg', focusable: false },
+            React.createElement("svg", { width: width, height: height, viewBox: `0 0 ${width} ${height}`, xmlns: 'http://www.w3.org/2000/svg', focusable: false },
                 React.createElement("path", { className: styles.bg, style: {
                         fill: backgroundColor,
                     }, d: getPath({
-                        size,
+                        size: Math.max(width, height),
                         hasTopAddons,
                         hasBottomAddons,
                         hasIndicator,
@@ -31,33 +32,39 @@ const BaseShape = forwardRef(({ size = 64, border = false, backgroundColor, imag
                     React.createElement("path", { style: {
                             fill: `url(#${imagePatternId})`,
                         }, d: getPath({
-                            size,
+                            size: Math.max(width, height),
                             hasTopAddons,
                             hasBottomAddons,
                             hasIndicator,
                             pathsMap: pathsMap.shape,
                         }) }))),
-                Icon && !imageUrl && (React.createElement(Fragment, null,
+                Icon && (React.createElement(Fragment, null,
                     React.createElement("defs", null,
                         React.createElement("pattern", { id: svgPatternId, width: '100%', height: '100%' },
-                            React.createElement(Icon, { width: size, height: size }))),
+                            React.createElement(Icon, { width: width, height: height }))),
                     React.createElement("path", { style: {
                             fill: `url(#${svgPatternId})`,
                         }, d: getPath({
-                            size,
+                            size: Math.max(width, height),
                             hasTopAddons,
                             hasBottomAddons,
                             hasIndicator,
                             pathsMap: pathsMap.shape,
                         }) }))),
-                border && (React.createElement("path", { className: styles.border, d: getPath({
-                        size,
+                border && (React.createElement("path", { className: styles.border, style: typeof border === 'object'
+                        ? {
+                            stroke: border.color,
+                            strokeWidth: border.width,
+                        }
+                        : undefined, d: getPath({
+                        size: Math.max(width, height),
                         hasTopAddons,
                         hasBottomAddons,
                         hasIndicator,
                         pathsMap: pathsMap.border,
                     }) }))),
-            !imageUrl && !Icon && React.createElement("div", { className: styles.children }, children)),
+            text && React.createElement("div", { className: styles.text }, text),
+            children && React.createElement("div", { className: styles.children }, children)),
         hasTopAddons && (React.createElement("div", { className: cn(styles.addons, styles.topAddons) }, topAddons)),
         hasBottomAddons && (React.createElement("div", { className: cn(styles.addons, styles.bottomAddons) }, bottomAddons)),
         hasIndicator && !hasTopAddons && (React.createElement("div", { className: cn(styles.addons, styles.indicator) }, indicator))));

package/icon-view/modern/components/base-shape/index.css

@@ -20,20 +20,34 @@
 } :root {
     --icon-view-color: var(--color-light-graphic-secondary);
     --icon-view-bg-color: var(--color-light-bg-secondary);
-} .icon-view__componentWrapper_v8rdw {
+} .icon-view__componentWrapper_j6ogi {
     position: relative;
     display: inline-flex;
-} .icon-view__component_v8rdw {
+} .icon-view__component_j6ogi {
     display: flex;
+    align-items: center;
+    justify-content: center;
     position: relative;
+    overflow: hidden;
     color: var(--icon-view-color);
-} .icon-view__bg_v8rdw {
+} .icon-view__bg_j6ogi {
     fill: var(--icon-view-bg-color);
-} .icon-view__border_v8rdw {
+} .icon-view__border_j6ogi {
     stroke: var(--color-light-specialbg-component);
     stroke-width: 1px;
     fill: transparent;
-} .icon-view__children_v8rdw {
+} .icon-view__text_j6ogi {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    overflow: hidden;
+    text-align: center;
+} .icon-view__children_j6ogi {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -42,103 +56,127 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%)
-} .icon-view__children_v8rdw svg {
+} .icon-view__children_j6ogi svg {
         width: 100%;
         height: 100%;
-    } .icon-view__addons_v8rdw {
+    } .icon-view__addons_j6ogi {
     display: flex;
     align-items: center;
     flex-shrink: 0;
     position: absolute;
     line-height: 0;
-} .icon-view__size_128_v8rdw .icon-view__children_v8rdw {
+} .icon-view__size_128_j6ogi {
+    width: 128px;
+    height: 128px
+} .icon-view__size_128_j6ogi .icon-view__children_j6ogi {
         width: 64px;
         height: 64px;
-    } .icon-view__size_128_v8rdw .icon-view__addons_v8rdw {
+    } .icon-view__size_128_j6ogi .icon-view__addons_j6ogi {
         width: 40px;
         height: 40px;
-    } .icon-view__size_128_v8rdw .icon-view__topAddons_v8rdw {
+    } .icon-view__size_128_j6ogi .icon-view__topAddons_j6ogi {
         top: -8px;
         right: -8px;
-    } .icon-view__size_128_v8rdw .icon-view__bottomAddons_v8rdw {
+    } .icon-view__size_128_j6ogi .icon-view__bottomAddons_j6ogi {
         bottom: -8px;
         right: -8px;
-    } .icon-view__size_80_v8rdw .icon-view__children_v8rdw {
+    } .icon-view__size_80_j6ogi {
+    width: 80px;
+    height: 80px
+} .icon-view__size_80_j6ogi .icon-view__children_j6ogi {
         width: 48px;
         height: 48px;
-    } .icon-view__size_80_v8rdw .icon-view__addons_v8rdw {
+    } .icon-view__size_80_j6ogi .icon-view__addons_j6ogi {
         width: 24px;
         height: 24px;
-    } .icon-view__size_80_v8rdw .icon-view__topAddons_v8rdw {
+    } .icon-view__size_80_j6ogi .icon-view__topAddons_j6ogi {
         top: -3px;
         right: -3px;
-    } .icon-view__size_80_v8rdw .icon-view__bottomAddons_v8rdw {
+    } .icon-view__size_80_j6ogi .icon-view__bottomAddons_j6ogi {
         bottom: -3px;
         right: -3px;
-    } .icon-view__size_80_v8rdw .icon-view__indicator_v8rdw {
+    } .icon-view__size_80_j6ogi .icon-view__indicator_j6ogi {
         top: -6px;
         right: -14px;
-    } .icon-view__size_64_v8rdw .icon-view__children_v8rdw {
+    } .icon-view__size_64_j6ogi {
+    width: 64px;
+    height: 64px
+} .icon-view__size_64_j6ogi .icon-view__children_j6ogi {
         width: 32px;
         height: 32px;
-    } .icon-view__size_64_v8rdw .icon-view__addons_v8rdw {
+    } .icon-view__size_64_j6ogi .icon-view__addons_j6ogi {
         width: 24px;
         height: 24px;
-    } .icon-view__size_64_v8rdw .icon-view__topAddons_v8rdw {
+    } .icon-view__size_64_j6ogi .icon-view__topAddons_j6ogi {
         top: -7px;
         right: -7px;
-    } .icon-view__size_64_v8rdw .icon-view__bottomAddons_v8rdw {
+    } .icon-view__size_64_j6ogi .icon-view__bottomAddons_j6ogi {
         bottom: -7px;
         right: -7px;
-    } .icon-view__size_64_v8rdw .icon-view__indicator_v8rdw {
+    } .icon-view__size_64_j6ogi .icon-view__indicator_j6ogi {
         top: -8px;
         right: -16px;
-    } .icon-view__size_48_v8rdw .icon-view__children_v8rdw {
+    } .icon-view__size_48_j6ogi {
+    width: 48px;
+    height: 48px
+} .icon-view__size_48_j6ogi .icon-view__children_j6ogi {
         width: 24px;
         height: 24px;
-    } .icon-view__size_48_v8rdw .icon-view__addons_v8rdw {
+    } .icon-view__size_48_j6ogi .icon-view__addons_j6ogi {
         width: 20px;
         height: 20px;
-    } .icon-view__size_48_v8rdw .icon-view__topAddons_v8rdw {
+    } .icon-view__size_48_j6ogi .icon-view__topAddons_j6ogi {
         top: -7px;
         right: -7px;
-    } .icon-view__size_48_v8rdw .icon-view__bottomAddons_v8rdw {
+    } .icon-view__size_48_j6ogi .icon-view__bottomAddons_j6ogi {
         bottom: -7px;
         right: -7px;
-    } .icon-view__size_48_v8rdw .icon-view__indicator_v8rdw {
+    } .icon-view__size_48_j6ogi .icon-view__indicator_j6ogi {
         top: -7px;
         right: -13px;
-    } .icon-view__size_40_v8rdw .icon-view__children_v8rdw {
+    } .icon-view__size_40_j6ogi {
+    width: 40px;
+    height: 40px
+} .icon-view__size_40_j6ogi .icon-view__children_j6ogi {
         width: 24px;
         height: 24px;
-    } .icon-view__size_40_v8rdw .icon-view__addons_v8rdw {
+    } .icon-view__size_40_j6ogi .icon-view__addons_j6ogi {
         width: 20px;
         height: 20px;
-    } .icon-view__size_40_v8rdw .icon-view__topAddons_v8rdw {
+    } .icon-view__size_40_j6ogi .icon-view__topAddons_j6ogi {
         top: -7px;
         right: -7px;
-    } .icon-view__size_40_v8rdw .icon-view__bottomAddons_v8rdw {
+    } .icon-view__size_40_j6ogi .icon-view__bottomAddons_j6ogi {
         bottom: -7px;
         right: -7px;
-    } .icon-view__size_40_v8rdw .icon-view__indicator_v8rdw {
+    } .icon-view__size_40_j6ogi .icon-view__indicator_j6ogi {
         top: -7px;
         right: -13px;
-    } .icon-view__size_32_v8rdw .icon-view__children_v8rdw {
+    } .icon-view__size_32_j6ogi {
+    width: 32px;
+    height: 32px
+} .icon-view__size_32_j6ogi .icon-view__children_j6ogi {
         width: 24px;
         height: 24px;
-    } .icon-view__size_32_v8rdw .icon-view__indicator_v8rdw {
+    } .icon-view__size_32_j6ogi .icon-view__indicator_j6ogi {
         top: -2px;
         right: -2px;
-    } .icon-view__size_24_v8rdw .icon-view__children_v8rdw {
+    } .icon-view__size_24_j6ogi {
+    width: 24px;
+    height: 24px
+} .icon-view__size_24_j6ogi .icon-view__children_j6ogi {
         width: 24px;
         height: 24px;
-    } .icon-view__size_24_v8rdw .icon-view__indicator_v8rdw {
+    } .icon-view__size_24_j6ogi .icon-view__indicator_j6ogi {
         top: -2px;
         right: -2px;
-    } .icon-view__size_20_v8rdw .icon-view__children_v8rdw {
+    } .icon-view__size_20_j6ogi {
+    width: 20px;
+    height: 20px
+} .icon-view__size_20_j6ogi .icon-view__children_j6ogi {
         width: 16px;
         height: 16px;
-    } .icon-view__size_20_v8rdw .icon-view__indicator_v8rdw {
+    } .icon-view__size_20_j6ogi .icon-view__indicator_j6ogi {
         top: -3px;
         right: -3px;
     }

package/icon-view/modern/components/index.d.ts

@@ -1,3 +1,5 @@
 export * from "./super-ellipse/index";
 export * from "./circle/index";
+export * from "./rectangle/index";
+export * from "./no-shape/index";
 export * from "./base-shape/index";

package/icon-view/modern/components/index.js

@@ -1,9 +1,13 @@
 export { SuperEllipse } from './super-ellipse/component.js';
 export { Circle } from './circle/component.js';
+export { Rectangle } from './rectangle/component.js';
+export { NoShape } from './no-shape/component.js';
 export { BaseShape } from './base-shape/component.js';
 import 'react';
 import 'classnames';
 import '@alfalab/hooks';
 import './super-ellipse/paths.js';
-import './circle/paths.js';
 import './base-shape/utils.js';
+import './circle/paths.js';
+import './rectangle/paths.js';
+import './no-shape/paths.js';

package/icon-view/modern/components/no-shape/component.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import React from 'react';
+import { ReactNode } from "react";
+import { BaseShapeProps } from "../base-shape/index";
+type NoShapeProps = Omit<BaseShapeProps, 'pathsMap' | 'size' | 'topAddons' | 'bottomAddons' | 'indicator' | 'border'> & {
+    /**
+     * Размер компонента
+     * @default 64
+     */
+    size?: 20 | 24 | 32 | 40 | 48 | 64 | 80 | 128;
+    /**
+     * Дочерний компонент
+     */
+    children?: ReactNode;
+};
+declare const NoShape: React.ForwardRefExoticComponent<Omit<BaseShapeProps, "size" | "pathsMap" | "border" | "topAddons" | "bottomAddons" | "indicator"> & {
+    /**
+     * Размер компонента
+     * @default 64
+     */
+    size?: 64 | 32 | 128 | 20 | 24 | 40 | 48 | 80 | undefined;
+    /**
+     * Дочерний компонент
+     */
+    children?: ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export { NoShapeProps, NoShape };

package/icon-view/modern/components/no-shape/component.js

@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import { BaseShape } from '../base-shape/component.js';
+import { pathsMap } from './paths.js';
+import 'classnames';
+import '@alfalab/hooks';
+import '../base-shape/utils.js';
+
+const NoShape = forwardRef((props, ref) => (React.createElement(BaseShape, { ...props, pathsMap: pathsMap, ref: ref })));
+
+export { NoShape };

package/icon-view/modern/components/no-shape/index.d.ts

@@ -0,0 +1 @@
+export * from "./component";

package/icon-view/modern/components/no-shape/index.js

@@ -0,0 +1,7 @@
+export { NoShape } from './component.js';
+import 'react';
+import '../base-shape/component.js';
+import 'classnames';
+import '@alfalab/hooks';
+import './paths.js';
+import '../base-shape/utils.js';

package/icon-view/modern/components/no-shape/paths.d.ts

@@ -0,0 +1,81 @@
+declare const shapePaths: {
+    20: {
+        none: string;
+    };
+    24: {
+        none: string;
+    };
+    32: {
+        none: string;
+    };
+    40: {
+        none: string;
+    };
+    48: {
+        none: string;
+    };
+    64: {
+        none: string;
+    };
+    80: {
+        none: string;
+    };
+    128: {
+        none: string;
+    };
+};
+declare const pathsMap: {
+    shape: {
+        20: {
+            none: string;
+        };
+        24: {
+            none: string;
+        };
+        32: {
+            none: string;
+        };
+        40: {
+            none: string;
+        };
+        48: {
+            none: string;
+        };
+        64: {
+            none: string;
+        };
+        80: {
+            none: string;
+        };
+        128: {
+            none: string;
+        };
+    };
+    border: {
+        20: {
+            none: string;
+        };
+        24: {
+            none: string;
+        };
+        32: {
+            none: string;
+        };
+        40: {
+            none: string;
+        };
+        48: {
+            none: string;
+        };
+        64: {
+            none: string;
+        };
+        80: {
+            none: string;
+        };
+        128: {
+            none: string;
+        };
+    };
+};
+export { shapePaths, pathsMap };

package/icon-view/modern/components/no-shape/paths.js

@@ -0,0 +1,32 @@
+const shapePaths = {
+    20: {
+        none: 'M0 0 H20 V20 H0 Z',
+    },
+    24: {
+        none: 'M0 0 H24 V24 H0 Z',
+    },
+    32: {
+        none: 'M0 0 H32 V32 H0 Z',
+    },
+    40: {
+        none: 'M0 0 H40 V40 H0 Z',
+    },
+    48: {
+        none: 'M0 0 H48 V48 H0 Z',
+    },
+    64: {
+        none: 'M0 0 H64 V64 H0 Z',
+    },
+    80: {
+        none: 'M0 0 H80 V80 H0 Z',
+    },
+    128: {
+        none: 'M0 0 H128 V128 H0 Z',
+    },
+};
+const pathsMap = {
+    shape: shapePaths,
+    border: shapePaths,
+};
+
+export { pathsMap, shapePaths };

package/icon-view/modern/components/rectangle/component.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import React from 'react';
+import { ReactNode } from "react";
+import { BaseShapeProps } from "../base-shape/index";
+type RectangleProps = Omit<BaseShapeProps, 'pathsMap' | 'size' | 'topAddons' | 'bottomAddons' | 'indicator'> & {
+    /**
+     * Размер компонента
+     * @default 64
+     */
+    size?: 20 | 24 | 32 | 40 | 48 | 64 | 80 | 128;
+    /**
+     * Дочерний компонент
+     */
+    children?: ReactNode;
+};
+declare const Rectangle: React.ForwardRefExoticComponent<Omit<BaseShapeProps, "size" | "pathsMap" | "topAddons" | "bottomAddons" | "indicator"> & {
+    /**
+     * Размер компонента
+     * @default 64
+     */
+    size?: 64 | 32 | 128 | 20 | 24 | 40 | 48 | 80 | undefined;
+    /**
+     * Дочерний компонент
+     */
+    children?: ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export { RectangleProps, Rectangle };

package/icon-view/modern/components/rectangle/component.js

@@ -0,0 +1,20 @@
+import React, { forwardRef } from 'react';
+import { BaseShape } from '../base-shape/component.js';
+import { pathsMap } from './paths.js';
+import 'classnames';
+import '@alfalab/hooks';
+import '../base-shape/utils.js';
+
+const heights = {
+    20: 14,
+    24: 16,
+    32: 22,
+    40: 28,
+    48: 34,
+    64: 46,
+    80: 58,
+    128: 94,
+};
+const Rectangle = forwardRef(({ size = 64, ...props }, ref) => (React.createElement(BaseShape, { ...props, size: { width: size, height: heights[size] }, pathsMap: pathsMap, ref: ref })));
+
+export { Rectangle };

package/icon-view/modern/components/rectangle/index.d.ts

@@ -0,0 +1 @@
+export * from "./component";

package/icon-view/modern/components/rectangle/index.js

@@ -0,0 +1,7 @@
+export { Rectangle } from './component.js';
+import 'react';
+import '../base-shape/component.js';
+import 'classnames';
+import '@alfalab/hooks';
+import './paths.js';
+import '../base-shape/utils.js';