Skip to content

Commit f1c4e31

Browse files
author
Rajat Saxena
committed
Fixed: drawer not themed
1 parent 158ad0a commit f1c4e31

8 files changed

Lines changed: 303 additions & 12 deletions

File tree

‎apps/web/components/public/base-layout/template/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ const Template = (props: TemplateProps) => {
7979
);
8080

8181
return (
82-
<div className="flex flex-col font-primary courselit-theme">
82+
<div className="flex flex-col courselit-theme">
8383
{header && (
8484
<EditableWidget
8585
item={header}

‎packages/components-library/src/index.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,6 @@ import DragAndDrop from "./drag-and-drop";
4343
export { Button as Button2 } from "./components/ui/button";
4444
export * from "./menu";
4545
export * from "./components/ui/avatar";
46-
export * from "./drawer";
4746
export * from "./components/ui/accordion";
4847
export * from "./components/ui/slider";
4948
export * from "./components/ui/card";

‎packages/page-blocks/src/blocks/header/widget/mobile-nav.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React, { useState } from "react";
2-
import { Drawer, Image, Link as AppLink } from "@courselit/components-library";
2+
import { Image, Link as AppLink } from "@courselit/components-library";
33
import { Link } from "../settings";
44
import { Media } from "@courselit/common-models";
55
import { ThemeStyle } from "@courselit/page-models";
6-
import { Header4, Button } from "@courselit/page-primitives";
6+
import { Header4, Button, Drawer } from "@courselit/page-primitives";
77
import PageLink from "./link";
88
import { MenuIcon } from "lucide-react";
99

@@ -38,6 +38,7 @@ const MobileNav = (props: MobileNavSettings) => {
3838
</Button>
3939
}
4040
side="right"
41+
theme={theme}
4142
>
4243
<AppLink
4344
href="/"

‎packages/page-primitives/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@
4444
},
4545
"dependencies": {
4646
"@courselit/page-models": "workspace:^",
47+
"@radix-ui/react-dialog": "^1.1.14",
4748
"@radix-ui/react-label": "^2.1.2",
4849
"@radix-ui/react-slot": "^1.2.0",
4950
"@radix-ui/react-switch": "^1.2.2",

‎packages/page-primitives/src/components/ui/sheet.tsx‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
import * as React from "react";
2+
import * as SheetPrimitive from "@radix-ui/react-dialog";
3+
import { cva, type VariantProps } from "class-variance-authority";
4+
import { X } from "lucide-react";
5+
6+
import { cn } from "@/lib/utils";
7+
8+
const Sheet = SheetPrimitive.Root;
9+
10+
const SheetTrigger = SheetPrimitive.Trigger;
11+
12+
const SheetClose = SheetPrimitive.Close;
13+
14+
const SheetPortal = SheetPrimitive.Portal;
15+
16+
const SheetOverlay = React.forwardRef<
17+
React.ElementRef<typeof SheetPrimitive.Overlay>,
18+
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
19+
>(({ className, ...props }, ref) => (
20+
<SheetPrimitive.Overlay
21+
className={cn(
22+
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
23+
className,
24+
)}
25+
{...props}
26+
ref={ref}
27+
/>
28+
));
29+
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
30+
31+
const sheetVariants = cva(
32+
"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
33+
{
34+
variants: {
35+
side: {
36+
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
37+
bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
38+
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
39+
right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
40+
},
41+
},
42+
defaultVariants: {
43+
side: "right",
44+
},
45+
},
46+
);
47+
48+
interface SheetContentProps
49+
extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
50+
VariantProps<typeof sheetVariants> {}
51+
52+
const SheetContent = React.forwardRef<
53+
React.ElementRef<typeof SheetPrimitive.Content>,
54+
SheetContentProps
55+
>(({ side = "right", className, children, ...props }, ref) => (
56+
<SheetPortal>
57+
<SheetOverlay />
58+
<SheetPrimitive.Content
59+
ref={ref}
60+
className={cn(sheetVariants({ side }), className)}
61+
{...props}
62+
>
63+
{children}
64+
<SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
65+
<X className="h-4 w-4" />
66+
<span className="sr-only">Close</span>
67+
</SheetPrimitive.Close>
68+
</SheetPrimitive.Content>
69+
</SheetPortal>
70+
));
71+
SheetContent.displayName = SheetPrimitive.Content.displayName;
72+
73+
const SheetHeader = ({
74+
className,
75+
...props
76+
}: React.HTMLAttributes<HTMLDivElement>) => (
77+
<div
78+
className={cn(
79+
"flex flex-col space-y-2 text-center sm:text-left",
80+
className,
81+
)}
82+
{...props}
83+
/>
84+
);
85+
SheetHeader.displayName = "SheetHeader";
86+
87+
const SheetFooter = ({
88+
className,
89+
...props
90+
}: React.HTMLAttributes<HTMLDivElement>) => (
91+
<div
92+
className={cn(
93+
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
94+
className,
95+
)}
96+
{...props}
97+
/>
98+
);
99+
SheetFooter.displayName = "SheetFooter";
100+
101+
const SheetTitle = React.forwardRef<
102+
React.ElementRef<typeof SheetPrimitive.Title>,
103+
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
104+
>(({ className, ...props }, ref) => (
105+
<SheetPrimitive.Title
106+
ref={ref}
107+
className={cn("text-lg font-semibold text-foreground", className)}
108+
{...props}
109+
/>
110+
));
111+
SheetTitle.displayName = SheetPrimitive.Title.displayName;
112+
113+
const SheetDescription = React.forwardRef<
114+
React.ElementRef<typeof SheetPrimitive.Description>,
115+
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
116+
>(({ className, ...props }, ref) => (
117+
<SheetPrimitive.Description
118+
ref={ref}
119+
className={cn("text-sm text-muted-foreground", className)}
120+
{...props}
121+
/>
122+
));
123+
SheetDescription.displayName = SheetPrimitive.Description.displayName;
124+
125+
export {
126+
Sheet,
127+
SheetPortal,
128+
SheetOverlay,
129+
SheetTrigger,
130+
SheetClose,
131+
SheetContent,
132+
SheetHeader,
133+
SheetFooter,
134+
SheetTitle,
135+
SheetDescription,
136+
};

packages/components-library/src/drawer.tsx renamed to packages/page-primitives/src/drawer.tsx

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { ReactNode } from "react";
22
import { Sheet, SheetContent, SheetTrigger } from "./components/ui/sheet";
3+
import { cn } from "./lib/utils";
4+
import type { ThemeStyle } from "@courselit/page-models";
35

46
interface DrawerProps {
57
trigger: ReactNode;
@@ -9,6 +11,7 @@ interface DrawerProps {
911
setOpen: (open: boolean) => void;
1012
style?: React.CSSProperties;
1113
className?: string;
14+
theme?: ThemeStyle;
1215
}
1316

1417
export function Drawer({
@@ -18,22 +21,23 @@ export function Drawer({
1821
open,
1922
setOpen,
2023
style,
21-
className,
24+
className = "",
25+
theme,
2226
}: DrawerProps) {
27+
const classes = cn(
28+
// Base styles
29+
"courselit-theme",
30+
className,
31+
);
32+
2333
return (
2434
<Sheet open={open} onOpenChange={setOpen}>
2535
<SheetTrigger asChild>
2636
<span>{trigger}</span>
2737
</SheetTrigger>
28-
<SheetContent side={side} style={style} className={className}>
38+
<SheetContent side={side} style={style} className={classes}>
2939
{children}
3040
</SheetContent>
3141
</Sheet>
3242
);
3343
}
34-
35-
export {
36-
SheetHeader as DrawerHeader,
37-
SheetTitle as DrawerTitle,
38-
SheetDescription as DrawerDescription,
39-
} from "./components/ui/sheet";

‎packages/page-primitives/src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,4 @@ export * from "./section";
1919
export * from "./badge";
2020
export * from "./switch";
2121
export * from "./themes";
22+
export * from "./drawer";

0 commit comments

Comments
 (0)