Skip to content

Commit

Permalink
Canary backup (#241)
Browse files Browse the repository at this point in the history 
Co-authored-by: Vlad Nikolaev <[email protected]>
Co-authored-by: Nounspace Ryan <[email protected]>
Co-authored-by: Julian Early <[email protected]>
Co-authored-by: Jesse Paterson <[email protected]>
  • Loading branch information
@sktbrd @nounspaceryan
@hiporox @j-paterson
5 people authored Jul 8, 2024
1 parent c18d047 commit e7a98d3
Show file tree
Hide file tree
Showing 17 changed files with 1,373 additions and 114 deletions.
5 changes: 5 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@
"@types/dompurify": "^3.0.5",
"@types/express": "^4.17.21",
"@types/lodash": "^4.17.6",
"@uiw/react-md-editor": "^4.0.4",
"@webscopeio/react-textarea-autocomplete": "^4.9.2",
"@xmtp/frames-validator": "^0.6.0",
"@xmtp/proto": "^3.61.1",
Expand Down Expand Up @@ -128,12 +129,16 @@
"react-icons": "^5.0.1",
"react-intersection-observer": "^9.8.1",
"react-loader-spinner": "^6.1.6",
"react-markdown": "^9.0.1",
"react-player": "^2.16.0",
"react-qr-code": "^2.0.14",
"react-router-dom": "^6.22.0",
"react-stately": "^3.31.1",
"react-tweet": "^3.2.1",
"rehype-raw": "^7.0.0",
"rehype-sanitize": "^6.0.0",
"remark": "^15.0.1",
"remark-gfm": "^4.0.0",
"remark-html": "^16.0.1",
"sharp": "^0.33.4",
"sonner": "^1.4.41",
Expand Down
2 changes: 1 addition & 1 deletion src/common/components/atoms/tooltip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const TooltipContent = React.forwardRef<
ref={ref}
sideOffset={sideOffset}
className={mergeClasses(
"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-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-md bg-primary px-3 py-1.5 text-xs text-primary-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-index-[9999]",
className,
)}
{...props}
Expand Down
43 changes: 43 additions & 0 deletions src/common/components/molecules/MDeditor.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import React, { useState } from "react";
import MDEditor, { commands } from "@uiw/react-md-editor";

interface MDeditorProps {
value: string;
onChange: (value: string) => void;
}

const MDeditor: React.FC<MDeditorProps> = ({ value, onChange }) => {
const [markdown, setMarkdown] = useState(value);

const handleEditorChange = (val?: string) => {
const updatedValue = val || "";
setMarkdown(updatedValue);
onChange(updatedValue);
};

return (
<div className="w-full h-full" data-color-mode="light">
<MDEditor
value={markdown}
onChange={handleEditorChange}
commands={[
commands.bold,
commands.italic,
commands.strikethrough,
commands.hr,
]}
height="600px"
preview="edit"
style={{
height: "100%",
width: "100%",
overflow: "auto",
border: "1px solid var(--user-theme-fidget-border-color)",
borderRadius: "5px",
}}
/>
</div>
);
};

export default MDeditor;
18 changes: 9 additions & 9 deletions src/common/components/organisms/FidgetSettingsEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,14 +142,14 @@ export const FidgetSettingsEditor: React.FC<FidgetSettingsEditorProps> = ({
});
};

const onKeyDown = (event: React.KeyboardEvent<HTMLFormElement>): void => {
// 'keypress' event misbehaves on mobile so we track 'Enter' key via 'keydown' event
if (event.key === "Enter") {
event.preventDefault();
event.stopPropagation();
onSave(state);
}
};
// 'keypress' event misbehaves on mobile so we track 'Enter' key via 'keydown' event
// const onKeyDown = (event: React.KeyboardEvent<HTMLFormElement>): void => {
// if (event.key === "Enter") {
// event.preventDefault();
// event.stopPropagation();
// onSave(state);
// }
// };

const groupedFields = useMemo(
() => fieldsByGroup(properties.fields),
Expand All @@ -160,7 +160,7 @@ export const FidgetSettingsEditor: React.FC<FidgetSettingsEditorProps> = ({
<form
onSubmit={_onSave}
className="flex-col flex h-full"
onKeyDown={onKeyDown}
// onKeyDown={onKeyDown}
>
<div className="h-full overflow-auto">
<div className="flex pb-4 m-2">
Expand Down
156 changes: 147 additions & 9 deletions src/common/lib/theme/ThemeSettingsEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,13 @@ import {
tabTriggerClasses,
tabContentClasses,
} from "@/common/lib/theme/helpers";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
TooltipProvider,
} from "@/common/components/atoms/tooltip";
import { FaInfoCircle } from "react-icons/fa";

export type ThemeSettingsEditorArgs = {
theme: ThemeSettings;
Expand All @@ -37,6 +44,7 @@ export function ThemeSettingsEditor({
cancelExitEditMode,
}: ThemeSettingsEditorArgs) {
const [showConfirmCancel, setShowConfirmCancel] = useState(false);
const [displayToolTips, setDisplayToolTips] = useState(false);

function themePropSetter<T extends string>(
property: string,
Expand Down Expand Up @@ -75,11 +83,25 @@ export function ThemeSettingsEditor({
cancelExitEditMode();
}

function toggleToolTips() {
setDisplayToolTips(!displayToolTips);
}

return (
<>
<div className="flex flex-col h-full gap-6">
{/* Back */}
<div>Customize</div>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center gap-1">
<div>Customize</div>
<FaInfoCircle onClick={toggleToolTips} color="grey" />
</div>
</TooltipTrigger>
<TooltipContent>Little Help?</TooltipContent>
</Tooltip>
</TooltipProvider>

{/* Content */}
<div className="h-full overflow-auto flex flex-col gap-4">
Expand Down Expand Up @@ -138,7 +160,29 @@ export function ThemeSettingsEditor({
<TabsContent value="style" className={tabContentClasses}>
<div className="flex flex-col gap-1">
<h4 className="text-sm font-bold">Space</h4>
<h4 className="text-sm">Background color</h4>
<div className="flex flex-row gap-1">
<h4 className="text-sm">Background color</h4>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center gap-1">
{displayToolTips && <FaInfoCircle color="grey" />}
</div>
</TooltipTrigger>
<TooltipContent>
<div className="flex flex-col gap-1">
<div>
Set a solid background or gradient color.
<br />
You can also add custom backgrounds
<br />
with HTML/CSS on the Code tab.
</div>
</div>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<ColorSelector
className="rounded-full overflow-hidden w-6 h-6 shrink-0"
innerClassName="rounded-full"
Expand All @@ -150,10 +194,28 @@ export function ThemeSettingsEditor({
{/* Fidget styles */}
<div className="flex flex-col gap-1">
<h4 className="text-sm font-bold">Fidgets</h4>

<div className="flex flex-col gap-1">
<div className="">
<h5 className="text-xs">Background color</h5>
<div className="flex flex-row gap-1">
<h5 className="text-sm">Background color</h5>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center gap-1">
{displayToolTips && <FaInfoCircle color="grey" />}
</div>
</TooltipTrigger>
<TooltipContent>
<div className="flex flex-col gap-1">
<div>
Set a background color or gradient that fidgets
can inherit.
</div>
</div>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<ColorSelector
className="rounded-full overflow-hidden w-6 h-6 shrink-0 my-2"
innerClassName="rounded-full"
Expand All @@ -162,7 +224,27 @@ export function ThemeSettingsEditor({
/>
</div>
<div className="">
<h5 className="text-xs">Border</h5>
<div className="flex flex-row gap-1">
<h5 className="text-xs">Border</h5>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center gap-1">
{displayToolTips && <FaInfoCircle color="grey" />}
</div>
</TooltipTrigger>
<TooltipContent>
<div className="flex flex-col gap-1">
<div>
Set the default border width and color
<br />
for all Fidgets on your Space.
</div>
</div>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<div className="flex items-center gap-1">
<ColorSelector
className="rounded-full overflow-hidden w-6 h-6 shrink-0"
Expand All @@ -179,7 +261,26 @@ export function ThemeSettingsEditor({
</div>
</div>
<div className="">
<h5 className="text-xs">Shadow</h5>
<div className="flex flex-row gap-1">
<h5 className="text-xs">Shadow</h5>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center gap-1">
{displayToolTips && <FaInfoCircle color="grey" />}
</div>
</TooltipTrigger>
<TooltipContent>
<div className="flex flex-col gap-1">
<div>
Set the default shadow for all Fidgets on your
Space.
</div>
</div>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<ShadowSelector
className="ring-0 focus:ring-0 border-0 shadow-none"
value={fidgetShadow as string}
Expand All @@ -192,7 +293,31 @@ export function ThemeSettingsEditor({
</TabsContent>
<TabsContent value="code" className={tabContentClasses}>
<div className="flex flex-col gap-1">
<h4 className="text-sm">Custom styles</h4>
<div className="flex flex-row gap-1">
<h4 className="text-sm">Custom styles</h4>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center gap-1">
{displayToolTips && <FaInfoCircle color="grey" />}
</div>
</TooltipTrigger>
<TooltipContent>
<div className="flex flex-col gap-1">
<div>
Add HTML/CSS as a single file
<br />
to customize your background.
<br />
Pro tip: ask AI for help coding
<br />
the background of your dreams
</div>
</div>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<HTMLInput
value={backgroundHTML}
onChange={themePropSetter<string>("backgroundHTML")}
Expand All @@ -202,9 +327,22 @@ export function ThemeSettingsEditor({
</Tabs>

<div className="my-2 bg-slate-100 h-px"></div>

<div className="flex flex-col gap-1">
<h4 className="text-sm">Music</h4>
<div className="flex flex-row gap-1">
<h4 className="text-sm">Music</h4>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center gap-1">
{displayToolTips && <FaInfoCircle color="grey" />}
</div>
</TooltipTrigger>
<TooltipContent>
Paste the youtube link for any song, video, or playlist.
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<TextInput
value={musicURL}
onChange={themePropSetter<string>("musicURL")}
Expand Down
12 changes: 12 additions & 0 deletions src/common/lib/theme/fonts.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
Space_Grotesk,
Ubuntu,
Work_Sans,
Londrina_Solid,
} from "next/font/google";

import type { FontFamily } from "@/common/lib/theme";
Expand Down Expand Up @@ -120,6 +121,13 @@ export const work_sans = Work_Sans({
display: "swap",
});

export const londrina_solid = Londrina_Solid({
subsets: ["latin"],
variable: "--font-londrina-solid",
display: "swap",
weight: ["100", "300", "400", "900"],
});

export const FONT_FAMILY_OPTIONS: FontConfig[] = [
{
name: "Theme Font",
Expand Down Expand Up @@ -203,6 +211,10 @@ export const FONT_FAMILY_OPTIONS: FontConfig[] = [
name: "Roboto Slab",
config: roboto_slab,
},
{
name: "Londrina Solid",
config: londrina_solid,
},
];

export const FONT_FAMILY_OPTIONS_BY_NAME: {
Expand Down
Loading

0 comments on commit e7a98d3

Please sign in to comment.