feat(js): inbox tabs (#6149)

novuhq · Aug 1, 2024 · 229b3c1 · 229b3c1
1 parent f89547d
commit 229b3c1
Show file tree

Hide file tree

Showing 27 changed files with 542 additions and 31 deletions.
diff --git a/packages/js/eslint-local-rules.js → eslint-local-rules.js b/packages/js/eslint-local-rules.js → eslint-local-rules.js
diff --git a/packages/js/.eslintrc.cjs → packages/js/.eslintrc.js b/packages/js/.eslintrc.cjs → packages/js/.eslintrc.js
@@ -1,6 +1,6 @@
 module.exports = {
   extends: ['../../.eslintrc.js'],
-  plugins: ['local-rules'],
+  plugins: ['import', 'promise', '@typescript-eslint', 'prettier', 'local-rules'],
   rules: {
     '@typescript-eslint/explicit-module-boundary-types': 'off',
     '@typescript-eslint/naming-convention': [
@@ -20,5 +20,7 @@ module.exports = {
     project: './tsconfig.json',
     ecmaVersion: 2020,
     sourceType: 'module',
+    tsconfigRootDir: __dirname,
   },
+  ignorePatterns: '*.test.ts',
 };
diff --git a/packages/js/src/ui/components/Inbox.tsx b/packages/js/src/ui/components/Inbox.tsx
@@ -1,12 +1,14 @@
-import { Accessor, createSignal, JSX, Match, Switch } from 'solid-js';
+import { Accessor, createSignal, JSX, Match, Show, Switch } from 'solid-js';
 import { useStyle } from '../helpers';
 import { NotificationMounter } from '../types';
 import { Bell, Footer, Header, Settings, SettingsHeader } from './elements';
+import { InboxTabs } from './InboxTabs';
 import { NotificationList } from './Notification';
 import { Button, Popover } from './primitives';
 
 export type InboxProps = {
   open?: boolean;
+  tabs?: Array<{ label: string; value: Array<string> }>;
   mountNotification?: NotificationMounter;
   renderBell?: ({ unreadCount }: { unreadCount: Accessor<number> }) => JSX.Element;
 };
@@ -17,8 +19,10 @@ enum Screen {
 }
 
 type InboxContentProps = {
+  tabs?: InboxProps['tabs'];
   mountNotification?: NotificationMounter;
 };
+
 const InboxContent = (props: InboxContentProps) => {
   const [currentScreen, setCurrentScreen] = createSignal<Screen>(Screen.Inbox);
 
@@ -27,7 +31,12 @@ const InboxContent = (props: InboxContentProps) => {
       <Switch>
         <Match when={currentScreen() === Screen.Inbox}>
           <Header updateScreen={setCurrentScreen} />
-          <NotificationList mountNotification={props.mountNotification} />
+          <Show
+            when={props.tabs && props.tabs.length > 0}
+            fallback={<NotificationList mountNotification={props.mountNotification} />}
+          >
+            <InboxTabs tabs={props.tabs ?? []} />
+          </Show>
         </Match>
         <Match when={currentScreen() === Screen.Settings}>
           <SettingsHeader backAction={() => setCurrentScreen(Screen.Inbox)} />
@@ -52,7 +61,7 @@ export const Inbox = (props: InboxProps) => {
         )}
       />
       <Popover.Content appearanceKey="inbox__popoverContent">
-        <InboxContent mountNotification={props.mountNotification} />
+        <InboxContent tabs={props.tabs} mountNotification={props.mountNotification} />
       </Popover.Content>
     </Popover.Root>
   );

diff --git a/packages/js/src/ui/components/InboxTabs/InboxTab.tsx b/packages/js/src/ui/components/InboxTabs/InboxTab.tsx
@@ -0,0 +1,31 @@
+/* eslint-disable local-rules/no-class-without-style */
+import { cn, useStyle } from '../../helpers';
+import { Tabs } from '../primitives';
+import { tabsTriggerVariants } from '../primitives/Tabs/TabsTrigger';
+
+export const InboxTab = (props: { label: string; class?: string }) => {
+  const style = useStyle();
+
+  // TODO: Replace with actual count from API
+  const count = Math.floor(Math.random() * 120 + 1);
+
+  return (
+    <Tabs.Trigger
+      value={props.label}
+      class={style(
+        'notificationsTabs__tabsTrigger',
+        cn(tabsTriggerVariants(), `nt-flex nt-gap-2 ${props.class ?? ''}`)
+      )}
+    >
+      <span class={style('notificationsTabsTriggerLabel', 'nt-text-sm nt-font-medium')}>{props.label}</span>
+      <span
+        class={style(
+          'notificationsTabsTriggerCount',
+          'nt-rounded-full nt-bg-primary nt-px-[6px] nt-text-primary-foreground nt-text-sm'
+        )}
+      >
+        {count >= 100 ? '99+' : count}
+      </span>
+    </Tabs.Trigger>
+  );
+};
diff --git a/packages/js/src/ui/components/InboxTabs/InboxTabs.tsx b/packages/js/src/ui/components/InboxTabs/InboxTabs.tsx
@@ -0,0 +1,111 @@
+/* eslint-disable local-rules/no-class-without-style */
+import { createMemo, createSignal, For, Show } from 'solid-js';
+import { Button, Dropdown, dropdownItemVariants, Tabs } from '../primitives';
+import { NotificationList } from '../Notification';
+import { InboxTab } from './InboxTab';
+import { Check, DotsMenu } from '../../icons';
+import { cn, useStyle } from '../../helpers';
+import { tabsRootVariants } from '../primitives/Tabs/TabsRoot';
+import { useTabsDropdown } from './useTabsDropdown';
+
+const tabsDropdownTriggerVariants = () =>
+  `nt-relative after:nt-absolute after:nt-content-[''] after:nt-bottom-0 after:nt-left-0 ` +
+  `after:nt-w-full after:nt-h-[2px] after:nt-border-b-2 nt-pb-[0.625rem]`;
+
+type InboxTabsProps = {
+  tabs: Array<{ label: string; value: Array<string> }>;
+};
+
+export const InboxTabs = (props: InboxTabsProps) => {
+  const style = useStyle();
+  const [activeTab, setActiveTab] = createSignal<string>((props.tabs[0] && props.tabs[0].label) ?? '');
+  const { dropdownTabs, setTabsList, visibleTabs } = useTabsDropdown({ tabs: props.tabs });
+
+  const options = createMemo(() =>
+    dropdownTabs().map((tab) => ({
+      label: tab.label,
+      rightIcon: tab.label === activeTab() ? <Check class={style('moreTabs__dropdownItemRightIcon')} /> : undefined,
+    }))
+  );
+
+  const isTabsDropdownActive = createMemo(() =>
+    dropdownTabs()
+      .map((tab) => tab.label)
+      .includes(activeTab())
+  );
+
+  return (
+    <Tabs.Root
+      class={style('notificationsTabs__tabsRoot', cn(tabsRootVariants(), 'nt-flex-1 nt-overflow-hidden'))}
+      value={activeTab()}
+      onChange={setActiveTab}
+    >
+      <Show
+        when={visibleTabs().length > 0}
+        fallback={
+          <Tabs.List ref={setTabsList} appearanceKey="notificationsTabs__tabsList">
+            {props.tabs.map((tab) => (
+              <InboxTab label={tab.label} class="nt-invisible" />
+            ))}
+          </Tabs.List>
+        }
+      >
+        <Tabs.List appearanceKey="notificationsTabs__tabsList">
+          {visibleTabs().map((tab) => (
+            <InboxTab label={tab.label} />
+          ))}
+          <Show when={dropdownTabs().length > 0}>
+            <Dropdown.Root fallbackPlacements={['bottom', 'top']} placement={'bottom-start'}>
+              <Dropdown.Trigger
+                appearanceKey="moreTabs__dropdownTrigger"
+                asChild={(triggerProps) => (
+                  <Button
+                    variant="unstyled"
+                    size="none"
+                    appearanceKey="moreTabs__button"
+                    {...triggerProps}
+                    class={cn(
+                      tabsDropdownTriggerVariants(),
+                      isTabsDropdownActive()
+                        ? 'after:nt-border-b-primary'
+                        : 'after:nt-border-b-transparent nt-text-foreground-alpha-600'
+                    )}
+                  >
+                    <DotsMenu appearanceKey="moreTabs__dots" />
+                  </Button>
+                )}
+              />
+              <Dropdown.Content appearanceKey="moreTabs__dropdownContent">
+                <For each={options()}>
+                  {(option) => (
+                    <Dropdown.Item
+                      class={style(
+                        'moreTabs__dropdownItem',
+                        cn(dropdownItemVariants(), 'nt-flex nt-justify-between nt-gap-2')
+                      )}
+                      onClick={() => setActiveTab(option.label)}
+                    >
+                      <span class={style('moreTabs__dropdownItemLabel', 'nt-mr-auto')}>{option.label}</span>
+                      {option.rightIcon}
+                    </Dropdown.Item>
+                  )}
+                </For>
+              </Dropdown.Content>
+            </Dropdown.Root>
+          </Show>
+        </Tabs.List>
+      </Show>
+      {props.tabs.map((tab) => (
+        <Tabs.Content
+          value={tab.label}
+          class={style(
+            'notificationsTabs__tabsContent',
+            cn(activeTab() === tab.label ? 'nt-block' : 'nt-hidden', 'nt-flex-1 nt-overflow-hidden')
+          )}
+        >
+          <NotificationList options={{ tags: tab.value }} />
+        </Tabs.Content>
+      ))}
+    </Tabs.Root>
+  );
+};
diff --git a/packages/js/src/ui/components/InboxTabs/index.ts b/packages/js/src/ui/components/InboxTabs/index.ts
@@ -0,0 +1 @@
+export * from './InboxTabs';
diff --git a/packages/js/src/ui/components/InboxTabs/useTabsDropdown.ts b/packages/js/src/ui/components/InboxTabs/useTabsDropdown.ts
@@ -0,0 +1,43 @@
+import { createSignal, onMount } from 'solid-js';
+
+type TabsArray = Array<{ label: string; value: Array<string> }>;
+
+export const useTabsDropdown = ({ tabs }: { tabs: TabsArray }) => {
+  const [tabsList, setTabsList] = createSignal<HTMLDivElement>();
+  const [visibleTabs, setVisibleTabs] = createSignal<TabsArray>([]);
+  const [dropdownTabs, setDropdownTabs] = createSignal<TabsArray>([]);
+
+  onMount(() => {
+    const tabsListEl = tabsList();
+    if (!tabsListEl) return;
+
+    const tabsElements = [...tabsListEl.querySelectorAll('[role="tab"]')];
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        let visibleTabIds = entries
+          .filter((entry) => entry.isIntersecting && entry.intersectionRatio === 1)
+          .map((entry) => entry.target.id);
+
+        if (tabsElements.length === visibleTabIds.length) {
+          setVisibleTabs(tabs.filter((tab) => visibleTabIds.includes(tab.label)));
+          observer.disconnect();
+
+          return;
+        }
+
+        visibleTabIds = visibleTabIds.slice(0, -1);
+        setVisibleTabs(tabs.filter((tab) => visibleTabIds.includes(tab.label)));
+        setDropdownTabs(tabs.filter((tab) => !visibleTabIds.includes(tab.label)));
+        observer.disconnect();
+      },
+      { root: tabsListEl }
+    );
+
+    for (const tabElement of tabsElements) {
+      observer.observe(tabElement);
+    }
+  });
+
+  return { dropdownTabs, setTabsList, visibleTabs };
+};
diff --git a/packages/js/src/ui/components/Notification/NotificationList.tsx b/packages/js/src/ui/components/Notification/NotificationList.tsx
@@ -12,9 +12,7 @@ export const NotificationListContainer = (props: ParentProps) => {
   const style = useStyle();
 
   return (
-    <div
-      class={style('notificationList', 'nt-flex nt-flex-col nt-min-h-full nt-w-full nt-h-[37.5rem] nt-overflow-auto')}
-    >
+    <div class={style('notificationList', 'nt-flex nt-flex-col nt-w-full nt-h-full nt-overflow-auto')}>
       {props.children}
     </div>
   );

diff --git a/packages/js/src/ui/components/Renderer.tsx b/packages/js/src/ui/components/Renderer.tsx
@@ -20,7 +20,7 @@ export const novuComponents = {
   Bell,
 };
 
-export type NovuComponent = { name: NovuComponentName; props?: unknown };
+export type NovuComponent = { name: NovuComponentName; props?: any };
 
 export type NovuMounterProps = NovuComponent & { element: MountableElement };
 
@@ -68,11 +68,17 @@ export const Renderer = (props: RendererProps) => {
             <FocusManagerProvider>
               <InboxNotificationStatusProvider>
                 <For each={[...props.nodes]}>
-                  {([node, component]) => (
-                    <Portal mount={node}>
-                      <Root>{novuComponents[component.name](component.props || {})}</Root>
-                    </Portal>
-                  )}
+                  {([node, component]) => {
+                    const Component = novuComponents[component.name];
+
+                    return (
+                      <Portal mount={node}>
+                        <Root>
+                          <Component {...component.props} />
+                        </Root>
+                      </Portal>
+                    );
+                  }}
                 </For>
               </InboxNotificationStatusProvider>
             </FocusManagerProvider>

diff --git a/packages/js/src/ui/components/elements/Footer.tsx b/packages/js/src/ui/components/elements/Footer.tsx
@@ -3,7 +3,7 @@ import { Novu } from '../../icons';
 
 export const Footer = () => {
   return (
-    <div class="nt-flex nt-justify-center nt-items-center nt-gap-1 nt-mt-auto nt-py-3 nt-text-foreground-alpha-200">
+    <div class="nt-flex nt-justify-center nt-items-center nt-gap-1 nt-mt-auto nt-pt-9 nt-pb-3 nt-text-foreground-alpha-200">
       <Novu />
       <span class="nt-text-xs">Powered by Novu</span>
     </div>

diff --git a/packages/js/src/ui/components/primitives/Dropdown/DropdownItem.tsx b/packages/js/src/ui/components/primitives/Dropdown/DropdownItem.tsx
@@ -1,7 +1,7 @@
 import { splitProps } from 'solid-js';
 import { JSX } from 'solid-js/jsx-runtime';
 import { AppearanceKey } from '../../../context';
-import { useStyle } from '../../../helpers';
+import { cn, useStyle } from '../../../helpers';
 import { Popover, usePopover } from '../Popover';
 
 export const dropdownItemVariants = () =>
@@ -10,12 +10,12 @@ export const dropdownItemVariants = () =>
 type DropdownItemProps = JSX.IntrinsicElements['button'] & { appearanceKey?: AppearanceKey };
 export const DropdownItem = (props: DropdownItemProps) => {
   const style = useStyle();
-  const [local, rest] = splitProps(props, ['appearanceKey', 'onClick']);
+  const [local, rest] = splitProps(props, ['appearanceKey', 'onClick', 'class']);
   const { onClose } = usePopover();
 
   return (
     <Popover.Close
-      class={style(local.appearanceKey || 'dropdownItem', dropdownItemVariants())}
+      class={local.class ? local.class : style(local.appearanceKey || 'dropdownItem', dropdownItemVariants())}
       onClick={(e) => {
         if (typeof local.onClick === 'function') {
           local.onClick(e);

diff --git a/packages/js/src/ui/components/primitives/Dropdown/DropdownTrigger.tsx b/packages/js/src/ui/components/primitives/Dropdown/DropdownTrigger.tsx
@@ -3,9 +3,18 @@ import { AppearanceKey } from '../../../context';
 import { useStyle } from '../../../helpers';
 import { Popover } from '../Popover';
 
+export const dropdownTriggerButtonVariants = () =>
+  `nt-relative nt-transition nt-outline-none focus-visible:nt-outline-none` +
+  `focus-visible:nt-ring-2 focus-visible:nt-ring-primary focus-visible:nt-ring-offset-2`;
+
 export const DropdownTrigger = (props: ComponentProps<typeof Popover.Trigger> & { appearanceKey?: AppearanceKey }) => {
   const style = useStyle();
   const [local, rest] = splitProps(props, ['appearanceKey']);
 
-  return <Popover.Trigger class={style(local.appearanceKey || 'dropdownTrigger')} {...rest} />;
+  return (
+    <Popover.Trigger
+      class={style(local.appearanceKey || 'dropdownTrigger', dropdownTriggerButtonVariants())}
+      {...rest}
+    />
+  );
 };
diff --git a/packages/js/src/ui/components/primitives/Dropdown/index.ts b/packages/js/src/ui/components/primitives/Dropdown/index.ts
@@ -1,11 +1,12 @@
 import { Popover } from '../Popover';
 import { DropdownContent } from './DropdownContent';
+export { dropdownItemVariants } from './DropdownItem';
 import { DropdownItem } from './DropdownItem';
 import { DropdownRoot } from './DropdownRoot';
 import { DropdownTrigger } from './DropdownTrigger';
 
 export { dropdownContentVariants } from './DropdownContent';
-export { dropdownItemVariants } from './DropdownItem';
+export { dropdownTriggerButtonVariants } from './DropdownTrigger';
 
 export const Dropdown = {
   Root: DropdownRoot,

diff --git a/packages/js/src/ui/components/primitives/Popover/PopoverContent.tsx b/packages/js/src/ui/components/primitives/Popover/PopoverContent.tsx
@@ -6,7 +6,8 @@ import { Root } from '../../elements';
 import { usePopover } from './PopoverRoot';
 
 export const popoverContentVariants = () =>
-  'nt-flex-col nt-gap-4 nt-max-w-96 nt-w-full max-h-[600px] nt-rounded-xl nt-bg-background nt-shadow-[0_5px_15px_0_rgba(122,133,153,0.25)] nt-z-10 nt-cursor-default nt-flex nt-flex-col nt-overflow-hidden';
+  'nt-flex-col nt-gap-4 nt-w-[400px] nt-h-[600px] nt-rounded-xl nt-bg-background ' +
+  'nt-shadow-[0_5px_15px_0_rgba(122,133,153,0.25)] nt-z-10 nt-cursor-default nt-flex nt-flex-col nt-overflow-hidden';
 
 const PopoverContentBody = (props: PopoverContentProps) => {
   const { open, setFloating, floating, floatingStyles } = usePopover();