expanded type info

tgstation · Dec 22, 2024 · a3d9866 · a3d9866
1 parent f5fdc00
commit a3d9866
Show file tree

Hide file tree

Showing 2 changed files with 126 additions and 67 deletions.
diff --git a/lib/common/ui.ts b/lib/common/ui.ts
@@ -1,6 +1,6 @@
-import type { BoxProps } from 'lib/components/Box';
+import type { BoxProps } from '../components/Box';
 import { CSS_COLORS } from './constants';
-import { classes } from './react';
+import { type BooleanLike, classes } from './react';
 
 /**
  * Coverts our rem-like spacing unit into a CSS unit.
@@ -70,8 +70,110 @@ const mapColorPropTo = (attrName) => (style, value) => {
   }
 };
 
+export type StringStyleMap = {
+  // Alignment
+
+  /** Align text inside the box. */
+  align: string | BooleanLike;
+  /** A direct mapping to `position` CSS property. */
+  position: string | BooleanLike;
+  /** Vertical align property. */
+  verticalAlign: string | BooleanLike;
+
+  // Color props
+
+  /** Sets background color. */
+  backgroundColor: string | BooleanLike;
+  /** Applies an atomic `color-<name>` class to the element. */
+  color: string | BooleanLike;
+  /** Opacity, from 0 to 1. */
+  opacity: string | BooleanLike;
+  /** Sets text color. */
+  textColor: string | BooleanLike;
+
+  // Margin
+
+  /** Margin on all sides. */
+  m: string | BooleanLike;
+  /** Bottom margin. */
+  mb: string | BooleanLike;
+  /** Left margin. */
+  ml: string | BooleanLike;
+  /** Right margin. */
+  mr: string | BooleanLike;
+  /** Top margin. */
+  mt: string | BooleanLike;
+  /** Horizontal margin. */
+  mx: string | BooleanLike;
+  /** Vertical margin. */
+  my: string | BooleanLike;
+
+  /** Bottom margin. */
+  bottom: string | BooleanLike;
+  /** Left margin. */
+  left: string | BooleanLike;
+  /** Right margin. */
+  right: string | BooleanLike;
+  /** Top margin. */
+  top: string | BooleanLike;
+
+  // Overflow
+
+  /** Overflow property. */
+  overflow: string | BooleanLike;
+  /** Overflow-X property. */
+  overflowX: string | BooleanLike;
+  /** Overflow-Y property. */
+  overflowY: string | BooleanLike;
+
+  // Padding
+
+  /** Padding on all sides. */
+  p: string | BooleanLike;
+  /** Bottom padding. */
+  pb: string | BooleanLike;
+  /** Left padding. */
+  pl: string | BooleanLike;
+  /** Right padding. */
+  pr: string | BooleanLike;
+  /** Top padding. */
+  pt: string | BooleanLike;
+  /** Horizontal padding. */
+  px: string | BooleanLike;
+  /** Vertical padding. */
+  py: string | BooleanLike;
+
+  // Size
+
+  /** Box height. */
+  height: string | BooleanLike;
+  /** Box maximum height. */
+  maxHeight: string | BooleanLike;
+  /** Box maximum width. */
+  maxWidth: string | BooleanLike;
+  /** Box minimum height. */
+  minHeight: string | BooleanLike;
+  /** Box minimum width. */
+  minWidth: string | BooleanLike;
+  /** Box width. */
+  width: string | BooleanLike;
+
+  // Text
+
+  /** Font family. */
+  fontFamily: string | BooleanLike;
+  /** Font size. */
+  fontSize: string | BooleanLike;
+  /** Font weight. */
+  fontWeight: string | BooleanLike;
+  /** Directly affects the height of text lines. Useful for adjusting button height. */
+  lineHeight: string | BooleanLike;
+  /** Align text inside the box. */
+  textAlign: string | BooleanLike;
+};
+
 // String / number props
-export const stringStyleMap = {
+export const stringStyleMap: Record<keyof StringStyleMap, any> = {
   align: mapRawPropTo('textAlign'),
   bottom: mapUnitPropTo('bottom', unit),
   fontFamily: mapRawPropTo('fontFamily'),
@@ -131,10 +233,25 @@ export const stringStyleMap = {
   color: mapColorPropTo('color'),
   textColor: mapColorPropTo('color'),
   backgroundColor: mapColorPropTo('backgroundColor'),
-} as const;
+};
+
+export type BooleanStyleMap = {
+  /** Make text bold. */
+  bold: boolean;
+  /** Fill positioned parent. */
+  fillPositionedParent: boolean;
+  /** Forces the `Box` to appear as an `inline-block`. */
+  inline: boolean;
+  /** Make text italic. */
+  italic: boolean;
+  /** Stops text from wrapping. */
+  nowrap: boolean;
+  /** Preserves line-breaks and spacing in text. */
+  preserveWhitespace: boolean;
+};
 
 // Boolean props
-export const booleanStyleMap = {
+export const booleanStyleMap: Record<keyof BooleanStyleMap, any> = {
   bold: mapBooleanPropTo('fontWeight', 'bold'),
   fillPositionedParent: (style, value) => {
     if (value) {
@@ -149,7 +266,7 @@ export const booleanStyleMap = {
   italic: mapBooleanPropTo('fontStyle', 'italic'),
   nowrap: mapBooleanPropTo('whiteSpace', 'nowrap'),
   preserveWhitespace: mapBooleanPropTo('whiteSpace', 'pre-wrap'),
-} as const;
+};
 
 export function computeBoxProps(props): Record<string, any> {
   const computedProps: Record<string, any> = {};

diff --git a/lib/components/Box.tsx b/lib/components/Box.tsx
@@ -8,15 +8,12 @@ import {
 } from 'react';
 import type { BooleanLike } from '../common/react';
 import {
-  type booleanStyleMap,
+  type BooleanStyleMap,
+  type StringStyleMap,
   computeBoxClassName,
   computeBoxProps,
-  type stringStyleMap,
 } from '../common/ui';
 
-type BooleanProps = Record<keyof typeof booleanStyleMap, boolean>;
-type StringProps = Record<keyof typeof stringStyleMap, string | BooleanLike>;
-
 type EventHandlers = {
   onClick: MouseEventHandler<HTMLDivElement>;
   onContextMenu: MouseEventHandler<HTMLDivElement>;
@@ -43,7 +40,7 @@ type InternalProps = {
 // This is because I'm trying to isolate DangerDoNotUse from the rest of the props.
 // While you still can technically use ComponentProps, it won't throw an error if someone uses dangerouslySet.
 export type BoxProps = Partial<
-  InternalProps & BooleanProps & StringProps & EventHandlers
+  InternalProps & BooleanStyleMap & StringStyleMap & EventHandlers
 >;
 
 // Don't you dare put this elsewhere
@@ -95,61 +92,6 @@ type DangerDoNotUse = {
  * If you need more precision, you can always use fractional numbers.
  *
  * Default font size (`1rem`) is equal to `12px`.
- *
- * ## Props
- *
- * - `as: string` - The component used for the root node.
- * - `color: string` - Applies an atomic `color-<name>` class to the element.
- *   - See `styles/atomic/color.scss`.
- * - `width: number` - Box width.
- * - `minWidth: number` - Box minimum width.
- * - `maxWidth: number` - Box maximum width.
- * - `height: number` - Box height.
- * - `minHeight: number` - Box minimum height.
- * - `maxHeight: number` - Box maximum height.
- * - `fontSize: number` - Font size.
- * - `fontFamily: string` - Font family.
- * - `lineHeight: number` - Directly affects the height of text lines.
- *   Useful for adjusting button height.
- * - `inline: boolean` - Forces the `Box` to appear as an `inline-block`,
- *   or in other words, makes the `Box` flow with the text instead of taking
- *   all available horizontal space.
- * - `m: number` - Margin on all sides.
- * - `mx: number` - Horizontal margin.
- * - `my: number` - Vertical margin.
- * - `mt: number` - Top margin.
- * - `mb: number` - Bottom margin.
- * - `ml: number` - Left margin.
- * - `mr: number` - Right margin.
- * - `p: number` - Padding on all sides.
- * - `px: number` - Horizontal padding.
- * - `py: number` - Vertical padding.
- * - `pt: number` - Top padding.
- * - `pb: number` - Bottom padding.
- * - `pl: number` - Left padding.
- * - `pr: number` - Right padding.
- * - `opacity: number` - Opacity, from 0 to 1.
- * - `bold: boolean` - Make text bold.
- * - `italic: boolean` - Make text italic.
- * - `nowrap: boolean` - Stops text from wrapping.
- * - `preserveWhitespace: boolean` - Preserves line-breaks and spacing in text.
- * - `textAlign: string` - Align text inside the box.
- *   - `left` (default)
- *   - `center`
- *   - `right`
- * - `position: string` - A direct mapping to `position` CSS property.
- *   - `relative` - Relative positioning.
- *   - `absolute` - Absolute positioning.
- *   - `fixed` - Fixed positioning.
- * - `color: string` - An alias to `textColor`.
- * - `textColor: string` - Sets text color.
- *   - `#ffffff` - Hex format
- *   - `rgba(255, 255, 255, 1)` - RGB format
- *   - `purple` - Applies an atomic `color-<name>` class to the element.
- *     See `styles/color-map.scss`.
- * - `backgroundColor: string` - Sets background color.
- *   - `#ffffff` - Hex format
- *   - `rgba(255, 255, 255, 1)` - RGB format
  */
 export function Box(props: BoxProps & DangerDoNotUse) {
   const { as = 'div', className, children, ...rest } = props;