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

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

@@ -1,164 +0,0 @@
-import type { BoxProps } from '@shopify/polaris';
-
-import { BlockStack, Box, InlineStack, List, Popover, Text } from '@shopify/polaris';
-import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
-import { cls } from '@/utils';
-
-type CloseTarget = 'activator' | 'next-node';
-export interface PopoverPublicAPI {
-  forceUpdatePosition(): void;
-  close(target?: CloseTarget): void;
-}
-
-export interface GTooltipCardPublicAPI {
-  onClose(): void;
-}
-
-type Width = 'default' | 'wide' | 'large';
-
-export interface GTooltipCardData {
-  title: string;
-  content: string | TrustedHTML;
-  formula?: React.ReactNode;
-  contentList?: string[];
-  width?: Width;
-}
-
-export interface GTooltipCardProps {
-  children: React.ReactNode;
-  /**
-   * Delay in `ms` before the tooltip is shown
-   * @default 0 (no delay)
-   */
-  delay?: number;
-  tooltip?: GTooltipCardData;
-  activatorProps?: BoxProps;
-  wrapper?: 'span' | 'div';
-  isHideBorder?: boolean;
-  alignment?: 'start' | 'center' | 'end';
-  textDecoration?: 'underline' | 'none';
-  preferredAlignment?: 'left' | 'center' | 'right';
-  popoverRef?: React.RefObject<PopoverPublicAPI>;
-  /** Show arrow pointing to activator. @default false */
-  showArrow?: boolean;
-}
-
-const SIZE_CLASS: Record<Width, string> = {
-  default: 'w-[210px]',
-  wide: 'w-[320px]',
-  large: 'w-[328px]',
-};
-
-const ALIGNMENT_MAP = {
-  start: 'flex justify-start',
-  center: 'flex justify-center',
-  end: 'flex justify-end',
-};
-
-export const GTooltipCard = forwardRef<GTooltipCardPublicAPI, GTooltipCardProps>((props, ref) => {
-  const {
-    tooltip,
-    wrapper = 'div',
-    activatorProps,
-    isHideBorder,
-    alignment,
-    delay = 500,
-    textDecoration = 'none',
-    popoverRef,
-    preferredAlignment = 'left',
-    showArrow = false,
-  } = props;
-  const { width = 'default' } = tooltip ?? {};
-
-  const [isMouseEnter, setIsMouseEnter] = useState(false);
-
-  const TooltipCardWrapper = wrapper;
-
-  const sizeClass = SIZE_CLASS[width];
-
-  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
-
-  const handleMouseEnter = () => {
-    timeoutRef.current = setTimeout(() => {
-      setIsMouseEnter(true);
-    }, delay);
-  };
-
-  const handleMouseLeave = () => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = null;
-    }
-    setIsMouseEnter(false);
-  };
-
-  useImperativeHandle(ref, () => ({ onClose: handleMouseLeave }));
-
-  return (
-    <TooltipCardWrapper
-      className={cls('GTooltipCard cursor-pointer ', alignment && ALIGNMENT_MAP[alignment], {
-        'GTooltipCard--text-underline': textDecoration === 'underline',
-      })}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-    >
-      <Popover
-        ref={popoverRef}
-        activator={
-          !isHideBorder ? (
-            <Box
-              borderBlockEndWidth="025"
-              borderStyle="dashed"
-              borderColor="border-tertiary"
-              as={wrapper}
-              {...activatorProps}
-            >
-              {props.children}
-            </Box>
-          ) : (
-            <InlineStack>{props.children}</InlineStack>
-          )
-        }
-        activatorWrapper={wrapper}
-        onClose={() => {}}
-        active={isMouseEnter}
-        preferredPosition="below"
-        preferredAlignment={preferredAlignment}
-      >
-        {tooltip && (
-          <div className={cls(sizeClass, { 'GTooltipCard-arrow': showArrow })}>
-            <Box padding="400">
-              <BlockStack gap="200">
-                <BlockStack gap="100">
-                  <Text as="span" variant="headingSm" fontWeight="semibold">
-                    {tooltip.title}
-                  </Text>
-                  <BlockStack gap="400">
-                    <Text as="span" variant="bodyMd" tone="subdued" fontWeight="medium">
-                      <span dangerouslySetInnerHTML={{ __html: tooltip.content }}></span>
-                    </Text>
-                    {tooltip.contentList && (
-                      <List type="bullet">
-                        {tooltip.contentList.map((item) => (
-                          <List.Item key={item}>
-                            <Text as="span" variant="bodyMd" tone="subdued" fontWeight="medium">
-                              {item}
-                            </Text>
-                          </List.Item>
-                        ))}
-                      </List>
-                    )}
-                  </BlockStack>
-                </BlockStack>
-
-                {tooltip.formula && <div className="!text-bodySm rounded-md font-mono">{tooltip.formula}</div>}
-              </BlockStack>
-            </Box>
-          </div>
-        )}
-      </Popover>
-    </TooltipCardWrapper>
-  );
-});
-
-GTooltipCard.displayName = 'GTooltipCard';

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

@@ -1,3 +0,0 @@
-export { GTooltip } from './GTooltip';
-export type { GTooltipProps } from './GTooltip';
-export * from './components/GTooltipCard';

package/src/shared/components/GTooltipCard/GTooltipCard.tsx

@@ -1,161 +0,0 @@
-import type { BoxProps } from '@shopify/polaris';
-
-import { BlockStack, Box, InlineStack, List, Popover, Text } from '@shopify/polaris';
-import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
-
-import { cls } from '@/utils/cls';
-
-type CloseTarget = 'activator' | 'next-node';
-export interface PopoverPublicAPI {
-  forceUpdatePosition(): void;
-  close(target?: CloseTarget): void;
-}
-
-export interface GTooltipCardPublicAPI {
-  onClose(): void;
-}
-
-type Width = 'default' | 'wide' | 'large';
-
-export interface GTooltipCardData {
-  title: string;
-  content: string | TrustedHTML;
-  formula?: React.ReactNode;
-  contentList?: string[];
-  width?: Width;
-}
-
-export interface IProps {
-  children: React.ReactNode;
-  delay?: number;
-  tooltip?: GTooltipCardData;
-  activatorProps?: BoxProps;
-  wrapper?: 'span' | 'div';
-  isHideBorder?: boolean;
-  alignment?: 'start' | 'center' | 'end';
-  textDecoration?: 'underline' | 'none';
-  preferredAlignment?: 'left' | 'center' | 'right';
-  popoverRef?: React.RefObject<PopoverPublicAPI>;
-  showArrow?: boolean;
-}
-
-const SIZE_CLASS: Record<Width, string> = {
-  default: 'w-[210px]',
-  wide: 'w-[320px]',
-  large: 'w-[328px]',
-};
-
-const ALIGNMENT_MAP = {
-  start: 'flex justify-start',
-  center: 'flex justify-center',
-  end: 'flex justify-end',
-};
-
-export const GTooltipCard = forwardRef<GTooltipCardPublicAPI, IProps>((props, ref) => {
-  const {
-    tooltip,
-    wrapper = 'div',
-    activatorProps,
-    isHideBorder,
-    alignment,
-    delay = 500,
-    textDecoration = 'none',
-    popoverRef,
-    preferredAlignment = 'left',
-    showArrow = false,
-  } = props;
-  const { width = 'default' } = tooltip ?? {};
-
-  const [isMouseEnter, setIsMouseEnter] = useState(false);
-
-  const TooltipCardWrapper = wrapper;
-  const sizeClass = SIZE_CLASS[width];
-  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  const handleMouseEnter = () => {
-    timeoutRef.current = setTimeout(() => {
-      setIsMouseEnter(true);
-    }, delay);
-  };
-
-  const handleMouseLeave = () => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = null;
-    }
-    setIsMouseEnter(false);
-  };
-
-  useImperativeHandle(ref, () => ({ onClose: handleMouseLeave }));
-
-  return (
-    <TooltipCardWrapper
-      className={cls('GTooltipCard cursor-pointer', alignment && ALIGNMENT_MAP[alignment], {
-        'GTooltipCard--text-underline': textDecoration === 'underline',
-      })}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-    >
-      <Popover
-        ref={popoverRef}
-        activator={
-          !isHideBorder ? (
-            <Box
-              borderBlockEndWidth="025"
-              borderStyle="dashed"
-              borderColor="border-tertiary"
-              as={wrapper}
-              {...activatorProps}
-            >
-              {props.children}
-            </Box>
-          ) : (
-            <InlineStack>{props.children}</InlineStack>
-          )
-        }
-        activatorWrapper={wrapper}
-        onClose={() => {}}
-        active={isMouseEnter}
-        preferredPosition="below"
-        preferredAlignment={preferredAlignment}
-      >
-        {tooltip && (
-          <div className={cls(sizeClass, { 'GTooltipCard-arrow': showArrow })}>
-            <Box padding="400">
-              <BlockStack gap="200">
-                <BlockStack gap="100">
-                  <Text as="span" variant="headingSm" fontWeight="semibold">
-                    {tooltip.title}
-                  </Text>
-                  <BlockStack gap="200">
-                    <Text as="span" variant="bodyMd" tone="subdued" fontWeight="medium">
-                      <span dangerouslySetInnerHTML={{ __html: tooltip.content }}></span>
-                    </Text>
-                    {tooltip.contentList && (
-                      <List type="bullet">
-                        {tooltip.contentList.map((item) => (
-                          <List.Item key={item}>
-                            <Text as="span" variant="bodyMd" tone="subdued" fontWeight="medium">
-                              {item}
-                            </Text>
-                          </List.Item>
-                        ))}
-                      </List>
-                    )}
-                  </BlockStack>
-                </BlockStack>
-                {tooltip.formula && (
-                  <div className="rounded-md font-mono" style={{ fontSize: '12px' }}>
-                    {tooltip.formula}
-                  </div>
-                )}
-              </BlockStack>
-            </Box>
-          </div>
-        )}
-      </Popover>
-    </TooltipCardWrapper>
-  );
-});
-
-GTooltipCard.displayName = 'GTooltipCard';

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

@@ -1,7 +0,0 @@
-export { GTooltipCard } from './GTooltipCard';
-export type {
-  GTooltipCardData,
-  GTooltipCardPublicAPI,
-  IProps as IGTooltipCardProps,
-  PopoverPublicAPI,
-} from './GTooltipCard';

package/src/shared/components/GVariantBadge/GVariant.tsx

@@ -1,55 +0,0 @@
-import { Box } from '@shopify/polaris';
-import { useMemo } from 'react';
-import { cls } from '@/utils';
-
-interface GVariantProps {
-  variant: string;
-  size: 'xs' | 'sm' | 'md' | 'lg';
-  tone?: 'active' | 'subdued' | 'inactive';
-}
-
-export const GVariant = ({ variant, size, tone }: GVariantProps) => {
-  const sizeIcon = useMemo(() => {
-    switch (size) {
-      case 'xs':
-        return '20px';
-      case 'sm':
-        return '24px';
-      case 'md':
-        return '28px';
-      case 'lg':
-        return '32px';
-      default:
-        return '28px';
-    }
-  }, [size]);
-
-  const textColor: string = cls({
-    'text-variant-a': tone === 'active',
-    'text-variant-subdued': tone === 'subdued',
-    'text-variant-b': !tone || tone === 'inactive',
-  });
-
-  const textSize: string = useMemo(() => {
-    switch (size) {
-      case 'xs':
-        return 'Polaris-Text--bodyXs';
-      case 'sm':
-        return 'Polaris-Text--bodySm';
-      case 'md':
-        return 'Polaris-Text--headingMd';
-      case 'lg':
-        return 'Polaris-Text--headingMd';
-      default:
-        return 'Polaris-Text--headingMd';
-    }
-  }, [size]);
-
-  return (
-    <Box minHeight={sizeIcon} minWidth={sizeIcon} width={sizeIcon} borderRadius="full">
-      <div className="Polaris-GVariantBadge-Icon" style={{ height: sizeIcon }}>
-        <h2 className={`Polaris-Text--headingMd Polaris-Text--semibold ${textColor} ${textSize}`}>{variant}</h2>
-      </div>
-    </Box>
-  );
-};

package/src/shared/components/GVariantBadge/GVariantBadge.scss

@@ -1,10 +0,0 @@
-.Polaris-GVariantBadge {
-  &-Icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    .Polaris-Text--root {
-      color: white !important;
-    }
-  }
-}

package/src/shared/components/GVariantBadge/GVariantBadge.tsx

@@ -1,82 +0,0 @@
-import type { LinkProps, TextProps } from '@shopify/polaris';
-import type { GTooltipProps } from '../GTooltip';
-
-import { Badge, Box, Icon, InlineStack, Text } from '@shopify/polaris';
-import { GVariantBadgeTone, GVariantBadgeSize } from './types';
-import { InfoIcon } from '@shopify/polaris-icons';
-import { useTranslation } from 'react-i18next';
-import { GTextLink } from '../GTextLink';
-import { GTooltip } from '../GTooltip';
-import { GVariant } from './GVariant';
-
-export const CAMPAIGN_BACKGROUND = {
-  ORIGIN: '#D5E5FF', //`var(--p-color-${CAMPAIGN_BACKGROUND.ORIGIN})`,
-  VARIANT: '#FDDBE2', //`var(--p-color-${CAMPAIGN_BACKGROUND.VARIANT})`,
-  SUBDUED: '#F2F2F2', //`var(--p-color-${CAMPAIGN_BACKGROUND.VARIANT})`,
-};
-export interface GVariantBadgeProps {
-  variant: string;
-  label?: string;
-  tone?: 'active' | 'subdued' | 'inactive';
-  labelProps?: Partial<TextProps>;
-  /**
-   * @name: size
-   * @type: 'xs' | 'sm' | 'md' | 'lg'
-   * @default: 'md'
-   * @description: 'xs': 20px | 'sm': 24px | 'md': 28px | 'lg': 32px
-   */
-  size?: 'xs' | 'sm' | 'md' | 'lg';
-  isShowWinner?: boolean;
-  linkAction?: LinkProps;
-  tooltip?: GTooltipProps;
-  hideVariant?: boolean;
-}
-export const GVariantBadge = ({
-  label,
-  variant,
-  tone,
-  isShowWinner,
-  size = GVariantBadgeSize.MD,
-  labelProps,
-  linkAction,
-  tooltip,
-  hideVariant = false,
-}: GVariantBadgeProps) => {
-  const { t } = useTranslation();
-
-  const background: string =
-    tone === GVariantBadgeTone.ACTIVE
-      ? CAMPAIGN_BACKGROUND.ORIGIN
-      : tone === GVariantBadgeTone.SUBDUED
-        ? CAMPAIGN_BACKGROUND.SUBDUED
-        : CAMPAIGN_BACKGROUND.VARIANT;
-
-  return (
-    <Box maxWidth="100%">
-      <InlineStack gap="200" blockAlign="center" wrap={false}>
-        {!hideVariant && (
-          <div className="Polaris-GVariantBadge" style={{ backgroundColor: background, borderRadius: '100%' }}>
-            <GVariant variant={variant} size={size} tone={tone} />
-          </div>
-        )}
-        {label && (
-          <GTextLink linkAction={linkAction}>
-            <Text as="h2" variant="headingMd" {...labelProps} truncate>
-              {label}
-            </Text>
-          </GTextLink>
-        )}
-        {tooltip && (
-          <GTooltip {...tooltip}>
-            <Icon source={InfoIcon}></Icon>
-          </GTooltip>
-        )}
-        {isShowWinner && (
-          <Text as="p" variant="bodySm" fontWeight="semibold">
-            <Badge tone="success">{t('Winner')}</Badge>
-          </Text>
-        )}
-      </InlineStack>
-    </Box>
-  );
-};

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

@@ -1,4 +0,0 @@
-export * from './GVariantBadge';
-export * from './GVariant';
-
-export * from './types';

package/src/shared/components/GVariantBadge/types.ts

@@ -1,20 +0,0 @@
-export enum GVariantBadgeType {
-  ORIGIN = 'ORIGIN',
-  VARIANT_B = 'VARIANT_B',
-  VARIANT_C = 'VARIANT_C',
-  VARIANT_D = 'VARIANT_D',
-  VARIANT_E = 'VARIANT_E',
-}
-
-export enum GVariantBadgeSize {
-  XS = 'xs',
-  SM = 'sm',
-  MD = 'md',
-  LG = 'lg',
-}
-
-export enum GVariantBadgeTone {
-  ACTIVE = 'active',
-  SUBDUED = 'subdued',
-  INACTIVE = 'inactive',
-}

package/src/shared/components/GViewBySelector/GViewBySelector.tsx

@@ -1,114 +0,0 @@
-import { Popover, Box, BlockStack, Text, Icon, InlineStack } from '@shopify/polaris';
-import { GActivatorPopover } from '../GActivatorPopover';
-import { CheckIcon } from '@shopify/polaris-icons';
-import { useState, useMemo } from 'react';
-
-export interface GViewBySelectorOption {
-  id: string;
-  title?: string;
-  content: string;
-  helpText: string;
-  icon: string;
-}
-
-export interface GViewBySelectorProps {
-  minWidth?: string;
-  maxWidth?: string;
-  activatorText: string;
-  options: GViewBySelectorOption[];
-  selected?: string;
-  onSelect: (value: string) => void;
-  preferredAlignment?: 'left' | 'right';
-}
-
-export const GViewBySelector: React.FC<GViewBySelectorProps> = ({
-  activatorText,
-  selected,
-  options,
-  minWidth,
-  maxWidth,
-  preferredAlignment = 'right',
-  onSelect,
-}) => {
-  const [popoverActive, setPopoverActive] = useState(false);
-  const [itemHover, setItemHover] = useState<string | null>(null);
-
-  const togglePopoverActive = () => setPopoverActive((prev) => !prev);
-
-  const selectedOption = useMemo(() => {
-    return options.find((item) => item.id === selected);
-  }, [options, selected]);
-
-  const activatorContent = useMemo(() => {
-    if (selectedOption) {
-      const content = selectedOption.title ?? selectedOption.content;
-      return activatorText ? `${activatorText}: ${content}` : content;
-    }
-    return activatorText;
-  }, [selectedOption, activatorText]);
-
-  const handleSelect = (value: string) => {
-    onSelect(value);
-    setPopoverActive(false);
-  };
-
-  return (
-    <Popover
-      active={popoverActive}
-      activator={
-        <GActivatorPopover
-          active={popoverActive}
-          content={activatorContent}
-          textProps={{ variant: 'bodySm' }}
-          onClick={togglePopoverActive}
-        />
-      }
-      autofocusTarget="first-node"
-      fluidContent
-      onClose={togglePopoverActive}
-      preferredAlignment={preferredAlignment}
-    >
-      <Box maxWidth={maxWidth} minWidth={minWidth} padding="200">
-        <BlockStack gap="200">
-          {options.map((option) => {
-            const isSelected = option.id === selected;
-            const isHover = itemHover === option.id;
-            const borderColor = isSelected ? 'input-border' : isHover ? 'border-hover' : 'transparent';
-
-            return (
-              <Box key={option.id} padding="150" borderWidth="025" borderColor={borderColor} borderRadius="100">
-                <div
-                  onClick={() => handleSelect(option.id)}
-                  className="cursor-pointer"
-                  onMouseEnter={() => setItemHover(option.id)}
-                  onMouseLeave={() => setItemHover(null)}
-                >
-                  <InlineStack gap="300" align="space-between" blockAlign="center" wrap={false}>
-                    <InlineStack gap="300" blockAlign="center" wrap={false}>
-                      <div className="bg-surface-secondary flex items-center justify-center rounded-md min-w-[184px] h-[92px]">
-                        <img src={option.icon} alt={option.content} className="w-full h-full object-contain" />
-                      </div>
-                      <BlockStack gap="100">
-                        <Text as="span" variant="bodyMd" fontWeight="semibold">
-                          {option.content}
-                        </Text>
-                        <Text as="p" variant="bodyMd" tone="subdued">
-                          {option.helpText}
-                        </Text>
-                      </BlockStack>
-                    </InlineStack>
-                    {isSelected && (
-                      <Box>
-                        <Icon source={CheckIcon} />
-                      </Box>
-                    )}
-                  </InlineStack>
-                </div>
-              </Box>
-            );
-          })}
-        </BlockStack>
-      </Box>
-    </Popover>
-  );
-};

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

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

package/src/shared/components/index.ts

@@ -1,26 +0,0 @@
-export * from './GActivatorPopover';
-export * from './GBlockCenter';
-export * from './GButton';
-export * from './GCheckbox';
-export * from './GClickable';
-export * from './GDiv';
-export * from './GI18NText';
-export * from './GOptionList';
-export * from './GSelector';
-export * from './GTextLink';
-export * from './GSkeletonDisplayText';
-export * from './GThumbnail';
-export * from './GTooltip';
-export * from './GViewBySelector';
-export * from './GChoice';
-export * from './GBox';
-export * from './GFeatureLocked';
-export * from './GPagination';
-export * from './GInlineCenter';
-export * from './GTextTruncated';
-export * from './GTextTooltip';
-export * from './GBoxCard';
-export * from './GMockDataTooltip';
-export * from './GDotInline';
-export * from './GSpinner';
-export * from './GModal';

package/src/shared/index.ts

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