chore(js,react): move options to be first class citizens on the inbox…

… component (#6279)

packages/js/src/novu.ts

@@ -6,15 +6,7 @@ import { Preferences } from './preferences';
 import { Socket } from './ws';
 import { PRODUCTION_BACKEND_URL } from './utils/config';
 import { InboxServiceSingleton } from './utils/inbox-service-singleton';
-
-export type NovuOptions = {
-  applicationIdentifier: string;
-  subscriberId: string;
-  subscriberHash?: string;
-  backendUrl?: string;
-  socketUrl?: string;
-  useCache?: boolean;
-};
+import type { NovuOptions } from './types';
 
 export class Novu implements Pick<NovuEventEmitter, 'on' | 'off'> {
   #emitter: NovuEventEmitter;

packages/js/src/types.ts

@@ -161,3 +161,12 @@ export type Result<D = undefined, E = unknown> = Promise<{
   data?: D;
   error?: E;
 }>;
+
+export type NovuOptions = {
+  applicationIdentifier: string;
+  subscriberId: string;
+  subscriberHash?: string;
+  backendUrl?: string;
+  socketUrl?: string;
+  useCache?: boolean;
+};

packages/js/src/ui/components/Renderer.tsx

@@ -1,18 +1,16 @@
 import { For, onCleanup, onMount } from 'solid-js';
 import { MountableElement, Portal } from 'solid-js/web';
 import { NovuUI } from '..';
-import { NovuOptions } from '../../novu';
+import type { NovuOptions } from '../../types';
 import {
-  Appearance,
   AppearanceProvider,
   CountProvider,
   FocusManagerProvider,
   InboxProvider,
-  Localization,
   LocalizationProvider,
   NovuProvider,
 } from '../context';
-import type { Tab } from '../types';
+import type { Tab, Appearance, Localization } from '../types';
 import { Bell, Root, Preferences } from './elements';
 import { Inbox } from './Inbox';
 import { NotificationList as Notifications } from './Notification';

packages/js/src/ui/components/elements/InboxStatus/constants.ts

@@ -1,5 +1,4 @@
-import { LocalizationKey } from '../../../context';
-import { NotificationStatus } from '../../../types';
+import type { LocalizationKey, NotificationStatus } from '../../../types';
 
 export const notificationStatusOptionsLocalizationKeys = {
   unreadRead: 'inbox.status.options.unreadRead',

packages/js/src/ui/components/primitives/Button.tsx

@@ -1,7 +1,7 @@
 import { cva, VariantProps } from 'class-variance-authority';
 import { splitProps } from 'solid-js';
 import { JSX } from 'solid-js/jsx-runtime';
-import { AppearanceKey } from '../../context';
+import type { AppearanceKey } from '../../types';
 import { cn, useStyle } from '../../helpers';
 
 export const buttonVariants = cva(

packages/js/src/ui/components/primitives/Dropdown/DropdownContent.tsx

@@ -1,5 +1,5 @@
 import { ComponentProps, splitProps } from 'solid-js';
-import { AppearanceKey } from '../../../context';
+import type { AppearanceKey } from '../../../types';
 import { useStyle } from '../../../helpers';
 import { Popover } from '../Popover';
 

packages/js/src/ui/components/primitives/Dropdown/DropdownItem.tsx

@@ -1,6 +1,6 @@
 import { splitProps } from 'solid-js';
 import { JSX } from 'solid-js/jsx-runtime';
-import { AppearanceKey } from '../../../context';
+import type { AppearanceKey } from '../../../types';
 import { useStyle } from '../../../helpers';
 import { Popover, usePopover } from '../Popover';
 

packages/js/src/ui/components/primitives/Dropdown/DropdownTrigger.tsx

@@ -1,5 +1,5 @@
 import { ComponentProps, splitProps } from 'solid-js';
-import { AppearanceKey } from '../../../context';
+import type { AppearanceKey } from '../../../types';
 import { useStyle } from '../../../helpers';
 import { Popover } from '../Popover';
 

packages/js/src/ui/components/primitives/Popover/PopoverContent.tsx

@@ -1,6 +1,7 @@
 import { JSX, onCleanup, onMount, Show, splitProps } from 'solid-js';
 import { Portal } from 'solid-js/web';
-import { AppearanceKey, useFocusManager } from '../../../context';
+import { useFocusManager } from '../../../context';
+import type { AppearanceKey } from '../../../types';
 import { cn, useStyle } from '../../../helpers';
 import { Root } from '../../elements';
 import { usePopover } from './PopoverRoot';

packages/js/src/ui/components/primitives/Popover/PopoverTrigger.tsx

@@ -1,7 +1,7 @@
 import { JSX, splitProps } from 'solid-js';
 import { Dynamic } from 'solid-js/web';
 import { usePopover } from '.';
-import { AppearanceKey } from '../../../context';
+import type { AppearanceKey } from '../../../types';
 import { useStyle } from '../../../helpers';
 
 type PopoverTriggerProps = JSX.IntrinsicElements['button'] & {

packages/js/src/ui/components/primitives/Skeleton.tsx

@@ -1,4 +1,4 @@
-import { AppearanceKey } from '../../context';
+import type { AppearanceKey } from '../../types';
 import { ClassName, cn, useStyle } from '../../helpers';
 
 type SkeletonTextProps = { appearanceKey: AppearanceKey; class?: ClassName };

packages/js/src/ui/components/primitives/Tabs/TabsContent.tsx

@@ -1,5 +1,5 @@
 import { JSX, ParentProps, Show, splitProps } from 'solid-js';
-import { AppearanceKey } from '../../../context';
+import type { AppearanceKey } from '../../../types';
 import { useStyle } from '../../../helpers';
 import { useTabsContext } from './TabsRoot';
 

packages/js/src/ui/components/primitives/Tabs/TabsList.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable local-rules/no-class-without-style */
 import { JSX, ParentProps, Ref, splitProps } from 'solid-js';
-import { AppearanceKey } from '../../../context';
+import type { AppearanceKey } from '../../../types';
 import { useStyle } from '../../../helpers';
 
 export const tabsListVariants = () => 'nt-flex nt-gap-6 nt-px-6 nt-py-1 nt-overflow-hidden';

packages/js/src/ui/components/primitives/Tabs/TabsRoot.tsx

@@ -9,7 +9,7 @@ import {
   useContext,
   splitProps,
 } from 'solid-js';
-import type { AppearanceKey } from '../../../context';
+import type { AppearanceKey } from '../../../types';
 import { useStyle } from '../../../helpers';
 import { useKeyboardNavigation } from './useKeyboardNavigation';
 

packages/js/src/ui/components/primitives/Tabs/TabsTrigger.tsx

@@ -1,6 +1,6 @@
 import { JSX, ParentProps, Ref, splitProps } from 'solid-js';
-import { useStyle } from 'src/ui/helpers';
-import { AppearanceKey } from '../../../context';
+import { useStyle } from '../../../helpers';
+import type { AppearanceKey } from '../../../types';
 import { Button } from '../Button';
 import { useTabsContext } from './TabsRoot';
 

packages/js/src/ui/components/primitives/Tooltip/TooltipContent.tsx

@@ -1,6 +1,7 @@
 import { JSX, onCleanup, onMount, Show, splitProps } from 'solid-js';
 import { Portal } from 'solid-js/web';
-import { AppearanceKey, useFocusManager } from '../../../context';
+import { useFocusManager } from '../../../context';
+import type { AppearanceKey } from '../../../types';
 import { useStyle } from '../../../helpers';
 import { Root } from '../../elements';
 import { useTooltip } from './TooltipRoot';

packages/js/src/ui/components/primitives/Tooltip/TooltipTrigger.tsx

@@ -1,6 +1,6 @@
 import { JSX, splitProps } from 'solid-js';
 import { Dynamic } from 'solid-js/web';
-import { AppearanceKey } from '../../../context';
+import type { AppearanceKey } from '../../../types';
 import { useStyle } from '../../../helpers';
 import { useTooltip } from './TooltipRoot';
 

packages/js/src/ui/config/appearanceKeys.ts

@@ -0,0 +1,129 @@
+/*
+ * The double underscore signals that entire key extends the right part of the key
+ * i.e. foo__bar means that foo_bar is an extension of bar. Both keys will be applied when foo_bar is used
+ * meaning you would have `bar foo__bar` in the dom
+ */
+export const appearanceKeys = [
+  //Primitives
+  'button',
+
+  'popoverContent',
+  'popoverTrigger',
+
+  'dropdownContent',
+  'dropdownTrigger',
+  'dropdownItem',
+  'dropdownItemLabel',
+  'dropdownItemLabelContainer',
+  'dropdownItemLeftIcon',
+  'dropdownItemRightIcon',
+
+  'tooltipContent',
+  'tooltipTrigger',
+
+  'back__button',
+
+  'skeletonText',
+  'skeletonAvatar',
+  'tabsRoot',
+  'tabsList',
+  'tabsContent',
+  'tabsTrigger',
+  'dots',
+
+  //General
+  'root',
+  'bellIcon',
+  'bellContainer',
+  'bellDot',
+  'preferences__button',
+  'preferencesContainer',
+  'inboxHeader',
+  'loading',
+
+  //Inbox
+  'inbox__popoverTrigger',
+  'inbox__popoverContent',
+
+  //Notifications
+  'notificationList',
+  'notificationListEmptyNoticeContainer',
+  'notificationListEmptyNotice',
+  'notificationListEmptyNoticeIcon',
+  'notificationListNewNotificationsNoticeContainer',
+  'notificationListNewNotificationsNotice__button',
+
+  'notification',
+  'notificationDot',
+  'notificationSubject',
+  'notificationBody',
+  'notificationBodyContainer',
+  'notificationImage',
+  'notificationDate',
+  'notificationDefaultActions',
+  'notificationCustomActions',
+  'notificationPrimaryAction__button',
+  'notificationSecondaryAction__button',
+  'notificationRead__button',
+  'notificationUnread__button',
+  'notificationArchive__button',
+  'notificationUnarchive__button',
+
+  // Notifications tabs
+  'notificationsTabs__tabsRoot',
+  'notificationsTabs__tabsList',
+  'notificationsTabs__tabsContent',
+  'notificationsTabs__tabsTrigger',
+  'notificationsTabsTriggerLabel',
+  'notificationsTabsTriggerCount',
+
+  //Inbox status
+  'inboxStatus__title',
+  'inboxStatus__dropdownTrigger',
+  'inboxStatus__dropdownContent',
+  'inboxStatus__dropdownItem',
+  'inboxStatus__dropdownItemLabel',
+  'inboxStatus__dropdownItemLabelContainer',
+  'inboxStatus__dropdownItemLeftIcon',
+  'inboxStatus__dropdownItemRightIcon',
+
+  // More actions
+  'moreActionsContainer',
+  'moreActions__dropdownTrigger',
+  'moreActions__dropdownContent',
+  'moreActions__dropdownItem',
+  'moreActions__dropdownItemLabel',
+  'moreActions__dropdownItemLeftIcon',
+
+  // More tabs
+  'moreTabs__button',
+  'moreTabs__dots',
+  'moreTabs__dropdownTrigger',
+  'moreTabs__dropdownContent',
+  'moreTabs__dropdownItem',
+  'moreTabs__dropdownItemLabel',
+  'moreTabs__dropdownItemRightIcon',
+
+  //workflow
+  'workflowContainer',
+  'workflowLabel',
+  'workflowLabelContainer',
+
+  // channel
+  'channelContainer',
+  'channelsContainer',
+  'channelLabel',
+  'channelLabelContainer',
+  'channelDescription',
+  'channelSwitchContainer',
+  'channelSwitch',
+  'channelSwitchThumb',
+
+  //Preferences Header
+  'preferencesHeader',
+  'preferencesHeader__back__button',
+  'preferencesHeader__title',
+
+  //Preferences Loading
+  'preferencesLoadingContainer',
+] as const;

packages/js/src/ui/config/defaultAppearance.ts → packages/js/src/ui/config/defaultVariables.ts

@@ -1,4 +1,4 @@
-import { Variables } from '../context';
+import type { Variables } from '../types';
 
 export const defaultVariables: Required<Variables> = {
   colorPrimary: '#0081F1',

packages/js/src/ui/config/index.ts

@@ -1 +1,3 @@
-export * from './defaultAppearance';
+export * from './defaultVariables';
+export * from './defaultLocalization';
+export * from './appearanceKeys';