list box

.vscode/settings.json

@@ -10,7 +10,8 @@
 		"consts",
 		"@reduxjs",
 		"testid",
-		"inited"
+		"inited",
+		"headlessui"
 	],
 	"cSpell.words": [
 		"Nothingg"

extractedTranslations/en/translation.json

@@ -105,6 +105,7 @@
   "search-filter": "search-filter",
   "seartch": "seartch",
   "select-currency": "",
+  "select-value": "",
   "send-new-comment": "send-new-comment",
   "sort-by": "sort-by",
   "sort-direction": "sort-direction",

package.json

@@ -95,6 +95,7 @@
     "webpack-dev-server": "^4.7.4"
   },
   "dependencies": {
+    "@headlessui/react": "^1.7.17",
     "@reduxjs/toolkit": "^1.9.5",
     "axios": "^1.4.0",
     "babel-plugin-i18next-extract": "^0.9.0",

public/locales/en/translation.json

@@ -14,5 +14,6 @@
   "desc-sort": "descending",
   "sort-field-creation-time": "creation time",
   "sort-filed-title": "title",
-  "sort-field-views": "views"
+  "sort-field-views": "views",
+  "select-value": "Choose a value"
 }

public/locales/ru/translation.json

@@ -14,5 +14,6 @@
   "desc-sort": "убыванию",
   "sort-field-creation-time": "дате создания",
   "sort-filed-title": "заголовку",
-  "sort-field-views": "просмотрам"
+  "sort-field-views": "просмотрам",
+  "select-value": "Выберите значение"
 }

src/app/App.tsx

@@ -1,6 +1,5 @@
 import { FC, Suspense, useEffect } from 'react';
 import { classNames } from 'shared/lib/classNames/classNames';
-import { HStack } from 'shared/ui/Stack';
 import { useAppDispatch } from 'shared/lib/hooks/useAppDispatch';
 import { Navbar } from 'widgets/Navbar';
 import { Aside } from 'widgets/Aside';
@@ -20,10 +19,10 @@ const App: FC = () => {
     <div className={classNames('App', {}, ['scroll'])}>
       <Suspense fallback="">
         <Navbar />
-        <HStack align="center" justify="flex-start">
+        <div className="content-page">
           <Aside />
           {_mounted && <AppRouter />}
-        </HStack>
+        </div>
       </Suspense>
     </div>
   );

src/app/styles/themes/blue.scss

@@ -16,4 +16,7 @@
 
 	// * Card bg
 	--card-bg: #101557;
+
+	// * ListBox bg
+	--list-box-bg: #101557;
 }

src/app/styles/themes/dark.scss

@@ -16,4 +16,7 @@
 
 	// * Card bg
 	--card-bg: #202074;
+
+	// * ListBox bg
+	--list-box-bg: #202074;
 }

src/app/styles/themes/light.scss

@@ -16,4 +16,7 @@
 
 	// * Card bg
 	--card-bg: #d3d3d3;
+
+	// * ListBox bg
+	--list-box-bg: #d3d3d3;
 }

src/features/ArticlesList/ui/ArticlesListFilters/ArticlesListFilters.module.scss

@@ -1,7 +1,5 @@
 .ArticlesListFilters {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
+  // padding: 12px;
 }
 
 .sort-filters {

src/features/ArticlesList/ui/ArticlesListFilters/ArticlesListFilters.tsx

@@ -20,6 +20,7 @@ import {
   getArticlesListView,
 } from '../../model/selectors/articlesList';
 import cls from './ArticlesListFilters.module.scss';
+import { VStack } from 'shared/ui/Stack';
 
 interface ArticlesListFiltersProps {
   className?: string;
@@ -77,7 +78,7 @@ export const ArticlesListFilters: FC<ArticlesListFiltersProps> = memo(({ classNa
   ], []);
 
   return (
-    <div className={classNames(cls.ArticlesListFilters, {}, [className])}>
+    <VStack gap={16} className={classNames('', {}, [className])}>
       <div className={cls['sort-filters']}>
         <ArticlesSortSelector
           order={order}
@@ -101,6 +102,6 @@ export const ArticlesListFilters: FC<ArticlesListFiltersProps> = memo(({ classNa
         onTabClick={onChangeTag}
         value={tag}
       />
-    </div>
+    </VStack>
   );
 });

src/pages/ArticlesPage/ui/ArticlesPage/ArticlesPage.tsx

@@ -11,7 +11,10 @@ import {
   getArticlesListView,
   initArticlesList,
   ArticlesList,
+  ArticlesListFilters,
 } from 'features/ArticlesList';
+import { VStack } from 'shared/ui/Stack';
+import { PageWrapper } from 'widgets/PageWrapper';
 
 interface ArticlesPageProps {
   className?: string;
@@ -23,6 +26,7 @@ const reducers: ReducersList = {
 
 const ArticlesPage: FC<ArticlesPageProps> = ({ className }) => {
   const dispatch = useAppDispatch();
+  const isVirtualized = false;
 
   const articles = useAppSelector(getArticlesList.selectAll);
   const isLoading = useAppSelector(getArticlesListIsLoading);
@@ -39,14 +43,32 @@ const ArticlesPage: FC<ArticlesPageProps> = ({ className }) => {
 
   return (
     <DynamicModuleWrapper reducers={reducers} removeAfterUnmount={false}>
-      <ArticlesList
-        className={className}
-        articles={articles}
-        isLoading={isLoading}
-        onNextArticlesPageLoad={onNextArticlesPageLoad}
-        isVirtualized
-        view={view}
-      />
+      {isVirtualized ? (
+        <ArticlesList
+          className={className}
+          articles={articles}
+          isLoading={isLoading}
+          onNextArticlesPageLoad={onNextArticlesPageLoad}
+          isVirtualized
+          view={view}
+        />
+      ) : (
+        <PageWrapper
+          onScrollEnd={onNextArticlesPageLoad}
+        >
+          <VStack>
+            <ArticlesListFilters />
+            <ArticlesList
+              className={className}
+              articles={articles}
+              isLoading={isLoading}
+              onNextArticlesPageLoad={onNextArticlesPageLoad}
+              isVirtualized={false}
+              view={view}
+            />
+          </VStack>
+        </PageWrapper>
+      )}
     </DynamicModuleWrapper>
   );
 };

src/shared/ui/ListBox/ListBox.module.scss

@@ -0,0 +1,37 @@
+.ListBox {
+  position: relative;
+}
+
+.trigger {
+  background: none;
+  margin: 0;
+  padding: 0;
+  outline: none;
+  border: none;
+}
+
+.options {
+  position: absolute;
+  background: var(--list-box-bg);
+  border-radius: 0 0 12px 12px;
+  z-index: 20;
+  width: 100%;
+  max-width: fit-content;
+
+  &:active {
+    outline: none; 
+  }
+}
+
+.option {
+  padding: 10px 20px;
+  cursor: pointer;
+}
+
+.active {
+  background: var(--inverted-primary-color);
+}
+
+.disabled {
+  opacity: .5;
+}

src/shared/ui/ListBox/ListBox.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ListBox } from './ListBox';
+
+const meta: Meta<typeof ListBox> = {
+  title: 'shared/ListBox',
+  component: ListBox,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof ListBox>;
+
+export const Root: Story = {
+  args: {
+    options: [
+      {
+        content: 'First option label',
+        value: 'First option value',
+      },
+      {
+        content: 'Second option label',
+        value: 'Second option value',
+      },
+      {
+        content: 'Third option label',
+        value: 'Third option value',
+      },
+    ],
+  },
+};
+
+export const WithDisabledOption: Story = {
+  args: {
+    options: [
+      {
+        content: 'First label',
+        value: 'First value',
+      },
+      {
+        content: 'Second label',
+        value: 'Second value',
+        disabled: true,
+      },
+      {
+        content: 'Third label',
+        value: 'Third value',
+      },
+    ],
+  },
+};