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

package/src/components/common/chart/MetricChartTooltip.tsx

@@ -1,74 +0,0 @@
-import type { RenderTooltipContentData } from '@shopify/polaris-viz';
-
-import { Card, BlockStack, InlineStack, Text } from '@shopify/polaris';
-import { PLACEHOLDER_VALUE } from '@/constants';
-import { MetricPercentage } from '../percent';
-
-export interface MetricChartTooltipProps {
-  data: RenderTooltipContentData;
-  formatValue: (value: number) => string;
-}
-export const MetricChartTooltip: React.FC<MetricChartTooltipProps> = ({ data, formatValue }) => {
-  const { activeIndex } = data;
-  const currentData = data?.dataSeries?.[0]?.data?.[activeIndex] as any;
-  const previousData = data?.dataSeries?.[1]?.data?.[activeIndex] as any;
-
-  const formatPercent = () => {
-    const value = currentData.trend?.value;
-    if (!value) return PLACEHOLDER_VALUE;
-
-    const valueNumber = Number(value.replace(/[%~]/g, ''));
-    if (!Number.isFinite(valueNumber)) return PLACEHOLDER_VALUE;
-
-    if (currentData.trend?.trend === 'negative') {
-      return valueNumber * -1;
-    }
-
-    return valueNumber;
-  };
-
-  return (
-    <div className="w-fit min-w-[175px]">
-      <Card padding={'200'}>
-        <BlockStack gap={'100'}>
-          <Text as="p" variant="bodySm" fontWeight="semibold">
-            {data.formatters?.titleFormatter?.(data.title || '') || data.title}
-          </Text>
-          <BlockStack gap={'100'}>
-            <InlineStack gap={'400'} align="space-between" blockAlign="center">
-              <InlineStack gap={'100'} blockAlign="center">
-                <div className="h-[2px] w-[12px] rounded-[10px] bg-[#4FA9EA]"></div>
-                <Text as="p" variant="bodySm" fontWeight="medium" tone="subdued">
-                  {currentData.tooltipKey}
-                </Text>
-              </InlineStack>
-              <InlineStack blockAlign="center" gap="100">
-                <Text as="span" variant="bodySm" fontWeight="semibold">
-                  {formatValue(currentData.value)}
-                </Text>
-                <MetricPercentage change={formatPercent()} />
-              </InlineStack>
-            </InlineStack>
-
-            <InlineStack gap={'400'} align="space-between" blockAlign="center">
-              <InlineStack gap={'100'} blockAlign="center">
-                <div className="w-[12px] border border-dashed border-[#A1CAE7]" />
-                <Text as="p" variant="bodySm" tone="subdued" fontWeight="medium">
-                  {previousData.tooltipKey}
-                </Text>
-              </InlineStack>
-              <InlineStack blockAlign="center" gap="100">
-                <Text as="span" variant="bodySm" fontWeight="semibold">
-                  {formatValue(previousData.value)}
-                </Text>
-                <div className="opacity-0">
-                  <MetricPercentage change={formatPercent()} />
-                </div>
-              </InlineStack>
-            </InlineStack>
-          </BlockStack>
-        </BlockStack>
-      </Card>
-    </div>
-  );
-};

package/src/components/common/chart/MetricDonutChartSkeleton.tsx

@@ -1,14 +0,0 @@
-import { BlockStack, Card } from '@shopify/polaris';
-import { GChartSkeleton } from './GChartSkeleton';
-import { MetricInfoSkeleton } from './MetricInfoSkeleton';
-
-export const MetricDonutChartSkeleton = () => {
-  return (
-    <Card>
-      <BlockStack gap="400">
-        <MetricInfoSkeleton isShowOneLine />
-        <GChartSkeleton />
-      </BlockStack>
-    </Card>
-  );
-};

package/src/components/common/chart/MetricInfoBlock.tsx

@@ -1,66 +0,0 @@
-import type { TextProps } from '@shopify/polaris';
-import type { ReactElement } from 'react';
-import type { IMetricCardItem } from '../../../types';
-
-import { GTooltipCard } from '@/shared';
-import { BlockStack, Box, Icon, InlineStack, Text } from '@shopify/polaris';
-import { ChevronRightIcon } from '@shopify/polaris-icons';
-import { ANALYTICS_METRIC_TOOLTIP } from '../../../constants';
-import { MetricInfoSkeleton } from './MetricInfoSkeleton';
-import { MetricValueSummary } from './MetricValueSummary';
-
-export interface IProps {
-  item: IMetricCardItem;
-  isHovered: boolean;
-  isLoading?: boolean;
-  hideComparison?: boolean;
-  titleVariant?: TextProps['variant'];
-  titleFontWeight?: TextProps['fontWeight'];
-  isMockData?: boolean;
-  onClickTitle?: (key: string) => void;
-}
-
-export const MetricInfoBlock = ({
-  item,
-  isHovered,
-  isLoading,
-  hideComparison,
-  titleVariant = 'headingMd',
-  titleFontWeight,
-  isMockData,
-  onClickTitle,
-}: IProps): ReactElement => {
-  const { key, title, totalValue } = item;
-  const tooltip = ANALYTICS_METRIC_TOOLTIP[key];
-
-  if (isLoading) return <MetricInfoSkeleton />;
-
-  return (
-    <BlockStack gap="200">
-      <div
-        className={isMockData ? undefined : 'hover:cursor-pointer hover:text-[--p-color-text-link-hover]'}
-        onClick={(e) => {
-          if (isMockData) return;
-          e?.stopPropagation();
-          onClickTitle?.(key);
-        }}
-      >
-        <InlineStack wrap={false}>
-          <Box maxWidth="100%" overflowX="hidden">
-            <GTooltipCard tooltip={tooltip}>
-              <Text as="span" variant={titleVariant} fontWeight={titleFontWeight} truncate>
-                {title}
-              </Text>
-            </GTooltipCard>
-          </Box>
-          {isHovered && !isMockData && (
-            <div className="flex h-[20px] w-[20px] items-center">
-              <Icon source={ChevronRightIcon} tone="inherit" />
-            </div>
-          )}
-        </InlineStack>
-      </div>
-      <MetricValueSummary totalValue={totalValue} hideComparison={hideComparison} />
-    </BlockStack>
-  );
-};

package/src/components/common/chart/MetricInfoSkeleton.tsx

@@ -1,25 +0,0 @@
-import { SkeletonBodyText, BlockStack, Box } from '@shopify/polaris';
-
-export interface MetricInfoSkeletonProps {
-  isShowOneLine?: boolean;
-}
-export const MetricInfoSkeleton: React.FC<MetricInfoSkeletonProps> = ({ isShowOneLine }) => {
-  if (isShowOneLine) {
-    return (
-      <Box width="40%">
-        <SkeletonBodyText lines={1} />
-      </Box>
-    );
-  }
-
-  return (
-    <BlockStack gap="200">
-      <Box width="60%">
-        <SkeletonBodyText lines={1} />
-      </Box>
-      <Box width="40%">
-        <SkeletonBodyText lines={1} />
-      </Box>
-    </BlockStack>
-  );
-};

package/src/components/common/chart/MetricValueSummary.tsx

@@ -1,23 +0,0 @@
-import type { ReactElement } from 'react';
-import type { IMetricControl } from '../../../types';
-
-import { BlockStack, InlineStack, Text } from '@shopify/polaris';
-import { MetricPercentage } from '../percent';
-
-interface IProps {
-  totalValue: IMetricControl;
-  hideComparison?: boolean;
-}
-
-export const MetricValueSummary = ({ totalValue, hideComparison }: IProps): ReactElement => (
-  <BlockStack gap="200">
-    <InlineStack blockAlign="center" gap="200">
-      <InlineStack blockAlign="center" gap="200">
-        <Text as="span" variant="headingSm">
-          {totalValue.value}
-        </Text>
-      </InlineStack>
-      {!hideComparison && <MetricPercentage change={totalValue.change} />}
-    </InlineStack>
-  </BlockStack>
-);

package/src/components/common/chart/index.ts

@@ -1,8 +0,0 @@
-export { GChartSkeleton } from './GChartSkeleton';
-export { MetricChart } from './MetricChart';
-export { MetricChartEmpty } from './MetricChartEmpty';
-export { MetricChartTooltip } from './MetricChartTooltip';
-export { MetricDonutChartSkeleton } from './MetricDonutChartSkeleton';
-export { MetricInfoBlock } from './MetricInfoBlock';
-export { MetricInfoSkeleton } from './MetricInfoSkeleton';
-export { MetricValueSummary } from './MetricValueSummary';

package/src/components/common/icons/DownIcon8px.tsx

@@ -1,14 +0,0 @@
-export const DownIcon8px = () => {
-  return (
-    <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <g clipPath="url(#clip0_18114_1160)">
-        <path d="M1 1L6.5 6.5M6.5 6.5V1.5M6.5 6.5H1.5" stroke="#8A8A8A" strokeWidth="1.5" />
-      </g>
-      <defs>
-        <clipPath id="clip0_18114_1160">
-          <rect width="8" height="8" fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-};

package/src/components/common/icons/UpIcon8px.tsx

@@ -1,14 +0,0 @@
-export const UpIcon8px = () => {
-  return (
-    <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <g clipPath="url(#clip0_18114_1146)">
-        <path d="M1 7L6.5 1.5M6.5 1.5H1.5M6.5 1.5V6.5" stroke="#29845A" strokeWidth="1.5" />
-      </g>
-      <defs>
-        <clipPath id="clip0_18114_1146">
-          <rect width="8" height="8" fill="white" transform="matrix(0 -1 1 0 0 8)" />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-};

package/src/components/common/icons/index.ts

@@ -1,2 +0,0 @@
-export { DownIcon8px } from './DownIcon8px';
-export { UpIcon8px } from './UpIcon8px';

package/src/components/common/percent/MetricPercentage.tsx

@@ -1,42 +0,0 @@
-import { InlineStack, Text } from '@shopify/polaris';
-import { formatPercentage } from '@/utils';
-import { DownIcon8px, UpIcon8px } from '../icons';
-import { TREND_TONE } from '@/constants';
-
-export interface MetricPercentageProps {
-  change: number | string;
-}
-
-export const MetricPercentage: React.FC<MetricPercentageProps> = ({ change }) => {
-  if (typeof change !== 'number') {
-    return <div style={{ height: '2px', width: '11px', backgroundColor: '#8A8A8A' }} />;
-  }
-  return (
-    <div
-      style={{
-        display: 'flex',
-        maxHeight: '20px',
-        width: 'fit-content',
-        alignItems: 'center',
-        gap: '4px',
-        borderRadius: '8px',
-        fontSize: '12px',
-        color: change > 0 ? TREND_TONE.POSITIVE : TREND_TONE.NEUTRAL,
-      }}
-    >
-      {change < 0 && (
-        <InlineStack align="center">
-          <DownIcon8px />
-        </InlineStack>
-      )}
-      {change > 0 && (
-        <InlineStack align="center">
-          <UpIcon8px />
-        </InlineStack>
-      )}
-      <Text as="span" variant="bodyXs" fontWeight="semibold">
-        {formatPercentage(Math.abs(change || 0))}
-      </Text>
-    </div>
-  );
-};

package/src/components/common/percent/index.ts

@@ -1 +0,0 @@
-export { MetricPercentage } from './MetricPercentage';

package/src/components/index.ts

@@ -1,9 +0,0 @@
-export * from './GSelectableMetricChartCard';
-export * from './MetricDonutChartCard';
-export * from './SingleMetricChartCard';
-export * from './AnalyticMode';
-export * from './CurrencySelector';
-export * from './GTimePicker';
-export * from './CardPathAnalysis';
-export * from './OrderAnalytic';
-export * from './GModalOrderJourney';

package/src/constants/analytic-metric-tooltip.tsx

@@ -1,164 +0,0 @@
-import type { GTooltipCardData } from '@/shared';
-
-import { EMetricKey } from '../types/metric';
-
-type IMetricKeyValue = Record<EMetricKey, GTooltipCardData>;
-
-export const ANALYTICS_METRIC_TOOLTIP: IMetricKeyValue = {
-  [EMetricKey.SESSION]: {
-    title: 'Sessions',
-    content: 'A period during which a visitor interacts with your online store',
-  },
-  [EMetricKey.VISITORS]: {
-    title: 'Visitors',
-    content: 'Number of unique individuals who visit your online store',
-  },
-  [EMetricKey.BOUNCE_RATE]: {
-    title: 'Bounce rate',
-    content: 'Percentage of visitors who leave your store after viewing only one page, without interacting further',
-    formula: (
-      <>
-        <span className="formula-variable">Bounce rate</span>
-        <span> = </span>
-        <span className="formula-input">sessions with a pageview</span>
-        <span className="formula-operator"> / </span>
-        <span className="formula-input">total sessions</span>
-      </>
-    ),
-  },
-  [EMetricKey.CTR]: {
-    title: 'Click-through rate',
-    content: 'Percentage of clicks to open new page, compared to the number of times the page was viewed',
-    formula: (
-      <>
-        <span className="formula-variable">Click-through rate</span>
-        <span> = </span>
-        <span className="formula-input">total clicks</span>
-        <span className="formula-operator"> / </span>
-        <span className="formula-input">total pageviews</span>
-      </>
-    ),
-  },
-  [EMetricKey.AVG_TIME_ON_PAGE]: {
-    title: 'Average time on page',
-    content: 'Average duration that visitors spend on a page before clicking to open new page',
-    formula: (
-      <>
-        <span className="formula-variable">Average time on page</span>
-        <span> = </span>
-        <span className="formula-input">total time on page</span>
-        <span className="formula-operator"> / </span>
-        <span className="formula-input">(total pageviews - total exits)</span>
-      </>
-    ),
-  },
-  [EMetricKey.PAGE_VIEWS]: {
-    title: 'Pageviews',
-    content: 'Number of times a page on your online store has been viewed by visitors',
-  },
-  [EMetricKey.RPV]: {
-    title: 'Revenue per visitor',
-    content: 'Average revenue generated from each visitor',
-    formula: (
-      <>
-        <span className="formula-variable">Revenue per visitor</span>
-        <span> = </span>
-        <span className="formula-input">total revenue</span>
-        <span className="formula-operator"> / </span>
-        <span className="formula-input">total visitors</span>
-      </>
-    ),
-  },
-  [EMetricKey.ADDED_TO_CART]: {
-    title: 'Added to cart',
-    content: 'Total number of the event when a customer adds a product to their cart on your online store',
-  },
-  [EMetricKey.REACHED_CHECKOUT]: {
-    title: 'Sessions that reached checkout',
-    content: 'Sessions in your online store in which the checkout page was reached',
-  },
-  [EMetricKey.COMPLETE_CHECKOUT]: {
-    title: 'Sessions that completed checkout',
-    content: 'Sessions in your online store in which a purchase was completed',
-  },
-  [EMetricKey.ORDERS]: {
-    title: 'Orders',
-    content: 'Number of orders that went through this pages',
-  },
-  [EMetricKey.CONVERSION_RATE]: {
-    title: 'Conversion rate',
-    content: 'Percentage of online store sessions that completed an order',
-    formula: (
-      <>
-        <span className="formula-variable">Conversion rate</span>
-        <span> = </span>
-        <span className="formula-input">sessions that completed checkout</span>
-        <span className="formula-operator"> / </span>
-        <span className="formula-input">total sessions</span>
-      </>
-    ),
-  },
-  [EMetricKey.AOV]: {
-    title: 'Average order value',
-    content: 'Average value of orders placed in your online store',
-    formula: (
-      <>
-        <span className="formula-variable">Average order value</span>
-        <span> = </span>
-        <span className="formula-input">total revenue</span>
-        <span className="formula-operator"> / </span>
-        <span className="formula-input">total orders</span>
-      </>
-    ),
-  },
-  [EMetricKey.REVENUE]: {
-    title: 'Revenue',
-    content: 'Total income generated from sales after discounts',
-    formula: (
-      <>
-        <span className="formula-variable">Revenue</span>
-        <span> = </span>
-        <span className="formula-input">gross sales</span>
-        <span className="formula-operator"> - </span>
-        <span className="formula-input">discounts</span>
-      </>
-    ),
-  },
-  [EMetricKey.ADD_TO_CART_RATE]: {
-    title: 'Add to cart rate',
-    content: 'Percentage of sessions in which the customer added item to the cart',
-    formula: (
-      <>
-        <span className="formula-variable">Added to cart rate</span>
-        <span> = </span>
-        <span className="formula-input">sessions with cart additions</span>
-        <span className="formula-operator"> / </span>
-        <span className="formula-input">total sessions</span>
-      </>
-    ),
-  },
-  [EMetricKey.CART_ADDITION]: {
-    title: 'Sessions with cart additions',
-    content: 'Sessions in your online store in which a visitor added item to the cart',
-  },
-  [EMetricKey.VISITOR_ITEMS]: {
-    title: 'Sessions by visitor type',
-    content: '<p>Numbers of new and returning visitors</p>',
-    contentList: [
-      'New visitor: who accesses your store for the first time after GemX installation',
-      'Returning visitor: who comes back to your store after GemX installation',
-    ],
-  },
-  [EMetricKey.DEVICE_ITEMS]: {
-    title: 'Sessions by device type',
-    content: `Sessions in your online store by the visitor's device type`,
-  },
-  [EMetricKey.TRAFFIC_SOURCE_ITEMS]: {
-    title: 'Sessions by traffic source',
-    content: 'Sessions on your page by where visitors come from',
-  },
-  [EMetricKey.PAGE_PATH_ANALYSIS]: {
-    title: 'Journey analysis',
-    content: 'Journey analysis tracks the journey from entry to purchase and shows where visitors leave the store',
-  },
-};

package/src/constants/breakdown-targets.ts

@@ -1,25 +0,0 @@
-import type { IDonutTarget } from '@/types';
-
-import { EDeviceType, ETrafficSourceType, EVisitorType } from '@/types';
-
-export const TARGET_VISITOR: IDonutTarget<EVisitorType>[] = [
-  { value: EVisitorType.NEW, label: 'New' },
-  { value: EVisitorType.RETURNING, label: 'Returning' },
-];
-
-export const TARGET_DEVICES: IDonutTarget<EDeviceType>[] = [
-  { value: EDeviceType.DESKTOP, label: 'Desktop' },
-  { value: EDeviceType.TABLET, label: 'Tablet' },
-  { value: EDeviceType.MOBILE, label: 'Mobile' },
-];
-
-export const TARGET_CHANNEL: IDonutTarget<ETrafficSourceType>[] = [
-  { value: ETrafficSourceType.DIRECT, label: 'Direct' },
-  { value: ETrafficSourceType.EMAIL, label: 'Email' },
-  { value: ETrafficSourceType.REFERRAL, label: 'Referral' },
-  { value: ETrafficSourceType.ORGANIC_SOCIAL, label: 'Organic social' },
-  { value: ETrafficSourceType.ORGANIC_SEARCH, label: 'Organic search' },
-  { value: ETrafficSourceType.PAID_SOCIAL, label: 'Paid social' },
-  { value: ETrafficSourceType.PAID_SEARCH, label: 'Paid search' },
-  { value: ETrafficSourceType.SMS, label: 'SMS' },
-];

package/src/constants/campaign.ts

@@ -1,4 +0,0 @@
-export const CAMPAIGN_BACKGROUND_MAIN: Record<string, string> = {
-  ORIGIN: '#2C7DFF',
-  VARIANT: '#F34A70',
-};

package/src/constants/chart.ts

@@ -1,17 +0,0 @@
-export const DEFAULT_CURRENT_PERIOD_LABEL = 'Current';
-export const DEFAULT_PREVIOUS_PERIOD_LABEL = 'Previous';
-
-export const CHART_MIN_HEIGHT = 228;
-
-export const SERIES_COLORS = {
-  current: 'rgba(64, 176, 230, 1)',
-  comparison: 'rgba(161, 202, 231, 1)',
-  all: ['#2C7DFF', '#F34A70'],
-} as const;
-
-export const TREND_TONE = {
-  POSITIVE: '#007F5F',
-  NEUTRAL: '#4A4A4A',
-} as const;
-
-export const PLACEHOLDER_VALUE = '-';

package/src/constants/currency.ts

@@ -1,3 +0,0 @@
-import type { CurrencyCode } from '@/types';
-
-export const DEFAULT_CURRENCY_ANALYTIC: CurrencyCode = 'USD';

package/src/constants/index.ts

@@ -1,6 +0,0 @@
-export * from './analytic-metric-tooltip';
-export * from './breakdown-targets';
-export * from './campaign';
-export * from './chart';
-export * from './currency';
-export * from './thumbnail';

package/src/constants/thumbnail.ts

@@ -1,3 +0,0 @@
-import THUMB_PRODUCT_DEFAULT from '@/assets/svg/product.svg';
-
-export { THUMB_PRODUCT_DEFAULT };

package/src/core/gemxql/api/index.ts

@@ -1,2 +0,0 @@
-export * from './useCustomGemXQlQuery';
-export * from './useGemxQlNamedQuery';

package/src/core/gemxql/api/useCustomGemXQlQuery.ts

@@ -1,35 +0,0 @@
-import type { QueryKey, UseQueryOptions, UseQueryResult } from '@tanstack/react-query';
-import type { GemxQlQueryResponse, GemxQlQueryVariables } from '../graphql';
-
-import { useQuery } from '@tanstack/react-query';
-import { GemxQlDocument } from '../graphql';
-
-type GemXQlCustomFetcher<TData, TVariables> = (document: string, variables: TVariables) => () => Promise<TData>;
-
-export interface BaseHeaderResponse {
-  'x-cache'?: string;
-  'x-request-id'?: string;
-}
-
-export interface CustomGemXQlResponse extends GemxQlQueryResponse {
-  headers: BaseHeaderResponse;
-}
-
-type GemXQlQueryOptions<TData, TError> = Omit<
-  UseQueryOptions<CustomGemXQlResponse, TError, TData, QueryKey>,
-  'queryKey' | 'queryFn'
->;
-
-export const useCustomGemXQlQuery = <TData = CustomGemXQlResponse, TError = unknown>(
-  variables: GemxQlQueryVariables,
-  fetcher: GemXQlCustomFetcher<CustomGemXQlResponse, GemxQlQueryVariables>,
-  options?: GemXQlQueryOptions<TData, TError>,
-): UseQueryResult<TData, TError> => {
-  return useQuery({
-    queryKey: ['GemXQlCustom', variables],
-    queryFn: fetcher(GemxQlDocument, variables),
-    ...(options as object),
-  } as UseQueryOptions<CustomGemXQlResponse, TError, TData, QueryKey>) as UseQueryResult<TData, TError>;
-};
-
-useCustomGemXQlQuery.getKey = (variables: GemxQlQueryVariables) => ['GemXQlCustom', variables];

package/src/core/gemxql/api/useGemxQlNamedQuery.ts

@@ -1,34 +0,0 @@
-import type { QueryKey, UseQueryOptions, UseQueryResult } from '@tanstack/react-query';
-import type { GemxQlQueryResponse, GemxQlQueryVariables } from '../graphql';
-
-import { useQuery } from '@tanstack/react-query';
-import { GemxQlDocument } from '../graphql';
-
-type GemXQlFetcher<TData, TVariables> = (document: string, variables: TVariables) => () => Promise<TData>;
-
-interface UseGemxQlNamedQueryParams {
-  name: string;
-  variables: GemxQlQueryVariables;
-  fetcher: GemXQlFetcher<GemxQlQueryResponse, GemxQlQueryVariables>;
-}
-
-type GemXQlNamedQueryOptions<TData, TError> = Omit<
-  UseQueryOptions<GemxQlQueryResponse, TError, TData, QueryKey>,
-  'queryKey' | 'queryFn'
->;
-
-export const useGemxQlNamedQuery = <TData = GemxQlQueryResponse, TError = unknown>(
-  { name, variables, fetcher }: UseGemxQlNamedQueryParams,
-  options?: GemXQlNamedQueryOptions<TData, TError>,
-): UseQueryResult<TData, TError> => {
-  const document = GemxQlDocument.replace(/query\s+GemxQL\b/, `query ${name}`);
-
-  return useQuery({
-    queryKey: [name, variables],
-    queryFn: fetcher(document, variables),
-    retry: 0,
-    ...(options as object),
-  } as UseQueryOptions<GemxQlQueryResponse, TError, TData, QueryKey>) as UseQueryResult<TData, TError>;
-};
-
-useGemxQlNamedQuery.getKey = (name: string, variables: GemxQlQueryVariables) => [name, variables];