website refactor
This commit is contained in:
475
apps/website/ui/primitives/Box.tsx
Normal file
475
apps/website/ui/primitives/Box.tsx
Normal file
@@ -0,0 +1,475 @@
|
||||
import React, { forwardRef, ForwardedRef, ElementType, ComponentPropsWithoutRef } from 'react';
|
||||
|
||||
type Spacing = 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
|
||||
|
||||
interface ResponsiveSpacing {
|
||||
base?: Spacing;
|
||||
md?: Spacing;
|
||||
lg?: Spacing;
|
||||
}
|
||||
|
||||
export interface BoxProps<T extends ElementType> {
|
||||
as?: T;
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
center?: boolean;
|
||||
fullWidth?: boolean;
|
||||
fullHeight?: boolean;
|
||||
m?: Spacing | ResponsiveSpacing;
|
||||
mt?: Spacing | ResponsiveSpacing;
|
||||
mb?: Spacing | ResponsiveSpacing;
|
||||
ml?: Spacing | 'auto' | ResponsiveSpacing;
|
||||
mr?: Spacing | 'auto' | ResponsiveSpacing;
|
||||
mx?: Spacing | 'auto' | ResponsiveSpacing;
|
||||
my?: Spacing | ResponsiveSpacing;
|
||||
p?: Spacing | ResponsiveSpacing;
|
||||
pt?: Spacing | ResponsiveSpacing;
|
||||
pb?: Spacing | ResponsiveSpacing;
|
||||
pl?: Spacing | ResponsiveSpacing;
|
||||
pr?: Spacing | ResponsiveSpacing;
|
||||
px?: Spacing | ResponsiveSpacing;
|
||||
py?: Spacing | ResponsiveSpacing;
|
||||
display?: 'block' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'none' | ResponsiveValue<'block' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'none'>;
|
||||
flexDirection?: 'row' | 'row-reverse' | 'col' | 'col-reverse' | ResponsiveValue<'row' | 'row-reverse' | 'col' | 'col-reverse'>;
|
||||
alignItems?: 'start' | 'center' | 'end' | 'stretch' | 'baseline' | ResponsiveValue<'start' | 'center' | 'end' | 'stretch' | 'baseline'>;
|
||||
justifyContent?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | ResponsiveValue<'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'>;
|
||||
flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
|
||||
flexShrink?: number;
|
||||
flexGrow?: number;
|
||||
flex?: number | string;
|
||||
alignSelf?: 'auto' | 'start' | 'end' | 'center' | 'stretch' | 'baseline';
|
||||
gridCols?: number | string;
|
||||
responsiveGridCols?: {
|
||||
base?: number | string;
|
||||
md?: number | string;
|
||||
lg?: number | string;
|
||||
};
|
||||
gap?: Spacing | ResponsiveSpacing;
|
||||
colSpan?: number | string;
|
||||
responsiveColSpan?: {
|
||||
base?: number | string;
|
||||
md?: number | string;
|
||||
lg?: number | string;
|
||||
};
|
||||
position?: 'relative' | 'absolute' | 'fixed' | 'sticky';
|
||||
top?: Spacing | string;
|
||||
bottom?: Spacing | string;
|
||||
left?: Spacing | string;
|
||||
right?: Spacing | string;
|
||||
overflow?: 'visible' | 'hidden' | 'scroll' | 'auto';
|
||||
maxWidth?: string | ResponsiveValue<string>;
|
||||
minWidth?: string | ResponsiveValue<string>;
|
||||
maxHeight?: string | ResponsiveValue<string>;
|
||||
minHeight?: string | ResponsiveValue<string>;
|
||||
zIndex?: number;
|
||||
w?: string | ResponsiveValue<string>;
|
||||
h?: string | ResponsiveValue<string>;
|
||||
width?: string;
|
||||
height?: string;
|
||||
rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
|
||||
border?: boolean;
|
||||
borderTop?: boolean;
|
||||
borderBottom?: boolean;
|
||||
borderLeft?: boolean;
|
||||
borderRight?: boolean;
|
||||
borderColor?: string;
|
||||
bg?: string;
|
||||
color?: string;
|
||||
shadow?: string;
|
||||
hoverBorderColor?: string;
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
transition?: any;
|
||||
cursor?: 'pointer' | 'default' | 'wait' | 'text' | 'move' | 'not-allowed';
|
||||
lineClamp?: 1 | 2 | 3 | 4 | 5 | 6;
|
||||
inset?: string;
|
||||
bgOpacity?: number;
|
||||
opacity?: number;
|
||||
blur?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
animate?: any;
|
||||
translateX?: string;
|
||||
textAlign?: 'left' | 'center' | 'right' | 'justify';
|
||||
hoverScale?: boolean;
|
||||
group?: boolean;
|
||||
groupHoverBorderColor?: string;
|
||||
groupHoverTextColor?: string;
|
||||
groupHoverScale?: boolean;
|
||||
groupHoverOpacity?: number;
|
||||
groupHoverWidth?: 'full' | '0' | 'auto';
|
||||
fontSize?: string;
|
||||
fontWeight?: 'normal' | 'medium' | 'semibold' | 'bold';
|
||||
transform?: string;
|
||||
borderWidth?: string;
|
||||
hoverTextColor?: string;
|
||||
hoverBg?: string;
|
||||
borderStyle?: 'solid' | 'dashed' | 'dotted' | 'none';
|
||||
ring?: string;
|
||||
objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
|
||||
aspectRatio?: string;
|
||||
visibility?: 'visible' | 'hidden' | 'collapse';
|
||||
pointerEvents?: 'auto' | 'none';
|
||||
order?: number | string | ResponsiveValue<number | string>;
|
||||
hideScrollbar?: boolean;
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
whileHover?: any;
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
whileTap?: any;
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
initial?: any;
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
exit?: any;
|
||||
onMouseEnter?: React.MouseEventHandler<T>;
|
||||
onMouseLeave?: React.MouseEventHandler<T>;
|
||||
onClick?: React.MouseEventHandler<T>;
|
||||
onSubmit?: React.FormEventHandler<T>;
|
||||
style?: React.CSSProperties;
|
||||
hoverColor?: string;
|
||||
maskImage?: string;
|
||||
webkitMaskImage?: string;
|
||||
backgroundSize?: string;
|
||||
backgroundPosition?: string;
|
||||
backgroundColor?: string;
|
||||
insetY?: Spacing | string;
|
||||
letterSpacing?: string;
|
||||
lineHeight?: string;
|
||||
backgroundImage?: string;
|
||||
}
|
||||
|
||||
export type ResponsiveValue<T> = {
|
||||
base?: T;
|
||||
sm?: T;
|
||||
md?: T;
|
||||
lg?: T;
|
||||
xl?: T;
|
||||
'2xl'?: T;
|
||||
};
|
||||
|
||||
export const Box = forwardRef(<T extends ElementType = 'div'>(
|
||||
{
|
||||
as,
|
||||
children,
|
||||
className = '',
|
||||
center = false,
|
||||
fullWidth = false,
|
||||
fullHeight = false,
|
||||
m, mt, mb, ml, mr, mx, my,
|
||||
p, pt, pb, pl, pr, px, py,
|
||||
display,
|
||||
flexDirection,
|
||||
alignItems,
|
||||
justifyContent,
|
||||
flexWrap,
|
||||
position,
|
||||
top,
|
||||
bottom,
|
||||
left,
|
||||
right,
|
||||
overflow,
|
||||
maxWidth,
|
||||
minWidth,
|
||||
maxHeight,
|
||||
minHeight,
|
||||
zIndex,
|
||||
gridCols,
|
||||
responsiveGridCols,
|
||||
colSpan,
|
||||
responsiveColSpan,
|
||||
gap,
|
||||
w,
|
||||
h,
|
||||
width,
|
||||
height,
|
||||
rounded,
|
||||
border,
|
||||
borderTop,
|
||||
borderBottom,
|
||||
borderLeft,
|
||||
borderRight,
|
||||
borderColor,
|
||||
bg,
|
||||
color,
|
||||
shadow,
|
||||
flex,
|
||||
flexShrink,
|
||||
flexGrow,
|
||||
alignSelf,
|
||||
hoverBorderColor,
|
||||
transition,
|
||||
cursor,
|
||||
lineClamp,
|
||||
inset,
|
||||
bgOpacity,
|
||||
opacity,
|
||||
blur,
|
||||
animate,
|
||||
translateX,
|
||||
textAlign,
|
||||
hoverScale,
|
||||
group,
|
||||
groupHoverBorderColor,
|
||||
groupHoverTextColor,
|
||||
groupHoverScale,
|
||||
groupHoverOpacity,
|
||||
groupHoverWidth,
|
||||
fontSize,
|
||||
fontWeight,
|
||||
transform,
|
||||
borderWidth,
|
||||
hoverTextColor,
|
||||
hoverBg,
|
||||
borderStyle,
|
||||
ring,
|
||||
objectFit,
|
||||
aspectRatio,
|
||||
visibility,
|
||||
pointerEvents,
|
||||
order,
|
||||
hideScrollbar,
|
||||
whileHover,
|
||||
whileTap,
|
||||
initial,
|
||||
exit,
|
||||
onMouseEnter,
|
||||
onMouseLeave,
|
||||
onClick,
|
||||
onSubmit,
|
||||
hoverColor,
|
||||
maskImage,
|
||||
webkitMaskImage,
|
||||
backgroundSize,
|
||||
backgroundPosition,
|
||||
backgroundColor,
|
||||
insetY,
|
||||
letterSpacing,
|
||||
lineHeight,
|
||||
backgroundImage,
|
||||
...props
|
||||
}: BoxProps<T> & ComponentPropsWithoutRef<T>,
|
||||
ref: ForwardedRef<HTMLElement>
|
||||
) => {
|
||||
const Tag = (as as ElementType) || 'div';
|
||||
|
||||
const spacingMap: Record<string | number, string> = {
|
||||
0: '0', 0.5: '0.5', 1: '1', 1.5: '1.5', 2: '2', 2.5: '2.5', 3: '3', 3.5: '3.5', 4: '4',
|
||||
5: '5', 6: '6', 7: '7', 8: '8', 9: '9', 10: '10', 11: '11', 12: '12', 14: '14',
|
||||
16: '16', 20: '20', 24: '24', 28: '28', 32: '32', 36: '36', 40: '40', 44: '44',
|
||||
48: '48', 52: '52', 56: '56', 60: '60', 64: '64', 72: '72', 80: '80', 96: '96',
|
||||
'auto': 'auto'
|
||||
};
|
||||
|
||||
const getSpacingClass = (prefix: string, value: Spacing | 'auto' | ResponsiveSpacing | undefined) => {
|
||||
if (value === undefined) return '';
|
||||
if (typeof value === 'object') {
|
||||
const classes = [];
|
||||
if (value.base !== undefined) classes.push(`${prefix}-${spacingMap[value.base]}`);
|
||||
if (value.md !== undefined) classes.push(`md:${prefix}-${spacingMap[value.md]}`);
|
||||
if (value.lg !== undefined) classes.push(`lg:${prefix}-${spacingMap[value.lg]}`);
|
||||
return classes.join(' ');
|
||||
}
|
||||
return `${prefix}-${spacingMap[value]}`;
|
||||
};
|
||||
|
||||
const getResponsiveClasses = (prefix: string, value: string | number | ResponsiveValue<string | number> | undefined) => {
|
||||
if (value === undefined) return '';
|
||||
if (typeof value === 'object') {
|
||||
const classes = [];
|
||||
if (value.base !== undefined) classes.push(prefix ? `${prefix}-${value.base}` : String(value.base));
|
||||
if (value.sm !== undefined) classes.push(prefix ? `sm:${prefix}-${value.sm}` : `sm:${value.sm}`);
|
||||
if (value.md !== undefined) classes.push(prefix ? `md:${prefix}-${value.md}` : `md:${value.md}`);
|
||||
if (value.lg !== undefined) classes.push(prefix ? `lg:${prefix}-${value.lg}` : `lg:${value.lg}`);
|
||||
if (value.xl !== undefined) classes.push(prefix ? `xl:${prefix}-${value.xl}` : `xl:${value.xl}`);
|
||||
if (value['2xl'] !== undefined) classes.push(prefix ? `2xl:${prefix}-${value['2xl']}` : `2xl:${value['2xl']}`);
|
||||
return classes.join(' ');
|
||||
}
|
||||
return prefix ? `${prefix}-${value}` : String(value);
|
||||
};
|
||||
|
||||
const getFlexDirectionClass = (value: BoxProps<ElementType>['flexDirection']) => {
|
||||
if (!value) return '';
|
||||
if (typeof value === 'object') {
|
||||
const classes = [];
|
||||
if (value.base) classes.push(`flex-${value.base}`);
|
||||
if (value.sm) classes.push(`sm:flex-${value.sm}`);
|
||||
if (value.md) classes.push(`md:flex-${value.md}`);
|
||||
if (value.lg) classes.push(`lg:flex-${value.lg}`);
|
||||
if (value.xl) classes.push(`xl:flex-${value.xl}`);
|
||||
if (value['2xl']) classes.push(`2xl:flex-${value['2xl']}`);
|
||||
return classes.join(' ');
|
||||
}
|
||||
return `flex-${value}`;
|
||||
};
|
||||
|
||||
const getAlignItemsClass = (value: BoxProps<ElementType>['alignItems']) => {
|
||||
if (!value) return '';
|
||||
const map: Record<string, string> = { start: 'items-start', center: 'items-center', end: 'items-end', stretch: 'items-stretch', baseline: 'items-baseline' };
|
||||
if (typeof value === 'object') {
|
||||
const classes = [];
|
||||
if (value.base) classes.push(map[value.base]);
|
||||
if (value.sm) classes.push(`sm:${map[value.sm]}`);
|
||||
if (value.md) classes.push(`md:${map[value.md]}`);
|
||||
if (value.lg) classes.push(`lg:${map[value.lg]}`);
|
||||
if (value.xl) classes.push(`xl:${map[value.xl]}`);
|
||||
if (value['2xl']) classes.push(`2xl:${map[value['2xl']]}`);
|
||||
return classes.join(' ');
|
||||
}
|
||||
return map[value];
|
||||
};
|
||||
|
||||
const getJustifyContentClass = (value: BoxProps<ElementType>['justifyContent']) => {
|
||||
if (!value) return '';
|
||||
const map: Record<string, string> = { start: 'justify-start', center: 'justify-center', end: 'justify-end', between: 'justify-between', around: 'justify-around', evenly: 'justify-evenly' };
|
||||
if (typeof value === 'object') {
|
||||
const classes = [];
|
||||
if (value.base) classes.push(map[value.base]);
|
||||
if (value.sm) classes.push(`sm:${map[value.sm]}`);
|
||||
if (value.md) classes.push(`md:${map[value.md]}`);
|
||||
if (value.lg) classes.push(`lg:${map[value.lg]}`);
|
||||
if (value.xl) classes.push(`xl:${map[value.xl]}`);
|
||||
if (value['2xl']) classes.push(`2xl:${map[value['2xl']]}`);
|
||||
return classes.join(' ');
|
||||
}
|
||||
return map[value];
|
||||
};
|
||||
|
||||
const classes = [
|
||||
center ? 'flex items-center justify-center' : '',
|
||||
fullWidth ? 'w-full' : '',
|
||||
fullHeight ? 'h-full' : '',
|
||||
getSpacingClass('m', m),
|
||||
getSpacingClass('mt', mt),
|
||||
getSpacingClass('mb', mb),
|
||||
getSpacingClass('ml', ml),
|
||||
getSpacingClass('mr', mr),
|
||||
getSpacingClass('mx', mx),
|
||||
getSpacingClass('my', my),
|
||||
getSpacingClass('p', p),
|
||||
getSpacingClass('pt', pt),
|
||||
getSpacingClass('pb', pb),
|
||||
getSpacingClass('pl', pl),
|
||||
getSpacingClass('pr', pr),
|
||||
getSpacingClass('px', px),
|
||||
getSpacingClass('py', py),
|
||||
getResponsiveClasses('w', w),
|
||||
getResponsiveClasses('h', h),
|
||||
getResponsiveClasses('max-w', maxWidth),
|
||||
getResponsiveClasses('min-w', minWidth),
|
||||
getResponsiveClasses('max-h', maxHeight),
|
||||
getResponsiveClasses('min-h', minHeight),
|
||||
rounded ? `rounded-${rounded}` : '',
|
||||
border ? 'border' : '',
|
||||
borderStyle ? `border-${borderStyle}` : '',
|
||||
borderTop ? 'border-t' : '',
|
||||
borderBottom ? 'border-b' : '',
|
||||
borderLeft ? 'border-l' : '',
|
||||
borderRight ? 'border-r' : '',
|
||||
borderColor ? borderColor : '',
|
||||
ring ? ring : '',
|
||||
bg ? bg : (backgroundColor ? (backgroundColor.startsWith('bg-') ? backgroundColor : `bg-${backgroundColor}`) : ''),
|
||||
color ? color : '',
|
||||
hoverColor ? `hover:${hoverColor}` : '',
|
||||
shadow ? shadow : '',
|
||||
flex !== undefined ? `flex-${flex}` : '',
|
||||
flexShrink !== undefined ? `flex-shrink-${flexShrink}` : '',
|
||||
flexGrow !== undefined ? `flex-grow-${flexGrow}` : '',
|
||||
alignSelf !== undefined ? `self-${alignSelf}` : '',
|
||||
flexWrap ? `flex-${flexWrap}` : '',
|
||||
hoverBorderColor ? `hover:${hoverBorderColor}` : '',
|
||||
hoverTextColor ? `hover:${hoverTextColor}` : '',
|
||||
hoverBg ? `hover:${hoverBg}` : '',
|
||||
transition ? 'transition-all' : '',
|
||||
lineClamp ? `line-clamp-${lineClamp}` : '',
|
||||
inset ? `inset-${inset}` : '',
|
||||
insetY !== undefined && spacingMap[insetY as string | number] ? `inset-y-${spacingMap[insetY as string | number]}` : '',
|
||||
bgOpacity !== undefined ? `bg-opacity-${bgOpacity * 100}` : '',
|
||||
opacity !== undefined ? `opacity-${opacity * 100}` : '',
|
||||
blur ? `blur-${blur}` : '',
|
||||
animate ? `animate-${animate}` : '',
|
||||
translateX ? `translate-x-${translateX}` : '',
|
||||
textAlign ? `text-${textAlign}` : '',
|
||||
hoverScale ? 'hover:scale-[1.02]' : '',
|
||||
group ? 'group' : '',
|
||||
groupHoverBorderColor ? `group-hover:border-${groupHoverBorderColor}` : '',
|
||||
groupHoverTextColor ? `group-hover:text-${groupHoverTextColor}` : '',
|
||||
groupHoverScale ? 'group-hover:scale-[1.02]' : '',
|
||||
groupHoverOpacity !== undefined ? `group-hover:opacity-${groupHoverOpacity * 100}` : '',
|
||||
groupHoverWidth ? `group-hover:w-${groupHoverWidth}` : '',
|
||||
fontSize ? `text-${fontSize}` : '',
|
||||
fontWeight ? `font-${fontWeight}` : '',
|
||||
getResponsiveClasses('', display),
|
||||
getFlexDirectionClass(flexDirection),
|
||||
getAlignItemsClass(alignItems),
|
||||
getJustifyContentClass(justifyContent),
|
||||
gridCols ? `grid-cols-${gridCols}` : '',
|
||||
responsiveGridCols?.base ? `grid-cols-${responsiveGridCols.base}` : '',
|
||||
responsiveGridCols?.md ? `md:grid-cols-${responsiveGridCols.md}` : '',
|
||||
responsiveGridCols?.lg ? `lg:grid-cols-${responsiveGridCols.lg}` : '',
|
||||
colSpan ? `col-span-${colSpan}` : '',
|
||||
responsiveColSpan?.base ? `col-span-${responsiveColSpan.base}` : '',
|
||||
responsiveColSpan?.md ? `md:col-span-${responsiveColSpan.md}` : '',
|
||||
responsiveColSpan?.lg ? `lg:col-span-${responsiveColSpan.lg}` : '',
|
||||
getSpacingClass('gap', gap),
|
||||
getResponsiveClasses('order', order),
|
||||
position ? position : '',
|
||||
top !== undefined && spacingMap[top as string | number] ? `top-${spacingMap[top as string | number]}` : '',
|
||||
bottom !== undefined && spacingMap[bottom as string | number] ? `bottom-${spacingMap[bottom as string | number]}` : '',
|
||||
left !== undefined && spacingMap[left as string | number] ? `left-${spacingMap[left as string | number]}` : '',
|
||||
right !== undefined && spacingMap[right as string | number] ? `right-${spacingMap[right as string | number]}` : '',
|
||||
overflow ? `overflow-${overflow}` : '',
|
||||
visibility ? visibility : '',
|
||||
zIndex !== undefined ? `z-${zIndex}` : '',
|
||||
cursor ? `cursor-${cursor}` : '',
|
||||
pointerEvents ? `pointer-events-${pointerEvents}` : '',
|
||||
hideScrollbar ? 'scrollbar-hide' : '',
|
||||
className
|
||||
].filter(Boolean).join(' ');
|
||||
|
||||
const style: React.CSSProperties = {
|
||||
...(width ? { width } : {}),
|
||||
...(height ? { height } : {}),
|
||||
...(typeof maxWidth === 'string' ? { maxWidth } : {}),
|
||||
...(typeof minWidth === 'string' ? { minWidth } : {}),
|
||||
...(typeof maxHeight === 'string' ? { maxHeight } : {}),
|
||||
...(typeof minHeight === 'string' ? { minHeight } : {}),
|
||||
...(fontSize ? { fontSize } : {}),
|
||||
...(transform ? { transform } : {}),
|
||||
...(borderWidth ? { borderWidth } : {}),
|
||||
...(objectFit ? { objectFit } : {}),
|
||||
...(aspectRatio ? { aspectRatio } : {}),
|
||||
...(maskImage ? { maskImage } : {}),
|
||||
...(webkitMaskImage ? { WebkitMaskImage: webkitMaskImage } : {}),
|
||||
...(backgroundSize ? { backgroundSize } : {}),
|
||||
...(backgroundPosition ? { backgroundPosition } : {}),
|
||||
...(backgroundImage ? { backgroundImage } : {}),
|
||||
...(letterSpacing ? { letterSpacing } : {}),
|
||||
...(lineHeight ? { lineHeight } : {}),
|
||||
...(top !== undefined && !spacingMap[top as string | number] ? { top } : {}),
|
||||
...(bottom !== undefined && !spacingMap[bottom as string | number] ? { bottom } : {}),
|
||||
...(left !== undefined && !spacingMap[left as string | number] ? { left } : {}),
|
||||
...(right !== undefined && !spacingMap[right as string | number] ? { right } : {}),
|
||||
...(insetY !== undefined && !spacingMap[insetY as string | number] ? { top: insetY, bottom: insetY } : {}),
|
||||
...(hideScrollbar ? { scrollbarWidth: 'none', msOverflowStyle: 'none', '&::-webkit-scrollbar': { display: 'none' } } : {}),
|
||||
...((props as Record<string, unknown>).style as object || {})
|
||||
};
|
||||
|
||||
return (
|
||||
<Tag
|
||||
ref={ref as React.ForwardedRef<HTMLElement>}
|
||||
className={classes}
|
||||
onClick={onClick}
|
||||
onSubmit={onSubmit}
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
whileHover={whileHover}
|
||||
whileTap={whileTap}
|
||||
initial={initial}
|
||||
animate={animate}
|
||||
exit={exit}
|
||||
{...props}
|
||||
style={style as React.CSSProperties}
|
||||
>
|
||||
{children}
|
||||
</Tag>
|
||||
);
|
||||
});
|
||||
|
||||
Box.displayName = 'Box';
|
||||
57
apps/website/ui/primitives/Grid.tsx
Normal file
57
apps/website/ui/primitives/Grid.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
import React, { ReactNode } from 'react';
|
||||
import { Box, BoxProps } from './Box';
|
||||
|
||||
export interface GridProps extends Omit<BoxProps<'div'>, 'children' | 'display'> {
|
||||
children: ReactNode;
|
||||
cols?: 1 | 2 | 3 | 4 | 5 | 6 | 12;
|
||||
mdCols?: 1 | 2 | 3 | 4 | 5 | 6 | 12;
|
||||
lgCols?: 1 | 2 | 3 | 4 | 5 | 6 | 12;
|
||||
gap?: 0 | 1 | 2 | 3 | 4 | 6 | 8 | 12 | 16;
|
||||
}
|
||||
|
||||
export function Grid({
|
||||
children,
|
||||
cols = 1,
|
||||
mdCols,
|
||||
lgCols,
|
||||
gap = 4,
|
||||
className = '',
|
||||
...props
|
||||
}: GridProps) {
|
||||
const colClasses: Record<number, string> = {
|
||||
1: 'grid-cols-1',
|
||||
2: 'grid-cols-1 md:grid-cols-2',
|
||||
3: 'grid-cols-1 md:grid-cols-3',
|
||||
4: 'grid-cols-2 md:grid-cols-4',
|
||||
5: 'grid-cols-2 md:grid-cols-3 lg:grid-cols-5',
|
||||
6: 'grid-cols-2 md:grid-cols-3 lg:grid-cols-6',
|
||||
12: 'grid-cols-12'
|
||||
};
|
||||
|
||||
const gapClasses: Record<number, string> = {
|
||||
0: 'gap-0',
|
||||
1: 'gap-1',
|
||||
2: 'gap-2',
|
||||
3: 'gap-3',
|
||||
4: 'gap-4',
|
||||
6: 'gap-6',
|
||||
8: 'gap-8',
|
||||
12: 'gap-12',
|
||||
16: 'gap-16'
|
||||
};
|
||||
|
||||
const classes = [
|
||||
'grid',
|
||||
colClasses[cols] || 'grid-cols-1',
|
||||
mdCols ? `md:grid-cols-${mdCols}` : '',
|
||||
lgCols ? `lg:grid-cols-${lgCols}` : '',
|
||||
gapClasses[gap] || 'gap-4',
|
||||
className
|
||||
].filter(Boolean).join(' ');
|
||||
|
||||
return (
|
||||
<Box className={classes} {...props}>
|
||||
{children}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
25
apps/website/ui/primitives/GridItem.tsx
Normal file
25
apps/website/ui/primitives/GridItem.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
import React from 'react';
|
||||
import { Box } from './Box';
|
||||
|
||||
export interface GridItemProps {
|
||||
children: React.ReactNode;
|
||||
colSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
||||
mdSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
||||
lgSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function GridItem({ children, colSpan, mdSpan, lgSpan, className = '' }: GridItemProps) {
|
||||
const spanClasses = [
|
||||
colSpan ? `col-span-${colSpan}` : '',
|
||||
mdSpan ? `md:col-span-${mdSpan}` : '',
|
||||
lgSpan ? `lg:col-span-${lgSpan}` : '',
|
||||
className
|
||||
].filter(Boolean).join(' ');
|
||||
|
||||
return (
|
||||
<Box className={spanClasses}>
|
||||
{children}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
167
apps/website/ui/primitives/Stack.tsx
Normal file
167
apps/website/ui/primitives/Stack.tsx
Normal file
@@ -0,0 +1,167 @@
|
||||
import React, { ReactNode, ElementType } from 'react';
|
||||
import { Box, BoxProps, ResponsiveValue } from './Box';
|
||||
|
||||
type Spacing = 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
|
||||
|
||||
interface ResponsiveGap {
|
||||
base?: number;
|
||||
sm?: number;
|
||||
md?: number;
|
||||
lg?: number;
|
||||
xl?: number;
|
||||
}
|
||||
|
||||
interface ResponsiveSpacing {
|
||||
base?: Spacing;
|
||||
sm?: Spacing;
|
||||
md?: Spacing;
|
||||
lg?: Spacing;
|
||||
xl?: Spacing;
|
||||
'2xl'?: Spacing;
|
||||
}
|
||||
|
||||
export interface StackProps<T extends ElementType> extends Omit<BoxProps<T>, 'children' | 'className' | 'gap'> {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
direction?: 'row' | 'col' | { base?: 'row' | 'col'; md?: 'row' | 'col'; lg?: 'row' | 'col' };
|
||||
gap?: number | ResponsiveGap;
|
||||
align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline' | ResponsiveValue<'start' | 'center' | 'end' | 'stretch' | 'baseline'>;
|
||||
justify?: 'start' | 'center' | 'end' | 'between' | 'around' | ResponsiveValue<'start' | 'center' | 'end' | 'between' | 'around'>;
|
||||
wrap?: boolean;
|
||||
center?: boolean;
|
||||
m?: Spacing | ResponsiveSpacing;
|
||||
mt?: Spacing | ResponsiveSpacing;
|
||||
mb?: Spacing | ResponsiveSpacing;
|
||||
ml?: Spacing | ResponsiveSpacing;
|
||||
mr?: Spacing | ResponsiveSpacing;
|
||||
p?: Spacing | ResponsiveSpacing;
|
||||
pt?: Spacing | ResponsiveSpacing;
|
||||
pb?: Spacing | ResponsiveSpacing;
|
||||
pl?: Spacing | ResponsiveSpacing;
|
||||
pr?: Spacing | ResponsiveSpacing;
|
||||
px?: Spacing | ResponsiveSpacing;
|
||||
py?: Spacing | ResponsiveSpacing;
|
||||
rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
|
||||
style?: React.CSSProperties;
|
||||
role?: string;
|
||||
'aria-label'?: string;
|
||||
'aria-live'?: 'polite' | 'assertive' | 'off';
|
||||
}
|
||||
|
||||
export function Stack<T extends ElementType = 'div'>({
|
||||
children,
|
||||
className = '',
|
||||
direction = 'col',
|
||||
gap = 4,
|
||||
align,
|
||||
justify,
|
||||
wrap = false,
|
||||
center = false,
|
||||
m, mt, mb, ml, mr,
|
||||
p, pt, pb, pl, pr, px, py,
|
||||
rounded,
|
||||
as,
|
||||
...props
|
||||
}: StackProps<T>) {
|
||||
const gapClasses: Record<number, string> = {
|
||||
0: 'gap-0',
|
||||
1: 'gap-1',
|
||||
2: 'gap-2',
|
||||
3: 'gap-3',
|
||||
4: 'gap-4',
|
||||
5: 'gap-5',
|
||||
6: 'gap-6',
|
||||
8: 'gap-8',
|
||||
10: 'gap-10',
|
||||
12: 'gap-12',
|
||||
16: 'gap-16'
|
||||
};
|
||||
|
||||
const getGapClasses = (value: number | ResponsiveGap | undefined) => {
|
||||
if (value === undefined) return '';
|
||||
if (typeof value === 'object') {
|
||||
const classes = [];
|
||||
if (value.base !== undefined) classes.push(gapClasses[value.base]);
|
||||
if (value.sm !== undefined) classes.push(`sm:${gapClasses[value.sm]}`);
|
||||
if (value.md !== undefined) classes.push(`md:${gapClasses[value.md]}`);
|
||||
if (value.lg !== undefined) classes.push(`lg:${gapClasses[value.lg]}`);
|
||||
if (value.xl !== undefined) classes.push(`xl:${gapClasses[value.xl]}`);
|
||||
return classes.join(' ');
|
||||
}
|
||||
return gapClasses[value];
|
||||
};
|
||||
|
||||
const spacingMap: Record<number, string> = {
|
||||
0: '0', 0.5: '0.5', 1: '1', 1.5: '1.5', 2: '2', 2.5: '2.5', 3: '3', 3.5: '3.5', 4: '4',
|
||||
5: '5', 6: '6', 7: '7', 8: '8', 9: '9', 10: '10', 11: '11', 12: '12', 14: '14',
|
||||
16: '16', 20: '20', 24: '24', 28: '28', 32: '32', 36: '36', 40: '40', 44: '44',
|
||||
48: '48', 52: '52', 56: '56', 60: '60', 64: '64', 72: '72', 80: '80', 96: '96'
|
||||
};
|
||||
|
||||
const roundedClasses = {
|
||||
none: 'rounded-none',
|
||||
sm: 'rounded-sm',
|
||||
md: 'rounded-md',
|
||||
lg: 'rounded-lg',
|
||||
xl: 'rounded-xl',
|
||||
'2xl': 'rounded-2xl',
|
||||
full: 'rounded-full'
|
||||
};
|
||||
|
||||
const getSpacingClass = (prefix: string, value: Spacing | ResponsiveSpacing | undefined) => {
|
||||
if (value === undefined) return '';
|
||||
if (typeof value === 'object') {
|
||||
const classes = [];
|
||||
if (value.base !== undefined) classes.push(`${prefix}-${spacingMap[value.base]}`);
|
||||
if (value.sm !== undefined) classes.push(`sm:${prefix}-${spacingMap[value.sm]}`);
|
||||
if (value.md !== undefined) classes.push(`md:${prefix}-${spacingMap[value.md]}`);
|
||||
if (value.lg !== undefined) classes.push(`lg:${prefix}-${spacingMap[value.lg]}`);
|
||||
if (value.xl !== undefined) classes.push(`xl:${prefix}-${spacingMap[value.xl]}`);
|
||||
if (value['2xl'] !== undefined) classes.push(`2xl:${prefix}-${spacingMap[value['2xl']]}`);
|
||||
return classes.join(' ');
|
||||
}
|
||||
return `${prefix}-${spacingMap[value]}`;
|
||||
};
|
||||
|
||||
const classes = [
|
||||
'flex',
|
||||
typeof direction === 'string'
|
||||
? (direction === 'col' ? 'flex-col' : 'flex-row')
|
||||
: [
|
||||
direction.base === 'col' ? 'flex-col' : (direction.base === 'row' ? 'flex-row' : ''),
|
||||
direction.md === 'col' ? 'md:flex-col' : (direction.md === 'row' ? 'md:flex-row' : ''),
|
||||
direction.lg === 'col' ? 'lg:flex-col' : (direction.lg === 'row' ? 'lg:flex-row' : ''),
|
||||
].filter(Boolean).join(' '),
|
||||
getGapClasses(gap) || 'gap-4',
|
||||
wrap ? 'flex-wrap' : '',
|
||||
getSpacingClass('m', m),
|
||||
getSpacingClass('mt', mt),
|
||||
getSpacingClass('mb', mb),
|
||||
getSpacingClass('ml', ml),
|
||||
getSpacingClass('mr', mr),
|
||||
getSpacingClass('p', p),
|
||||
getSpacingClass('pt', pt),
|
||||
getSpacingClass('pb', pb),
|
||||
getSpacingClass('pl', pl),
|
||||
getSpacingClass('pr', pr),
|
||||
getSpacingClass('px', px),
|
||||
getSpacingClass('py', py),
|
||||
rounded ? roundedClasses[rounded] : '',
|
||||
className
|
||||
].filter(Boolean).join(' ');
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const { alignItems, justifyContent, ...restProps } = props as any;
|
||||
|
||||
return (
|
||||
<Box
|
||||
as={as}
|
||||
className={classes}
|
||||
alignItems={center ? 'center' : (align || alignItems)}
|
||||
justifyContent={center ? 'center' : (justify || justifyContent)}
|
||||
{...restProps}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
87
apps/website/ui/primitives/Surface.tsx
Normal file
87
apps/website/ui/primitives/Surface.tsx
Normal file
@@ -0,0 +1,87 @@
|
||||
import React, { ReactNode, ElementType, ComponentPropsWithoutRef } from 'react';
|
||||
import { Box, BoxProps } from './Box';
|
||||
|
||||
export interface SurfaceProps<T extends ElementType = 'div'> extends Omit<BoxProps<T>, 'children' | 'className' | 'display'> {
|
||||
as?: T;
|
||||
children: ReactNode;
|
||||
variant?: 'default' | 'muted' | 'dark' | 'glass' | 'gradient-blue' | 'gradient-gold' | 'gradient-purple' | 'gradient-green' | 'discord' | 'discord-inner';
|
||||
rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
|
||||
border?: boolean;
|
||||
padding?: number;
|
||||
className?: string;
|
||||
display?: 'block' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'none';
|
||||
shadow?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'discord' | string;
|
||||
}
|
||||
|
||||
export function Surface<T extends ElementType = 'div'>({
|
||||
as,
|
||||
children,
|
||||
variant = 'default',
|
||||
rounded = 'none',
|
||||
border = false,
|
||||
padding = 0,
|
||||
className = '',
|
||||
display,
|
||||
shadow = 'none',
|
||||
...props
|
||||
}: SurfaceProps<T> & ComponentPropsWithoutRef<T>) {
|
||||
const variantClasses: Record<string, string> = {
|
||||
default: 'bg-panel-gray',
|
||||
muted: 'bg-panel-gray/40',
|
||||
dark: 'bg-graphite-black',
|
||||
glass: 'bg-graphite-black/60 backdrop-blur-md',
|
||||
'gradient-blue': 'bg-gradient-to-br from-primary-accent/10 via-panel-gray/80 to-graphite-black',
|
||||
'gradient-gold': 'bg-gradient-to-br from-warning-amber/10 via-panel-gray/80 to-graphite-black',
|
||||
'gradient-purple': 'bg-gradient-to-br from-purple-600/10 via-panel-gray/80 to-graphite-black',
|
||||
'gradient-green': 'bg-gradient-to-br from-success-green/10 via-panel-gray/80 to-graphite-black',
|
||||
'discord': 'bg-gradient-to-b from-graphite-black to-panel-gray',
|
||||
'discord-inner': 'bg-gradient-to-br from-panel-gray via-graphite-black to-panel-gray'
|
||||
};
|
||||
|
||||
const shadowClasses: Record<string, string> = {
|
||||
none: '',
|
||||
sm: 'shadow-sm',
|
||||
md: 'shadow-md',
|
||||
lg: 'shadow-lg',
|
||||
xl: 'shadow-xl',
|
||||
discord: 'shadow-[0_0_80px_rgba(88,101,242,0.15)]'
|
||||
};
|
||||
|
||||
const roundedClasses: Record<string, string> = {
|
||||
none: 'rounded-none',
|
||||
sm: 'rounded-sm',
|
||||
md: 'rounded-md',
|
||||
lg: 'rounded-lg',
|
||||
xl: 'rounded-xl',
|
||||
'2xl': 'rounded-2xl',
|
||||
full: 'rounded-full'
|
||||
};
|
||||
|
||||
const paddingClasses: Record<number, string> = {
|
||||
0: 'p-0',
|
||||
1: 'p-1',
|
||||
2: 'p-2',
|
||||
3: 'p-3',
|
||||
4: 'p-4',
|
||||
6: 'p-6',
|
||||
8: 'p-8',
|
||||
10: 'p-10',
|
||||
12: 'p-12'
|
||||
};
|
||||
|
||||
const classes = [
|
||||
variantClasses[variant],
|
||||
roundedClasses[rounded],
|
||||
border ? 'border border-border-gray' : '',
|
||||
paddingClasses[padding] || 'p-0',
|
||||
shadowClasses[shadow],
|
||||
display ? display : '',
|
||||
className
|
||||
].filter(Boolean).join(' ');
|
||||
|
||||
return (
|
||||
<Box as={as} className={classes} {...props}>
|
||||
{children}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user