@redneckz/wildless-cms-uni-blocks 0.6.26 → 0.6.28

package/src/components/Footer/HorizontalNavigation.tsx

@@ -1,32 +1,25 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useLink } from '../../hooks/useLink';
 import type { TitleProps } from '../../model/HeadlineType';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import type { FooterLink } from './FooterLink';
 import { HorizontalNavigationLink } from './HorizontalNavigationLink';
 
-export interface HorizontalNavigationProps extends FooterLink, UniBlockProps, TitleProps {}
+export interface HorizontalNavigationProps extends FooterLink, TitleProps {}
 
-export const HorizontalNavigation = JSX<HorizontalNavigationProps>(
-  ({ links, className = '', context }) => {
-    const router = context.useRouter();
-    const { handlerDecorator } = context;
-
-    return (
-      <div className={className}>
-        {links?.length ? (
-          <div className="flex justify-between items-center gap-5 py-5 border-solid border-x-0 border-y border-y-main-divider">
-            {links.map((_, i) => (
-              <HorizontalNavigationLink
-                key={String(i)}
-                index={i}
-                className="text-l-light max-w-[292px]"
-                {...useLink({ router, handlerDecorator }, _)}
-              />
-            ))}
-          </div>
-        ) : null}
-      </div>
-    );
-  },
-);
+export const HorizontalNavigation = JSX<HorizontalNavigationProps>(({ className = '', links }) => {
+  return (
+    <div className={className}>
+      {links?.length ? (
+        <div className="flex justify-between items-center gap-5 py-5 border-solid border-x-0 border-y border-y-main-divider">
+          {links.map((_, i) => (
+            <HorizontalNavigationLink
+              key={String(i)}
+              index={i}
+              className="text-l-light max-w-[292px]"
+              {..._}
+            />
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+});

package/src/components/Footer/HorizontalNavigationLink.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
 import type { LinkProps } from '../../model/LinkProps';
 
 interface HorizontalNavigationLinkProps extends LinkProps {
@@ -8,14 +9,19 @@ interface HorizontalNavigationLinkProps extends LinkProps {
 }
 
 export const HorizontalNavigationLink = JSX<Partial<HorizontalNavigationLinkProps>>(
-  ({ className = '', index, text, href, target, onClick }) => (
-    <a
-      className={`text-secondary-text hover:text-primary-main inline-block no-underline ${className}`}
-      href={href}
-      target={target}
-      onClick={onClick}
-    >
-      {text || `Документ ${index}`}
-    </a>
-  ),
+  ({ className = '', index, text, ...rest }) => {
+    const link = useLink();
+    const { href, target, onClick } = link(rest);
+
+    return (
+      <a
+        className={`text-secondary-text hover:text-primary-main inline-block no-underline ${className}`}
+        href={href}
+        target={target}
+        onClick={onClick}
+      >
+        {text || `Документ ${index}`}
+      </a>
+    );
+  },
 );

package/src/components/Footer/MediaButton.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
 import { Img } from '../../ui-kit/Img/Img';
@@ -41,7 +42,10 @@ interface MediaButtonProps {
   version?: BlockVersion;
 }
 
-export const MediaButton = JSX<MediaButtonProps>(({ href, version = 'primary' }) => {
+export const MediaButton = JSX<MediaButtonProps>(({ version = 'primary', ...rest }) => {
+  const link = useLink();
+  const { href, onClick } = link(rest);
+
   const { icon, label } =
     ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
 
@@ -65,6 +69,7 @@ export const MediaButton = JSX<MediaButtonProps>(({ href, version = 'primary' })
       aria-label={label}
       target="_blank"
       rel="noopener noreferrer"
+      onClick={onClick}
     >
       {icon ? (
         <Img

package/src/components/Footer/Sitemap.tsx

@@ -1,42 +1,33 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
 import type { Fallback } from '../../model/Fallback';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import type { LinkProps } from '../../model/LinkProps';
+import { projectSettings } from '../../ProjectSettings';
 import { mergeTopItems } from '../../services/sitemap/mergeTopItems';
-import type { TopMenuItem } from '../../services/sitemap/SitemapProps';
-import { useSitemap } from '../../services/sitemap/useSitemap';
-import type { HandlerDecorator, Router } from '../ContentPage/ContentPageContext';
+import type { SitemapDataProps, TopMenuItem } from '../../services/sitemap/SitemapProps';
+import { useSWRResource } from '../../services/sitemap/useSWRResource';
 
-export interface SitemapProps extends UniBlockProps {
+export interface SitemapProps {
+  className?: string;
   items?: TopMenuItem[];
   fallback?: Fallback;
 }
 
-interface RenderColumnProps {
-  menuItem: TopMenuItem;
-  index: number;
-  router: Router;
-  handlerDecorator?: HandlerDecorator;
-}
+export const Sitemap = JSX<SitemapProps>(({ className = '', items, fallback }) => {
+  const link = useLink();
 
-export const Sitemap = JSX<SitemapProps>(({ className = '', items, fallback, context }) => {
-  const sitemap = useSitemap(fallback);
+  const sitemap = useSWRResource<SitemapDataProps>(projectSettings.SITEMAP || 'sitemap', fallback);
   const mergedItems = mergeTopItems(sitemap.topItems, items);
-  const linkParams = {
-    router: context.useRouter(),
-    handlerDecorator: context.handlerDecorator,
-  };
 
   return (
     <div className={`flex flex-grow items-start justify-between gap-[54px] xl:gap-5 ${className}`}>
-      {mergedItems?.map((_, i) => renderColumn({ menuItem: _, index: i, ...linkParams }))}
+      {mergedItems?.map((_, i) => renderColumn(link(_), i))}
     </div>
   );
 });
 
-const renderColumn = ({ menuItem, index, router, handlerDecorator }: RenderColumnProps) => {
-  const { text, href, items, target } = menuItem;
+const renderColumn = (menuItem: TopMenuItem & { onClick: () => void }, index: number) => {
+  const { text, items, href, target, onClick } = menuItem;
 
   return (
     <div key={String(index)} className="flex flex-col w-1/5 last:w-1/4 gap-3.5">
@@ -44,11 +35,12 @@ const renderColumn = ({ menuItem, index, router, handlerDecorator }: RenderColum
         className="block leading-5 text-l text-primary-text hover:text-primary-main no-underline"
         href={href}
         target={target || '_self'}
+        onClick={onClick}
       >
         {text || `Раздел ${index}`}
       </a>
       {items?.map((_, i) => (
-        <ColumnItem key={String(i)} {...useLink({ router, handlerDecorator }, _)} index={i} />
+        <ColumnItem key={String(i)} {..._} index={i} />
       ))}
     </div>
   );
@@ -58,12 +50,18 @@ interface ColumnItemProps extends LinkProps {
   index?: number;
 }
 
-const ColumnItem = JSX<ColumnItemProps>(({ text, href, target, index }) => (
-  <a
-    className="block text-l-light text-secondary-text hover:text-primary-main no-underline"
-    href={href}
-    target={target || '_self'}
-  >
-    {text || `Раздел ${index}`}
-  </a>
-));
+const ColumnItem = JSX<ColumnItemProps>(({ text, index, ...rest }) => {
+  const link = useLink();
+  const { href, target, onClick } = link(rest);
+
+  return (
+    <a
+      className="block text-l-light text-secondary-text hover:text-primary-main no-underline"
+      href={href}
+      target={target || '_self'}
+      onClick={onClick}
+    >
+      {text || `Раздел ${index}`}
+    </a>
+  );
+});

package/src/components/Footer/SocialMedia.mobile.tsx

@@ -1,28 +1,18 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useLink } from '../../hooks/useLink';
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import type { LinkProps } from '../../model/LinkProps';
 import { MediaButton } from './MediaButton';
 
-export interface SocialMediaProps extends UniBlockProps {
+export interface SocialMediaProps {
+  className?: string;
   media?: Omit<LinkProps, 'text'>[];
   version?: BlockVersion;
 }
 
-export const SocialMedia = JSX<SocialMediaProps>(({ className, media, version, context }) => {
-  const router = context.useRouter();
-  const { handlerDecorator } = context;
-
-  return (
-    <div className={`flex gap-2 items-start justify-start pt-6 pb-6 ${className || ''}`}>
-      {media?.map((_, index) => (
-        <MediaButton
-          key={String(index)}
-          version={version}
-          {...useLink({ router, handlerDecorator }, _)}
-        />
-      ))}
-    </div>
-  );
-});
+export const SocialMedia = JSX<SocialMediaProps>(({ className = '', media, version }) => (
+  <div className={`flex gap-2 items-start justify-start pt-6 pb-6 ${className}`}>
+    {media?.map((_, index) => (
+      <MediaButton key={String(index)} version={version} {..._} />
+    ))}
+  </div>
+));

package/src/components/Footer/SocialMedia.tsx

@@ -1,33 +1,21 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useLink } from '../../hooks/useLink';
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import type { LinkProps } from '../../model/LinkProps';
 import { MediaButton } from './MediaButton';
 
-export interface SocialMediaProps extends UniBlockProps {
+export interface SocialMediaProps {
+  className?: string;
   media?: Omit<LinkProps, 'text'>[];
   version?: BlockVersion;
 }
 
-export const SocialMedia = JSX<SocialMediaProps>(
-  ({ className = '', media, version, context, children }) => {
-    const router = context.useRouter();
-    const { handlerDecorator } = context;
-
-    return (
-      <div className="font-sans">
-        <div className={`flex gap-2.5 ${className}`}>
-          {media?.map((_, index) => (
-            <MediaButton
-              key={String(index)}
-              version={version}
-              {...useLink({ router, handlerDecorator }, _)}
-            />
-          ))}
-        </div>
-        <span className="text-s-light text-secondary-text">{children}</span>
-      </div>
-    );
-  },
-);
+export const SocialMedia = JSX<SocialMediaProps>(({ className = '', media, version, children }) => (
+  <div className="font-sans">
+    <div className={`flex gap-2.5 ${className}`}>
+      {media?.map((_, index) => (
+        <MediaButton key={String(index)} version={version} {..._} />
+      ))}
+    </div>
+    <span className="text-s-light text-secondary-text">{children}</span>
+  </div>
+));

package/src/components/Footer/TextInformation.mobile.tsx

@@ -1,14 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useLink } from '../../hooks/useLink';
 import type { FooterLink } from './FooterLink';
 import { TextInformationLink } from './TextInformationLink';
 
-export const TextInformation = JSX<FooterLink>(({ className, links, context }) => {
-  const router = context.useRouter();
-  const { handlerDecorator } = context;
-
+export const TextInformation = JSX<FooterLink>(({ className = '', links }) => {
   return (
-    <div className={`${className || ''}`}>
+    <div className={className}>
       <div className="py-6">
         <span className="text-xs-light text-secondary-text">
           {`\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.`}
@@ -17,12 +13,7 @@ export const TextInformation = JSX<FooterLink>(({ className, links, context }) =
       {links?.length ? (
         <div className={`flex flex-col justify-start items-start gap-2`}>
           {links.map((_, i) => (
-            <TextInformationLink
-              key={String(i)}
-              index={i}
-              className=""
-              {...useLink({ router, handlerDecorator }, _)}
-            />
+            <TextInformationLink key={String(i)} index={i} {..._} />
           ))}
         </div>
       ) : null}

package/src/components/Footer/TextInformation.tsx

@@ -1,30 +1,20 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useLink } from '../../hooks/useLink';
 import type { FooterLink } from './FooterLink';
 import { TextInformationLink } from './TextInformationLink';
 
-export const TextInformation = JSX<FooterLink>(({ className, links, context }) => {
-  const router = context.useRouter();
-  const { handlerDecorator } = context;
-
-  return (
-    <div className={`${className || ''}`}>
-      <div className="pt-5">
-        <span className="text-xs-light text-secondary-text">
-          {`\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.`}
-        </span>
-      </div>
-      {links?.length ? (
-        <div className="flex justify-start items-start gap-5 pt-2.5">
-          {links.map((_, i) => (
-            <TextInformationLink
-              key={String(i)}
-              index={i}
-              {...useLink({ router, handlerDecorator }, _)}
-            />
-          ))}
-        </div>
-      ) : null}
+export const TextInformation = JSX<FooterLink>(({ className = '', links }) => (
+  <div className={className}>
+    <div className="pt-5">
+      <span className="text-xs-light text-secondary-text">
+        {`\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.`}
+      </span>
     </div>
-  );
-});
+    {links?.length ? (
+      <div className="flex justify-start items-start gap-5 pt-2.5">
+        {links.map((_, i) => (
+          <TextInformationLink key={String(i)} index={i} {..._} />
+        ))}
+      </div>
+    ) : null}
+  </div>
+));

package/src/components/Footer/TextInformationLink.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
 import type { LinkProps } from '../../model/LinkProps';
 
 interface TextInformationLinkProps extends LinkProps {
@@ -8,14 +9,19 @@ interface TextInformationLinkProps extends LinkProps {
 }
 
 export const TextInformationLink = JSX<Partial<TextInformationLinkProps>>(
-  ({ className = '', index, text, href, target, onClick }) => (
-    <a
-      className={`text-xs-light text-secondary-text visited:text-secondary-text hover:text-primary-main inline-block no-underline max-w-[292px] ${className}`}
-      href={href}
-      target={target}
-      onClick={onClick}
-    >
-      {text || `Документ ${index}`}
-    </a>
-  ),
+  ({ className = '', index, ...rest }) => {
+    const link = useLink();
+    const { href, target, text, onClick } = link(rest);
+
+    return (
+      <a
+        className={`text-xs-light text-secondary-text visited:text-secondary-text hover:text-primary-main inline-block no-underline max-w-[292px] ${className}`}
+        href={href}
+        target={target}
+        onClick={onClick}
+      >
+        {text || `Документ ${index}`}
+      </a>
+    );
+  },
 );

package/src/components/Footer/useFooterData.ts

@@ -0,0 +1,13 @@
+import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
+import type { FooterContent } from '../../components/Footer/FooterContent';
+import { projectSettings } from '../../ProjectSettings';
+import { fetchJSONUnsafe } from '../../utils/fetchJSON';
+
+export function useFooterData(): FooterContent {
+  const { data } = useAsyncData<FooterContent>(
+    `/wcms-resources/${projectSettings.FOOTER || 'footer'}.json`,
+    fetchJSONUnsafe,
+  );
+
+  return data || {};
+}

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

@@ -1,9 +1,9 @@
-import { context } from '../../react/setup-fixture';
 import type { ListOrientation } from '../../model/ListOrientation';
 import type { Picture } from '../../model/Picture';
+import '../../react/setup-fixture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
-import type { GalleryCardProps } from './GalleryContent';
 import { Gallery } from './Gallery';
+import type { GalleryCardProps } from './GalleryContent';
 
 const isDotted = true;
 
@@ -59,7 +59,6 @@ const defaultProps = {
   title: 'Вы можете оплатить бонусными баллами',
   description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
   orientation: 'vertical' as ListOrientation,
-  context,
   cards: cards,
 };
 
@@ -67,7 +66,6 @@ const scrollProps = {
   title: 'Вы можете оплатить бонусными баллами',
   description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
   orientation: 'horizontal' as ListOrientation,
-  context,
   cards: cards,
 };
 

package/src/components/Gallery/Gallery.fixture.tsx

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import { context } from '../../react/setup-fixture';
+import '../../react/setup-fixture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { Gallery } from './Gallery';
 import type { GalleryProps } from './GalleryProps';
@@ -39,7 +39,7 @@ const defaultItems = [
 export const defaultProps: GalleryProps = {
   title: 'Вы можете оплатить бонусными баллами',
   description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
-  context,
+
   cards: [
     {
       title: 'Более 5000 товаров',
@@ -82,7 +82,6 @@ export const defaultProps: GalleryProps = {
 const textAndButtonProps: GalleryProps = {
   title: 'Вы можете оплатить бонусными баллами',
   description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
-  context,
   cards: [
     {
       title: 'Более 5000 товаров',
@@ -116,7 +115,6 @@ const textAndButtonProps: GalleryProps = {
 const listAndButtonProps: GalleryProps = {
   title: 'Вы можете оплатить бонусными баллами',
   description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
-  context,
   cards: [
     {
       title: 'Более 5000 товаров',
@@ -152,7 +150,6 @@ const listAndButtonProps: GalleryProps = {
 const textAndNoButtonProps: GalleryProps = {
   title: 'Вы можете оплатить бонусными баллами',
   description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
-  context,
   cards: [
     {
       title: 'Более 5000 товаров',
@@ -181,7 +178,6 @@ const textAndNoButtonProps: GalleryProps = {
 
 const onlyTitleProps: GalleryProps = {
   title: 'Вы можете оплатить бонусными баллами',
-  context,
   cards: [
     {
       title: 'Более 5000 товаров',

package/src/components/Gallery/Gallery.mobile.tsx

@@ -2,19 +2,18 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import { VersionStyleMap } from '../../model/BlockVersion';
 import type { ListOrientation } from '../../model/ListOrientation';
+import type { Picture } from '../../model/Picture';
 import { Button } from '../../ui-kit/Button/Button';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { ListItemVersion } from '../../ui-kit/List/ListProps';
 import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
-import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import type { GalleryCardProps, GalleryItemProps } from './GalleryContent';
 import type { GalleryProps } from './GalleryProps';
-import type { Picture } from '../../model/Picture';
 
 export const Gallery = JSX<GalleryProps>(
-  ({ context, title, description, cards = [], className, orientation = 'horizontal' }) => {
+  ({ title, description, cards = [], className, orientation = 'horizontal' }) => {
     const headingClassName = description ? 'mb-2' : 'mb-5';
 
     return (
@@ -29,19 +28,15 @@ export const Gallery = JSX<GalleryProps>(
             <div className="text-m max-w-[600px] text-center mb-5">{description}</div>
           ) : null}
         </div>
-        {renderCardsLayout(orientation, cards, context)}
+        {renderCardsLayout(orientation, cards)}
       </section>
     );
   },
 );
 
-function renderCardsLayout(
-  orientation: ListOrientation,
-  cards: GalleryCardProps[],
-  context: ContentPageContext,
-) {
+function renderCardsLayout(orientation: ListOrientation, cards: GalleryCardProps[]) {
   return orientation === 'horizontal' ? (
-    <SwipeListControl context={context}>{cards?.map(renderCard)}</SwipeListControl>
+    <SwipeListControl>{cards?.map(renderCard)}</SwipeListControl>
   ) : (
     <div className="grid gap-[14px]">{cards?.map(renderCard)}</div>
   );

package/src/components/Gallery/GalleryContainer.tsx

@@ -1,43 +1,26 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { VersionStyleMap } from '../../model/BlockVersion';
 import type { GalleryVersion } from '../../model/GalleryVersion';
-import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import { Headline } from '../Headline/Headline';
 import { cardStyleMap, cardWidthMap, galleryLengthForScrollMap } from './constants';
 import { GalleryCardInner } from './GalleryCardInner';
 import type { GalleryCardProps } from './GalleryContent';
 import type { GalleryInnerProps } from './GalleryInner';
 
-export interface GalleryContainerProps extends Omit<GalleryInnerProps, 'className'> {
+export interface GalleryContainerProps extends GalleryInnerProps {
   activeCardIndex: number;
 }
 
 export interface GalleryCardData {
   card: GalleryCardProps;
   version: GalleryVersion;
-  context: ContentPageContext;
 }
 
 export const GalleryContainer = JSX<GalleryContainerProps>(
-  ({
-    context,
-    title,
-    headlineVersion = 'M',
-    description,
-    cards = [],
-    version = 'normal',
-    activeCardIndex,
-  }) => {
+  ({ headlineVersion = 'M', cards = [], version = 'normal', activeCardIndex, ...rest }) => {
     return (
       <div>
-        <Headline
-          context={context}
-          className="!p-0"
-          title={title}
-          description={description}
-          headlineVersion={headlineVersion}
-          align="center"
-        />
+        <Headline {...rest} className="!p-0" headlineVersion={headlineVersion} align="center" />
         <div
           className={`flex mt-8 ${
             cards?.length <= galleryLengthForScrollMap[version] ? 'justify-center' : ''
@@ -45,7 +28,7 @@ export const GalleryContainer = JSX<GalleryContainerProps>(
           style={{ transform: `translateX(-${activeCardIndex * cardWidthMap[version]}px)` }}
           role="list"
         >
-          {cards?.map((card, i) => renderCard({ card, version, context }, i))}
+          {cards?.map((card, i) => renderCard({ card, version }, i))}
         </div>
       </div>
     );

package/src/components/Gallery/GalleryContent.ts

@@ -1,4 +1,4 @@
-import { AlignType } from '../../model/AlignType';
+import type { AlignType } from '../../model/AlignType';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { HeadlineProps, HeadlineSmallProps } from '../../model/HeadlineType';
 import type { ListOrientation } from '../../model/ListOrientation';

package/src/components/Gallery/GalleryInner.tsx

@@ -14,7 +14,7 @@ export interface GalleryInnerProps extends GalleryContent, UniBlockProps {
 }
 
 export const GalleryInner = JSX<GalleryInnerProps>(
-  ({ context, cards = [], className = '', version = 'normal', button, ...rest }) => {
+  ({ cards = [], className = '', version = 'normal', button, ...rest }) => {
     const [activeCardIndex, setActiveCardIndex] = useState(0);
 
     const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
@@ -30,12 +30,10 @@ export const GalleryInner = JSX<GalleryInnerProps>(
 
     return (
       <BlockWrapper
-        context={context}
         className={`relative font-sans text-primary-text bg-white p-[42px] overflow-hidden flex flex-col ${className}`}
         {...rest}
       >
         <GalleryContainer
-          context={context}
           cards={cards}
           version={version}
           activeCardIndex={activeCardIndex}

package/src/components/GracePeriod/GracePeriod.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../react/setup-fixture';
+import '../../react/setup-fixture';
 
 import type { Picture } from '../../model/Picture';
 import { GracePeriod } from './GracePeriod';
@@ -103,7 +103,7 @@ export const GRACE_PERIOD: GracePeriodContent = {
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <GracePeriod className="col-span-12" context={context} {...GRACE_PERIOD} />
+      <GracePeriod className="col-span-12" {...GRACE_PERIOD} />
     </div>
   ),
 };