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

package/src/shared/components/GChoice/GChoice.tsx

@@ -1,165 +0,0 @@
-import type { BoxProps, TextProps } from '@shopify/polaris';
-
-import { BlockStack, Box, Checkbox, InlineStack, RadioButton, Text } from '@shopify/polaris';
-import { ChoiceHelpText } from './ChoiceHelpText';
-import { useMemo } from 'react';
-
-export interface ChoiceOptionItem<T = string> {
-  label: string;
-  value: T;
-  type?: string;
-  description?: string;
-  icon?: React.ReactNode;
-  disabled?: boolean;
-  inlineAction?: {
-    content: string;
-    url?: string;
-    target?: string;
-    onAction?: () => void;
-  };
-  options?: {
-    children?: React.ReactNode;
-    position?: 'left' | 'right';
-  };
-}
-
-export interface StyleByState {
-  box: Pick<
-    BoxProps,
-    'outlineWidth' | 'outlineColor' | 'background' | 'shadow' | 'paddingBlockStart' | 'paddingBlockEnd'
-  >;
-  text: Pick<TextProps, 'fontWeight'>;
-}
-
-export type GChoiceBoxPaddingBase = Pick<
-  BoxProps,
-  | 'padding'
-  | 'paddingBlock'
-  | 'paddingBlockStart'
-  | 'paddingBlockEnd'
-  | 'paddingInline'
-  | 'paddingInlineStart'
-  | 'paddingInlineEnd'
->;
-
-export interface GChoiceProps {
-  item: ChoiceOptionItem;
-  isActive?: boolean;
-  disabled?: boolean;
-  isMultipleSelect?: boolean;
-  /**
-   * @default: { paddingBlockStart: '200', paddingBlockEnd: '200', paddingInlineStart: '400', paddingInlineEnd: '400' }
-   */
-  children?: React.ReactNode;
-  suffix?: React.ReactNode;
-  /**
-   * Position of children in GChoice
-   * @default: 'left'
-   */
-  position?: 'left' | 'right';
-  boxProps?: BoxProps;
-  activeStyle?: StyleByState;
-  onClick?: (value: string, type?: string) => void;
-}
-
-export const GChoice = ({
-  item,
-  disabled,
-  isActive,
-  suffix,
-  isMultipleSelect,
-  onClick,
-  children,
-  position = 'right',
-  boxProps,
-  activeStyle,
-}: GChoiceProps) => {
-  const paddingBox: GChoiceBoxPaddingBase = {
-    paddingBlockStart: '200',
-    paddingBlockEnd: '200',
-    paddingInlineStart: '400',
-    paddingInlineEnd: '400',
-  };
-
-  const emitOnClick = (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (disabled) return;
-
-    onClick?.(item.value, item.type);
-  };
-
-  const styleByState = useMemo<StyleByState>(() => {
-    if (!isActive) {
-      return {
-        box: { outlineWidth: '025', outlineColor: 'border' },
-        text: { fontWeight: 'regular' },
-      };
-    }
-
-    if (activeStyle) return activeStyle;
-
-    return {
-      box: { outlineWidth: '050', outlineColor: 'border-inverse' },
-      text: { fontWeight: 'semibold' },
-    };
-  }, [activeStyle, isActive]);
-
-  const checkBoxComponent = () => {
-    return (
-      <Checkbox
-        label={
-          <InlineStack gap="100">
-            <Text truncate as="p" variant="bodyMd" fontWeight={styleByState.text.fontWeight}>
-              {item.label}
-            </Text>
-          </InlineStack>
-        }
-        disabled={disabled}
-        checked={isActive}
-        name={item.type}
-        {...(item.description && { helpText: <ChoiceHelpText item={item} /> })}
-      />
-    );
-  };
-
-  const radioComponent = () => {
-    return (
-      <RadioButton
-        label={
-          <InlineStack gap="100">
-            <Text truncate as="p" variant="bodyMd" fontWeight={styleByState.text.fontWeight}>
-              {item.label}
-            </Text>
-            {item.icon}
-          </InlineStack>
-        }
-        disabled={disabled}
-        checked={isActive}
-        name={item.type}
-        {...(item.description && { helpText: <ChoiceHelpText item={item} /> })}
-      />
-    );
-  };
-
-  const renderInputComponent = () => {
-    return isMultipleSelect ? checkBoxComponent() : radioComponent();
-  };
-
-  return (
-    <div onClick={(e) => emitOnClick(e)} className={'GChoice-ChoiceBox'}>
-      <Box key={item.value} borderRadius="300" padding={'050'}>
-        <Box {...paddingBox} {...styleByState.box} shadow="100" borderRadius="300" {...boxProps}>
-          <BlockStack gap="0">
-            <InlineStack align="space-between">
-              {position === 'left' && children}
-              {renderInputComponent()}
-              {position === 'right' && children}
-              {suffix}
-            </InlineStack>
-          </BlockStack>
-        </Box>
-      </Box>
-    </div>
-  );
-};

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

@@ -1,2 +0,0 @@
-export * from './GChoice';
-export * from './ChoiceHelpText';

package/src/shared/components/GClickable/GClickable.tsx

@@ -1,43 +0,0 @@
-import { cls } from '@/utils';
-
-interface GClickableProps {
-  children: React.ReactNode;
-  fullWidth?: boolean;
-  cursor?: 'pointer' | 'default' | 'not-allowed';
-  onClick: () => void;
-  onMouseEnter?: () => void;
-  onMouseLeave?: () => void;
-}
-
-export const GClickable = ({
-  children,
-  fullWidth = false,
-  cursor = 'pointer',
-  onClick,
-  onMouseEnter,
-  onMouseLeave,
-}: GClickableProps) => {
-  return (
-    <div
-      role="button"
-      tabIndex={0}
-      className={cls({
-        'w-full': fullWidth,
-        'cursor-pointer': cursor === 'pointer',
-        'cursor-default': cursor === 'default',
-        'cursor-not-allowed': cursor === 'not-allowed',
-      })}
-      onKeyDown={(e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-          e.preventDefault();
-          onClick();
-        }
-      }}
-      onClick={onClick}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
-    >
-      {children}
-    </div>
-  );
-};

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

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

package/src/shared/components/GDiv/GDiv.tsx

@@ -1,27 +0,0 @@
-import type { HTMLAttributes } from 'react';
-
-import { forwardRef, useCallback } from 'react';
-
-interface IProps extends HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-  onClick?: (e?: React.MouseEvent<HTMLDivElement>) => void;
-}
-
-export const GDiv = forwardRef<HTMLDivElement, IProps>(({ children, onClick, ...props }, ref) => {
-  const onKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLDivElement>) => {
-      if (e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault();
-        onClick?.();
-      }
-    },
-    [onClick],
-  );
-
-  return (
-    <div ref={ref} {...props} role="button" tabIndex={0} onKeyDown={onKeyDown} onClick={onClick}>
-      {children}
-    </div>
-  );
-});
-GDiv.displayName = 'GDiv';

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

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

package/src/shared/components/GDotInline/GDotInline.tsx

@@ -1,20 +0,0 @@
-interface GDotInlineProps {
-  tone: 'inherit' | 'disabled';
-}
-
-export const GDotInline = ({ tone }: GDotInlineProps) => {
-  const textColor = getTextColorByTone();
-
-  return <span className={textColor}>•</span>;
-
-  function getTextColorByTone() {
-    switch (tone) {
-      case 'inherit':
-        return 'text-inherit';
-      case 'disabled':
-        return 'text-[#B5B5B5]';
-      default:
-        return 'text-inherit';
-    }
-  }
-};

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

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

package/src/shared/components/GFeatureLocked/GFeatureLocked.tsx

@@ -1,85 +0,0 @@
-import type { BlockStackProps, ButtonProps } from '@shopify/polaris';
-import type { IGFeatureLocked } from './types';
-import { GBox, type GBoxProps } from '../GBox';
-
-import { BlockStack, Box, Button, Icon, Text } from '@shopify/polaris';
-import { G_FEATURE_LOCKED_DATA } from './constants';
-import { LockIcon } from '@shopify/polaris-icons';
-import { useTranslation } from 'react-i18next';
-import { cls } from '@/utils';
-
-interface GFeatureLockedProps {
-  title?: string;
-  description?: string;
-  type: IGFeatureLocked;
-  buttonProps?: Partial<ButtonProps>;
-  inlineAlign?: BlockStackProps['inlineAlign'];
-  boxProps?: GBoxProps;
-  boxContentProps?: GBoxProps;
-}
-
-export const GFeatureLocked = ({
-  title,
-  description,
-  type,
-  buttonProps,
-  boxProps,
-  boxContentProps,
-  inlineAlign = 'center',
-}: GFeatureLockedProps) => {
-  const { t } = useTranslation();
-
-  const data = G_FEATURE_LOCKED_DATA[type];
-  const maxDescriptionWidth = data.maxDescriptionWidth;
-  const backgroundColor = data.backgroundColor;
-  const background = data.background;
-  const aspectRatio = data.aspectRatio;
-  const backdropFilter = data.backdropFilter;
-  const illustration = data.illustration;
-  const gradientBackground = data.gradientBackground;
-
-  return (
-    <GBox overflowX="hidden" {...boxProps}>
-      <div
-        className={cls('rounded-300 flex w-full flex-col items-center', {
-          'justify-end': inlineAlign === 'end',
-          'justify-start': inlineAlign === 'start',
-          'justify-center': inlineAlign === 'center',
-        })}
-        style={{
-          ...(backgroundColor && { backgroundColor }),
-          ...(background && { backgroundImage: `url(${background})` }),
-          ...(aspectRatio && { aspectRatio }),
-          ...(boxProps?.minHeight && { minHeight: boxProps.minHeight }),
-          ...(backdropFilter && { backdropFilter: `blur(${backdropFilter}px)` }),
-        }}
-      >
-        <div style={{ ...(gradientBackground && { backgroundImage: gradientBackground }) }}>
-          <GBox {...boxContentProps}>
-            <BlockStack gap="300" inlineAlign="center">
-              {illustration && <img src={illustration} alt={type} width={148} />}
-
-              <BlockStack gap="200" inlineAlign="center">
-                <Text as="p" variant="headingSm">
-                  {title}
-                </Text>
-
-                <Box maxWidth={maxDescriptionWidth}>
-                  <Text as="p" variant="bodyMd" alignment="center">
-                    {description}
-                  </Text>
-                </Box>
-              </BlockStack>
-
-              {buttonProps && (
-                <Button variant="primary" icon={<Icon source={LockIcon} />} {...buttonProps}>
-                  {buttonProps.children ?? t('See plans')}
-                </Button>
-              )}
-            </BlockStack>
-          </GBox>
-        </div>
-      </div>
-    </GBox>
-  );
-};

package/src/shared/components/GFeatureLocked/constants.ts

@@ -1,33 +0,0 @@
-import EMPTY_CAMPAIGN_GROUP_TEMPLATE_ILLUSTRATION from './assets/images/empty-campaign-group-template-illustration.png';
-import EMPTY_PAGE_LISTING_ILLUSTRATION from './assets/images/empty-page-listing-illustration.png';
-import EMPTY_CAMPAIGN_GROUP_TEMPLATE from './assets/images/empty-campaign-group-template.png';
-import EMPTY_PAGE_LISTING from './assets/images/empty-page-listing.png';
-import EMPTY_ANALYTICS from './assets/images/empty-analytics.png';
-
-import type { IGFeatureLockedData } from './types';
-
-import { IGFeatureLocked } from './types';
-
-export const G_FEATURE_LOCKED_DATA: Record<IGFeatureLocked, IGFeatureLockedData> = {
-  [IGFeatureLocked.CampaignGroupTemplate]: {
-    background: EMPTY_CAMPAIGN_GROUP_TEMPLATE,
-    illustration: EMPTY_CAMPAIGN_GROUP_TEMPLATE_ILLUSTRATION,
-    aspectRatio: 1152 / 521,
-    maxDescriptionWidth: '330px',
-  },
-  [IGFeatureLocked.PageListing]: {
-    background: EMPTY_PAGE_LISTING,
-    illustration: EMPTY_PAGE_LISTING_ILLUSTRATION,
-    aspectRatio: 1157 / 668,
-    maxDescriptionWidth: '365px',
-  },
-  [IGFeatureLocked.Analytics]: {
-    background: EMPTY_ANALYTICS,
-    aspectRatio: 1150 / 573,
-  },
-  [IGFeatureLocked.PathAnalysis]: {
-    backgroundColor: '#FFFFFFCC',
-    backdropFilter: 5,
-    gradientBackground: 'radial-gradient(50% 50% at 50% 50%, #FFFFFF 55.77%, rgba(255, 255, 255, 0) 100%)',
-  },
-};

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

@@ -1,2 +0,0 @@
-export * from './GFeatureLocked';
-export * from './types';

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

@@ -1,16 +0,0 @@
-export enum IGFeatureLocked {
-  CampaignGroupTemplate = 'CampaignGroupTemplate',
-  PageListing = 'PageListing',
-  Analytics = 'Analytics',
-  PathAnalysis = 'PathAnalysis',
-}
-
-export interface IGFeatureLockedData {
-  background?: string;
-  backgroundColor?: string;
-  illustration?: string;
-  aspectRatio?: number;
-  backdropFilter?: number;
-  maxDescriptionWidth?: string;
-  gradientBackground?: string;
-}

package/src/shared/components/GI18NText/GI18NText.tsx

@@ -1,37 +0,0 @@
-import type { IGI18NTextProps } from './types';
-import type { ReactNode } from 'react';
-
-import { Text } from '@shopify/polaris';
-import { Fragment } from 'react';
-
-const TRANSFORMER_REGEX = /\[(\d+)\](.*?)\[\]/g;
-
-export const GI18NText = (props: IGI18NTextProps) => {
-  const { children, transformers } = props;
-
-  if (!transformers || Object.values(transformers).length === 0) {
-    return <Text {...props}>{children}</Text>;
-  }
-
-  const transformContent = (text: string) => {
-    const parts: ReactNode[] = [];
-    let lastIndex = 0;
-
-    text.replace(TRANSFORMER_REGEX, (match, number, childrenContent, offset) => {
-      parts.push(text.slice(lastIndex, offset));
-      const transformerFunction = transformers[number];
-      if (typeof transformerFunction === 'function') {
-        parts.push(transformerFunction(childrenContent));
-      } else {
-        parts.push(match);
-      }
-      lastIndex = offset + match.length;
-      return match;
-    });
-    parts.push(text.slice(lastIndex));
-
-    return parts.map((part, index) => <Fragment key={index}>{part}</Fragment>);
-  };
-
-  return <Text {...props}>{typeof children === 'string' ? transformContent(children) : children}</Text>;
-};

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

@@ -1,2 +0,0 @@
-export * from './GI18NText';
-export * from './types';

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

@@ -1,7 +0,0 @@
-import type { TextProps } from '@shopify/polaris';
-import type { ReactNode } from 'react';
-
-export interface IGI18NTextProps extends TextProps {
-  transformers?: Record<string, (childrenContent: string) => ReactNode>;
-  children: ReactNode;
-}

package/src/shared/components/GInlineCenter/GInlineCenter.scss

@@ -1,17 +0,0 @@
-.Polaris-GInlineCenter {
-  --gp-inline-center-box-align: center;
-  --gp-inline-center-box-inline-align: center;
-  --gp-inline-center-box-gap: 0;
-  --gp-inline-center-box-flex-direction: row;
-  --gp-inline-center-width: auto;
-
-  width: var(--gp-inline-center-width);
-
-  > .Polaris-Box {
-    display: flex;
-    flex-direction: var(--gp-inline-center-box-flex-direction);
-    align-items: var(--gp-inline-center-box-align);
-    justify-content: var(--gp-inline-center-box-inline-align);
-    gap: var(--gp-inline-center-box-gap);
-  }
-}

package/src/shared/components/GInlineCenter/GInlineCenter.tsx

@@ -1,39 +0,0 @@
-import type { SpaceScale } from '../GBlockCenter';
-import type { BoxProps } from '@shopify/polaris';
-import type { CSSProperties } from 'react';
-
-import { Box } from '@shopify/polaris';
-import { useMemo } from 'react';
-
-export interface GInlineCenterProps extends BoxProps {
-  flexDirection?: 'row' | 'column';
-  align?: 'center' | 'start' | 'end';
-  inlineAlign?: 'center' | 'start' | 'end';
-  width?: string;
-  gap?: SpaceScale;
-}
-
-export const GInlineCenter = ({ align, inlineAlign, width, flexDirection, gap, ...props }: GInlineCenterProps) => {
-  const stickyStyle = useMemo<CSSProperties>(() => {
-    const style: CSSProperties = {};
-    return style;
-  }, []);
-
-  return (
-    <div
-      className="Polaris-GInlineCenter"
-      style={
-        {
-          ...stickyStyle,
-          '--gp-inline-center-box-align': align,
-          '--gp-inline-center-box-inline-align': inlineAlign,
-          '--gp-inline-center-box-flex-direction': flexDirection,
-          '--gp-inline-center-box-gap': gap ? `${(Number(gap) * 4) / 100}px` : undefined,
-          '--gp-inline-center-width': width,
-        } as CSSProperties
-      }
-    >
-      <Box {...props} minWidth="0" />
-    </div>
-  );
-};

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

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

package/src/shared/components/GMockDataTooltip/GMockDataTooltip.tsx

@@ -1,30 +0,0 @@
-import type { GTooltipProps } from '../GTooltip';
-
-import { GTooltip } from '../GTooltip';
-import { useTranslation } from 'react-i18next';
-
-export interface GMockDataTooltipProps extends Omit<GTooltipProps, 'isEnabled' | 'content'> {
-  isMockData?: boolean;
-  content?: React.ReactNode | string;
-}
-
-/**
- * Wraps its children with a demo-experiment tooltip when `isMockData` is true.
- * When `isMockData` is false it renders the children untouched.
- *
- * Keeps the demo copy in a single place so it only needs to be edited here.
- */
-export const GMockDataTooltip = ({ isMockData, content, children, ...props }: GMockDataTooltipProps) => {
-  const { t } = useTranslation();
-
-  return (
-    <GTooltip
-      isEnabled={isMockData}
-      content={content ?? t('This is just a demo experiment. Create a real one to view order listing.')}
-      dismissOnMouseOut
-      {...props}
-    >
-      {children}
-    </GTooltip>
-  );
-};

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

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

package/src/shared/components/GModal/GModal.tsx

@@ -1,49 +0,0 @@
-import type { ModalProps } from '@shopify/polaris';
-
-import { BlockStack, Box, Button, Modal } from '@shopify/polaris';
-import { useWindowSize } from '@/hooks';
-
-export interface GModalProps extends Omit<ModalProps, 'title'> {
-  title: string | React.ReactNode;
-  id?: string;
-  /**
-   * @default 'large'
-   */
-  size?: ModalProps['size'];
-  primaryAction?: ModalProps['primaryAction'] & {
-    variant?: 'primary' | 'breadcrumb' | null;
-  };
-  children: React.ReactNode;
-}
-
-export const GModal = ({ children, primaryAction, secondaryActions, ...props }: GModalProps) => {
-  const { isMobileView } = useWindowSize();
-
-  const resolvedSecondaryActions = secondaryActions ?? [];
-  const showMobileFooter = isMobileView && (primaryAction || resolvedSecondaryActions.length > 0);
-
-  return (
-    <Modal
-      {...props}
-      size={isMobileView ? 'small' : props.size}
-      primaryAction={showMobileFooter ? undefined : primaryAction}
-      secondaryActions={showMobileFooter ? undefined : secondaryActions}
-    >
-      {children}
-      {showMobileFooter && (
-        <Box padding="400" borderBlockStartWidth="025" borderColor="border-secondary">
-          <BlockStack gap="200">
-            <Button {...primaryAction} onClick={primaryAction?.onAction} variant="primary" fullWidth>
-              {primaryAction?.content ?? 'Save'}
-            </Button>
-            {resolvedSecondaryActions.map((action, index) => (
-              <Button {...action} key={index} fullWidth onClick={action.onAction}>
-                {action.content}
-              </Button>
-            ))}
-          </BlockStack>
-        </Box>
-      )}
-    </Modal>
-  );
-};

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

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