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

package/src/shared/charts/types/chart.ts

@@ -1,36 +0,0 @@
-import type { DataPoint, DataSeries } from '@shopify/polaris-viz';
-import type { GTooltipCardData } from '@/shared/components';
-import type { IconSource } from '@shopify/polaris';
-
-export type MetricBarChart = { isOrigin: boolean; data: DataPoint };
-
-export interface IPointSecondaryAction {
-  icon?: IconSource;
-  isDeleted?: boolean;
-  onAction?: () => void;
-  disabled?: boolean;
-  loading?: boolean;
-}
-
-export interface GDataPointTooltip {
-  key: string;
-  value: string;
-}
-export interface GDataPointTooltipPrimaryAction {
-  content: string;
-  onClick: (item?: GDataPoint) => void;
-}
-
-export interface GDataPoint extends DataPoint {
-  id?: string;
-  parentID?: string;
-  secondaryActions?: IPointSecondaryAction[];
-  chartTooltip?: GDataPointTooltip[];
-  chartTooltipPrimaryAction?: GDataPointTooltipPrimaryAction;
-  labelTooltip?: GTooltipCardData;
-  title?: string;
-}
-export interface GDataSeries extends DataSeries {
-  data: GDataPoint[];
-  isEmptyData?: boolean;
-}

package/src/shared/charts/types/index.ts

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

package/src/shared/components/GActivatorPopover/GActivatorPopover.tsx

@@ -1,107 +0,0 @@
-import type { BoxProps, IconSource, TextProps } from '@shopify/polaris';
-
-import { Box, InlineGrid, Icon, Text, InlineStack } from '@shopify/polaris';
-import { ChevronDownIcon, ChevronUpIcon } from '@shopify/polaris-icons';
-import { useCallback, useMemo } from 'react';
-import { GClickable } from '../GClickable';
-import { cls } from '@/utils';
-
-interface GActivatorPopoverProps {
-  onClick: () => void;
-  active: boolean;
-  content: string;
-  /**
-   * @param tone
-   *  - @default: `base` when inactive, `subdued` when active
-   *  - Overrides both states when provided
-   * @param variant
-   *  - @default: `bodyMd`
-   */
-  textProps?: Pick<TextProps, 'tone' | 'variant' | 'truncate'>;
-  /**
-   * @param disabled
-   *  - @default: `false`
-   */
-  boxProps?: BoxProps;
-  icon?: IconSource;
-  disabled?: boolean;
-}
-
-export const GActivatorPopover = ({
-  onClick,
-  active,
-  content,
-  textProps,
-  boxProps: customBoxProps,
-  disabled,
-  icon: customIcon,
-}: GActivatorPopoverProps) => {
-  const boxProps = useMemo<BoxProps>(() => {
-    if (disabled) {
-      return {
-        borderColor: 'border-disabled',
-        background: 'bg-surface-disabled',
-        ...customBoxProps,
-      };
-    }
-
-    return {
-      shadow: active ? 'button-inset' : 'button',
-      background: active ? 'bg-fill-active' : 'bg-fill',
-      ...customBoxProps,
-    };
-  }, [active, disabled, customBoxProps]);
-
-  const toneClass = useMemo<string>(() => {
-    if (disabled) {
-      return 'text-[var(--p-color-text-disabled)]';
-    }
-
-    return active ? 'text-[var(--p-color-text-subdued)]' : 'text-[var(--p-color-text)]';
-  }, [active, disabled]);
-
-  const textComponent = useMemo(() => {
-    return (
-      <Text
-        as="span"
-        variant="bodyMd"
-        fontWeight="medium"
-        tone={disabled ? 'inherit' : textProps?.tone}
-        truncate
-        {...(textProps?.variant && { variant: textProps.variant })}
-      >
-        {content}
-      </Text>
-    );
-  }, [content, textProps, disabled]);
-
-  const handleClick = useCallback(() => {
-    if (disabled) return;
-
-    onClick();
-  }, [disabled, onClick]);
-
-  return (
-    <GClickable cursor={disabled ? 'default' : 'pointer'} onClick={handleClick}>
-      <div className={cls(toneClass)}>
-        <Box padding="150" paddingInline="300" paddingInlineEnd="150" borderRadius="200" {...boxProps}>
-          {customIcon && (
-            <InlineStack gap="200" align="center" wrap={false}>
-              <Box>
-                <Icon source={customIcon} />
-              </Box>
-              {textComponent}
-            </InlineStack>
-          )}
-
-          {!customIcon && (
-            <InlineGrid columns="1fr 20px" gap="200" alignItems="center">
-              {textComponent}
-              <Icon source={active ? ChevronUpIcon : ChevronDownIcon} />
-            </InlineGrid>
-          )}
-        </Box>
-      </div>
-    </GClickable>
-  );
-};

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

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

package/src/shared/components/GBlockCenter/GBlockCenter.scss

@@ -1,19 +0,0 @@
-.Polaris-GBlockCenter {
-  --gp-block-center-height: auto;
-  --gp-block-center-align: center;
-  --gp-block-center-inline-align: center;
-  --gp-block-center-overflow-x: unset;
-  --gp-block-center-overflow-y: unset;
-  --gp-block-center-display: block;
-
-  overflow-x: var(--gp-block-center-overflow-x);
-  overflow-y: var(--gp-block-center-overflow-y);
-
-  display: var(--gp-block-center-display);
-  > .Polaris-Box {
-    display: flex;
-    align-items: var(--gp-block-center-align);
-    justify-content: var(--gp-block-center-inline-align);
-    height: var(--gp-block-center-height);
-  }
-}

package/src/shared/components/GBlockCenter/GBlockCenter.tsx

@@ -1,72 +0,0 @@
-import { useMemo, type CSSProperties } from 'react';
-
-import type { BoxProps } from '@shopify/polaris';
-import './GBlockCenter.scss';
-
-import { Box } from '@shopify/polaris';
-
-export type SpaceScale =
-  | '0'
-  | '025'
-  | '050'
-  | '100'
-  | '150'
-  | '200'
-  | '300'
-  | '400'
-  | '500'
-  | '600'
-  | '800'
-  | '1000'
-  | '1200'
-  | '1600'
-  | '2000'
-  | '2400'
-  | '2800'
-  | '3200';
-
-export interface GBlockCenterProps
-  extends Omit<BoxProps, 'insetInlineStart' | 'insetInlineEnd' | 'insetBlockStart' | 'insetBlockEnd'> {
-  height?: string;
-  align?: 'center' | 'start' | 'end';
-  inlineAlign?: 'center' | 'start' | 'end';
-  display?: CSSProperties['display'];
-  insetInlineStart?: SpaceScale;
-  insetInlineEnd?: SpaceScale;
-  insetBlockStart?: SpaceScale;
-  insetBlockEnd?: SpaceScale;
-}
-
-export const GBlockCenter = ({ height, align, inlineAlign, display, ...props }: GBlockCenterProps) => {
-  const stickyStyle = useMemo<CSSProperties>(() => {
-    if (props.position !== 'sticky') return {};
-
-    const style: CSSProperties = {
-      position: 'sticky',
-    };
-    if (props.insetInlineStart) style.insetInlineStart = Number(props.insetInlineStart) * 4;
-    if (props.insetInlineEnd) style.insetInlineEnd = Number(props.insetInlineEnd) * 4;
-    if (props.insetBlockStart) style.insetBlockStart = Number(props.insetBlockStart) * 4;
-    if (props.insetBlockEnd) style.insetBlockEnd = Number(props.insetBlockEnd) * 4;
-    return style;
-  }, [props.position, props.insetInlineStart, props.insetInlineEnd, props.insetBlockStart, props.insetBlockEnd]);
-
-  return (
-    <div
-      className="Polaris-GBlockCenter"
-      style={
-        {
-          ...stickyStyle,
-          '--gp-block-center-height': height,
-          '--gp-block-center-display': display,
-          '--gp-block-center-align': align,
-          '--gp-block-center-inline-align': inlineAlign,
-          '--gp-block-center-overflow-x': props.overflowX,
-          '--gp-block-center-overflow-y': props.overflowY,
-        } as CSSProperties
-      }
-    >
-      <Box {...props} />
-    </div>
-  );
-};

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

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

package/src/shared/components/GBox/GBox.scss

@@ -1,25 +0,0 @@
-.Polaris-Box {
-  &[aria-label='shadow-outset-200'] {
-    box-shadow:
-      0 4px 6px -2px #1a1a1a33,
-      0 -1px #0000002b inset,
-      0px 0 #00000021 inset,
-      0px 0 #00000021 inset;
-  }
-
-  &[aria-label='shadow-drop-outset-100'] {
-    box-shadow: 0px 0px 6px 1px #1a1a1a33;
-  }
-
-  &[aria-label='shadow-top-100'] {
-    box-shadow: 0 -2px 4px -1px #1a1a1a14;
-  }
-
-  &[aria-label='shadow-bottom-100'] {
-    box-shadow: 0 2px 4px -1px #1a1a1a24;
-  }
-
-  &[aria-description='height-full'] {
-    height: 100%;
-  }
-}

package/src/shared/components/GBox/GBox.tsx

@@ -1,15 +0,0 @@
-import type { BoxProps } from '@shopify/polaris';
-
-import { Box } from '@shopify/polaris';
-
-type AriaShadowType = 'shadow-outset-200' | 'shadow-drop-outset-100' | 'shadow-top-100' | 'shadow-bottom-100';
-type AriaHeightType = 'height-full';
-
-export interface GBoxProps extends BoxProps {
-  ariaShadow?: AriaShadowType;
-  ariaHeight?: AriaHeightType;
-}
-
-export const GBox = (props: GBoxProps) => {
-  return <Box {...props} aria-label={props.ariaShadow} aria-description={props.ariaHeight} />;
-};

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

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

package/src/shared/components/GBoxCard/GBoxCard.tsx

@@ -1,27 +0,0 @@
-import type { BoxProps } from '@shopify/polaris';
-
-import { Box } from '@shopify/polaris';
-
-interface GBoxCardProps extends BoxProps {
-  children: React.ReactNode;
-}
-
-export const G_BOX_CARD_DEFAULT_PROPS: Pick<
-  BoxProps,
-  'padding' | 'background' | 'borderRadius' | 'shadow' | 'outlineWidth' | 'outlineColor'
-> = {
-  padding: '400',
-  background: 'bg-fill',
-  borderRadius: '300',
-  shadow: '200',
-  outlineWidth: '0165',
-  outlineColor: 'border-secondary',
-};
-
-export const GBoxCard = ({ children, ...props }: GBoxCardProps) => {
-  return (
-    <Box {...G_BOX_CARD_DEFAULT_PROPS} {...props}>
-      {children}
-    </Box>
-  );
-};

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

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

package/src/shared/components/GButton/GButton.scss

@@ -1,41 +0,0 @@
-.Polaris-GButton {
-  &--fullWidth {
-    width: 100%;
-  }
-
-  &--icon-right {
-    .Polaris-Button {
-      flex-direction: row-reverse;
-      padding-left: 12px;
-      padding-right: 4px;
-    }
-  }
-
-  &--neutral {
-    .Polaris-Button {
-      background-color: #d4d4d4 !important;
-      box-shadow: none !important;
-
-      &:hover {
-        background-color: #c4c4c4 !important;
-      }
-
-      &:active {
-        background-color: #b4b4b4 !important;
-      }
-    }
-  }
-
-  &--dark {
-    display: flex;
-    .Polaris-Button--variantTertiary {
-      --pc-button-icon-fill: var(--p-color-text-inverse) !important;
-      --pc-button-icon-fill_hover: var(--p-color-text-inverse-secondary) !important;
-      --pc-button-icon-fill_active: var(--p-color-text-inverse-secondary) !important;
-      --pc-button-icon-fill_disabled: var(--p-color-text-inverse-secondary) !important;
-
-      color: var(--p-color-text-inverse) !important;
-      background-color: var(--p-color-bg-surface-inverse) !important;
-    }
-  }
-}

package/src/shared/components/GButton/GButton.tsx

@@ -1,73 +0,0 @@
-import type { ButtonProps, LinkProps } from '@shopify/polaris';
-import type { GTooltipProps } from '../GTooltip';
-
-import { Button, Box } from '@shopify/polaris';
-
-import { GTooltip } from '../GTooltip';
-import { cls } from '@/utils';
-
-import './GButton.scss';
-
-export interface GButtonProps extends Omit<ButtonProps, 'variant'> {
-  linkAction?: LinkProps;
-  activatorWrapper?: 'div' | 'span';
-  iconRight?: boolean;
-  stopPropagation?: boolean;
-  tooltip?: GTooltipProps;
-  themeTone?: 'dark' | 'light';
-  /**
-   * Adds padding="100" wrapper to compensate for tertiary variant's -4px margin.
-   * Also applies display="flex" automatically.
-   * Use this when placing tertiary buttons in tight layouts.
-   */
-  inset?: boolean;
-  variant?: ButtonProps['variant'] | 'neutral';
-}
-
-export const GButton: React.FC<GButtonProps> = ({
-  activatorWrapper,
-  children,
-  iconRight,
-  inset,
-  stopPropagation = true,
-  onClick,
-  themeTone = 'light',
-  variant,
-  ...props
-}) => {
-  const Wrapper = activatorWrapper || 'div';
-  const isNeutral = variant === 'neutral';
-  const polarisVariant = isNeutral ? undefined : variant;
-
-  const handleClick = (e: React.MouseEvent) => {
-    stopPropagation && e.stopPropagation();
-    if (props.disabled) return;
-    onClick?.();
-  };
-
-  const button = (
-    <GTooltip activatorWrapper="tooltip-content" {...props.tooltip}>
-      <Wrapper
-        className={cls('Polaris-GButton', {
-          'Polaris-GButton--icon-right': iconRight,
-          'Polaris-GButton--dark': themeTone === 'dark',
-          'Polaris-GButton--neutral': isNeutral,
-          'cursor-default': props.disabled,
-          'Polaris-GButton--fullWidth': props.fullWidth,
-          flex: inset,
-        })}
-        onClick={handleClick}
-      >
-        <Button variant={polarisVariant} {...props}>
-          {children}
-        </Button>
-      </Wrapper>
-    </GTooltip>
-  );
-
-  if (inset) {
-    return <Box padding="100">{button}</Box>;
-  }
-
-  return button;
-};

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

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

package/src/shared/components/GCheckbox/GCheckbox.tsx

@@ -1,176 +0,0 @@
-import type { CheckboxProps, RadioButtonProps } from '@shopify/polaris';
-import type { GTooltipProps } from '@/shared';
-
-import { BlockStack, Box, Checkbox, InlineStack, RadioButton, Text } from '@shopify/polaris';
-import { ChoiceHelpText, GTooltip } from '@/shared';
-import { useEffect, useState } from 'react';
-import { cls } from '@/utils';
-
-// Base interface for common properties
-interface GCheckboxOptionBase {
-  value: string;
-  label: string;
-  selected: boolean;
-  tooltip?: GTooltipProps;
-  description?: string;
-}
-
-export interface GCheckboxSingleOption
-  extends GCheckboxOptionBase,
-    Omit<CheckboxProps, 'value' | 'onChange' | 'label'> {}
-export interface GCheckboxMultipleOption
-  extends GCheckboxOptionBase,
-    Omit<RadioButtonProps, 'value' | 'onChange' | 'label'> {}
-interface GCheckboxSingleProps {
-  multiple?: false;
-  options: GCheckboxSingleOption[];
-  onChange: (value: string) => void;
-  id?: string;
-}
-
-interface GCheckboxMultipleProps {
-  multiple: true;
-  /**
-   * @default false
-   */
-  emptySelected?: boolean;
-  selected?: string[];
-  options: GCheckboxMultipleOption[];
-  onChange: (values: string[]) => void;
-  onChangeSingleValue?: (value: string) => void;
-  id?: string;
-  itemHovered?: string;
-  onHover?: (value?: string) => void;
-  dependentDisabledValues?: Set<string>;
-}
-
-type GCheckboxProps = GCheckboxSingleProps | GCheckboxMultipleProps;
-
-export const GCheckbox = ({ ...props }: GCheckboxProps) => {
-  return props.multiple ? <GCheckboxMultiple {...props} /> : <GCheckboxSingle {...props} />;
-};
-
-export const GCheckboxMultiple = ({
-  options,
-  onChange,
-  onChangeSingleValue,
-  emptySelected,
-  selected,
-  onHover,
-  itemHovered,
-  dependentDisabledValues,
-}: GCheckboxMultipleProps) => {
-  const [settingOptions, setSettingOptions] = useState<string[]>([]);
-
-  const handleChange = (value: string) => {
-    if (onChangeSingleValue) {
-      onChangeSingleValue(value);
-    }
-    const updatedOptions = settingOptions.includes(value)
-      ? settingOptions.filter((item) => item !== value)
-      : [...settingOptions, value];
-
-    setSettingOptions(updatedOptions);
-    onChange(updatedOptions);
-  };
-
-  const handleHover = (value?: string) => {
-    if (!onHover) return;
-
-    onHover(value);
-  };
-
-  useEffect(() => {
-    setSettingOptions(() => {
-      if (selected) {
-        return options.filter((item) => selected.includes(item.value)).map((item) => item.value);
-      }
-
-      return [];
-    });
-  }, [selected, options]);
-
-  return (
-    <BlockStack>
-      {options.map((item) => {
-        const hasForceUnchecked = dependentDisabledValues?.has(item.value);
-        const isOnlyOneSelected = !!emptySelected && settingOptions.length === 1;
-
-        const handleCheckboxClick = () => {
-          if (isOnlyOneSelected) return;
-
-          handleChange(item.value);
-        };
-
-        return (
-          <div
-            key={item.value}
-            className={cls('flex w-full items-center justify-between', {
-              'cursor-not-allowed': isOnlyOneSelected,
-              'cursor-pointer': !isOnlyOneSelected,
-              'bg-surface-hover rounded-lg': itemHovered === item.value,
-            })}
-            onClick={() => {
-              if (isOnlyOneSelected || item.disabled) return;
-
-              handleCheckboxClick();
-            }}
-            onMouseEnter={() => handleHover(item.value)}
-            onMouseLeave={() => handleHover(undefined)}
-          >
-            {isOnlyOneSelected ? (
-              <GTooltip isEnabled={item.tooltip?.isEnabled} {...item.tooltip}>
-                <Box paddingBlock="150" paddingInline="200" width="100%">
-                  <InlineStack blockAlign="center" gap="150">
-                    <Checkbox label={item.label} labelHidden checked={item.selected} disabled />
-                    <Text as="p" variant="bodyMd" tone="subdued">
-                      {item.label}
-                    </Text>
-                  </InlineStack>
-                </Box>
-              </GTooltip>
-            ) : (
-              <Box paddingBlock="150" paddingInline="200" minWidth="0">
-                <InlineStack blockAlign="center" gap="150" wrap={false}>
-                  <Checkbox
-                    label={item.label}
-                    labelHidden
-                    checked={hasForceUnchecked ? false : settingOptions.includes(item.value)}
-                    onChange={handleCheckboxClick}
-                    disabled={item.disabled}
-                  />
-                  <Box minWidth="0">
-                    <Text as="p" variant="bodyMd" truncate tone={hasForceUnchecked ? 'disabled' : 'inherit'}>
-                      {item.label}
-                    </Text>
-                    {item.description && (
-                      <Text as="p" variant="bodySm" tone="disabled" truncate>
-                        {item.description}
-                      </Text>
-                    )}
-                  </Box>
-                </InlineStack>
-              </Box>
-            )}
-          </div>
-        );
-      })}
-    </BlockStack>
-  );
-};
-
-export const GCheckboxSingle = ({ options, onChange }: GCheckboxSingleProps) => {
-  return (
-    <BlockStack gap="300">
-      {options.map((item) => (
-        <RadioButton
-          key={item.value}
-          label={item.label}
-          checked={item.selected}
-          onChange={() => onChange(item.value)}
-          helpText={item.helpText ? <ChoiceHelpText item={item} /> : undefined}
-        />
-      ))}
-    </BlockStack>
-  );
-};

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

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

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

@@ -1,25 +0,0 @@
-import type { GChoiceProps } from './GChoice';
-
-import { Link, Text } from '@shopify/polaris';
-
-export const ChoiceHelpText = ({ item }: { item: GChoiceProps['item'] }) => {
-  return (
-    <Text as="p" variant="bodyMd">
-      {item.description}
-      {item.inlineAction && (
-        <Link
-          monochrome={true}
-          onClick={() => {
-            if (item.inlineAction?.onAction) {
-              item.inlineAction?.onAction();
-            } else {
-              window.open(item.inlineAction?.url, item.inlineAction?.target ?? '_blank');
-            }
-          }}
-        >
-          {item.inlineAction?.content}
-        </Link>
-      )}
-    </Text>
-  );
-};

package/src/shared/components/GChoice/GChoice.scss

@@ -1,14 +0,0 @@
-.Polaris-Choice {
-  padding-top: 0;
-  padding-bottom: 0;
-}
-.Polaris-Choice__Descriptions .Polaris-Choice__HelpText {
-  margin-bottom: 0 !important;
-}
-
-.GChoice-ChoiceBox {
-  cursor: pointer;
-}
-.GChoice-ChoiceBox:hover {
-  background-color: var('--p-color-bg-fill-tertiary');
-}