@redneckz/wildless-cms-uni-blocks 0.14.294 → 0.14.296

package/src/components/GrantSupport/GrantSupport.fixture.mobile.tsx

@@ -0,0 +1,28 @@
+import { PopupManager } from '../../ui-kit/PopupManager/PopupManager';
+import { GrantSupport } from './GrantSupport';
+const regionSource = {
+  $ref: '/wcms-resources/regions-grant-support.json',
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <GrantSupport
+        className="col-span-12"
+        regionSource={regionSource}
+        button={{
+          text: 'Перейти',
+        }}
+        data={[
+          {
+            aspectName: 'mindboxEvent',
+            params: {
+              test: 'test-mindbox',
+            },
+          },
+        ]}
+      />
+      <PopupManager />
+    </div>
+  ),
+};

package/src/components/GrantSupport/GrantSupport.fixture.tsx

@@ -0,0 +1,28 @@
+import { PopupManager } from '../../ui-kit/PopupManager/PopupManager';
+import { GrantSupport } from './GrantSupport';
+const regionSource = {
+  $ref: '/wcms-resources/regions-grant-support.json',
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <GrantSupport
+        className="col-span-12"
+        regionSource={regionSource}
+        button={{
+          text: 'Перейти',
+        }}
+        data={[
+          {
+            aspectName: 'mindboxEvent',
+            params: {
+              test: 'test-mindbox',
+            },
+          },
+        ]}
+      />
+      <PopupManager />
+    </div>
+  ),
+};

package/src/components/GrantSupport/GrantSupport.tsx

@@ -0,0 +1,56 @@
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { getRegularButtonClasses } from '../../ui-kit/LinkButton/getRegularButtonClasses';
+import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
+import { SelectControl } from '../../ui-kit/Select/SelectControl';
+import { UniBlock } from '../../UniBlock/UniBlock';
+import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
+import { style } from '../../utils/style';
+import { type GrantSupportContent } from './GrantSupportContent';
+
+interface GrantSupportProps extends GrantSupportContent, UniBlockProps {}
+
+export const GrantSupport = UniBlock<GrantSupportProps>(
+  ({ className, title, button, regionSource, data, ...rest }) => {
+    const [region, setRegion] = useState({ key: '' });
+    const regions = regionSource?.regions ?? [];
+
+    const buttonStyle = getRegularButtonClasses({
+      className: 'text-white',
+      version: button?.version || 'primary',
+    });
+    const regionHref = regions?.find((_) => _.name === region.key)?.href;
+    const buttonText = button?.text ? button.text : 'Перейти';
+
+    return (
+      <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
+        <div className="container max-w-[978px] space-y-m">
+          {title ? <Heading headingType="h3" title={title} className="@xl:text-center" /> : null}
+          {regions ? (
+            <SelectControl
+              label="Ваш регион"
+              placeholder="Выберите регион"
+              isSearch={true}
+              options={regions.map(({ name = '' }) => ({ key: name, text: name }))}
+              value={region}
+              onChange={setRegion}
+            />
+          ) : null}
+          {regionHref ? (
+            <div className="text-center">
+              <LinkButton
+                href={regionHref}
+                target="_blank"
+                className={style('p-m w-full @xl:w-auto', buttonStyle)}
+                data={data}
+              >
+                {buttonText}
+              </LinkButton>
+            </div>
+          ) : null}
+        </div>
+      </BlockWrapper>
+    );
+  },
+);

package/src/components/GrantSupport/GrantSupportContent.ts

@@ -0,0 +1,19 @@
+import { type JSONRefObject } from '../../data/JSONRefObject';
+import { type AspectsProps } from '../../model/AspectsProps';
+import { type TitleProps } from '../../model/HeadlineType';
+import { type SubmitButtonProps } from '../ApplicationForm/ApplicationFormContent';
+
+type RegionGrand = {
+  /** @hidden */
+  regions?: { name: string; href: string }[];
+};
+
+/**
+ * @title Грантовая поддержка
+ */
+export type GrantSupportContent = TitleProps &
+  AspectsProps & {
+    button?: SubmitButtonProps;
+    /** @title Список регионов */
+    regionSource?: RegionGrand & JSONRefObject;
+  };

package/src/components/Tabs/Tabs.fixture.mobile.tsx

@@ -36,20 +36,4 @@ export default {
       />
     </div>
   ),
-  centered: (
-    <div className="container grid grid-cols-12">
-      <Tabs
-        className="col-span-12"
-        tabs={[
-          { type: 'group', ref: 'tab1', title: '2021' },
-          { type: 'group', ref: 'tab2', title: '2020' },
-          { type: 'link', href: 'https://google.com', text: '2019' },
-          { type: 'link', href: 'https://yandex.com', text: '2018' },
-          { type: 'link', href: 'https://ya.com', text: '2017' },
-          { type: 'link', href: 'https://habr.com', text: '2016' },
-        ]}
-        tabsMode="centered"
-      />
-    </div>
-  ),
 };

package/src/components/Tabs/Tabs.fixture.tsx

@@ -36,23 +36,4 @@ export default {
       />
     </div>
   ),
-  centered: (
-    <div className="container grid grid-cols-12">
-      <Tabs
-        className="col-span-12"
-        tabs={[
-          { type: 'group', ref: 'tab1', title: '2021' },
-          { type: 'group', ref: 'tab2', title: '2020' },
-          { type: 'link', href: 'https://google.com', text: '2019' },
-          { type: 'link', href: 'https://yandex.com', text: '2018' },
-          { type: 'link', href: 'https://ya.com', text: '2017' },
-          { type: 'link', href: 'https://habr.com', text: '2016' },
-          { type: 'link', href: 'https://kremlin.com', text: '2015' },
-          { type: 'link', href: 'https://gov.com', text: '2014' },
-          { type: 'group', ref: 'tab3', title: '2013' },
-        ]}
-        tabsMode="centered"
-      />
-    </div>
-  ),
 };

package/src/components/Tabs/TabsContent.ts

@@ -37,7 +37,7 @@ export type TabData = GroupTabData | LinkTabData;
  *   "По центру"
  * ]
  */
-export type TabsMode = 'wideScreen' | 'scrollable' | 'centered';
+export type TabsMode = 'wideScreen' | 'scrollable';
 
 /**
  * @title Вкладки

package/src/components/Tabs/renderTabs.tsx

@@ -15,16 +15,6 @@ export const renderTabs = ({ tabsMode, ...props }: RenderTabsProps) => {
   switch (tabsMode) {
     case 'wideScreen':
       return <TabsControl {...props} />;
-    case 'centered':
-      return (
-        <div className="flex">
-          <TabsControl
-            className="m-auto p-xs rounded-md bg-main-gray"
-            tabsType="rounded"
-            {...props}
-          />
-        </div>
-      );
     case 'scrollable':
       return (
         <div className="flex">

package/src/components/TabsLayout/TabsLayout.example.json

@@ -3,8 +3,9 @@
     "version": "primary",
     "padding": "",
     "tabs": [
-      { "title": "Первый таб", "description": "Описание первого таба" },
-      { "title": "Второй таб", "description": "Описание второго таба" }
-    ]
+      { "text": "Первый таб", "description": "", "type": "group" },
+      { "text": "Второй таб", "description": "", "type": "group" }
+    ],
+    "tabsType": "animated"
   }
 }

package/src/components/TabsLayout/TabsLayout.fixture.mobile.tsx

@@ -2,49 +2,70 @@ import { type BlockRendererOptions } from '../../BlockRenderer/BlockRendererOpti
 import '../../setup-fixture';
 import { Blocks } from '../Blocks';
 import { TabsLayout } from './TabsLayout';
-import example from './TabsLayout.example.json';
+import { type Tab } from './TabsLayoutContent';
 
 const options: BlockRendererOptions = {
   blocksRegistry: Blocks,
 };
 
+const TABS: Tab[] = [
+  { text: 'Первый таб', description: 'Описание первого таба', type: 'group' },
+  { text: 'Второй таб', description: 'Описание второго таба', type: 'group' },
+];
+
+const TEXT_BLOCK_DESCRIPTION = {
+  type: 'TextBlock',
+  content: {
+    title: 'Текстовый блок',
+    description: 'Описание',
+  },
+  style: ['col-span-12'],
+};
+
 export default {
   default: (
     <div className="container grid grid-cols-12">
       <TabsLayout
         className="col-span-12"
-        tabs={example.content.tabs}
+        tabs={TABS}
+        options={options}
+        tabsType="animated"
+        block={{
+          slots: {
+            'Первый таб': [TEXT_BLOCK_DESCRIPTION],
+            'Второй таб': [TEXT_BLOCK_DESCRIPTION],
+          },
+        }}
+      />
+    </div>
+  ),
+  wide: (
+    <div className="container grid grid-cols-12">
+      <TabsLayout
+        className="col-span-12"
+        tabs={TABS}
+        options={options}
+        tabsType="default"
+        block={{
+          slots: {
+            'Первый таб': [TEXT_BLOCK_DESCRIPTION, TEXT_BLOCK_DESCRIPTION],
+            'Второй таб': [TEXT_BLOCK_DESCRIPTION],
+          },
+        }}
+      />
+    </div>
+  ),
+  scrollable: (
+    <div className="container grid grid-cols-12">
+      <TabsLayout
+        className="col-span-12"
+        tabs={TABS}
         options={options}
+        tabsType="underlined"
         block={{
           slots: {
-            'Первый таб': [
-              {
-                type: 'TextBlock',
-                content: {
-                  title: 'Текстовый блок',
-                  description: 'Описание',
-                },
-                style: ['col-span-12'],
-              },
-              {
-                type: 'TextBlock',
-                content: {
-                  title: 'Текстовый блок',
-                  description: 'Описание',
-                },
-                style: ['col-span-12'],
-              },
-            ],
-            'Второй таб': [
-              {
-                type: 'TextBlock',
-                content: {
-                  title: 'Текстовый блок',
-                  description: 'Описание',
-                },
-                style: ['col-span-12'],
-              },
-            ],
+            'Первый таб': [TEXT_BLOCK_DESCRIPTION, TEXT_BLOCK_DESCRIPTION],
+            'Второй таб': [TEXT_BLOCK_DESCRIPTION],
           },
         }}
       />

package/src/components/TabsLayout/TabsLayout.fixture.tsx

@@ -2,49 +2,80 @@ import { type BlockRendererOptions } from '../../BlockRenderer/BlockRendererOpti
 import '../../setup-fixture';
 import { Blocks } from '../Blocks';
 import { TabsLayout } from './TabsLayout';
-import example from './TabsLayout.example.json';
+import { type Tab } from './TabsLayoutContent';
 
 const options: BlockRendererOptions = {
   blocksRegistry: Blocks,
 };
 
+const TABS: Tab[] = [
+  {
+    type: 'group',
+    description: 'Описание первого таб группа',
+    text: 'Первый таб',
+    selected: false,
+  },
+  {
+    type: 'group',
+    description: 'Описание первого таб группа',
+    text: 'Второй таб',
+    selected: false,
+  },
+];
+
+const TEXT_BLOCK_DESCRIPTION = {
+  type: 'TextBlock',
+  content: {
+    title: 'Текстовый блок',
+    description: 'Описание',
+  },
+  style: ['col-span-12'],
+};
+
 export default {
   default: (
     <div className="container grid grid-cols-12">
       <TabsLayout
         className="col-span-12"
-        tabs={example.content.tabs}
+        tabs={TABS}
+        tabsType="animated"
+        options={options}
+        block={{
+          slots: {
+            'Первый таб': [TEXT_BLOCK_DESCRIPTION, TEXT_BLOCK_DESCRIPTION],
+            'Второй таб': [TEXT_BLOCK_DESCRIPTION],
+          },
+        }}
+      />
+    </div>
+  ),
+  wide: (
+    <div className="container grid grid-cols-12">
+      <TabsLayout
+        className="col-span-12"
+        tabs={TABS}
+        tabsType="default"
+        options={options}
+        block={{
+          slots: {
+            'Первый таб': [TEXT_BLOCK_DESCRIPTION, TEXT_BLOCK_DESCRIPTION],
+            'Второй таб': [TEXT_BLOCK_DESCRIPTION],
+          },
+        }}
+      />
+    </div>
+  ),
+  scrollable: (
+    <div className="container grid grid-cols-12">
+      <TabsLayout
+        className="col-span-12"
+        tabs={TABS}
+        tabsType="underlined"
         options={options}
         block={{
           slots: {
-            'Первый таб': [
-              {
-                type: 'TextBlock',
-                content: {
-                  title: 'Текстовый блок',
-                  description: 'Описание',
-                },
-                style: ['col-span-12'],
-              },
-              {
-                type: 'TextBlock',
-                content: {
-                  title: 'Текстовый блок',
-                  description: 'Описание',
-                },
-                style: ['col-span-12'],
-              },
-            ],
-            'Второй таб': [
-              {
-                type: 'TextBlock',
-                content: {
-                  title: 'Текстовый блок',
-                  description: 'Описание',
-                },
-                style: ['col-span-12'],
-              },
-            ],
+            'Первый таб': [TEXT_BLOCK_DESCRIPTION, TEXT_BLOCK_DESCRIPTION],
+            'Второй таб': [TEXT_BLOCK_DESCRIPTION],
           },
         }}
       />

package/src/components/TabsLayout/TabsLayout.tsx

@@ -1,66 +1,78 @@
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { renderBlocksList } from '../../BlockRenderer/renderBlockList';
-import { useCarouselControls } from '../../hooks/useCarouselControls';
-import { type Align } from '../../model/Align';
+import { useRouter } from '../../hooks/useRouter';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { SwipeListContainer } from '../../ui-kit/SwipeListControl/SwipeListContainer';
-import { useSwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
+import { type TabItemBase } from '../../ui-kit/TabsControl/TabItem';
 import { UniBlock } from '../../UniBlock/UniBlock';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { style } from '../../utils/style';
-import { CarouselScrollButtons } from '../Carousel/CarouselScrollButtons';
-import { alignTabStyle } from './alignTabStyle';
-import { TabsLayoutButton } from './TabsLayoutButton';
+import { renderTabsLayout } from './renderTabsLayout';
 import { type Tab, type TabsLayoutContent } from './TabsLayoutContent';
-import { TabsLayoutRedirectSection } from './TabsLayoutRedirectSection';
+
+const TAB_QUERY_PARAM_KEY = 'tab';
 
 export interface TabsLayoutProps extends TabsLayoutContent, UniBlockProps {}
 
 export const TabsLayout = UniBlock<TabsLayoutProps>(
-  ({ className = '', tabs = [], block, tabAlign, ...rest }) => {
+  ({ className = '', tabs = [], block, tabsType, ...rest }) => {
+    const router = useRouter();
+
+    const { isReady } = router;
+
     const [activeTabIndex, setActiveTabIndex] = useState(getInitSelectedIndex(tabs));
 
+    const defaultSelectedTab = tabs.findIndex((_) => Boolean(_.selected));
+
+    useEffect(() => {
+      const defaultTabIndex = router.query[TAB_QUERY_PARAM_KEY]
+        ? tabs.findIndex(
+            (_, index) => _.type === 'group' && String(index) === router.query[TAB_QUERY_PARAM_KEY],
+          )
+        : defaultSelectedTab;
+
+      setActiveTabIndex(defaultTabIndex === -1 ? 0 : defaultTabIndex);
+    }, [isReady, defaultSelectedTab]);
+
     const slotName = getSlotName(tabs[activeTabIndex], activeTabIndex);
 
-    const itemCount = tabs.length;
+    const updateUrlSearchTabParam = (_: TabItemBase, index: number) => {
+      const searchParams = new URLSearchParams(router.query as Record<string, string>);
+      if (_.text) {
+        searchParams.set(TAB_QUERY_PARAM_KEY, String(index));
+      } else {
+        searchParams.delete(TAB_QUERY_PARAM_KEY);
+      }
+      router.replace(`${router.pathname}?${searchParams}`, '', { scroll: false });
+    };
 
-    const [activeSlideIndex, { inc: incActiveSlideIndex, dec: decActiveSlideIndex }] =
-      useCarouselControls({ itemCount }, activeTabIndex);
+    const handleChange = useCallback(
+      (_: TabItemBase) => {
+        const index = tabs.indexOf(_ as Tab);
+        const tab = tabs[index];
 
-    const [containerRef, scroll] = useSwipeListScroll<HTMLDivElement>({ itemCount });
+        setActiveTabIndex(index);
+
+        if (tab.type === 'group') {
+          updateUrlSearchTabParam(_, index);
+        }
+      },
+      [tabs],
+    );
 
     return (
       <BlockWrapper className={style(className)} defaultPadding="p-0" {...rest}>
-        <div className="relative border-b-8 border-primary-main">
-          <SwipeListContainer
-            itemClassName="flex"
-            containerRef={containerRef}
-            snapAlign="snap-end"
-            gap={8}
-            onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
-          >
-            {tabs.map(renderTabButton(activeTabIndex, setActiveTabIndex, tabAlign))}
-          </SwipeListContainer>
-          <CarouselScrollButtons
-            scroll={scroll}
-            arrowsPadded={true}
-            onScrollLeft={decActiveSlideIndex}
-            onScrollRight={incActiveSlideIndex}
-            activeIndex={activeSlideIndex}
-            itemCount={itemCount}
-          />
-        </div>
+        {renderTabsLayout({
+          items: tabs,
+          value: tabs[activeTabIndex],
+          tabsType,
+          onChange: handleChange,
+        })}
         <div className="space-y-px @5xl:space-y-0 @5xl:grid @5xl:grid-cols-12 @5xl:gap-2xs">
-          {tabs[activeTabIndex]?.href ? (
-            <TabsLayoutRedirectSection tab={tabs[activeTabIndex]} />
-          ) : (
-            renderBlocksList(block?.slots?.[slotName], {
-              ...rest?.options,
-              key: `${slotName}-${block?.type}`,
-              slotName,
-              parent: block,
-            })
-          )}
+          {renderBlocksList(block?.slots?.[slotName], {
+            ...rest?.options,
+            slotName,
+            parent: block,
+          })}
         </div>
       </BlockWrapper>
     );
@@ -71,20 +83,7 @@ export const TabsLayout = UniBlock<TabsLayoutProps>(
   },
 );
 
-const getSlotName = (tab: Tab, index: number): string => tab?.title || `Слот №${index}`;
+const getSlotName = (tab: Tab, index: number): string => tab?.text || `Слот №${index}`;
 
 const getInitSelectedIndex = (tabs: Tab[]) =>
   tabs.reduce((selectedIndex, tab, i) => (tab.selected ? i : selectedIndex), 0);
-
-const renderTabButton =
-  (activeTabIndex: number, onClick: (i: number) => void, tabAlign: Align = 'start') =>
-  (tab: Tab, i: number) =>
-    (
-      <TabsLayoutButton
-        key={String(i)}
-        className={alignTabStyle[tabAlign]}
-        tab={tab}
-        isActive={activeTabIndex === i}
-        onClick={() => onClick(i)}
-      />
-    );

package/src/components/TabsLayout/TabsLayoutContent.ts

@@ -1,28 +1,56 @@
-import { type Align } from '../../model/Align';
 import { type AspectsProps } from '../../model/AspectsProps';
-import { type DescriptionProps, type TitleProps } from '../../model/HeadlineType';
-import { type LinkCommonProps } from '../../model/LinkProps';
+import { type DescriptionProps } from '../../model/HeadlineType';
+import { type LinkProps } from '../../model/LinkProps';
 import { type IconProps } from '../../model/Picture';
+import { type TabsType } from '../../ui-kit/TabsControl/TabsControlProps';
 import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
 
 /**
  * @title Таб
  */
-export type Tab = TitleProps &
-  DescriptionProps &
+export type TabBase = DescriptionProps &
   IconProps &
-  LinkCommonProps &
+  LinkProps &
   AspectsProps & {
     /** @title Вкладка выбрана по-умолчанию */
     selected?: boolean;
   };
 
+/**
+ * @title Группа
+ */
+export type GroupTab = TabBase & {
+  /** @default group */
+  type: 'group';
+};
+
+/**
+ * @title Ссылка
+ */
+export type LinkTab = TabBase &
+  LinkProps & {
+    /** @default link */
+    type: 'link';
+  };
+
+/**
+ * @title Таб
+ * @default {
+ *    "type": "group"
+ * }
+ */
+export type Tab = GroupTab | LinkTab;
+
 /**
  * @title Табы
  */
 export type TabsLayoutContent = UniBlockContent & {
-  /** @title Выравнивание табов */
-  tabAlign?: Align;
   /** @title Список табов */
   tabs?: Tab[];
+  /** @title Режим отображения */
+  tabsType?: TabsType;
+  /** @title Закрепить сверху */
+  isSticky?: boolean;
+  /** @title Показывать счетчик блоков во вкладках */
+  showCounter?: boolean;
 };

package/src/components/TabsLayout/renderTabsLayout.tsx

@@ -0,0 +1,32 @@
+import { ScrollableTabsControl } from '../../ui-kit/TabsControl/ScrollableTabsControl';
+import { type TabItemBase } from '../../ui-kit/TabsControl/TabItem';
+import { TabsControl } from '../../ui-kit/TabsControl/TabsControl';
+import { type TabsControlProps, type TabsType } from '../../ui-kit/TabsControl/TabsControlProps';
+
+interface RenderTabsProps {
+  items: TabItemBase[];
+  value: TabItemBase;
+  onChange: TabsControlProps['onChange'];
+  tabsType?: TabsType;
+}
+
+export const renderTabsLayout = ({ tabsType = 'animated', ...props }: RenderTabsProps) => {
+  switch (tabsType) {
+    case 'default':
+      return <TabsControl {...props} />;
+    case 'underlined':
+      return (
+        <div className="flex">
+          <TabsControl className="m-auto" tabsType="underlined" {...props} />
+        </div>
+      );
+    case 'animated':
+      return (
+        <div className="border-b-8 border-primary-main">
+          <ScrollableTabsControl className="m-auto" {...props} tabsType="animated" />
+        </div>
+      );
+    default:
+      return null;
+  }
+};