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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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