Инициализация компонента FilterButton

Author: dHIM24

.vscode/settings.json

@@ -50,6 +50,7 @@
         "packages/file-upload-item",
         "packages/file-upload-item-v1",
         "packages/filter-tag",
+        "packages/filter-button",
         "packages/form-control",
         "packages/gallery",
         "packages/gap",

packages/filter-button/CHANGELOG.md

@@ -0,0 +1 @@
+# @alfalab/core-components-filter-button

packages/filter-button/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@alfalab/core-components-filter-button",
+  "version": "7.0.0",
+  "description": "",
+  "keywords": [],
+  "license": "MIT",
+  "sideEffects": [
+      "**/*.css"
+  ],
+  "main": "index.js",
+  "module": "./esm/index.js",
+  "dependencies": {
+      "@alfalab/core-components-mq": "^5.0.1",
+      "@alfalab/hooks": "^1.13.1",
+      "@alfalab/icons-glyph": "^2.247.0",
+      "classnames": "^2.5.1",
+      "tslib": "^2.4.0"
+  },
+  "peerDependencies": {
+      "react": "^16.9.0 || ^17.0.1 || ^18.0.0",
+      "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
+  },
+  "publishConfig": {
+      "access": "public",
+      "directory": "dist"
+  },
+  "themesVersion": "14.1.2",
+  "varsVersion": "10.1.0"
+}

packages/filter-button/src/Component.responsive.tsx

@@ -0,0 +1,53 @@
+import React, { forwardRef } from 'react';
+
+import { useIsDesktop } from '@alfalab/core-components-mq';
+
+import { FilterButtonDesktop } from './desktop';
+import { FilterButtonMobile } from './mobile';
+import { type BaseFilterButtonProps } from './types';
+
+// todo: обратить внимание на codemode и разобраться зачем нужно 42-filter-button
+
+export type FilterButtonProps = BaseFilterButtonProps & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+
+    /**
+     * Версия, которая будет использоваться при серверном рендеринге
+     */
+    client?: 'desktop' | 'mobile';
+
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     * @deprecated Используйте client
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
+};
+
+export const FilterButton = forwardRef<HTMLDivElement, FilterButtonProps>(
+    (
+        {
+            children,
+            breakpoint,
+            client,
+            defaultMatchMediaValue = client === undefined ? undefined : client === 'desktop',
+            ...restProps
+        },
+        ref,
+    ) => {
+        const isDesktop = useIsDesktop(breakpoint, defaultMatchMediaValue);
+
+        const Component = isDesktop ? FilterButtonDesktop : FilterButtonMobile;
+
+        return (
+            <Component ref={ref} {...restProps}>
+                {children}
+            </Component>
+        );
+    },
+);
+
+FilterButton.displayName = 'FilterButton';

packages/filter-button/src/components/base-filter-button/Component.tsx

@@ -0,0 +1,11 @@
+import React, { forwardRef } from 'react';
+
+import { type BaseFilterButtonProps } from '../../types';
+
+export const BaseFilterButton = forwardRef<HTMLDivElement, BaseFilterButtonProps>(
+    ({ children, className, dataTestId, ...restProps }, ref) => (
+        <div ref={ref} className={className} data-test-id={dataTestId} {...restProps}>
+            {children}
+        </div>
+    ),
+);

packages/filter-button/src/components/base-filter-button/index.module.css

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

packages/filter-button/src/components/base-filter-button/index.ts

@@ -0,0 +1,8 @@
+import React, { forwardRef } from 'react';
+
+import { BaseFilterButton } from '../components/base-filter-button';
+import { type BaseFilterButtonProps } from '../types';
+
+export const FilterButtonDesktop = forwardRef<HTMLDivElement, BaseFilterButtonProps>(
+    (restProps, ref) => <BaseFilterButton {...restProps} ref={ref} />,
+);

packages/filter-button/src/desktop/Component.desktop.tsx

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

packages/filter-button/src/desktop/index.ts

@@ -0,0 +1,20 @@
+import { Meta, Markdown } from '@storybook/addon-docs';
+import { ComponentHeader, Tabs } from 'storybook/blocks';
+import * as Stories from './Component.stories.tsx';
+
+import Description from './description.mdx';
+import Development from './development.mdx';
+import Changelog from '../../CHANGELOG.md?raw';
+
+<Meta of={Stories} />
+
+<ComponentHeader
+    name='FilterButton'
+    children='Используется чтобы вывести параметры фильтрации и отобразить примененное значение.'
+/>
+
+<Tabs
+    description={<Description />}
+    development={<Development />}
+    changelog={<Markdown>{Changelog}</Markdown>}
+/>