+ grid & add customizable grid to Toast

src/UITable/elements/Toast.ts

@@ -1,5 +1,6 @@
 import { getColor, getDynamicColor } from '../../colors';
 import { isNumber } from '../../common';
+import { getGrid, Grid } from '../grid';
 import Div, { NonCascadingDiv } from './Div';
 import Gradient from './Gradient';
 import HSpace from './HSpace';
@@ -9,13 +10,25 @@ import presetStyles, { FlavorKey } from './presetStyles';
 import Span from './Span';
 import { TapProps } from './types';
 
+type ToastGrid = Grid<
+  'metadata' | 'metadataIcon' | 'leftIcon' | 'leftIconSpacing'
+>;
+
+const toastGrid: ToastGrid = getGrid({
+  metadata: '15%',
+  metadataIcon: '8%',
+  leftIcon: '10%',
+  leftIconSpacing: '3%',
+});
+
 export type ToastProps = {
   title: string;
   icon: IconOrSFKey;
   flavor?: FlavorKey;
   metadata?: number | string;
   showCloseIcon?: boolean;
   description?: string;
+  grid?: ToastGrid;
 } & TapProps;
 
 /** Flavors that shouldn't be used for the left icon's accent color, as they
@@ -29,6 +42,7 @@ export default ({
   flavor = 'secondary',
   metadata,
   description,
+  grid = toastGrid,
   ...tapProps
 }: ToastProps) => {
   const accentColor = presetStyles().flavors[flavor].bgColor;
@@ -38,19 +52,20 @@ export default ({
   const mainRowRightIcons = Span(
     [
       (metadata || isNumber(metadata)) &&
-        P(String(metadata), { align: 'center', width: '15%' }),
-      showCloseIcon && Icon('x_in_circle', { width: '8%' }),
+        P(String(metadata), { align: 'center', width: grid.metadata }),
+      showCloseIcon && Icon('x_in_circle', { width: grid.metadataIcon }),
     ],
     { font: () => Font.footnote(), align: 'center', isFaded: true }
   );
 
   const mainRow = Div([
     Icon(icon, {
-      width: '10%',
+      width: grid.leftIcon,
       ...(!BANNED_ICON_COLOR_FLAVORS.includes(flavor) && {
         color: accentColor,
       }),
     }),
+    HSpace(grid.leftIconSpacing),
     P(title),
     mainRowRightIcons,
   ]);

src/UITable/grid.ts

@@ -0,0 +1,61 @@
+import { sum } from '../array';
+import { objectFromEntries } from '../common';
+import { isIn } from '../flow';
+import { objectEntries } from '../object';
+import { Percent } from './Row';
+import { parsePercent } from './elements';
+
+type GridKey = string | number | symbol;
+
+export type Grid<K extends GridKey> = Record<K, Percent> & GridHelpers<K>;
+
+//
+
+const sumPcts = (...percents: Percent[]): Percent =>
+  `${sum(percents.map(pct => parsePercent(pct)))}%`;
+
+const gridToNumbers = <Key extends GridKey>(
+  gridWithoutHelpers: Record<Key, Percent>
+): Record<Key, number> =>
+  objectFromEntries(
+    objectEntries(gridWithoutHelpers).map(([key, pct]) => [
+      key,
+      parsePercent(pct),
+    ])
+  );
+
+const calculatePcts = <Key extends GridKey>(
+  calc: (gridNumbers: Record<Key, number>) => number,
+  gridWithoutHelpers: Record<Key, Percent>
+): Percent => {
+  const calcNumber = calc(gridToNumbers(gridWithoutHelpers));
+  return `${calcNumber}%`;
+};
+
+type GridHelpers<Key extends GridKey> = {
+  sum: (...keys: Key[]) => Percent;
+  calc: (calcFn: (keyNumValues: Record<Key, number>) => number) => Percent;
+  extend: <T extends GridKey>(
+    extendedGrid: Record<T, Percent>
+  ) => Record<T | Key, Percent> & GridHelpers<T | Key>;
+};
+
+//
+
+export const getGrid = <T extends Record<GridKey, Percent>>(
+  grid: T
+): T & GridHelpers<keyof T> => {
+  const gridHelpers: GridHelpers<keyof T> = {
+    sum: (...keys: (keyof T)[]) => sumPcts(...keys.map(key => grid[key])),
+    calc: calcFn => calculatePcts<keyof T>(calcFn, grid),
+    extend: extendedGrid => getGrid({ ...grid, ...extendedGrid }),
+  };
+
+  const reservedKeys = Object.keys(gridHelpers);
+  const gridKeys = Object.keys(grid);
+  if (reservedKeys.some(reservedKey => isIn(reservedKey, gridKeys))) {
+    throw new Error('Using reserved keys in grid');
+  }
+
+  return { ...grid, ...gridHelpers };
+};

src/UITable/index.ts

@@ -86,3 +86,4 @@ export {
 } from './elements';
 export { default as getTable } from './getTable';
 export * from './types';
+export * from './grid';