Moduletrace/tailwind-ui-library
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updates

Browse Source
This commit is contained in:
tben
2026-03-23 06:30:43 +01:00
parent a242869095
commit 6392457ffb
5 changed files with 129 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/composites/docs/TWUIDocsAside.tsx
+1 -1
View File
@@ -22,7 +22,7 @@ export default function TWUIDocsAside({
{...props}
className={twMerge(
"pb-10 hidden xl:flex sticky top-6",
props.className
props.className,
)}
>
<Stack>
components/editors/TinyMCE/index.tsx
+3 -2
View File
@@ -1,4 +1,4 @@
import React, { ComponentProps } from "react";
import React, { ComponentProps, MutableRefObject } from "react";
import { RawEditorOptions, TinyMCE, Editor } from "./tinymce";
import { twMerge } from "tailwind-merge";
import twuiSlugToNormalText from "../../utils/slug-to-normal-text";
@@ -49,7 +49,8 @@ export default function TinyMCEEditor<KeyType extends string>({
const { tinyMCE } = useTinyMCE();
const editorComponentRef = React.useRef<HTMLDivElement>(null);
const editorRef = passedEditorRef || React.useRef<Editor>(null);
const editorRef: MutableRefObject<Editor | null> =
passedEditorRef || React.useRef(null);
const EDITOR_VALUE_CHANGE_TIMEOUT = 500;
components/form/Input/NumberInputButtons.tsx
+1 -1
View File
@@ -10,7 +10,7 @@ let pressTimeout: any;
type Props = Pick<InputProps<any>, "min" | "max" | "step" | "decimal"> & {
value: string;
setValue: React.Dispatch<React.SetStateAction<string>>;
buttonDownRef: React.RefObject<boolean>;
buttonDownRef: React.MutableRefObject<boolean>;
inputRef: React.RefObject<HTMLInputElement | null>;
};
components/layout/Button.tsx
+117 -137
View File
@@ -44,6 +44,122 @@ export type TWUIButtonProps = DetailedHTMLProps<
loadingProps?: ComponentProps<typeof Loading>;
};
const buttonClasses: Record<string, Record<string, string>> = {
normal: {
primary: twMerge(
"bg-primary hover:bg-primary-hover text-white",
"dark:bg-primary-dark hover:dark:bg-primary-dark-hover",
"twui-button-primary",
),
secondary: twMerge(
"bg-secondary hover:bg-secondary-hover text-white",
"twui-button-secondary",
),
white: twMerge(
"!bg-white hover:!bg-slate-200 !text-slate-800",
"twui-button-white",
),
accent: twMerge(
"bg-accent hover:bg-accent-hover text-white",
"twui-button-accent",
),
gray: twMerge(
"bg-gray hover:bg-gray-hover text-foreground-light",
"dark:bg-gray-dark hover:dark:bg-gray-dark-hover dark:text-foreground-dark",
"twui-button-gray",
),
success: twMerge(
"bg-success hover:bg-success-hover text-white",
"dark:bg-success hover:dark:bg-success-hover",
"twui-button-success",
),
error: twMerge(
"bg-error hover:bg-error-hover text-white",
"dark:bg-error hover:dark:bg-error-hover",
"twui-button-error",
),
},
outlined: {
primary: twMerge(
"bg-transparent outline outline-1 outline-primary",
"text-primary-text dark:text-primary-dark-text dark:outline-primary-dark-outline",
"twui-button-primary-outlined",
),
secondary: twMerge(
"bg-transparent outline outline-1 outline-secondary",
"text-secondary",
"twui-button-secondary-outlined",
),
accent: twMerge(
"bg-transparent outline outline-1 outline-accent",
"text-accent",
"twui-button-accent-outlined",
),
gray: twMerge(
"bg-transparent outline outline-1 outline-slate-300",
"text-slate-600 dark:text-white/60 dark:outline-white/30",
"twui-button-gray-outlined",
),
white: twMerge(
"bg-transparent outline outline-1 outline-white/50",
"text-white",
"twui-button-white-outlined",
),
error: twMerge(
"bg-transparent outline outline-1 outline-error text-error",
"dark:outline-error dark:text-error-dark",
"twui-button-error-outlined",
),
},
ghost: {
primary: twMerge(
"bg-transparent dark:bg-transparent outline-none p-2",
"text-primary-text dark:text-primary-dark-text hover:bg-transparent dark:hover:bg-transparent",
"twui-button-primary-ghost",
),
secondary: twMerge(
"bg-transparent dark:bg-transparent outline-none p-2",
"text-secondary hover:bg-transparent dark:hover:bg-transparent",
"twui-button-secondary-ghost",
),
text: twMerge(
"bg-transparent dark:bg-transparent outline-none p-2 dark:text-foreground-dark",
"text-foreground-light hover:bg-transparent dark:hover:bg-transparent",
"twui-button-secondary-ghost",
),
accent: twMerge(
"bg-transparent dark:bg-transparent outline-none p-2",
"text-accent hover:bg-transparent dark:hover:bg-transparent",
"twui-button-accent-ghost",
),
gray: twMerge(
"bg-transparent dark:bg-transparent outline-none p-2 hover:bg-transparent dark:hover:bg-transparent",
"text-slate-600 dark:text-white/70 hover:opacity-80",
"twui-button-gray-ghost",
),
error: twMerge(
"bg-transparent outline-none p-2",
"text-red-600 dark:text-red-400",
"twui-button-error-ghost",
),
warning: twMerge(
"bg-transparent outline-none p-2",
"text-yellow-600",
"twui-button-warning-ghost",
),
success: twMerge(
"bg-transparent outline-none p-2",
"text-success",
"twui-button-success-ghost",
),
white: twMerge(
"bg-transparent outline-none p-2",
"text-white",
"twui-button-white-ghost",
),
},
};
/**
* # Buttons
* @className twui-button-general
@@ -112,143 +228,7 @@ export default function Button({
loadingProps,
...props
}: TWUIButtonProps) {
const finalClassName: string = (() => {
if (variant == "normal" || !variant) {
if (color == "primary" || !color)
return twMerge(
"bg-primary hover:bg-primary-hover text-white",
"dark:bg-primary-dark hover:dark:bg-primary-dark-hover text-white",
"twui-button-primary",
);
if (color == "secondary")
return twMerge(
"bg-secondary hover:bg-secondary-hover text-white",
"twui-button-secondary",
);
if (color == "white")
return twMerge(
"!bg-white hover:!bg-slate-200 !text-slate-800",
"twui-button-white",
);
if (color == "accent")
return twMerge(
"bg-accent hover:bg-accent-hover text-white",
"twui-button-accent",
);
if (color == "gray")
return twMerge(
"bg-gray hover:bg-gray-hover text-foreground-light",
"dark:bg-gray-dark hover:dark:bg-gray-dark-hover dark:text-foreground-dark",
"twui-button-gray",
);
if (color == "success")
return twMerge(
"bg-success hover:bg-success-hover text-white",
"dark:bg-success hover:dark:bg-success-hover text-white",
"twui-button-success",
);
if (color == "error")
return twMerge(
"bg-error hover:bg-error-hover text-white",
"dark:bg-error hover:dark:bg-error-hover text-white",
"twui-button-error",
);
} else if (variant == "outlined") {
if (color == "primary" || !color)
return twMerge(
"bg-transparent outline outline-1 outline-primary",
"text-primary-text dark:text-primary-dark-text dark:outline-primary-dark-outline",
"twui-button-primary-outlined",
);
if (color == "secondary")
return twMerge(
"bg-transparent outline outline-1 outline-secondary",
"text-secondary",
"twui-button-secondary-outlined",
);
if (color == "accent")
return twMerge(
"bg-transparent outline outline-1 outline-accent",
"text-accent",
"twui-button-accent-outlined",
);
if (color == "gray")
return twMerge(
"bg-transparent outline outline-1 outline-slate-300",
"text-slate-600 dark:text-white/60 dark:outline-white/30",
"twui-button-gray-outlined",
);
if (color == "white")
return twMerge(
"bg-transparent outline outline-1 outline-white/50",
"text-white",
"twui-button-white-outlined",
);
if (color == "error")
return twMerge(
"bg-transparent outline outline-1 outline-error text-error",
"dark:outline-error dark:text-error-dark",
"twui-button-error-outlined",
);
} else if (variant == "ghost") {
if (color == "primary" || !color)
return twMerge(
"bg-transparent dark:bg-transparent outline-none p-2",
"text-primary-text dark:text-primary-dark-text hover:bg-transparent dark:hover:bg-transparent",
"twui-button-primary-ghost",
);
if (color == "secondary")
return twMerge(
"bg-transparent dark:bg-transparent outline-none p-2",
"text-secondary hover:bg-transparent dark:hover:bg-transparent",
"twui-button-secondary-ghost",
);
if (color == "text")
return twMerge(
"bg-transparent dark:bg-transparent outline-none p-2 dark:text-foreground-dark",
"text-foreground-light hover:bg-transparent dark:hover:bg-transparent",
"twui-button-secondary-ghost",
);
if (color == "accent")
return twMerge(
"bg-transparent dark:bg-transparent outline-none p-2",
"text-accent hover:bg-transparent dark:hover:bg-transparent",
"twui-button-accent-ghost",
);
if (color == "gray")
return twMerge(
"bg-transparent dark:bg-transparent outline-none p-2 hover:bg-transparent dark:hover:bg-transparent",
"text-slate-600 dark:text-white/70 hover:opacity-80",
"twui-button-gray-ghost",
);
if (color == "error")
return twMerge(
"bg-transparent outline-none p-2",
"text-red-600 dark:text-red-400",
"twui-button-error-ghost",
);
if (color == "warning")
return twMerge(
"bg-transparent outline-none p-2",
"text-yellow-600",
"twui-button-warning-ghost",
);
if (color == "success")
return twMerge(
"bg-transparent outline-none p-2",
"text-success",
"twui-button-success-ghost",
);
if (color == "white")
return twMerge(
"bg-transparent outline-none p-2",
"text-white",
"twui-button-white-ghost",
);
}
return "";
})();
const finalClassName = buttonClasses[variant || "normal"]?.[color || "primary"] ?? "";
const buttonComponent = (
<button
components/utils/fetch/fetchApi.ts
+7 -6
View File
@@ -68,17 +68,17 @@ export default async function fetchApi<
method: options,
headers: finalHeaders,
} as RequestInit);
data = fetchData.json();
data = await fetchData.json();
break;
default:
fetchData = await fetch(finalURL);
data = fetchData.json();
data = await fetchData.json();
break;
}
} catch (error: any) {
console.log("FetchAPI error #1:", error.message);
data = null;
data = { success: false, msg: error.message };
}
} else if (typeof options === "object") {
try {
@@ -93,6 +93,7 @@ export default async function fetchApi<
options.headers = _.merge(options.headers, finalHeaders);
const finalOptions: any = { ...options };
fetchData = await fetch(finalURL, finalOptions);
} else {
const finalOptions = {
@@ -103,10 +104,10 @@ export default async function fetchApi<
fetchData = await fetch(finalURL, finalOptions);
}
data = fetchData.json();
data = await fetchData.json();
} catch (error: any) {
console.log("FetchAPI error #2:", error.message);
data = null;
data = { success: false, msg: error.message };
}
} else {
try {
@@ -114,7 +115,7 @@ export default async function fetchApi<
data = await fetchData.json();
} catch (error: any) {
console.log("FetchAPI error #3:", error.message);
data = null;
data = { success: false, msg: error.message };
}
}