@redneckz/wildless-cms-uni-blocks 0.15.339 → 0.15.340

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

@@ -9,8 +9,40 @@ const options: BlockRendererOptions = {
 };
 
 const TABS: Tab[] = [
-  { text: 'Первый таб', description: 'Описание первого таба', type: 'group' },
-  { text: 'Второй таб', description: 'Описание второго таба', type: 'group' },
+  {
+    type: 'group',
+    description: 'Описание первого таб группа',
+    text: 'Первый таб',
+    selected: false,
+  },
+  {
+    type: 'group',
+    description: 'Описание первого таб группа',
+    text: 'Второй таб',
+    selected: false,
+  },
+  {
+    type: 'group',
+    description: 'Описание первого таб группа',
+    text: 'Третий таб и с очень длинным текстом',
+    selected: false,
+  },
+];
+const TabsWithIcon: Tab[] = [
+  {
+    type: 'group',
+    description: 'Описание первого таба',
+    text: 'Первый таб',
+    selected: false,
+    icon: { icon: 'CalendarIcon' },
+  },
+  {
+    type: 'group',
+    description: 'Описание второго таба',
+    text: 'Второй таб',
+    selected: false,
+    icon: { icon: 'BankIcon' },
+  },
 ];
 
 const TEXT_BLOCK_DESCRIPTION = {
@@ -22,52 +54,66 @@ const TEXT_BLOCK_DESCRIPTION = {
   style: ['col-span-12'],
 };
 
+const slots = {
+  'Первый таб': [TEXT_BLOCK_DESCRIPTION],
+  'Второй таб': [TEXT_BLOCK_DESCRIPTION, TEXT_BLOCK_DESCRIPTION],
+  'Третий таб': [TEXT_BLOCK_DESCRIPTION, TEXT_BLOCK_DESCRIPTION, TEXT_BLOCK_DESCRIPTION],
+};
+
 export default {
   default: (
     <div className="container grid grid-cols-12">
       <TabsLayout
         className="col-span-12"
         tabs={TABS}
+        tabsType="default"
         options={options}
+        block={{ slots }}
+      />
+    </div>
+  ),
+  animated: (
+    <div className="container grid grid-cols-12">
+      <TabsLayout
+        className="col-span-12"
+        tabs={TABS}
         tabsType="animated"
-        block={{
-          slots: {
-            'Первый таб': [TEXT_BLOCK_DESCRIPTION],
-            'Второй таб': [TEXT_BLOCK_DESCRIPTION],
-          },
-        }}
+        options={options}
+        block={{ slots }}
       />
     </div>
   ),
-  wide: (
+  underlined: (
     <div className="container grid grid-cols-12">
       <TabsLayout
         className="col-span-12"
         tabs={TABS}
+        tabsType="underlined"
         options={options}
-        tabsType="default"
-        block={{
-          slots: {
-            'Первый таб': [TEXT_BLOCK_DESCRIPTION, TEXT_BLOCK_DESCRIPTION],
-            'Второй таб': [TEXT_BLOCK_DESCRIPTION],
-          },
-        }}
+        block={{ slots }}
+      />
+    </div>
+  ),
+  animatedIcons: (
+    <div className="container grid grid-cols-12">
+      <TabsLayout
+        className="col-span-12"
+        tabs={TabsWithIcon}
+        tabsType="animated"
+        options={options}
+        block={{ slots }}
       />
     </div>
   ),
-  scrollable: (
+  defaultCounter: (
     <div className="container grid grid-cols-12">
       <TabsLayout
         className="col-span-12"
         tabs={TABS}
+        tabsType="default"
         options={options}
-        tabsType="underlined"
-        block={{
-          slots: {
-            'Первый таб': [TEXT_BLOCK_DESCRIPTION, TEXT_BLOCK_DESCRIPTION],
-            'Второй таб': [TEXT_BLOCK_DESCRIPTION],
-          },
-        }}
+        block={{ slots }}
+        showCounter={true}
       />
     </div>
   ),

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

@@ -21,6 +21,12 @@ const TABS: Tab[] = [
     text: 'Второй таб',
     selected: false,
   },
+  {
+    type: 'group',
+    description: 'Описание первого таб группа',
+    text: 'Третий таб и с очень длинным текстом и так далее и тому подобное',
+    selected: false,
+  },
 ];
 const TabsWithIcon: Tab[] = [
   {
@@ -48,68 +54,66 @@ const TEXT_BLOCK_DESCRIPTION = {
   style: ['col-span-12'],
 };
 
+const slots = {
+  'Первый таб': [TEXT_BLOCK_DESCRIPTION],
+  'Второй таб': [TEXT_BLOCK_DESCRIPTION, TEXT_BLOCK_DESCRIPTION],
+  'Третий таб': [TEXT_BLOCK_DESCRIPTION, TEXT_BLOCK_DESCRIPTION, TEXT_BLOCK_DESCRIPTION],
+};
+
 export default {
   default: (
     <div className="container grid grid-cols-12">
       <TabsLayout
         className="col-span-12"
         tabs={TABS}
-        tabsType="animated"
+        tabsType="default"
         options={options}
-        block={{
-          slots: {
-            'Первый таб': [TEXT_BLOCK_DESCRIPTION, TEXT_BLOCK_DESCRIPTION],
-            'Второй таб': [TEXT_BLOCK_DESCRIPTION],
-          },
-        }}
+        block={{ slots }}
       />
     </div>
   ),
-  wide: (
+  animated: (
     <div className="container grid grid-cols-12">
       <TabsLayout
         className="col-span-12"
         tabs={TABS}
-        tabsType="default"
+        tabsType="animated"
         options={options}
-        block={{
-          slots: {
-            'Первый таб': [TEXT_BLOCK_DESCRIPTION, TEXT_BLOCK_DESCRIPTION],
-            'Второй таб': [TEXT_BLOCK_DESCRIPTION],
-          },
-        }}
+        block={{ slots }}
       />
     </div>
   ),
-  scrollable: (
+  underlined: (
     <div className="container grid grid-cols-12">
       <TabsLayout
         className="col-span-12"
         tabs={TABS}
         tabsType="underlined"
         options={options}
-        block={{
-          slots: {
-            'Первый таб': [TEXT_BLOCK_DESCRIPTION, TEXT_BLOCK_DESCRIPTION],
-            'Второй таб': [TEXT_BLOCK_DESCRIPTION],
-          },
-        }}
+        block={{ slots }}
       />
     </div>
   ),
-  icons: (
+  animatedIcons: (
     <div className="container grid grid-cols-12">
       <TabsLayout
         className="col-span-12"
         tabs={TabsWithIcon}
         tabsType="animated"
         options={options}
-        block={{
-          slots: {
-            'Первый таб': [TEXT_BLOCK_DESCRIPTION, TEXT_BLOCK_DESCRIPTION],
-            'Второй таб': [TEXT_BLOCK_DESCRIPTION],
-          },
-        }}
+        block={{ slots }}
+      />
+    </div>
+  ),
+  defaultCounter: (
+    <div className="container grid grid-cols-12">
+      <TabsLayout
+        className="col-span-12"
+        tabs={TABS}
+        tabsType="default"
+        options={options}
+        block={{ slots }}
+        showCounter={true}
       />
     </div>
   ),

package/src/components/TabsLayout/TabsLayout.tsx

@@ -11,20 +11,30 @@ import { type Tab, type TabsLayoutContent } from './TabsLayoutContent';
 
 const TAB_QUERY_PARAM_KEY = 'tab';
 
+type TabCountedProps = Tab & {
+  count?: number;
+};
 export interface TabsLayoutProps extends TabsLayoutContent, UniBlockProps {}
 
 export const TabsLayout = UniBlock<TabsLayoutProps>(
-  ({ className = '', tabs = [], block, tabsType, ...rest }) => {
+  ({ className = '', tabs = [], block, tabsType, showCounter = false, ...rest }) => {
     const router = useRouter();
 
-    const [activeTabIndex, setActiveTabIndex] = useState(getInitSelectedIndex(tabs));
+    const tabsCounted: TabCountedProps[] = showCounter
+      ? tabs.map((_) => ({
+          ..._,
+          count: block?.slots?.[_?.text ?? '']?.length ?? 0,
+        }))
+      : tabs;
 
-    const defaultSelectedTab = tabs.findIndex((_) => Boolean(_.selected));
+    const [activeTabIndex, setActiveTabIndex] = useState(getInitSelectedIndex(tabsCounted));
+
+    const defaultSelectedTab = tabsCounted.findIndex((_) => Boolean(_.selected));
 
     useEffect(() => {
-      const query = new URLSearchParams(globalThis?.location?.search || '');
+      const query = new URLSearchParams(globalThis?.location?.search);
       const defaultTabIndex = query.get(TAB_QUERY_PARAM_KEY)
-        ? tabs.findIndex(
+        ? tabsCounted.findIndex(
             (_, index) => _.type === 'group' && String(index) === query.get(TAB_QUERY_PARAM_KEY),
           )
         : defaultSelectedTab;
@@ -32,7 +42,7 @@ export const TabsLayout = UniBlock<TabsLayoutProps>(
       setActiveTabIndex(defaultTabIndex === -1 ? 0 : defaultTabIndex);
     }, [defaultSelectedTab]);
 
-    const slotName = getSlotName(tabs[activeTabIndex], activeTabIndex);
+    const slotName = getSlotName(tabsCounted[activeTabIndex], activeTabIndex);
 
     const updateUrlSearchTabParam = (_: TabItemBase, index: number) => {
       const searchParams = new URLSearchParams(globalThis?.location?.search || '');
@@ -46,8 +56,8 @@ export const TabsLayout = UniBlock<TabsLayoutProps>(
 
     const handleChange = useCallback(
       (_: TabItemBase) => {
-        const index = tabs.indexOf(_ as Tab);
-        const tab = tabs[index];
+        const index = tabsCounted.indexOf(_ as Tab);
+        const tab = tabsCounted[index];
 
         setActiveTabIndex(index);
 
@@ -55,14 +65,14 @@ export const TabsLayout = UniBlock<TabsLayoutProps>(
           updateUrlSearchTabParam(_, index);
         }
       },
-      [tabs],
+      [tabsCounted],
     );
 
     return (
       <BlockWrapper className={style(className)} defaultPadding="p-0" {...rest}>
         {renderTabsLayout({
-          items: tabs,
-          value: tabs[activeTabIndex],
+          items: tabsCounted,
+          value: tabsCounted[activeTabIndex],
           tabsType,
           onChange: handleChange,
         })}

package/src/components/TabsLayout/renderTabsLayout.tsx

@@ -1,6 +1,5 @@
 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 {
@@ -10,23 +9,28 @@ interface RenderTabsProps {
   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;
-  }
+const tabsStyle: Record<TabsType, { wrapper: string; component: string }> = {
+  default: {
+    wrapper: '',
+    component: '',
+  },
+  animated: {
+    wrapper: 'border-b-8 border-primary-main bg-white',
+    component: 'm-auto',
+  },
+  underlined: {
+    wrapper: 'flex',
+    component: 'm-auto',
+  },
 };
+
+export const renderTabsLayout = ({ tabsType = 'animated', ...props }: RenderTabsProps) =>
+  tabsType ? (
+    <div className={tabsStyle[tabsType].wrapper}>
+      <ScrollableTabsControl
+        className={tabsStyle[tabsType].component}
+        tabsType={tabsType}
+        {...props}
+      />
+    </div>
+  ) : null;

package/src/content-page-repository/ContentPageRepository.ts

@@ -1,6 +1,9 @@
 import fs from 'fs';
 import glob from 'glob';
+import path from 'path';
 import util from 'util';
+import { computeAPIFallback } from '../components/ContentPage/computeAPIFallback';
+import { normalizePage } from '../components/ContentPage/normalizePage';
 import { type ContentPageDef } from '../model/ContentPageDef';
 import { type TransformationOptions } from './TransformationOptions';
 import { transformContentPage } from './transformContentPage';
@@ -8,6 +11,10 @@ import { transformContentPage } from './transformContentPage';
 const find = util.promisify(glob);
 const readFile = util.promisify(fs.readFile);
 
+export const PAGE_EXT = '.page.json';
+
+export type Slug = string[];
+
 export class ContentPageRepository {
   public static readonly inst = new ContentPageRepository();
 
@@ -18,15 +25,40 @@ export class ContentPageRepository {
     },
   ) {}
 
-  listAllContentPages(): Promise<string[]> {
-    return find(`${this.options.contentDir}/**/*.page.json`);
+  listAllPages(): Promise<string[]> {
+    return find(`${this.options.contentDir}/**/*${PAGE_EXT}`);
+  }
+
+  async listAllSlugs(): Promise<Slug[]> {
+    const contentFiles = await find(`*${PAGE_EXT}`, {
+      cwd: this.options.contentDir,
+      matchBase: true,
+    });
+    const isErrorPage = ([, head, ...tail]: Slug) => /^\d+$/.test(head) && tail.length === 0;
+
+    return contentFiles
+      .map((_) => _.slice(0, -PAGE_EXT.length))
+      .map((_) => _.split('/'))
+      .filter((_) => !isErrorPage(_));
   }
 
   async readPage(filePath: string): Promise<ContentPageDef> {
     return JSON.parse(await readFile(filePath, 'utf-8'));
   }
 
-  generatePage(filePath: string): Promise<ContentPageDef> {
-    return transformContentPage(filePath, this.options);
+  async generatePageData(slug: Slug, options?: TransformationOptions): Promise<ContentPageDef> {
+    const pathname = path.join(this.options.contentDir, ...slug);
+    const indexFilePath = path.join(pathname, `index${PAGE_EXT}`);
+    const pageFilePath = `${pathname}${PAGE_EXT}`;
+
+    const data = normalizePage(
+      await this.generatePage(fs.existsSync(indexFilePath) ? indexFilePath : pageFilePath, options),
+    );
+
+    return { ...data, fallback: (await computeAPIFallback(data)) || {} };
+  }
+
+  generatePage(filePath: string, options?: TransformationOptions): Promise<ContentPageDef> {
+    return transformContentPage(filePath, { ...this.options, ...options });
   }
 }

package/src/content-page-repository/TransformationOptions.ts

@@ -1,4 +1,5 @@
 export interface TransformationOptions {
   contentDir: string;
   publicDir: string;
+  dryRun?: boolean;
 }

package/src/content-page-repository/copy.ts

@@ -0,0 +1,11 @@
+import fs from 'fs';
+import path from 'path';
+import util from 'util';
+
+const mkdir = util.promisify(fs.mkdir);
+const copyFile = util.promisify(fs.copyFile);
+
+export async function copy(input: string, output: string) {
+  await mkdir(path.dirname(output), { recursive: true });
+  await copyFile(input, output);
+}

package/src/content-page-repository/transformAttachmentLink.ts

@@ -1,14 +1,10 @@
-import fs from 'fs';
 import path from 'path';
-import util from 'util';
 import type { LinkProps } from '../model/LinkProps';
 import { isUUID } from '../utils/isUUID';
 import { clearAttachmentHref } from './clearAttachmentHref';
+import { copy } from './copy';
 import type { TransformationOptions } from './TransformationOptions';
 
-const mkdir = util.promisify(fs.mkdir);
-const copyFile = util.promisify(fs.copyFile);
-
 export async function transformAttachmentLink(
   link: LinkProps,
   pagePath: string,
@@ -35,12 +31,15 @@ async function transformHref(input: string, options: TransformationOptions) {
     return input;
   }
 
-  const { contentDir, publicDir } = options;
+  const { contentDir, publicDir, dryRun } = options;
   const docRelativePath = path.relative(contentDir, input);
   const output = path.join(publicDir, docRelativePath);
 
-  await mkdir(path.dirname(output), { recursive: true });
-  await copyFile(input, output);
+  try {
+    dryRun || (await copy(input, output));
+  } catch (e) {
+    console.info(`No "${input}" attachment found`);
+  }
 
   return path.join('/', docRelativePath);
 }

package/src/content-page-repository/transformDocument.ts

@@ -3,10 +3,9 @@ import path from 'path';
 import util from 'util';
 import { type Attachment } from '../model/Attachment';
 import { isUUID } from '../utils/isUUID';
+import { copy } from './copy';
 import { type TransformationOptions } from './TransformationOptions';
 
-const mkdir = util.promisify(fs.mkdir);
-const copyFile = util.promisify(fs.copyFile);
 const stat = util.promisify(fs.stat);
 
 export async function transformDocument(
@@ -18,15 +17,14 @@ export async function transformDocument(
     return attachment;
   }
 
-  const { contentDir, publicDir } = options;
+  const { contentDir, publicDir, dryRun } = options;
   const input = attachment.src;
   const docRelativePath = path.relative(contentDir, input);
   const output = path.join(publicDir, docRelativePath);
   const inputFileSize = (await stat(input)).size;
 
   try {
-    await mkdir(path.dirname(output), { recursive: true });
-    await copyFile(input, output);
+    dryRun || (await copy(input, output));
   } catch (e) {
     console.info(`No "${input}" attachment found on page: "${pagePath}"`);
 

package/src/content-page-repository/transformImg.ts

@@ -39,7 +39,11 @@ export function transformImg(
 
   const output = computeImgOutputPath(src, options);
 
-  const { cache = defaultTransformationCache } = options;
+  const { cache = defaultTransformationCache, dryRun } = options;
+
+  if (dryRun) {
+    return output;
+  }
 
   const cachedResult = cache.get(output);
   if (cachedResult) {
@@ -61,6 +65,7 @@ export function transformImg(
 
     return output;
   })();
+
   cache.set(output, result);
 
   return result;

package/src/data/FooterData.ts

@@ -39,7 +39,6 @@ export interface FooterData {
   feedbackButton?: LinkButtonContent;
   otherLinks?: LinkProps[];
   mediaLinks?: MediaLinkItems[];
-  isOldVersionButton?: boolean;
   license?: string;
   horizontalNavigationTitle?: string; // TODO: для мобильной версии
 }

package/src/data/SitemapData.ts

@@ -1,7 +1,7 @@
 import { type AspectsDef, type AspectsProps } from '../model/AspectsProps';
 import { type LinkProps } from '../model/LinkProps';
 import { type LogoType } from '../model/LogoType';
-import { type IconProps, type Picture } from '../model/Picture';
+import { type IconProps } from '../model/Picture';
 
 export interface SitemapLinkProps extends LinkProps {
   displayArea?: string;
@@ -23,15 +23,6 @@ export interface TopMenuItemProps extends LinkProps, IconProps {
   dataFooter?: AspectsDef[];
 }
 
-/**
- * @title Ссылка дополнительного меню
- * @required ["text", "href"]
- */
-export interface DispositionItem extends LinkProps {
-  /** @hidden */
-  icon?: Picture;
-}
-
 /**
  * @title Представительства за рубежом
  * @required ["text", "href"]
@@ -55,7 +46,6 @@ export type BranchesSitemap = {
 export interface SitemapData {
   logo?: LogoType;
   topItems?: TopMenuItemProps[];
-  dispositions?: DispositionItem[];
   foreignOffices?: ForeignOfficeProps[];
   branches?: BranchesSitemap;
   officesAtms?: LinkProps;