@redneckz/wildless-cms-uni-blocks 0.2.64 → 0.2.68

package/src/common.css

@@ -36,4 +36,30 @@
   .-translate-x-full {
     transform: translateX(-100%);
   }
+
+  /* Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+
+  .horizontal-list {
+    display: flex;
+    overflow-x: scroll;
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+    touch-action: pan-x;
+    scroll-snap-type: x mandatory;
+  }
+
+  .horizontal-list-item {
+    flex-shrink: 0;
+    scroll-snap-align: start;
+    scroll-snap-stop: always;
+    width: 100%;
+  }
 }

package/src/setup-fixture.ts

@@ -70,3 +70,15 @@ export const context: ContentPageContext = {
     };
   },
 };
+
+export const mobileContext: ContentPageContext = {
+  ...context,
+  useRouter: () => ({
+    href: `${TEST_ORIGIN}/mobile/credits`,
+    pathname: '/mobile/credits',
+    query: {},
+    push: (url: string) => {
+      console.log(url);
+    },
+  }),
+};

package/src/ui-kit/ArrowButton.tsx

@@ -1,5 +1,4 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Icon } from './Icon';
 
 export interface ArrowButtonProps {
   onClick?: () => void;
@@ -23,7 +22,7 @@ export const ArrowButton = JSX<ArrowButtonProps>(({ className, onClick, ariaLabe
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <path d="M7 12L3 8L7 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+        <path d="M7 12L3 8L7 4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
         <path
           d="M14 9C14.5523 9 15 8.55228 15 8C15 7.44772 14.5523 7 14 7L14 9ZM8 7C7.44772 7 7 7.44772 7 8C7 8.55229 7.44772 9 8 9L8 7ZM14 7L8 7L8 9L14 9L14 7Z"
           fill="currentColor"

package/src/useLink.ts

@@ -1,6 +1,6 @@
 import { HandlerDecorator, Router } from './ContentPageContext';
 import type { LinkContent } from './types';
-import { isURL, toRelativeHref } from './utils/url';
+import { adjustHref, isURL } from './utils/url';
 
 const defaultHandlerDecorator: HandlerDecorator = (handler, targetContent) => handler;
 
@@ -11,7 +11,7 @@ export function useLink(
   }: { router: Router; handlerDecorator?: HandlerDecorator },
   link: Partial<LinkContent>,
 ) {
-  const href = toRelativeHref(link.href, router.href);
+  const href = adjustHref(link.href, router);
   return {
     ...link,
     href,

package/src/utils/url.spec.ts

@@ -0,0 +1,53 @@
+import { adjustHref, getOrigin, toRelativeHref, withoutQuery } from './url';
+
+describe('url', () => {
+  describe('withoutQuery', () => {
+    it('should return URL without query params', () => {
+      expect(withoutQuery('http://foo.ru/other/path?first=1&second=2')).toBe(
+        'http://foo.ru/other/path',
+      );
+    });
+  });
+
+  describe('getOrigin', () => {
+    it('should return origin of specified URL', () => {
+      expect(getOrigin('http://foo.ru/other/path?first=1&second=2')).toBe('http://foo.ru');
+    });
+  });
+
+  describe('adjustHref', () => {
+    it('should compute URL relative to some base URL', () => {
+      expect(
+        adjustHref('http://foo.ru/other/path', {
+          pathname: '/some/path',
+          href: 'http://foo.ru/some/path',
+        }),
+      ).toBe('/other/path');
+    });
+
+    it('should compute mobile URL for mobile pages', () => {
+      expect(
+        adjustHref('http://foo.ru/other/path', {
+          pathname: '/mobile/some/path',
+          href: 'http://foo.ru/mobile/some/path',
+        }),
+      ).toBe('/mobile/other/path');
+    });
+
+    it('should return nothing if nothing provided', () => {
+      expect(adjustHref(undefined, { pathname: '/mobile/some/path' })).toBe(undefined);
+    });
+  });
+
+  describe('toRelativeHref', () => {
+    it('should compute URL relative to some base URL', () => {
+      expect(toRelativeHref('http://foo.ru/other/path', { href: 'http://foo.ru/some/path' })).toBe(
+        '/other/path',
+      );
+    });
+
+    it('should return nothing if nothing provided', () => {
+      expect(toRelativeHref(undefined, {})).toBe(undefined);
+    });
+  });
+});

package/src/utils/url.ts

@@ -1,22 +1,52 @@
+export const MOBILE_URL_PATH = '/mobile';
+
 export const isURL = (href?: string) => href?.includes('//');
 
+export const isHrefActive = (
+  href: string | undefined,
+  router: { pathname?: string; href?: string },
+  cmp: (href: string, baseHref: string) => boolean = (href, baseHref) => href === baseHref,
+) => {
+  return cmp(
+    withoutQuery(href),
+    withoutMobilePath(withoutQuery(isURL(href) ? router.href : router.pathname)),
+  );
+};
+
 export const withoutQuery = (href?: string) => (href || '').replace(/\/?\?.*/, '');
 
+export const withoutMobilePath = (href?: string) => (href || '').replace(MOBILE_URL_PATH, '');
+
 export const getOrigin = (href?: string) => {
-  if (isURL(href)) {
-    const url = href!;
-    const protoSeparator = '://';
-    const endOfProto = url.indexOf(protoSeparator);
-    const endOfOrigin = url.indexOf('/', endOfProto + protoSeparator.length);
-    return endOfOrigin !== -1 ? url.substring(0, endOfOrigin) : url;
+  if (!isURL(href)) {
+    return undefined;
+  }
+
+  const url = href!;
+  const protoSeparator = '//';
+  const endOfProto = url.indexOf(protoSeparator);
+  const endOfOrigin = url.indexOf('/', endOfProto + protoSeparator.length);
+  return endOfOrigin !== -1 ? url.substring(0, endOfOrigin) : url;
+};
+
+export const adjustHref = (
+  href: string | undefined,
+  router: { pathname: string; href?: string },
+) => {
+  if (!href) {
+    return href;
   }
-  return undefined;
+
+  const relativeHref = toRelativeHref(href, router)!;
+  const isMobilePage = router?.pathname.startsWith(MOBILE_URL_PATH);
+  return isMobilePage && !isURL(relativeHref) ? `${MOBILE_URL_PATH}${relativeHref}` : relativeHref;
 };
 
-export const toRelativeHref = (href?: string, baseURL?: string) => {
+export const toRelativeHref = (href: string | undefined, router: { href?: string }) => {
   if (!href) {
     return href;
   }
-  const origin = getOrigin(baseURL);
+
+  const origin = getOrigin(router?.href);
   return origin ? href.replace(origin, '') || '/' : href;
 };