♻️ Update react-email package (#1001)

This commit is contained in:
Luke Vella 2024-01-28 16:19:36 +07:00 committed by GitHub
parent 317244ef28
commit 7e213b0b4c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
24 changed files with 2493 additions and 1913 deletions

View file

@ -39,19 +39,10 @@
"devDependencies": {
"@next/bundle-analyzer": "^12.3.4",
"@rallly/tsconfig": "*",
"@types/accept-language-parser": "^1.5.3",
"@types/color-hash": "^1.0.2",
"@types/lodash": "^4.14.178",
"@types/react": "^18.0.28",
"@types/react-big-calendar": "^0.31.0",
"@types/react-dom": "^18.0.11",
"@types/react-linkify": "^1.0.1",
"@types/smoothscroll-polyfill": "^0.3.1",
"cheerio": "^1.0.0-rc.12",
"cross-env": "^7.0.3",
"i18next-scanner": "^4.2.0",
"i18next-scanner-typescript": "^1.1.1",
"smtp-tester": "^2.0.1",
"wait-on": "^6.0.1"
"i18next-scanner-typescript": "^1.1.1"
}
}

View file

@ -68,7 +68,8 @@
"react-hook-form-persist": "^3.0.0",
"react-hot-toast": "^2.4.0",
"react-i18next": "^12.1.4",
"react-linkify": "^1.0.0-alpha",
"linkifyjs": "^4.1.3",
"linkify-react": "^4.1.3",
"react-remove-scroll": "^2.5.6",
"react-use": "^17.4.0",
"smoothscroll-polyfill": "^0.4.4",
@ -83,10 +84,7 @@
"@types/accept-language-parser": "^1.5.3",
"@types/color-hash": "^1.0.2",
"@types/lodash": "^4.14.178",
"@types/react": "^18.0.28",
"@types/react-big-calendar": "^0.31.0",
"@types/react-dom": "^18.0.11",
"@types/react-linkify": "^1.0.1",
"@types/react-big-calendar": "^1.8.8",
"@types/smoothscroll-polyfill": "^0.3.1",
"cheerio": "^1.0.0-rc.12",
"cross-env": "^7.0.3",

View file

@ -2,62 +2,66 @@ import { AnimatePresence, m } from "framer-motion";
import Cookies from "js-cookie";
import Link from "next/link";
import * as React from "react";
import ReactDOM from "react-dom";
import { createPortal } from "react-dom";
import { getPortal } from "@/utils/selectors";
import CookiesIllustration from "./cookie-consent/cookies.svg";
const CookieConsentPopover: React.FunctionComponent = () => {
const CookieConsentPopover = () => {
const [visible, setVisible] = React.useState(true);
return ReactDOM.createPortal(
<AnimatePresence>
{visible ? (
<m.div
variants={{
enter: {
opacity: 1,
y: 0,
transition: { type: "spring", delay: 2, duration: 1 },
},
exit: {
opacity: 0,
y: 10,
transition: { duration: 0.1 },
},
}}
initial={{ opacity: 0, y: 100 }}
animate="enter"
exit="exit"
className="fixed bottom-8 right-8 z-50 w-60 rounded-lg bg-white p-4 pt-8 text-sm shadow-lg"
>
<CookiesIllustration className="absolute -top-6" />
<div className="mb-3">
Your privacy is important to us. We only use cookies to improve the
browsing experience on this website.
</div>
<div className="flex items-center space-x-6">
<Link
href="/privacy-policy"
className="hover:text-primary-600 text-gray-500"
>
Privacy Policy
</Link>
<button
onClick={() => {
Cookies.set("rallly_cookie_consent", "1", { expires: 365 });
setVisible(false);
return (
<>
{createPortal(
<AnimatePresence>
{visible ? (
<m.div
variants={{
enter: {
opacity: 1,
y: 0,
transition: { type: "spring", delay: 2, duration: 1 },
},
exit: {
opacity: 0,
y: 10,
transition: { duration: 0.1 },
},
}}
className="bg-primary-600 hover:bg-primary-600/90 focus:ring-primary-200 active:bg-primary-600/90 grow rounded-md px-5 py-1 font-semibold text-white shadow-sm transition-all focus:ring-2"
initial={{ opacity: 0, y: 100 }}
animate="enter"
exit="exit"
className="fixed bottom-8 right-8 z-50 w-60 rounded-lg bg-white p-4 pt-8 text-sm shadow-lg"
>
OK
</button>
</div>
</m.div>
) : null}
</AnimatePresence>,
getPortal(),
<CookiesIllustration className="absolute -top-6" />
<div className="mb-3">
Your privacy is important to us. We only use cookies to improve
the browsing experience on this website.
</div>
<div className="flex items-center space-x-6">
<Link
href="/privacy-policy"
className="hover:text-primary-600 text-gray-500"
>
Privacy Policy
</Link>
<button
onClick={() => {
Cookies.set("rallly_cookie_consent", "1", { expires: 365 });
setVisible(false);
}}
className="bg-primary-600 hover:bg-primary-600/90 focus:ring-primary-200 active:bg-primary-600/90 grow rounded-md px-5 py-1 font-semibold text-white shadow-sm transition-all focus:ring-2"
>
OK
</button>
</div>
</m.div>
) : null}
</AnimatePresence>,
getPortal(),
)}
</>
);
};

View file

@ -4,7 +4,7 @@ import "./rbc-overrides.css";
import dayjs from "dayjs";
import { XIcon } from "lucide-react";
import React from "react";
import { Calendar } from "react-big-calendar";
import { Calendar, CalendarProps } from "react-big-calendar";
import { createBreakpoint } from "react-use";
import { getDuration } from "../../../utils/date-time-utils";
@ -17,6 +17,12 @@ const localizer = dayjsLocalizer(dayjs);
const useDevice = createBreakpoint({ desktop: 720, mobile: 360 });
/**
* Not sure what's wrong with the type definitions for react-big-calendar but it's not working properly.
* This is a temporary fix that overrides their types which ideally we wouldn't have to do.
*/
const CalendarTempFix = Calendar as React.ComponentType<CalendarProps>;
const WeekCalendar: React.FunctionComponent<DateTimePickerProps> = ({
options,
onNavigate,
@ -36,7 +42,7 @@ const WeekCalendar: React.FunctionComponent<DateTimePickerProps> = ({
return (
<div className="relative flex h-[600px]">
<Calendar
<CalendarTempFix
className="absolute inset-0"
events={options.map((option) => {
if (option.type === "date") {
@ -61,6 +67,7 @@ const WeekCalendar: React.FunctionComponent<DateTimePickerProps> = ({
(option) =>
!(
option.type === "timeSlot" &&
event.start &&
option.start === formatDateWithoutTz(event.start) &&
event.end &&
option.end === formatDateWithoutTz(event.end)

View file

@ -1,7 +1,7 @@
import { Tooltip, TooltipContent, TooltipTrigger } from "@rallly/ui/tooltip";
import Linkify from "linkify-react";
import Link from "next/link";
import * as React from "react";
import ReactLinkify from "react-linkify";
export const truncateLink = (href: string, text: string, key: number) => {
const textWithoutProtocol = text.replace(/^https?:\/\//i, "");
@ -45,11 +45,21 @@ export const truncateLink = (href: string, text: string, key: number) => {
}
};
const TruncatedLinkify: React.FunctionComponent<{
children?: React.ReactNode;
}> = ({ children }) => {
const TruncatedLinkify = ({ children }: { children: React.ReactNode }) => {
return (
<ReactLinkify componentDecorator={truncateLink}>{children}</ReactLinkify>
<Linkify
options={{
render: ({ attributes, content }) => {
return truncateLink(
attributes.href,
content,
attributes.key as number,
);
},
}}
>
{children}
</Linkify>
);
};