(null);
15 |
16 | // useEffect(() => {
17 | // if (activeIds.length === 1) {
18 | // const [id] = activeIds;
19 | // const item = itemsMap[id];
20 | // setControlType(item.type);
21 | // } else {
22 | // setControlType(null);
23 | // }
24 | // }, [activeIds, itemsMap]);
25 |
26 | useEffect(() => {
27 | const stateEvents = dispatcher.bus.pipe(
28 | filter(({ key }) => key.startsWith(SELECTION_PREFIX))
29 | );
30 | const subscription = stateEvents.subscribe((obj) => {
31 | if (obj.key === SELECTION_UPDATED) {
32 | const layers = obj.val.payload.layers;
33 | if (layers.length === 1) {
34 | const [layer] = layers;
35 | setControlType(layer.type);
36 | } else {
37 | setControlType(null);
38 | }
39 | }
40 | });
41 | return () => subscription.unsubscribe();
42 | }, []);
43 |
44 | return <>{controlType && };
45 | }
46 |
47 | function ControlMenu({ controlType }: { controlType: ItemType }) {
48 | const { setShowToolboxItem, setActiveToolboxItem, activeToolboxItem } =
49 | useLayoutStore();
50 |
51 | const openToolboxItem = useCallback(
52 | (type: string) => {
53 | if (type === activeToolboxItem) {
54 | setShowToolboxItem(false);
55 | setActiveToolboxItem(null);
56 | } else {
57 | setShowToolboxItem(true);
58 | setActiveToolboxItem(type);
59 | }
60 | },
61 | [activeToolboxItem]
62 | );
63 |
64 | return (
65 |
69 | {
70 | {
71 | image: (
72 |
76 | ),
77 | textbox: (
78 |
82 | ),
83 | }[controlType]
84 | }
85 |
86 | );
87 | }
88 |
89 | const ImageMenuList = ({
90 | openToolboxItem,
91 | type,
92 | }: {
93 | openToolboxItem: (type: string) => void;
94 | type: ItemType;
95 | }) => {
96 | return (
97 |
98 |
99 |
100 |
101 | );
102 | };
103 |
104 | const TextMenuList = ({
105 | openToolboxItem,
106 | type,
107 | }: {
108 | openToolboxItem: (type: string) => void;
109 | type: ItemType;
110 | }) => {
111 | return (
112 |
117 | );
118 | };
119 |
120 | const PresetsMenuListItem = ({
121 | openToolboxItem,
122 | type,
123 | }: {
124 | openToolboxItem: (type: string) => void;
125 | type: ItemType;
126 | }) => {
127 | return (
128 |
135 | );
136 | };
137 |
138 | const BasicMenuListItem = ({
139 | openToolboxItem,
140 | type,
141 | }: {
142 | openToolboxItem: (type: string) => void;
143 | type: string;
144 | }) => {
145 | const Icon = Icons[type];
146 | return (
147 |
154 | );
155 | };
156 |
157 | const SmartMenuListItem = ({
158 | openToolboxItem,
159 | }: {
160 | openToolboxItem: (type: string) => void;
161 | }) => {
162 | return (
163 |
170 | );
171 | };
172 |
--------------------------------------------------------------------------------
/src/components/editor/editor.tsx:
--------------------------------------------------------------------------------
1 | import Navbar from "./navbar";
2 | import MenuList from "./menu-list";
3 | import { MenuItem } from "./menu-item";
4 | import ControlList from "./control-list";
5 | import { ControlItem } from "./control-item";
6 |
7 | import useHotkeys from "./use-hotkeys";
8 | import { useEffect } from "react";
9 | import { getCompactFontData } from "@/utils/fonts";
10 | import { FONTS } from "@/data/fonts";
11 | import useDataState from "@/store/use-data-state";
12 | import Canvas from "../canvas/canvas";
13 | import Footer from "./footer";
14 |
15 | const Editor = () => {
16 | const { setCompactFonts, setFonts } = useDataState();
17 |
18 | useHotkeys();
19 |
20 | useEffect(() => {
21 | setCompactFonts(getCompactFontData(FONTS));
22 | setFonts(FONTS);
23 | }, []);
24 |
25 | return (
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
16 |
17 |
18 |
21 |
22 |
23 |
24 |
25 |
26 |
29 |
30 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
42 |
43 |
44 |
24 |
25 | Photos
26 |
27 |
28 |
29 | {IMAGES.map((image, index) => {
30 | return (
31 |
handleAddImage(image.src)}
33 | key={index}
34 | className="flex items-center justify-center w-full bg-zinc-950 pb-2 overflow-hidden cursor-pointer"
35 | >
36 |
})
41 |
42 | );
43 | })}
44 |
46 |
20 |
21 |
22 |
29 | {children}
30 |
31 |
27 |
28 | Text
29 |
30 |
31 |
39 |
40 |
96 |
97 | Your media
98 |
99 |
100 |
101 |
102 |
103 | Project
104 | Workspace
105 |
106 |
107 |
115 |
116 |
117 |
118 |
125 | Some assets
126 |
127 |
128 |
129 |
130 |
14 |
29 |
44 |
45 |
60 |
75 |
76 | );
77 | }
78 |
--------------------------------------------------------------------------------
/src/components/editor/navbar.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/ui/button";
2 | import {
3 | DESIGN_RESIZE,
4 | HISTORY_UNDO,
5 | HISTORY_REDO,
6 | dispatcher,
7 | } from "@/global";
8 | import logoDark from "@/assets/logo-dark.png";
9 | import { Icons } from "../shared/icons";
10 | import {
11 | Popover,
12 | PopoverContent,
13 | PopoverTrigger,
14 | } from "@/components/ui/popover";
15 | import { Download } from "lucide-react";
16 |
17 | export default function Navbar() {
18 | const handleUndo = () => {
19 | dispatcher.dispatch(HISTORY_UNDO);
20 | };
21 |
22 | const handleRedo = () => {
23 | dispatcher.dispatch(HISTORY_REDO);
24 | };
25 |
26 | const handleExport = () => {};
27 | const openLink = (url: string) => {
28 | window.open(url, "_blank"); // '_blank' will open the link in a new tab
29 | };
30 |
31 | return (
32 |
39 |
40 |
41 |
42 |
43 |
44 |
52 |
60 |
61 |
62 |
63 |
64 |
65 |
Untitled graphic
66 |
67 |
68 |
69 |
70 |
71 |
72 |
90 |
98 |
99 |
100 |
163 | {RESIZE_OPTIONS.map((option, index) => (
164 |
171 | ))}
172 |
173 |
174 |
175 | );
176 | };
177 |
178 | const ResizeOption = ({
179 | label,
180 | icon,
181 | value,
182 | handleResize,
183 | }: ResizeOptionProps & { handleResize: (payload: ResizeValue) => void }) => {
184 | const Icon = Icons[icon];
185 | return (
186 | handleResize(value)}
188 | className="flex items-center gap-4 hover:bg-zinc-50/10 cursor-pointer"
189 | >
190 |
191 |
192 |
193 |
194 |
{label}
195 |
Tiktok, Instagram
196 |
197 |
ResizeVideo
;
3 | };
4 |
--------------------------------------------------------------------------------
/src/components/editor/use-hotkeys.ts:
--------------------------------------------------------------------------------
1 | import { DEFAULT_FONT } from "@/data/fonts";
2 | import {
3 | ACTIVE_CLONE,
4 | ACTIVE_DELETE,
5 | ADD_TEXT,
6 | HISTORY_REDO,
7 | HISTORY_UNDO,
8 | LAYER_SELECT,
9 | PLAYER_SEEK_BY,
10 | PLAYER_TOGGLE_PLAY,
11 | dispatcher,
12 | } from "@/global";
13 | import hotkeys from "hotkeys-js";
14 | import { nanoid } from "nanoid";
15 | import { useEffect } from "react";
16 |
17 | const useHotkeys = () => {
18 | useEffect(() => {
19 | const dispatch = dispatcher.dispatch;
20 | // handle undo
21 | hotkeys("ctrl+z,command+z", (event) => {
22 | event.preventDefault(); // Prevent the default action
23 | dispatch(HISTORY_UNDO);
24 | // dispatch(UNDO);
25 | });
26 |
27 | // handle redo: ctrl+shift+z
28 | hotkeys("ctrl+shift+z,command+shift+z", (event) => {
29 | event.preventDefault(); // Prevent the default action
30 | // redo();
31 | dispatch(HISTORY_REDO);
32 | });
33 |
34 | // Define the shortcut and corresponding action
35 | hotkeys("ctrl+s,command+s", (event) => {
36 | event.preventDefault(); // Prevent the default action
37 | console.log("split action");
38 | // dispatch(ACTIVE_SPLIT);
39 | });
40 |
41 | // duplicate item
42 | hotkeys("ctrl+d,command+d", (event) => {
43 | event.preventDefault(); // Prevent the default action
44 | dispatch(ACTIVE_CLONE);
45 | });
46 |
47 | hotkeys("backspace,delete", (event) => {
48 | event.preventDefault(); // Prevent the default action
49 | dispatch(ACTIVE_DELETE);
50 | });
51 |
52 | hotkeys("esc", (event) => {
53 | event.preventDefault(); // Prevent the default action
54 | dispatcher.dispatch(LAYER_SELECT, { payload: { activeIds: [] } });
55 | });
56 |
57 | hotkeys("space", (event) => {
58 | event.preventDefault();
59 | dispatch(PLAYER_TOGGLE_PLAY);
60 | });
61 |
62 | hotkeys("down", (event) => {
63 | event.preventDefault();
64 | dispatch(PLAYER_SEEK_BY, { payload: { frames: 1 } });
65 | });
66 |
67 | hotkeys("up", (event) => {
68 | event.preventDefault();
69 | dispatch(PLAYER_SEEK_BY, { payload: { frames: -1 } });
70 | });
71 |
72 | // New shortcut for the 'T' key
73 | hotkeys("t", (event) => {
74 | dispatcher.dispatch(ADD_TEXT, {
75 | payload: {
76 | id: nanoid(),
77 | details: {
78 | text: "Add text",
79 | fontSize: 32,
80 | fontFamily: DEFAULT_FONT.postScriptName,
81 | fontUrl: DEFAULT_FONT.url,
82 | width: 180,
83 | textAlign: "center",
84 | fill: "#111111",
85 | },
86 | },
87 | });
88 | });
89 |
90 | return () => {
91 | hotkeys.unbind("ctrl+shift+z,command+shift+z");
92 | hotkeys.unbind("ctrl+z,command+z");
93 | hotkeys.unbind("ctrl+s,command+s");
94 | hotkeys.unbind("ctrl+d,command+d");
95 | hotkeys.unbind("backspace,delete");
96 | hotkeys.unbind("escape");
97 | hotkeys.unbind("down");
98 | hotkeys.unbind("up");
99 | hotkeys.unbind("space");
100 | hotkeys.unbind("t");
101 | };
102 | }, []);
103 | };
104 |
105 | export default useHotkeys;
106 |
--------------------------------------------------------------------------------
/src/components/shared/icons.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | AlertTriangle,
3 | ArrowRight,
4 | ArrowUpRight,
5 | BookOpen,
6 | Check,
7 | ChevronLeft,
8 | ChevronRight,
9 | Copy,
10 | CreditCard,
11 | File,
12 | FileText,
13 | FolderClosed,
14 | HelpCircle,
15 | Home,
16 | Image,
17 | Laptop,
18 | LayoutPanelLeft,
19 | LineChart,
20 | Loader2,
21 | LucideIcon,
22 | LucideProps,
23 | MessagesSquare,
24 | Moon,
25 | MoreVertical,
26 | Package,
27 | Plus,
28 | Puzzle,
29 | Search,
30 | Settings,
31 | SunMedium,
32 | Trash,
33 | Text,
34 | Type,
35 | User,
36 | X,
37 | Square,
38 | RectangleVertical,
39 | RectangleHorizontal,
40 | WandSparkles,
41 | Zap,
42 | Music,
43 | VideoIcon,
44 | } from "lucide-react";
45 |
46 | export type Icon = LucideIcon;
47 |
48 | export const Icons = {
49 | add: Plus,
50 | audio: Music,
51 | arrowRight: ArrowRight,
52 | arrowUpRight: ArrowUpRight,
53 | billing: CreditCard,
54 | bookOpen: BookOpen,
55 | chevronLeft: ChevronLeft,
56 | chevronRight: ChevronRight,
57 | check: Check,
58 | close: X,
59 | copy: Copy,
60 | dashboard: LayoutPanelLeft,
61 | ellipsis: MoreVertical,
62 | folder: FolderClosed,
63 | gitHub: ({ ...props }: LucideProps) => (
64 |
79 | ),
80 | google: ({ ...props }: LucideProps) => (
81 |
96 | ),
97 | nextjs: ({ ...props }: LucideProps) => (
98 |
113 | ),
114 | help: HelpCircle,
115 | home: Home,
116 | image: Image,
117 | landscape: RectangleHorizontal,
118 | laptop: Laptop,
119 | lineChart: LineChart,
120 | logo: Puzzle,
121 | media: Image,
122 | messages: MessagesSquare,
123 | moon: Moon,
124 | package: Package,
125 | page: File,
126 | portrait: RectangleVertical,
127 | post: FileText,
128 | preset: Zap,
129 | search: Search,
130 | square: Square,
131 | redo: ({ ...props }: LucideProps) => (
132 |
145 | ),
146 | shapes: ({ ...props }: LucideProps) => (
147 |
165 | ),
166 | settings: Settings,
167 | smart: WandSparkles,
168 | spinner: Loader2,
169 | sun: SunMedium,
170 | templates: ({ ...props }: LucideProps) => (
171 |
189 | ),
190 | text: Type,
191 | textbox: Type,
192 |
193 | trash: Trash,
194 | twitter: ({ ...props }: LucideProps) => (
195 |
210 | ),
211 | type: Type,
212 | undo: ({ ...props }: LucideProps) => (
213 |
226 | ),
227 | upload: ({ ...props }: LucideProps) => (
228 |
250 | ),
251 | user: User,
252 | video: VideoIcon,
253 | warning: AlertTriangle,
254 | };
255 |
--------------------------------------------------------------------------------
/src/components/theme-provider.tsx:
--------------------------------------------------------------------------------
1 | import { createContext, useContext, useEffect, useState } from 'react';
2 |
3 | type Theme = 'dark' | 'light' | 'system';
4 |
5 | type ThemeProviderProps = {
6 | children: React.ReactNode;
7 | defaultTheme?: Theme;
8 | storageKey?: string;
9 | };
10 |
11 | type ThemeProviderState = {
12 | theme: Theme;
13 | setTheme: (theme: Theme) => void;
14 | };
15 |
16 | const initialState: ThemeProviderState = {
17 | theme: 'system',
18 | setTheme: () => null,
19 | };
20 |
21 | const ThemeProviderContext = createContext(initialState);
22 |
23 | export function ThemeProvider({
24 | children,
25 | defaultTheme = 'system',
26 | storageKey = 'vite-ui-theme',
27 | ...props
28 | }: ThemeProviderProps) {
29 | const [theme, setTheme] = useState(
30 | () => (localStorage.getItem(storageKey) as Theme) || defaultTheme,
31 | );
32 |
33 | useEffect(() => {
34 | const root = window.document.documentElement;
35 |
36 | root.classList.remove('light', 'dark');
37 |
38 | if (theme === 'system') {
39 | const systemTheme = window.matchMedia('(prefers-color-scheme: dark)')
40 | .matches
41 | ? 'dark'
42 | : 'light';
43 |
44 | root.classList.add(systemTheme);
45 | return;
46 | }
47 |
48 | root.classList.add(theme);
49 | }, [theme]);
50 |
51 | const value = {
52 | theme,
53 | setTheme: (theme: Theme) => {
54 | localStorage.setItem(storageKey, theme);
55 | setTheme(theme);
56 | },
57 | };
58 |
59 | return (
60 |
61 | {children}
62 |
63 | );
64 | }
65 |
66 | export const useTheme = () => {
67 | const context = useContext(ThemeProviderContext);
68 |
69 | if (context === undefined)
70 | throw new Error('useTheme must be used within a ThemeProvider');
71 |
72 | return context;
73 | };
74 |
--------------------------------------------------------------------------------
/src/components/ui/avatar.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import * as AvatarPrimitive from "@radix-ui/react-avatar"
3 |
4 | import { cn } from "@/lib/utils"
5 |
6 | const Avatar = React.forwardRef<
7 | React.ElementRef,
8 | React.ComponentPropsWithoutRef
9 | >(({ className, ...props }, ref) => (
10 |
18 | ))
19 | Avatar.displayName = AvatarPrimitive.Root.displayName
20 |
21 | const AvatarImage = React.forwardRef<
22 | React.ElementRef,
23 | React.ComponentPropsWithoutRef
24 | >(({ className, ...props }, ref) => (
25 |
30 | ))
31 | AvatarImage.displayName = AvatarPrimitive.Image.displayName
32 |
33 | const AvatarFallback = React.forwardRef<
34 | React.ElementRef,
35 | React.ComponentPropsWithoutRef
36 | >(({ className, ...props }, ref) => (
37 |
45 | ))
46 | AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
47 |
48 | export { Avatar, AvatarImage, AvatarFallback }
49 |
--------------------------------------------------------------------------------
/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Slot } from '@radix-ui/react-slot';
3 | import { cva, type VariantProps } from 'class-variance-authority';
4 |
5 | import { cn } from '@/lib/utils';
6 |
7 | const buttonVariants = cva(
8 | 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
9 | {
10 | variants: {
11 | variant: {
12 | default: 'bg-primary text-primary-foreground hover:bg-primary/90',
13 | destructive:
14 | 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
15 | outline:
16 | 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
17 | secondary:
18 | 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
19 | ghost: 'hover:bg-accent hover:text-accent-foreground',
20 | link: 'text-primary underline-offset-4 hover:underline',
21 | },
22 | size: {
23 | default: 'h-10 px-4 py-2',
24 | xs: 'h-8 rounded-md px-3',
25 | sm: 'h-9 rounded-md px-3',
26 | lg: 'h-11 rounded-md px-8',
27 | icon: 'h-10 w-10',
28 | },
29 | },
30 | defaultVariants: {
31 | variant: 'default',
32 | size: 'default',
33 | },
34 | },
35 | );
36 |
37 | export interface ButtonProps
38 | extends React.ButtonHTMLAttributes,
39 | VariantProps {
40 | asChild?: boolean;
41 | }
42 |
43 | const Button = React.forwardRef(
44 | ({ className, variant, size, asChild = false, ...props }, ref) => {
45 | const Comp = asChild ? Slot : 'button';
46 | return (
47 |
52 | );
53 | },
54 | );
55 | Button.displayName = 'Button';
56 |
57 | export { Button, buttonVariants };
58 |
--------------------------------------------------------------------------------
/src/components/ui/command.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import { type DialogProps } from "@radix-ui/react-dialog"
3 | import { Command as CommandPrimitive } from "cmdk"
4 | import { Search } from "lucide-react"
5 |
6 | import { cn } from "@/lib/utils"
7 | import { Dialog, DialogContent } from "@/components/ui/dialog"
8 |
9 | const Command = React.forwardRef<
10 | React.ElementRef,
11 | React.ComponentPropsWithoutRef
12 | >(({ className, ...props }, ref) => (
13 |
21 | ))
22 | Command.displayName = CommandPrimitive.displayName
23 |
24 | interface CommandDialogProps extends DialogProps {}
25 |
26 | const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
27 | return (
28 |
35 | )
36 | }
37 |
38 | const CommandInput = React.forwardRef<
39 | React.ElementRef,
40 | React.ComponentPropsWithoutRef
41 | >(({ className, ...props }, ref) => (
42 |
43 |
44 |
52 |
53 | ))
54 |
55 | CommandInput.displayName = CommandPrimitive.Input.displayName
56 |
57 | const CommandList = React.forwardRef<
58 | React.ElementRef,
59 | React.ComponentPropsWithoutRef
60 | >(({ className, ...props }, ref) => (
61 |
66 | ))
67 |
68 | CommandList.displayName = CommandPrimitive.List.displayName
69 |
70 | const CommandEmpty = React.forwardRef<
71 | React.ElementRef,
72 | React.ComponentPropsWithoutRef
73 | >((props, ref) => (
74 |
79 | ))
80 |
81 | CommandEmpty.displayName = CommandPrimitive.Empty.displayName
82 |
83 | const CommandGroup = React.forwardRef<
84 | React.ElementRef,
85 | React.ComponentPropsWithoutRef
86 | >(({ className, ...props }, ref) => (
87 |
95 | ))
96 |
97 | CommandGroup.displayName = CommandPrimitive.Group.displayName
98 |
99 | const CommandSeparator = React.forwardRef<
100 | React.ElementRef,
101 | React.ComponentPropsWithoutRef
102 | >(({ className, ...props }, ref) => (
103 |
108 | ))
109 | CommandSeparator.displayName = CommandPrimitive.Separator.displayName
110 |
111 | const CommandItem = React.forwardRef<
112 | React.ElementRef,
113 | React.ComponentPropsWithoutRef
114 | >(({ className, ...props }, ref) => (
115 |
123 | ))
124 |
125 | CommandItem.displayName = CommandPrimitive.Item.displayName
126 |
127 | const CommandShortcut = ({
128 | className,
129 | ...props
130 | }: React.HTMLAttributes) => {
131 | return (
132 |
139 | )
140 | }
141 | CommandShortcut.displayName = "CommandShortcut"
142 |
143 | export {
144 | Command,
145 | CommandDialog,
146 | CommandInput,
147 | CommandList,
148 | CommandEmpty,
149 | CommandGroup,
150 | CommandItem,
151 | CommandShortcut,
152 | CommandSeparator,
153 | }
154 |
--------------------------------------------------------------------------------
/src/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import * as DialogPrimitive from "@radix-ui/react-dialog"
3 | import { X } from "lucide-react"
4 |
5 | import { cn } from "@/lib/utils"
6 |
7 | const Dialog = DialogPrimitive.Root
8 |
9 | const DialogTrigger = DialogPrimitive.Trigger
10 |
11 | const DialogPortal = DialogPrimitive.Portal
12 |
13 | const DialogClose = DialogPrimitive.Close
14 |
15 | const DialogOverlay = React.forwardRef<
16 | React.ElementRef,
17 | React.ComponentPropsWithoutRef
18 | >(({ className, ...props }, ref) => (
19 |
27 | ))
28 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
29 |
30 | const DialogContent = React.forwardRef<
31 | React.ElementRef,
32 | React.ComponentPropsWithoutRef
33 | >(({ className, children, ...props }, ref) => (
34 |
35 |
36 |
44 | {children}
45 |
46 |
47 | Close
48 |
49 |
50 |
51 | ))
52 | DialogContent.displayName = DialogPrimitive.Content.displayName
53 |
54 | const DialogHeader = ({
55 | className,
56 | ...props
57 | }: React.HTMLAttributes) => (
58 |
65 | )
66 | DialogHeader.displayName = "DialogHeader"
67 |
68 | const DialogFooter = ({
69 | className,
70 | ...props
71 | }: React.HTMLAttributes) => (
72 |
79 | )
80 | DialogFooter.displayName = "DialogFooter"
81 |
82 | const DialogTitle = React.forwardRef<
83 | React.ElementRef,
84 | React.ComponentPropsWithoutRef
85 | >(({ className, ...props }, ref) => (
86 |
94 | ))
95 | DialogTitle.displayName = DialogPrimitive.Title.displayName
96 |
97 | const DialogDescription = React.forwardRef<
98 | React.ElementRef,
99 | React.ComponentPropsWithoutRef
100 | >(({ className, ...props }, ref) => (
101 |
106 | ))
107 | DialogDescription.displayName = DialogPrimitive.Description.displayName
108 |
109 | export {
110 | Dialog,
111 | DialogPortal,
112 | DialogOverlay,
113 | DialogClose,
114 | DialogTrigger,
115 | DialogContent,
116 | DialogHeader,
117 | DialogFooter,
118 | DialogTitle,
119 | DialogDescription,
120 | }
121 |
--------------------------------------------------------------------------------
/src/components/ui/form.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import * as LabelPrimitive from "@radix-ui/react-label"
3 | import { Slot } from "@radix-ui/react-slot"
4 | import {
5 | Controller,
6 | ControllerProps,
7 | FieldPath,
8 | FieldValues,
9 | FormProvider,
10 | useFormContext,
11 | } from "react-hook-form"
12 |
13 | import { cn } from "@/lib/utils"
14 | import { Label } from "@/components/ui/label"
15 |
16 | const Form = FormProvider
17 |
18 | type FormFieldContextValue<
19 | TFieldValues extends FieldValues = FieldValues,
20 | TName extends FieldPath = FieldPath
21 | > = {
22 | name: TName
23 | }
24 |
25 | const FormFieldContext = React.createContext(
26 | {} as FormFieldContextValue
27 | )
28 |
29 | const FormField = <
30 | TFieldValues extends FieldValues = FieldValues,
31 | TName extends FieldPath = FieldPath
32 | >({
33 | ...props
34 | }: ControllerProps) => {
35 | return (
36 |
37 |
38 |
39 | )
40 | }
41 |
42 | const useFormField = () => {
43 | const fieldContext = React.useContext(FormFieldContext)
44 | const itemContext = React.useContext(FormItemContext)
45 | const { getFieldState, formState } = useFormContext()
46 |
47 | const fieldState = getFieldState(fieldContext.name, formState)
48 |
49 | if (!fieldContext) {
50 | throw new Error("useFormField should be used within ")
51 | }
52 |
53 | const { id } = itemContext
54 |
55 | return {
56 | id,
57 | name: fieldContext.name,
58 | formItemId: `${id}-form-item`,
59 | formDescriptionId: `${id}-form-item-description`,
60 | formMessageId: `${id}-form-item-message`,
61 | ...fieldState,
62 | }
63 | }
64 |
65 | type FormItemContextValue = {
66 | id: string
67 | }
68 |
69 | const FormItemContext = React.createContext(
70 | {} as FormItemContextValue
71 | )
72 |
73 | const FormItem = React.forwardRef<
74 | HTMLDivElement,
75 | React.HTMLAttributes
76 | >(({ className, ...props }, ref) => {
77 | const id = React.useId()
78 |
79 | return (
80 |
81 |
82 |
83 | )
84 | })
85 | FormItem.displayName = "FormItem"
86 |
87 | const FormLabel = React.forwardRef<
88 | React.ElementRef,
89 | React.ComponentPropsWithoutRef
90 | >(({ className, ...props }, ref) => {
91 | const { error, formItemId } = useFormField()
92 |
93 | return (
94 |
100 | )
101 | })
102 | FormLabel.displayName = "FormLabel"
103 |
104 | const FormControl = React.forwardRef<
105 | React.ElementRef,
106 | React.ComponentPropsWithoutRef
107 | >(({ ...props }, ref) => {
108 | const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
109 |
110 | return (
111 |
122 | )
123 | })
124 | FormControl.displayName = "FormControl"
125 |
126 | const FormDescription = React.forwardRef<
127 | HTMLParagraphElement,
128 | React.HTMLAttributes
129 | >(({ className, ...props }, ref) => {
130 | const { formDescriptionId } = useFormField()
131 |
132 | return (
133 |
139 | )
140 | })
141 | FormDescription.displayName = "FormDescription"
142 |
143 | const FormMessage = React.forwardRef<
144 | HTMLParagraphElement,
145 | React.HTMLAttributes
146 | >(({ className, children, ...props }, ref) => {
147 | const { error, formMessageId } = useFormField()
148 | const body = error ? String(error?.message) : children
149 |
150 | if (!body) {
151 | return null
152 | }
153 |
154 | return (
155 |
161 | {body}
162 |
163 | )
164 | })
165 | FormMessage.displayName = "FormMessage"
166 |
167 | export {
168 | useFormField,
169 | Form,
170 | FormItem,
171 | FormLabel,
172 | FormControl,
173 | FormDescription,
174 | FormMessage,
175 | FormField,
176 | }
177 |
--------------------------------------------------------------------------------
/src/components/ui/hover-card.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
3 |
4 | import { cn } from "@/lib/utils"
5 |
6 | const HoverCard = HoverCardPrimitive.Root
7 |
8 | const HoverCardTrigger = HoverCardPrimitive.Trigger
9 |
10 | const HoverCardContent = React.forwardRef<
11 | React.ElementRef,
12 | React.ComponentPropsWithoutRef
13 | >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
14 |
24 | ))
25 | HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
26 |
27 | export { HoverCard, HoverCardTrigger, HoverCardContent }
28 |
--------------------------------------------------------------------------------
/src/components/ui/input-color.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils";
2 | import { Input } from "./input";
3 | interface InputColorProps {
4 | className?: string;
5 | placeholder?: string;
6 | size?: "sm" | "lg" | "default" | "xs";
7 | value?: string;
8 | onChange?: (value: string) => void;
9 | }
10 | const InputColor = ({
11 | className,
12 | placeholder,
13 | size = "xs",
14 | value = "#44bd32",
15 | onChange,
16 | }: InputColorProps) => {
17 | return (
18 |
19 |
onChange && onChange(e.target.value)}
24 | />
25 |
32 |
4 |
5 |