mirror of
https://github.com/lukevella/rallly.git
synced 2025-07-23 19:27:25 +02:00
♻️ Update react-email package (#1001)
This commit is contained in:
parent
317244ef28
commit
7e213b0b4c
24 changed files with 2493 additions and 1913 deletions
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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(),
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue