@astral/ui 4.0.0-alpha.40 → 4.0.0-alpha.41

package/components/RedesignBanner/RedesignBanner.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { type RedesignBannerProps } from './types';
+export declare const RedesignBanner: (props: RedesignBannerProps) => JSX.Element | null;

package/components/RedesignBanner/RedesignBanner.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { lazy, Suspense } from 'react';
+import { useLogic } from './useLogic';
+const RedesignBannerDialog = lazy(() => import('./RedesignBannerDialog'));
+export const RedesignBanner = (props) => {
+    const { isSkipShow } = useLogic();
+    if (isSkipShow) {
+        return null;
+    }
+    return (_jsx(Suspense, { children: _jsx(RedesignBannerDialog, Object.assign({}, props)) }));
+};

package/components/RedesignBanner/RedesignBannerDialog/RedesignBannerDialog.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { type RedesignBannerProps } from '../types';
+export declare const RedesignBannerDialog: ({ imgSrc }: RedesignBannerProps) => JSX.Element;

package/components/RedesignBanner/RedesignBannerDialog/RedesignBannerDialog.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button } from '../../Button';
+import { Dialog } from '../../Dialog';
+import { DialogActions } from '../../DialogActions';
+import { DialogContentText } from '../../DialogContentText';
+import { DEFAULT_IMG_SRC, LOCAL_STORAGE_KEY } from '../constants';
+import { Description, Picture, StyledDialogContent } from './styles';
+export const RedesignBannerDialog = ({ imgSrc }) => {
+    const [isOpen, setOpen] = useState(true);
+    const handleClose = () => {
+        localStorage.setItem(LOCAL_STORAGE_KEY, 'true');
+        setOpen(false);
+    };
+    return (_jsxs(Dialog, { title: "\u0412\u0441\u0442\u0440\u0435\u0447\u0430\u0439\u0442\u0435 \u043E\u0431\u043D\u043E\u0432\u043B\u0451\u043D\u043D\u044B\u0439 \u0438\u043D\u0442\u0435\u0440\u0444\u0435\u0439\u0441", open: isOpen, onClose: handleClose, children: [_jsxs(StyledDialogContent, { children: [_jsxs(Picture, { children: [_jsx("source", { srcSet: imgSrc || DEFAULT_IMG_SRC.webp, type: "image/webp" }), _jsx("img", { src: DEFAULT_IMG_SRC.png, alt: "\u042D\u043B\u0435\u043C\u0435\u043D\u0442\u044B \u043E\u0431\u043D\u043E\u0432\u043B\u0435\u043D\u043D\u043E\u0433\u043E \u0438\u043D\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430" })] }), _jsxs(Description, { children: [_jsx(DialogContentText, { children: "\u041C\u044B \u043E\u0431\u043D\u043E\u0432\u0438\u043B\u0438 \u0434\u0438\u0437\u0430\u0439\u043D, \u0443\u043B\u0443\u0447\u0448\u0438\u043B\u0438 \u0441\u0442\u0440\u0443\u043A\u0442\u0443\u0440\u0443 \u0438 \u0441\u0434\u0435\u043B\u0430\u043B\u0438 \u0438\u043D\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0431\u043E\u043B\u0435\u0435 \u0441\u043E\u0432\u0440\u0435\u043C\u0435\u043D\u043D\u044B\u043C \u0438 \u0443\u0434\u043E\u0431\u043D\u044B\u043C \u0434\u043B\u044F \u0435\u0436\u0435\u0434\u043D\u0435\u0432\u043D\u043E\u0439 \u0440\u0430\u0431\u043E\u0442\u044B." }), _jsx(DialogContentText, { children: "\u041F\u043E\u043F\u0440\u043E\u0431\u0443\u0439\u0442\u0435 \u043D\u043E\u0432\u0443\u044E \u0432\u0435\u0440\u0441\u0438\u044E \u0438 \u043F\u043E\u0434\u0435\u043B\u0438\u0442\u0435\u0441\u044C \u0441\u0432\u043E\u0438\u043C \u043C\u043D\u0435\u043D\u0438\u0435\u043C \u2014 \u044D\u0442\u043E \u043F\u043E\u043C\u043E\u0436\u0435\u0442 \u043D\u0430\u043C \u0441\u043E\u0432\u0435\u0440\u0448\u0435\u043D\u0441\u0442\u0432\u043E\u0432\u0430\u0442\u044C \u043F\u0440\u043E\u0434\u0443\u043A\u0442." })] })] }), _jsx(DialogActions, { children: _jsx(Button, { onClick: handleClose, children: "\u041E\u0442\u043B\u0438\u0447\u043D\u043E" }) })] }));
+};

package/components/RedesignBanner/RedesignBannerDialog/index.d.ts

@@ -0,0 +1,2 @@
+import { RedesignBannerDialog } from './RedesignBannerDialog';
+export default RedesignBannerDialog;

package/components/RedesignBanner/RedesignBannerDialog/index.js

@@ -0,0 +1,2 @@
+import { RedesignBannerDialog } from './RedesignBannerDialog';
+export default RedesignBannerDialog;

package/components/RedesignBanner/RedesignBannerDialog/styles.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare const StyledDialogContent: import("@emotion/styled").StyledComponent<import("../../DialogContent").DialogContentProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const Picture: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+export declare const Description: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/components/RedesignBanner/RedesignBannerDialog/styles.js

@@ -0,0 +1,28 @@
+import { DialogContent } from '../../DialogContent';
+import { styled } from '../../styles';
+export const StyledDialogContent = styled(DialogContent) `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(4)};
+  align-items: center;
+
+  max-width: 556px;
+`;
+export const Picture = styled.picture `
+  overflow: hidden;
+
+  border: 1px solid ${({ theme }) => theme.palette.grey[100]};
+  border-radius: ${({ theme }) => theme.shape.medium};
+  
+  > img {
+    display: block;
+
+    width: 100%;
+  }
+`;
+export const Description = styled.span `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(3)};
+  align-items: center;
+`;

package/components/RedesignBanner/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const LOCAL_STORAGE_KEY = "astralui-redesign-banner";
+export declare const DEFAULT_IMG_SRC: {
+    webp: string;
+    png: string;
+};

package/components/RedesignBanner/constants.js

@@ -0,0 +1,5 @@
+export const LOCAL_STORAGE_KEY = 'astralui-redesign-banner';
+export const DEFAULT_IMG_SRC = {
+    webp: 'https://frontend-static.astral.ru/images/UI-kit-v4.webp',
+    png: 'https://frontend-static.astral.ru/images/UI-kit-v4.png',
+};

package/components/RedesignBanner/index.d.ts

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

package/components/RedesignBanner/index.js

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

package/components/RedesignBanner/types.d.ts

@@ -0,0 +1,6 @@
+export type RedesignBannerProps = {
+    /**
+     * Кастомное изображение
+     */
+    imgSrc?: string;
+};

package/components/RedesignBanner/types.js

@@ -0,0 +1 @@
+export {};

package/components/RedesignBanner/useLogic/index.d.ts

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

package/components/RedesignBanner/useLogic/index.js

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

package/components/RedesignBanner/useLogic/useLogic.d.ts

@@ -0,0 +1,3 @@
+export declare const useLogic: () => {
+    isSkipShow: string | boolean | null;
+};

package/components/RedesignBanner/useLogic/useLogic.js

@@ -0,0 +1,14 @@
+import { useMemo } from 'react';
+import { useViewportType } from '../../hooks';
+import { LOCAL_STORAGE_KEY } from '../constants';
+export const useLogic = () => {
+    const { isMobile } = useViewportType();
+    const isSkipShow = useMemo(() => {
+        if (isMobile) {
+            // Не показываем баннер нa mobile разрешениях
+            return true;
+        }
+        return localStorage.getItem(LOCAL_STORAGE_KEY);
+    }, []);
+    return { isSkipShow };
+};

package/node/components/RedesignBanner/RedesignBanner.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { type RedesignBannerProps } from './types';
+export declare const RedesignBanner: (props: RedesignBannerProps) => JSX.Element | null;

package/node/components/RedesignBanner/RedesignBanner.js

@@ -0,0 +1,38 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RedesignBanner = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const useLogic_1 = require("./useLogic");
+const RedesignBannerDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./RedesignBannerDialog'))));
+const RedesignBanner = (props) => {
+    const { isSkipShow } = (0, useLogic_1.useLogic)();
+    if (isSkipShow) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(react_1.Suspense, { children: (0, jsx_runtime_1.jsx)(RedesignBannerDialog, Object.assign({}, props)) }));
+};
+exports.RedesignBanner = RedesignBanner;

package/node/components/RedesignBanner/RedesignBannerDialog/RedesignBannerDialog.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { type RedesignBannerProps } from '../types';
+export declare const RedesignBannerDialog: ({ imgSrc }: RedesignBannerProps) => JSX.Element;

package/node/components/RedesignBanner/RedesignBannerDialog/RedesignBannerDialog.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RedesignBannerDialog = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Button_1 = require("../../Button");
+const Dialog_1 = require("../../Dialog");
+const DialogActions_1 = require("../../DialogActions");
+const DialogContentText_1 = require("../../DialogContentText");
+const constants_1 = require("../constants");
+const styles_1 = require("./styles");
+const RedesignBannerDialog = ({ imgSrc }) => {
+    const [isOpen, setOpen] = (0, react_1.useState)(true);
+    const handleClose = () => {
+        localStorage.setItem(constants_1.LOCAL_STORAGE_KEY, 'true');
+        setOpen(false);
+    };
+    return ((0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { title: "\u0412\u0441\u0442\u0440\u0435\u0447\u0430\u0439\u0442\u0435 \u043E\u0431\u043D\u043E\u0432\u043B\u0451\u043D\u043D\u044B\u0439 \u0438\u043D\u0442\u0435\u0440\u0444\u0435\u0439\u0441", open: isOpen, onClose: handleClose, children: [(0, jsx_runtime_1.jsxs)(styles_1.StyledDialogContent, { children: [(0, jsx_runtime_1.jsxs)(styles_1.Picture, { children: [(0, jsx_runtime_1.jsx)("source", { srcSet: imgSrc || constants_1.DEFAULT_IMG_SRC.webp, type: "image/webp" }), (0, jsx_runtime_1.jsx)("img", { src: constants_1.DEFAULT_IMG_SRC.png, alt: "\u042D\u043B\u0435\u043C\u0435\u043D\u0442\u044B \u043E\u0431\u043D\u043E\u0432\u043B\u0435\u043D\u043D\u043E\u0433\u043E \u0438\u043D\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430" })] }), (0, jsx_runtime_1.jsxs)(styles_1.Description, { children: [(0, jsx_runtime_1.jsx)(DialogContentText_1.DialogContentText, { children: "\u041C\u044B \u043E\u0431\u043D\u043E\u0432\u0438\u043B\u0438 \u0434\u0438\u0437\u0430\u0439\u043D, \u0443\u043B\u0443\u0447\u0448\u0438\u043B\u0438 \u0441\u0442\u0440\u0443\u043A\u0442\u0443\u0440\u0443 \u0438 \u0441\u0434\u0435\u043B\u0430\u043B\u0438 \u0438\u043D\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0431\u043E\u043B\u0435\u0435 \u0441\u043E\u0432\u0440\u0435\u043C\u0435\u043D\u043D\u044B\u043C \u0438 \u0443\u0434\u043E\u0431\u043D\u044B\u043C \u0434\u043B\u044F \u0435\u0436\u0435\u0434\u043D\u0435\u0432\u043D\u043E\u0439 \u0440\u0430\u0431\u043E\u0442\u044B." }), (0, jsx_runtime_1.jsx)(DialogContentText_1.DialogContentText, { children: "\u041F\u043E\u043F\u0440\u043E\u0431\u0443\u0439\u0442\u0435 \u043D\u043E\u0432\u0443\u044E \u0432\u0435\u0440\u0441\u0438\u044E \u0438 \u043F\u043E\u0434\u0435\u043B\u0438\u0442\u0435\u0441\u044C \u0441\u0432\u043E\u0438\u043C \u043C\u043D\u0435\u043D\u0438\u0435\u043C \u2014 \u044D\u0442\u043E \u043F\u043E\u043C\u043E\u0436\u0435\u0442 \u043D\u0430\u043C \u0441\u043E\u0432\u0435\u0440\u0448\u0435\u043D\u0441\u0442\u0432\u043E\u0432\u0430\u0442\u044C \u043F\u0440\u043E\u0434\u0443\u043A\u0442." })] })] }), (0, jsx_runtime_1.jsx)(DialogActions_1.DialogActions, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: handleClose, children: "\u041E\u0442\u043B\u0438\u0447\u043D\u043E" }) })] }));
+};
+exports.RedesignBannerDialog = RedesignBannerDialog;

package/node/components/RedesignBanner/RedesignBannerDialog/index.d.ts

@@ -0,0 +1,2 @@
+import { RedesignBannerDialog } from './RedesignBannerDialog';
+export default RedesignBannerDialog;

package/node/components/RedesignBanner/RedesignBannerDialog/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const RedesignBannerDialog_1 = require("./RedesignBannerDialog");
+exports.default = RedesignBannerDialog_1.RedesignBannerDialog;

package/node/components/RedesignBanner/RedesignBannerDialog/styles.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare const StyledDialogContent: import("@emotion/styled").StyledComponent<import("../../DialogContent").DialogContentProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const Picture: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+export declare const Description: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/node/components/RedesignBanner/RedesignBannerDialog/styles.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Description = exports.Picture = exports.StyledDialogContent = void 0;
+const DialogContent_1 = require("../../DialogContent");
+const styles_1 = require("../../styles");
+exports.StyledDialogContent = (0, styles_1.styled)(DialogContent_1.DialogContent) `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(4)};
+  align-items: center;
+
+  max-width: 556px;
+`;
+exports.Picture = styles_1.styled.picture `
+  overflow: hidden;
+
+  border: 1px solid ${({ theme }) => theme.palette.grey[100]};
+  border-radius: ${({ theme }) => theme.shape.medium};
+  
+  > img {
+    display: block;
+
+    width: 100%;
+  }
+`;
+exports.Description = styles_1.styled.span `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(3)};
+  align-items: center;
+`;

package/node/components/RedesignBanner/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const LOCAL_STORAGE_KEY = "astralui-redesign-banner";
+export declare const DEFAULT_IMG_SRC: {
+    webp: string;
+    png: string;
+};

package/node/components/RedesignBanner/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_IMG_SRC = exports.LOCAL_STORAGE_KEY = void 0;
+exports.LOCAL_STORAGE_KEY = 'astralui-redesign-banner';
+exports.DEFAULT_IMG_SRC = {
+    webp: 'https://frontend-static.astral.ru/images/UI-kit-v4.webp',
+    png: 'https://frontend-static.astral.ru/images/UI-kit-v4.png',
+};

package/node/components/RedesignBanner/index.d.ts

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

package/node/components/RedesignBanner/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./RedesignBanner"), exports);

package/node/components/RedesignBanner/types.d.ts

@@ -0,0 +1,6 @@
+export type RedesignBannerProps = {
+    /**
+     * Кастомное изображение
+     */
+    imgSrc?: string;
+};

package/node/components/RedesignBanner/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/node/components/RedesignBanner/useLogic/index.d.ts

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

package/node/components/RedesignBanner/useLogic/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useLogic"), exports);

package/node/components/RedesignBanner/useLogic/useLogic.d.ts

@@ -0,0 +1,3 @@
+export declare const useLogic: () => {
+    isSkipShow: string | boolean | null;
+};

package/node/components/RedesignBanner/useLogic/useLogic.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const react_1 = require("react");
+const hooks_1 = require("../../hooks");
+const constants_1 = require("../constants");
+const useLogic = () => {
+    const { isMobile } = (0, hooks_1.useViewportType)();
+    const isSkipShow = (0, react_1.useMemo)(() => {
+        if (isMobile) {
+            // Не показываем баннер нa mobile разрешениях
+            return true;
+        }
+        return localStorage.getItem(constants_1.LOCAL_STORAGE_KEY);
+    }, []);
+    return { isSkipShow };
+};
+exports.useLogic = useLogic;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.0.0-alpha.40",
+  "version": "4.0.0-alpha.41",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {
@@ -108,6 +108,13 @@
       "types": "./components/InfiniteTreeList/index.d.ts",
       "default": "./components/InfiniteTreeList/index.js",
       "import": "./components/InfiniteTreeList/index.js"
+    },
+    "./components/RedesignBanner": {
+      "module": "./components/RedesignBanner/index.js",
+      "require": "./node/components/RedesignBanner/index.js",
+      "types": "./components/RedesignBanner/index.d.ts",
+      "default": "./components/RedesignBanner/index.js",
+      "import": "./components/RedesignBanner/index.js"
     }
   },
   "author": "Astral.Soft",