@levi-gemcommerce/analytics 2.1.0-test.0 → 3.0.1-dev.3

package/src/shared/components/GOptionList/GOptionList.tsx

@@ -0,0 +1,63 @@
+import type React from 'react';
+
+import { BlockStack, Box, Icon, InlineStack } from '@shopify/polaris';
+import { CheckIcon } from '@shopify/polaris-icons';
+
+import { cls } from '@/utils';
+
+export interface GOptionListOption {
+  value: string;
+  label: React.ReactNode;
+}
+
+export interface GOptionListProps {
+  options: GOptionListOption[];
+  selected: string[];
+  onChange: (selected: string[]) => void;
+}
+
+export function GOptionList({ options, selected, onChange }: GOptionListProps) {
+  const handleSelect = (value: string) => {
+    onChange([value]);
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent, value: string) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleSelect(value);
+    }
+  };
+
+  return (
+    <Box padding="150">
+      <BlockStack gap="100">
+        {options.map((option) => {
+          const isSelected = selected.includes(option.value);
+          return (
+            <div
+              key={option.value}
+              role="option"
+              aria-selected={isSelected}
+              tabIndex={0}
+              onClick={() => handleSelect(option.value)}
+              onKeyDown={(e) => handleKeyDown(e, option.value)}
+              className={cls('p-1.5 pl-4 rounded-lg cursor-pointer', {
+                'bg-[#F1F1F1]': isSelected,
+                'hover:bg-[#F1F1F1]': !isSelected,
+              })}
+            >
+              <InlineStack align="space-between" blockAlign="center" wrap={false} gap="200">
+                <Box minWidth="0">{option.label}</Box>
+                {isSelected && (
+                  <Box>
+                    <Icon source={CheckIcon} />
+                  </Box>
+                )}
+              </InlineStack>
+            </div>
+          );
+        })}
+      </BlockStack>
+    </Box>
+  );
+}

package/src/shared/components/GOptionList/index.ts

@@ -0,0 +1 @@
+export * from './GOptionList';

package/src/shared/components/GPagination/GPagination.tsx

@@ -0,0 +1,44 @@
+import type { PaginationProps } from '@shopify/polaris';
+
+import { InlineStack, Pagination, Text } from '@shopify/polaris';
+
+export const DEFAULT_ITEMS_PER_PAGE = 5;
+
+export enum GPaginationDirection {
+  NEXT = 'NEXT',
+  PREVIOUS = 'PREVIOUS',
+}
+export interface GPaginationProps extends Omit<PaginationProps, 'hasPrevious' | 'onPrevious' | 'hasNext' | 'onNext'> {
+  currentPage: number;
+  totalPages: number;
+  loading?: boolean;
+  handlePageChange: (direction: GPaginationDirection) => void;
+}
+export const GPagination: React.FC<GPaginationProps> = ({
+  currentPage,
+  totalPages,
+  loading,
+  handlePageChange,
+  ...paginationProps
+}) => {
+  const hasPrevious = currentPage > 1 && !loading;
+  const hasNext = currentPage < totalPages && !loading;
+
+  return (
+    <InlineStack gap="500" blockAlign="center">
+      <Pagination
+        {...paginationProps}
+        hasPrevious={!loading && hasPrevious}
+        onPrevious={() => handlePageChange(GPaginationDirection.PREVIOUS)}
+        hasNext={!loading && hasNext}
+        onNext={() => handlePageChange(GPaginationDirection.NEXT)}
+      />
+
+      {totalPages > 1 && (
+        <Text as="span" variant="bodyMd" numeric>
+          {currentPage}/{totalPages}
+        </Text>
+      )}
+    </InlineStack>
+  );
+};

package/src/shared/components/GPagination/hooks/useGPagination.ts

@@ -0,0 +1,42 @@
+import { useCallback, useMemo, useState } from 'react';
+import { GPaginationDirection } from '../GPagination';
+import { DEFAULT_ITEMS_PER_PAGE } from '..';
+
+interface IGPaginationProps<T> {
+  data: T[];
+  itemsPerPage?: number;
+  totalCount?: number;
+}
+
+export const useGPagination = <T>(props: IGPaginationProps<T>) => {
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const { data, itemsPerPage = DEFAULT_ITEMS_PER_PAGE } = props;
+
+  const total = typeof props.totalCount === 'number' ? props.totalCount : data.length;
+  const totalPages = useMemo(() => Math.ceil(total / itemsPerPage), [total, itemsPerPage]);
+
+  const paginatedData = useMemo(() => {
+    const startIndex = (currentPage - 1) * itemsPerPage;
+    const endIndex = startIndex + itemsPerPage;
+    return data.slice(startIndex, endIndex);
+  }, [currentPage, data, itemsPerPage]);
+
+  const handlePageChange = (direction: GPaginationDirection) => {
+    setCurrentPage((prevPage) =>
+      direction === GPaginationDirection.NEXT ? Math.min(prevPage + 1, totalPages) : Math.max(prevPage - 1, 1),
+    );
+  };
+
+  const handleResetPagination = useCallback(() => {
+    setCurrentPage(1);
+  }, []);
+
+  return {
+    currentPage,
+    totalPages,
+    paginatedData,
+    handlePageChange,
+    handleResetPagination,
+  };
+};

package/src/shared/components/GPagination/index.ts

@@ -0,0 +1,2 @@
+export * from './GPagination';
+export * from './hooks/useGPagination';

package/src/shared/components/GSelector/GSelector.tsx

@@ -0,0 +1,198 @@
+import type { GCheckboxMultipleOption } from '@/shared';
+import type { ActionListItemDescriptor } from '@shopify/polaris';
+
+import { Button, Popover, ActionList, Icon, Box, BlockStack, InlineStack } from '@shopify/polaris';
+import { useState, useCallback, useMemo } from 'react';
+import { CheckIcon } from '@shopify/polaris-icons';
+import { useTranslation } from 'react-i18next';
+import { GCheckbox } from '@/shared';
+
+export interface GSelectorOption extends ActionListItemDescriptor {
+  id: string;
+}
+
+export interface GSelectorBaseProps {
+  minWidth?: string;
+  maxWidth?: string;
+  activatorText: string;
+  options: GSelectorOption[];
+  preferredAlignment?: 'left' | 'right';
+  emptyLabel?: string;
+  formatActivatorContent?: (text: string[]) => string;
+}
+export interface GSelectorChoiceProps extends GSelectorBaseProps {
+  variant: 'choice';
+  selected?: string[];
+  clearable?: boolean;
+  onSelect: (value: string[]) => void;
+}
+
+export interface GSelectorActionListProps extends GSelectorBaseProps {
+  variant: 'action-list';
+  helpText?: React.ReactNode;
+  selected?: string;
+  onSelect: (value: string) => void;
+}
+
+export type GSelectorProps = GSelectorChoiceProps | GSelectorActionListProps;
+
+const defaultFormatActivatorContent = (text: string[]) => text.join(', ');
+
+export const GSelector: React.FC<GSelectorProps> = (props) => {
+  const [popoverActive, setPopoverActive] = useState(false);
+
+  const {
+    activatorText,
+    selected,
+    options,
+    emptyLabel,
+    preferredAlignment = 'right',
+    formatActivatorContent = defaultFormatActivatorContent,
+  } = props;
+
+  const togglePopoverActive = useCallback(() => setPopoverActive((prev) => !prev), []);
+
+  const selectedOption = useMemo<string[]>(() => {
+    // `choice` variant passes selected as string[]; `action-list` as a single string.
+    const isSelected = (id: string) => (Array.isArray(selected) ? selected.includes(id) : id === selected);
+    return options
+      .filter((item) => item.active || isSelected(item.id))
+      .map((item) => item.content || '')
+      .filter((item) => !!item);
+  }, [options, selected]);
+
+  const activatorContent = useMemo(() => {
+    if (selectedOption.length) {
+      const selected = formatActivatorContent(selectedOption);
+      return activatorText ? `${activatorText}: ${selected}` : selected;
+    }
+
+    if (emptyLabel) {
+      return activatorText ? `${activatorText}: ${emptyLabel}` : emptyLabel;
+    }
+
+    return activatorText;
+  }, [selectedOption, emptyLabel, activatorText, formatActivatorContent]);
+
+  const renderSelectorMarkup = () => {
+    switch (props.variant) {
+      case 'choice':
+        return <GSelectorChoice {...props} setPopoverActive={togglePopoverActive} />;
+      case 'action-list':
+        return <GSelectorActionList {...props} setPopoverActive={togglePopoverActive} />;
+    }
+  };
+
+  return (
+    <Popover
+      active={popoverActive}
+      activator={
+        <div className="flex items-center gap-1">
+          <Button onClick={togglePopoverActive} disclosure={popoverActive ? 'up' : 'down'}>
+            {activatorContent}
+          </Button>
+        </div>
+      }
+      autofocusTarget="first-node"
+      fluidContent
+      onClose={togglePopoverActive}
+      preferredAlignment={preferredAlignment}
+    >
+      {renderSelectorMarkup()}
+    </Popover>
+  );
+};
+
+const GSelectorChoice = ({
+  options,
+  selected,
+  onSelect,
+  maxWidth,
+  minWidth,
+  clearable,
+  setPopoverActive,
+}: GSelectorChoiceProps & { setPopoverActive: (value: boolean) => void }) => {
+  const { t } = useTranslation();
+
+  const items = useMemo((): GCheckboxMultipleOption[] => {
+    if (!options?.length) return [];
+    return options.map((option) => ({
+      value: option.id,
+      label: option.content || '',
+      selected: false,
+    }));
+  }, [options]);
+
+  const handleSelection = useCallback(
+    (value: string[]) => {
+      onSelect(value);
+    },
+    [onSelect],
+  );
+
+  return (
+    <Box maxWidth={maxWidth} minWidth={minWidth} paddingBlock="150">
+      <BlockStack>
+        <BlockStack gap="0">
+          <GCheckbox multiple options={items} selected={selected} onChange={handleSelection} />
+        </BlockStack>
+        {clearable && (
+          <Box paddingBlock="150" paddingInline="200">
+            <InlineStack blockAlign="center" align="start">
+              <Button
+                disabled={!selected?.length}
+                onClick={() => {
+                  handleSelection([]);
+                  setPopoverActive(false);
+                }}
+                variant="plain"
+              >
+                {t('Clear')}
+              </Button>
+            </InlineStack>
+          </Box>
+        )}
+      </BlockStack>
+    </Box>
+  );
+};
+
+const GSelectorActionList = ({
+  options,
+  selected,
+  onSelect,
+  helpText,
+  maxWidth,
+  minWidth,
+  setPopoverActive,
+}: GSelectorActionListProps & { setPopoverActive: (value: boolean) => void }) => {
+  const handleSelection = useCallback(
+    (value: string) => {
+      onSelect(value);
+      setPopoverActive(false);
+    },
+    [onSelect, setPopoverActive],
+  );
+
+  const items = useMemo((): GSelectorOption[] => {
+    if (!options?.length) return [];
+
+    return options.map((option) => ({
+      id: option.id,
+      content: option.content,
+      helpText: option.helpText,
+      onAction: () => handleSelection(option.id),
+      active: option.active || option.id === selected,
+      suffix: (option.active || option.id === selected) && <Icon source={CheckIcon} tone="success" />,
+    }));
+  }, [options, selected, handleSelection]);
+
+  return (
+    <Box maxWidth={maxWidth} minWidth={minWidth}>
+      <BlockStack gap="0">
+        <ActionList actionRole="menuitem" items={items} />
+        {helpText}
+      </BlockStack>
+    </Box>
+  );
+};

package/src/shared/components/GSelector/index.ts

@@ -0,0 +1 @@
+export * from './GSelector';

package/src/shared/components/GSkeletonDisplayText/GSkeletonDisplayText.tsx

@@ -0,0 +1,14 @@
+import { SkeletonDisplayText } from '@shopify/polaris';
+
+export interface GSkeletonDisplayTextProps {
+  height?: `${number}ch` | `${number}%` | `${number}px`;
+}
+export const GSkeletonDisplayText: React.FC<GSkeletonDisplayTextProps> = (props) => {
+  const height = props.height ?? '50px';
+  return (
+    <div className="Polaris-GSkeletonDisplayText">
+      <style>{`.Polaris-GSkeletonDisplayText .Polaris-SkeletonDisplayText__DisplayText { height: ${height} !important; }`}</style>
+      <SkeletonDisplayText maxWidth="100%" size="extraLarge" />
+    </div>
+  );
+};

package/src/shared/components/GSkeletonDisplayText/index.ts

@@ -0,0 +1 @@
+export * from './GSkeletonDisplayText';

package/src/shared/components/GSpinner/GSpinner.tsx

@@ -0,0 +1,16 @@
+import type { SpinnerProps } from '@shopify/polaris';
+
+import { Spinner } from '@shopify/polaris';
+import { cls } from '@/utils';
+
+export interface GSpinnerProps extends SpinnerProps {
+  tone?: 'subdued';
+}
+
+export const GSpinner = (props: GSpinnerProps) => {
+  return (
+    <div className={cls('Polaris-GSpinner', props.tone ? `Polaris-GSpinner--${props.tone}` : undefined)}>
+      <Spinner {...props} />
+    </div>
+  );
+};

package/src/shared/components/GSpinner/index.ts

@@ -0,0 +1 @@
+export * from './GSpinner';

package/src/shared/components/GTextLink/GTextLink.tsx

@@ -0,0 +1,26 @@
+import type { LinkProps } from '@shopify/polaris';
+import type { ReactNode } from 'react';
+
+import { Link } from '@shopify/polaris';
+import { cls } from '@/utils';
+
+export interface GTextLinkProps {
+  children: ReactNode;
+  linkAction?: LinkProps;
+  isDisabled?: boolean;
+  disabledFocus?: boolean;
+}
+
+export const GTextLink = ({ linkAction, isDisabled, disabledFocus, children }: GTextLinkProps) => {
+  if (!linkAction || isDisabled) {
+    return <>{children}</>;
+  }
+
+  return (
+    <span className={cls('GTextLink', { 'GTextLink--disabled-focus': disabledFocus })}>
+      <Link {...linkAction}>
+        <>{children}</>
+      </Link>
+    </span>
+  );
+};

package/src/shared/components/GTextLink/index.ts

@@ -0,0 +1 @@
+export * from './GTextLink';

package/src/shared/components/GTextTooltip/GTextTooltip.tsx

@@ -0,0 +1,18 @@
+import { Box, Text, type TextProps } from '@shopify/polaris';
+import type { GTooltipProps } from '../GTooltip';
+
+import { GTooltip } from '../GTooltip';
+
+export interface GTextTooltipProps extends TextProps {
+  tooltipProps?: GTooltipProps;
+}
+
+export const GTextTooltip = ({ tooltipProps, ...textProps }: GTextTooltipProps) => {
+  return (
+    <GTooltip {...tooltipProps}>
+      <Box borderBlockEndWidth="025" borderStyle="dashed" borderColor="border-tertiary">
+        <Text {...textProps}></Text>
+      </Box>
+    </GTooltip>
+  );
+};

package/src/shared/components/GTextTooltip/index.ts

@@ -0,0 +1 @@
+export * from './GTextTooltip';

package/src/shared/components/GTextTruncated/GTextTruncated.tsx

@@ -0,0 +1,80 @@
+import type { TextProps } from '@shopify/polaris';
+import type { GTooltipProps } from '../GTooltip';
+
+import { Text, Tooltip } from '@shopify/polaris';
+import { useEffect, useState } from 'react';
+import { GTooltip } from '../GTooltip';
+import { useResizeObserver } from '@/shared/charts/components/GPolarisViz/hooks';
+
+export interface GTruncatedTextProps extends Omit<TextProps, 'truncate'> {
+  children: string;
+  truncate?: boolean;
+  tooltip?: GTooltipProps;
+  useWrapper?: boolean;
+}
+
+export const GTextTruncated: React.FC<GTruncatedTextProps> = ({
+  children,
+  truncate = true,
+  tooltip,
+  useWrapper = false,
+  ...textProps
+}) => {
+  const { ref, setRef, entry } = useResizeObserver<HTMLDivElement>();
+  const [isTruncated, setIsTruncated] = useState(false);
+
+  const { content: tooltipContentProp, ...tooltipProps } = tooltip ?? {};
+
+  useEffect(() => {
+    const element = ref?.firstElementChild as HTMLElement | null;
+    if (!element) return;
+
+    const checkTruncation = () => {
+      setIsTruncated(element.scrollWidth > element.clientWidth);
+    };
+
+    checkTruncation();
+  }, [entry, children, ref]);
+
+  const tooltipContent = (() => {
+    const textTooltip = tooltipContentProp;
+
+    if (!isTruncated && !textTooltip) return null;
+    if (isTruncated && textTooltip) return `${children}, ${textTooltip}`;
+    return textTooltip ?? children;
+  })();
+
+  const textNode = (
+    <Wrapper useWrapper={useWrapper}>
+      <div ref={setRef}>
+        <Text {...textProps} truncate={truncate}>
+          {children}
+        </Text>
+      </div>
+    </Wrapper>
+  );
+
+  // Always render Tooltip wrapper to keep DOM structure stable.
+  // Toggling between wrapped/unwrapped causes layout shifts that
+  // re-trigger ResizeObserver, creating a blink loop.
+  const hasExplicitTooltip = !!tooltipContentProp;
+
+  if (hasExplicitTooltip) {
+    return (
+      <GTooltip content={tooltipContent ?? ''} isEnabled={!!tooltipContent} {...tooltipProps}>
+        {textNode}
+      </GTooltip>
+    );
+  }
+
+  return (
+    <Tooltip width="wide" content={tooltipContent ?? children} active={isTruncated ? undefined : false}>
+      {textNode}
+    </Tooltip>
+  );
+};
+
+const Wrapper = ({ children, useWrapper }: { children: React.ReactNode; useWrapper: boolean }) => {
+  if (!useWrapper) return children;
+  return <div className="w-full min-w-0">{children}</div>;
+};

package/src/shared/components/GTextTruncated/index.ts

@@ -0,0 +1 @@
+export * from './GTextTruncated';

package/src/shared/components/GThumbnail/GThumbnail.scss

@@ -0,0 +1,5 @@
+.Polaris-GThumbnail {
+  &--filter {
+    filter: grayscale(var(--gp-grayscale-percentage));
+  }
+}

package/src/shared/components/GThumbnail/GThumbnail.tsx

@@ -0,0 +1,69 @@
+import type { ThumbnailProps } from '@shopify/polaris';
+
+import { cls } from '@/utils';
+
+export interface GThumbnailProps extends ThumbnailProps {
+  defaultSource?: string;
+  width?: string;
+  height?: string;
+  classRemoved?: boolean;
+  isInactive?: boolean;
+  /**
+   * @description Filter to apply grayscale to the image
+   */
+  grayscale?: `${number}%`;
+}
+
+/**
+ * Helper function to generate a variation class name.
+ * @param name - Base name of the class.
+ * @param value - Variation value to append.
+ * @returns Combined class name.
+ */
+export function variationName(name: string, value: string): string {
+  return `${name}${value.charAt(0).toUpperCase()}${value.slice(1)}`;
+}
+
+/**
+ * Custom Thumbnail component with error handling and dynamic sizing.
+ * @param props - Component properties including source, alt text, size, defaultSource, width, and height.
+ * @returns JSX Element.
+ */
+import { THUMB_PRODUCT_DEFAULT } from '@/constants/thumbnail';
+
+export const GThumbnail = ({
+  source,
+  alt,
+  size,
+  grayscale,
+  defaultSource = THUMB_PRODUCT_DEFAULT,
+  width = '80',
+  height = '80',
+  classRemoved = false,
+}: GThumbnailProps) => {
+  const sizeClass = size && variationName('Polaris-Thumbnail--size', size);
+  const filterClass = grayscale && 'Polaris-GThumbnail--filter';
+  const className = cls('Polaris-Thumbnail', sizeClass);
+
+  const thumbnail = (
+    <img
+      onError={(e) => {
+        e.currentTarget.src = defaultSource;
+      }}
+      alt={alt ?? 'Thumbnail'}
+      src={`${source ?? defaultSource}`}
+      width={width}
+      height={height}
+      style={
+        {
+          '--gp-grayscale-percentage': grayscale || '100%',
+        } as React.CSSProperties
+      }
+      className={cls('Polaris-GThumbnail', filterClass)}
+    />
+  );
+
+  if (classRemoved) return thumbnail;
+
+  return <span className={className}>{thumbnail}</span>;
+};

package/src/shared/components/GThumbnail/index.ts

@@ -0,0 +1 @@
+export * from './GThumbnail';

package/src/shared/components/GTooltip/GTooltip.tsx

@@ -0,0 +1,34 @@
+import type { TooltipProps } from '@shopify/polaris';
+
+import { Tooltip } from '@shopify/polaris';
+
+export interface GTooltipProps extends Omit<TooltipProps, 'content'> {
+  /**
+   * @default true
+   */
+  isEnabled?: boolean;
+  content?: React.ReactNode | string;
+  /**
+   * - large: 285px
+   * - extra-large: 340px
+   * - double-extra-large: 360px
+   * @param maxWidth 'large' | 'extra-large' | 'double-extra-large'
+   * @default undefined
+   */
+  maxWidth?: 'large' | 'extra-large' | 'double-extra-large';
+  activatorWrapper?: 'tooltip-content' | 'g-tooltip-card' | string;
+  /**
+   * @default 500ms
+   */
+  hoverDelay?: number;
+}
+
+export const GTooltip = ({ isEnabled = true, content, maxWidth, ...props }: GTooltipProps): React.ReactNode => {
+  const hasContent = isEnabled && !!content;
+
+  return hasContent ? (
+    <Tooltip width="wide" hoverDelay={500} content={content} {...props} accessibilityLabel={maxWidth?.toString()} />
+  ) : (
+    props.children
+  );
+};