Skip to content

Commit

Permalink
feat: implement improved highlights form with ai auto-summarise (#1381)
Browse files Browse the repository at this point in the history
  • Loading branch information
OgDev-01 authored Jul 21, 2023
1 parent c58cc80 commit 023f576
Show file tree
Hide file tree
Showing 141 changed files with 1,199 additions and 827 deletions.
30 changes: 30 additions & 0 deletions components/atoms/Fab/fab.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import clsx from "clsx";
import React from "react";

interface FabProps extends React.HTMLAttributes<HTMLButtonElement> {
position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
onClick?: () => void;
}
const Fab = ({ position, children, className }: FabProps) => {
const getFabPositionStyles = () => {
switch (position) {
case "top-left":
return "top-4 left-4";
case "top-right":
return "top-4 right-4";
case "bottom-left":
return "bottom-4 left-4";
case "bottom-right":
return "bottom-4 right-4";
default:
return "bottom-8 right-8";
}
};
return (
<button type="button" className={clsx("fixed", getFabPositionStyles(), className)}>
{children}
</button>
);
};

export default Fab;
9 changes: 4 additions & 5 deletions components/atoms/TextInput/text-input.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
state?: "default" | "valid" | "invalid";
borderless?: boolean;
descriptionText?: string;
classNames?: string;
errorMsg?: string;
fieldRef?: React.RefObject<HTMLInputElement>;
handleChange?: (value: string) => void;
Expand All @@ -21,7 +20,7 @@ const TextInput = ({
id,
value,
descriptionText,
classNames,
className,
fieldRef,
disabled = false,
borderless = false,
Expand Down Expand Up @@ -52,7 +51,7 @@ const TextInput = ({
borderless && "!border-none",
state === "invalid" ? "focus-within:border-light-red-10" : "focus-within:border-light-orange-9 ",
disabled && "bg-light-slate-3 text-light-slate-6",
classNames
className
)}
>
<input
Expand All @@ -64,7 +63,7 @@ const TextInput = ({
className={clsx(
"flex-1 focus:outline-none",
disabled && "bg-light-slate-3 cursor-not-allowed text-light-slate-9",
classNames
className
)}
disabled={disabled}
value={value}
Expand All @@ -74,7 +73,7 @@ const TextInput = ({
{!disabled && (
<>
{state === "valid" ? (
<CheckCircleFillIcon className="ml-1 text-light-orange-9" size={12} />
<CheckCircleFillIcon className="ml-1 text-light-orange-9" size={12} />
) : !!value ? (
<span title="Clear input" className="flex items-center ml-1" onClick={handleResetInput}>
<XCircleFillIcon
Expand Down
2 changes: 1 addition & 1 deletion components/atoms/Toast/toast.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const ToastViewport = React.forwardRef<
<ToastPrimitives.Viewport
ref={ref}
className={clsx(
"fixed z-[10] top-24 md:top-14 flex max-h-screen w-full flex-col-reverse right-0 lg:right-4 sm:flex-col md:max-w-[420px]",
"fixed z-50 top-24 md:top-14 flex max-h-screen w-full flex-col-reverse right-0 lg:right-4 sm:flex-col md:max-w-[420px]",
className
)}
{...props}
Expand Down
10 changes: 4 additions & 6 deletions components/atoms/Tooltip/tooltip.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from "react";
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
import clsx from "clsx";

interface TooltipProps {
children: React.ReactNode;
Expand All @@ -10,7 +11,7 @@ interface TooltipProps {
tipClassName?: string;
}
const Tooltip = ({ children, content, className, direction }: TooltipProps): JSX.Element => {
const { Portal, Root, Content, Trigger } = TooltipPrimitive;
const { Portal, Root, Content, Trigger, Arrow } = TooltipPrimitive;

return (
<Root>
Expand All @@ -19,13 +20,10 @@ const Tooltip = ({ children, content, className, direction }: TooltipProps): JSX
</Trigger>
<Portal>
<Content sideOffset={4} collisionPadding={10} side={!!direction ? direction : "bottom"} avoidCollisions>
<div
className={`${
className && className
} text-xs py-1 px-2 rounded shadow-lg bg-dark-slate-2 text-dark-slate-12 `}
>
<div className={clsx("text-xs py-1 px-2 rounded shadow-lg bg-dark-slate-2 text-dark-slate-12", className)}>
{content}
</div>
<Arrow className="fill-dark " />
</Content>
</Portal>
</Root>
Expand Down
65 changes: 65 additions & 0 deletions components/atoms/TypeWriterTextArea/type-writer-text-area.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import React, { ChangeEvent, useEffect, useRef } from "react";
import clsx from "clsx";

interface TypeWriterTextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
onChangeText?: (value: string) => void;
typewrite?: boolean;
textContent?: string;
defaultRow?: number;
}

const TypeWriterTextArea = React.forwardRef<HTMLTextAreaElement, TypeWriterTextAreaProps>(
({ className, onChangeText, typewrite, textContent, defaultRow, ...props }) => {
const textareaRef = useRef<HTMLTextAreaElement>(null);
const autoGrowTextarea = () => {
const textarea = textareaRef.current;
if (textarea) {
textarea.style.height = "auto";
textarea.style.height = `${textarea.scrollHeight}px`;
}
};

const typeWrite = (text: string) => {
const textarea = textareaRef.current;
if (textarea) {
textarea.focus();
textarea.value = "";
textarea.selectionStart = textarea.selectionEnd = textarea.value.length;
const interval = setInterval(() => {
if (textarea.value.length === text.length) {
clearInterval(interval);
} else {
textarea.value = text.slice(0, textarea.value.length + 1);
}
}, 10);
}
};

useEffect(() => {
if (typewrite && textContent) {
typeWrite(textContent);
}
}, [typewrite, textContent]);

const handleInputChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
onChangeText?.(event.target.value);
autoGrowTextarea();
};

return (
<textarea
onChange={handleInputChange}
className={clsx(
"flex h-20 md:min-h-26 md:h-auto w-full rounded-md py-2 text-sm placeholder:text-slate-400 disabled:cursor-not-allowed disabled:opacity-50",
className
)}
rows={defaultRow}
ref={textareaRef}
{...props}
/>
);
}
);
TypeWriterTextArea.displayName = "TypeWriterTextArea";

export { TypeWriterTextArea };
10 changes: 1 addition & 9 deletions components/molecules/AuthSection/auth-section.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import Link from "next/link";

import { IoNotifications } from "react-icons/io5";
import { FiLogOut, FiSettings } from "react-icons/fi";
import { BiLinkExternal } from "react-icons/bi";
import { Divider } from "@supabase/ui";

import useSession from "lib/hooks/useSession";
Expand Down Expand Up @@ -86,14 +85,6 @@ const AuthSection: React.FC = ({}) => {
</div>
<Text className="group-hover:text-light-orange-10">{user?.user_metadata.user_name}</Text>
</Link>,
<Link
href={"https://docs.opensauced.pizza/community/faqs/"}
key="faqs"
className="flex items-center px-4 py-2 text-lg transition rounded-md cursor-pointer group gap-x-3 hover:bg-light-orange-3"
>
<BiLinkExternal className="group-hover:text-light-orange-10" />
<Text className="group-hover:text-light-orange-10">FAQs</Text>
</Link>,
<Link
href="/user/settings"
key="settings"
Expand Down Expand Up @@ -121,6 +112,7 @@ const AuthSection: React.FC = ({}) => {
</span>,
],
};

return (
<div className="flex p-2 m-1 sm:py-0">
<div className="flex items-center gap-2 lg:gap-3">
Expand Down
5 changes: 3 additions & 2 deletions components/molecules/GhOpenGraphImg/gh-open-graph-img.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,16 @@ import { generateGhOgImage } from "lib/utils/github";
import InvalidImage from "img/icons/fallback-image-disabled-square.svg";
interface GhOpenGraphImgProps {
githubLink: string;
className?: string;
}

const GhOpenGraphImg = ({ githubLink }: GhOpenGraphImgProps): JSX.Element => {
const GhOpenGraphImg = ({ githubLink, className }: GhOpenGraphImgProps): JSX.Element => {
const { isValid, url } = generateGhOgImage(githubLink);

return (
<>
{url && (
<picture>
<picture className={className}>
<img src={isValid ? url : InvalidImage} alt={isValid ? "github og image" : "invalid url image"} />
</picture>
)}
Expand Down
Loading

0 comments on commit 023f576

Please sign in to comment.