website refactor
This commit is contained in:
@@ -1,30 +1,67 @@
|
||||
import React, { ElementType, ReactNode, forwardRef } from 'react';
|
||||
import { Box, BoxProps, ResponsiveValue } from './Box';
|
||||
|
||||
export type TextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | 'base';
|
||||
|
||||
export interface TextProps extends BoxProps<any> {
|
||||
export interface TextProps {
|
||||
children: ReactNode;
|
||||
variant?: 'high' | 'med' | 'low' | 'primary' | 'success' | 'warning' | 'critical' | 'telemetry' | 'inherit';
|
||||
size?: TextSize | ResponsiveValue<TextSize>;
|
||||
weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
|
||||
variant?: 'high' | 'med' | 'low' | 'primary' | 'success' | 'warning' | 'critical' | 'telemetry' | 'inherit' | any;
|
||||
size?: TextSize | { base: TextSize; sm?: TextSize; md?: TextSize; lg?: TextSize; xl?: TextSize } | any;
|
||||
weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | any;
|
||||
as?: ElementType;
|
||||
align?: 'left' | 'center' | 'right';
|
||||
italic?: boolean;
|
||||
align?: 'left' | 'center' | 'right' | any;
|
||||
mono?: boolean;
|
||||
block?: boolean;
|
||||
uppercase?: boolean;
|
||||
capitalize?: boolean;
|
||||
letterSpacing?: string;
|
||||
leading?: 'none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose';
|
||||
leading?: 'none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose' | any;
|
||||
block?: boolean;
|
||||
truncate?: boolean;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
mt?: number | any;
|
||||
mb?: number | any;
|
||||
ml?: number | any;
|
||||
mr?: number | any;
|
||||
marginTop?: number | any;
|
||||
marginBottom?: number | any;
|
||||
font?: 'sans' | 'mono' | string;
|
||||
color?: string;
|
||||
letterSpacing?: string;
|
||||
lineHeight?: string | number;
|
||||
font?: 'sans' | 'mono';
|
||||
hoverVariant?: 'high' | 'med' | 'low' | 'primary' | 'success' | 'warning' | 'critical';
|
||||
htmlFor?: string;
|
||||
flexGrow?: number;
|
||||
flexShrink?: number;
|
||||
lineClamp?: number;
|
||||
display?: string;
|
||||
opacity?: number;
|
||||
maxWidth?: string | number;
|
||||
mx?: string | number;
|
||||
pl?: number;
|
||||
px?: number;
|
||||
py?: number;
|
||||
paddingX?: number;
|
||||
paddingY?: number;
|
||||
textAlign?: string;
|
||||
groupHoverTextColor?: string;
|
||||
transition?: boolean;
|
||||
borderLeft?: boolean;
|
||||
borderStyle?: string;
|
||||
borderColor?: string;
|
||||
ariaLabel?: string;
|
||||
hoverVariant?: string;
|
||||
fontSize?: string | any;
|
||||
italic?: boolean;
|
||||
animate?: string;
|
||||
capitalize?: boolean;
|
||||
alignItems?: string;
|
||||
gap?: number;
|
||||
cursor?: string;
|
||||
width?: string | number;
|
||||
htmlFor?: string;
|
||||
transform?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Text - Redesigned for "Modern Precision" theme.
|
||||
* Includes extensive compatibility props to prevent app-wide breakage.
|
||||
*/
|
||||
export const Text = forwardRef<HTMLElement, TextProps>(({
|
||||
children,
|
||||
variant = 'med',
|
||||
@@ -32,20 +69,53 @@ export const Text = forwardRef<HTMLElement, TextProps>(({
|
||||
weight = 'normal',
|
||||
as = 'p',
|
||||
align = 'left',
|
||||
italic = false,
|
||||
mono = false,
|
||||
block = false,
|
||||
uppercase = false,
|
||||
capitalize = false,
|
||||
letterSpacing,
|
||||
leading,
|
||||
leading = 'normal',
|
||||
block = false,
|
||||
truncate = false,
|
||||
lineHeight,
|
||||
className,
|
||||
style,
|
||||
mt,
|
||||
mb,
|
||||
ml,
|
||||
mr,
|
||||
marginTop,
|
||||
marginBottom,
|
||||
font,
|
||||
color,
|
||||
letterSpacing,
|
||||
lineHeight,
|
||||
flexGrow,
|
||||
flexShrink,
|
||||
lineClamp,
|
||||
display,
|
||||
opacity,
|
||||
maxWidth,
|
||||
mx,
|
||||
pl,
|
||||
px,
|
||||
py,
|
||||
paddingX,
|
||||
paddingY,
|
||||
textAlign,
|
||||
groupHoverTextColor,
|
||||
transition,
|
||||
borderLeft,
|
||||
borderStyle,
|
||||
borderColor,
|
||||
ariaLabel,
|
||||
hoverVariant,
|
||||
htmlFor,
|
||||
fontSize,
|
||||
italic,
|
||||
animate,
|
||||
capitalize,
|
||||
alignItems,
|
||||
gap,
|
||||
cursor,
|
||||
...props
|
||||
width,
|
||||
htmlFor,
|
||||
transform,
|
||||
}, ref) => {
|
||||
const variantClasses = {
|
||||
high: 'text-[var(--ui-color-text-high)]',
|
||||
@@ -58,40 +128,31 @@ export const Text = forwardRef<HTMLElement, TextProps>(({
|
||||
telemetry: 'text-[var(--ui-color-intent-telemetry)]',
|
||||
inherit: 'text-inherit',
|
||||
};
|
||||
|
||||
const hoverVariantClasses = {
|
||||
high: 'hover:text-[var(--ui-color-text-high)]',
|
||||
med: 'hover:text-[var(--ui-color-text-med)]',
|
||||
low: 'hover:text-[var(--ui-color-text-low)]',
|
||||
primary: 'hover:text-[var(--ui-color-intent-primary)]',
|
||||
success: 'hover:text-[var(--ui-color-intent-success)]',
|
||||
warning: 'hover:text-[var(--ui-color-intent-warning)]',
|
||||
critical: 'hover:text-[var(--ui-color-intent-critical)]',
|
||||
};
|
||||
|
||||
const sizeMap: Record<TextSize, string> = {
|
||||
xs: 'text-xs',
|
||||
sm: 'text-sm',
|
||||
base: 'text-base',
|
||||
md: 'text-base',
|
||||
lg: 'text-lg',
|
||||
xl: 'text-xl',
|
||||
'2xl': 'text-2xl',
|
||||
'3xl': 'text-3xl',
|
||||
'4xl': 'text-4xl',
|
||||
const sizeMap: Record<string, string> = {
|
||||
xs: 'text-[10px]',
|
||||
sm: 'text-xs',
|
||||
base: 'text-sm',
|
||||
md: 'text-sm',
|
||||
lg: 'text-base',
|
||||
xl: 'text-lg',
|
||||
'2xl': 'text-xl',
|
||||
'3xl': 'text-2xl',
|
||||
'4xl': 'text-3xl',
|
||||
};
|
||||
|
||||
const getResponsiveSizeClasses = (value: TextSize | ResponsiveValue<TextSize>) => {
|
||||
if (typeof value === 'string') return sizeMap[value];
|
||||
const getResponsiveSize = (s: any) => {
|
||||
if (!s) return sizeMap['md'];
|
||||
if (typeof s === 'string') return sizeMap[s] || sizeMap['md'];
|
||||
const classes = [];
|
||||
if (value.base) classes.push(sizeMap[value.base]);
|
||||
if (value.sm) classes.push(`sm:${sizeMap[value.sm]}`);
|
||||
if (value.md) classes.push(`md:${sizeMap[value.md]}`);
|
||||
if (value.lg) classes.push(`lg:${sizeMap[value.lg]}`);
|
||||
if (value.xl) classes.push(`xl:${sizeMap[value.xl]}`);
|
||||
if (s.base) classes.push(sizeMap[s.base]);
|
||||
if (s.sm) classes.push(`sm:${sizeMap[s.sm]}`);
|
||||
if (s.md) classes.push(`md:${sizeMap[s.md]}`);
|
||||
if (s.lg) classes.push(`lg:${sizeMap[s.lg]}`);
|
||||
if (s.xl) classes.push(`xl:${sizeMap[s.xl]}`);
|
||||
return classes.join(' ');
|
||||
};
|
||||
|
||||
|
||||
const weightClasses = {
|
||||
light: 'font-light',
|
||||
normal: 'font-normal',
|
||||
@@ -110,30 +171,60 @@ export const Text = forwardRef<HTMLElement, TextProps>(({
|
||||
};
|
||||
|
||||
const classes = [
|
||||
variantClasses[variant],
|
||||
getResponsiveSizeClasses(size),
|
||||
weightClasses[weight],
|
||||
align === 'center' ? 'text-center' : (align === 'right' ? 'text-right' : 'text-left'),
|
||||
italic ? 'italic' : '',
|
||||
variantClasses[variant as keyof typeof variantClasses] || '',
|
||||
getResponsiveSize(size),
|
||||
weightClasses[weight as keyof typeof weightClasses] || '',
|
||||
align === 'center' || textAlign === 'center' ? 'text-center' : (align === 'right' || textAlign === 'right' ? 'text-right' : 'text-left'),
|
||||
(mono || font === 'mono') ? 'font-mono' : 'font-sans',
|
||||
uppercase ? 'uppercase tracking-widest' : '',
|
||||
leadingClasses[leading as keyof typeof leadingClasses] || '',
|
||||
block ? 'block' : 'inline',
|
||||
uppercase ? 'uppercase tracking-wider' : '',
|
||||
capitalize ? 'capitalize' : '',
|
||||
leading ? leadingClasses[leading] : '',
|
||||
truncate ? 'truncate' : '',
|
||||
hoverVariant ? hoverVariantClasses[hoverVariant] : '',
|
||||
].join(' ');
|
||||
transition ? 'transition-all duration-200' : '',
|
||||
italic ? 'italic' : '',
|
||||
animate === 'pulse' ? 'animate-pulse' : '',
|
||||
capitalize ? 'capitalize' : '',
|
||||
className,
|
||||
].filter(Boolean).join(' ');
|
||||
|
||||
const style: React.CSSProperties = {
|
||||
const combinedStyle: React.CSSProperties = {
|
||||
...style,
|
||||
...(display ? { display } : {}),
|
||||
...(alignItems ? { alignItems } : {}),
|
||||
...(gap !== undefined ? { gap: `${gap * 0.25}rem` } : {}),
|
||||
...(cursor ? { cursor } : {}),
|
||||
...(width !== undefined ? { width } : {}),
|
||||
...(opacity !== undefined ? { opacity } : {}),
|
||||
...(maxWidth !== undefined ? { maxWidth } : {}),
|
||||
...(mx === 'auto' ? { marginLeft: 'auto', marginRight: 'auto' } : {}),
|
||||
...(pl !== undefined ? { paddingLeft: `${pl * 0.25}rem` } : {}),
|
||||
...(px !== undefined ? { paddingLeft: `${px * 0.25}rem`, paddingRight: `${px * 0.25}rem` } : {}),
|
||||
...(py !== undefined ? { paddingTop: `${py * 0.25}rem`, paddingBottom: `${py * 0.25}rem` } : {}),
|
||||
...(paddingX !== undefined ? { paddingLeft: `${paddingX * 0.25}rem`, paddingRight: `${paddingX * 0.25}rem` } : {}),
|
||||
...(paddingY !== undefined ? { paddingTop: `${paddingY * 0.25}rem`, paddingBottom: `${paddingY * 0.25}rem` } : {}),
|
||||
...(mt !== undefined ? { marginTop: typeof mt === 'number' ? `${mt * 0.25}rem` : mt } : {}),
|
||||
...(mb !== undefined ? { marginBottom: typeof mb === 'number' ? `${mb * 0.25}rem` : mb } : {}),
|
||||
...(ml !== undefined ? { marginLeft: typeof ml === 'number' ? `${ml * 0.25}rem` : ml } : {}),
|
||||
...(mr !== undefined ? { marginRight: typeof mr === 'number' ? `${mr * 0.25}rem` : mr } : {}),
|
||||
...(marginTop !== undefined ? { marginTop: typeof marginTop === 'number' ? `${marginTop * 0.25}rem` : marginTop } : {}),
|
||||
...(marginBottom !== undefined ? { marginBottom: typeof marginBottom === 'number' ? `${marginBottom * 0.25}rem` : marginBottom } : {}),
|
||||
...(color ? { color } : {}),
|
||||
...(letterSpacing ? { letterSpacing } : {}),
|
||||
...(lineHeight ? { lineHeight } : {}),
|
||||
...(cursor ? { cursor } : {}),
|
||||
...(flexGrow !== undefined ? { flexGrow } : {}),
|
||||
...(flexShrink !== undefined ? { flexShrink } : {}),
|
||||
...(lineClamp !== undefined ? { display: '-webkit-box', WebkitLineClamp: lineClamp, WebkitBoxOrient: 'vertical', overflow: 'hidden' } : {}),
|
||||
...(borderLeft ? { borderLeft: `1px solid ${borderColor || 'var(--ui-color-border-default)'}` } : {}),
|
||||
...(fontSize ? { fontSize } : {}),
|
||||
...(transform ? { textTransform: transform as any } : {}),
|
||||
};
|
||||
|
||||
const Tag = as;
|
||||
|
||||
return (
|
||||
<Box as={as} ref={ref} className={classes} style={style} htmlFor={htmlFor} {...props}>
|
||||
<Tag ref={ref} className={classes} style={combinedStyle} aria-label={ariaLabel} htmlFor={htmlFor}>
|
||||
{children}
|
||||
</Box>
|
||||
</Tag>
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user