@engagently/types 2.6.0 → 2.7.0

package/dist/common/_types/ConfigDefinition.d.ts

@@ -1,6 +1,6 @@
 import type { defaultResources } from '../../i18n/i18n';
 import type { AvailableThemes, ColorSchemesConfig } from '../../ui/themes/_types';
-import type { PaletteConfig } from '../../ui/themes/config';
+import type { PaletteConfig, ThemeSettings } from '../../ui/themes/config';
 import type { CombinedError, Operation } from '@urql/preact';
 import type { EgyEntities, MessageEvents } from './WidgetDefinitions';
 import type { DsmFeatureName, PlmFeatureName } from '../lib/api/enums';
@@ -10,7 +10,7 @@ export type CallbackFn = (data: {
     payload?: unknown;
 }) => void;
 export type ErrorCallbackFn = (error: CombinedError, operation: Operation) => void;
-export type EventHooks = 'onAny' | 'onChangeViewMode' | 'onLoadMoreComments' | 'onLoadMoreReplies';
+export type EventHooks = 'onAny' | 'onChangeViewMode' | 'onLoadMoreComments' | 'onLoadMoreReplies' | 'onSetup';
 export declare const EventHookMessageEventMap: Record<EventHooks, MessageEvents | MessageEvents[]>;
 export type Translations = Record<string, DeepPartial<typeof defaultResources.en>>;
 /**
@@ -23,6 +23,7 @@ export interface EngageConfig {
     strategy?: string;
     palette?: PaletteConfig;
     theme?: `${AvailableThemes}`;
+    themeSettings?: Partial<ThemeSettings>;
     defaultLanguage?: string;
     translations?: Translations;
     dev?: boolean;

package/dist/common/_types/WidgetDefinitions.d.ts

@@ -94,7 +94,7 @@ export interface PollWidget {
 /**
  * Events that can be used by the pub/sub implementation for window.postMessage
  */
-export type MessageEvents = 'EGY_SIGN_IN' | 'EGY_SIGN_OUT' | 'EGY_SIGNED_OUT' | 'EGY_AUTHENTICATED' | 'EGY_AUTHENTICATION_FAILED' | 'EGY_TOGGLE_COLOR_SCHEME' | 'EGY_CHANGE_LANGUAGE' | 'EGY_CHANGE_VIEW_MODE' | 'EGY_LOAD_MORE_COMMENTS' | 'EGY_LOAD_MORE_REPLIES' | 'EGY_REINIT';
+export type MessageEvents = 'EGY_SETUP' | 'EGY_SIGN_IN' | 'EGY_SIGN_OUT' | 'EGY_SIGNED_OUT' | 'EGY_AUTHENTICATED' | 'EGY_AUTHENTICATION_FAILED' | 'EGY_TOGGLE_COLOR_SCHEME' | 'EGY_CHANGE_LANGUAGE' | 'EGY_CHANGE_VIEW_MODE' | 'EGY_LOAD_MORE_COMMENTS' | 'EGY_LOAD_MORE_REPLIES' | 'EGY_REINIT';
 export declare const EGY_AUTH = "egy_auth";
 export type EgyAuth = {
     accessToken: string;

package/dist/i18n/i18n.d.ts

@@ -46,6 +46,8 @@ export declare const defaultResources: {
             "load-more": string;
             "load-newer-comments": string;
             "load-older-comments": string;
+            "load-newer-replies": string;
+            "load-older-replies": string;
             options: string;
             reply: string;
             "reply-do": string;
@@ -121,8 +123,11 @@ export declare const defaultResources: {
             };
             reactions: {
                 REACTION1: string;
+                REACTION1_zero: string;
                 REACTION2: string;
+                REACTION2_zero: string;
                 REACTION3: string;
+                REACTION3_zero: string;
             };
             "reply-as": string;
             "reply-to": string;
@@ -279,6 +284,8 @@ export declare const defaultResources: {
             "load-more": string;
             "load-newer-comments": string;
             "load-older-comments": string;
+            "load-newer-replies": string;
+            "load-older-replies": string;
             options: string;
             reply: string;
             "reply-do": string;
@@ -354,8 +361,11 @@ export declare const defaultResources: {
             };
             reactions: {
                 REACTION1: string;
+                REACTION1_zero: string;
                 REACTION2: string;
+                REACTION2_zero: string;
                 REACTION3: string;
+                REACTION3_zero: string;
             };
             "reply-as": string;
             "reply-to": string;

package/dist/main/lib/engagently.d.ts

@@ -1,11 +1,15 @@
 import type { CommunityConfig, EngageConfig, Translations } from '../../common/_types/ConfigDefinition';
 import type { SignOutOptions } from '../../common/lib/api/session';
+type SignInOptions = Partial<{
+    token: string | null;
+}>;
 export type Engagently = {
     config?: EngageConfig;
     communityConfig?: DeepPartial<CommunityConfig>;
     changeLanguage: (languageCode: string) => void;
     toggleColorScheme: (mode: 'auto' | 'dark' | 'light') => void;
-    signOut: (options?: SignOutOptions) => Promise<null | void>;
+    signOut: (options?: SignOutOptions) => Promise<void>;
+    signIn: (options?: SignInOptions) => Promise<void>;
     reinit: (config: Partial<EngageConfig>) => Promise<void>;
     remoteTranslations?: Translations | null;
 } & {

package/dist/ui/themes/config/_types.d.ts

@@ -0,0 +1,40 @@
+import type emptyTheme from '../../themes/unstyled';
+import type { ButtonSizes, ButtonVariants, ComponentColorScheme, ThemeAnimations, ThemeBreakpoints, ThemeLevels, ThemePalette, ThemeShadows, ThemeShape, ThemeSpacing, ThemeTypography } from '../../themes/config';
+import type { ColorSchemesConfig } from '../../themes/_types';
+/**
+ * Theme styles are custom styles that are different depending on the chosen
+ * theme.  For example in theme-a the button could have a drop shadow, whereas
+ * in theme-b the button is flat.
+ */
+export type ThemeStyles = typeof emptyTheme;
+/**
+ * Theme settings are general options to control the look and feel of the
+ * application.  For example the avatar size, or the line thickness.
+ * This should allow for easy customization without having to change a bunch
+ * of styles.
+ */
+export type ThemeSettings = {
+    avatarSize: number;
+    buttonDiscussionFocusColor?: ComponentColorScheme;
+    buttonDiscussionFocusVariant: ButtonVariants;
+    buttonRepliesColor?: ComponentColorScheme;
+    buttonRepliesVariant: ButtonVariants;
+    lineThickness: number;
+    viewControlTabSize?: ButtonSizes;
+};
+/**
+ * Theme values is where colors, spacing and typography is defined, and can
+ * be customized by the user. The palette will change based on the mode.
+ */
+export type ThemeValues = {
+    animation: ThemeAnimations;
+    breakpoints: ThemeBreakpoints;
+    levels: ThemeLevels;
+    mode: `${ColorSchemesConfig.light}` | `${ColorSchemesConfig.dark}`;
+    palette: ThemePalette;
+    settings: ThemeSettings;
+    shadows: ThemeShadows;
+    shape: ThemeShape;
+    spacing: ThemeSpacing;
+    typography: ThemeTypography;
+};

package/dist/ui/themes/config/animation.d.ts

@@ -0,0 +1,22 @@
+import type { CSSObject } from 'tss-react';
+export type AnimationStyles = {
+    enter: CSSObject;
+    enterTo: CSSObject;
+    enterFrom: CSSObject;
+    leave: CSSObject;
+    leaveTo: CSSObject;
+    leaveFrom: CSSObject;
+};
+export type ThemeAnimations = {
+    durations: {
+        fast: string;
+        slow: string;
+    };
+    effects: {
+        bounce: string;
+        flash: (startBgColor: string, endBgColor: string) => string;
+        pulse: string;
+        spin: string;
+    };
+};
+export declare const animation: ThemeAnimations;

package/dist/ui/themes/config/breakpoints.d.ts

@@ -0,0 +1,4 @@
+export type BreakpointNames = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export declare const Breakpoints: Record<BreakpointNames, number>;
+export type ThemeBreakpoints = Record<BreakpointNames, string>;
+export declare const breakpoints: ThemeBreakpoints;

package/dist/ui/themes/config/components.d.ts

@@ -0,0 +1,28 @@
+/**
+ * SHARED ACROSS COMPONENTS
+ */
+export declare const COMPONENT_COLOR_SCHEME: readonly ["primary", "secondary", "error", "warning", "info", "success"];
+export type ComponentColorScheme = (typeof COMPONENT_COLOR_SCHEME)[number];
+export declare const TYPOGRAPHY_COLOR_SCHEME: readonly ["primary", "secondary", "hint"];
+export type TypographyColorScheme = (typeof TYPOGRAPHY_COLOR_SCHEME)[number];
+/**
+ * INDIVIDUAL COMPONENT VARIATIONS
+ */
+/** Button */
+export declare const BUTTON_VARIANTS: readonly ["filled", "outlined", "ghost", "link"];
+export declare const BUTTON_SIZES: readonly ["default", "compact", "large"];
+export declare const ICON_BUTTON_VARIANTS: readonly ["filled", "outlined", "ghost"];
+export type ButtonVariants = (typeof BUTTON_VARIANTS)[number];
+export type ButtonSizes = (typeof BUTTON_SIZES)[number];
+export type IconButtonVariants = (typeof ICON_BUTTON_VARIANTS)[number];
+/** Chip */
+export declare const CHIP_VARIANTS: readonly ["filled", "outlined"];
+export type ChipVariants = (typeof CHIP_VARIANTS)[number];
+/** Switch */
+export declare const SWITCH_SIZES: readonly ["default", "compact"];
+export declare const SWITCH_LABEL_POSITIONS: readonly ["left", "right"];
+export type SwitchSizes = (typeof SWITCH_SIZES)[number];
+export type SwitchLabelPositions = (typeof SWITCH_LABEL_POSITIONS)[number];
+/** Typography */
+export declare const TYPOGRAPHY_VARIANTS: readonly ["p", "h1", "h2", "h3", "h4", "h5", "span", "div"];
+export type TypographyVariants = (typeof TYPOGRAPHY_VARIANTS)[number];

package/dist/ui/themes/config/index.d.ts

@@ -0,0 +1,10 @@
+export * from './_types';
+export * from './animation';
+export * from './breakpoints';
+export * from './components';
+export * from './levels';
+export * from './palette';
+export * from './shadows';
+export * from './shape';
+export * from './spacing';
+export * from './typography';

package/dist/ui/themes/config/levels.d.ts

@@ -0,0 +1,9 @@
+export type ThemeLevels = {
+    bottom: number;
+    1: number;
+    2: number;
+    3: number;
+    top: number;
+};
+declare const levels: ThemeLevels;
+export { levels };

package/dist/ui/themes/config/palette.d.ts

@@ -56,5 +56,4 @@ export type PaletteConfig = {
 declare const generateDefaultPalette: () => Omit<ThemePalette, 'background' | 'text' | 'mode' | 'elements' | 'default'>;
 declare const generatePaletteLight: () => ThemePalette;
 declare const generatePaletteDark: () => ThemePalette;
-declare const mergePalette: (p1: ThemePalette, p2?: DeepPartial<ThemePalette>) => ThemePalette;
-export { generateDefaultPalette, generatePaletteDark, generatePaletteLight, mergePalette, };
+export { generateDefaultPalette, generatePaletteDark, generatePaletteLight };

package/dist/ui/themes/config/shadows.d.ts

@@ -0,0 +1,14 @@
+export type ThemeShadows = {
+    0: string;
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+    6: string;
+    7: string;
+    8: string;
+    9: string;
+};
+declare const shadows: ThemeShadows;
+export { shadows };

package/dist/ui/themes/config/shape.d.ts

@@ -0,0 +1,5 @@
+export type ThemeShape = {
+    borderRadius: number;
+};
+declare const shape: ThemeShape;
+export { shape };

package/dist/ui/themes/config/spacing.d.ts

@@ -0,0 +1,6 @@
+type IsNumberOrString<T> = T extends undefined ? string : number;
+export type ThemeSpacing = typeof spacing;
+declare const spacing: <T extends true | undefined = undefined>(space: number, options?: {
+    asNumber?: T | undefined;
+} | undefined) => IsNumberOrString<T>;
+export { spacing };

package/dist/ui/themes/config/typography.d.ts

@@ -0,0 +1,20 @@
+type Typography = {
+    fontSize: string;
+    fontWeight: string;
+};
+export type ThemeTypography = {
+    alert: Typography;
+    body: Typography;
+    button: Typography;
+    caption: Typography;
+    chip: Typography;
+    fontFamily: string;
+    h1: Typography;
+    h2: Typography;
+    h3: Typography;
+    h4: Typography;
+    h5: Typography;
+    paragraph: Typography;
+};
+declare const typography: ThemeTypography;
+export { typography };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@engagently/types",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "main": "./index.ts",
   "types": "dist/types/engagently.d.ts",
   "files": [