@mappedin/viewer 0.32.1-fb06d51.0 → 0.32.2-a6589fc.0

package/dist/types/src/components/async-image/index.d.ts

@@ -2,6 +2,7 @@ type TAsyncImageProps = {
     src?: string | string[];
     alt?: string;
     style?: React.CSSProperties;
+    role?: string;
 };
 declare const AsyncImage: React.FC<TAsyncImageProps>;
 export default AsyncImage;

package/dist/types/src/components/card-item/index.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+type TCardItemProps = {
+    className?: string;
+    left?: React.ReactNode;
+    tabIndex?: number;
+    role?: string;
+};
+declare const CardItem: React.FC<PropsWithChildren<TCardItemProps>>;
+export default CardItem;

package/dist/types/src/components/caret/index.d.ts

@@ -2,6 +2,7 @@ type TChevronProps = {
     size?: number;
     type?: 'chevron' | 'caret';
     direction?: 'up' | 'down' | 'left' | 'right';
+    color?: string;
 };
 declare const Caret: React.FC<TChevronProps>;
 export default Caret;

package/dist/types/src/components/carousel/carousel.stories.d.ts

@@ -0,0 +1 @@
+export declare const Default: () => import("react").JSX.Element;

package/dist/types/src/components/carousel/index.d.ts

@@ -0,0 +1,7 @@
+type TCarouselProps = {
+    imageURLs: string[];
+    onFullScreenGalleryOpen?: () => void;
+    proxy?: boolean;
+};
+declare const Carousel: React.FC<TCarouselProps>;
+export default Carousel;

package/dist/types/src/components/{metadata-card → carousel}/utils.d.ts

@@ -1,17 +1,14 @@
-import ReactDOM from 'react-dom/client';
-import { TMetadataCardProps } from './card';
-/**
- * Imperative API to render the metadata card into a provided container element.
- */
-export declare const showMetadataCard: (container: Element, props: TMetadataCardProps) => ReactDOM.Root;
 export declare const useCarousel: (options: {
     imageURLs: string[];
     onFullScreenGalleryOpen?: () => void;
+    proxy?: boolean;
 }) => {
     imgIndex: number;
     nextImage: () => void;
     previousImage: () => void;
-    currentImageSrc: string | undefined;
+    currentImageSources: (Partial<Record<"small" | "xsmall" | "medium", string>> & {
+        original: string;
+    }) | null;
     setImgIndex: (index: number) => void;
     showNavigationControls: boolean;
     handleKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;

package/dist/types/src/components/categories-text/categories-text.stories.d.ts

@@ -0,0 +1,3 @@
+import { Story } from '@ladle/react';
+export declare const Default: Story;
+export declare const ShortList: Story;

package/dist/types/src/components/categories-text/category-text-item.d.ts

@@ -0,0 +1,7 @@
+type TCategoryTextItemProps = {
+    index: number;
+    name: string;
+    onClick: () => void;
+};
+declare const CategoryTextItem: React.FC<TCategoryTextItemProps>;
+export default CategoryTextItem;

package/dist/types/src/components/categories-text/category-text-list.d.ts

@@ -0,0 +1,9 @@
+type TCategoryTextListProps = {
+    categories: {
+        id: string;
+        name: string;
+    }[];
+    onCategoryClick?: (id: string) => void;
+};
+declare const CategoryTextList: React.FC<TCategoryTextListProps>;
+export default CategoryTextList;

package/dist/types/src/components/categories-text/index.d.ts

@@ -0,0 +1,8 @@
+import { ComponentProps } from 'react';
+import CategoryTextList from './category-text-list';
+type TCategoriesTextProps = {
+    categories: ComponentProps<typeof CategoryTextList>['categories'];
+    onCategoryClick?: ComponentProps<typeof CategoryTextList>['onCategoryClick'];
+};
+declare const CategoriesText: React.FC<TCategoriesTextProps>;
+export default CategoriesText;

package/dist/types/src/components/categories-text/utils.d.ts

@@ -0,0 +1,18 @@
+type TUseCategoriesTextProps = {
+    collapsedHeight: number;
+    expandedHeight: number;
+};
+export declare const useCategoriesText: ({ collapsedHeight, expandedHeight }: TUseCategoriesTextProps) => {
+    wrapping: boolean;
+    expanded: boolean;
+    toggleExpanded: () => void;
+    height: number;
+};
+/**
+ * In order to make sure expanded text closes smoothly, we need to ensure it remains wrapping
+ * for the duration of the animation.
+ */
+export declare const useWrapTextStyle: (expanded: boolean) => {
+    className: string;
+};
+export {};

package/dist/types/src/components/categories-text/utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/common/typography.d.ts

@@ -6,10 +6,12 @@ type TFontProps = {
     strokeColor?: string;
     wrap?: boolean;
     allowSelect?: boolean;
+    link?: boolean;
 };
 export declare const fontStyle: import("styled-components").RuleSet<TFontProps>;
-export declare const textwrapStyle: import("styled-components").RuleSet<object>;
-export declare const Text: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, TFontProps>>;
+export declare const Text: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+    ref?: ((instance: HTMLParagraphElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLParagraphElement> | null | undefined;
+}>, TFontProps>, TFontProps>>;
 /**
  * Style a substring within a string a different color.
  */

package/dist/types/src/components/common/typography.stories.d.ts

@@ -1,4 +1,5 @@
 import { Story } from '@ladle/react';
 export declare const Default: Story;
 export declare const Bold: Story;
+export declare const Link: Story;
 export declare const DynamicSizing: Story;

package/dist/types/src/components/legacy-metadata-card/utils.d.ts

@@ -0,0 +1,6 @@
+import ReactDOM from 'react-dom/client';
+import { TMetadataCardProps } from './card';
+/**
+ * Imperative API to render the metadata card into a provided container element.
+ */
+export declare const showMetadataCard: (container: Element, props: TMetadataCardProps) => ReactDOM.Root;

package/dist/types/src/components/link-item/index.d.ts

@@ -0,0 +1,10 @@
+type TLinkItemProps = {
+    url: string;
+    name?: string;
+    /**
+     * Optionally override the icon. Defaults to `link-2-16x16`.
+     */
+    icon?: string;
+};
+declare const LinkItem: React.FC<TLinkItemProps>;
+export default LinkItem;

package/dist/types/src/components/link-item/link-item.stories.d.ts

@@ -0,0 +1,2 @@
+import { Story } from '@ladle/react';
+export declare const Default: Story;

package/dist/types/src/components/link-item/utils.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Process link to ensure it has a valid URL and name.
+ */
+export declare const useLinkItem: (url: string, name?: string) => {
+    url: string;
+    name: string;
+} | null;

package/dist/types/src/components/link-item/utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/location-link/index.d.ts

@@ -0,0 +1,5 @@
+type TLocationLinkProps = {
+    onClick: () => void;
+};
+declare const LocationLink: React.FC<TLocationLinkProps>;
+export default LocationLink;

package/dist/types/src/components/location-link/location-link.stories.d.ts

@@ -0,0 +1,2 @@
+import { Story } from '@ladle/react';
+export declare const Default: Story;

package/dist/types/src/components/logo-box/index.d.ts

@@ -0,0 +1,8 @@
+type TLogoBoxProps = {
+    src: string;
+    height?: number;
+    proxy?: boolean;
+    padding?: number;
+};
+declare const LogoBox: React.FC<TLogoBoxProps>;
+export default LogoBox;

package/dist/types/src/components/logo-box/logo-box.stories.d.ts

@@ -0,0 +1,3 @@
+import { Story } from '@ladle/react';
+export declare const Default: Story;
+export declare const NoPadding: Story;

package/dist/types/src/components/socials-item/index.d.ts

@@ -0,0 +1,6 @@
+import { TSocialUrls } from './utils';
+type TSocialsItemProps = {
+    socialUrls: TSocialUrls;
+};
+declare const SocialsItem: React.FC<TSocialsItemProps>;
+export default SocialsItem;

package/dist/types/src/components/socials-item/socials-item.stories.d.ts

@@ -0,0 +1,2 @@
+import { Story } from '@ladle/react';
+export declare const Default: Story;

package/dist/types/src/components/socials-item/utils.d.ts

@@ -0,0 +1,12 @@
+import { TSocials } from '../../lib/types/socials';
+export type TSocialUrls = {
+    [key in TSocials]?: string;
+};
+export declare const SOCIAL_ICONS: {
+    [key in TSocials]: string;
+};
+type TUseSocialsItemProps = {
+    socialUrls: TSocialUrls;
+};
+export declare const useSocialsItem: ({ socialUrls }: TUseSocialsItemProps) => (readonly [string, string])[];
+export {};

package/dist/types/src/components/socials-item/utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/tilt-controls/use-drag-tilt.d.ts

@@ -12,5 +12,6 @@ declare const useDragTilt: ({ onChange }: TUseDragTiltProps) => {
         left: string;
         top: string;
     };
+    isDragging: boolean;
 };
 export default useDragTilt;

package/dist/types/src/index.d.ts

@@ -7,8 +7,8 @@ declare const start: (options: TStartViewerOptions) => void;
  * Start the viewer and try to load a map with some local MVF data.
  */
 declare const startWithLocalData: (options: TStartViewerWithLocalDataOptions) => void;
-export { default as MetadataCard } from './components/metadata-card/card';
-export { showMetadataCard } from './components/metadata-card/utils';
+export { default as MetadataCard } from './components/legacy-metadata-card/card';
+export { showMetadataCard } from './components/legacy-metadata-card/utils';
 export * from './lib/utils/image-utils';
 export { startWithLocalData };
 export default start;

package/dist/types/src/lib/hooks/accessibility.d.ts

@@ -45,6 +45,12 @@ export type TUseKeyboardListControllerOptions<T extends HTMLElement> = Partial<{
      * @default false
      */
     resetActiveItemOnBlur: boolean;
+    /**
+     * Whether the list is controlled with up/down keys or left/right keys.
+     *
+     * @default 'vertical'
+     */
+    direction: 'vertical' | 'horizontal' | 'both';
 }>;
 /**
  * Used to create an accessible list. Call this in an input or other component that

package/dist/types/src/lib/hooks/use-focus.d.ts

@@ -1,6 +1,11 @@
+/**
+ * Indicates when an element is focused. Execute callbacks when focus changes with relation
+ * to the element.
+ */
 declare const useFocus: <T extends HTMLElement>(ref: React.RefObject<T>, options?: Partial<{
     within: boolean;
     onFocus?: () => void;
+    onKeyboardFocus?: () => void;
     onBlur?: () => void;
 }>) => {
     isFocused: boolean;

package/dist/types/src/lib/hooks/use-responsive-size.d.ts

@@ -1,9 +1,12 @@
 /**
- * Respond to the size of an element using a ResizeObserver.
+ * Respond to the size of an element using a ResizeObserver. Width and height default to 0, use
+ * the `initialized` property to determine when the size has been initialized.
  */
 declare const useResponsiveSize: () => {
-    elementRef: (ref: unknown) => void;
+    refFn: (ref: unknown) => void;
+    ref: HTMLElement | null;
     width: number;
     height: number;
+    initialized: boolean;
 };
 export default useResponsiveSize;

package/dist/types/src/lib/types/socials.d.ts

@@ -0,0 +1 @@
+export type TSocials = 'twitter' | 'facebook' | 'instagram' | 'linkedin' | 'tiktok' | 'reddit' | 'pinterest';

package/dist/types/src/lib/utils/image-utils.d.ts

@@ -30,10 +30,12 @@ export declare const approxAveragePixelColor: (src: string, options?: Partial<{
      */
     resolution: number;
 }>) => Promise<string>;
-export type TImageSize = 'xsmall' | 'medium';
 export declare const IMAGE_SIZE: {
-    [key in TImageSize]: number;
+    readonly xsmall: 64;
+    readonly small: 256;
+    readonly medium: 512;
 };
+export type TImageSize = keyof typeof IMAGE_SIZE;
 /**
  * Generate a new URL for an image resized to within a square of the specified dimension.
  */

package/dist/types/src/lib/utils/link-utils.d.ts

@@ -1,2 +1,3 @@
 export declare const openLink: (link: string) => Window | null | undefined;
 export declare const isValidLink: (link: string) => boolean;
+export declare const isValidSocialLink: (social: string, link: string) => boolean;

package/dist/types/src/lib/utils/link-utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/e2e-tests/directions-state.spec.ts

@@ -0,0 +1,74 @@
+import { expect } from '@playwright/test';
+import { testDefaultAndEmbedded } from './test-utils';
+
+testDefaultAndEmbedded(
+	'DIRECTIONS state',
+	async ({ page }) => {
+		await expect(page).toHaveScreenshot();
+	},
+	{
+		params: {
+			location: 's_89fd600b7990d544',
+		},
+		state: '/directions',
+	},
+);
+
+testDefaultAndEmbedded(
+	'DIRECTIONS state: level selector open',
+	async ({ page }) => {
+		await page.locator('#level-selector').first().click();
+		await expect(page).toHaveScreenshot();
+	},
+	{
+		params: {
+			location: 's_89fd600b7990d544',
+		},
+		state: '/directions',
+	},
+);
+
+testDefaultAndEmbedded(
+	'DIRECTIONS state: from selection',
+	async ({ page }) => {
+		await page.waitForTimeout(500);
+		await expect(page).toHaveScreenshot();
+	},
+	{
+		params: {
+			location: 's_89fd600b7990d544',
+			departure: 's_353c086e223c6984',
+		},
+		state: '/directions',
+	},
+);
+
+testDefaultAndEmbedded(
+	'DIRECTIONS state: from dropped pin',
+	async ({ page }) => {
+		await page.waitForTimeout(500);
+		await expect(page).toHaveScreenshot();
+	},
+	{
+		params: {
+			location: 's_89fd600b7990d544',
+			departure: '-29.22599807556308,-51.35458385297357,m_8d8b9669cc38f561',
+		},
+		state: '/directions',
+	},
+);
+
+testDefaultAndEmbedded(
+	'DIRECTIONS state: from nearest entrance',
+	async ({ page }) => {
+		await page.waitForTimeout(500);
+		await expect(page).toHaveScreenshot();
+	},
+	{
+		params: {
+			location: 's_89fd600b7990d544',
+			departure: 'e_1dcf257acc86da27+e_563524d9b2a2e04f+e_a9ce9893f5fbe9c6',
+		},
+		state: '/directions',
+	},
+);

package/e2e-tests/playwright.config.ts

@@ -0,0 +1,77 @@
+import { defineConfig, devices } from '@playwright/test';
+import dotenv from 'dotenv';
+import path from 'path';
+import url from 'url';
+
+// Node.js modules don't have __dirname or __filename
+const __filename = url.fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+dotenv.config({ path: path.resolve(__dirname, '../.env') });
+
+const APP_PORT = process.env.PORT || 5173;
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+	testDir: '.',
+	/* Run tests in files in parallel */
+	fullyParallel: true,
+	/* Fail the build on CI if you accidentally left test.only in the source code. */
+	forbidOnly: !!process.env.CI,
+	/* Retry on CI only */
+	retries: process.env.CI ? 2 : 0,
+	/* Opt out of parallel tests on CI. */
+	workers: process.env.CI ? 1 : undefined,
+	outputDir: '../../../coverage/viewer-playwright',
+	/* Reporter to use. See https://playwright.dev/docs/test-reporters */
+	reporter: [['json', { outputFile: '../../coverage/viewer-playwright/report.json' }]],
+	/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+	use: {
+		/* Base URL to use in actions like `await page.goto('/')`. */
+		// baseURL: 'http://127.0.0.1:3000',
+
+		/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+		trace: 'on-first-retry',
+	},
+
+	/* Road labels are especially flaky, so we allow more pixels to be different */
+	expect: {
+		toHaveScreenshot: { maxDiffPixels: 1000 },
+	},
+
+	/* Configure projects for major browsers */
+	projects: [
+		{
+			name: 'chromium',
+			use: { ...devices['Desktop Chrome'] },
+		},
+
+		{
+			name: 'firefox',
+			use: { ...devices['Desktop Firefox'] },
+		},
+
+		{
+			name: 'webkit',
+			use: { ...devices['Desktop Safari'] },
+		},
+
+		/* Test against mobile viewports. */
+		{
+			name: 'Mobile Chrome',
+			use: { ...devices['Pixel 5'] },
+		},
+		{
+			name: 'Mobile Safari',
+			use: { ...devices['iPhone 12'] },
+		},
+	],
+
+	/* Run your local dev server before starting the tests */
+	webServer: {
+		command: 'pnpm dev:playwright',
+		url: `http://localhost:${APP_PORT}`,
+		reuseExistingServer: !process.env.CI,
+	},
+});