gib/GibSend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial commit. gotta go

Browse Source
This commit is contained in:
Gabriel Brown
2025-09-26 14:30:57 -05:00
parent b342335502
commit eb0b35bb7f
299 changed files with 6902 additions and 6741 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/email-editor/src/components/panels/LinkEditorPanel.tsx
View File

@@ -1,6 +1,6 @@
import { Button } from "@usesend/ui/src/button";
import { CheckIcon } from "lucide-react";
import { useState, useCallback, useMemo } from "react";
import { Button } from '@usesend/ui/src/button';
import { CheckIcon } from 'lucide-react';
import { useState, useCallback, useMemo } from 'react';
export type LinkEditorPanelProps = {
initialUrl?: string;
@@ -11,7 +11,7 @@ export const useLinkEditorState = ({
initialUrl,
onSetLink,
}: LinkEditorPanelProps) => {
const [url, setUrl] = useState(initialUrl || "");
const [url, setUrl] = useState(initialUrl || '');
const onChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
setUrl(event.target.value);
@@ -22,7 +22,7 @@ export const useLinkEditorState = ({
e.preventDefault();
onSetLink(url);
},
[url, onSetLink]
[url, onSetLink],
);
return {
@@ -46,11 +46,11 @@ export const LinkEditorPanel = ({
<div className="">
<form
onSubmit={state.handleSubmit}
className="flex items-center gap-2 justify-between"
className="flex items-center justify-between gap-2"
>
<label className="flex items-center gap-2 p-2 rounded-lg cursor-text">
<label className="flex cursor-text items-center gap-2 rounded-lg p-2">
<input
className="flex-1 bg-transparent outline-none min-w-[12rem] text-black text-sm"
className="min-w-[12rem] flex-1 bg-transparent text-sm text-black outline-none"
placeholder="Enter valid url"
value={state.url}
onChange={state.onChange}

8
packages/email-editor/src/components/panels/LinkPreviewPanel.tsx
View File

@@ -1,5 +1,5 @@
import { Button } from "@usesend/ui/src/button";
import { Edit2Icon, EditIcon, Trash2Icon } from "lucide-react";
import { Button } from '@usesend/ui/src/button';
import { Edit2Icon, EditIcon, Trash2Icon } from 'lucide-react';
export type LinkPreviewPanelProps = {
url: string;
@@ -18,7 +18,7 @@ export const LinkPreviewPanel = ({
href={url}
target="_blank"
rel="noopener noreferrer"
className="text-sm underline w-[12rem] overflow-hidden text-ellipsis"
className="w-[12rem] overflow-hidden text-ellipsis text-sm underline"
>
{url}
</a>
@@ -26,7 +26,7 @@ export const LinkPreviewPanel = ({
<Edit2Icon className="h-4 w-4" />
</Button>
<Button onClick={onClear} variant="silent" size="sm" className="p-1">
<Trash2Icon className="h-4 w-4 text-destructive" />
<Trash2Icon className="text-destructive h-4 w-4" />
</Button>
</div>
);

16
packages/email-editor/src/components/panels/TextEditorPanel.tsx
View File

@@ -1,6 +1,6 @@
import { Button } from "@usesend/ui/src/button";
import { CheckIcon } from "lucide-react";
import { useState, useCallback, useMemo } from "react";
import { Button } from '@usesend/ui/src/button';
import { CheckIcon } from 'lucide-react';
import { useState, useCallback, useMemo } from 'react';
export type TextEditorPanelProps = {
initialText?: string;
@@ -11,7 +11,7 @@ export const useTextEditorState = ({
initialText,
onSetInitialText,
}: TextEditorPanelProps) => {
const [url, setUrl] = useState(initialText || "");
const [url, setUrl] = useState(initialText || '');
const onChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
setUrl(event.target.value);
@@ -22,7 +22,7 @@ export const useTextEditorState = ({
e.preventDefault();
onSetInitialText(url);
},
[url, onSetInitialText]
[url, onSetInitialText],
);
return {
@@ -46,11 +46,11 @@ export const TextEditorPanel = ({
<div className="">
<form
onSubmit={state.handleSubmit}
className="flex items-center gap-2 justify-between"
className="flex items-center justify-between gap-2"
>
<label className="flex items-center gap-2 p-2 rounded-lg cursor-text">
<label className="flex cursor-text items-center gap-2 rounded-lg p-2">
<input
className="flex-1 bg-transparent outline-none min-w-[12rem] text-black text-sm"
className="min-w-[12rem] flex-1 bg-transparent text-sm text-black outline-none"
placeholder="Enter valid url"
value={state.url}
onChange={state.onChange}

16
packages/email-editor/src/components/ui/ColorPicker.tsx
View File

@@ -1,13 +1,13 @@
"use client";
'use client';
import { Button } from "@usesend/ui/src/button";
import { Button } from '@usesend/ui/src/button';
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@usesend/ui/src/popover";
import { ReactNode, useState } from "react";
import { HexAlphaColorPicker, HexColorInput } from "react-colorful";
} from '@usesend/ui/src/popover';
import { ReactNode, useState } from 'react';
import { HexAlphaColorPicker, HexColorInput } from 'react-colorful';
type ColorPickerProps = {
color: string;
@@ -25,7 +25,7 @@ export function ColorPicker(props: ColorPickerProps) {
};
return (
<div className="min-w-[260px] rounded-xl shadow border border-gray-200 bg-white p-4">
<div className="min-w-[260px] rounded-xl border border-gray-200 bg-white p-4 shadow">
<HexAlphaColorPicker
color={color}
onChange={handleColorChange}
@@ -35,7 +35,7 @@ export function ColorPicker(props: ColorPickerProps) {
alpha={true}
color={color}
onChange={handleColorChange}
className="mt-4 bg-transparent text-black w-full min-w-0 rounded-lg border px-2 py-1.5 text-sm uppercase focus-visible:border-gray-400 focus-visible:outline-none"
className="mt-4 w-full min-w-0 rounded-lg border bg-transparent px-2 py-1.5 text-sm uppercase text-black focus-visible:border-gray-400 focus-visible:outline-none"
prefixed
/>
</div>
@@ -43,7 +43,7 @@ export function ColorPicker(props: ColorPickerProps) {
}
export function ColorPickerPopup(
props: ColorPickerProps & { trigger: ReactNode }
props: ColorPickerProps & { trigger: ReactNode },
) {
const { color, onChange } = props;

10
packages/email-editor/src/components/ui/icons/AlignmentIcon.tsx
View File

@@ -1,16 +1,16 @@
import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon } from "lucide-react";
import { AllowedAlignments } from "../../../types";
import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon } from 'lucide-react';
import { AllowedAlignments } from '../../../types';
export const AlignmentIcon = ({
alignment,
}: {
alignment: AllowedAlignments;
}) => {
if (alignment === "left") {
if (alignment === 'left') {
return <AlignLeftIcon className="h-4 w-4" />;
} else if (alignment === "center") {
} else if (alignment === 'center') {
return <AlignCenterIcon className="h-4 w-4" />;
} else if (alignment === "right") {
} else if (alignment === 'right') {
return <AlignRightIcon className="h-4 w-4" />;
}
return null;

4
packages/email-editor/src/components/ui/icons/BorderWidth.tsx
View File

@@ -1,6 +1,6 @@
import React from "react";
import React from 'react';
import { SVGProps } from "../../../types";
import { SVGProps } from '../../../types';
export const BorderWidth: React.FC<SVGProps> = (props) => {
return (

28
packages/email-editor/src/editor.tsx
View File

@@ -1,4 +1,4 @@
"use client";
'use client';
import {
BubbleMenu,
@@ -6,16 +6,16 @@ import {
EditorProvider,
FloatingMenu,
useEditor,
} from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import React, { useRef } from "react";
import { TextMenu } from "./menus/TextMenu";
import { cn } from "@usesend/ui/lib/utils";
} from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import React, { useRef } from 'react';
import { TextMenu } from './menus/TextMenu';
import { cn } from '@usesend/ui/lib/utils';
import { extensions } from "./extensions";
import LinkMenu from "./menus/LinkMenu";
import { Content, Editor as TipTapEditor } from "@tiptap/core";
import { UploadFn } from "./extensions/ImageExtension";
import { extensions } from './extensions';
import LinkMenu from './menus/LinkMenu';
import { Content, Editor as TipTapEditor } from '@tiptap/core';
import { UploadFn } from './extensions/ImageExtension';
const content = `<h2>Hello World!</h2>
@@ -82,13 +82,13 @@ export const Editor: React.FC<EditorProps> = ({
const editor = useEditor({
editorProps: {
attributes: {
class: cn("unsend-prose w-full"),
class: cn('unsend-prose w-full'),
},
handleDOMEvents: {
keydown: (_view, event) => {
// prevent default event listeners from firing when slash command is active
if (["ArrowUp", "ArrowDown", "Enter"].includes(event.key)) {
const slashCommand = document.querySelector("#slash-command");
if (['ArrowUp', 'ArrowDown', 'Enter'].includes(event.key)) {
const slashCommand = document.querySelector('#slash-command');
if (slashCommand) {
return true;
}
@@ -105,7 +105,7 @@ export const Editor: React.FC<EditorProps> = ({
return (
<div
className="bg-white rounded-md text-black p-8 unsend-editor light"
className="unsend-editor light rounded-md bg-white p-8 text-black"
ref={menuContainerRef}
>
<EditorContent editor={editor} className="min-h-[50vh]" />

38
packages/email-editor/src/extensions/ButtonExtension.ts
View File

@@ -1,11 +1,11 @@
import { mergeAttributes, Node } from "@tiptap/core";
import { ReactNodeViewRenderer } from "@tiptap/react";
import { AllowedAlignments } from "../types";
import { mergeAttributes, Node } from '@tiptap/core';
import { ReactNodeViewRenderer } from '@tiptap/react';
import { AllowedAlignments } from '../types';
import { ButtonComponent } from "../nodes/button";
import { ButtonComponent } from '../nodes/button';
// import { AllowedLogoAlignment } from '../nodes/logo';
declare module "@tiptap/core" {
declare module '@tiptap/core' {
interface Commands<ReturnType> {
button: {
setButton: () => ReturnType;
@@ -14,39 +14,39 @@ declare module "@tiptap/core" {
}
export const ButtonExtension = Node.create({
name: "button",
group: "block",
name: 'button',
group: 'block',
atom: true,
draggable: true,
addAttributes() {
return {
component: {
default: "button",
default: 'button',
},
text: {
default: "Button",
default: 'Button',
},
url: {
default: "",
default: '',
},
alignment: {
default: "left",
default: 'left',
},
borderRadius: {
default: "4",
default: '4',
},
borderWidth: {
default: "1",
default: '1',
},
buttonColor: {
default: "rgb(0, 0, 0)",
default: 'rgb(0, 0, 0)',
},
borderColor: {
default: "rgb(0, 0, 0)",
default: 'rgb(0, 0, 0)',
},
textColor: {
default: "rgb(255, 255, 255)",
default: 'rgb(255, 255, 255)',
},
};
},
@@ -61,12 +61,12 @@ export const ButtonExtension = Node.create({
renderHTML({ HTMLAttributes }) {
return [
"a",
'a',
mergeAttributes(
{
"data-unsend-component": this.name,
'data-unsend-component': this.name,
},
HTMLAttributes
HTMLAttributes,
),
];
},

48
packages/email-editor/src/extensions/ImageExtension.tsx
View File

@@ -1,10 +1,10 @@
import { ReactNodeViewRenderer } from "@tiptap/react";
import TipTapImage from "@tiptap/extension-image";
import { ResizableImageTemplate } from "../nodes/image-resize";
import { PluginKey, Plugin } from "@tiptap/pm/state";
import { toast } from "@usesend/ui/src/toaster";
import { ReactNodeViewRenderer } from '@tiptap/react';
import TipTapImage from '@tiptap/extension-image';
import { ResizableImageTemplate } from '../nodes/image-resize';
import { PluginKey, Plugin } from '@tiptap/pm/state';
import { toast } from '@usesend/ui/src/toaster';
const uploadKey = new PluginKey("upload-image");
const uploadKey = new PluginKey('upload-image');
export type UploadFn = (image: File) => Promise<string>;
@@ -17,22 +17,22 @@ export const ResizableImageExtension =
addAttributes() {
return {
...this.parent?.(),
width: { renderHTML: ({ width }) => ({ width }), default: "600" },
width: { renderHTML: ({ width }) => ({ width }), default: '600' },
height: { renderHTML: ({ height }) => ({ height }) },
borderRadius: {
default: "0",
default: '0',
},
borderWidth: {
default: "0",
default: '0',
},
borderColor: {
default: "rgb(0, 0, 0)",
default: 'rgb(0, 0, 0)',
},
alignment: {
default: "center",
renderHTML: ({ alignment }) => ({ "data-alignment": alignment }),
default: 'center',
renderHTML: ({ alignment }) => ({ 'data-alignment': alignment }),
parseHTML: (element) =>
element.getAttribute("data-alignment") || "center",
element.getAttribute('data-alignment') || 'center',
},
externalLink: {
default: null,
@@ -41,16 +41,16 @@ export const ResizableImageExtension =
return {};
}
return {
"data-external-link": externalLink,
'data-external-link': externalLink,
};
},
parseHTML: (element) => {
const externalLink = element.getAttribute("data-external-link");
const externalLink = element.getAttribute('data-external-link');
return externalLink ? { externalLink } : null;
},
},
alt: {
default: "image",
default: 'image',
},
isUploading: {
default: false,
@@ -73,16 +73,16 @@ export const ResizableImageExtension =
event.preventDefault();
const image = Array.from(event.dataTransfer.files).find(
(file) => file.type.startsWith("image/")
(file) => file.type.startsWith('image/'),
);
if (!this.options.uploadImage) {
toast.error("Upload image is not supported");
toast.error('Upload image is not supported');
return true;
}
if (!image) {
toast.error("Only image is supported");
toast.error('Only image is supported');
return true;
}
@@ -104,7 +104,7 @@ export const ResizableImageExtension =
});
const transaction = view.state.tr.insert(
coordinates?.pos || 0,
node
node,
);
view.dispatch(transaction);
@@ -117,7 +117,7 @@ export const ResizableImageExtension =
{
src: url,
isUploading: false,
}
},
);
view.dispatch(updateTransaction);
})
@@ -125,11 +125,11 @@ export const ResizableImageExtension =
// Remove the placeholder image node if there's an error
const removeTransaction = view.state.tr.delete(
coordinates?.pos || 0,
(coordinates?.pos || 0) + 1
(coordinates?.pos || 0) + 1,
);
view.dispatch(removeTransaction);
toast.error("Error uploading image:", error.message);
console.error("Error uploading image:", error);
toast.error('Error uploading image:', error.message);
console.error('Error uploading image:', error);
});
return true;

172
packages/email-editor/src/extensions/SlashCommand.tsx
View File

@@ -1,6 +1,6 @@
import { Editor, Extension, Range, ReactRenderer } from "@tiptap/react";
import Suggestion, { SuggestionOptions } from "@tiptap/suggestion";
import { cn } from "@usesend/ui/lib/utils";
import { Editor, Extension, Range, ReactRenderer } from '@tiptap/react';
import Suggestion, { SuggestionOptions } from '@tiptap/suggestion';
import { cn } from '@usesend/ui/lib/utils';
import {
CodeIcon,
DivideIcon,
@@ -17,7 +17,7 @@ import {
TextQuoteIcon,
UserXIcon,
VariableIcon,
} from "lucide-react";
} from 'lucide-react';
import {
ReactNode,
useCallback,
@@ -25,9 +25,9 @@ import {
useLayoutEffect,
useRef,
useState,
} from "react";
import tippy, { GetReferenceClientRect } from "tippy.js";
import { UploadFn } from "./ImageExtension";
} from 'react';
import tippy, { GetReferenceClientRect } from 'tippy.js';
import { UploadFn } from './ImageExtension';
export interface CommandProps {
editor: Editor;
@@ -49,11 +49,11 @@ export type SlashCommandItem = {
};
export const SlashCommand = Extension.create({
name: "slash-command",
name: 'slash-command',
addOptions() {
return {
suggestion: {
char: "/",
char: '/',
command: ({
editor,
range,
@@ -81,89 +81,89 @@ export const SlashCommand = Extension.create({
const DEFAULT_SLASH_COMMANDS = (uploadImage?: UploadFn): SlashCommandItem[] => [
{
title: "Text",
description: "Just start typing with plain text.",
searchTerms: ["p", "paragraph"],
title: 'Text',
description: 'Just start typing with plain text.',
searchTerms: ['p', 'paragraph'],
icon: <TextIcon className="h-4 w-4" />,
command: ({ editor, range }) => {
editor
.chain()
.focus()
.deleteRange(range)
.toggleNode("paragraph", "paragraph")
.toggleNode('paragraph', 'paragraph')
.run();
},
},
{
title: "Heading 1",
description: "Big section heading.",
searchTerms: ["title", "big", "large"],
title: 'Heading 1',
description: 'Big section heading.',
searchTerms: ['title', 'big', 'large'],
icon: <Heading1Icon className="h-4 w-4" />,
command: ({ editor, range }: CommandProps) => {
editor
.chain()
.focus()
.deleteRange(range)
.setNode("heading", { level: 1 })
.setNode('heading', { level: 1 })
.run();
},
},
{
title: "Heading 2",
description: "Medium section heading.",
searchTerms: ["subtitle", "medium"],
title: 'Heading 2',
description: 'Medium section heading.',
searchTerms: ['subtitle', 'medium'],
icon: <Heading2Icon className="h-4 w-4" />,
command: ({ editor, range }: CommandProps) => {
editor
.chain()
.focus()
.deleteRange(range)
.setNode("heading", { level: 2 })
.setNode('heading', { level: 2 })
.run();
},
},
{
title: "Heading 3",
description: "Small section heading.",
searchTerms: ["subtitle", "small"],
title: 'Heading 3',
description: 'Small section heading.',
searchTerms: ['subtitle', 'small'],
icon: <Heading3Icon className="h-4 w-4" />,
command: ({ editor, range }: CommandProps) => {
editor
.chain()
.focus()
.deleteRange(range)
.setNode("heading", { level: 3 })
.setNode('heading', { level: 3 })
.run();
},
},
{
title: "Bullet List",
description: "Create a simple bullet list.",
searchTerms: ["unordered", "point"],
title: 'Bullet List',
description: 'Create a simple bullet list.',
searchTerms: ['unordered', 'point'],
icon: <ListIcon className="h-4 w-4" />,
command: ({ editor, range }: CommandProps) => {
editor.chain().focus().deleteRange(range).toggleBulletList().run();
},
},
{
title: "Numbered List",
description: "Create a list with numbering.",
searchTerms: ["ordered"],
title: 'Numbered List',
description: 'Create a list with numbering.',
searchTerms: ['ordered'],
icon: <ListOrderedIcon className="h-4 w-4" />,
command: ({ editor, range }: CommandProps) => {
editor.chain().focus().deleteRange(range).toggleOrderedList().run();
},
},
{
title: "Image",
description: "Full width image",
searchTerms: ["image"],
title: 'Image',
description: 'Full width image',
searchTerms: ['image'],
icon: <ImageIcon className="h-4 w-4" />,
command: ({ editor, range }: CommandProps) => {
if (uploadImage) {
const input = document.createElement("input");
input.type = "file";
input.accept = "image/*";
const input = document.createElement('input');
input.type = 'file';
input.accept = 'image/*';
input.onchange = async () => {
const file = input.files?.[0];
if (file && uploadImage) {
@@ -173,25 +173,25 @@ const DEFAULT_SLASH_COMMANDS = (uploadImage?: UploadFn): SlashCommandItem[] => [
.chain()
.focus()
.setImage({ src: placeholder })
.updateAttributes("image", { isUploading: true })
.updateAttributes('image', { isUploading: true })
.run();
try {
console.log("before upload");
console.log('before upload');
const url = await uploadImage(file);
editor
.chain()
.focus()
.updateAttributes("image", { src: url, isUploading: false })
.updateAttributes('image', { src: url, isUploading: false })
.run();
} catch (e) {
editor.chain().focus().deleteNode("image").run();
console.error("Failed to upload image:", e);
editor.chain().focus().deleteNode('image').run();
console.error('Failed to upload image:', e);
}
}
};
input.click();
} else {
const imageUrl = prompt("Image URL: ") || "";
const imageUrl = prompt('Image URL: ') || '';
if (!imageUrl) {
return;
@@ -203,72 +203,72 @@ const DEFAULT_SLASH_COMMANDS = (uploadImage?: UploadFn): SlashCommandItem[] => [
},
},
{
title: "Hard Break",
description: "Add a break between lines.",
searchTerms: ["break", "line"],
title: 'Hard Break',
description: 'Add a break between lines.',
searchTerms: ['break', 'line'],
icon: <DivideIcon className="h-4 w-4" />,
command: ({ editor, range }: CommandProps) => {
editor.chain().focus().deleteRange(range).setHardBreak().run();
},
},
{
title: "Blockquote",
description: "Add blockquote.",
searchTerms: ["quote", "blockquote"],
title: 'Blockquote',
description: 'Add blockquote.',
searchTerms: ['quote', 'blockquote'],
icon: <TextQuoteIcon className="h-4 w-4" />,
command: ({ editor, range }: CommandProps) => {
editor.chain().focus().deleteRange(range).toggleBlockquote().run();
},
},
{
title: "Button",
description: "Add code.",
searchTerms: ["button"],
title: 'Button',
description: 'Add code.',
searchTerms: ['button'],
icon: <RectangleEllipsisIcon className="h-4 w-4" />,
command: ({ editor, range }: CommandProps) => {
editor.chain().focus().deleteRange(range).setButton().run();
},
},
{
title: "Code Block",
description: "Add code.",
searchTerms: ["code"],
title: 'Code Block',
description: 'Add code.',
searchTerms: ['code'],
icon: <CodeIcon className="h-4 w-4" />,
command: ({ editor, range }: CommandProps) => {
editor.chain().focus().deleteRange(range).toggleCodeBlock().run();
},
},
{
title: "Horizontal Rule",
description: "Add a horizontal rule.",
searchTerms: ["horizontal", "rule"],
title: 'Horizontal Rule',
description: 'Add a horizontal rule.',
searchTerms: ['horizontal', 'rule'],
icon: <SquareSplitVerticalIcon className="h-4 w-4" />,
command: ({ editor, range }: CommandProps) => {
editor.chain().focus().deleteRange(range).setHorizontalRule().run();
},
},
{
title: "Clear Line",
description: "Clear the current line.",
searchTerms: ["clear", "line"],
title: 'Clear Line',
description: 'Clear the current line.',
searchTerms: ['clear', 'line'],
icon: <EraserIcon className="h-4 w-4" />,
command: ({ editor, range }: CommandProps) => {
editor.chain().focus().selectParentNode().deleteSelection().run();
},
},
{
title: "Variable",
description: "Add a variable.",
searchTerms: ["variable"],
title: 'Variable',
description: 'Add a variable.',
searchTerms: ['variable'],
icon: <VariableIcon className="h-4 w-4" />,
command: ({ editor, range }: CommandProps) => {
editor.chain().focus().deleteRange(range).insertContent("{{").run();
editor.chain().focus().deleteRange(range).insertContent('{{').run();
},
},
{
title: "Unsubscribe Footer",
description: "Add an unsubscribe link.",
searchTerms: ["unsubscribe"],
title: 'Unsubscribe Footer',
description: 'Add an unsubscribe link.',
searchTerms: ['unsubscribe'],
icon: <UserXIcon className="h-4 w-4" />,
command: ({ editor, range }: CommandProps) => {
editor
@@ -277,7 +277,7 @@ const DEFAULT_SLASH_COMMANDS = (uploadImage?: UploadFn): SlashCommandItem[] => [
.deleteRange(range)
.setHorizontalRule()
.insertContent(
`<unsub data-unsend-component='unsubscribe-footer'><p>You are receiving this email because you opted in via our site.<br/><br/><a href="{{usesend_unsubscribe_url}}">Unsubscribe from the list</a></p><br><br><p>Company name,<br/>00 street name<br/>City, State 000000</p></unsub>`
`<unsub data-unsend-component='unsubscribe-footer'><p>You are receiving this email because you opted in via our site.<br/><br/><a href="{{usesend_unsubscribe_url}}">Unsubscribe from the list</a></p><br><br><p>Company name,<br/>00 street name<br/>City, State 000000</p></unsub>`,
)
.run();
},
@@ -318,32 +318,32 @@ const CommandList = ({
}
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[command, editor, items]
[command, editor, items],
);
useEffect(() => {
const navigationKeys = ["ArrowUp", "ArrowDown", "Enter"];
const navigationKeys = ['ArrowUp', 'ArrowDown', 'Enter'];
const onKeyDown = (e: KeyboardEvent) => {
if (navigationKeys.includes(e.key)) {
e.preventDefault();
if (e.key === "ArrowUp") {
if (e.key === 'ArrowUp') {
setSelectedIndex((selectedIndex + items.length - 1) % items.length);
return true;
}
if (e.key === "ArrowDown") {
if (e.key === 'ArrowDown') {
setSelectedIndex((selectedIndex + 1) % items.length);
return true;
}
if (e.key === "Enter") {
if (e.key === 'Enter') {
selectItem(selectedIndex);
return true;
}
return false;
}
};
document.addEventListener("keydown", onKeyDown);
document.addEventListener('keydown', onKeyDown);
return () => {
document.removeEventListener("keydown", onKeyDown);
document.removeEventListener('keydown', onKeyDown);
};
}, [items, selectedIndex, setSelectedIndex, selectItem]);
@@ -372,10 +372,10 @@ const CommandList = ({
return (
<button
className={cn(
"flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm text-gray-900 hover:bg-gray-100 hover:text-gray-900",
'flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm text-gray-900 hover:bg-gray-100 hover:text-gray-900',
index === selectedIndex
? "bg-gray-100 text-gray-900"
: "bg-transparent"
? 'bg-gray-100 text-gray-900'
: 'bg-transparent',
)}
key={index}
onClick={() => selectItem(index)}
@@ -397,13 +397,13 @@ const CommandList = ({
export function getSlashCommandSuggestions(
commands: SlashCommandItem[] = [],
uploadImage?: UploadFn
): Omit<SuggestionOptions, "editor"> {
uploadImage?: UploadFn,
): Omit<SuggestionOptions, 'editor'> {
return {
items: ({ query }) => {
return [...DEFAULT_SLASH_COMMANDS(uploadImage), ...commands].filter(
(item) => {
if (typeof query === "string" && query.length > 0) {
if (typeof query === 'string' && query.length > 0) {
const search = query.toLowerCase();
return (
item.title.toLowerCase().includes(search) ||
@@ -413,7 +413,7 @@ export function getSlashCommandSuggestions(
);
}
return true;
}
},
);
},
render: () => {
@@ -427,13 +427,13 @@ export function getSlashCommandSuggestions(
editor: props.editor,
});
popup = tippy("body", {
popup = tippy('body', {
getReferenceClientRect: props.clientRect as GetReferenceClientRect,
appendTo: () => document.body,
content: component.element,
showOnCreate: true,
interactive: true,
trigger: "manual",
trigger: 'manual',
});
},
onUpdate: (props) => {
@@ -445,7 +445,7 @@ export function getSlashCommandSuggestions(
});
},
onKeyDown: (props) => {
if (props.event.key === "Escape") {
if (props.event.key === 'Escape') {
popup?.[0].hide();
return true;

26
packages/email-editor/src/extensions/UnsubsubscribeExtension.tsx
View File

@@ -1,9 +1,9 @@
import { mergeAttributes, Node } from "@tiptap/core";
import { ReactNodeViewRenderer } from "@tiptap/react";
import { mergeAttributes, Node } from '@tiptap/core';
import { ReactNodeViewRenderer } from '@tiptap/react';
import { UnsubscribeFooterComponent } from "../nodes/unsubscribe-footer";
import { UnsubscribeFooterComponent } from '../nodes/unsubscribe-footer';
declare module "@tiptap/core" {
declare module '@tiptap/core' {
interface Commands<ReturnType> {
unsubscribeFooter: {
setUnsubscribeFooter: () => ReturnType;
@@ -12,14 +12,14 @@ declare module "@tiptap/core" {
}
export const UnsubscribeFooterExtension = Node.create({
name: "unsubscribeFooter",
group: "block",
content: "inline*",
name: 'unsubscribeFooter',
group: 'block',
content: 'inline*',
addAttributes() {
return {
component: {
default: "unsubscribeFooter",
default: 'unsubscribeFooter',
},
};
},
@@ -34,14 +34,14 @@ export const UnsubscribeFooterExtension = Node.create({
renderHTML({ HTMLAttributes }) {
return [
"unsub",
'unsub',
mergeAttributes(
{
"data-unsend-component": this.name,
class: "footer",
contenteditable: "true",
'data-unsend-component': this.name,
class: 'footer',
contenteditable: 'true',
},
HTMLAttributes
HTMLAttributes,
),
0,
];

42
packages/email-editor/src/extensions/VariableExtension.ts
View File

@@ -1,22 +1,22 @@
import { mergeAttributes, Node } from "@tiptap/core";
import { ReactNodeViewRenderer } from "@tiptap/react";
import { PluginKey } from "@tiptap/pm/state";
import Suggestion, { SuggestionOptions } from "@tiptap/suggestion";
import { VariableComponent, VariableOptions } from "../nodes/variable";
import { mergeAttributes, Node } from '@tiptap/core';
import { ReactNodeViewRenderer } from '@tiptap/react';
import { PluginKey } from '@tiptap/pm/state';
import Suggestion, { SuggestionOptions } from '@tiptap/suggestion';
import { VariableComponent, VariableOptions } from '../nodes/variable';
export interface VariableNodeAttrs extends VariableOptions {}
export type VariableExtensionOptions = {
HTMLAttributes: Record<string, any>;
suggestion: Omit<SuggestionOptions, "editor">;
suggestion: Omit<SuggestionOptions, 'editor'>;
};
export const VariablePluginKey = new PluginKey("variable");
export const VariablePluginKey = new PluginKey('variable');
export const VariableExtension = Node.create<VariableExtensionOptions>({
name: "variable",
name: 'variable',
group: "inline",
group: 'inline',
inline: true,
@@ -30,10 +30,10 @@ export const VariableExtension = Node.create<VariableExtensionOptions>({
HTMLAttributes: {},
deleteTriggerWithBackspace: false,
suggestion: {
char: "{{",
char: '{{',
pluginKey: VariablePluginKey,
command: ({ editor, range, props }) => {
console.log("props: ", props);
console.log('props: ', props);
editor
.chain()
.focus()
@@ -43,8 +43,8 @@ export const VariableExtension = Node.create<VariableExtensionOptions>({
attrs: props,
},
{
type: "text",
text: " ",
type: 'text',
text: ' ',
},
])
.run();
@@ -57,7 +57,7 @@ export const VariableExtension = Node.create<VariableExtensionOptions>({
const allow = type
? !!$from.parent.type.contentMatch.matchType(type)
: false;
console.log("allow: ", allow);
console.log('allow: ', allow);
return allow;
},
@@ -69,42 +69,42 @@ export const VariableExtension = Node.create<VariableExtensionOptions>({
return {
id: {
default: null,
parseHTML: (element) => element.getAttribute("data-id"),
parseHTML: (element) => element.getAttribute('data-id'),
renderHTML: (attributes) => {
if (!attributes.id) {
return {};
}
return {
"data-id": attributes.id,
'data-id': attributes.id,
};
},
},
name: {
default: null,
parseHTML: (element) => element.getAttribute("data-name"),
parseHTML: (element) => element.getAttribute('data-name'),
renderHTML: (attributes) => {
if (!attributes.name) {
return {};
}
return {
"data-name": attributes.name,
'data-name': attributes.name,
};
},
},
fallback: {
default: null,
parseHTML: (element) => element.getAttribute("data-fallback"),
parseHTML: (element) => element.getAttribute('data-fallback'),
renderHTML: (attributes) => {
if (!attributes.fallback) {
return {};
}
return {
"data-fallback": attributes.fallback,
'data-fallback': attributes.fallback,
};
},
},
@@ -121,7 +121,7 @@ export const VariableExtension = Node.create<VariableExtensionOptions>({
renderHTML({ HTMLAttributes }) {
return [
"span",
'span',
mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
];
},

110
packages/email-editor/src/extensions/dragHandle.ts
View File

@@ -1,13 +1,13 @@
import { Extension } from "@tiptap/core";
import { Extension } from '@tiptap/core';
import {
NodeSelection,
Plugin,
PluginKey,
TextSelection,
} from "@tiptap/pm/state";
import { Fragment, Slice, Node } from "@tiptap/pm/model";
} from '@tiptap/pm/state';
import { Fragment, Slice, Node } from '@tiptap/pm/model';
import { EditorView } from "@tiptap/pm/view";
import { EditorView } from '@tiptap/pm/view';
export interface GlobalDragHandleOptions {
/**
@@ -35,7 +35,7 @@ function absoluteRect(node: Element) {
const data = node.getBoundingClientRect();
const modal = node.closest('[role="dialog"]');
if (modal && window.getComputedStyle(modal).transform !== "none") {
if (modal && window.getComputedStyle(modal).transform !== 'none') {
const modalRect = modal.getBoundingClientRect();
return {
@@ -56,23 +56,23 @@ function nodeDOMAtCoords(coords: { x: number; y: number }) {
.elementsFromPoint(coords.x, coords.y)
.find(
(elem: Element) =>
elem.parentElement?.matches?.(".ProseMirror") ||
elem.parentElement?.matches?.('.ProseMirror') ||
elem.matches(
[
"li",
"p:not(:first-child)",
"pre",
"blockquote",
"h1, h2, h3, h4, h5, h6",
].join(", ")
)
'li',
'p:not(:first-child)',
'pre',
'blockquote',
'h1, h2, h3, h4, h5, h6',
].join(', '),
),
);
}
function nodePosAtDOM(
node: Element,
view: EditorView,
options: GlobalDragHandleOptions
options: GlobalDragHandleOptions,
) {
const boundingRect = node.getBoundingClientRect();
@@ -89,9 +89,9 @@ function calcNodePos(pos: number, view: EditorView) {
}
export function DragHandlePlugin(
options: GlobalDragHandleOptions & { pluginKey: string }
options: GlobalDragHandleOptions & { pluginKey: string },
) {
let listType = "";
let listType = '';
function handleDragStart(event: DragEvent, view: EditorView) {
view.focus();
@@ -117,11 +117,11 @@ export function DragHandlePlugin(
const nodePos = view.state.doc.resolve(fromSelectionPos);
// Check if nodePos points to the top level node
if (nodePos.node().type.name === "doc") differentNodeSelected = true;
if (nodePos.node().type.name === 'doc') differentNodeSelected = true;
else {
const nodeSelection = NodeSelection.create(
view.state.doc,
nodePos.before()
nodePos.before(),
);
// Check if the node where the drag event started is part of the current selection
@@ -140,7 +140,7 @@ export function DragHandlePlugin(
selection = TextSelection.create(
view.state.doc,
draggedNodePos,
endSelection.$to.pos
endSelection.$to.pos,
);
} else {
selection = NodeSelection.create(view.state.doc, draggedNodePos);
@@ -149,7 +149,7 @@ export function DragHandlePlugin(
// if table row is selected, go to the parent node to select the whole node
if (
(selection as NodeSelection).node.type.isInline ||
(selection as NodeSelection).node.type.name === "tableRow"
(selection as NodeSelection).node.type.name === 'tableRow'
) {
let $pos = view.state.doc.resolve(selection.from);
selection = NodeSelection.create(view.state.doc, $pos.before());
@@ -160,7 +160,7 @@ export function DragHandlePlugin(
// If the selected node is a list item, we need to save the type of the wrapping list e.g. OL or UL
if (
view.state.selection instanceof NodeSelection &&
view.state.selection.node.type.name === "listItem"
view.state.selection.node.type.name === 'listItem'
) {
listType = node.parentElement!.tagName;
}
@@ -170,9 +170,9 @@ export function DragHandlePlugin(
const { dom, text } = view.serializeForClipboard(slice);
event.dataTransfer.clearData();
event.dataTransfer.setData("text/html", dom.innerHTML);
event.dataTransfer.setData("text/plain", text);
event.dataTransfer.effectAllowed = "copyMove";
event.dataTransfer.setData('text/html', dom.innerHTML);
event.dataTransfer.setData('text/plain', text);
event.dataTransfer.effectAllowed = 'copyMove';
event.dataTransfer.setDragImage(node, 0, 0);
@@ -183,21 +183,21 @@ export function DragHandlePlugin(
function hideDragHandle() {
if (dragHandleElement) {
dragHandleElement.classList.add("hide");
dragHandleElement.classList.add('hide');
}
}
function showDragHandle() {
if (dragHandleElement) {
dragHandleElement.classList.remove("hide");
dragHandleElement.classList.remove('hide');
}
}
function hideHandleOnEditorOut(event: MouseEvent) {
if (event.target instanceof Element) {
const isInsideEditor = !!event.target.closest(".tiptap.ProseMirror");
const isInsideEditor = !!event.target.closest('.tiptap.ProseMirror');
const isHandle =
!!event.target.attributes.getNamedItem("data-drag-handle");
!!event.target.attributes.getNamedItem('data-drag-handle');
if (isInsideEditor || isHandle) return;
}
hideDragHandle();
@@ -209,28 +209,28 @@ export function DragHandlePlugin(
const handleBySelector = options.dragHandleSelector
? document.querySelector<HTMLElement>(options.dragHandleSelector)
: null;
dragHandleElement = handleBySelector ?? document.createElement("div");
dragHandleElement = handleBySelector ?? document.createElement('div');
dragHandleElement.draggable = true;
dragHandleElement.dataset.dragHandle = "";
dragHandleElement.classList.add("drag-handle");
dragHandleElement.dataset.dragHandle = '';
dragHandleElement.classList.add('drag-handle');
function onDragHandleDragStart(e: DragEvent) {
handleDragStart(e, view);
}
dragHandleElement.addEventListener("dragstart", onDragHandleDragStart);
dragHandleElement.addEventListener('dragstart', onDragHandleDragStart);
function onDragHandleDrag(e: DragEvent) {
hideDragHandle();
let scrollY = window.scrollY;
if (e.clientY < options.scrollTreshold) {
window.scrollTo({ top: scrollY - 30, behavior: "smooth" });
window.scrollTo({ top: scrollY - 30, behavior: 'smooth' });
} else if (window.innerHeight - e.clientY < options.scrollTreshold) {
window.scrollTo({ top: scrollY + 30, behavior: "smooth" });
window.scrollTo({ top: scrollY + 30, behavior: 'smooth' });
}
}
dragHandleElement.addEventListener("drag", onDragHandleDrag);
dragHandleElement.addEventListener('drag', onDragHandleDrag);
hideDragHandle();
@@ -238,8 +238,8 @@ export function DragHandlePlugin(
view?.dom?.parentElement?.appendChild(dragHandleElement);
}
view?.dom?.parentElement?.parentElement?.addEventListener(
"mouseleave",
hideHandleOnEditorOut
'mouseleave',
hideHandleOnEditorOut,
);
return {
@@ -247,15 +247,15 @@ export function DragHandlePlugin(
if (!handleBySelector) {
dragHandleElement?.remove?.();
}
dragHandleElement?.removeEventListener("drag", onDragHandleDrag);
dragHandleElement?.removeEventListener('drag', onDragHandleDrag);
dragHandleElement?.removeEventListener(
"dragstart",
onDragHandleDragStart
'dragstart',
onDragHandleDragStart,
);
dragHandleElement = null;
view?.dom?.parentElement?.parentElement?.removeEventListener(
"mouseleave",
hideHandleOnEditorOut
'mouseleave',
hideHandleOnEditorOut,
);
},
};
@@ -272,10 +272,10 @@ export function DragHandlePlugin(
y: event.clientY,
});
const notDragging = node?.closest(".not-draggable");
const notDragging = node?.closest('.not-draggable');
const excludedTagList = options.excludedTags
.concat(["ol", "ul"])
.join(", ");
.concat(['ol', 'ul'])
.join(', ');
if (
!(node instanceof Element) ||
@@ -298,7 +298,7 @@ export function DragHandlePlugin(
rect.top += (lineHeight - 24) / 2;
rect.top += paddingTop;
// Li markers
if (node.matches("ul:not([data-type=taskList]) li, ol li")) {
if (node.matches('ul:not([data-type=taskList]) li, ol li')) {
rect.left -= options.dragHandleWidth;
}
rect.width = options.dragHandleWidth;
@@ -317,10 +317,10 @@ export function DragHandlePlugin(
},
// dragging class is used for CSS
dragstart: (view) => {
view.dom.classList.add("dragging");
view.dom.classList.add('dragging');
},
drop: (view, event) => {
view.dom.classList.remove("dragging");
view.dom.classList.remove('dragging');
hideDragHandle();
let droppedNode: Node | null = null;
const dropPos = view.posAtCoords({
@@ -338,25 +338,25 @@ export function DragHandlePlugin(
const resolvedPos = view.state.doc.resolve(dropPos.pos);
const isDroppedInsideList =
resolvedPos.parent.type.name === "listItem";
resolvedPos.parent.type.name === 'listItem';
// If the selected node is a list item and is not dropped inside a list, we need to wrap it inside <ol> tag otherwise ol list items will be transformed into ul list item when dropped
if (
view.state.selection instanceof NodeSelection &&
view.state.selection.node.type.name === "listItem" &&
view.state.selection.node.type.name === 'listItem' &&
!isDroppedInsideList &&
listType == "OL"
listType == 'OL'
) {
const newList = view.state.schema.nodes.orderedList?.createAndFill(
null,
droppedNode
droppedNode,
);
const slice = new Slice(Fragment.from(newList), 0, 0);
view.dragging = { slice, move: event.ctrlKey };
}
},
dragend: (view) => {
view.dom.classList.remove("dragging");
view.dom.classList.remove('dragging');
},
},
},
@@ -364,7 +364,7 @@ export function DragHandlePlugin(
}
const GlobalDragHandle = Extension.create({
name: "globalDragHandle",
name: 'globalDragHandle',
addOptions() {
return {
@@ -377,7 +377,7 @@ const GlobalDragHandle = Extension.create({
addProseMirrorPlugins() {
return [
DragHandlePlugin({
pluginKey: "globalDragHandle",
pluginKey: 'globalDragHandle',
dragHandleWidth: this.options.dragHandleWidth,
scrollTreshold: this.options.scrollTreshold,
dragHandleSelector: this.options.dragHandleSelector,

48
packages/email-editor/src/extensions/index.ts
View File

@@ -1,22 +1,22 @@
import StarterKit from "@tiptap/starter-kit";
import Underline from "@tiptap/extension-underline";
import Link from "@tiptap/extension-link";
import TextAlign from "@tiptap/extension-text-align";
import Paragraph from "@tiptap/extension-paragraph";
import Heading from "@tiptap/extension-heading";
import CodeBlock from "@tiptap/extension-code-block";
import TextStyle from "@tiptap/extension-text-style";
import { Color } from "@tiptap/extension-color";
import TaskItem from "@tiptap/extension-task-item";
import TaskList from "@tiptap/extension-task-list";
import Placeholder from "@tiptap/extension-placeholder";
import GlobalDragHandle from "./dragHandle";
import { ButtonExtension } from "./ButtonExtension";
import { SlashCommand, getSlashCommandSuggestions } from "./SlashCommand";
import { VariableExtension } from "./VariableExtension";
import { getVariableSuggestions } from "../nodes/variable";
import { UnsubscribeFooterExtension } from "./UnsubsubscribeExtension";
import { ResizableImageExtension, UploadFn } from "./ImageExtension";
import StarterKit from '@tiptap/starter-kit';
import Underline from '@tiptap/extension-underline';
import Link from '@tiptap/extension-link';
import TextAlign from '@tiptap/extension-text-align';
import Paragraph from '@tiptap/extension-paragraph';
import Heading from '@tiptap/extension-heading';
import CodeBlock from '@tiptap/extension-code-block';
import TextStyle from '@tiptap/extension-text-style';
import { Color } from '@tiptap/extension-color';
import TaskItem from '@tiptap/extension-task-item';
import TaskList from '@tiptap/extension-task-list';
import Placeholder from '@tiptap/extension-placeholder';
import GlobalDragHandle from './dragHandle';
import { ButtonExtension } from './ButtonExtension';
import { SlashCommand, getSlashCommandSuggestions } from './SlashCommand';
import { VariableExtension } from './VariableExtension';
import { getVariableSuggestions } from '../nodes/variable';
import { UnsubscribeFooterExtension } from './UnsubsubscribeExtension';
import { ResizableImageExtension, UploadFn } from './ImageExtension';
export function extensions({
variables,
@@ -31,25 +31,25 @@ export function extensions({
levels: [1, 2, 3],
},
dropcursor: {
color: "#555",
color: '#555',
width: 3,
},
code: {
HTMLAttributes: {
class:
"p-0.5 px-2 bg-slate-200 text-black text-sm rounded tracking-normal font-normal",
'p-0.5 px-2 bg-slate-200 text-black text-sm rounded tracking-normal font-normal',
},
},
blockquote: {
HTMLAttributes: {
class: "not-prose border-l-4 border-gray-300 pl-4 mt-4 mb-4",
class: 'not-prose border-l-4 border-gray-300 pl-4 mt-4 mb-4',
},
},
}),
Underline,
Link.configure({
HTMLAttributes: {
class: "underline cursor-pointer",
class: 'underline cursor-pointer',
},
openOnClick: false,
}),
@@ -59,7 +59,7 @@ export function extensions({
CodeBlock.configure({
HTMLAttributes: {
class:
"p-4 bg-slate-800 text-gray-100 text-sm rounded-md tracking-normal font-normal",
'p-4 bg-slate-800 text-gray-100 text-sm rounded-md tracking-normal font-normal',
},
}),
Heading.configure({

4
packages/email-editor/src/hooks/useEvent.ts
View File

@@ -1,4 +1,4 @@
import { useCallback, useLayoutEffect, useRef } from "react";
import { useCallback, useLayoutEffect, useRef } from 'react';
export const useEvent = <T extends (...args: any[]) => any>(handler: T): T => {
const handlerRef = useRef<T | null>(null);
@@ -9,7 +9,7 @@ export const useEvent = <T extends (...args: any[]) => any>(handler: T): T => {
return useCallback((...args: Parameters<T>): ReturnType<T> => {
if (handlerRef.current === null) {
throw new Error("Handler is not assigned");
throw new Error('Handler is not assigned');
}
return handlerRef.current(...args);
}, []) as T;

4
packages/email-editor/src/index.ts
View File

@@ -1,3 +1,3 @@
import "./styles/index.css";
import './styles/index.css';
export * from "./editor";
export * from './editor';

26
packages/email-editor/src/menus/LinkMenu.tsx
View File

@@ -1,19 +1,19 @@
import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react";
import React, { useCallback, useState } from "react";
import { BubbleMenu as BaseBubbleMenu } from '@tiptap/react';
import React, { useCallback, useState } from 'react';
import { MenuProps } from "../types";
import { LinkPreviewPanel } from "../components/panels/LinkPreviewPanel";
import { LinkEditorPanel } from "../components/panels/LinkEditorPanel";
import { MenuProps } from '../types';
import { LinkPreviewPanel } from '../components/panels/LinkPreviewPanel';
import { LinkEditorPanel } from '../components/panels/LinkEditorPanel';
export const LinkMenu = ({ editor, appendTo }: MenuProps): React.ReactNode => {
const [showEdit, setShowEdit] = useState(false);
const shouldShow = useCallback(() => {
const isActive = editor.isActive("link");
const isActive = editor.isActive('link');
return isActive;
}, [editor]);
const { href: link } = editor.getAttributes("link");
const { href: link } = editor.getAttributes('link');
const handleEdit = useCallback(() => {
setShowEdit(true);
@@ -24,16 +24,16 @@ export const LinkMenu = ({ editor, appendTo }: MenuProps): React.ReactNode => {
editor
.chain()
.focus()
.extendMarkRange("link")
.setLink({ href: url, target: "_blank" })
.extendMarkRange('link')
.setLink({ href: url, target: '_blank' })
.run();
setShowEdit(false);
},
[editor]
[editor],
);
const onUnsetLink = useCallback(() => {
editor.chain().focus().extendMarkRange("link").unsetLink().run();
editor.chain().focus().extendMarkRange('link').unsetLink().run();
setShowEdit(false);
return null;
}, [editor]);
@@ -54,7 +54,7 @@ export const LinkMenu = ({ editor, appendTo }: MenuProps): React.ReactNode => {
updateDelay={0}
tippyOptions={{
popperOptions: {
modifiers: [{ name: "flip", enabled: false }],
modifiers: [{ name: 'flip', enabled: false }],
},
appendTo: () => {
return appendTo?.current;
@@ -63,7 +63,7 @@ export const LinkMenu = ({ editor, appendTo }: MenuProps): React.ReactNode => {
setShowEdit(false);
},
}}
className="flex gap-1 rounded-md border border-gray-200 bg-white p-1 shadow-md items-center mt-4"
className="mt-4 flex items-center gap-1 rounded-md border border-gray-200 bg-white p-1 shadow-md"
>
{showEdit ? (
<LinkEditorPanel initialUrl={link} onSetLink={onSetLink} />

216
packages/email-editor/src/menus/TextMenu.tsx
View File

@@ -1,4 +1,4 @@
import { BubbleMenu, BubbleMenuProps, isTextSelection } from "@tiptap/react";
import { BubbleMenu, BubbleMenuProps, isTextSelection } from '@tiptap/react';
import {
AlignCenterIcon,
AlignLeftIcon,
@@ -19,17 +19,17 @@ import {
TextIcon,
TextQuoteIcon,
UnderlineIcon,
} from "lucide-react";
import { TextMenuButton } from "./TextMenuButton";
import { Button } from "@usesend/ui/src/button";
} from 'lucide-react';
import { TextMenuButton } from './TextMenuButton';
import { Button } from '@usesend/ui/src/button';
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@usesend/ui/src/popover";
import { Separator } from "@usesend/ui/src/separator";
import { useMemo, useState } from "react";
import { LinkEditorPanel } from "../components/panels/LinkEditorPanel";
} from '@usesend/ui/src/popover';
import { Separator } from '@usesend/ui/src/separator';
import { useMemo, useState } from 'react';
import { LinkEditorPanel } from '../components/panels/LinkEditorPanel';
// import { allowedLogoAlignment } from "../nodes/logo";
export interface TextMenuItem {
@@ -40,12 +40,12 @@ export interface TextMenuItem {
icon?: LucideIcon;
}
export type TextMenuProps = Omit<BubbleMenuProps, "children">;
export type TextMenuProps = Omit<BubbleMenuProps, 'children'>;
export type ContentTypePickerOption = {
label: string;
id: string;
type: "option";
type: 'option';
disabled: () => boolean | undefined;
isActive: () => boolean | undefined;
onClick: () => void;
@@ -54,40 +54,40 @@ export type ContentTypePickerOption = {
const textColors = [
{
name: "default",
value: "#000000",
name: 'default',
value: '#000000',
},
{
name: "red",
value: "#dc2626",
name: 'red',
value: '#dc2626',
},
{
name: "green",
value: "#16a34a",
name: 'green',
value: '#16a34a',
},
{
name: "blue",
value: "#2563eb",
name: 'blue',
value: '#2563eb',
},
{
name: "yellow",
value: "#eab308",
name: 'yellow',
value: '#eab308',
},
{
name: "purple",
value: "#a855f7",
name: 'purple',
value: '#a855f7',
},
{
name: "orange",
value: "#f97316",
name: 'orange',
value: '#f97316',
},
{
name: "pink",
value: "#db2777",
name: 'pink',
value: '#db2777',
},
{
name: "gray",
value: "#6b7280",
name: 'gray',
value: '#6b7280',
},
];
@@ -95,7 +95,7 @@ export function TextMenu(props: TextMenuProps) {
const { editor } = props;
const icons = [AlignLeftIcon, AlignCenterIcon, AlignRightIcon];
const alignmentItems: TextMenuItem[] = ["left", "center", "right"].map(
const alignmentItems: TextMenuItem[] = ['left', 'center', 'right'].map(
(alignment, index) => ({
name: alignment,
isActive: () => editor?.isActive({ textAlign: alignment })!,
@@ -107,44 +107,44 @@ export function TextMenu(props: TextMenuProps) {
}
},
icon: icons[index],
})
}),
);
const items: TextMenuItem[] = useMemo(
() => [
{
name: "bold",
isActive: () => editor?.isActive("bold")!,
name: 'bold',
isActive: () => editor?.isActive('bold')!,
command: () => editor?.chain().focus().toggleBold().run()!,
icon: BoldIcon,
},
{
name: "italic",
isActive: () => editor?.isActive("italic")!,
name: 'italic',
isActive: () => editor?.isActive('italic')!,
command: () => editor?.chain().focus().toggleItalic().run()!,
icon: ItalicIcon,
},
{
name: "underline",
isActive: () => editor?.isActive("underline")!,
name: 'underline',
isActive: () => editor?.isActive('underline')!,
command: () => editor?.chain().focus().toggleUnderline().run()!,
icon: UnderlineIcon,
},
{
name: "strike",
isActive: () => editor?.isActive("strike")!,
name: 'strike',
isActive: () => editor?.isActive('strike')!,
command: () => editor?.chain().focus().toggleStrike().run()!,
icon: StrikethroughIcon,
},
{
name: "code",
isActive: () => editor?.isActive("code")!,
name: 'code',
isActive: () => editor?.isActive('code')!,
command: () => editor?.chain().focus().toggleCode().run()!,
icon: CodeIcon,
},
...alignmentItems,
],
[editor]
[editor],
);
const contentTypePickerOptions: ContentTypePickerOption[] = useMemo(
@@ -163,19 +163,19 @@ export function TextMenu(props: TextMenuProps) {
editor
?.chain()
.focus()
.lift("taskItem")
.liftListItem("listItem")
.lift('taskItem')
.liftListItem('listItem')
.setParagraph()
.run(),
id: "text",
id: 'text',
disabled: () => !editor?.can().setParagraph(),
isActive: () =>
editor?.isActive("paragraph") &&
!editor?.isActive("orderedList") &&
!editor?.isActive("bulletList") &&
!editor?.isActive("taskList"),
label: "Text",
type: "option",
editor?.isActive('paragraph') &&
!editor?.isActive('orderedList') &&
!editor?.isActive('bulletList') &&
!editor?.isActive('taskList'),
label: 'Text',
type: 'option',
},
{
icon: Heading1Icon,
@@ -183,15 +183,15 @@ export function TextMenu(props: TextMenuProps) {
editor
?.chain()
.focus()
.lift("taskItem")
.liftListItem("listItem")
.lift('taskItem')
.liftListItem('listItem')
.setHeading({ level: 1 })
.run(),
id: "heading1",
id: 'heading1',
disabled: () => !editor?.can().setHeading({ level: 1 }),
isActive: () => editor?.isActive("heading", { level: 1 }),
label: "Heading 1",
type: "option",
isActive: () => editor?.isActive('heading', { level: 1 }),
label: 'Heading 1',
type: 'option',
},
{
icon: Heading2Icon,
@@ -199,15 +199,15 @@ export function TextMenu(props: TextMenuProps) {
editor
?.chain()
?.focus()
?.lift("taskItem")
.liftListItem("listItem")
?.lift('taskItem')
.liftListItem('listItem')
.setHeading({ level: 2 })
.run(),
id: "heading2",
id: 'heading2',
disabled: () => !editor?.can().setHeading({ level: 2 }),
isActive: () => editor?.isActive("heading", { level: 2 }),
label: "Heading 2",
type: "option",
isActive: () => editor?.isActive('heading', { level: 2 }),
label: 'Heading 2',
type: 'option',
},
{
icon: Heading3Icon,
@@ -215,36 +215,36 @@ export function TextMenu(props: TextMenuProps) {
editor
?.chain()
?.focus()
?.lift("taskItem")
.liftListItem("listItem")
?.lift('taskItem')
.liftListItem('listItem')
.setHeading({ level: 3 })
.run(),
id: "heading3",
id: 'heading3',
disabled: () => !editor?.can().setHeading({ level: 3 }),
isActive: () => editor?.isActive("heading", { level: 3 }),
label: "Heading 3",
type: "option",
isActive: () => editor?.isActive('heading', { level: 3 }),
label: 'Heading 3',
type: 'option',
},
{
icon: ListIcon,
onClick: () => editor?.chain()?.focus()?.toggleBulletList()?.run(),
id: "bulletList",
id: 'bulletList',
disabled: () => !editor?.can()?.toggleBulletList(),
isActive: () => editor?.isActive("bulletList"),
label: "Bullet list",
type: "option",
isActive: () => editor?.isActive('bulletList'),
label: 'Bullet list',
type: 'option',
},
{
icon: ListOrderedIcon,
onClick: () => editor?.chain()?.focus()?.toggleOrderedList()?.run(),
id: "orderedList",
id: 'orderedList',
disabled: () => !editor?.can()?.toggleOrderedList(),
isActive: () => editor?.isActive("orderedList"),
label: "Numbered list",
type: "option",
isActive: () => editor?.isActive('orderedList'),
label: 'Numbered list',
type: 'option',
},
],
[editor, editor?.state]
[editor, editor?.state],
);
const bubbleMenuProps: TextMenuProps = {
@@ -263,13 +263,13 @@ export function TextMenu(props: TextMenuProps) {
empty ||
isEmptyTextBlock ||
!editor.isEditable ||
editor.isActive("image") ||
editor.isActive("logo") ||
editor.isActive("spacer") ||
editor.isActive("variable") ||
editor.isActive("link") ||
editor.isActive('image') ||
editor.isActive('logo') ||
editor.isActive('spacer') ||
editor.isActive('variable') ||
editor.isActive('link') ||
editor.isActive({
component: "button",
component: 'button',
})
) {
return false;
@@ -278,24 +278,24 @@ export function TextMenu(props: TextMenuProps) {
return true;
},
tippyOptions: {
maxWidth: "100%",
moveTransition: "transform 0.15s ease-out",
maxWidth: '100%',
moveTransition: 'transform 0.15s ease-out',
},
};
const selectedColor = editor?.getAttributes("textStyle")?.color;
const selectedColor = editor?.getAttributes('textStyle')?.color;
const activeItem = useMemo(
() =>
contentTypePickerOptions.find(
(option) => option.type === "option" && option.isActive()
(option) => option.type === 'option' && option.isActive(),
),
[contentTypePickerOptions]
[contentTypePickerOptions],
);
return (
<BubbleMenu
{...bubbleMenuProps}
className="flex gap-1 rounded-md border border-gray-200 bg-white shadow-md items-center"
className="flex items-center gap-1 rounded-md border border-gray-200 bg-white shadow-md"
>
<ContentTypePicker options={contentTypePickerOptions} />
<EditLinkPopover
@@ -303,7 +303,7 @@ export function TextMenu(props: TextMenuProps) {
editor
?.chain()
.focus()
.setLink({ href: url, target: "_blank" })
.setLink({ href: url, target: '_blank' })
.run();
// editor?.commands.blur();
@@ -321,28 +321,28 @@ export function TextMenu(props: TextMenuProps) {
className="hover:bg-slate-100 hover:text-slate-900"
>
<span style={{ color: selectedColor }}>A</span>
<ChevronDown className="h-4 w-4 ml-1.5 text-gray-800" />
<ChevronDown className="ml-1.5 h-4 w-4 text-gray-800" />
</Button>
</PopoverTrigger>
<PopoverContent
side="bottom"
align="start"
className="bg-white text-slate-900 w-52 px-1 border border-gray-200"
className="w-52 border border-gray-200 bg-white px-1 text-slate-900"
sideOffset={16}
>
{textColors.map((color) => (
<button
key={color.value}
onClick={() => editor?.chain().setColor(color.value).run()}
className={`flex gap-2 items-center p-1 px-2 w-full ${
className={`flex w-full items-center gap-2 p-1 px-2 ${
selectedColor === color.value ||
(selectedColor === undefined && color.value === "#000000")
? "bg-gray-200 rounded-md"
: ""
(selectedColor === undefined && color.value === '#000000')
? 'rounded-md bg-gray-200'
: ''
}`}
>
<span style={{ color: color.value }}>A</span>
<span className=" capitalize">{color.name}</span>
<span className="capitalize">{color.name}</span>
</button>
))}
</PopoverContent>
@@ -358,7 +358,7 @@ type ContentTypePickerProps = {
function ContentTypePicker({ options }: ContentTypePickerProps) {
const activeOption = useMemo(
() => options.find((option) => option.isActive()),
[options]
[options],
);
return (
@@ -366,16 +366,16 @@ function ContentTypePicker({ options }: ContentTypePickerProps) {
<PopoverTrigger asChild>
<Button
variant="ghost"
className="hover:bg-slate-100 hover:text-slate-600 text-slate-600 px-2"
className="px-2 text-slate-600 hover:bg-slate-100 hover:text-slate-600"
>
<span>{activeOption?.label || "Text"}</span>
<ChevronDown className="h-4 w-4 ml-1.5 text-gray-800" />
<span>{activeOption?.label || 'Text'}</span>
<ChevronDown className="ml-1.5 h-4 w-4 text-gray-800" />
</Button>
</PopoverTrigger>
<PopoverContent
side="bottom"
align="start"
className="bg-white border-gray-200 text-slate-900 w-52 px-1"
className="w-52 border-gray-200 bg-white px-1 text-slate-900"
sideOffset={16}
>
{options.map((option) => (
@@ -384,12 +384,12 @@ function ContentTypePicker({ options }: ContentTypePickerProps) {
onClick={() => {
option.onClick();
}}
className={`flex gap-2 items-center p-1 px-2 w-full ${
option.isActive() ? "bg-slate-100 rounded-md" : ""
className={`flex w-full items-center gap-2 p-1 px-2 ${
option.isActive() ? 'rounded-md bg-slate-100' : ''
}`}
>
<option.icon className="h-3.5 w-3.5" />
<span className=" capitalize">{option.label}</span>
<span className="capitalize">{option.label}</span>
</button>
))}
</PopoverContent>
@@ -407,16 +407,16 @@ function EditLinkPopover({ onSetLink }: EditLinkPopoverType) {
<PopoverTrigger asChild>
<Button
variant="ghost"
className="hover:bg-slate-100 hover:text-slate-600 text-slate-600 px-2"
className="px-2 text-slate-600 hover:bg-slate-100 hover:text-slate-600"
>
<span>Link</span>
<LinkIcon className="h-3.5 w-3.5 ml-1.5 text-gray-800" />
<LinkIcon className="ml-1.5 h-3.5 w-3.5 text-gray-800" />
</Button>
</PopoverTrigger>
<PopoverContent
side="bottom"
align="start"
className="bg-white text-slate-900 px-1 w-[17rem] py-1 border border-gray-200"
className="w-[17rem] border border-gray-200 bg-white px-1 py-1 text-slate-900"
sideOffset={16}
>
<LinkEditorPanel onSetLink={onSetLink} />

14
packages/email-editor/src/menus/TextMenuButton.tsx
View File

@@ -1,7 +1,7 @@
import { Button } from "@usesend/ui/src/button";
import { cn } from "@usesend/ui/lib/utils";
import { Button } from '@usesend/ui/src/button';
import { cn } from '@usesend/ui/lib/utils';
import { TextMenuItem } from "./TextMenu";
import { TextMenuItem } from './TextMenu';
export function TextMenuButton(item: TextMenuItem) {
return (
@@ -10,16 +10,16 @@ export function TextMenuButton(item: TextMenuItem) {
size="sm"
onClick={item.command}
className={cn(
"px-2.5 hover:bg-slate-100 hover:text-black",
item.isActive() ? "bg-slate-300" : ""
'px-2.5 hover:bg-slate-100 hover:text-black',
item.isActive() ? 'bg-slate-300' : '',
)}
type="button"
>
{item.icon ? (
<item.icon
className={cn(
"h-3.5 w-3.5",
item.isActive() ? "text-black" : "text-slate-700"
'h-3.5 w-3.5',
item.isActive() ? 'text-black' : 'text-slate-700',
)}
/>
) : (

82
packages/email-editor/src/nodes/button.tsx
View File

@@ -1,4 +1,4 @@
import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
import { NodeViewProps, NodeViewWrapper } from '@tiptap/react';
import {
AlignCenterIcon,
AlignLeftIcon,
@@ -6,29 +6,29 @@ import {
BoxSelectIcon,
LinkIcon,
ScanIcon,
} from "lucide-react";
} from 'lucide-react';
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@usesend/ui/src/popover";
import { cn } from "@usesend/ui/lib/utils";
import { Input } from "@usesend/ui/src/input";
import { Button } from "@usesend/ui/src/button";
import { AllowedAlignments, ButtonOptions } from "../types";
import { Separator } from "@usesend/ui/src/separator";
import { BorderWidth } from "../components/ui/icons/BorderWidth";
import { ColorPickerPopup } from "../components/ui/ColorPicker";
import { LinkEditorPanel } from "../components/panels/LinkEditorPanel";
import { useState } from "react";
} from '@usesend/ui/src/popover';
import { cn } from '@usesend/ui/lib/utils';
import { Input } from '@usesend/ui/src/input';
import { Button } from '@usesend/ui/src/button';
import { AllowedAlignments, ButtonOptions } from '../types';
import { Separator } from '@usesend/ui/src/separator';
import { BorderWidth } from '../components/ui/icons/BorderWidth';
import { ColorPickerPopup } from '../components/ui/ColorPicker';
import { LinkEditorPanel } from '../components/panels/LinkEditorPanel';
import { useState } from 'react';
import {
Tooltip,
TooltipProvider,
TooltipContent,
TooltipTrigger,
} from "@usesend/ui/src/tooltip";
} from '@usesend/ui/src/tooltip';
const alignments: Array<AllowedAlignments> = ["left", "center", "right"];
const alignments: Array<AllowedAlignments> = ['left', 'center', 'right'];
export function ButtonComponent(props: NodeViewProps) {
const {
@@ -50,7 +50,7 @@ export function ButtonComponent(props: NodeViewProps) {
return (
<NodeViewWrapper
className={`react-component ${
props.selected && "ProseMirror-selectednode"
props.selected && 'ProseMirror-selectednode'
}`}
draggable="true"
data-drag-handle=""
@@ -63,17 +63,17 @@ export function ButtonComponent(props: NodeViewProps) {
<div>
<div
className={cn(
"cursor-pointer",
"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors disabled:pointer-events-none disabled:opacity-50",
"h-10 px-4 py-2",
"px-[32px] py-[20px] font-semibold no-underline"
'cursor-pointer',
'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors disabled:pointer-events-none disabled:opacity-50',
'h-10 px-4 py-2',
'px-[32px] py-[20px] font-semibold no-underline',
)}
tabIndex={-1}
style={{
backgroundColor: buttonColor,
color: textColor,
borderWidth: Number(borderWidth),
borderStyle: "solid",
borderStyle: 'solid',
borderColor: borderColor,
borderRadius: Number(_radius),
}}
@@ -85,14 +85,14 @@ export function ButtonComponent(props: NodeViewProps) {
>
<div className="relative flex max-w-full items-center">
{props.selected}
<div className="inset-0 flex items-center overflow-hidden ">
<div className="inset-0 flex items-center overflow-hidden">
<span
className={cn(
" cursor-text",
props.selected ? "text-transparent" : ""
'cursor-text',
props.selected ? 'text-transparent' : '',
)}
>
{text === "" ? "Button text" : text}
{text === '' ? 'Button text' : text}
</span>
</div>
{props.selected ? (
@@ -102,11 +102,11 @@ export function ButtonComponent(props: NodeViewProps) {
e.preventDefault();
const endPos = props.getPos() + props.node.nodeSize;
editor.commands.focus("start");
editor.commands.focus('start');
editor
.chain()
.insertContentAt(endPos, { type: "paragraph" })
.insertContentAt(endPos, { type: 'paragraph' })
.focus(endPos)
.run();
}}
@@ -134,7 +134,7 @@ export function ButtonComponent(props: NodeViewProps) {
<PopoverContent
align="start"
side="top"
className="space-y-2 w-[28rem] light border-gray-200 py-1 px-1"
className="light w-[28rem] space-y-2 border-gray-200 px-1 py-1"
sideOffset={10}
onOpenAutoFocus={(e) => e.preventDefault()}
onCloseAutoFocus={(e) => e.preventDefault()}
@@ -162,7 +162,7 @@ export function ButtonComponent(props: NodeViewProps) {
</div> */}
<TooltipProvider>
<div className="flex gap-1 items-center">
<div className="flex items-center gap-1">
<div>
<div className="flex">
{alignments.map((alignment) => (
@@ -190,7 +190,7 @@ export function ButtonComponent(props: NodeViewProps) {
))}
</div>
</div>
<Separator orientation="vertical" className=" h-6 my-auto" />
<Separator orientation="vertical" className="my-auto h-6" />
<div>
<div className="flex">
<Tooltip>
@@ -240,13 +240,13 @@ export function ButtonComponent(props: NodeViewProps) {
</Tooltip>
</div>
</div>
<Separator orientation="vertical" className=" h-6 my-auto" />
<Separator orientation="vertical" className="my-auto h-6" />
<div>
<div className="flex gap-1">
<Tooltip>
<TooltipTrigger>
<div className="flex items-center border border-transparent hover:border-border focus-within:border-border gap-1 px-1 py-0.5 rounded-md">
<ScanIcon className="text-slate-700 h-4 w-4" />
<div className="hover:border-border focus-within:border-border flex items-center gap-1 rounded-md border border-transparent px-1 py-0.5">
<ScanIcon className="h-4 w-4 text-slate-700" />
<Input
value={_radius}
onChange={(e) =>
@@ -254,7 +254,7 @@ export function ButtonComponent(props: NodeViewProps) {
borderRadius: e.target.value,
})
}
className="border-0 focus-visible:ring-0 h-6 p-0 w-5"
className="h-6 w-5 border-0 p-0 focus-visible:ring-0"
/>
</div>
</TooltipTrigger>
@@ -262,8 +262,8 @@ export function ButtonComponent(props: NodeViewProps) {
</Tooltip>
<Tooltip>
<TooltipTrigger>
<div className="flex items-center border border-transparent hover:border-border focus-within:border-border gap-1 px-1 py-0.5 rounded-md">
<BorderWidth className="text-slate-700 h-4 w-4" />
<div className="hover:border-border focus-within:border-border flex items-center gap-1 rounded-md border border-transparent px-1 py-0.5">
<BorderWidth className="h-4 w-4 text-slate-700" />
<Input
value={borderWidth}
onChange={(e) =>
@@ -271,7 +271,7 @@ export function ButtonComponent(props: NodeViewProps) {
borderWidth: e.target.value,
})
}
className="border-0 focus-visible:ring-0 h-6 p-0 w-5"
className="h-6 w-5 border-0 p-0 focus-visible:ring-0"
/>
</div>
</TooltipTrigger>
@@ -299,7 +299,7 @@ export function ButtonComponent(props: NodeViewProps) {
</Tooltip>
</div>
</div>
<Separator orientation="vertical" className=" h-6 my-auto" />
<Separator orientation="vertical" className="my-auto h-6" />
<Popover open={editUrlOpen} onOpenChange={setEditUrlOpen}>
<PopoverTrigger asChild>
<Button
@@ -309,7 +309,7 @@ export function ButtonComponent(props: NodeViewProps) {
type="button"
>
Link
<LinkIcon className="h-4 w-4 ml-2" />
<LinkIcon className="ml-2 h-4 w-4" />
</Button>
</PopoverTrigger>
<PopoverContent className="light border-gray-200 px-4 py-2">
@@ -333,11 +333,11 @@ export function ButtonComponent(props: NodeViewProps) {
}
const AlignmentIcon = ({ alignment }: { alignment: AllowedAlignments }) => {
if (alignment === "left") {
if (alignment === 'left') {
return <AlignLeftIcon className="h-4 w-4" />;
} else if (alignment === "center") {
} else if (alignment === 'center') {
return <AlignCenterIcon className="h-4 w-4" />;
} else if (alignment === "right") {
} else if (alignment === 'right') {
return <AlignRightIcon className="h-4 w-4" />;
}
return null;

132
packages/email-editor/src/nodes/image-resize.tsx
View File

@@ -1,37 +1,37 @@
import { NodeViewProps } from "@tiptap/core";
import { CSSProperties, useRef, useState } from "react";
import { useEvent } from "../hooks/useEvent";
import { NodeViewWrapper } from "@tiptap/react";
import { NodeViewProps } from '@tiptap/core';
import { CSSProperties, useRef, useState } from 'react';
import { useEvent } from '../hooks/useEvent';
import { NodeViewWrapper } from '@tiptap/react';
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@usesend/ui/src/popover";
} from '@usesend/ui/src/popover';
import {
ExpandIcon,
ScanIcon,
LinkIcon,
ImageIcon,
TypeIcon,
} from "lucide-react";
import { Input } from "@usesend/ui/src/input";
import { BorderWidth } from "../components/ui/icons/BorderWidth";
import { ColorPickerPopup } from "../components/ui/ColorPicker";
import { AllowedAlignments } from "../types";
import { Button } from "@usesend/ui/src/button";
import { AlignmentIcon } from "../components/ui/icons/AlignmentIcon";
} from 'lucide-react';
import { Input } from '@usesend/ui/src/input';
import { BorderWidth } from '../components/ui/icons/BorderWidth';
import { ColorPickerPopup } from '../components/ui/ColorPicker';
import { AllowedAlignments } from '../types';
import { Button } from '@usesend/ui/src/button';
import { AlignmentIcon } from '../components/ui/icons/AlignmentIcon';
import {
Tooltip,
TooltipProvider,
TooltipContent,
TooltipTrigger,
} from "@usesend/ui/src/tooltip";
import { Separator } from "@usesend/ui/src/separator";
import Spinner from "@usesend/ui/src/spinner";
import { LinkEditorPanel } from "../components/panels/LinkEditorPanel";
import { TextEditorPanel } from "../components/panels/TextEditorPanel";
} from '@usesend/ui/src/tooltip';
import { Separator } from '@usesend/ui/src/separator';
import Spinner from '@usesend/ui/src/spinner';
import { LinkEditorPanel } from '../components/panels/LinkEditorPanel';
import { TextEditorPanel } from '../components/panels/TextEditorPanel';
const alignments: Array<AllowedAlignments> = ["left", "center", "right"];
const alignments: Array<AllowedAlignments> = ['left', 'center', 'right'];
const MIN_WIDTH = 60;
@@ -41,11 +41,11 @@ export function ResizableImageTemplate(props: NodeViewProps) {
const imgRef = useRef<HTMLImageElement>(null);
const [resizingStyle, setResizingStyle] = useState<
Pick<CSSProperties, "width" | "height"> | undefined
Pick<CSSProperties, 'width' | 'height'> | undefined
>();
let {
alignment = "center",
alignment = 'center',
width,
height,
borderRadius,
@@ -62,7 +62,7 @@ export function ResizableImageTemplate(props: NodeViewProps) {
const handleMouseDown = useEvent(
(event: React.MouseEvent<HTMLDivElement>) => {
const imageParent = document.querySelector(
".ProseMirror-selectednode"
'.ProseMirror-selectednode',
) as HTMLDivElement;
if (!imgRef.current || !imageParent || !selected) {
@@ -72,17 +72,17 @@ export function ResizableImageTemplate(props: NodeViewProps) {
const imageParentWidth = imageParent.offsetWidth;
event.preventDefault();
const direction = event.currentTarget.dataset.direction || "--";
const direction = event.currentTarget.dataset.direction || '--';
const initialXPosition = event.clientX;
const currentWidth = imgRef.current.width;
const currentHeight = imgRef.current.height;
let newWidth = currentWidth;
let newHeight = currentHeight;
const transform = direction === "left" ? -1 : 1;
const transform = direction === 'left' ? -1 : 1;
const removeListeners = () => {
window.removeEventListener("mousemove", mouseMoveHandler);
window.removeEventListener("mouseup", removeListeners);
window.removeEventListener('mousemove', mouseMoveHandler);
window.removeEventListener('mouseup', removeListeners);
updateAttributes({ width: newWidth, height: newHeight });
setResizingStyle(undefined);
};
@@ -90,7 +90,7 @@ export function ResizableImageTemplate(props: NodeViewProps) {
const mouseMoveHandler = (event: MouseEvent) => {
newWidth = Math.max(
currentWidth + transform * (event.clientX - initialXPosition),
MIN_WIDTH
MIN_WIDTH,
);
if (newWidth > imageParentWidth) {
@@ -107,9 +107,9 @@ export function ResizableImageTemplate(props: NodeViewProps) {
}
};
window.addEventListener("mousemove", mouseMoveHandler);
window.addEventListener("mouseup", removeListeners);
}
window.addEventListener('mousemove', mouseMoveHandler);
window.addEventListener('mouseup', removeListeners);
},
);
const updateWidth = (_newWidth: string) => {
@@ -119,7 +119,7 @@ export function ResizableImageTemplate(props: NodeViewProps) {
}
const imageParent = document.querySelector(
".ProseMirror-selectednode"
'.ProseMirror-selectednode',
) as HTMLDivElement;
const imageParentWidth = imageParent.offsetWidth;
@@ -143,22 +143,22 @@ export function ResizableImageTemplate(props: NodeViewProps) {
});
};
function dragButton(direction: "left" | "right") {
function dragButton(direction: 'left' | 'right') {
return (
<div
role="button"
tabIndex={0}
onMouseDown={handleMouseDown}
data-direction={direction}
className=" bg-white bg-opacity-40 border rounded-3xl"
className="rounded-3xl border bg-white bg-opacity-40"
style={{
position: "absolute",
height: "60px",
width: "7px",
position: 'absolute',
height: '60px',
width: '7px',
[direction]: 5,
top: "50%",
transform: "translateY(-50%)",
cursor: "ew-resize",
top: '50%',
transform: 'translateY(-50%)',
cursor: 'ew-resize',
}}
/>
);
@@ -185,28 +185,28 @@ export function ResizableImageTemplate(props: NodeViewProps) {
borderWidth: Number(borderWidth),
borderColor,
...resizingStyle,
overflow: "hidden",
position: "relative",
overflow: 'hidden',
position: 'relative',
// Weird! Basically tiptap/prose wraps this in a span and the line height causes an annoying buffer.
lineHeight: "0px",
display: "block",
lineHeight: '0px',
display: 'block',
...({
center: { marginLeft: "auto", marginRight: "auto" },
left: { marginRight: "auto" },
right: { marginLeft: "auto" },
center: { marginLeft: 'auto', marginRight: 'auto' },
left: { marginRight: 'auto' },
right: { marginLeft: 'auto' },
}[alignment as string] || {}),
}}
>
<Popover open={props.selected && !isUploading}>
<PopoverTrigger>
{isUploading ? (
<div className="relative w-full h-full">
<div className="relative h-full w-full">
<img
{...attrs}
className="flex items-center justify-center opacity-70"
/>
<div className="absolute inset-0 flex items-center justify-center">
<Spinner className="w-8 h-8 text-foreground" />
<Spinner className="text-foreground h-8 w-8" />
</div>
</div>
) : (
@@ -215,7 +215,7 @@ export function ResizableImageTemplate(props: NodeViewProps) {
ref={imgRef}
style={{
...resizingStyle,
cursor: "default",
cursor: 'default',
marginBottom: 0,
}}
/>
@@ -223,15 +223,15 @@ export function ResizableImageTemplate(props: NodeViewProps) {
{selected && !isUploading && (
<>
{dragButton("left")}
{dragButton("right")}
{dragButton('left')}
{dragButton('right')}
</>
)}
</PopoverTrigger>
<PopoverContent
align="start"
side="top"
className="light border-gray-200 px-2 py-2 w-[32rem]"
className="light w-[32rem] border-gray-200 px-2 py-2"
sideOffset={10}
onOpenAutoFocus={(e) => e.preventDefault()}
onCloseAutoFocus={(e) => e.preventDefault()}
@@ -240,18 +240,18 @@ export function ResizableImageTemplate(props: NodeViewProps) {
<div className="flex items-center gap-1">
<Tooltip>
<TooltipTrigger>
<div className="flex items-center border border-transparent focus-within:border-border gap-2 px-1 py-0.5 rounded-md">
<ExpandIcon className="text-slate-700 h-4 w-4" />
<div className="focus-within:border-border flex items-center gap-2 rounded-md border border-transparent px-1 py-0.5">
<ExpandIcon className="h-4 w-4 text-slate-700" />
<Input
value={widthState}
onChange={(e) => updateWidth(e.target.value)}
className="border-0 focus-visible:ring-0 h-6 p-0 w-8"
className="h-6 w-8 border-0 p-0 focus-visible:ring-0"
/>
</div>
</TooltipTrigger>
<TooltipContent>Width</TooltipContent>
</Tooltip>
<Separator orientation="vertical" className="h-6 my-auto" />
<Separator orientation="vertical" className="my-auto h-6" />
{alignments.map((alignment) => (
<Tooltip key={alignment}>
<TooltipTrigger asChild>
@@ -273,12 +273,12 @@ export function ResizableImageTemplate(props: NodeViewProps) {
<TooltipContent>Align {alignment}</TooltipContent>
</Tooltip>
))}
<Separator orientation="vertical" className="h-6 my-auto" />
<Separator orientation="vertical" className="my-auto h-6" />
<Tooltip>
<TooltipTrigger>
<div className="flex items-center border border-transparent focus-within:border-border gap-2 px-1 py-0.5 rounded-md">
<ScanIcon className="text-slate-700 h-4 w-4" />
<div className="focus-within:border-border flex items-center gap-2 rounded-md border border-transparent px-1 py-0.5">
<ScanIcon className="h-4 w-4 text-slate-700" />
<Input
value={borderRadius}
onChange={(e) =>
@@ -286,7 +286,7 @@ export function ResizableImageTemplate(props: NodeViewProps) {
borderRadius: e.target.value,
})
}
className="border-0 focus-visible:ring-0 h-6 p-0 w-5"
className="h-6 w-5 border-0 p-0 focus-visible:ring-0"
/>
</div>
</TooltipTrigger>
@@ -294,8 +294,8 @@ export function ResizableImageTemplate(props: NodeViewProps) {
</Tooltip>
<Tooltip>
<TooltipTrigger>
<div className="flex items-center border border-transparent focus-within:border-border gap-2 px-1 py-0.5 rounded-md">
<BorderWidth className="text-slate-700 h-4 w-4" />
<div className="focus-within:border-border flex items-center gap-2 rounded-md border border-transparent px-1 py-0.5">
<BorderWidth className="h-4 w-4 text-slate-700" />
<Input
value={borderWidth}
onChange={(e) =>
@@ -303,7 +303,7 @@ export function ResizableImageTemplate(props: NodeViewProps) {
borderWidth: e.target.value,
})
}
className="border-0 focus-visible:ring-0 h-6 p-0 w-5"
className="h-6 w-5 border-0 p-0 focus-visible:ring-0"
/>
</div>
</TooltipTrigger>
@@ -330,7 +330,7 @@ export function ResizableImageTemplate(props: NodeViewProps) {
</TooltipTrigger>
<TooltipContent>Border color</TooltipContent>
</Tooltip>
<Separator orientation="vertical" className="h-6 my-auto" />
<Separator orientation="vertical" className="my-auto h-6" />
<Popover open={openImgSrc} onOpenChange={setOpenImgSrc}>
<PopoverTrigger asChild>
<Button
@@ -342,7 +342,7 @@ export function ResizableImageTemplate(props: NodeViewProps) {
>
<Tooltip>
<TooltipTrigger asChild>
<ImageIcon className="h-4 w-4 " />
<ImageIcon className="h-4 w-4" />
</TooltipTrigger>
<TooltipContent>Image source</TooltipContent>
</Tooltip>
@@ -371,7 +371,7 @@ export function ResizableImageTemplate(props: NodeViewProps) {
type="button"
onClick={() => setOpenAltText(true)}
>
<TypeIcon className="h-4 w-4 " />
<TypeIcon className="h-4 w-4" />
</Button>
</PopoverTrigger>
</TooltipTrigger>
@@ -400,7 +400,7 @@ export function ResizableImageTemplate(props: NodeViewProps) {
type="button"
onClick={() => setOpenLink(true)}
>
<LinkIcon className="h-4 w-4 " />
<LinkIcon className="h-4 w-4" />
</Button>
</PopoverTrigger>
</TooltipTrigger>

4
packages/email-editor/src/nodes/unsubscribe-footer.tsx
View File

@@ -1,5 +1,5 @@
import { NodeViewProps, NodeViewWrapper, NodeViewContent } from "@tiptap/react";
import { cn } from "@usesend/ui/lib/utils";
import { NodeViewProps, NodeViewWrapper, NodeViewContent } from '@tiptap/react';
import { cn } from '@usesend/ui/lib/utils';
export function UnsubscribeFooterComponent(props: NodeViewProps) {
return (

62
packages/email-editor/src/nodes/variable.tsx
View File

@@ -1,16 +1,16 @@
import { NodeViewProps, NodeViewWrapper, ReactRenderer } from "@tiptap/react";
import { NodeViewProps, NodeViewWrapper, ReactRenderer } from '@tiptap/react';
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@usesend/ui/src/popover";
import { cn } from "@usesend/ui/lib/utils";
import { Input } from "@usesend/ui/src/input";
import { Button } from "@usesend/ui/src/button";
import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
import { SuggestionOptions } from "@tiptap/suggestion";
import tippy, { GetReferenceClientRect } from "tippy.js";
import { CheckIcon, TriangleAlert } from "lucide-react";
} from '@usesend/ui/src/popover';
import { cn } from '@usesend/ui/lib/utils';
import { Input } from '@usesend/ui/src/input';
import { Button } from '@usesend/ui/src/button';
import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
import { SuggestionOptions } from '@tiptap/suggestion';
import tippy, { GetReferenceClientRect } from 'tippy.js';
import { CheckIcon, TriangleAlert } from 'lucide-react';
export interface VariableOptions {
name: string;
@@ -23,10 +23,10 @@ export const VariableList = forwardRef((props: any, ref) => {
const selectItem = (index: number) => {
const item = props.items[index];
console.log("item: ", item);
console.log('item: ', item);
if (item) {
props.command({ id: item, name: item, fallback: "" });
props.command({ id: item, name: item, fallback: '' });
}
};
@@ -34,19 +34,19 @@ export const VariableList = forwardRef((props: any, ref) => {
useImperativeHandle(ref, () => ({
onKeyDown: ({ event }: { event: KeyboardEvent }) => {
if (event.key === "ArrowUp") {
if (event.key === 'ArrowUp') {
setSelectedIndex(
(selectedIndex + props.items.length - 1) % props.items.length
(selectedIndex + props.items.length - 1) % props.items.length,
);
return true;
}
if (event.key === "ArrowDown") {
if (event.key === 'ArrowDown') {
setSelectedIndex((selectedIndex + 1) % props.items.length);
return true;
}
if (event.key === "Enter") {
if (event.key === 'Enter') {
selectItem(selectedIndex);
return true;
}
@@ -63,8 +63,8 @@ export const VariableList = forwardRef((props: any, ref) => {
key={index}
onClick={() => selectItem(index)}
className={cn(
"flex w-full space-x-2 rounded-md px-2 py-1 text-left text-sm text-gray-900 hover:bg-gray-100",
index === selectedIndex ? "bg-gray-200" : "bg-white"
'flex w-full space-x-2 rounded-md px-2 py-1 text-left text-sm text-gray-900 hover:bg-gray-100',
index === selectedIndex ? 'bg-gray-200' : 'bg-white',
)}
>
{item}
@@ -79,11 +79,11 @@ export const VariableList = forwardRef((props: any, ref) => {
);
});
VariableList.displayName = "VariableList";
VariableList.displayName = 'VariableList';
export function getVariableSuggestions(
variables: Array<string> = []
): Omit<SuggestionOptions, "editor"> {
variables: Array<string> = [],
): Omit<SuggestionOptions, 'editor'> {
return {
items: ({ query }) => {
return variables
@@ -107,14 +107,14 @@ export function getVariableSuggestions(
return;
}
popup = tippy("body", {
popup = tippy('body', {
getReferenceClientRect: props.clientRect as GetReferenceClientRect,
appendTo: () => document.body,
content: component.element,
showOnCreate: true,
interactive: true,
trigger: "manual",
placement: "bottom-start",
trigger: 'manual',
placement: 'bottom-start',
});
},
@@ -131,7 +131,7 @@ export function getVariableSuggestions(
},
onKeyDown(props) {
if (props.event.key === "Escape") {
if (props.event.key === 'Escape') {
popup?.[0].hide();
return true;
@@ -170,7 +170,7 @@ export function VariableComponent(props: NodeViewProps) {
return (
<NodeViewWrapper
className={`react-component inline-block ${
props.selected && "ProseMirror-selectednode"
props.selected && 'ProseMirror-selectednode'
}`}
draggable="false"
data-drag-handle=""
@@ -179,8 +179,8 @@ export function VariableComponent(props: NodeViewProps) {
<PopoverTrigger asChild>
<button
className={cn(
"inline-flex items-center justify-center rounded-md text-sm gap-1 ring-offset-white transition-colors",
"px-2 border border-gray-300 shadow-sm cursor-pointer text-foreground/80"
'inline-flex items-center justify-center gap-1 rounded-md text-sm ring-offset-white transition-colors',
'text-foreground/80 cursor-pointer border border-gray-300 px-2 shadow-sm',
)}
onClick={(e) => {
e.preventDefault();
@@ -190,19 +190,19 @@ export function VariableComponent(props: NodeViewProps) {
>
<span className="">{`{{${name}}}`}</span>
{!fallback ? (
<TriangleAlert className="w-3 h-3 text-orange-400" />
<TriangleAlert className="h-3 w-3 text-orange-400" />
) : null}
</button>
</PopoverTrigger>
<PopoverContent
align="start"
side="top"
className="space-y-2 light border-gray-200"
className="light space-y-2 border-gray-200"
sideOffset={10}
onOpenAutoFocus={(e) => e.preventDefault()}
onCloseAutoFocus={(e) => e.preventDefault()}
>
<form onSubmit={handleSubmit} className="flex gap-2 items-center">
<form onSubmit={handleSubmit} className="flex items-center gap-2">
<Input
placeholder="Fallback value"
value={fallbackValue}
@@ -215,7 +215,7 @@ export function VariableComponent(props: NodeViewProps) {
<CheckIcon className="h-4 w-4" />
</Button>
</form>
<div className="text-sm text-muted-foreground">
<div className="text-muted-foreground text-sm">
Fallback value will be used if the variable value is empty.
</div>
</PopoverContent>

252
packages/email-editor/src/renderer.tsx
View File

@@ -1,5 +1,5 @@
import { CSSProperties, Fragment } from "react";
import type { JSONContent } from "@tiptap/core";
import { CSSProperties, Fragment } from 'react';
import type { JSONContent } from '@tiptap/core';
import {
Text,
Html,
@@ -17,8 +17,8 @@ import {
Column,
render,
Code,
} from "jsx-email";
import { AllowedAlignments } from "./types";
} from 'jsx-email';
import { AllowedAlignments } from './types';
interface NodeOptions {
parent?: JSONContent;
@@ -83,19 +83,19 @@ export interface RenderConfig {
const DEFAULT_THEME: ThemeOptions = {
colors: {
heading: "rgb(17, 24, 39)",
paragraph: "rgb(55, 65, 81)",
horizontal: "rgb(234, 234, 234)",
footer: "rgb(100, 116, 139)",
blockquoteBorder: "rgb(209, 213, 219)",
codeBackground: "rgb(239, 239, 239)",
codeText: "rgb(17, 24, 39)",
link: "rgb(59, 130, 246)",
heading: 'rgb(17, 24, 39)',
paragraph: 'rgb(55, 65, 81)',
horizontal: 'rgb(234, 234, 234)',
footer: 'rgb(100, 116, 139)',
blockquoteBorder: 'rgb(209, 213, 219)',
codeBackground: 'rgb(239, 239, 239)',
codeText: 'rgb(17, 24, 39)',
link: 'rgb(59, 130, 246)',
},
fontSize: {
paragraph: "15px",
paragraph: '15px',
footer: {
size: ".8rem",
size: '.8rem',
},
},
};
@@ -103,35 +103,35 @@ const DEFAULT_THEME: ThemeOptions = {
const CODE_FONT_FAMILY =
'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace';
const allowedHeadings = ["h1", "h2", "h3"] as const;
const allowedHeadings = ['h1', 'h2', 'h3'] as const;
type AllowedHeadings = (typeof allowedHeadings)[number];
const headings: Record<AllowedHeadings, CSSProperties> = {
h1: {
fontSize: "36px",
lineHeight: "40px",
fontSize: '36px',
lineHeight: '40px',
fontWeight: 800,
},
h2: {
fontSize: "30px",
lineHeight: "36px",
fontSize: '30px',
lineHeight: '36px',
fontWeight: 700,
},
h3: {
fontSize: "24px",
lineHeight: "38px",
fontSize: '24px',
lineHeight: '38px',
fontWeight: 600,
},
};
const allowedSpacers = ["sm", "md", "lg", "xl"] as const;
const allowedSpacers = ['sm', 'md', 'lg', 'xl'] as const;
export type AllowedSpacers = (typeof allowedSpacers)[number];
const spacers: Record<AllowedSpacers, string> = {
sm: "8px",
md: "16px",
lg: "32px",
xl: "64px",
sm: '8px',
md: '16px',
lg: '32px',
xl: '64px',
};
export interface MarkType {
@@ -141,8 +141,8 @@ export interface MarkType {
}
const antialiased: CSSProperties = {
WebkitFontSmoothing: "antialiased",
MozOsxFontSmoothing: "grayscale",
WebkitFontSmoothing: 'antialiased',
MozOsxFontSmoothing: 'grayscale',
};
export function generateKey() {
@@ -154,13 +154,13 @@ export type VariableFormatter = (options: {
fallback?: string;
}) => string;
const allowedLogoSizes = ["sm", "md", "lg"] as const;
const allowedLogoSizes = ['sm', 'md', 'lg'] as const;
type AllowedLogoSizes = (typeof allowedLogoSizes)[number];
const logoSizes: Record<AllowedLogoSizes, string> = {
sm: "40px",
md: "48px",
lg: "64px",
sm: '40px',
md: '48px',
lg: '64px',
};
type EmailRendererOption = {
@@ -178,8 +178,8 @@ export class EmailRenderer {
private linkValues: Record<string, string | null> = {};
constructor(
private readonly email: JSONContent = { type: "doc", content: [] },
options: EmailRendererOption = {}
private readonly email: JSONContent = { type: 'doc', content: [] },
options: EmailRendererOption = {},
) {
this.shouldReplaceVariableValues =
options.shouldReplaceVariableValues || false;
@@ -229,8 +229,8 @@ export class EmailRenderer {
fontStyle="normal"
fontWeight={400}
webFont={{
url: "https://rsms.me/inter/font-files/Inter-Regular.woff2?v=3.19",
format: "woff2",
url: 'https://rsms.me/inter/font-files/Inter-Regular.woff2?v=3.19',
format: 'woff2',
}}
/>
<style
@@ -253,12 +253,12 @@ export class EmailRenderer {
<Body>
<Container
style={{
maxWidth: "600px",
minWidth: "300px",
width: "100%",
marginLeft: "auto",
marginRight: "auto",
padding: "0.5rem",
maxWidth: '600px',
minWidth: '300px',
width: '100%',
marginLeft: 'auto',
marginRight: 'auto',
padding: '0.5rem',
}}
>
{jsxNodes}
@@ -286,13 +286,13 @@ export class EmailRenderer {
throw new Error(`Mark type "${type}" is not supported.`);
},
<>{text}</>
<>{text}</>,
);
}
private getMappedContent(
node: JSONContent,
options?: NodeOptions
options?: NodeOptions,
): React.ReactNode[] {
return node.content
?.map((childNode) => {
@@ -308,9 +308,9 @@ export class EmailRenderer {
private renderNode(
node: JSONContent,
options: NodeOptions = {}
options: NodeOptions = {},
): React.ReactNode | null {
const type = node.type || "";
const type = node.type || '';
if (type in this) {
// @ts-expect-error - `this` is not assignable to type 'never'
@@ -322,14 +322,14 @@ export class EmailRenderer {
private unsubscribeFooter(
node: JSONContent,
options?: NodeOptions
options?: NodeOptions,
): React.ReactNode {
return (
<Container
style={{
fontSize: this.config.theme?.fontSize?.footer?.size,
lineHeight: this.config.theme?.fontSize?.footer?.lineHeight,
maxWidth: "100%",
maxWidth: '100%',
color: this.config.theme?.colors?.footer,
}}
>
@@ -340,18 +340,18 @@ export class EmailRenderer {
private paragraph(node: JSONContent, options?: NodeOptions): React.ReactNode {
const { attrs } = node;
const alignment = attrs?.textAlign || "left";
const alignment = attrs?.textAlign || 'left';
const { parent, next } = options || {};
const isParentListItem = parent?.type === "listItem";
const isNextSpacer = next?.type === "spacer";
const isParentListItem = parent?.type === 'listItem';
const isNextSpacer = next?.type === 'spacer';
return (
<Text
style={{
textAlign: alignment,
marginBottom: isParentListItem || isNextSpacer ? "0px" : "20px",
marginTop: "0px",
marginBottom: isParentListItem || isNextSpacer ? '0px' : '20px',
marginTop: '0px',
fontSize: this.config.theme?.fontSize?.paragraph,
color: this.config.theme?.colors?.paragraph,
...antialiased,
@@ -363,7 +363,7 @@ export class EmailRenderer {
}
private text(node: JSONContent, _?: NodeOptions): React.ReactNode {
const text = node.text || "&nbsp";
const text = node.text || '&nbsp';
if (node.marks) {
return this.renderMark(node);
}
@@ -384,7 +384,7 @@ export class EmailRenderer {
}
private strike(_: MarkType, text: React.ReactNode): React.ReactNode {
return <s style={{ textDecoration: "line-through" }}>{text}</s>;
return <s style={{ textDecoration: 'line-through' }}>{text}</s>;
}
private textStyle(mark: MarkType, text: React.ReactNode): React.ReactNode {
@@ -396,15 +396,15 @@ export class EmailRenderer {
private link(mark: MarkType, text: React.ReactNode): React.ReactNode {
const { attrs } = mark;
let href = attrs?.href || "#";
const target = attrs?.target || "_blank";
const rel = attrs?.rel || "noopener noreferrer nofollow";
let href = attrs?.href || '#';
const target = attrs?.target || '_blank';
const rel = attrs?.rel || 'noopener noreferrer nofollow';
// If the href value is provided, use it to replace the link
// Otherwise, use the original link
if (
typeof this.linkValues === "object" ||
typeof this.variableValues === "object"
typeof this.linkValues === 'object' ||
typeof this.variableValues === 'object'
) {
href = this.linkValues[href] || this.variableValues[href] || href;
}
@@ -415,7 +415,7 @@ export class EmailRenderer {
rel={rel}
style={{
fontWeight: 500,
textDecoration: "underline",
textDecoration: 'underline',
color: this.config.theme?.colors?.link,
}}
target={target}
@@ -430,9 +430,9 @@ export class EmailRenderer {
const { next, prev } = options || {};
const level = `h${Number(attrs?.level) || 1}`;
const alignment = attrs?.textAlign || "left";
const isNextSpacer = next?.type === "spacer";
const isPrevSpacer = prev?.type === "spacer";
const alignment = attrs?.textAlign || 'left';
const isNextSpacer = next?.type === 'spacer';
const isPrevSpacer = prev?.type === 'spacer';
const { fontSize, lineHeight, fontWeight } =
headings[level as AllowedHeadings];
@@ -444,8 +444,8 @@ export class EmailRenderer {
style={{
textAlign: alignment,
color: this.config.theme?.colors?.heading,
marginBottom: isNextSpacer ? "0px" : "12px",
marginTop: isPrevSpacer ? "0px" : "0px",
marginBottom: isNextSpacer ? '0px' : '12px',
marginTop: isPrevSpacer ? '0px' : '0px',
fontSize,
lineHeight,
fontWeight,
@@ -478,9 +478,9 @@ export class EmailRenderer {
return (
<Hr
style={{
marginTop: "32px",
marginBottom: "32px",
borderTopWidth: "2px",
marginTop: '32px',
marginBottom: '32px',
borderTopWidth: '2px',
}}
/>
);
@@ -488,13 +488,13 @@ export class EmailRenderer {
private orderedList(node: JSONContent, _?: NodeOptions): React.ReactNode {
return (
<Container style={{ maxWidth: "100%" }}>
<Container style={{ maxWidth: '100%' }}>
<ol
style={{
marginTop: "0px",
marginBottom: "20px",
paddingLeft: "26px",
listStyleType: "decimal",
marginTop: '0px',
marginBottom: '20px',
paddingLeft: '26px',
listStyleType: 'decimal',
}}
>
{this.getMappedContent(node)}
@@ -507,15 +507,15 @@ export class EmailRenderer {
return (
<Container
style={{
maxWidth: "100%",
maxWidth: '100%',
}}
>
<ul
style={{
marginTop: "0px",
marginBottom: "20px",
paddingLeft: "26px",
listStyleType: "disc",
marginTop: '0px',
marginBottom: '20px',
paddingLeft: '26px',
listStyleType: 'disc',
}}
>
{this.getMappedContent(node)}
@@ -528,13 +528,13 @@ export class EmailRenderer {
return (
<Container
style={{
maxWidth: "100%",
maxWidth: '100%',
}}
>
<li
style={{
marginBottom: "8px",
paddingLeft: "6px",
marginBottom: '8px',
paddingLeft: '6px',
...antialiased,
}}
>
@@ -555,11 +555,11 @@ export class EmailRenderer {
borderColor,
borderWidth,
// @TODO: Update the attribute to `textAlign`
alignment = "left",
alignment = 'left',
} = attrs || {};
const { next } = options || {};
const isNextSpacer = next?.type === "spacer";
const isNextSpacer = next?.type === 'spacer';
const href = this.linkValues[url] || this.variableValues[url] || url;
@@ -567,8 +567,8 @@ export class EmailRenderer {
<Container
style={{
textAlign: alignment,
maxWidth: "100%",
marginBottom: isNextSpacer ? "0px" : "20px",
maxWidth: '100%',
marginBottom: isNextSpacer ? '0px' : '20px',
}}
>
<Button
@@ -577,11 +577,11 @@ export class EmailRenderer {
color: String(textColor),
backgroundColor: buttonColor,
borderColor: borderColor,
padding: "12px 34px",
padding: '12px 34px',
borderWidth,
borderStyle: "solid",
textDecoration: "none",
fontSize: "14px",
borderStyle: 'solid',
textDecoration: 'none',
fontSize: '14px',
fontWeight: 500,
borderRadius: `${borderRadius}px`,
}}
@@ -594,7 +594,7 @@ export class EmailRenderer {
private spacer(node: JSONContent, _?: NodeOptions): React.ReactNode {
const { attrs } = node;
const { height = "auto" } = attrs || {};
const { height = 'auto' } = attrs || {};
return (
<Container
@@ -617,28 +617,28 @@ export class EmailRenderer {
title,
size,
// @TODO: Update the attribute to `textAlign`
alignment = "left",
alignment = 'left',
} = attrs || {};
const { next } = options || {};
const isNextSpacer = next?.type === "spacer";
const isNextSpacer = next?.type === 'spacer';
return (
<Row
style={{
marginTop: "0px",
marginBottom: isNextSpacer ? "0px" : "32px",
marginTop: '0px',
marginBottom: isNextSpacer ? '0px' : '32px',
}}
>
<Column align={alignment}>
<Img
alt={alt || title || "Logo"}
alt={alt || title || 'Logo'}
src={src}
style={{
width: logoSizes[size as AllowedLogoSizes] || size,
height: logoSizes[size as AllowedLogoSizes] || size,
}}
title={title || alt || "Logo"}
title={title || alt || 'Logo'}
/>
</Column>
</Row>
@@ -651,42 +651,42 @@ export class EmailRenderer {
src,
alt,
title,
width = "auto",
height = "auto",
alignment = "center",
externalLink = "",
width = 'auto',
height = 'auto',
alignment = 'center',
externalLink = '',
borderRadius,
borderColor,
borderWidth,
} = attrs || {};
const { next } = options || {};
const isNextSpacer = next?.type === "spacer";
const isNextSpacer = next?.type === 'spacer';
const mainImage = (
<Img
alt={alt || title || "Image"}
alt={alt || title || 'Image'}
src={src}
style={{
height,
width,
maxWidth: "100%",
outline: "none",
textDecoration: "none",
borderStyle: "solid",
maxWidth: '100%',
outline: 'none',
textDecoration: 'none',
borderStyle: 'solid',
borderRadius: `${borderRadius}px`,
borderColor,
borderWidth: `${borderWidth}px`,
}}
title={title || alt || "Image"}
title={title || alt || 'Image'}
/>
);
return (
<Row
style={{
marginTop: "0px",
marginBottom: isNextSpacer ? "0px" : "32px",
marginTop: '0px',
marginBottom: isNextSpacer ? '0px' : '32px',
}}
>
<Column align={alignment}>
@@ -695,9 +695,9 @@ export class EmailRenderer {
href={externalLink}
rel="noopener noreferrer"
style={{
display: "block",
maxWidth: "100%",
textDecoration: "none",
display: 'block',
maxWidth: '100%',
textDecoration: 'none',
}}
target="_blank"
>
@@ -713,23 +713,23 @@ export class EmailRenderer {
private blockquote(
node: JSONContent,
options?: NodeOptions
options?: NodeOptions,
): React.ReactNode {
const { next, prev } = options || {};
const isNextSpacer = next?.type === "spacer";
const isPrevSpacer = prev?.type === "spacer";
const isNextSpacer = next?.type === 'spacer';
const isPrevSpacer = prev?.type === 'spacer';
return (
<blockquote
style={{
borderLeftWidth: "4px",
borderLeftStyle: "solid",
borderLeftWidth: '4px',
borderLeftStyle: 'solid',
borderLeftColor: this.config.theme?.colors?.blockquoteBorder,
paddingLeft: "16px",
marginLeft: "0px",
marginRight: "0px",
marginTop: isPrevSpacer ? "0px" : "20px",
marginBottom: isNextSpacer ? "0px" : "20px",
paddingLeft: '16px',
marginLeft: '0px',
marginRight: '0px',
marginTop: isPrevSpacer ? '0px' : '20px',
marginBottom: isNextSpacer ? '0px' : '20px',
}}
>
{this.getMappedContent(node)}
@@ -743,8 +743,8 @@ export class EmailRenderer {
style={{
backgroundColor: this.config.theme?.colors?.codeBackground,
color: this.config.theme?.colors?.codeText,
padding: "2px 4px",
borderRadius: "6px",
padding: '2px 4px',
borderRadius: '6px',
fontFamily: CODE_FONT_FAMILY,
fontWeight: 400,
letterSpacing: 0,
@@ -767,7 +767,7 @@ export class EmailRenderer {
.map((n) => {
return n.text;
})
.join("")}
.join('')}
</Code>
);
}

4
packages/email-editor/src/types.ts
View File

@@ -1,4 +1,4 @@
import { Editor } from "@tiptap/react";
import { Editor } from '@tiptap/react';
export interface MenuProps {
editor: Editor;
@@ -6,7 +6,7 @@ export interface MenuProps {
shouldHide?: boolean;
}
export type AllowedAlignments = "left" | "center" | "right";
export type AllowedAlignments = 'left' | 'center' | 'right';
export interface ButtonOptions {
text: string;

6
packages/email-editor/tailwind.config.ts
View File

@@ -1,7 +1,7 @@
import { type Config } from "tailwindcss";
import sharedConfig from "@usesend/tailwind-config/tailwind.config";
import { type Config } from 'tailwindcss';
import sharedConfig from '@usesend/tailwind-config/tailwind.config';
export default {
...sharedConfig,
content: ["./src/**/*.tsx", "./src/**/*.ts"],
content: ['./src/**/*.tsx', './src/**/*.ts'],
} satisfies Config;

8
packages/email-editor/tsup.config.ts
View File

@@ -1,17 +1,17 @@
// eslint-disable-next-line import/no-extraneous-dependencies
import { defineConfig, Options } from "tsup";
import { defineConfig, Options } from 'tsup';
// eslint-disable-next-line import/no-default-export
export default defineConfig((options: Options) => ({
entry: ["src/index.ts"],
format: ["esm", "cjs"],
entry: ['src/index.ts'],
format: ['esm', 'cjs'],
banner: {
js: "'use client'",
},
dts: true,
minify: true,
clean: true,
external: ["react", "react-dom"],
external: ['react', 'react-dom'],
injectStyle: true,
...options,
}));

14
packages/sdk/README.md
View File

@@ -34,18 +34,18 @@ bun add usesend
## Usage
```javascript
import { UseSend } from "usesend";
import { UseSend } from 'usesend';
const usesend = new UseSend("us_12345");
const usesend = new UseSend('us_12345');
// for self-hosted installations you can pass your base URL
// const usesend = new UseSend("us_12345", "https://app.usesend.com");
usesend.emails.send({
to: "hello@acme.com",
from: "hello@company.com",
subject: "useSend email",
html: "<p>useSend is the best open source product to send emails</p>",
text: "useSend is the best open source product to send emails",
to: 'hello@acme.com',
from: 'hello@company.com',
subject: 'useSend email',
html: '<p>useSend is the best open source product to send emails</p>',
text: 'useSend is the best open source product to send emails',
});
```

4
packages/sdk/index.ts
View File

@@ -1,2 +1,2 @@
export { UseSend } from "./src/usesend";
export { UseSend as Unsend } from "./src/usesend"; // deprecated alias
export { UseSend } from './src/usesend';
export { UseSend as Unsend } from './src/usesend'; // deprecated alias

40
packages/sdk/src/contact.ts
View File

@@ -1,9 +1,9 @@
import { UseSend } from "./usesend";
import { paths } from "../types/schema";
import { ErrorResponse } from "../types";
import { UseSend } from './usesend';
import { paths } from '../types/schema';
import { ErrorResponse } from '../types';
type CreateContactPayload =
paths["/v1/contactBooks/{contactBookId}/contacts"]["post"]["requestBody"]["content"]["application/json"];
paths['/v1/contactBooks/{contactBookId}/contacts']['post']['requestBody']['content']['application/json'];
type CreateContactResponse = {
data: CreateContactResponseSuccess | null;
@@ -11,10 +11,10 @@ type CreateContactResponse = {
};
type CreateContactResponseSuccess =
paths["/v1/contactBooks/{contactBookId}/contacts"]["post"]["responses"]["200"]["content"]["application/json"];
paths['/v1/contactBooks/{contactBookId}/contacts']['post']['responses']['200']['content']['application/json'];
type GetContactResponseSuccess =
paths["/v1/contactBooks/{contactBookId}/contacts/{contactId}"]["get"]["responses"]["200"]["content"]["application/json"];
paths['/v1/contactBooks/{contactBookId}/contacts/{contactId}']['get']['responses']['200']['content']['application/json'];
type GetContactResponse = {
data: GetContactResponseSuccess | null;
@@ -22,10 +22,10 @@ type GetContactResponse = {
};
type UpdateContactPayload =
paths["/v1/contactBooks/{contactBookId}/contacts/{contactId}"]["patch"]["requestBody"]["content"]["application/json"];
paths['/v1/contactBooks/{contactBookId}/contacts/{contactId}']['patch']['requestBody']['content']['application/json'];
type UpdateContactResponseSuccess =
paths["/v1/contactBooks/{contactBookId}/contacts/{contactId}"]["patch"]["responses"]["200"]["content"]["application/json"];
paths['/v1/contactBooks/{contactBookId}/contacts/{contactId}']['patch']['responses']['200']['content']['application/json'];
type UpdateContactResponse = {
data: UpdateContactResponseSuccess | null;
@@ -33,10 +33,10 @@ type UpdateContactResponse = {
};
type UpsertContactPayload =
paths["/v1/contactBooks/{contactBookId}/contacts/{contactId}"]["put"]["requestBody"]["content"]["application/json"];
paths['/v1/contactBooks/{contactBookId}/contacts/{contactId}']['put']['requestBody']['content']['application/json'];
type UpsertContactResponseSuccess =
paths["/v1/contactBooks/{contactBookId}/contacts/{contactId}"]["put"]["responses"]["200"]["content"]["application/json"];
paths['/v1/contactBooks/{contactBookId}/contacts/{contactId}']['put']['responses']['200']['content']['application/json'];
type UpsertContactResponse = {
data: UpsertContactResponseSuccess | null;
@@ -55,11 +55,11 @@ export class Contacts {
async create(
contactBookId: string,
payload: CreateContactPayload
payload: CreateContactPayload,
): Promise<CreateContactResponse> {
const data = await this.usesend.post<CreateContactResponseSuccess>(
`/contactBooks/${contactBookId}/contacts`,
payload
payload,
);
return data;
@@ -67,10 +67,10 @@ export class Contacts {
async get(
contactBookId: string,
contactId: string
contactId: string,
): Promise<GetContactResponse> {
const data = await this.usesend.get<GetContactResponseSuccess>(
`/contactBooks/${contactBookId}/contacts/${contactId}`
`/contactBooks/${contactBookId}/contacts/${contactId}`,
);
return data;
}
@@ -78,11 +78,11 @@ export class Contacts {
async update(
contactBookId: string,
contactId: string,
payload: UpdateContactPayload
payload: UpdateContactPayload,
): Promise<UpdateContactResponse> {
const data = await this.usesend.patch<UpdateContactResponseSuccess>(
`/contactBooks/${contactBookId}/contacts/${contactId}`,
payload
payload,
);
return data;
@@ -91,11 +91,11 @@ export class Contacts {
async upsert(
contactBookId: string,
contactId: string,
payload: UpsertContactPayload
payload: UpsertContactPayload,
): Promise<UpsertContactResponse> {
const data = await this.usesend.put<UpsertContactResponseSuccess>(
`/contactBooks/${contactBookId}/contacts/${contactId}`,
payload
payload,
);
return data;
@@ -103,10 +103,10 @@ export class Contacts {
async delete(
contactBookId: string,
contactId: string
contactId: string,
): Promise<DeleteContactResponse> {
const data = await this.usesend.delete<{ success: boolean }>(
`/contactBooks/${contactBookId}/contacts/${contactId}`
`/contactBooks/${contactBookId}/contacts/${contactId}`,
);
return data;

22
packages/sdk/src/domain.ts
View File

@@ -1,9 +1,9 @@
import { paths } from "../types/schema";
import { ErrorResponse } from "../types";
import { UseSend } from "./usesend";
import { paths } from '../types/schema';
import { ErrorResponse } from '../types';
import { UseSend } from './usesend';
type CreateDomainPayload =
paths["/v1/domains"]["post"]["requestBody"]["content"]["application/json"];
paths['/v1/domains']['post']['requestBody']['content']['application/json'];
type CreateDomainResponse = {
data: CreateDomainResponseSuccess | null;
@@ -11,7 +11,7 @@ type CreateDomainResponse = {
};
type CreateDomainResponseSuccess =
paths["/v1/domains"]["post"]["responses"]["200"]["content"]["application/json"];
paths['/v1/domains']['post']['responses']['200']['content']['application/json'];
type GetDomainsResponse = {
data: GetDomainsResponseSuccess | null;
@@ -19,7 +19,7 @@ type GetDomainsResponse = {
};
type GetDomainsResponseSuccess =
paths["/v1/domains"]["get"]["responses"]["200"]["content"]["application/json"];
paths['/v1/domains']['get']['responses']['200']['content']['application/json'];
type VerifyDomainResponse = {
data: VerifyDomainResponseSuccess | null;
@@ -27,7 +27,7 @@ type VerifyDomainResponse = {
};
type VerifyDomainResponseSuccess =
paths["/v1/domains/{id}/verify"]["put"]["responses"]["200"]["content"]["application/json"];
paths['/v1/domains/{id}/verify']['put']['responses']['200']['content']['application/json'];
export class Domains {
constructor(private readonly usesend: UseSend) {
@@ -35,14 +35,14 @@ export class Domains {
}
async list(): Promise<GetDomainsResponse> {
const data = await this.usesend.get<GetDomainsResponseSuccess>("/domains");
const data = await this.usesend.get<GetDomainsResponseSuccess>('/domains');
return data;
}
async create(payload: CreateDomainPayload): Promise<CreateDomainResponse> {
const data = await this.usesend.post<CreateDomainResponseSuccess>(
"/domains",
payload
'/domains',
payload,
);
return data;
}
@@ -50,7 +50,7 @@ export class Domains {
async verify(id: number): Promise<VerifyDomainResponse> {
const data = await this.usesend.put<VerifyDomainResponseSuccess>(
`/domains/${id}/verify`,
{}
{},
);
return data;
}

44
packages/sdk/src/email.ts
View File

@@ -1,11 +1,11 @@
import { render } from "@react-email/render";
import * as React from "react";
import { UseSend } from "./usesend";
import { paths } from "../types/schema";
import { ErrorResponse } from "../types";
import { render } from '@react-email/render';
import * as React from 'react';
import { UseSend } from './usesend';
import { paths } from '../types/schema';
import { ErrorResponse } from '../types';
type SendEmailPayload =
paths["/v1/emails"]["post"]["requestBody"]["content"]["application/json"] & {
paths['/v1/emails']['post']['requestBody']['content']['application/json'] & {
react?: React.ReactElement;
};
@@ -15,10 +15,10 @@ type CreateEmailResponse = {
};
type CreateEmailResponseSuccess =
paths["/v1/emails"]["post"]["responses"]["200"]["content"]["application/json"];
paths['/v1/emails']['post']['responses']['200']['content']['application/json'];
type GetEmailResponseSuccess =
paths["/v1/emails/{emailId}"]["get"]["responses"]["200"]["content"]["application/json"];
paths['/v1/emails/{emailId}']['get']['responses']['200']['content']['application/json'];
type GetEmailResponse = {
data: GetEmailResponseSuccess | null;
@@ -26,7 +26,7 @@ type GetEmailResponse = {
};
type UpdateEmailPayload =
paths["/v1/emails/{emailId}"]["patch"]["requestBody"]["content"]["application/json"] & {
paths['/v1/emails/{emailId}']['patch']['requestBody']['content']['application/json'] & {
react?: React.ReactElement;
};
@@ -36,7 +36,7 @@ type UpdateEmailResponse = {
};
type UpdateEmailResponseSuccess =
paths["/v1/emails/{emailId}"]["patch"]["responses"]["200"]["content"]["application/json"];
paths['/v1/emails/{emailId}']['patch']['responses']['200']['content']['application/json'];
type CancelEmailResponse = {
data: CancelEmailResponseSuccess | null;
@@ -44,26 +44,26 @@ type CancelEmailResponse = {
};
type CancelEmailResponseSuccess =
paths["/v1/emails/{emailId}/cancel"]["post"]["responses"]["200"]["content"]["application/json"];
paths['/v1/emails/{emailId}/cancel']['post']['responses']['200']['content']['application/json'];
// Batch emails types
/**
* Payload for sending multiple emails in a single batch request.
*/
type BatchEmailPayload =
paths["/v1/emails/batch"]["post"]["requestBody"]["content"]["application/json"];
paths['/v1/emails/batch']['post']['requestBody']['content']['application/json'];
/**
* Successful response schema for batch email send.
*/
type BatchEmailResponseSuccess =
paths["/v1/emails/batch"]["post"]["responses"]["200"]["content"]["application/json"];
paths['/v1/emails/batch']['post']['responses']['200']['content']['application/json'];
/**
* Response structure for the batch method.
*/
type BatchEmailResponse = {
data: BatchEmailResponseSuccess["data"] | null;
data: BatchEmailResponseSuccess['data'] | null;
error: ErrorResponse | null;
};
@@ -83,8 +83,8 @@ export class Emails {
}
const data = await this.usesend.post<CreateEmailResponseSuccess>(
"/emails",
payload
'/emails',
payload,
);
return data;
@@ -99,8 +99,8 @@ export class Emails {
async batch(payload: BatchEmailPayload): Promise<BatchEmailResponse> {
// Note: React element rendering is not supported in batch mode.
const response = await this.usesend.post<BatchEmailResponseSuccess>(
"/emails/batch",
payload
'/emails/batch',
payload,
);
return {
data: response.data ? response.data.data : null,
@@ -110,18 +110,18 @@ export class Emails {
async get(id: string): Promise<GetEmailResponse> {
const data = await this.usesend.get<GetEmailResponseSuccess>(
`/emails/${id}`
`/emails/${id}`,
);
return data;
}
async update(
id: string,
payload: UpdateEmailPayload
payload: UpdateEmailPayload,
): Promise<UpdateEmailResponse> {
const data = await this.usesend.patch<UpdateEmailResponseSuccess>(
`/emails/${id}`,
payload
payload,
);
return data;
}
@@ -129,7 +129,7 @@ export class Emails {
async cancel(id: string): Promise<CancelEmailResponse> {
const data = await this.usesend.post<CancelEmailResponseSuccess>(
`/emails/${id}/cancel`,
{}
{},
);
return data;
}

30
packages/sdk/src/usesend.ts
View File

@@ -1,8 +1,8 @@
import { ErrorResponse } from "../types";
import { Contacts } from "./contact";
import { Emails } from "./email";
import { ErrorResponse } from '../types';
import { Contacts } from './contact';
import { Emails } from './email';
const defaultBaseUrl = "https://app.usesend.com";
const defaultBaseUrl = 'https://app.usesend.com';
// eslint-disable-next-line turbo/no-undeclared-env-vars
const baseUrl = `${process?.env?.USESEND_BASE_URL ?? process?.env?.UNSEND_BASE_URL ?? defaultBaseUrl}/api/v1`;
@@ -20,16 +20,16 @@ export class UseSend {
constructor(
readonly key?: string,
url?: string
url?: string,
) {
if (!key) {
if (typeof process !== "undefined" && process.env) {
if (typeof process !== 'undefined' && process.env) {
this.key = process.env.USESEND_API_KEY ?? process.env.UNSEND_API_KEY;
}
if (!this.key) {
throw new Error(
'Missing API key. Pass it to the constructor `new UseSend("us_123")`'
'Missing API key. Pass it to the constructor `new UseSend("us_123")`',
);
}
}
@@ -40,17 +40,17 @@ export class UseSend {
this.headers = new Headers({
Authorization: `Bearer ${this.key}`,
"Content-Type": "application/json",
'Content-Type': 'application/json',
});
}
async fetchRequest<T>(
path: string,
options = {}
options = {},
): Promise<{ data: T | null; error: ErrorResponse | null }> {
const response = await fetch(`${this.url}${path}`, options);
const defaultError = {
code: "INTERNAL_SERVER_ERROR",
code: 'INTERNAL_SERVER_ERROR',
message: response.statusText,
};
@@ -80,7 +80,7 @@ export class UseSend {
async post<T>(path: string, body: unknown) {
const requestOptions = {
method: "POST",
method: 'POST',
headers: this.headers,
body: JSON.stringify(body),
};
@@ -90,7 +90,7 @@ export class UseSend {
async get<T>(path: string) {
const requestOptions = {
method: "GET",
method: 'GET',
headers: this.headers,
};
@@ -99,7 +99,7 @@ export class UseSend {
async put<T>(path: string, body: any) {
const requestOptions = {
method: "PUT",
method: 'PUT',
headers: this.headers,
body: JSON.stringify(body),
};
@@ -109,7 +109,7 @@ export class UseSend {
async patch<T>(path: string, body: any) {
const requestOptions = {
method: "PATCH",
method: 'PATCH',
headers: this.headers,
body: JSON.stringify(body),
};
@@ -119,7 +119,7 @@ export class UseSend {
async delete<T>(path: string, body?: unknown) {
const requestOptions = {
method: "DELETE",
method: 'DELETE',
headers: this.headers,
body: JSON.stringify(body),
};

1313
packages/sdk/types/schema.d.ts vendored
View File

File diff suppressed because it is too large Load Diff

150
packages/tailwind-config/tailwind.config.ts
View File

@@ -1,138 +1,138 @@
import type { Config } from "tailwindcss";
import type { Config } from 'tailwindcss';
const config = {
darkMode: ["class"],
content: ["./src/**/*.{ts,tsx}"],
prefix: "",
darkMode: ['class'],
content: ['./src/**/*.{ts,tsx}'],
prefix: '',
theme: {
fontFamily: {
sans: [
"Inter",
"ui-sans-serif",
"system-ui",
"sans-serif",
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji",
'Inter',
'ui-sans-serif',
'system-ui',
'sans-serif',
'Apple Color Emoji',
'Segoe UI Emoji',
'Segoe UI Symbol',
'Noto Color Emoji',
],
mono: [
"JetBrains Mono",
"Menlo",
"ui-monospace",
"SFMono-Regular",
"Menlo",
"Monaco",
"Consolas",
"Liberation Mono",
"Courier New",
"monospace",
'JetBrains Mono',
'Menlo',
'ui-monospace',
'SFMono-Regular',
'Menlo',
'Monaco',
'Consolas',
'Liberation Mono',
'Courier New',
'monospace',
],
},
container: {
center: true,
padding: "2rem",
padding: '2rem',
screens: {
"2xl": "1400px",
'2xl': '1400px',
},
},
extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))',
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))',
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))',
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))',
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))',
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))',
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))',
},
sidebar: {
DEFAULT: "hsl(var(--sidebar-background))",
foreground: "hsl(var(--sidebar-foreground))",
primary: "hsl(var(--sidebar-primary))",
"primary-foreground": "hsl(var(--sidebar-primary-foreground))",
accent: "hsl(var(--sidebar-accent))",
"accent-foreground": "hsl(var(--sidebar-accent-foreground))",
border: "hsl(var(--sidebar-border))",
ring: "hsl(var(--sidebar-ring))",
DEFAULT: 'hsl(var(--sidebar-background))',
foreground: 'hsl(var(--sidebar-foreground))',
primary: 'hsl(var(--sidebar-primary))',
'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
accent: 'hsl(var(--sidebar-accent))',
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
border: 'hsl(var(--sidebar-border))',
ring: 'hsl(var(--sidebar-ring))',
},
success: {
DEFAULT: "hsl(var(--success))",
foreground: "hsl(var(--success-foreground))",
DEFAULT: 'hsl(var(--success))',
foreground: 'hsl(var(--success-foreground))',
},
warning: {
DEFAULT: "hsl(var(--warning))",
foreground: "hsl(var(--warning-foreground))",
DEFAULT: 'hsl(var(--warning))',
foreground: 'hsl(var(--warning-foreground))',
},
green: {
DEFAULT: "hsl(var(--green))",
DEFAULT: 'hsl(var(--green))',
},
red: {
DEFAULT: "hsl(var(--red))",
DEFAULT: 'hsl(var(--red))',
},
blue: {
DEFAULT: "hsl(var(--blue))",
DEFAULT: 'hsl(var(--blue))',
},
purple: {
DEFAULT: "hsl(var(--purple))",
DEFAULT: 'hsl(var(--purple))',
},
yellow: {
DEFAULT: "hsl(var(--yellow))",
DEFAULT: 'hsl(var(--yellow))',
},
gray: {
DEFAULT: "hsl(var(--gray))",
DEFAULT: 'hsl(var(--gray))',
},
"primary-light": {
DEFAULT: "hsl(var(--primary-light))",
'primary-light': {
DEFAULT: 'hsl(var(--primary-light))',
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)',
},
keyframes: {
"accordion-down": {
from: { height: "0" },
to: { height: "var(--radix-accordion-content-height)" },
'accordion-down': {
from: { height: '0' },
to: { height: 'var(--radix-accordion-content-height)' },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: "0" },
'accordion-up': {
from: { height: 'var(--radix-accordion-content-height)' },
to: { height: '0' },
},
},
animation: {
"accordion-down": "accordion-down 0.4s ease-out",
"accordion-up": "accordion-up 0.4s ease-out",
'accordion-down': 'accordion-down 0.4s ease-out',
'accordion-up': 'accordion-up 0.4s ease-out',
},
},
},
plugins: [require("tailwindcss-animate")],
plugins: [require('tailwindcss-animate')],
} satisfies Config;
export default config;

6
packages/ui/index.ts
View File

@@ -1,5 +1,5 @@
import { cn } from "./lib/utils";
import { cn } from './lib/utils';
export { cn };
export { H1, H2, BodyText } from "./src/typography";
export { ThemeProvider, useTheme } from "next-themes";
export { H1, H2, BodyText } from './src/typography';
export { ThemeProvider, useTheme } from 'next-themes';

4
packages/ui/lib/utils.ts
View File

@@ -1,5 +1,5 @@
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));

24
packages/ui/src/accordion.tsx
View File

@@ -1,11 +1,11 @@
"use client";
'use client';
import * as React from "react";
import * as AccordionPrimitive from "@radix-ui/react-accordion";
import { ChevronDown } from "lucide-react";
import { motion } from "framer-motion";
import * as React from 'react';
import * as AccordionPrimitive from '@radix-ui/react-accordion';
import { ChevronDown } from 'lucide-react';
import { motion } from 'framer-motion';
import { cn } from "../lib/utils";
import { cn } from '../lib/utils';
const Accordion = AccordionPrimitive.Root;
@@ -13,9 +13,9 @@ const AccordionItem = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
>(({ className, ...props }, ref) => (
<AccordionPrimitive.Item ref={ref} className={cn("", className)} {...props} />
<AccordionPrimitive.Item ref={ref} className={cn('', className)} {...props} />
));
AccordionItem.displayName = "AccordionItem";
AccordionItem.displayName = 'AccordionItem';
const AccordionTrigger = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Trigger>,
@@ -25,8 +25,8 @@ const AccordionTrigger = React.forwardRef<
<AccordionPrimitive.Trigger
ref={ref}
className={cn(
"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
className
'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
className,
)}
{...props}
>
@@ -43,10 +43,10 @@ const AccordionContent = React.forwardRef<
>(({ className, children, ...props }, ref) => (
<AccordionPrimitive.Content
ref={ref}
className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all"
{...props}
>
<div className={cn("pb-4 pt-0", className)}>{children}</div>
<div className={cn('pb-4 pt-0', className)}>{children}</div>
</AccordionPrimitive.Content>
));

18
packages/ui/src/avatar.tsx
View File

@@ -1,9 +1,9 @@
"use client";
'use client';
import * as React from "react";
import * as AvatarPrimitive from "@radix-ui/react-avatar";
import * as React from 'react';
import * as AvatarPrimitive from '@radix-ui/react-avatar';
import { cn } from "../lib/utils";
import { cn } from '../lib/utils';
const Avatar = React.forwardRef<
React.ComponentRef<typeof AvatarPrimitive.Root>,
@@ -12,8 +12,8 @@ const Avatar = React.forwardRef<
<AvatarPrimitive.Root
ref={ref}
className={cn(
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
className
'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
className,
)}
{...props}
/>
@@ -26,7 +26,7 @@ const AvatarImage = React.forwardRef<
>(({ className, ...props }, ref) => (
<AvatarPrimitive.Image
ref={ref}
className={cn("aspect-square h-full w-full", className)}
className={cn('aspect-square h-full w-full', className)}
{...props}
/>
));
@@ -39,8 +39,8 @@ const AvatarFallback = React.forwardRef<
<AvatarPrimitive.Fallback
ref={ref}
className={cn(
"flex h-full w-full items-center justify-center rounded-full bg-muted",
className
'bg-muted flex h-full w-full items-center justify-center rounded-full',
className,
)}
{...props}
/>

20
packages/ui/src/badge.tsx
View File

@@ -1,26 +1,26 @@
import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import * as React from 'react';
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from "../lib/utils";
import { cn } from '../lib/utils';
const badgeVariants = cva(
"inline-flex items-center rounded border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
'inline-flex items-center rounded border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
{
variants: {
variant: {
default:
"border-transparent bg-primary text-foreground-foreground hover:bg-primary/80",
'border-transparent bg-primary text-foreground-foreground hover:bg-primary/80',
secondary:
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
destructive:
"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
outline: "text-foreground",
'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
outline: 'text-foreground',
},
},
defaultVariants: {
variant: "default",
variant: 'default',
},
}
},
);
export interface BadgeProps

52
packages/ui/src/breadcrumb.tsx
View File

@@ -1,108 +1,108 @@
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { ChevronRight, MoreHorizontal } from "lucide-react";
import * as React from 'react';
import { Slot } from '@radix-ui/react-slot';
import { ChevronRight, MoreHorizontal } from 'lucide-react';
import { cn } from "../lib/utils";
import { cn } from '../lib/utils';
const Breadcrumb = React.forwardRef<
HTMLElement,
React.ComponentPropsWithoutRef<"nav"> & {
React.ComponentPropsWithoutRef<'nav'> & {
separator?: React.ReactNode;
}
>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
Breadcrumb.displayName = "Breadcrumb";
Breadcrumb.displayName = 'Breadcrumb';
const BreadcrumbList = React.forwardRef<
HTMLOListElement,
React.ComponentPropsWithoutRef<"ol">
React.ComponentPropsWithoutRef<'ol'>
>(({ className, ...props }, ref) => (
<ol
ref={ref}
className={cn(
"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
className
'text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5',
className,
)}
{...props}
/>
));
BreadcrumbList.displayName = "BreadcrumbList";
BreadcrumbList.displayName = 'BreadcrumbList';
const BreadcrumbItem = React.forwardRef<
HTMLLIElement,
React.ComponentPropsWithoutRef<"li">
React.ComponentPropsWithoutRef<'li'>
>(({ className, ...props }, ref) => (
<li
ref={ref}
className={cn("inline-flex items-center gap-1.5", className)}
className={cn('inline-flex items-center gap-1.5', className)}
{...props}
/>
));
BreadcrumbItem.displayName = "BreadcrumbItem";
BreadcrumbItem.displayName = 'BreadcrumbItem';
const BreadcrumbLink = React.forwardRef<
HTMLAnchorElement,
React.ComponentPropsWithoutRef<"a"> & {
React.ComponentPropsWithoutRef<'a'> & {
asChild?: boolean;
}
>(({ asChild, className, ...props }, ref) => {
const Comp = asChild ? Slot : "a";
const Comp = asChild ? Slot : 'a';
return (
<Comp
ref={ref}
className={cn("transition-colors hover:text-foreground", className)}
className={cn('hover:text-foreground transition-colors', className)}
{...props}
/>
);
});
BreadcrumbLink.displayName = "BreadcrumbLink";
BreadcrumbLink.displayName = 'BreadcrumbLink';
const BreadcrumbPage = React.forwardRef<
HTMLSpanElement,
React.ComponentPropsWithoutRef<"span">
React.ComponentPropsWithoutRef<'span'>
>(({ className, ...props }, ref) => (
<span
ref={ref}
role="link"
aria-disabled="true"
aria-current="page"
className={cn("font-normal text-foreground", className)}
className={cn('text-foreground font-normal', className)}
{...props}
/>
));
BreadcrumbPage.displayName = "BreadcrumbPage";
BreadcrumbPage.displayName = 'BreadcrumbPage';
const BreadcrumbSeparator = ({
children,
className,
...props
}: React.ComponentProps<"li">) => (
}: React.ComponentProps<'li'>) => (
<li
role="presentation"
aria-hidden="true"
className={cn("[&>svg]:size-3.5", className)}
className={cn('[&>svg]:size-3.5', className)}
{...props}
>
{children ?? <ChevronRight />}
</li>
);
BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
BreadcrumbSeparator.displayName = 'BreadcrumbSeparator';
const BreadcrumbEllipsis = ({
className,
...props
}: React.ComponentProps<"span">) => (
}: React.ComponentProps<'span'>) => (
<span
role="presentation"
aria-hidden="true"
className={cn("flex h-9 w-9 items-center justify-center", className)}
className={cn('flex h-9 w-9 items-center justify-center', className)}
{...props}
>
<MoreHorizontal className="h-4 w-4" />
<span className="sr-only">More</span>
</span>
);
BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
BreadcrumbEllipsis.displayName = 'BreadcrumbElipssis';
export {
Breadcrumb,

52
packages/ui/src/button.tsx
View File

@@ -1,39 +1,39 @@
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import { Spinner } from "./spinner";
import * as React from 'react';
import { Slot } from '@radix-ui/react-slot';
import { cva, type VariantProps } from 'class-variance-authority';
import { Spinner } from './spinner';
import { cn } from "../lib/utils";
import { cn } from '../lib/utils';
const buttonVariants = cva(
"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-border disabled:pointer-events-none disabled:opacity-50",
'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-border disabled:pointer-events-none disabled:opacity-50',
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
destructive:
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
'bg-destructive text-destructive-foreground hover:bg-destructive/90',
outline:
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
icon: "bg-transparent hover:bg-transparent hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
silent: "bg-transparent hover:bg-accent/10 p-1",
'bg-secondary text-secondary-foreground hover:bg-secondary/80',
ghost: 'hover:bg-accent hover:text-accent-foreground',
icon: 'bg-transparent hover:bg-transparent hover:bg-accent hover:text-accent-foreground',
link: 'text-primary underline-offset-4 hover:underline',
silent: 'bg-transparent hover:bg-accent/10 p-1',
},
size: {
default: "h-9 px-4 ",
sm: "h-8 rounded-md px-3",
lg: "h-10 rounded-md px-8",
icon: "h-10 w-10",
default: 'h-9 px-4 ',
sm: 'h-8 rounded-md px-3',
lg: 'h-10 rounded-md px-8',
icon: 'h-10 w-10',
},
},
defaultVariants: {
variant: "default",
size: "default",
variant: 'default',
size: 'default',
},
}
},
);
export interface ButtonProps
@@ -56,9 +56,9 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
showSpinner = false,
...props
},
ref
ref,
) => {
const Comp = asChild ? Slot : "button";
const Comp = asChild ? Slot : 'button';
return (
<Comp
className={cn(buttonVariants({ variant, size, className }))}
@@ -66,12 +66,12 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
disabled={isLoading || props.disabled}
{...props}
>
{isLoading && showSpinner ? <Spinner className="h-4 w-4 mr-2" /> : null}
{isLoading && showSpinner ? <Spinner className="mr-2 h-4 w-4" /> : null}
{children}
</Comp>
);
}
},
);
Button.displayName = "Button";
Button.displayName = 'Button';
export { Button, buttonVariants };

28
packages/ui/src/card.tsx
View File

@@ -1,6 +1,6 @@
import * as React from "react";
import * as React from 'react';
import { cn } from "../lib/utils";
import { cn } from '../lib/utils';
const Card = React.forwardRef<
HTMLDivElement,
@@ -8,11 +8,11 @@ const Card = React.forwardRef<
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("rounded-xl border text-card-foreground shadow", className)}
className={cn('text-card-foreground rounded-xl border shadow', className)}
{...props}
/>
));
Card.displayName = "Card";
Card.displayName = 'Card';
const CardHeader = React.forwardRef<
HTMLDivElement,
@@ -20,11 +20,11 @@ const CardHeader = React.forwardRef<
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex flex-col space-y-1.5 p-6", className)}
className={cn('flex flex-col space-y-1.5 p-6', className)}
{...props}
/>
));
CardHeader.displayName = "CardHeader";
CardHeader.displayName = 'CardHeader';
const CardTitle = React.forwardRef<
HTMLParagraphElement,
@@ -32,11 +32,11 @@ const CardTitle = React.forwardRef<
>(({ className, ...props }, ref) => (
<h3
ref={ref}
className={cn("font-semibold leading-none tracking-tight", className)}
className={cn('font-semibold leading-none tracking-tight', className)}
{...props}
/>
));
CardTitle.displayName = "CardTitle";
CardTitle.displayName = 'CardTitle';
const CardDescription = React.forwardRef<
HTMLParagraphElement,
@@ -44,19 +44,19 @@ const CardDescription = React.forwardRef<
>(({ className, ...props }, ref) => (
<p
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
className={cn('text-muted-foreground text-sm', className)}
{...props}
/>
));
CardDescription.displayName = "CardDescription";
CardDescription.displayName = 'CardDescription';
const CardContent = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
<div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
));
CardContent.displayName = "CardContent";
CardContent.displayName = 'CardContent';
const CardFooter = React.forwardRef<
HTMLDivElement,
@@ -64,11 +64,11 @@ const CardFooter = React.forwardRef<
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex items-center p-6 pt-0", className)}
className={cn('flex items-center p-6 pt-0', className)}
{...props}
/>
));
CardFooter.displayName = "CardFooter";
CardFooter.displayName = 'CardFooter';
export {
Card,

122
packages/ui/src/charts.tsx
View File

@@ -1,12 +1,12 @@
"use client";
'use client';
import * as React from "react";
import * as RechartsPrimitive from "recharts";
import * as React from 'react';
import * as RechartsPrimitive from 'recharts';
import { cn } from "../lib/utils";
import { cn } from '../lib/utils';
// Format: { THEME_NAME: CSS_SELECTOR }
const THEMES = { light: "", dark: ".dark" } as const;
const THEMES = { light: '', dark: '.dark' } as const;
export type ChartConfig = {
[k in string]: {
@@ -28,7 +28,7 @@ function useChart() {
const context = React.useContext(ChartContext);
if (!context) {
throw new Error("useChart must be used within a <ChartContainer />");
throw new Error('useChart must be used within a <ChartContainer />');
}
return context;
@@ -36,15 +36,15 @@ function useChart() {
const ChartContainer = React.forwardRef<
HTMLDivElement,
React.ComponentProps<"div"> & {
React.ComponentProps<'div'> & {
config: ChartConfig;
children: React.ComponentProps<
typeof RechartsPrimitive.ResponsiveContainer
>["children"];
>['children'];
}
>(({ id, className, children, config, ...props }, ref) => {
const uniqueId = React.useId();
const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;
return (
<ChartContext.Provider value={{ config }}>
@@ -52,8 +52,8 @@ const ChartContainer = React.forwardRef<
data-chart={chartId}
ref={ref}
className={cn(
"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
className
"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
className,
)}
{...props}
>
@@ -65,11 +65,11 @@ const ChartContainer = React.forwardRef<
</ChartContext.Provider>
);
});
ChartContainer.displayName = "Chart";
ChartContainer.displayName = 'Chart';
const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
const colorConfig = Object.entries(config).filter(
([_, config]) => config.theme || config.color
([_, config]) => config.theme || config.color,
);
if (!colorConfig.length) {
@@ -90,11 +90,11 @@ ${colorConfig
itemConfig.color;
return color ? ` --color-${key}: ${color};` : null;
})
.join("\n")}
.join('\n')}
}
`
`,
)
.join("\n"),
.join('\n'),
}}
/>
);
@@ -105,10 +105,10 @@ const ChartTooltip = RechartsPrimitive.Tooltip;
const ChartTooltipContent = React.forwardRef<
HTMLDivElement,
React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
React.ComponentProps<"div"> & {
React.ComponentProps<'div'> & {
hideLabel?: boolean;
hideIndicator?: boolean;
indicator?: "line" | "dot" | "dashed";
indicator?: 'line' | 'dot' | 'dashed';
nameKey?: string;
labelKey?: string;
}
@@ -118,7 +118,7 @@ const ChartTooltipContent = React.forwardRef<
active,
payload,
className,
indicator = "dot",
indicator = 'dot',
hideLabel = false,
hideIndicator = false,
label,
@@ -129,7 +129,7 @@ const ChartTooltipContent = React.forwardRef<
nameKey,
labelKey,
},
ref
ref,
) => {
const { config } = useChart();
@@ -139,16 +139,16 @@ const ChartTooltipContent = React.forwardRef<
}
const [item] = payload;
const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
const key = `${labelKey || item?.dataKey || item?.name || 'value'}`;
const itemConfig = getPayloadConfigFromPayload(config, item, key);
const value =
!labelKey && typeof label === "string"
!labelKey && typeof label === 'string'
? config[label as keyof typeof config]?.label || label
: itemConfig?.label;
if (labelFormatter) {
return (
<div className={cn("font-medium", labelClassName)}>
<div className={cn('font-medium', labelClassName)}>
{labelFormatter(value, payload)}
</div>
);
@@ -158,7 +158,7 @@ const ChartTooltipContent = React.forwardRef<
return null;
}
return <div className={cn("font-medium", labelClassName)}>{value}</div>;
return <div className={cn('font-medium', labelClassName)}>{value}</div>;
}, [
label,
labelFormatter,
@@ -173,20 +173,20 @@ const ChartTooltipContent = React.forwardRef<
return null;
}
const nestLabel = payload.length === 1 && indicator !== "dot";
const nestLabel = payload.length === 1 && indicator !== 'dot';
return (
<div
ref={ref}
className={cn(
"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
className
'border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl',
className,
)}
>
{!nestLabel ? tooltipLabel : null}
<div className="grid gap-1.5">
{payload.map((item, index) => {
const key = `${nameKey || item.name || item.dataKey || "value"}`;
const key = `${nameKey || item.name || item.dataKey || 'value'}`;
const itemConfig = getPayloadConfigFromPayload(config, item, key);
const indicatorColor = color || item.payload.fill || item.color;
@@ -194,8 +194,8 @@ const ChartTooltipContent = React.forwardRef<
<div
key={item.dataKey}
className={cn(
"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
indicator === "dot" && "items-center"
'[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5',
indicator === 'dot' && 'items-center',
)}
>
{formatter && item?.value !== undefined && item.name ? (
@@ -208,19 +208,19 @@ const ChartTooltipContent = React.forwardRef<
!hideIndicator && (
<div
className={cn(
"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
'shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]',
{
"h-2.5 w-2.5": indicator === "dot",
"w-1": indicator === "line",
"w-0 border-[1.5px] border-dashed bg-transparent":
indicator === "dashed",
"my-0.5": nestLabel && indicator === "dashed",
}
'h-2.5 w-2.5': indicator === 'dot',
'w-1': indicator === 'line',
'w-0 border-[1.5px] border-dashed bg-transparent':
indicator === 'dashed',
'my-0.5': nestLabel && indicator === 'dashed',
},
)}
style={
{
"--color-bg": indicatorColor,
"--color-border": indicatorColor,
'--color-bg': indicatorColor,
'--color-border': indicatorColor,
} as React.CSSProperties
}
/>
@@ -228,8 +228,8 @@ const ChartTooltipContent = React.forwardRef<
)}
<div
className={cn(
"flex flex-1 justify-between leading-none",
nestLabel ? "items-end" : "items-center"
'flex flex-1 justify-between leading-none',
nestLabel ? 'items-end' : 'items-center',
)}
>
<div className="grid gap-1.5">
@@ -239,7 +239,7 @@ const ChartTooltipContent = React.forwardRef<
</span>
</div>
{item.value && (
<span className="font-mono font-medium tabular-nums text-foreground">
<span className="text-foreground font-mono font-medium tabular-nums">
{item.value.toLocaleString()}
</span>
)}
@@ -252,23 +252,23 @@ const ChartTooltipContent = React.forwardRef<
</div>
</div>
);
}
},
);
ChartTooltipContent.displayName = "ChartTooltip";
ChartTooltipContent.displayName = 'ChartTooltip';
const ChartLegend = RechartsPrimitive.Legend;
const ChartLegendContent = React.forwardRef<
HTMLDivElement,
React.ComponentProps<"div"> &
Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
React.ComponentProps<'div'> &
Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
hideIcon?: boolean;
nameKey?: string;
}
>(
(
{ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
ref
{ className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey },
ref,
) => {
const { config } = useChart();
@@ -280,20 +280,20 @@ const ChartLegendContent = React.forwardRef<
<div
ref={ref}
className={cn(
"flex items-center justify-center gap-4",
verticalAlign === "top" ? "pb-3" : "pt-3",
className
'flex items-center justify-center gap-4',
verticalAlign === 'top' ? 'pb-3' : 'pt-3',
className,
)}
>
{payload.map((item) => {
const key = `${nameKey || item.dataKey || "value"}`;
const key = `${nameKey || item.dataKey || 'value'}`;
const itemConfig = getPayloadConfigFromPayload(config, item, key);
return (
<div
key={item.value}
className={cn(
"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
'[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3',
)}
>
{itemConfig?.icon && !hideIcon ? (
@@ -312,23 +312,23 @@ const ChartLegendContent = React.forwardRef<
})}
</div>
);
}
},
);
ChartLegendContent.displayName = "ChartLegend";
ChartLegendContent.displayName = 'ChartLegend';
// Helper to extract item config from a payload.
function getPayloadConfigFromPayload(
config: ChartConfig,
payload: unknown,
key: string
key: string,
) {
if (typeof payload !== "object" || payload === null) {
if (typeof payload !== 'object' || payload === null) {
return undefined;
}
const payloadPayload =
"payload" in payload &&
typeof payload.payload === "object" &&
'payload' in payload &&
typeof payload.payload === 'object' &&
payload.payload !== null
? payload.payload
: undefined;
@@ -337,13 +337,13 @@ function getPayloadConfigFromPayload(
if (
key in payload &&
typeof payload[key as keyof typeof payload] === "string"
typeof payload[key as keyof typeof payload] === 'string'
) {
configLabelKey = payload[key as keyof typeof payload] as string;
} else if (
payloadPayload &&
key in payloadPayload &&
typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'
) {
configLabelKey = payloadPayload[
key as keyof typeof payloadPayload

14
packages/ui/src/code-block.tsx
View File

@@ -1,8 +1,8 @@
import { BundledLanguage, codeToHast } from "shiki";
import { toJsxRuntime } from "hast-util-to-jsx-runtime";
import { Fragment } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { cn } from "../lib/utils";
import { BundledLanguage, codeToHast } from 'shiki';
import { toJsxRuntime } from 'hast-util-to-jsx-runtime';
import { Fragment } from 'react';
import { jsx, jsxs } from 'react/jsx-runtime';
import { cn } from '../lib/utils';
interface Props {
children: string;
@@ -14,8 +14,8 @@ export async function CodeBlock(props: Props) {
const out = await codeToHast(props.children, {
lang: props.lang,
themes: {
dark: "catppuccin-mocha",
light: "catppuccin-latte",
dark: 'catppuccin-mocha',
light: 'catppuccin-latte',
},
});

42
packages/ui/src/command.tsx
View File

@@ -1,12 +1,12 @@
"use client";
'use client';
import * as React from "react";
import { type DialogProps } from "@radix-ui/react-dialog";
import { Command as CommandPrimitive } from "cmdk";
import { Search } from "lucide-react";
import * as React from 'react';
import { type DialogProps } from '@radix-ui/react-dialog';
import { Command as CommandPrimitive } from 'cmdk';
import { Search } from 'lucide-react';
import { cn } from "../lib/utils";
import { Dialog, DialogContent } from "./dialog";
import { cn } from '../lib/utils';
import { Dialog, DialogContent } from './dialog';
const Command = React.forwardRef<
React.ElementRef<typeof CommandPrimitive>,
@@ -15,8 +15,8 @@ const Command = React.forwardRef<
<CommandPrimitive
ref={ref}
className={cn(
"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
className
'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
className,
)}
{...props}
/>
@@ -29,7 +29,7 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
return (
<Dialog {...props}>
<DialogContent className="overflow-hidden p-0 shadow-lg">
<Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
<Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
{children}
</Command>
</DialogContent>
@@ -46,8 +46,8 @@ const CommandInput = React.forwardRef<
<CommandPrimitive.Input
ref={ref}
className={cn(
"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
className
'placeholder:text-muted-foreground flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',
className,
)}
{...props}
/>
@@ -62,7 +62,7 @@ const CommandList = React.forwardRef<
>(({ className, ...props }, ref) => (
<CommandPrimitive.List
ref={ref}
className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
{...props}
/>
));
@@ -89,8 +89,8 @@ const CommandGroup = React.forwardRef<
<CommandPrimitive.Group
ref={ref}
className={cn(
"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
className
'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
className,
)}
{...props}
/>
@@ -104,7 +104,7 @@ const CommandSeparator = React.forwardRef<
>(({ className, ...props }, ref) => (
<CommandPrimitive.Separator
ref={ref}
className={cn("-mx-1 h-px bg-border", className)}
className={cn('bg-border -mx-1 h-px', className)}
{...props}
/>
));
@@ -117,8 +117,8 @@ const CommandItem = React.forwardRef<
<CommandPrimitive.Item
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
className
"data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
className,
)}
{...props}
/>
@@ -133,14 +133,14 @@ const CommandShortcut = ({
return (
<span
className={cn(
"ml-auto text-xs tracking-widest text-muted-foreground",
className
'text-muted-foreground ml-auto text-xs tracking-widest',
className,
)}
{...props}
/>
);
};
CommandShortcut.displayName = "CommandShortcut";
CommandShortcut.displayName = 'CommandShortcut';
export {
Command,

38
packages/ui/src/dialog.tsx
View File

@@ -1,10 +1,10 @@
"use client";
'use client';
import * as React from "react";
import * as DialogPrimitive from "@radix-ui/react-dialog";
import { X } from "lucide-react";
import * as React from 'react';
import * as DialogPrimitive from '@radix-ui/react-dialog';
import { X } from 'lucide-react';
import { cn } from "../lib/utils";
import { cn } from '../lib/utils';
const Dialog = DialogPrimitive.Root;
@@ -21,8 +21,8 @@ const DialogOverlay = React.forwardRef<
<DialogPrimitive.Overlay
ref={ref}
className={cn(
"fixed inset-0 z-50 bg-background/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 backdrop-blur",
className
'bg-background/50 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 backdrop-blur',
className,
)}
{...props}
/>
@@ -38,13 +38,13 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] rounded-2xl z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border-2 bg-popover p-6 shadow-lg duration-200 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%]",
className
'bg-popover 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-4 rounded-2xl border-2 p-6 shadow-lg duration-200',
className,
)}
{...props}
>
{children}
<DialogPrimitive.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-accent data-[state=open]:text-muted-foreground">
<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">
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
@@ -59,13 +59,13 @@ const DialogHeader = ({
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col space-y-1.5 text-center sm:text-left",
className
'flex flex-col space-y-1.5 text-center sm:text-left',
className,
)}
{...props}
/>
);
DialogHeader.displayName = "DialogHeader";
DialogHeader.displayName = 'DialogHeader';
const DialogFooter = ({
className,
@@ -73,13 +73,13 @@ const DialogFooter = ({
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
className
'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
className,
)}
{...props}
/>
);
DialogFooter.displayName = "DialogFooter";
DialogFooter.displayName = 'DialogFooter';
const DialogTitle = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Title>,
@@ -88,8 +88,8 @@ const DialogTitle = React.forwardRef<
<DialogPrimitive.Title
ref={ref}
className={cn(
"text-lg font-semibold leading-none tracking-tight",
className
'text-lg font-semibold leading-none tracking-tight',
className,
)}
{...props}
/>
@@ -102,7 +102,7 @@ const DialogDescription = React.forwardRef<
>(({ className, ...props }, ref) => (
<DialogPrimitive.Description
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
className={cn('text-muted-foreground text-sm', className)}
{...props}
/>
));

50
packages/ui/src/dropdown-menu.tsx
View File

@@ -1,10 +1,10 @@
"use client";
'use client';
import * as React from "react";
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
import { Check, ChevronRight, Circle } from "lucide-react";
import * as React from 'react';
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
import { Check, ChevronRight, Circle } from 'lucide-react';
import { cn } from "../lib/utils";
import { cn } from '../lib/utils';
const DropdownMenu = DropdownMenuPrimitive.Root;
@@ -27,9 +27,9 @@ const DropdownMenuSubTrigger = React.forwardRef<
<DropdownMenuPrimitive.SubTrigger
ref={ref}
className={cn(
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
inset && "pl-8",
className
'focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
inset && 'pl-8',
className,
)}
{...props}
>
@@ -47,8 +47,8 @@ const DropdownMenuSubContent = React.forwardRef<
<DropdownMenuPrimitive.SubContent
ref={ref}
className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
className
'bg-popover text-popover-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-[--radix-dropdown-menu-content-transform-origin] overflow-hidden rounded-md border p-1 shadow-lg',
className,
)}
{...props}
/>
@@ -65,8 +65,8 @@ const DropdownMenuContent = React.forwardRef<
ref={ref}
sideOffset={sideOffset}
className={cn(
"z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-xl border bg-popover p-1 text-popover-foreground shadow-md 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
className
'bg-popover text-popover-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] origin-[--radix-dropdown-menu-content-transform-origin] overflow-y-auto overflow-x-hidden rounded-xl border p-1 shadow-md',
className,
)}
{...props}
/>
@@ -83,9 +83,9 @@ const DropdownMenuItem = React.forwardRef<
<DropdownMenuPrimitive.Item
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center gap-2 rounded-lg px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
inset && "pl-8",
className
'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-lg px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
inset && 'pl-8',
className,
)}
{...props}
/>
@@ -99,8 +99,8 @@ const DropdownMenuCheckboxItem = React.forwardRef<
<DropdownMenuPrimitive.CheckboxItem
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
className,
)}
checked={checked}
{...props}
@@ -123,8 +123,8 @@ const DropdownMenuRadioItem = React.forwardRef<
<DropdownMenuPrimitive.RadioItem
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
className,
)}
{...props}
>
@@ -147,9 +147,9 @@ const DropdownMenuLabel = React.forwardRef<
<DropdownMenuPrimitive.Label
ref={ref}
className={cn(
"px-2 py-1.5 text-sm font-semibold",
inset && "pl-8",
className
'px-2 py-1.5 text-sm font-semibold',
inset && 'pl-8',
className,
)}
{...props}
/>
@@ -162,7 +162,7 @@ const DropdownMenuSeparator = React.forwardRef<
>(({ className, ...props }, ref) => (
<DropdownMenuPrimitive.Separator
ref={ref}
className={cn("-mx-1 my-1 h-px bg-muted", className)}
className={cn('bg-muted -mx-1 my-1 h-px', className)}
{...props}
/>
));
@@ -174,12 +174,12 @@ const DropdownMenuShortcut = ({
}: React.HTMLAttributes<HTMLSpanElement>) => {
return (
<span
className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
{...props}
/>
);
};
DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
export {
DropdownMenu,

36
packages/ui/src/form.tsx
View File

@@ -1,6 +1,6 @@
import * as React from "react";
import * as LabelPrimitive from "@radix-ui/react-label";
import { Slot } from "@radix-ui/react-slot";
import * as React from 'react';
import * as LabelPrimitive from '@radix-ui/react-label';
import { Slot } from '@radix-ui/react-slot';
import {
Controller,
ControllerProps,
@@ -8,10 +8,10 @@ import {
FieldValues,
FormProvider,
useFormContext,
} from "react-hook-form";
} from 'react-hook-form';
import { cn } from "../lib/utils";
import { Label } from "./label";
import { cn } from '../lib/utils';
import { Label } from './label';
const Form = FormProvider;
@@ -23,7 +23,7 @@ type FormFieldContextValue<
};
const FormFieldContext = React.createContext<FormFieldContextValue>(
{} as FormFieldContextValue
{} as FormFieldContextValue,
);
const FormField = <
@@ -47,7 +47,7 @@ const useFormField = () => {
const fieldState = getFieldState(fieldContext.name, formState);
if (!fieldContext) {
throw new Error("useFormField should be used within <FormField>");
throw new Error('useFormField should be used within <FormField>');
}
const { id } = itemContext;
@@ -67,7 +67,7 @@ type FormItemContextValue = {
};
const FormItemContext = React.createContext<FormItemContextValue>(
{} as FormItemContextValue
{} as FormItemContextValue,
);
const FormItem = React.forwardRef<
@@ -78,11 +78,11 @@ const FormItem = React.forwardRef<
return (
<FormItemContext.Provider value={{ id }}>
<div ref={ref} className={cn("space-y-2", className)} {...props} />
<div ref={ref} className={cn('space-y-2', className)} {...props} />
</FormItemContext.Provider>
);
});
FormItem.displayName = "FormItem";
FormItem.displayName = 'FormItem';
const FormLabel = React.forwardRef<
React.ElementRef<typeof LabelPrimitive.Root>,
@@ -93,13 +93,13 @@ const FormLabel = React.forwardRef<
return (
<Label
ref={ref}
className={cn(error && "text-destructive", className)}
className={cn(error && 'text-destructive', className)}
htmlFor={formItemId}
{...props}
/>
);
});
FormLabel.displayName = "FormLabel";
FormLabel.displayName = 'FormLabel';
const FormControl = React.forwardRef<
React.ElementRef<typeof Slot>,
@@ -122,7 +122,7 @@ const FormControl = React.forwardRef<
/>
);
});
FormControl.displayName = "FormControl";
FormControl.displayName = 'FormControl';
const FormDescription = React.forwardRef<
HTMLParagraphElement,
@@ -134,12 +134,12 @@ const FormDescription = React.forwardRef<
<p
ref={ref}
id={formDescriptionId}
className={cn("text-sm text-muted-foreground", className)}
className={cn('text-muted-foreground text-sm', className)}
{...props}
/>
);
});
FormDescription.displayName = "FormDescription";
FormDescription.displayName = 'FormDescription';
const FormMessage = React.forwardRef<
HTMLParagraphElement,
@@ -156,14 +156,14 @@ const FormMessage = React.forwardRef<
<p
ref={ref}
id={formMessageId}
className={cn("text-sm font-medium text-destructive", className)}
className={cn('text-destructive text-sm font-medium', className)}
{...props}
>
{body}
</p>
);
});
FormMessage.displayName = "FormMessage";
FormMessage.displayName = 'FormMessage';
export {
useFormField,

8
packages/ui/src/hooks/use-mobile.tsx
View File

@@ -1,10 +1,10 @@
import * as React from "react";
import * as React from 'react';
const MOBILE_BREAKPOINT = 768;
export function useIsMobile() {
const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
undefined
undefined,
);
React.useEffect(() => {
@@ -12,9 +12,9 @@ export function useIsMobile() {
const onChange = () => {
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
};
mql.addEventListener("change", onChange);
mql.addEventListener('change', onChange);
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
return () => mql.removeEventListener("change", onChange);
return () => mql.removeEventListener('change', onChange);
}, []);
return !!isMobile;

48
packages/ui/src/input-otp.tsx
View File

@@ -1,12 +1,12 @@
"use client";
'use client';
import * as React from "react";
import { OTPInput, OTPInputContext } from "input-otp";
import { Dot } from "lucide-react";
import * as React from 'react';
import { OTPInput, OTPInputContext } from 'input-otp';
import { Dot } from 'lucide-react';
import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp";
import { REGEXP_ONLY_DIGITS_AND_CHARS } from 'input-otp';
import { cn } from "../lib/utils";
import { cn } from '../lib/utils';
const InputOTP = React.forwardRef<
React.ElementRef<typeof OTPInput>,
@@ -15,26 +15,26 @@ const InputOTP = React.forwardRef<
<OTPInput
ref={ref}
containerClassName={cn(
"flex items-center gap-2 has-[:disabled]:opacity-50",
containerClassName
'flex items-center gap-2 has-[:disabled]:opacity-50',
containerClassName,
)}
className={cn("disabled:cursor-not-allowed", className)}
className={cn('disabled:cursor-not-allowed', className)}
{...props}
/>
));
InputOTP.displayName = "InputOTP";
InputOTP.displayName = 'InputOTP';
const InputOTPGroup = React.forwardRef<
React.ElementRef<"div">,
React.ComponentPropsWithoutRef<"div">
React.ElementRef<'div'>,
React.ComponentPropsWithoutRef<'div'>
>(({ className, ...props }, ref) => (
<div ref={ref} className={cn("flex items-center", className)} {...props} />
<div ref={ref} className={cn('flex items-center', className)} {...props} />
));
InputOTPGroup.displayName = "InputOTPGroup";
InputOTPGroup.displayName = 'InputOTPGroup';
const InputOTPSlot = React.forwardRef<
React.ElementRef<"div">,
React.ComponentPropsWithoutRef<"div"> & { index: number }
React.ElementRef<'div'>,
React.ComponentPropsWithoutRef<'div'> & { index: number }
>(({ index, className, ...props }, ref) => {
const inputOTPContext = React.useContext(OTPInputContext);
const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]!;
@@ -43,32 +43,32 @@ const InputOTPSlot = React.forwardRef<
<div
ref={ref}
className={cn(
"relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
isActive && "z-10 ring-2 ring-ring ring-offset-background",
className
'border-input relative flex h-10 w-10 items-center justify-center border-y border-r text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
isActive && 'ring-ring ring-offset-background z-10 ring-2',
className,
)}
{...props}
>
{char}
{hasFakeCaret && (
<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
<div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
<div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
</div>
)}
</div>
);
});
InputOTPSlot.displayName = "InputOTPSlot";
InputOTPSlot.displayName = 'InputOTPSlot';
const InputOTPSeparator = React.forwardRef<
React.ElementRef<"div">,
React.ComponentPropsWithoutRef<"div">
React.ElementRef<'div'>,
React.ComponentPropsWithoutRef<'div'>
>(({ ...props }, ref) => (
<div ref={ref} role="separator" {...props}>
<Dot />
</div>
));
InputOTPSeparator.displayName = "InputOTPSeparator";
InputOTPSeparator.displayName = 'InputOTPSeparator';
export {
InputOTP,

12
packages/ui/src/input.tsx
View File

@@ -1,6 +1,6 @@
import * as React from "react";
import * as React from 'react';
import { cn } from "../lib/utils";
import { cn } from '../lib/utils';
export interface InputProps
extends React.InputHTMLAttributes<HTMLInputElement> {}
@@ -11,15 +11,15 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
<input
type={type}
className={cn(
"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/10 disabled:cursor-not-allowed disabled:opacity-50",
className
'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-primary/10 flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50',
className,
)}
ref={ref}
{...props}
/>
);
}
},
);
Input.displayName = "Input";
Input.displayName = 'Input';
export { Input };

12
packages/ui/src/label.tsx
View File

@@ -1,13 +1,13 @@
"use client";
'use client';
import * as React from "react";
import * as LabelPrimitive from "@radix-ui/react-label";
import { cva, type VariantProps } from "class-variance-authority";
import * as React from 'react';
import * as LabelPrimitive from '@radix-ui/react-label';
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from "../lib/utils";
import { cn } from '../lib/utils';
const labelVariants = cva(
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
);
const Label = React.forwardRef<

4
packages/ui/src/logo.tsx
View File

@@ -1,4 +1,4 @@
import React from "react";
import React from 'react';
export const Logo: React.FC<React.SVGProps<SVGSVGElement>> = ({ ...props }) => {
return (
@@ -12,7 +12,7 @@ export const Logo: React.FC<React.SVGProps<SVGSVGElement>> = ({ ...props }) => {
>
<mask
id="mask0_28_12"
style={{ maskType: "alpha" }}
style={{ maskType: 'alpha' }}
maskUnits="userSpaceOnUse"
x="0"
y="0"

14
packages/ui/src/popover.tsx
View File

@@ -1,9 +1,9 @@
"use client";
'use client';
import * as React from "react";
import * as PopoverPrimitive from "@radix-ui/react-popover";
import * as React from 'react';
import * as PopoverPrimitive from '@radix-ui/react-popover';
import { cn } from "../lib/utils";
import { cn } from '../lib/utils';
const Popover = PopoverPrimitive.Root;
@@ -12,15 +12,15 @@ const PopoverTrigger = PopoverPrimitive.Trigger;
const PopoverContent = React.forwardRef<
React.ElementRef<typeof PopoverPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
<PopoverPrimitive.Portal>
<PopoverPrimitive.Content
ref={ref}
align={align}
sideOffset={sideOffset}
className={cn(
"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className
'bg-popover text-popover-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none',
className,
)}
{...props}
/>

14
packages/ui/src/progress.tsx
View File

@@ -1,9 +1,9 @@
"use client";
'use client';
import * as React from "react";
import * as ProgressPrimitive from "@radix-ui/react-progress";
import * as React from 'react';
import * as ProgressPrimitive from '@radix-ui/react-progress';
import { cn } from "../lib/utils";
import { cn } from '../lib/utils';
const Progress = React.forwardRef<
React.ElementRef<typeof ProgressPrimitive.Root>,
@@ -12,13 +12,13 @@ const Progress = React.forwardRef<
<ProgressPrimitive.Root
ref={ref}
className={cn(
"relative h-3 w-full overflow-hidden rounded-full bg-secondary",
className
'bg-secondary relative h-3 w-full overflow-hidden rounded-full',
className,
)}
{...props}
>
<ProgressPrimitive.Indicator
className="h-full w-full flex-1 bg-primary transition-all"
className="bg-primary h-full w-full flex-1 transition-all"
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
/>
</ProgressPrimitive.Root>

46
packages/ui/src/select.tsx
View File

@@ -1,10 +1,10 @@
"use client";
'use client';
import * as React from "react";
import * as SelectPrimitive from "@radix-ui/react-select";
import { Check, ChevronDown, ChevronUp } from "lucide-react";
import * as React from 'react';
import * as SelectPrimitive from '@radix-ui/react-select';
import { Check, ChevronDown, ChevronUp } from 'lucide-react';
import { cn } from "../lib/utils";
import { cn } from '../lib/utils';
const Select = SelectPrimitive.Root;
@@ -19,8 +19,8 @@ const SelectTrigger = React.forwardRef<
<SelectPrimitive.Trigger
ref={ref}
className={cn(
"flex h-9 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus-visible:ring-primary/10 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
className
'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-primary/10 flex h-9 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
className,
)}
{...props}
>
@@ -39,8 +39,8 @@ const SelectScrollUpButton = React.forwardRef<
<SelectPrimitive.ScrollUpButton
ref={ref}
className={cn(
"flex cursor-default items-center justify-center py-1",
className
'flex cursor-default items-center justify-center py-1',
className,
)}
{...props}
>
@@ -56,8 +56,8 @@ const SelectScrollDownButton = React.forwardRef<
<SelectPrimitive.ScrollDownButton
ref={ref}
className={cn(
"flex cursor-default items-center justify-center py-1",
className
'flex cursor-default items-center justify-center py-1',
className,
)}
{...props}
>
@@ -70,15 +70,15 @@ SelectScrollDownButton.displayName =
const SelectContent = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ className, children, position = "popper", ...props }, ref) => (
>(({ className, children, position = 'popper', ...props }, ref) => (
<SelectPrimitive.Portal>
<SelectPrimitive.Content
ref={ref}
className={cn(
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-xl border bg-popover text-popover-foreground shadow-md 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
position === "popper" &&
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
className
'bg-popover text-popover-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-xl border shadow-md',
position === 'popper' &&
'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
className,
)}
position={position}
{...props}
@@ -86,9 +86,9 @@ const SelectContent = React.forwardRef<
<SelectScrollUpButton />
<SelectPrimitive.Viewport
className={cn(
"p-1",
position === "popper" &&
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
'p-1',
position === 'popper' &&
'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
)}
>
{children}
@@ -105,7 +105,7 @@ const SelectLabel = React.forwardRef<
>(({ className, ...props }, ref) => (
<SelectPrimitive.Label
ref={ref}
className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
{...props}
/>
));
@@ -118,8 +118,8 @@ const SelectItem = React.forwardRef<
<SelectPrimitive.Item
ref={ref}
className={cn(
"relative flex w-full cursor-default select-none items-center rounded-lg py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
'focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-lg py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
className,
)}
{...props}
>
@@ -140,7 +140,7 @@ const SelectSeparator = React.forwardRef<
>(({ className, ...props }, ref) => (
<SelectPrimitive.Separator
ref={ref}
className={cn("-mx-1 my-1 h-px bg-muted", className)}
className={cn('bg-muted -mx-1 my-1 h-px', className)}
{...props}
/>
));

20
packages/ui/src/separator.tsx
View File

@@ -1,30 +1,30 @@
"use client";
'use client';
import * as React from "react";
import * as SeparatorPrimitive from "@radix-ui/react-separator";
import * as React from 'react';
import * as SeparatorPrimitive from '@radix-ui/react-separator';
import { cn } from "../lib/utils";
import { cn } from '../lib/utils';
const Separator = React.forwardRef<
React.ElementRef<typeof SeparatorPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
>(
(
{ className, orientation = "horizontal", decorative = true, ...props },
ref
{ className, orientation = 'horizontal', decorative = true, ...props },
ref,
) => (
<SeparatorPrimitive.Root
ref={ref}
decorative={decorative}
orientation={orientation}
className={cn(
"shrink-0 bg-border ",
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
className
'bg-border shrink-0',
orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
className,
)}
{...props}
/>
)
),
);
Separator.displayName = SeparatorPrimitive.Root.displayName;

59
packages/ui/src/sheet.tsx
View File

@@ -1,12 +1,12 @@
"use client";
'use client';
import * as React from "react";
import * as SheetPrimitive from "@radix-ui/react-dialog";
import { cva, type VariantProps } from "class-variance-authority";
import { X } from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";
import * as React from 'react';
import * as SheetPrimitive from '@radix-ui/react-dialog';
import { cva, type VariantProps } from 'class-variance-authority';
import { X } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
import { cn } from "../lib/utils";
import { cn } from '../lib/utils';
const Sheet = SheetPrimitive.Root;
@@ -22,8 +22,8 @@ const SheetOverlay = React.forwardRef<
>(({ className, ...props }, ref) => (
<SheetPrimitive.Overlay
className={cn(
"fixed inset-0 z-50 bg-background/50 backdrop-blur",
className
'bg-background/50 fixed inset-0 z-50 backdrop-blur',
className,
)}
{...props}
ref={ref}
@@ -40,21 +40,20 @@ const SheetOverlay = React.forwardRef<
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
const sheetVariants = cva(
"fixed z-50 grid gap-4 rounded-2xl border-2 bg-popover p-6 shadow-lg",
'fixed z-50 grid gap-4 rounded-2xl border-2 bg-popover p-6 shadow-lg',
{
variants: {
side: {
top: "inset-x-0 top-0",
bottom: "inset-x-0 bottom-0",
left: "inset-y-0 left-0 h-full w-3/4 sm:max-w-sm",
right:
"inset-y-0 right-[32px] h-[95%] my-auto w-3/4 sm:max-w-sm",
top: 'inset-x-0 top-0',
bottom: 'inset-x-0 bottom-0',
left: 'inset-y-0 left-0 h-full w-3/4 sm:max-w-sm',
right: 'inset-y-0 right-[32px] h-[95%] my-auto w-3/4 sm:max-w-sm',
},
},
defaultVariants: {
side: "right",
side: 'right',
},
}
},
);
interface SheetContentProps
@@ -64,7 +63,7 @@ interface SheetContentProps
const SheetContent = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Content>,
SheetContentProps
>(({ side = "right", className, children, ...props }, ref) => (
>(({ side = 'right', className, children, ...props }, ref) => (
<SheetPortal>
<SheetOverlay />
<SheetPrimitive.Content
@@ -74,13 +73,13 @@ const SheetContent = React.forwardRef<
asChild
>
<motion.div
initial={{ x: side === "left" ? "-50%" : "50%" }}
initial={{ x: side === 'left' ? '-50%' : '50%' }}
animate={{ x: 0 }}
exit={{ x: side === "left" ? "-50%" : "50%" }}
transition={{ type: "spring", damping: 25, stiffness: 400 }}
exit={{ x: side === 'left' ? '-50%' : '50%' }}
transition={{ type: 'spring', damping: 25, stiffness: 400 }}
>
{children}
<SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background 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">
<SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
</SheetPrimitive.Close>
@@ -96,13 +95,13 @@ const SheetHeader = ({
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col space-y-2 text-center sm:text-left",
className
'flex flex-col space-y-2 text-center sm:text-left',
className,
)}
{...props}
/>
);
SheetHeader.displayName = "SheetHeader";
SheetHeader.displayName = 'SheetHeader';
const SheetFooter = ({
className,
@@ -110,13 +109,13 @@ const SheetFooter = ({
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
className
'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
className,
)}
{...props}
/>
);
SheetFooter.displayName = "SheetFooter";
SheetFooter.displayName = 'SheetFooter';
const SheetTitle = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Title>,
@@ -124,7 +123,7 @@ const SheetTitle = React.forwardRef<
>(({ className, ...props }, ref) => (
<SheetPrimitive.Title
ref={ref}
className={cn("text-lg font-semibold text-foreground", className)}
className={cn('text-foreground text-lg font-semibold', className)}
{...props}
/>
));
@@ -136,7 +135,7 @@ const SheetDescription = React.forwardRef<
>(({ className, ...props }, ref) => (
<SheetPrimitive.Description
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
className={cn('text-muted-foreground text-sm', className)}
{...props}
/>
));

372
packages/ui/src/sidebar.tsx
View File

@@ -1,39 +1,39 @@
"use client";
'use client';
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { VariantProps, cva } from "class-variance-authority";
import { PanelLeft } from "lucide-react";
import * as React from 'react';
import { Slot } from '@radix-ui/react-slot';
import { VariantProps, cva } from 'class-variance-authority';
import { PanelLeft } from 'lucide-react';
import { useIsMobile } from "./hooks/use-mobile";
import { cn } from "../lib/utils";
import { Button } from "./button";
import { Input } from "./input";
import { Separator } from "./separator";
import { useIsMobile } from './hooks/use-mobile';
import { cn } from '../lib/utils';
import { Button } from './button';
import { Input } from './input';
import { Separator } from './separator';
import {
Sheet,
SheetContent,
SheetDescription,
SheetHeader,
SheetTitle,
} from "./sheet";
import { Skeleton } from "./skeleton";
} from './sheet';
import { Skeleton } from './skeleton';
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "./tooltip";
} from './tooltip';
const SIDEBAR_COOKIE_NAME = "sidebar_state";
const SIDEBAR_COOKIE_NAME = 'sidebar_state';
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
const SIDEBAR_WIDTH = "16rem";
const SIDEBAR_WIDTH_MOBILE = "18rem";
const SIDEBAR_WIDTH_ICON = "3rem";
const SIDEBAR_KEYBOARD_SHORTCUT = "b";
const SIDEBAR_WIDTH = '16rem';
const SIDEBAR_WIDTH_MOBILE = '18rem';
const SIDEBAR_WIDTH_ICON = '3rem';
const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
type SidebarContextProps = {
state: "expanded" | "collapsed";
state: 'expanded' | 'collapsed';
open: boolean;
setOpen: (open: boolean) => void;
openMobile: boolean;
@@ -47,7 +47,7 @@ const SidebarContext = React.createContext<SidebarContextProps | null>(null);
function useSidebar() {
const context = React.useContext(SidebarContext);
if (!context) {
throw new Error("useSidebar must be used within a SidebarProvider.");
throw new Error('useSidebar must be used within a SidebarProvider.');
}
return context;
@@ -55,7 +55,7 @@ function useSidebar() {
const SidebarProvider = React.forwardRef<
HTMLDivElement,
React.ComponentProps<"div"> & {
React.ComponentProps<'div'> & {
defaultOpen?: boolean;
open?: boolean;
onOpenChange?: (open: boolean) => void;
@@ -71,7 +71,7 @@ const SidebarProvider = React.forwardRef<
children,
...props
},
ref
ref,
) => {
const isMobile = useIsMobile();
const [openMobile, setOpenMobile] = React.useState(false);
@@ -82,7 +82,7 @@ const SidebarProvider = React.forwardRef<
const open = openProp ?? _open;
const setOpen = React.useCallback(
(value: boolean | ((value: boolean) => boolean)) => {
const openState = typeof value === "function" ? value(open) : value;
const openState = typeof value === 'function' ? value(open) : value;
if (setOpenProp) {
setOpenProp(openState);
} else {
@@ -92,7 +92,7 @@ const SidebarProvider = React.forwardRef<
// This sets the cookie to keep the sidebar state.
document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
},
[setOpenProp, open]
[setOpenProp, open],
);
// Helper to toggle the sidebar.
@@ -114,13 +114,13 @@ const SidebarProvider = React.forwardRef<
}
};
window.addEventListener("keydown", handleKeyDown);
return () => window.removeEventListener("keydown", handleKeyDown);
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [toggleSidebar]);
// We add a state so that we can do data-state="expanded" or "collapsed".
// This makes it easier to style the sidebar with Tailwind classes.
const state = open ? "expanded" : "collapsed";
const state = open ? 'expanded' : 'collapsed';
const contextValue = React.useMemo<SidebarContextProps>(
() => ({
@@ -132,7 +132,15 @@ const SidebarProvider = React.forwardRef<
setOpenMobile,
toggleSidebar,
}),
[state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
[
state,
open,
setOpen,
isMobile,
openMobile,
setOpenMobile,
toggleSidebar,
],
);
return (
@@ -141,14 +149,14 @@ const SidebarProvider = React.forwardRef<
<div
style={
{
"--sidebar-width": SIDEBAR_WIDTH,
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
'--sidebar-width': SIDEBAR_WIDTH,
'--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
...style,
} as React.CSSProperties
}
className={cn(
"group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
className
'group/sidebar-wrapper has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full',
className,
)}
ref={ref}
{...props}
@@ -158,37 +166,37 @@ const SidebarProvider = React.forwardRef<
</TooltipProvider>
</SidebarContext.Provider>
);
}
},
);
SidebarProvider.displayName = "SidebarProvider";
SidebarProvider.displayName = 'SidebarProvider';
const Sidebar = React.forwardRef<
HTMLDivElement,
React.ComponentProps<"div"> & {
side?: "left" | "right";
variant?: "sidebar" | "floating" | "inset";
collapsible?: "offcanvas" | "icon" | "none";
React.ComponentProps<'div'> & {
side?: 'left' | 'right';
variant?: 'sidebar' | 'floating' | 'inset';
collapsible?: 'offcanvas' | 'icon' | 'none';
}
>(
(
{
side = "left",
variant = "sidebar",
collapsible = "offcanvas",
side = 'left',
variant = 'sidebar',
collapsible = 'offcanvas',
className,
children,
...props
},
ref
ref,
) => {
const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
if (collapsible === "none") {
if (collapsible === 'none') {
return (
<div
className={cn(
"flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
className
'bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col',
className,
)}
ref={ref}
{...props}
@@ -204,10 +212,10 @@ const Sidebar = React.forwardRef<
<SheetContent
data-sidebar="sidebar"
data-mobile="true"
className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
className="bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden"
style={
{
"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
'--sidebar-width': SIDEBAR_WIDTH_MOBILE,
} as React.CSSProperties
}
side={side}
@@ -225,49 +233,49 @@ const Sidebar = React.forwardRef<
return (
<div
ref={ref}
className="group peer hidden text-sidebar-foreground md:block"
className="text-sidebar-foreground group peer hidden md:block"
data-state={state}
data-collapsible={state === "collapsed" ? collapsible : ""}
data-collapsible={state === 'collapsed' ? collapsible : ''}
data-variant={variant}
data-side={side}
>
{/* This is what handles the sidebar gap on desktop */}
<div
className={cn(
"relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
"group-data-[collapsible=offcanvas]:w-0",
"group-data-[side=right]:rotate-180",
variant === "floating" || variant === "inset"
? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
: "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
'relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear',
'group-data-[collapsible=offcanvas]:w-0',
'group-data-[side=right]:rotate-180',
variant === 'floating' || variant === 'inset'
? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
: 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',
)}
/>
<div
className={cn(
"fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
side === "left"
? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
'fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex',
side === 'left'
? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
: 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
// Adjust the padding for floating and inset variants.
variant === "floating" || variant === "inset"
? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
: "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
className
variant === 'floating' || variant === 'inset'
? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
: 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',
className,
)}
{...props}
>
<div
data-sidebar="sidebar"
className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow"
>
{children}
</div>
</div>
</div>
);
}
},
);
Sidebar.displayName = "Sidebar";
Sidebar.displayName = 'Sidebar';
const SidebarTrigger = React.forwardRef<
React.ElementRef<typeof Button>,
@@ -281,7 +289,7 @@ const SidebarTrigger = React.forwardRef<
data-sidebar="trigger"
variant="ghost"
size="icon"
className={cn("h-7 w-7", className)}
className={cn('h-7 w-7', className)}
onClick={(event) => {
onClick?.(event);
toggleSidebar();
@@ -293,11 +301,11 @@ const SidebarTrigger = React.forwardRef<
</Button>
);
});
SidebarTrigger.displayName = "SidebarTrigger";
SidebarTrigger.displayName = 'SidebarTrigger';
const SidebarRail = React.forwardRef<
HTMLButtonElement,
React.ComponentProps<"button">
React.ComponentProps<'button'>
>(({ className, ...props }, ref) => {
const { toggleSidebar } = useSidebar();
@@ -310,37 +318,37 @@ const SidebarRail = React.forwardRef<
onClick={toggleSidebar}
title="Toggle Sidebar"
className={cn(
"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
"[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
className
'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
'[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
'[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
'group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
'[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
'[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
className,
)}
{...props}
/>
);
});
SidebarRail.displayName = "SidebarRail";
SidebarRail.displayName = 'SidebarRail';
const SidebarInset = React.forwardRef<
HTMLDivElement,
React.ComponentProps<"main">
React.ComponentProps<'main'>
>(({ className, ...props }, ref) => {
return (
<main
ref={ref}
className={cn(
"relative flex w-full flex-1 flex-col bg-background",
"md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
className
'bg-background relative flex w-full flex-1 flex-col',
'md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
className,
)}
{...props}
/>
);
});
SidebarInset.displayName = "SidebarInset";
SidebarInset.displayName = 'SidebarInset';
const SidebarInput = React.forwardRef<
React.ElementRef<typeof Input>,
@@ -351,44 +359,44 @@ const SidebarInput = React.forwardRef<
ref={ref}
data-sidebar="input"
className={cn(
"h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
className
'bg-background focus-visible:ring-sidebar-ring h-8 w-full shadow-none focus-visible:ring-2',
className,
)}
{...props}
/>
);
});
SidebarInput.displayName = "SidebarInput";
SidebarInput.displayName = 'SidebarInput';
const SidebarHeader = React.forwardRef<
HTMLDivElement,
React.ComponentProps<"div">
React.ComponentProps<'div'>
>(({ className, ...props }, ref) => {
return (
<div
ref={ref}
data-sidebar="header"
className={cn("flex flex-col gap-2 p-2", className)}
className={cn('flex flex-col gap-2 p-2', className)}
{...props}
/>
);
});
SidebarHeader.displayName = "SidebarHeader";
SidebarHeader.displayName = 'SidebarHeader';
const SidebarFooter = React.forwardRef<
HTMLDivElement,
React.ComponentProps<"div">
React.ComponentProps<'div'>
>(({ className, ...props }, ref) => {
return (
<div
ref={ref}
data-sidebar="footer"
className={cn("flex flex-col gap-2 p-2", className)}
className={cn('flex flex-col gap-2 p-2', className)}
{...props}
/>
);
});
SidebarFooter.displayName = "SidebarFooter";
SidebarFooter.displayName = 'SidebarFooter';
const SidebarSeparator = React.forwardRef<
React.ElementRef<typeof Separator>,
@@ -398,154 +406,154 @@ const SidebarSeparator = React.forwardRef<
<Separator
ref={ref}
data-sidebar="separator"
className={cn("mx-2 w-auto bg-sidebar-border", className)}
className={cn('bg-sidebar-border mx-2 w-auto', className)}
{...props}
/>
);
});
SidebarSeparator.displayName = "SidebarSeparator";
SidebarSeparator.displayName = 'SidebarSeparator';
const SidebarContent = React.forwardRef<
HTMLDivElement,
React.ComponentProps<"div">
React.ComponentProps<'div'>
>(({ className, ...props }, ref) => {
return (
<div
ref={ref}
data-sidebar="content"
className={cn(
"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
className
'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
className,
)}
{...props}
/>
);
});
SidebarContent.displayName = "SidebarContent";
SidebarContent.displayName = 'SidebarContent';
const SidebarGroup = React.forwardRef<
HTMLDivElement,
React.ComponentProps<"div">
React.ComponentProps<'div'>
>(({ className, ...props }, ref) => {
return (
<div
ref={ref}
data-sidebar="group"
className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
{...props}
/>
);
});
SidebarGroup.displayName = "SidebarGroup";
SidebarGroup.displayName = 'SidebarGroup';
const SidebarGroupLabel = React.forwardRef<
HTMLDivElement,
React.ComponentProps<"div"> & { asChild?: boolean }
React.ComponentProps<'div'> & { asChild?: boolean }
>(({ className, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "div";
const Comp = asChild ? Slot : 'div';
return (
<Comp
ref={ref}
data-sidebar="group-label"
className={cn(
"flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
className
'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
className,
)}
{...props}
/>
);
});
SidebarGroupLabel.displayName = "SidebarGroupLabel";
SidebarGroupLabel.displayName = 'SidebarGroupLabel';
const SidebarGroupAction = React.forwardRef<
HTMLButtonElement,
React.ComponentProps<"button"> & { asChild?: boolean }
React.ComponentProps<'button'> & { asChild?: boolean }
>(({ className, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button";
const Comp = asChild ? Slot : 'button';
return (
<Comp
ref={ref}
data-sidebar="group-action"
className={cn(
"absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
// Increases the hit area of the button on mobile.
"after:absolute after:-inset-2 after:md:hidden",
"group-data-[collapsible=icon]:hidden",
className
'after:absolute after:-inset-2 after:md:hidden',
'group-data-[collapsible=icon]:hidden',
className,
)}
{...props}
/>
);
});
SidebarGroupAction.displayName = "SidebarGroupAction";
SidebarGroupAction.displayName = 'SidebarGroupAction';
const SidebarGroupContent = React.forwardRef<
HTMLDivElement,
React.ComponentProps<"div">
React.ComponentProps<'div'>
>(({ className, ...props }, ref) => (
<div
ref={ref}
data-sidebar="group-content"
className={cn("w-full text-sm", className)}
className={cn('w-full text-sm', className)}
{...props}
/>
));
SidebarGroupContent.displayName = "SidebarGroupContent";
SidebarGroupContent.displayName = 'SidebarGroupContent';
const SidebarMenu = React.forwardRef<
HTMLUListElement,
React.ComponentProps<"ul">
React.ComponentProps<'ul'>
>(({ className, ...props }, ref) => (
<ul
ref={ref}
data-sidebar="menu"
className={cn("flex w-full min-w-0 flex-col gap-1", className)}
className={cn('flex w-full min-w-0 flex-col gap-1', className)}
{...props}
/>
));
SidebarMenu.displayName = "SidebarMenu";
SidebarMenu.displayName = 'SidebarMenu';
const SidebarMenuItem = React.forwardRef<
HTMLLIElement,
React.ComponentProps<"li">
React.ComponentProps<'li'>
>(({ className, ...props }, ref) => (
<li
ref={ref}
data-sidebar="menu-item"
className={cn("group/menu-item relative", className)}
className={cn('group/menu-item relative', className)}
{...props}
/>
));
SidebarMenuItem.displayName = "SidebarMenuItem";
SidebarMenuItem.displayName = 'SidebarMenuItem';
const sidebarMenuButtonVariants = cva(
"peer/menu-button flex w-full items-center text-sidebar-foreground gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
'peer/menu-button flex w-full items-center text-sidebar-foreground gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
{
variants: {
variant: {
default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
outline:
"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
},
size: {
default: "h-8 text-sm",
sm: "h-7 text-xs",
lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
default: 'h-8 text-sm',
sm: 'h-7 text-xs',
lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',
},
},
defaultVariants: {
variant: "default",
size: "default",
variant: 'default',
size: 'default',
},
}
},
);
const SidebarMenuButton = React.forwardRef<
HTMLButtonElement,
React.ComponentProps<"button"> & {
React.ComponentProps<'button'> & {
asChild?: boolean;
isActive?: boolean;
tooltip?: string | React.ComponentProps<typeof TooltipContent>;
@@ -555,15 +563,15 @@ const SidebarMenuButton = React.forwardRef<
{
asChild = false,
isActive = false,
variant = "default",
size = "default",
variant = 'default',
size = 'default',
tooltip,
className,
...props
},
ref
ref,
) => {
const Comp = asChild ? Slot : "button";
const Comp = asChild ? Slot : 'button';
const { isMobile, state } = useSidebar();
const button = (
@@ -581,7 +589,7 @@ const SidebarMenuButton = React.forwardRef<
return button;
}
if (typeof tooltip === "string") {
if (typeof tooltip === 'string') {
tooltip = {
children: tooltip,
};
@@ -593,70 +601,70 @@ const SidebarMenuButton = React.forwardRef<
<TooltipContent
side="right"
align="center"
hidden={state !== "collapsed" || isMobile}
hidden={state !== 'collapsed' || isMobile}
{...tooltip}
/>
</Tooltip>
);
}
},
);
SidebarMenuButton.displayName = "SidebarMenuButton";
SidebarMenuButton.displayName = 'SidebarMenuButton';
const SidebarMenuAction = React.forwardRef<
HTMLButtonElement,
React.ComponentProps<"button"> & {
React.ComponentProps<'button'> & {
asChild?: boolean;
showOnHover?: boolean;
}
>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button";
const Comp = asChild ? Slot : 'button';
return (
<Comp
ref={ref}
data-sidebar="menu-action"
className={cn(
"absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
// Increases the hit area of the button on mobile.
"after:absolute after:-inset-2 after:md:hidden",
"peer-data-[size=sm]/menu-button:top-1",
"peer-data-[size=default]/menu-button:top-1.5",
"peer-data-[size=lg]/menu-button:top-2.5",
"group-data-[collapsible=icon]:hidden",
'after:absolute after:-inset-2 after:md:hidden',
'peer-data-[size=sm]/menu-button:top-1',
'peer-data-[size=default]/menu-button:top-1.5',
'peer-data-[size=lg]/menu-button:top-2.5',
'group-data-[collapsible=icon]:hidden',
showOnHover &&
"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
className
'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
className,
)}
{...props}
/>
);
});
SidebarMenuAction.displayName = "SidebarMenuAction";
SidebarMenuAction.displayName = 'SidebarMenuAction';
const SidebarMenuBadge = React.forwardRef<
HTMLDivElement,
React.ComponentProps<"div">
React.ComponentProps<'div'>
>(({ className, ...props }, ref) => (
<div
ref={ref}
data-sidebar="menu-badge"
className={cn(
"pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground",
"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
"peer-data-[size=sm]/menu-button:top-1",
"peer-data-[size=default]/menu-button:top-1.5",
"peer-data-[size=lg]/menu-button:top-2.5",
"group-data-[collapsible=icon]:hidden",
className
'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums',
'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
'peer-data-[size=sm]/menu-button:top-1',
'peer-data-[size=default]/menu-button:top-1.5',
'peer-data-[size=lg]/menu-button:top-2.5',
'group-data-[collapsible=icon]:hidden',
className,
)}
{...props}
/>
));
SidebarMenuBadge.displayName = "SidebarMenuBadge";
SidebarMenuBadge.displayName = 'SidebarMenuBadge';
const SidebarMenuSkeleton = React.forwardRef<
HTMLDivElement,
React.ComponentProps<"div"> & {
React.ComponentProps<'div'> & {
showIcon?: boolean;
}
>(({ className, showIcon = false, ...props }, ref) => {
@@ -669,7 +677,7 @@ const SidebarMenuSkeleton = React.forwardRef<
<div
ref={ref}
data-sidebar="menu-skeleton"
className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
{...props}
>
{showIcon && (
@@ -683,47 +691,47 @@ const SidebarMenuSkeleton = React.forwardRef<
data-sidebar="menu-skeleton-text"
style={
{
"--skeleton-width": width,
'--skeleton-width': width,
} as React.CSSProperties
}
/>
</div>
);
});
SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
SidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton';
const SidebarMenuSub = React.forwardRef<
HTMLUListElement,
React.ComponentProps<"ul">
React.ComponentProps<'ul'>
>(({ className, ...props }, ref) => (
<ul
ref={ref}
data-sidebar="menu-sub"
className={cn(
"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
"group-data-[collapsible=icon]:hidden",
className
'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
'group-data-[collapsible=icon]:hidden',
className,
)}
{...props}
/>
));
SidebarMenuSub.displayName = "SidebarMenuSub";
SidebarMenuSub.displayName = 'SidebarMenuSub';
const SidebarMenuSubItem = React.forwardRef<
HTMLLIElement,
React.ComponentProps<"li">
React.ComponentProps<'li'>
>(({ ...props }, ref) => <li ref={ref} {...props} />);
SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
SidebarMenuSubItem.displayName = 'SidebarMenuSubItem';
const SidebarMenuSubButton = React.forwardRef<
HTMLAnchorElement,
React.ComponentProps<"a"> & {
React.ComponentProps<'a'> & {
asChild?: boolean;
size?: "sm" | "md";
size?: 'sm' | 'md';
isActive?: boolean;
}
>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
const Comp = asChild ? Slot : "a";
>(({ asChild = false, size = 'md', isActive, className, ...props }, ref) => {
const Comp = asChild ? Slot : 'a';
return (
<Comp
@@ -732,18 +740,18 @@ const SidebarMenuSubButton = React.forwardRef<
data-size={size}
data-active={isActive}
className={cn(
"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
size === "sm" && "text-xs",
size === "md" && "text-sm",
"group-data-[collapsible=icon]:hidden",
className
'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
size === 'sm' && 'text-xs',
size === 'md' && 'text-sm',
'group-data-[collapsible=icon]:hidden',
className,
)}
{...props}
/>
);
});
SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
SidebarMenuSubButton.displayName = 'SidebarMenuSubButton';
export {
Sidebar,

4
packages/ui/src/skeleton.tsx
View File

@@ -1,4 +1,4 @@
import { cn } from "../lib/utils";
import { cn } from '../lib/utils';
function Skeleton({
className,
@@ -6,7 +6,7 @@ function Skeleton({
}: React.HTMLAttributes<HTMLDivElement>) {
return (
<div
className={cn("animate-pulse rounded-md bg-muted", className)}
className={cn('bg-muted animate-pulse rounded-md', className)}
{...props}
/>
);

6
packages/ui/src/spinner.tsx
View File

@@ -1,5 +1,5 @@
import React from "react";
import { cn } from "..";
import React from 'react';
import { cn } from '..';
export const Spinner: React.FC<
React.SVGProps<SVGSVGElement> & { innerSvgClass?: string }
@@ -18,7 +18,7 @@ export const Spinner: React.FC<
<g
strokeWidth="200"
strokeLinecap="round"
className={cn("stroke-primary-foreground", innerSvgClass)}
className={cn('stroke-primary-foreground', innerSvgClass)}
fill="none"
id="spinner"
>

14
packages/ui/src/switch.tsx
View File

@@ -1,9 +1,9 @@
"use client";
'use client';
import * as React from "react";
import * as SwitchPrimitives from "@radix-ui/react-switch";
import * as React from 'react';
import * as SwitchPrimitives from '@radix-ui/react-switch';
import { cn } from "../lib/utils";
import { cn } from '../lib/utils';
const Switch = React.forwardRef<
React.ElementRef<typeof SwitchPrimitives.Root>,
@@ -11,15 +11,15 @@ const Switch = React.forwardRef<
>(({ className, ...props }, ref) => (
<SwitchPrimitives.Root
className={cn(
"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
className
'focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
className,
)}
{...props}
ref={ref}
>
<SwitchPrimitives.Thumb
className={cn(
"pointer-events-none block h-5 w-5 rounded-full bg-primary/50 shadow-lg ring-0 transition-transform data-[state=checked]:bg-background/90 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
'bg-primary/50 data-[state=checked]:bg-background/90 pointer-events-none block h-5 w-5 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
)}
/>
</SwitchPrimitives.Root>

44
packages/ui/src/table.tsx
View File

@@ -1,28 +1,28 @@
import * as React from "react";
import * as React from 'react';
import { cn } from "../lib/utils";
import { cn } from '../lib/utils';
const Table = React.forwardRef<
HTMLTableElement,
React.HTMLAttributes<HTMLTableElement>
>(({ className, ...props }, ref) => (
<div className="relative w-full overflow-auto ">
<div className="relative w-full overflow-auto">
<table
ref={ref}
className={cn("w-full caption-bottom text-sm", className)}
className={cn('w-full caption-bottom text-sm', className)}
{...props}
/>
</div>
));
Table.displayName = "Table";
Table.displayName = 'Table';
const TableHeader = React.forwardRef<
HTMLTableSectionElement,
React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
<thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
));
TableHeader.displayName = "TableHeader";
TableHeader.displayName = 'TableHeader';
const TableBody = React.forwardRef<
HTMLTableSectionElement,
@@ -30,11 +30,11 @@ const TableBody = React.forwardRef<
>(({ className, ...props }, ref) => (
<tbody
ref={ref}
className={cn("[&_tr:last-child]:border-0", className)}
className={cn('[&_tr:last-child]:border-0', className)}
{...props}
/>
));
TableBody.displayName = "TableBody";
TableBody.displayName = 'TableBody';
const TableFooter = React.forwardRef<
HTMLTableSectionElement,
@@ -43,13 +43,13 @@ const TableFooter = React.forwardRef<
<tfoot
ref={ref}
className={cn(
"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
className
'bg-muted/50 border-t font-medium [&>tr]:last:border-b-0',
className,
)}
{...props}
/>
));
TableFooter.displayName = "TableFooter";
TableFooter.displayName = 'TableFooter';
const TableRow = React.forwardRef<
HTMLTableRowElement,
@@ -58,13 +58,13 @@ const TableRow = React.forwardRef<
<tr
ref={ref}
className={cn(
"border-b transition-colors data-[state=selected]:bg-muted",
className
'data-[state=selected]:bg-muted border-b transition-colors',
className,
)}
{...props}
/>
));
TableRow.displayName = "TableRow";
TableRow.displayName = 'TableRow';
const TableHead = React.forwardRef<
HTMLTableCellElement,
@@ -73,13 +73,13 @@ const TableHead = React.forwardRef<
<th
ref={ref}
className={cn(
"h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
className
'text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0',
className,
)}
{...props}
/>
));
TableHead.displayName = "TableHead";
TableHead.displayName = 'TableHead';
const TableCell = React.forwardRef<
HTMLTableCellElement,
@@ -87,11 +87,11 @@ const TableCell = React.forwardRef<
>(({ className, ...props }, ref) => (
<td
ref={ref}
className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
{...props}
/>
));
TableCell.displayName = "TableCell";
TableCell.displayName = 'TableCell';
const TableCaption = React.forwardRef<
HTMLTableCaptionElement,
@@ -99,11 +99,11 @@ const TableCaption = React.forwardRef<
>(({ className, ...props }, ref) => (
<caption
ref={ref}
className={cn("mt-4 text-sm text-muted-foreground", className)}
className={cn('text-muted-foreground mt-4 text-sm', className)}
{...props}
/>
));
TableCaption.displayName = "TableCaption";
TableCaption.displayName = 'TableCaption';
export {
Table,

20
packages/ui/src/tabs.tsx
View File

@@ -1,9 +1,9 @@
"use client";
'use client';
import * as React from "react";
import * as TabsPrimitive from "@radix-ui/react-tabs";
import * as React from 'react';
import * as TabsPrimitive from '@radix-ui/react-tabs';
import { cn } from "../lib/utils";
import { cn } from '../lib/utils';
const Tabs = TabsPrimitive.Root;
@@ -14,8 +14,8 @@ const TabsList = React.forwardRef<
<TabsPrimitive.List
ref={ref}
className={cn(
"inline-flex h-9 items-center justify-center rounded-md bg-muted p-0.5 text-muted-foreground",
className
'bg-muted text-muted-foreground inline-flex h-9 items-center justify-center rounded-md p-0.5',
className,
)}
{...props}
/>
@@ -29,8 +29,8 @@ const TabsTrigger = React.forwardRef<
<TabsPrimitive.Trigger
ref={ref}
className={cn(
"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
className
'ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm',
className,
)}
{...props}
/>
@@ -44,8 +44,8 @@ const TabsContent = React.forwardRef<
<TabsPrimitive.Content
ref={ref}
className={cn(
"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
className
'ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
className,
)}
{...props}
/>

16
packages/ui/src/text-with-copy.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import React from "react";
import { Button } from "./button";
import { CheckIcon, ClipboardCopy } from "lucide-react";
'use client';
import React from 'react';
import { Button } from './button';
import { CheckIcon, ClipboardCopy } from 'lucide-react';
export const TextWithCopyButton: React.FC<{
value: string;
@@ -16,17 +16,17 @@ export const TextWithCopyButton: React.FC<{
setIsCopied(true);
setTimeout(() => setIsCopied(false), 2000); // Reset isCopied to false after 2 seconds
} catch (err) {
console.error("Failed to copy: ", err);
console.error('Failed to copy: ', err);
}
};
return (
<div className={"flex gap-2 items-center group"}>
<div className={'group flex items-center gap-2'}>
<div className={className}>{value}</div>
<Button
variant="ghost"
className={`hover:bg-transparent p-0 h-6 cursor-pointer text-muted-foreground ${
alwaysShowCopy ? "opacity-100" : "opacity-0 group-hover:opacity-100"
className={`text-muted-foreground h-6 cursor-pointer p-0 hover:bg-transparent ${
alwaysShowCopy ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
}`}
onClick={copyToClipboard}
>

12
packages/ui/src/textarea.tsx
View File

@@ -1,6 +1,6 @@
import * as React from "react";
import * as React from 'react';
import { cn } from "../lib/utils";
import { cn } from '../lib/utils';
export interface TextareaProps
extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
@@ -10,15 +10,15 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
return (
<textarea
className={cn(
"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className
'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
className,
)}
ref={ref}
{...props}
/>
);
}
},
);
Textarea.displayName = "Textarea";
Textarea.displayName = 'Textarea';
export { Textarea };

18
packages/ui/src/toaster.tsx
View File

@@ -1,26 +1,26 @@
"use client";
'use client';
import { useTheme } from "next-themes";
import { Toaster as Sonner, toast } from "sonner";
import { useTheme } from 'next-themes';
import { Toaster as Sonner, toast } from 'sonner';
type ToasterProps = React.ComponentProps<typeof Sonner>;
const Toaster = ({ ...props }: ToasterProps) => {
const { theme = "system" } = useTheme();
const { theme = 'system' } = useTheme();
return (
<Sonner
theme={theme as ToasterProps["theme"]}
theme={theme as ToasterProps['theme']}
className="toaster group"
toastOptions={{
classNames: {
toast:
"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
description: "group-[.toast]:text-muted-foreground",
'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
description: 'group-[.toast]:text-muted-foreground',
actionButton:
"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
cancelButton:
"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
},
}}
{...props}

12
packages/ui/src/tooltip.tsx
View File

@@ -1,9 +1,9 @@
"use client";
'use client';
import * as React from "react";
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
import * as React from 'react';
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
import { cn } from "../lib/utils";
import { cn } from '../lib/utils';
const TooltipProvider = TooltipPrimitive.Provider;
@@ -19,8 +19,8 @@ const TooltipContent = React.forwardRef<
ref={ref}
sideOffset={sideOffset}
className={cn(
"z-50 overflow-hidden rounded-xl border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className
'bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-xl border px-3 py-1.5 text-sm shadow-md',
className,
)}
{...props}
/>

28
packages/ui/src/typography.tsx
View File

@@ -1,5 +1,5 @@
import * as React from "react";
import { cn } from "../lib/utils";
import * as React from 'react';
import { cn } from '../lib/utils';
// Simple typography primitives: H1, H2, BodyText
// H1/H2 use mono font, slightly bolder and larger per request
@@ -14,14 +14,14 @@ export const H1 = React.forwardRef<HTMLHeadingElement, TypographyProps>(
ref={ref}
className={cn(
// font-mono, larger and a bit bolder
" font-mono text-xl font-medium text-primary",
className
'text-primary font-mono text-xl font-medium',
className,
)}
{...props}
/>
)
),
);
H1.displayName = "H1";
H1.displayName = 'H1';
export const H2 = React.forwardRef<HTMLHeadingElement, TypographyProps>(
({ className, ...props }, ref) => (
@@ -29,14 +29,14 @@ export const H2 = React.forwardRef<HTMLHeadingElement, TypographyProps>(
ref={ref}
className={cn(
// font-mono, slightly smaller than H1, bold
"font-mono text-lg",
className
'font-mono text-lg',
className,
)}
{...props}
/>
)
),
);
H2.displayName = "H2";
H2.displayName = 'H2';
export const BodyText = React.forwardRef<HTMLParagraphElement, TypographyProps>(
({ className, ...props }, ref) => (
@@ -44,11 +44,11 @@ export const BodyText = React.forwardRef<HTMLParagraphElement, TypographyProps>(
ref={ref}
className={cn(
// default body text styling
"leading-7 text-foreground/90",
className
'text-foreground/90 leading-7',
className,
)}
{...props}
/>
)
),
);
BodyText.displayName = "BodyText";
BodyText.displayName = 'BodyText';

6
packages/ui/tailwind.config.ts
View File

@@ -1,7 +1,7 @@
import { type Config } from "tailwindcss";
import sharedConfig from "@usesend/tailwind-config/tailwind.config";
import { type Config } from 'tailwindcss';
import sharedConfig from '@usesend/tailwind-config/tailwind.config';
export default {
...sharedConfig,
content: ["./src/**/*.tsx"],
content: ['./src/**/*.tsx'],
} satisfies Config;