Skip to content

Commit

Permalink
chore(dashboard): side nav updates (#6658)
Browse files Browse the repository at this point in the history
  • Loading branch information
LetItRock authored Oct 11, 2024
1 parent 158c72a commit db33f89
Show file tree
Hide file tree
Showing 16 changed files with 1,079 additions and 1,295 deletions.
1 change: 1 addition & 0 deletions apps/dashboard/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
"@hookform/resolvers": "^2.9.1",
"@novu/react": "^2.3.0",
"@novu/shared": "workspace:*",
"@radix-ui/react-dialog": "^1.1.2",
"@radix-ui/react-dropdown-menu": "^2.1.1",
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-label": "^2.1.0",
Expand Down
8 changes: 8 additions & 0 deletions apps/dashboard/src/api/telemetry.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { post } from './api.client';

export const sendTelemetry = async (event: string, data?: Record<string, unknown>): Promise<void> => {
await post('/telemetry/measure', {
event,
data,
});
};
113 changes: 113 additions & 0 deletions apps/dashboard/src/components/primitives/dialog.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
import * as React from 'react';
import * as DialogPrimitive from '@radix-ui/react-dialog';
import { Cross2Icon } from '@radix-ui/react-icons';

import { cn } from '@/utils/ui';
import { cva, VariantProps } from 'class-variance-authority';

const Dialog = DialogPrimitive.Root;

const DialogTrigger = DialogPrimitive.Trigger;

const DialogPortal = DialogPrimitive.Portal;

const DialogClose = DialogPrimitive.Close;

const DialogOverlay = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Overlay>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Overlay
ref={ref}
className={cn(
'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-neutral-950/10',
className
)}
{...props}
/>
));
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;

const DialogContent = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
<DialogPortal>
<DialogOverlay />
<DialogPrimitive.Content
ref={ref}
className={cn(
'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-5 border p-5 shadow duration-200 sm:rounded-lg',
className
)}
{...props}
>
{children}
<DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
<Cross2Icon className="h-4 w-4" />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
</DialogPrimitive.Content>
</DialogPortal>
));
DialogContent.displayName = DialogPrimitive.Content.displayName;

const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
<div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
);
DialogHeader.displayName = 'DialogHeader';

const footerVariants = cva(
`-mx-5 flex flex-col-reverse p-5 pb-0 sm:flex-row sm:space-x-2 border-t border-neutral-alpha-200`,
{
variants: {
variant: {
default: 'sm:justify-end',
between: 'sm:justify-between',
},
},
defaultVariants: {
variant: 'default',
},
}
);

type DialogFooterProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof footerVariants>;

const DialogFooter = ({ className, variant, ...props }: DialogFooterProps) => (
<div className={footerVariants({ variant, className })} {...props} />
);
DialogFooter.displayName = 'DialogFooter';

const DialogTitle = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Title>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Title
ref={ref}
className={cn('text-lg font-semibold leading-none tracking-tight', className)}
{...props}
/>
));
DialogTitle.displayName = DialogPrimitive.Title.displayName;

const DialogDescription = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Description>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Description ref={ref} className={cn('text-foreground text-sm', className)} {...props} />
));
DialogDescription.displayName = DialogPrimitive.Description.displayName;

export {
Dialog,
DialogPortal,
DialogOverlay,
DialogTrigger,
DialogClose,
DialogContent,
DialogHeader,
DialogFooter,
DialogTitle,
DialogDescription,
};
93 changes: 0 additions & 93 deletions apps/dashboard/src/components/side-navigation/constants.ts

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ const pluralizeDaysLeft = (numberOfDays: number) => {

export const FreeTrialCard = () => {
const { subscription, daysLeft, isLoading } = useBillingSubscription();
const daysTotal = subscription && subscription.trial.daysTotal > 0 ? subscription.trial.daysTotal : 100;

if (isLoading || !subscription || !subscription.trial.isActive || subscription?.hasPaymentMethod) {
return null;
Expand Down Expand Up @@ -59,7 +60,7 @@ export const FreeTrialCard = () => {
Experience novu without any limits for free for the next {pluralizedDays}.
</span>
<div className={`max-h-3 overflow-hidden opacity-100 ${transition} group-hover:max-h-0 group-hover:opacity-0`}>
<Progress value={daysLeft} max={subscription.trial.daysTotal > 0 ? subscription.trial.daysTotal : 100} />
<Progress value={daysTotal - daysLeft} max={daysTotal} />
</div>
<div
className={`-mt-2 max-h-0 overflow-hidden opacity-0 ${transition} group-hover:max-h-8 group-hover:opacity-100`}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,9 @@ const OrganizationSwitcherAppearance: OrganizationSwitcherTheme = {
elements: {
rootBox: 'w-full',
organizationSwitcherTrigger:
'w-full py-0 [&>.cl-organizationPreview]:px-0 px-1.5 justify-start hover:bg-background before:border-neutral-alpha-100 focus-visible:ring-ring group relative flex cursor-pointer items-center gap-2 rounded-lg transition duration-300 ease-out before:absolute before:bottom-[1px] before:left-0 before:h-0 before:w-full before:border-b before:border-solid before:transition-all before:duration-300 before:ease-out before:content-[""] hover:shadow-sm hover:before:border-transparent focus-visible:outline-none focus-visible:ring-1 focus:bg-transparent focus:shadow-sm focus:bg-background focus:before:border-transparent',
organizationSwitcherTriggerIcon: 'ml-auto',
'group w-full py-0 [&>.cl-organizationPreview]:px-0 px-1.5 justify-start hover:bg-background before:border-neutral-alpha-100 focus-visible:ring-ring group relative flex cursor-pointer items-center gap-2 rounded-lg transition duration-300 ease-out before:absolute before:bottom-[1px] before:left-0 before:h-0 before:w-full before:border-b before:border-solid before:transition-all before:duration-300 before:ease-out before:content-[""] hover:shadow-sm hover:before:border-transparent focus-visible:outline-none focus-visible:ring-1 focus:bg-transparent focus:shadow-sm focus:bg-background focus:before:border-transparent',
organizationSwitcherTriggerIcon:
'opacity-0 ml-auto transition duration-300 ease-out group-hover:opacity-100 group-focus:opacity-100',
organizationSwitcherPopoverActionButton__manageOrganization: {
display: 'none',
},
Expand Down
Loading

0 comments on commit db33f89

Please sign in to comment.