@levi-gemcommerce/analytics 3.0.1-dev.3 → 3.0.1-dev.4

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

@@ -1,63 +0,0 @@
-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

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

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

@@ -1,44 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

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

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

@@ -1,198 +0,0 @@
-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

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

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

@@ -1,14 +0,0 @@
-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

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

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

@@ -1,16 +0,0 @@
-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

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

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

@@ -1,26 +0,0 @@
-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

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

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

@@ -1,18 +0,0 @@
-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

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

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

@@ -1,80 +0,0 @@
-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

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

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

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

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

@@ -1,69 +0,0 @@
-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

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

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

@@ -1,34 +0,0 @@
-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
-  );
-};