@dmsi/wedgekit-react 0.0.4

package/src/types.ts

@@ -0,0 +1,149 @@
+import React, { ComponentPropsWithoutRef } from "react";
+
+export type IconSize = 16 | 24 | 32;
+
+export type ValidTags<T = keyof React.ElementType> = Extract<
+  React.ElementType,
+  T | React.JSXElementConstructor<unknown>
+>;
+
+export type AsProps<
+  T extends React.ElementType = React.ElementType,
+  K extends ValidTags<T> = ValidTags<T>,
+> = K extends React.ElementType
+  ? { as?: K } & ComponentPropsWithoutRef<K>
+  : never;
+
+export type Elevation = 0 | 2 | 4 | 16;
+
+export type Sizing =
+  | "layout"
+  | "layout-group"
+  | "container"
+  | "component"
+  | "none";
+export type TextAlign = "left" | "right" | "center";
+export type ItemsAlign = "start" | "center" | "end" | "start-center";
+export type JustifyAlign = "start" | "center" | "end" | "between" | "around";
+
+export type TextColorTokens =
+  | "text-primary-normal"
+  | "text-primary-disabled"
+  | "text-primary-error"
+  | "text-secondary-normal"
+  | "text-secondary-disabled"
+  | "text-secondary-error"
+  | "text-action-normal"
+  | "text-action-hover"
+  | "text-action-active"
+  | "text-action-disabled"
+  | "text-on-action-primary-normal"
+  | "text-on-action-primary-hover"
+  | "text-on-action-primary-active"
+  | "text-on-action-primary-disabled"
+  | "text-action-critical-normal"
+  | "text-action-critical-hover"
+  | "text-action-critical-active"
+  | "text-action-critical-disabled"
+  | "text-critical-normal"
+  | "text-critical-disabled"
+  | "text-critical-error"
+  | "text-success-normal"
+  | "text-warning-normal";
+
+export type BorderColorTokens =
+  | "border-primary-normal"
+  | "border-primary-focus"
+  | "border-primary-error"
+  | "border-primary-normal"
+  | "border-action-normal"
+  | "border-action-hover"
+  | "border-action-active"
+  | "border-action-disabled"
+  | "border-action-critical-normal"
+  | "border-action-critical-hover"
+  | "border-action-critical-active"
+  | "border-action-critical-disabled";
+
+export type IconColorTokens =
+  | "icon-primary-normal"
+  | "icon-primary-disabled"
+  | "icon-success-normal"
+  | "icon-success-disabled"
+  | "icon-warning-normal"
+  | "icon-warning-disabled"
+  | "icon-critical-normal"
+  | "icon-critical-disabled"
+  | "icon-action-primary-normal"
+  | "icon-action-primary-hover"
+  | "icon-action-primary-active"
+  | "icon-action-primary-disabled"
+  | "icon-on-action-primary-normal"
+  | "icon-on-action-primary-hover"
+  | "icon-on-action-primary-active"
+  | "icon-on-action-primary-disabled"
+  | "icon-on-action-secondary-normal"
+  | "icon-on-action-secondary-hover"
+  | "icon-on-action-secondary-active"
+  | "icon-on-action-secondary-disabled"
+  | "icon-action-critical-secondary-normal"
+  | "icon-action-critical-secondary-hover"
+  | "icon-action-critical-secondary-active"
+  | "icon-action-critical-secondary-disabled"
+  | "icon-brand-primary-normal"
+  | "icon-brand-primary-hover"
+  | "icon-brand-primary-active"
+  | "icon-brand-primary-disabled";
+
+export type BackgroundColorTokens =
+  | "background-primary-normal"
+  | "background-grouped-primary-normal"
+  | "background-secondary-normal"
+  | "background-grouped-secondary-normal"
+  | "background-success-normal"
+  | "background-warning-normal"
+  | "background-critical-normal"
+  | "background-action-normal"
+  | "background-action-hover"
+  | "background-action-active"
+  | "background-action-disabled"
+  | "background-action-critical-normal"
+  | "background-action-critical-hover"
+  | "background-action-critical-active"
+  | "background-action-critical-disabled"
+  | "background-action-primary-normal"
+  | "background-action-primary-hover"
+  | "background-action-primary-active"
+  | "background-action-primary-disabled"
+  | "background-action-secondary-normal"
+  | "background-action-secondary-hover"
+  | "background-action-secondary-active"
+  | "background-action-secondary-disabled"
+  | "background-action-critical-primary-normal"
+  | "background-action-critical-primary-hover"
+  | "background-action-critical-primary-active"
+  | "background-action-critical-primary-disabled"
+  | "background-action-critical-secondary-normal"
+  | "background-action-critical-secondary-hover"
+  | "background-action-critical-secondary-active"
+  | "background-action-critical-secondary-disabled";
+
+export type TextAttributes = {
+  color?: TextColorTokens;
+  align?: TextAlign;
+  tall?: boolean;
+  padded?: boolean;
+  addOverflow?: boolean;
+};
+
+export type TypographyProps = {
+  className?: string;
+  children?: React.ReactNode;
+  color?: string;
+};
+
+declare module "react" {
+  interface CSSProperties {
+    [key: `--${string}`]: string | number;
+  }
+}

package/src/utils/formatting.tsx

@@ -0,0 +1,81 @@
+/**
+ * Utility functions for input formatting and value processing
+ */
+
+/**
+ * Generates placeholder text for decimal inputs based on the number of decimal places
+ * @param decimals - Number of decimal places to display
+ * @returns Object with placeholder property or empty object if no decimals
+ * @example
+ * getDecimalPlaceholder(2) // returns { placeholder: "0.00" }
+ * getDecimalPlaceholder(0) // returns {}
+ */
+export function getDecimalPlaceholder(decimals: number | undefined): {
+  placeholder?: string;
+} {
+  if (!decimals || decimals <= 0) {
+    return {};
+  }
+
+  return {
+    placeholder: `0.${"0".repeat(decimals)}`,
+  };
+}
+
+/**
+ * Formats a numeric value to a string with specified decimal places
+ * @param value - The value to format (string or number)
+ * @param decimals - Number of decimal places to format to
+ * @returns Formatted string value
+ * @example
+ * formatDecimalValue("123.456", 2) // returns "123.46"
+ * formatDecimalValue(123, 0) // returns "123"
+ * formatDecimalValue("", 2) // returns ""
+ */
+export function formatDecimalValue(
+  value: string | number | undefined,
+  decimals: number | undefined,
+): string {
+  if (!value || value === "") {
+    return "";
+  }
+
+  const numValue = typeof value === "string" ? parseFloat(value) : value;
+
+  if (isNaN(numValue)) {
+    return "";
+  }
+
+  if (!decimals || decimals <= 0) {
+    return String(Math.round(numValue));
+  }
+
+  return numValue.toFixed(decimals);
+}
+
+/**
+ * Formats a numeric string for currency display by adding thousand separators
+ * @param value - The numeric string to format
+ * @returns Formatted string with thousand separators
+ * @example
+ * formatCurrencyDisplay("1234.56") // returns "1,234.56"
+ * formatCurrencyDisplay("1000") // returns "1,000"
+ * formatCurrencyDisplay("") // returns ""
+ */
+export function formatCurrencyDisplay(value: string): string {
+  if (!value || value === "") {
+    return "";
+  }
+
+  const parts = value.split(".");
+  const integerPart = parts[0];
+  const decimalPart = parts[1];
+
+  // Add thousand separators to the integer part
+  const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+
+  // Combine with decimal part if it exists
+  return decimalPart !== undefined
+    ? `${formattedInteger}.${decimalPart}`
+    : formattedInteger;
+}

package/src/utils.ts

@@ -0,0 +1,23 @@
+export function findDocumentRoot(
+  element: Node | undefined | null,
+): Element | DocumentFragment {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    throw new Error(
+      "findDocumentRoot can only be used in a browser environment.",
+    );
+  }
+  if (!element || !(element instanceof Node)) {
+    return window.document.body;
+  }
+  var currentElement = element;
+  while (currentElement && currentElement.parentNode) {
+    if (currentElement.parentNode === document) {
+      return document.body;
+    } else if (currentElement.parentNode instanceof DocumentFragment) {
+      return currentElement.parentNode;
+    } else {
+      currentElement = currentElement.parentNode;
+    }
+  }
+  return window.document.body;
+}