97 lines
2.6 KiB
TypeScript
97 lines
2.6 KiB
TypeScript
import {
|
|
Alert as ChakraAlert,
|
|
Box as ChakraBox,
|
|
Button as ChakraButton,
|
|
Center as ChakraCenter,
|
|
HStack as ChakraHStack,
|
|
Icon as ChakraIcon,
|
|
Input as ChakraInput,
|
|
Spinner as ChakraSpinner,
|
|
Stack as ChakraStack,
|
|
Text as ChakraText
|
|
} from "@chakra-ui/react";
|
|
import type { ReactNode } from "react";
|
|
|
|
type AnyProps = Record<string, any>;
|
|
|
|
function normalizeSpacingProps(props: AnyProps) {
|
|
const next = { ...props };
|
|
if (next.spacing !== undefined && next.gap === undefined) {
|
|
next.gap = next.spacing;
|
|
}
|
|
delete next.spacing;
|
|
return next;
|
|
}
|
|
|
|
function normalizeInteractiveProps(props: AnyProps) {
|
|
const next = normalizeSpacingProps(props);
|
|
if (next.isDisabled !== undefined && next.disabled === undefined) {
|
|
next.disabled = next.isDisabled;
|
|
}
|
|
if (next.isLoading !== undefined && next.loading === undefined) {
|
|
next.loading = next.isLoading;
|
|
}
|
|
delete next.isDisabled;
|
|
delete next.isLoading;
|
|
return next;
|
|
}
|
|
|
|
export const Center = ChakraCenter as any;
|
|
export const Icon = ChakraIcon as any;
|
|
export const Input = ChakraInput as any;
|
|
export const Spinner = ChakraSpinner as any;
|
|
|
|
export function Stack(props: AnyProps) {
|
|
return <ChakraStack {...normalizeSpacingProps(props)} />;
|
|
}
|
|
|
|
export function HStack(props: AnyProps) {
|
|
return <ChakraHStack {...normalizeSpacingProps(props)} />;
|
|
}
|
|
|
|
export function Text(props: AnyProps) {
|
|
const next = { ...props };
|
|
if (next.noOfLines !== undefined && next.lineClamp === undefined) {
|
|
next.lineClamp = next.noOfLines;
|
|
}
|
|
delete next.noOfLines;
|
|
return <ChakraText {...next} />;
|
|
}
|
|
|
|
export function Button(props: AnyProps) {
|
|
const { leftIcon, rightIcon, children, ...rest } = normalizeInteractiveProps(props);
|
|
return (
|
|
<ChakraButton {...rest}>
|
|
<ChakraHStack gap={2}>
|
|
{leftIcon ?? null}
|
|
<span>{children}</span>
|
|
{rightIcon ?? null}
|
|
</ChakraHStack>
|
|
</ChakraButton>
|
|
);
|
|
}
|
|
|
|
export function Alert({ children, status = "info", ...props }: AnyProps) {
|
|
return (
|
|
<ChakraAlert.Root status={status} {...props}>
|
|
{children}
|
|
</ChakraAlert.Root>
|
|
);
|
|
}
|
|
|
|
export function AlertIcon() {
|
|
return <ChakraAlert.Indicator />;
|
|
}
|
|
|
|
export function AlertDescription({ children, ...props }: { children: ReactNode } & AnyProps) {
|
|
return <ChakraAlert.Description {...props}>{children}</ChakraAlert.Description>;
|
|
}
|
|
|
|
export function FormControl({ children, ...props }: AnyProps) {
|
|
return <ChakraStack gap={2} {...normalizeSpacingProps(props)}>{children}</ChakraStack>;
|
|
}
|
|
|
|
export function FormLabel(props: AnyProps) {
|
|
return <ChakraBox as="label" fontWeight="medium" {...props} />;
|
|
}
|