@wlloyalty/wll-react-sdk 1.0.1

package/dist/index.js.LICENSE.txt

@@ -0,0 +1,8 @@
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
+
+/**
+ * @license lucide-react v0.427.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */

package/dist/types/common.d.ts

@@ -0,0 +1,2 @@
+import { ImageProps } from 'react-native';
+export type ImagePropsNoSource = Omit<ImageProps, 'source'>;

package/dist/types/section.d.ts

@@ -0,0 +1,19 @@
+import { Tile } from './tile';
+export declare enum SectionType {
+    Grid = "GRID",
+    Banner = "BANNER"
+}
+export type Section = {
+    id: string;
+    type: SectionType;
+    createdAt: string;
+    updatedAt: string;
+    title?: string;
+    description?: string;
+    tiles: Tile[];
+    pointsMultiplier?: number;
+    pointsPrefix?: string | null;
+    pointsSuffix?: string | null;
+    priority: number;
+    active: boolean;
+};

package/dist/types/theme.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+import { sizes } from '../utils/styling';
+import { DerivedColors } from '../utils/themeHelpers';
+export type BaseThemeObject = {
+    accent: string;
+    background: string;
+    errorPrimary: string;
+    negative: string;
+    pageButtonBackground: string;
+    pageButtonText: string;
+    positive: string;
+    primary: string;
+    surface: string;
+    surfaceText: string;
+    text: string;
+};
+export type DerivedProperties = {
+    accentText: string;
+    derivedBackground: string;
+    primaryText: string;
+    positiveText: string;
+    negativeText: string;
+    derivedSurfaceText: DerivedColors;
+    derivedSurface: DerivedColors;
+    alphaDerivedPrimary: DerivedColors;
+};
+export type ThemeObject = BaseThemeObject & DerivedProperties & {
+    readonly sizes: typeof sizes;
+};
+export type ThemeContextType = {
+    theme: ThemeObject;
+    setTheme: (theme: ThemeObject) => void;
+};
+export type ThemeProviderProps = {
+    children: ReactNode;
+    theme?: Partial<BaseThemeObject>;
+};
+export type Variant = 'primary' | 'accent' | 'positive' | 'negative';
+export type Size = 'sm' | 'md' | 'lg';

package/dist/types/tile.d.ts

@@ -0,0 +1,91 @@
+import { Badge, Reward, RewardCategory, TierType } from './wll';
+export declare enum UrlTarget {
+    sameWindow = "SAME_WINDOW",
+    newWindow = "NEW_WINDOW"
+}
+export declare enum BadgeTileType {
+    latestEarned = "LATEST_EARNED",
+    specificBadge = "SPECIFIC_BADGE"
+}
+export declare enum TierTileType {
+    currentTier = "CURRENT_TIER",
+    currentTargetNext = "CURRENT_TARGET_NEXT",
+    currentTargetSpecific = "CURRENT_TARGET_SPECIFIC"
+}
+export declare enum ProgressType {
+    Name = "NAME",
+    Points = "POINTS"
+}
+export declare enum TileType {
+    Banner = "BANNER",
+    Points = "POINTS",
+    Content = "CONTENT",
+    Reward = "REWARD",
+    Badge = "BADGE",
+    RewardCategory = "REWARD_CATEGORY",
+    Tier = "TIER"
+}
+export declare enum TileHeight {
+    Half = "HALF",
+    Full = "FULL"
+}
+export type ProgessType = 'NAME' | 'POINTS';
+export declare class BannerTileConfig {
+    imageUrl?: string | null;
+    title?: string | null;
+    description?: string | null;
+    buttonText?: string | null;
+    url?: string | null;
+    urlTarget?: UrlTarget;
+}
+export declare class PointsTileConfig {
+    title?: string | null;
+    multiplier?: number;
+    prefix?: string | null;
+    suffix?: string | null;
+    imageUrl?: string | null;
+    points?: number;
+}
+export declare class ContentTileConfig {
+    title?: string | null;
+    subtitle?: string | null;
+    imageUrl?: string | null;
+    linkURL?: string | null;
+}
+export declare class RewardTileConfig {
+    reward?: Reward;
+    showPrice?: boolean;
+}
+export declare class BadgeTileConfig {
+    badgeTileType?: BadgeTileType;
+    badgeId?: string | null;
+    badge?: Badge;
+    count: number;
+}
+export declare class RewardCategoryTileConfig {
+    categoryId?: string | null;
+    allowDecorationOverlay?: boolean;
+    rewardCategory?: RewardCategory;
+}
+export declare class TierTileConfig {
+    progressType: ProgressType;
+    pointsMultiplier?: number;
+    pointsPrefix?: string;
+    pointsSuffix?: string;
+    tier?: TierType;
+    targetTier?: TierType | undefined;
+    type?: TierTileType;
+    targetTierAttainingPeriod?: Date | null;
+}
+export type Tile = {
+    id: string | null;
+    type?: TileType;
+    active: boolean;
+    createdAt: string | null;
+    updatedAt: string | null;
+    tileHeight: TileHeight;
+    configuration: TileConfig;
+};
+declare const getConfigForTileType: (tileType: TileType) => typeof BannerTileConfig | typeof PointsTileConfig | typeof ContentTileConfig | typeof RewardTileConfig | typeof BadgeTileConfig | typeof RewardCategoryTileConfig | typeof TierTileConfig;
+export type TileConfig = InstanceType<ReturnType<typeof getConfigForTileType>>;
+export {};

package/dist/types/wll.d.ts

@@ -0,0 +1,62 @@
+export type Badge = {
+    id: string;
+    name: string;
+    description: string;
+    artworkUrl: string;
+    createdAt: string;
+    updatedAt: string;
+};
+export declare class RewardCategory {
+    name?: string;
+    priority?: number;
+    type?: string;
+    id?: string;
+    createdAt?: string;
+    updatedAt?: string;
+    description?: string;
+    metadata?: string;
+    pictureUrl?: string;
+    rewards?: Reward[];
+    parent?: string;
+}
+export declare class Reward {
+    id?: string;
+    createdAt?: string;
+    updatedAt?: string;
+    name?: string;
+    pictureUrl?: string;
+    description?: string;
+    price?: number;
+    value?: number;
+    priority?: number;
+    availability?: Availability;
+    purchasable?: boolean;
+    tier?: string;
+    summary?: string;
+    redemptionMessage?: string;
+    visibilityCriteria?: string;
+}
+type Availability = {
+    start: string;
+    end: string;
+};
+type Effectivity = {
+    start: string;
+    end: string;
+};
+export type TierType = {
+    id: string;
+    name: string;
+    description?: string;
+    artworkUrl?: string;
+    priority: number;
+    pointsRequirement?: number;
+    calculation?: string;
+    accumulationPeriod?: string;
+    effectivity?: Effectivity;
+    createdAt?: string;
+    updatedAt?: string;
+    earnedPoints?: number;
+    attained?: boolean;
+};
+export {};

package/dist/utils/responsiveHelper.d.ts

@@ -0,0 +1,5 @@
+type ResponsiveStyle<T> = {
+    [K in keyof T]: T[K] | [T[K], T[K], T[K]];
+};
+export declare const createResponsiveStyle: <T extends object>(style: ResponsiveStyle<T>) => T;
+export {};

package/dist/utils/storybookHelpers.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export declare const TileWrapper: React.FC<{
+    isHalfTile?: boolean;
+    children: React.ReactNode;
+}>;

package/dist/utils/styling.d.ts

@@ -0,0 +1,11 @@
+import { BaseThemeObject } from "../types/theme";
+export declare const sizes: {
+    borderRadiusSm: number;
+    borderRadiusLg: number;
+    borderRadiusButton: number;
+    borderRadiusRounded: number;
+    sm: number;
+    md: number;
+    lg: number;
+};
+export declare const defaultTheme: BaseThemeObject;

package/dist/utils/themeHelpers.d.ts

@@ -0,0 +1,9 @@
+export declare const getDerivedColor: (color: string) => string;
+export declare const getReadableTextColor: (backgroundColor: string) => string;
+type PercentageKey = 5 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 95;
+export type DerivedColors = {
+    [K in PercentageKey]: string;
+};
+export declare const getDerivedColorPercentages: (color: string) => DerivedColors;
+export declare const getAlphaDerivedColors: (color: string) => DerivedColors;
+export {};

package/dist/utils/variant.d.ts

@@ -0,0 +1,5 @@
+import { TextStyle, ViewStyle } from "react-native";
+import { ThemeObject } from "../types/theme";
+type StyleVariants<V extends string> = Record<V, ViewStyle | TextStyle>;
+export declare function createVariantSystem<V extends string>(baseStyle: ViewStyle | TextStyle, variantStyles: (theme: ThemeObject) => StyleVariants<V>): (theme: ThemeObject, variant: V) => ViewStyle[];
+export {};

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@wlloyalty/wll-react-sdk",
+  "version": "1.0.1",
+  "license": "UNLICENSED",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "build": "webpack --config webpack.config.js",
+    "build:types": "tsc --emitDeclarationOnly",
+    "build:all": "yarn build && yarn build:types",
+    "prepare": "yarn build:all",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "test-storybook": "test-storybook",
+    "chromatic": "npx chromatic"
+  },
+  "dependencies": {
+    "@types/color": "^3.0.6",
+    "color": "^4.2.3",
+    "lucide-react": "^0.427.0",
+    "zod": "^3.23.8"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-native": ">=0.70.0 <0.73.0",
+    "react-native-web": "^0.19.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.22.x",
+    "@babel/core": "^7.25.2",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
+    "@babel/preset-env": "^7.25.4",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-commonjs": "^25.0.4",
+    "@rollup/plugin-node-resolve": "^15.2.1",
+    "@rollup/plugin-typescript": "^11.1.3",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/addon-onboarding": "^8.2.9",
+    "@storybook/addon-react-native-web": "^0.0.20",
+    "@storybook/cli": "^8.2.9",
+    "@storybook/react": "^8.2.9",
+    "@storybook/react-webpack5": "^8.2.9",
+    "@types/react": "^18.2.22",
+    "@types/react-dom": "^18.2.7",
+    "@types/react-native": "^0.72.2",
+    "babel-loader": "^9.2.1",
+    "babel-plugin-react-native-web": "^0.19.12",
+    "babel-plugin-transform-remove-console": "^6.9.4",
+    "chromatic": "^11.7.1",
+    "concurrently": "^8.2.2",
+    "prettier": "^3.3.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-native": "0.72.14",
+    "react-native-web": "^0.19.9",
+    "rollup": "^3.28.1",
+    "rollup-plugin-dts": "^6.0.1",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.2.2",
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
+  },
+  "volta": {
+    "node": "18.20.4",
+    "yarn": "1.22.22"
+  }
+}