gantri-components 2.128.0 → 2.129.0-beta.1

package/dist/components/filter-button/filter-button.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ResolutionAwareProp } from '../../types/resolution-aware-prop.type';
 import { ButtonSize } from '../button/button.types';
 export interface FilterButtonProps {

package/dist/components/pills/components/pill/pill.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface PillProps {
     icon?: JSX.Element;
     onSelected?: (value: string | number) => void;

package/dist/components/table/components/selectable-row-checkbox-wrapper/selectable-row-checkbox-wrapper.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface SelectableRowCheckboxWrapperProps {
     Component: JSX.Element;
     index: number;

package/dist/components/table/components/table-draggable-row/table-draggable-row.styles.d.ts

@@ -1,4 +1 @@
-export declare const StyledDraggableRowTr: import("styled-components").StyledComponent<"tr", import("styled-components").DefaultTheme, {
-    reorderEnabled: boolean;
-}, never>;
 export declare const StyledDraggableRowWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/components/table/hooks/use-selectable-table-rows/components/clear-selected-rows/clear-selected-rows.d.ts

@@ -0,0 +1,2 @@
+export declare const dataAttrClearSelected = "data-clear-selected";
+export declare const ClearSelectedRows: () => JSX.Element;

package/dist/components/table/hooks/use-selectable-table-rows/components/clear-selected-rows/clear-selected-rows.styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledPointerFlex: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../../../flex/flex.types").FlexProps & import("react").RefAttributes<import("../../../../../flex/flex.types").FlexProps>>, import("styled-components").DefaultTheme, {}, never>;

package/dist/components/table/hooks/use-selectable-table-rows/components/clear-selected-rows/index.d.ts

@@ -0,0 +1 @@
+export * from './clear-selected-rows';

package/dist/components/table/hooks/use-selectable-table-rows/components/selectable-row-cell/index.d.ts

@@ -0,0 +1 @@
+export * from './selectable-row-cell';

package/dist/components/table/hooks/use-selectable-table-rows/components/selectable-row-cell/selectable-row-cell.d.ts

@@ -0,0 +1,4 @@
+import React, { PropsWithChildren } from 'react';
+import { RowData } from '@tanstack/react-table';
+import { SelectableRowCellProps } from './selectable-row-cell.types';
+export declare const SelectableRowCell: <TData extends RowData<import("../../../..").CustomTData>>(props: React.PropsWithChildren<SelectableRowCellProps<TData>>) => JSX.Element;

package/dist/components/table/hooks/use-selectable-table-rows/components/selectable-row-cell/selectable-row-cell.styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledCheckboxCell: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../../../cell/cell.types").CellProps & import("react").RefAttributes<import("../../../../../cell/cell.types").CellProps>>, import("styled-components").DefaultTheme, {}, never>;

package/dist/components/table/hooks/use-selectable-table-rows/components/selectable-row-cell/selectable-row-cell.types.d.ts

@@ -0,0 +1,6 @@
+import { Row, RowData, Table } from '@tanstack/react-table';
+export interface SelectableRowCellProps<TData extends RowData> {
+    index: number;
+    row: Row<TData>;
+    table: Table<TData>;
+}

package/dist/components/table/hooks/use-selectable-table-rows/components/selectable-table-row-footer/index.d.ts

@@ -0,0 +1 @@
+export * from './selectable-table-row-footer';

package/dist/components/table/hooks/use-selectable-table-rows/components/selectable-table-row-footer/selectable-table-row-footer.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from 'react';
+import { SelectableRowFooterProps } from './selectable-table-row-footer.types';
+export declare const SelectableRowFooter: (props: PropsWithChildren<SelectableRowFooterProps>) => JSX.Element;

package/dist/components/table/hooks/use-selectable-table-rows/components/selectable-table-row-footer/selectable-table-row-footer.types.d.ts

@@ -0,0 +1,3 @@
+export interface SelectableRowFooterProps {
+    index: number;
+}

package/dist/components/table/hooks/use-selectable-table-rows/components/selectable-table-row-header/index.d.ts

@@ -0,0 +1 @@
+export * from './selectable-table-row-header';

package/dist/components/table/hooks/use-selectable-table-rows/components/selectable-table-row-header/selectable-table-row-header.d.ts

@@ -0,0 +1,4 @@
+import React, { PropsWithChildren } from 'react';
+import { RowData } from '@tanstack/react-table';
+import { SelectableRowHeaderProps } from './selectable-table-row-header.types';
+export declare const SelectableRowHeader: <TData extends RowData<import("../../../..").CustomTData>>(props: React.PropsWithChildren<SelectableRowHeaderProps<TData>>) => JSX.Element;

package/dist/components/table/hooks/use-selectable-table-rows/components/selectable-table-row-header/selectable-table-row-header.types.d.ts

@@ -0,0 +1,5 @@
+import { RowData, Table } from '@tanstack/react-table';
+export interface SelectableRowHeaderProps<TData extends RowData> {
+    index: number;
+    table: Table<TData>;
+}

package/dist/components/table/hooks/use-selectable-table-rows/helpers/get-row-range/get-row-range.d.ts

@@ -0,0 +1,3 @@
+import { Row, RowData } from '@tanstack/react-table';
+import { GetRowRangeProps } from './get-row-range.types';
+export declare const getRowRange: <TData extends RowData<import("../../../..").CustomTData>>(props: GetRowRangeProps<TData>) => Row<TData>[];

package/dist/components/table/hooks/use-selectable-table-rows/helpers/get-row-range/get-row-range.types.d.ts

@@ -0,0 +1,6 @@
+import { Row, RowData } from '@tanstack/react-table';
+export interface GetRowRangeProps<TData extends RowData> {
+    currentIndex: number;
+    prevIndex: number;
+    rows: Row<TData>[];
+}

package/dist/components/table/hooks/use-selectable-table-rows/helpers/get-row-range/index.d.ts

@@ -0,0 +1 @@
+export * from './get-row-range';

package/dist/components/table/hooks/use-selectable-table-rows/index.d.ts

@@ -0,0 +1 @@
+export * from './use-selectable-table-rows';

package/dist/components/table/hooks/use-selectable-table-rows/use-selectable-table-rows.constants.d.ts

@@ -0,0 +1,6 @@
+export declare const selectableRowsCheckboxSize = "2rem";
+export declare const dataAttrIsRowSelected = "data-is-row-selected";
+export declare const rowSelectionTypes: {
+    readonly checkboxes: "checkboxes";
+    readonly custom: "custom";
+};

package/dist/components/table/hooks/use-selectable-table-rows/use-selectable-table-rows.d.ts

@@ -0,0 +1,10 @@
+import { RowData } from '@tanstack/react-table';
+export declare const useSelectableTableRows: <TData extends RowData<import("../..").CustomTData>>() => {
+    deselectRows: (rowIds: (string | number)[]) => void;
+    getIsRowSelected: (rowId: number | string) => boolean;
+    getSelectedRowData: (props: {
+        idProperty: keyof TData;
+        records: TData[];
+    }) => (TData | undefined)[];
+    selectRows: (rowIds: (string | number)[]) => void;
+};

package/dist/components/table/hooks/use-selectable-table-rows/use-selectable-table-rows.types.d.ts

@@ -0,0 +1,9 @@
+import { RowData } from '@tanstack/react-table';
+import { rowSelectionTypes } from './use-selectable-table-rows.constants';
+export interface RowSelection<TData extends RowData> {
+    disabled?: boolean;
+    idProperty?: keyof TData;
+    onSelect?: (selectedRecords: TData[]) => void;
+    type: RowSelectionType;
+}
+export type RowSelectionType = typeof rowSelectionTypes[keyof typeof rowSelectionTypes];

package/dist/global/context/index.d.ts

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

package/dist/global/context/translation/index.d.ts

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

package/dist/global/context/translation/translation.context.d.ts

@@ -0,0 +1,11 @@
+import React, { PropsWithChildren } from 'react';
+type TranslationNameSpaceState = string[] | string;
+export declare const defaultTranslationNameSpace: TranslationNameSpaceState;
+export declare const TranslationContext: React.Context<TranslationNameSpaceState>;
+export declare const useTranslationContext: () => {
+    nameSpace: TranslationNameSpaceState;
+};
+export declare const TranslationProvider: (props: React.PropsWithChildren<{
+    nameSpace: TranslationNameSpaceState;
+}>) => React.JSX.Element;
+export {};

package/dist/global/context/translation-name-space/index.d.ts

@@ -0,0 +1 @@
+export * from './translation-name-space.context';

package/dist/global/context/translation-name-space/translation-name-space.context.d.ts

@@ -0,0 +1,11 @@
+import React, { PropsWithChildren } from 'react';
+type TranslationNameSpaceState = string[] | string;
+export declare const defaultTranslationNameSpace: TranslationNameSpaceState;
+export declare const TranslationContext: React.Context<TranslationNameSpaceState>;
+export declare const useTranslationContext: () => {
+    nameSpace: TranslationNameSpaceState;
+};
+export declare const TranslationProvider: (props: React.PropsWithChildren<{
+    nameSpace: TranslationNameSpaceState;
+}>) => React.JSX.Element;
+export {};

package/dist/helpers/generate-skus-functions/generate-sku/__tests__/generate-sku.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/helpers/generate-skus-functions/generate-sku/generate-sku.d.ts

@@ -0,0 +1,30 @@
+import { GenerateSkuProps } from './generate-sku.types';
+/**
+ * Provide a product's selected options and get the configured sku back.
+ *
+ * *`variants` must be input in the same index order they were provided in!*
+ *
+ * @example
+ *
+ * // options as strings
+ * const sku = generateSku({
+ *   color: 'carbon',
+ *   productId: 123456,
+ *   size: 'sm',
+ *   variants: ['chrome_rod_finish', 'white_cord_color'],
+ * });
+ *
+ * // options as code objects
+ * const sku = generateSku({
+ *   color: { code: 'carbon' },
+ *   productId: 123456,
+ *   size: { code: 'sm' },
+ *   variants: [{ code: 'chrome_rod_finish' }, { code: 'white_cord_color' }],
+ * });
+ *
+ * @returns
+ * ```
+ * '123456-sm-carbon-chrome_rod_finish-white_cord_color'
+ * ```
+ */
+export declare const generateSku: (props: GenerateSkuProps) => string;

package/dist/helpers/generate-skus-functions/generate-sku/generate-sku.types.d.ts

@@ -0,0 +1,7 @@
+import { ProductOption } from '../generate-skus.types';
+export interface GenerateSkuProps {
+    color: ProductOption;
+    productId: number;
+    size: ProductOption;
+    variants: ProductOption[] | null | undefined;
+}

package/dist/helpers/generate-skus-functions/generate-sku/index.d.ts

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

package/dist/helpers/generate-skus-functions/generate-skus/__tests__/generate-skus.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/helpers/generate-skus-functions/generate-skus/generate-skus.d.ts

@@ -0,0 +1,41 @@
+import { GenerateSkusProps } from './generate-skus.types';
+/**
+ * Provide all of a product's options and get all possible skus back.
+ *
+ * *`variants` must be input in the same index order they were provided in!*
+ *
+ * @example
+ *
+ * // options as strings
+ * const sku = generateSkus({
+ *   color: ['carbon', 'snow'],
+ *   productId: 123456,
+ *   size: 'sm',
+ *   variants: [
+ *     ['chrome_rod_finish'],
+ *     ['black_cord_color', 'white_cord_color']
+ *   ],
+ * });
+ *
+ * // options as code objects
+ * const sku = generateSkus({
+ *   color: [{ code: 'carbon' }, {code: 'snow'}],
+ *   productId: 123456,
+ *   size: { code: 'sm' },
+ *   variants: [
+ *     [{ code: 'chrome_rod_finish' }],
+ *     [{ code: 'black_cord_color' }, { code: 'white_cord_color' }]
+ *   ],
+ * });
+ *
+ * @returns
+ * ```
+ * [
+ *   '123456-sm-carbon-chrome_rod_finish-black_cord_color',
+ *   '123456-sm-carbon-chrome_rod_finish-white_cord_color',
+ *   '123456-sm-snow-chrome_rod_finish-black_cord_color',
+ *   '123456-sm-snow-chrome_rod_finish-white_cord_color'
+ * ]
+ * ```
+ */
+export declare const generateSkus: (props: GenerateSkusProps) => string[];

package/dist/helpers/generate-skus-functions/generate-skus/generate-skus.types.d.ts

@@ -0,0 +1,7 @@
+import { ProductOption } from '../generate-skus.types';
+export interface GenerateSkusProps {
+    colors: ProductOption[] | null | undefined;
+    productId: number;
+    size: ProductOption;
+    variants: ProductOption[][] | null | undefined;
+}

package/dist/helpers/generate-skus-functions/generate-skus/index.d.ts

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

package/dist/helpers/generate-skus-functions/generate-skus-for-product-id/__tests__/generate-skus-for-product-id.tests.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/helpers/generate-skus-functions/generate-skus-for-product-id/generate-skus-for-product-id.d.ts

@@ -0,0 +1,40 @@
+import { GenerateSkusForProductIdProps } from './generate-skus-for-product-id.types';
+/**
+ * Provide all of a product's options (available colors are automatically configured based on product ID) and get all possible skus back.
+ *
+ * *`variants` must be input in the same index order they were provided in!*
+ *
+ * @example
+ *
+ * // options as strings
+ * const sku = generateSkusForProductId({
+ *   productId: 123456,
+ *   size: 'sm',
+ *   variants: [
+ *     ['chrome_rod_finish'],
+ *     ['black_cord_color', 'white_cord_color']
+ *   ],
+ * });
+ *
+ * // options as code objects
+ * const sku = generateSkusForProductId({
+ *   productId: 123456,
+ *   size: { code: 'sm' },
+ *   variants: [
+ *     [{ code: 'chrome_rod_finish' }],
+ *     [{ code: 'black_cord_color' }, { code: 'white_cord_color' }]
+ *   ],
+ * });
+ *
+ * @returns
+ * ```
+ * [
+ *   '123456-sm-blossompink-chrome_rod_finish-black_cord_color',
+ *   '123456-sm-blossompink-chrome_rod_finish-white_cord_color',
+ *   '123456-sm-canyon-chrome_rod_finish-black_cord_color',
+ *   '123456-sm-canyon-chrome_rod_finish-white_cord_color',
+ *    ...etc
+ * ]
+ * ```
+ */
+export declare const generateSkusForProductId: (props: GenerateSkusForProductIdProps) => string[];

package/dist/helpers/generate-skus-functions/generate-skus-for-product-id/generate-skus-for-product-id.types.d.ts

@@ -0,0 +1,6 @@
+import { ProductOption } from '../generate-skus.types';
+export interface GenerateSkusForProductIdProps {
+    productId: number;
+    size: ProductOption;
+    variants: ProductOption[][] | null | undefined;
+}

package/dist/helpers/generate-skus-functions/generate-skus-for-product-id/index.d.ts

@@ -0,0 +1 @@
+export * from './generate-skus-for-product-id';

package/dist/helpers/generate-skus-functions/generate-skus.types.d.ts

@@ -0,0 +1,14 @@
+export interface VariantOption {
+    code: string;
+    name: string;
+    selections: VariantSelection[];
+}
+interface VariantSelection {
+    code: string;
+    label: string;
+    name: string;
+}
+export type ProductOption = {
+    code: string;
+} | string | null | undefined;
+export {};

package/dist/helpers/generate-skus-functions/get-colors-by-product-id/__tests__/get-colors-by-product-id.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/helpers/generate-skus-functions/get-colors-by-product-id/get-colors-by-product-id.d.ts

@@ -0,0 +1,9 @@
+import { ProductColorCode } from '../../../styles/theme';
+/**
+ * Returns an array of colors that are available for a particular product ID.
+ */
+export declare const getColorsByProductId: (productId: number) => {
+    code: ProductColorCode;
+    hexColor: string;
+    shortColorName: string;
+}[];

package/dist/helpers/generate-skus-functions/get-colors-by-product-id/index.d.ts

@@ -0,0 +1 @@
+export * from './get-colors-by-product-id';

package/dist/helpers/generate-skus-functions/get-sku-selectors/get-sku-selectors.d.ts

@@ -0,0 +1,13 @@
+import { GetSkuSelectorsProps } from './get-sku-selectors.types';
+/**
+ * Provide a sku and the variant options and get all the product option codes back.
+ *
+ * *`variantOptions` must be input in the same index order they were provided in!*
+ */
+export declare const getSkuSelectors: (props: GetSkuSelectorsProps) => {
+    colorCode: string;
+    productId: number;
+    sizeCode: string;
+    variantCodes: string[];
+    variantSelectionCodes: string[][];
+};

package/dist/helpers/generate-skus-functions/get-sku-selectors/get-sku-selectors.types.d.ts

@@ -0,0 +1,5 @@
+import { VariantOption } from '../generate-skus.types';
+export interface GetSkuSelectorsProps {
+    sku: string;
+    variantOptions: VariantOption[][];
+}

package/dist/helpers/generate-skus-functions/get-sku-selectors/index.d.ts

@@ -0,0 +1 @@
+export * from './get-sku-selectors';

package/dist/helpers/generate-skus-functions/helpers/flatten-options/flatten-options.d.ts

@@ -0,0 +1,2 @@
+import { FlattenOptionsProps } from './flatten-options.types';
+export declare const flattenOptions: (props: FlattenOptionsProps) => string[][];

package/dist/helpers/generate-skus-functions/helpers/flatten-options/flatten-options.types.d.ts

@@ -0,0 +1,6 @@
+import { ProductOption } from '../../generate-skus.types';
+export interface FlattenOptionsProps {
+    colors: ProductOption[] | null | undefined;
+    size: ProductOption;
+    variants: ProductOption[][] | null | undefined;
+}

package/dist/helpers/generate-skus-functions/helpers/flatten-options/index.d.ts

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

package/dist/helpers/generate-skus-functions/helpers/generate-skus-from-options/generate-skus-from-options.d.ts

@@ -0,0 +1,2 @@
+import { GenerateSkusFromOptionsProps } from './generate-skus-from-options.types';
+export declare const generateSkusFromOptions: (props: GenerateSkusFromOptionsProps) => string[];

package/dist/helpers/generate-skus-functions/helpers/generate-skus-from-options/generate-skus-from-options.types.d.ts

@@ -0,0 +1,5 @@
+export interface GenerateSkusFromOptionsProps {
+    loopNum?: number;
+    options: string[][];
+    partialSkus: string[];
+}

package/dist/helpers/generate-skus-functions/helpers/generate-skus-from-options/index.d.ts

@@ -0,0 +1 @@
+export * from './generate-skus-from-options';

package/dist/helpers/generate-skus-functions/helpers/get-is-color-available-for-product-id/__tests__/get-is-color-available-for-product-id.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/helpers/generate-skus-functions/helpers/get-is-color-available-for-product-id/get-is-color-available-for-product-id.constants.d.ts

@@ -0,0 +1,4 @@
+export declare const momaExclusiveColorsProductIds: number[];
+export declare const momaExclusiveColorCodes: readonly ["cobalt", "poppy"];
+export declare const kobbleExclusiveColorsProductIds: number[];
+export declare const kobbleExclusiveColorCodes: readonly ["glossysnowwhite"];

package/dist/helpers/generate-skus-functions/helpers/get-is-color-available-for-product-id/get-is-color-available-for-product-id.d.ts

@@ -0,0 +1,5 @@
+import { ProductColorCode } from '../../../../styles/theme';
+export declare const getIsColorAvailableForProductId: (props: {
+    colorCode: ProductColorCode;
+    productId: number;
+}) => boolean;

package/dist/helpers/generate-skus-functions/helpers/get-is-color-available-for-product-id/index.d.ts

@@ -0,0 +1 @@
+export * from './get-is-color-available-for-product-id';

package/dist/helpers/generate-skus-functions/helpers/index.d.ts

@@ -0,0 +1,3 @@
+export * from './flatten-options';
+export * from './generate-skus-from-options';
+export * from './get-is-color-available-for-product-id';

package/dist/helpers/generate-skus-functions/index.d.ts

@@ -0,0 +1,5 @@
+export * from './get-colors-by-product-id';
+export * from './generate-sku';
+export * from './generate-skus';
+export * from './generate-skus-for-product-id';
+export * from './get-sku-selectors';

package/dist/helpers/index.d.ts

@@ -1,3 +1,4 @@
 export * from './layout.helpers';
 export * from './get-file-url';
 export * from './get-folder-structure';
+export * from './generate-skus-functions';

package/dist/hooks/index.d.ts

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

package/dist/hooks/use-provider/index.d.ts

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

package/dist/hooks/use-provider/use-provider.d.ts

@@ -0,0 +1,33 @@
+import React, { PropsWithChildren } from 'react';
+import { GenericContextValue } from './use-provider.types';
+export declare const createGenericContext: <Type>(defaultValue: Type) => React.Context<GenericContextValue<Type>>;
+/**
+ * ```
+ * const defaultMyValue = 'foo';
+ *
+ * const MyContext = createGenericContext(defaultMyValue);
+ *
+ * const OuterWrapper = () => {
+ *   const MyProvider = useProvider({
+ *     Context: MyContext,
+ *     defaultValue: defaultMyValue,
+ *   });
+ *
+ *   return (
+ *     <MyProvider>
+ *       <InnerComponent />
+ *     </MyProvider>
+ *   );
+ * }
+ *
+ * const InnerComponent = () => {
+ *   const [myValue, setMyValue] = useContext(MyContext);
+ *
+ *   // ...
+ * }
+ * ```
+ */
+export declare const useProvider: <Type>(props: {
+    Context: React.Context<GenericContextValue<Type>>;
+    defaultValue: Type;
+}) => React.MemoExoticComponent<({ children }: PropsWithChildren<Record<never, never>>) => JSX.Element>;

package/dist/hooks/use-provider/use-provider.types.d.ts

@@ -0,0 +1,2 @@
+import { Dispatch, SetStateAction } from 'react';
+export type GenericContextValue<Type> = [Type, Dispatch<SetStateAction<Type>>];