+ {children}
+
+ );
+});
diff --git a/src/shared/ui/redesigned/Card/index.ts b/src/shared/ui/redesigned/Card/index.ts
new file mode 100644
index 0000000..ca0b060
--- /dev/null
+++ b/src/shared/ui/redesigned/Card/index.ts
@@ -0,0 +1 @@
+export * from './Card';
diff --git a/src/shared/ui/deprecated/Overlay/Overlay.module.scss b/src/shared/ui/redesigned/Overlay/Overlay.module.scss
similarity index 100%
rename from src/shared/ui/deprecated/Overlay/Overlay.module.scss
rename to src/shared/ui/redesigned/Overlay/Overlay.module.scss
diff --git a/src/shared/ui/deprecated/Overlay/Overlay.tsx b/src/shared/ui/redesigned/Overlay/Overlay.tsx
similarity index 76%
rename from src/shared/ui/deprecated/Overlay/Overlay.tsx
rename to src/shared/ui/redesigned/Overlay/Overlay.tsx
index b3bae47..df5be9a 100644
--- a/src/shared/ui/deprecated/Overlay/Overlay.tsx
+++ b/src/shared/ui/redesigned/Overlay/Overlay.tsx
@@ -9,10 +9,7 @@ interface OverlayProps {
export const Overlay = memo((props: OverlayProps) => {
const { className, onClick } = props;
- /**
- * Устарел, используем новые компоненты из папки redesigned
- * @deprecated
- */
+
return (
= {
+ 'bottom left': cls.optionsBottomLeft,
+ 'bottom right': cls.optionsBottomRight,
+ 'top right': cls.optionsTopRight,
+ 'top left': cls.optionsTopLeft,
+};
diff --git a/src/shared/ui/redesigned/Popups/styles/popup.module.scss b/src/shared/ui/redesigned/Popups/styles/popup.module.scss
new file mode 100644
index 0000000..bf76f25
--- /dev/null
+++ b/src/shared/ui/redesigned/Popups/styles/popup.module.scss
@@ -0,0 +1,46 @@
+.popup {
+ position: relative;
+}
+
+.menu {
+ border-radius: 18px;
+ border: 1px solid var(--accent-redesigned);
+ overflow: hidden;
+}
+
+.trigger {
+ background: none;
+ outline: none;
+ margin: 0;
+ padding: 0;
+ border: none;
+ cursor: pointer;
+}
+
+.active {
+ background: var(--light-bg-redesigned);
+}
+
+.optionsBottomLeft {
+ top: 100%;
+ right: 0;
+}
+
+.optionsBottomRight {
+ top: 100%;
+ left: 0;
+}
+
+.optionsTopRight {
+ bottom: 100%;
+ left: 0;
+}
+
+.optionsTopLeft {
+ right: 0;
+ bottom: 100%;
+}
+
+.disabled {
+ opacity: 0.7;
+}
diff --git a/src/shared/ui/redesigned/Popups/ui/Dropdown/Dropdown.module.scss b/src/shared/ui/redesigned/Popups/ui/Dropdown/Dropdown.module.scss
new file mode 100644
index 0000000..b77f9e5
--- /dev/null
+++ b/src/shared/ui/redesigned/Popups/ui/Dropdown/Dropdown.module.scss
@@ -0,0 +1,17 @@
+.menu {
+ background: var(--dark-bg-redesigned);
+ position: absolute;
+ z-index: 10000;
+ flex-direction: column;
+ display: flex;
+}
+
+.item {
+ padding: 10px 25px;
+ width: 100%;
+ border: none;
+ background: none;
+ outline: none;
+ color: var(--text-redesigned);
+ cursor: pointer;
+}
diff --git a/src/shared/ui/redesigned/Popups/ui/Dropdown/Dropdown.stories.tsx b/src/shared/ui/redesigned/Popups/ui/Dropdown/Dropdown.stories.tsx
new file mode 100644
index 0000000..4c8f2ac
--- /dev/null
+++ b/src/shared/ui/redesigned/Popups/ui/Dropdown/Dropdown.stories.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Button } from '../../../Button/Button';
+import { Dropdown } from './Dropdown';
+
+export default {
+ title: 'shared/Dropdown',
+ component: Dropdown,
+ argTypes: {
+ backgroundColor: { control: 'color' },
+ },
+} as ComponentMeta;
+
+const Template: ComponentStory = (args) => (
+ ;
+
+const Template: ComponentStory = (args) => (
+ (value: T) => void;
+ readonly?: boolean;
+ direction?: DropDownDirection;
+ label?: string;
+}
+
+export const ListBox = memo((props: ListBoxProps) => {
+ const {
+ className,
+ items,
+ value,
+ onChange,
+ defaultValue,
+ readonly,
+ direction = 'bottom right',
+ label,
+ } = props;
+
+ const optionsClasses = [mapDirectionClass[direction], popupCls.menu];
+
+ return (
+
+ {label && {`${label}>`}}
+
+
+
+
+
+ {items.map((item) => (
+
+ {({ active, selected }) => (
+
+ {item.content}
+
+ )}
+
+ ))}
+
+
+
+ );
+});
diff --git a/src/shared/ui/redesigned/Popups/ui/Popover/Popover.module.scss b/src/shared/ui/redesigned/Popups/ui/Popover/Popover.module.scss
new file mode 100644
index 0000000..b34aabd
--- /dev/null
+++ b/src/shared/ui/redesigned/Popups/ui/Popover/Popover.module.scss
@@ -0,0 +1,7 @@
+.panel {
+ background: var(--dark-bg-redesigned);
+ position: absolute;
+ z-index: 10000;
+ border-radius: 8px;
+ padding: 15px;
+}
diff --git a/src/shared/ui/redesigned/Popups/ui/Popover/Popover.stories.tsx b/src/shared/ui/redesigned/Popups/ui/Popover/Popover.stories.tsx
new file mode 100644
index 0000000..e3c2a79
--- /dev/null
+++ b/src/shared/ui/redesigned/Popups/ui/Popover/Popover.stories.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Popover } from './Popover';
+
+export default {
+ title: 'shared/Popover',
+ component: Popover,
+ argTypes: {
+ backgroundColor: { control: 'color' },
+ },
+} as ComponentMeta;
+
+const Template: ComponentStory = (args) => (
+
+
+ {trigger}
+
+
+
+ {children}
+
+
+ );
+});
diff --git a/src/shared/ui/deprecated/Portal/Portal.tsx b/src/shared/ui/redesigned/Portal/Portal.tsx
similarity index 69%
rename from src/shared/ui/deprecated/Portal/Portal.tsx
rename to src/shared/ui/redesigned/Portal/Portal.tsx
index 59eb6ea..880506c 100644
--- a/src/shared/ui/deprecated/Portal/Portal.tsx
+++ b/src/shared/ui/redesigned/Portal/Portal.tsx
@@ -8,9 +8,6 @@ interface PortalProps {
export const Portal = (props: PortalProps) => {
const { children, element = document.body } = props;
- /**
- * Устарел, используем новые компоненты из папки redesigned
- * @deprecated
- */
+
return createPortal(children, element);
};
diff --git a/src/shared/ui/deprecated/Portal/index.ts b/src/shared/ui/redesigned/Portal/index.ts
similarity index 100%
rename from src/shared/ui/deprecated/Portal/index.ts
rename to src/shared/ui/redesigned/Portal/index.ts
diff --git a/src/shared/ui/redesigned/Skeleton/Skeleton.module.scss b/src/shared/ui/redesigned/Skeleton/Skeleton.module.scss
new file mode 100644
index 0000000..41d6076
--- /dev/null
+++ b/src/shared/ui/redesigned/Skeleton/Skeleton.module.scss
@@ -0,0 +1,29 @@
+.Skeleton {
+ width: 100%;
+ height: 50px;
+ position: relative;
+ box-shadow: 0 2px 10px 0 var(--skeleton-shadow);
+ overflow: hidden;
+
+ &::before {
+ content: "";
+ display: block;
+ position: absolute;
+ left: -150px;
+ top: 0;
+ height: 100%;
+ width: 80%;
+ background: linear-gradient(to right, transparent 0%, var(--skeleton-color) 50%, transparent 100%);
+ animation: load 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+ }
+}
+
+@keyframes load {
+ from {
+ left: -150px;
+ }
+
+ to {
+ left: 100%;
+ }
+}
diff --git a/src/shared/ui/redesigned/Skeleton/Skeleton.stories.tsx b/src/shared/ui/redesigned/Skeleton/Skeleton.stories.tsx
new file mode 100644
index 0000000..df29654
--- /dev/null
+++ b/src/shared/ui/redesigned/Skeleton/Skeleton.stories.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import { ThemeDecorator } from '@/shared/config/storybook/ThemeDecorator/ThemeDecorator';
+import { Skeleton } from './Skeleton';
+import { Theme } from '@/shared/const/theme';
+
+export default {
+ title: 'shared/Skeleton',
+ component: Skeleton,
+ argTypes: {
+ backgroundColor: { control: 'color' },
+ },
+} as ComponentMeta;
+
+const Template: ComponentStory = (args) => (
+
{story()}
],
+} as ComponentMetaPopover content
,
+};
diff --git a/src/shared/ui/redesigned/Popups/ui/Popover/Popover.tsx b/src/shared/ui/redesigned/Popups/ui/Popover/Popover.tsx
new file mode 100644
index 0000000..d560e3d
--- /dev/null
+++ b/src/shared/ui/redesigned/Popups/ui/Popover/Popover.tsx
@@ -0,0 +1,34 @@
+import { memo, ReactNode } from 'react';
+import { Popover as HPopover } from '@headlessui/react';
+import { DropDownDirection } from '@/shared/types/ui';
+import { classNames } from '@/shared/lib/classNames/classNames';
+import { mapDirectionClass } from '../../styles/consts';
+import popupCls from '../../styles/popup.module.scss';
+import cls from './Popover.module.scss';
+
+interface PopoverProps {
+ className?: string;
+ direction?: DropDownDirection;
+ trigger: ReactNode;
+ children: ReactNode;
+}
+
+export const Popover = memo((props: PopoverProps) => {
+ const { className, trigger, direction = 'bottom right', children } = props;
+
+ const menuClasses = [mapDirectionClass[direction], popupCls.menu];
+
+ return (
+
{children}
diff --git a/src/shared/ui/deprecated/Stack/HStack/HStack.tsx b/src/shared/ui/redesigned/Stack/HStack/HStack.tsx
similarity index 64%
rename from src/shared/ui/deprecated/Stack/HStack/HStack.tsx
rename to src/shared/ui/redesigned/Stack/HStack/HStack.tsx
index 81e227f..e88045a 100644
--- a/src/shared/ui/deprecated/Stack/HStack/HStack.tsx
+++ b/src/shared/ui/redesigned/Stack/HStack/HStack.tsx
@@ -2,10 +2,7 @@ import { memo } from 'react';
import { Flex, FlexProps } from '../Flex/Flex';
type HStackProps = Omit;
-/**
- * Устарел, используем новые компоненты из папки redesigned
- * @deprecated
- */
+
export const HStack = memo((props: HStackProps) => (
;
-/**
- * Устарел, используем новые компоненты из папки redesigned
- * @deprecated
- */
+
export const VStack = memo((props: VStackProps) => {
const { align = 'start' } = props;
return ;
+
+const Template: ComponentStory = (args) => = {
+ s: 'size_s',
+ m: 'size_m',
+ l: 'size_l',
+};
+
+const mapSizeToHeaderTag: Record = {
+ s: 'h3',
+ m: 'h2',
+ l: 'h1',
+};
+
+export const Text = memo((props: TextProps) => {
+ const {
+ className,
+ text,
+ title,
+ variant = 'primary',
+ align = 'left',
+ size = 'm',
+ 'data-testid': dataTestId = 'Text',
+ } = props;
+
+ const HeaderTag = mapSizeToHeaderTag[size];
+ const sizeClass = mapSizeToClass[size];
+
+ const additionalClasses = [className, cls[variant], cls[align], sizeClass];
+
+ return (
+
+ {title && (
+
+ {title}
+
+ )}
+ {text && (
+
+ );
+});
diff --git a/src/shared/ui/redesigned/Text/index.ts b/src/shared/ui/redesigned/Text/index.ts
new file mode 100644
index 0000000..b0c76af
--- /dev/null
+++ b/src/shared/ui/redesigned/Text/index.ts
@@ -0,0 +1 @@
+export * from './Text';
diff --git a/src/widgets/Navbar/ui/Navbar.tsx b/src/widgets/Navbar/ui/Navbar.tsx
index b071edf..bf2da6c 100644
--- a/src/widgets/Navbar/ui/Navbar.tsx
+++ b/src/widgets/Navbar/ui/Navbar.tsx
@@ -1,10 +1,10 @@
import React, { memo, useCallback, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useSelector } from 'react-redux';
+import { HStack } from '@/shared/ui/redesigned/Stack';
import { Button, ButtonTheme } from '@/shared/ui/deprecated/Button';
import { AppLink, AppLinkTheme } from '@/shared/ui/deprecated/AppLink';
import { Text, TextTheme } from '@/shared/ui/deprecated/Text';
-import { HStack } from '@/shared/ui/deprecated/Stack';
import { classNames } from '@/shared/lib/classNames/classNames';
import { LoginModal } from '@/features/AuthByUsername';
import { NotificationButton } from '@/features/notificationButton';
diff --git a/src/widgets/Sidebar/ui/Sidebar/Sidebar.tsx b/src/widgets/Sidebar/ui/Sidebar/Sidebar.tsx
index c588100..03b50b5 100644
--- a/src/widgets/Sidebar/ui/Sidebar/Sidebar.tsx
+++ b/src/widgets/Sidebar/ui/Sidebar/Sidebar.tsx
@@ -1,7 +1,7 @@
import { memo, useMemo, useState } from 'react';
import { useSelector } from 'react-redux';
+import { VStack } from '@/shared/ui/redesigned/Stack';
import { Button, ButtonSize, ButtonTheme } from '@/shared/ui/deprecated/Button';
-import { VStack } from '@/shared/ui/deprecated/Stack';
import { classNames } from '@/shared/lib/classNames/classNames';
import { getSidebarItems } from '../../model/selectors/getSidebarItems';
import { SidebarItem } from '../SidebarItem/SidebarItem';
+ {text} +
+ )} +