Updates

components/lib/(partials)/ModalComponent.tsx

@@ -22,7 +22,7 @@ export default function ModalComponent({ open, setOpen, ...props }: Props) {
         <div
             className={twMerge(
                 "fixed z-[200] top-0 left-0 w-screen h-screen",
-                "flex flex-col items-center justify-center",
+                "flex flex-col items-center justify-center p-4",
                 "twui-modal-root"
             )}
         >

components/lib/elements/Border.tsx

@@ -1,4 +1,4 @@
-import { DetailedHTMLProps, HTMLAttributes } from "react";
+import { DetailedHTMLProps, HTMLAttributes, RefObject } from "react";
 import { twMerge } from "tailwind-merge";
 
 export type TWUI_BORDER_PROPS = DetailedHTMLProps<
@@ -6,13 +6,18 @@ export type TWUI_BORDER_PROPS = DetailedHTMLProps<
     HTMLDivElement
 > & {
     spacing?: "normal" | "loose" | "tight" | "wide" | "tightest";
+    componentRef?: RefObject<HTMLDivElement>;
 };
 
 /**
  * # Toggle Component
  * @className_wrapper twui-border
  */
-export default function Border({ spacing, ...props }: TWUI_BORDER_PROPS) {
+export default function Border({
+    spacing,
+    componentRef,
+    ...props
+}: TWUI_BORDER_PROPS) {
     return (
         <div
             {...props}
@@ -29,6 +34,7 @@ export default function Border({ spacing, ...props }: TWUI_BORDER_PROPS) {
                 "twui-border",
                 props.className
             )}
+            ref={componentRef}
         >
             {props.children}
         </div>

components/lib/elements/HeaderNavLinkComponent.tsx

@@ -104,7 +104,7 @@ export default function HeaderNavLinkComponent({
                     <Dropdown
                         target={mainLinkComponent}
                         position="bottom-right"
-                        hoverOpen
+                        // hoverOpen
                         className="hidden xl:flex"
                     >
                         {dropdown ? (

components/lib/elements/RemoteCodeBlock.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { serialize } from "next-mdx-remote/serialize";
+import remarkGfm from "remark-gfm";
+import rehypePrismPlus from "rehype-prism-plus";
+import { MDXRemote, MDXRemoteSerializeResult } from "next-mdx-remote";
+import { useMDXComponents } from "../mdx/mdx-components";
+
+export const TWUIPrismLanguages = ["shell", "javascript"] as const;
+
+type Props = {
+    content: string;
+};
+
+/**
+ * # CodeBlock
+ *
+ * @className `twui-remote-code-block-wrapper`
+ */
+export default function RemoteCodeBlock({ content }: Props) {
+    const [mdxSource, setMdxSource] =
+        React.useState<MDXRemoteSerializeResult<any>>();
+
+    const { components } = useMDXComponents();
+
+    React.useEffect(() => {
+        serialize(content, {
+            mdxOptions: {
+                remarkPlugins: [remarkGfm],
+                rehypePlugins: [rehypePrismPlus],
+            },
+        }).then((mdxSrc) => {
+            setMdxSource(mdxSrc);
+        });
+    }, []);
+
+    if (!mdxSource) {
+        return null;
+    }
+
+    return (
+        <MDXRemote
+            {...mdxSource}
+            components={{
+                ...components,
+            }}
+        />
+    );
+}

components/lib/elements/Toast.tsx

@@ -70,7 +70,7 @@ export default function Toast({
         <Card
             {...props}
             className={twMerge(
-                "absolute bottom-4 right-4 z-[250] border-none",
+                "fixed bottom-4 right-4 z-[250] border-none",
                 "pl-6 pr-8 py-4 bg-primary dark:bg-primary-dark",
                 color == "success"
                     ? "bg-success dark:bg-success-dark twui-toast-success"

components/lib/form/Input/index.tsx

@@ -451,32 +451,6 @@ export default function Input<KeyType extends string>(
                         buttonDownRef={buttonDownRef}
                     />
                 ) : null}
-
-                {/* {info && (
-                    <Dropdown
-                        target={
-                            <Button
-                                variant="ghost"
-                                color="gray"
-                                title="Input Info Button"
-                            >
-                                <Info
-                                    size={15}
-                                    className="opacity-50 hover:opacity-100"
-                                />
-                            </Button>
-                        }
-                        hoverOpen
-                    >
-                        <Card className="min-w-[250px] text-sm p-6">
-                            {typeof info == "string" ? (
-                                <Span className="text-sm">{info}</Span>
-                            ) : (
-                                info
-                            )}
-                        </Card>
-                    </Dropdown>
-                )} */}
             </div>
             {info && (
                 <Dropdown

components/lib/mdx/markdown/MarkdownEditor.tsx

@@ -14,6 +14,7 @@ type Props = {
     changeHandler?: (content: string) => void;
     editorProps?: ComponentProps<typeof AceEditor>;
     maxHeight?: string;
+    noToggleButtons?: boolean;
 };
 
 export default function MarkdownEditor({
@@ -23,6 +24,7 @@ export default function MarkdownEditor({
     changeHandler,
     editorProps,
     maxHeight: existingMaxHeight,
+    noToggleButtons,
 }: Props) {
     const [value, setValue] = React.useState<any>(existingValue || ``);
 
@@ -40,9 +42,11 @@ export default function MarkdownEditor({
 
     return (
         <Stack className="w-full items-stretch">
-            <MarkdownEditorSelectorButtons
-                {...{ preview, setPreview, setSideBySide, sideBySide }}
-            />
+            {!noToggleButtons && (
+                <MarkdownEditorSelectorButtons
+                    {...{ preview, setPreview, setSideBySide, sideBySide }}
+                />
+            )}
 
             {sideBySide ? (
                 <Row
@@ -58,7 +62,6 @@ export default function MarkdownEditor({
                         {...editorProps}
                     />
                     <MarkdownEditorPreviewComponent
-                        setValue={setValue}
                         value={value}
                         maxHeight={maxHeight}
                     />
@@ -69,7 +72,6 @@ export default function MarkdownEditor({
                 >
                     {preview ? (
                         <MarkdownEditorPreviewComponent
-                            setValue={setValue}
                             value={value}
                             maxHeight={maxHeight}
                         />

components/lib/mdx/markdown/MarkdownEditorPreviewComponent.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ComponentProps, RefObject } from "react";
 import { twMerge } from "tailwind-merge";
 import { serialize } from "next-mdx-remote/serialize";
 import remarkGfm from "remark-gfm";
@@ -10,14 +10,14 @@ import EmptyContent from "../../elements/EmptyContent";
 
 type Props = {
     value: string;
-    setValue: React.Dispatch<any>;
     maxHeight: string;
+    wrapperProps?: ComponentProps<typeof Border>;
 };
 
 export default function MarkdownEditorPreviewComponent({
     value,
-    setValue,
     maxHeight,
+    wrapperProps,
 }: Props) {
     try {
         const [mdxSource, setMdxSource] =
@@ -56,9 +56,11 @@ export default function MarkdownEditorPreviewComponent({
 
         return (
             <Border
+                {...wrapperProps}
                 className={twMerge(
                     `w-full max-h-[${maxHeight}] h-[${maxHeight}] block px-6 pb-10`,
-                    "overflow-auto"
+                    "overflow-auto",
+                    wrapperProps?.className
                 )}
             >
                 {mdxSource ? (