@baseline-ui/utils - npm Package Compare versions

Comparing version 0.1.3 to 0.2.0

dist/index.d.ts

@@ -48,21 +48,61 @@ import React from 'react';
 declare function getHTMLElement(element: string | HTMLElement | React.RefObject<HTMLElement> | null | undefined, ownerDocument: Document): HTMLElement | null | undefined;
-
+interface FontProperties {
+    fontSize: number;
+    fontFamily?: string;
+    fontWeight?: string;
+    fontStyle?: string;
+}
 /**
- * Clamps a number between a min and max value. If the number is less than the
- * min value, the min value is returned. If the number is greater than the max
- * value, the max value is returned. Otherwise, the number is returned.
+ * Returns the width and height of the text with the given font properties.
  *
- * Example:
+ * ```ts
+ * const { width, height } = getTextDimensions({
+ *   text: "Hello world!",
+ *   fontSize: 16,
+ *   fontFamily: "Arial",
+ *   fontWeight: "normal",
+ *   fontStyle: "normal",
+ * });
+ * ```
  *
- * ```js
- * clamp(5, 0, 10); // 5
- * clamp(15, 0, 10); // 10
- * clamp(-5, 0, 10); // 0
+ * @param text - The text to measure.
+ * @param fontSize - The font size in pixels.
+ * @param fontFamily - The font family. Defaults to Arial.
+ * @param fontWeight - The font weight. Defaults to normal.
+ * @param fontStyle - The font style. Defaults to normal.
+ */
+declare function getTextDimensions({ text, fontSize, fontFamily, fontWeight, fontStyle, }: {
+    text: string;
+} & FontProperties): {
+    width: number;
+    height: number;
+};
+/**
+ * Returns the font size that will fit the given text within the given width.
+ * The font size is calculated by starting with the initial font size and
+ * decreasing it until the text fits within the desired width.
+ *
+ * ```ts
+ * const fontSize = calculateFontSizeToFitWidth({
+ *   text: "Hello world!",
+ *   maxWidth: 100,
+ *   initialFontSize: 16,
+ *   fontFamily: "Arial",
+ *   fontWeight: "normal",
+ *   fontStyle: "normal",
+ * });
  * ```
  *
- * @param num The number to clamp
- * @param min The minimum value to clamp to
- * @param max The maximum value to clamp to
+ * @param text - The text to measure.
+ * @param maxWidth - The maximum width in pixels.
+ * @param initialFontSize - The initial font size in pixels. Defaults to 50.
+ * @param fontFamily - The font family. Defaults to Arial.
+ * @param fontWeight - The font weight. Defaults to normal.
+ * @param fontStyle - The font style. Defaults to normal.
  */
-declare const clamp: (num: number, min: number, max: number) => number;
+declare function calculateFontSizeToFitWidth({ text, maxWidth, initialFontSize, fontFamily, fontWeight, fontStyle, }: {
+    text: string;
+    maxWidth: number;
+    initialFontSize: number;
+} & Omit<FontProperties, "fontSize">): number;
 
@@ -86,2 +126,2 @@ /**
 
-export { clamp, classNames, cleanKeyFromGlobImport, getHTMLElement, getSvgPathFromStroke, invariant };
+export { calculateFontSizeToFitWidth, classNames, cleanKeyFromGlobImport, getHTMLElement, getSvgPathFromStroke, getTextDimensions, invariant };

dist/index.js

@@ -1,1 +0,1 @@
-"use strict";var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var a=(t,n)=>{for(var e in n)s(t,e,{get:n[e],enumerable:!0})},p=(t,n,e,r)=>{if(n&&typeof n=="object"||typeof n=="function")for(let o of l(n))!m.call(t,o)&&o!==e&&s(t,o,{get:()=>n[o],enumerable:!(r=u(n,o))||r.enumerable});return t};var g=t=>p(s({},"__esModule",{value:!0}),t);var j={};a(j,{clamp:()=>b,classNames:()=>d,cleanKeyFromGlobImport:()=>R,getHTMLElement:()=>y,getSvgPathFromStroke:()=>M,invariant:()=>x});module.exports=g(j);function x(t,n){if(!t)throw new Error(n||"Invariant failed")}function d(...t){let n=t.filter(Boolean),e=[];for(let r of n)if(typeof r=="object"){let o=Object.keys(r);for(let i of o)r[i]&&e.push(i)}else typeof r=="string"&&e.push(r);return e.join(" ")}function y(t,n){if(!t)return null;if(typeof t=="string")return n.querySelector(t);if(t instanceof HTMLElement)return t;if("current"in t)return t.current}var b=(t,n,e)=>Math.min(Math.max(t,n),e);function h(t,n,e,r){return[(t+e)/2,(n+r)/2]}function M(t){if(!t.length)return"";let n=["M",...t[0],"Q"];for(let e=0;e<t.length;e++){let[r,o]=t[e],[i,c]=t[(e+1)%t.length],f=h(r,o,i,c);n=[...n,r,o,...f]}return n.push("Z"),n.join(" ")}function E(t){return t.split("/").pop()?.split(".").shift()}function R(t){let n={};for(let e of Object.keys(t)){let r=E(e)??"";n[r]=t[e]}return n}0&&(module.exports={clamp,classNames,cleanKeyFromGlobImport,getHTMLElement,getSvgPathFromStroke,invariant});
+"use strict";var u=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var p=(t,n)=>{for(var e in n)u(t,e,{get:n[e],enumerable:!0})},d=(t,n,e,r)=>{if(n&&typeof n=="object"||typeof n=="function")for(let o of m(n))!g.call(t,o)&&o!==e&&u(t,o,{get:()=>n[o],enumerable:!(r=l(n,o))||r.enumerable});return t};var x=t=>d(u({},"__esModule",{value:!0}),t);var S={};p(S,{calculateFontSizeToFitWidth:()=>w,classNames:()=>y,cleanKeyFromGlobImport:()=>F,getHTMLElement:()=>b,getSvgPathFromStroke:()=>M,getTextDimensions:()=>f,invariant:()=>h});module.exports=x(S);function h(t,n){if(!t)throw new Error(n||"Invariant failed")}function y(...t){let n=t.filter(Boolean),e=[];for(let r of n)if(typeof r=="object"){let o=Object.keys(r);for(let s of o)r[s]&&e.push(s)}else typeof r=="string"&&e.push(r);return e.join(" ")}function b(t,n){if(!t)return null;if(typeof t=="string")return n.querySelector(t);if(t instanceof HTMLElement)return t;if("current"in t)return t.current}function f({text:t,fontSize:n,fontFamily:e="Arial",fontWeight:r="normal",fontStyle:o="normal"}){let c=document.createElement("canvas").getContext("2d");if(!c)return{width:0,height:0};c.font=`${o} ${r} ${n}px ${e}`;let i=c.measureText(t);return{width:i.width,height:i.actualBoundingBoxAscent+i.actualBoundingBoxDescent}}function w({text:t,maxWidth:n,initialFontSize:e=50,fontFamily:r="Arial",fontWeight:o="normal",fontStyle:s="normal"}){let{width:c}=f({text:t,fontSize:e,fontFamily:r,fontWeight:o,fontStyle:s}),i=e,a=c;for(;a>n;)i-=.5,a=f({text:t,fontSize:i,fontFamily:r,fontWeight:o,fontStyle:s}).width;return Math.max(i,1)}function E(t,n,e,r){return[(t+e)/2,(n+r)/2]}function M(t){if(!t.length)return"";let n=["M",...t[0],"Q"];for(let e=0;e<t.length;e++){let[r,o]=t[e],[s,c]=t[(e+1)%t.length],i=E(r,o,s,c);n=[...n,r,o,...i]}return n.push("Z"),n.join(" ")}function T(t){return t.split("/").pop()?.split(".").shift()}function F(t){let n={};for(let e of Object.keys(t)){let r=T(e)??"";n[r]=t[e]}return n}0&&(module.exports={calculateFontSizeToFitWidth,classNames,cleanKeyFromGlobImport,getHTMLElement,getSvgPathFromStroke,getTextDimensions,invariant});

package.json

 {
   "name": "@baseline-ui/utils",
-  "version": "0.1.3",
-  "description": "",
+  "version": "0.2.0",
+  "description": "A collection of utility functions for Baseline UI",
   "main": "dist/index.js",
@@ -6,0 +6,0 @@ "module": "dist/index.mjs",

No alert changes

Improved metrics

Total package byte prevSize

13005

increased by45.94%

Lines of code

134

increased by52.27%

No dependency changes