Add currency to DisplayMode (#345)

Author: Viicos

src/npm-fastui/src/components/display.tsx

@@ -135,6 +135,8 @@ export const DisplayPrimitive: FC<DisplayPrimitiveProps> = (props) => {
     case 'json':
     case 'inline_code':
       return <DisplayInlineCode value={value} />
+    case 'currency':
+      return <DisplayCurrency value={value} />
     default:
       unreachable('Unexpected display type', mode, props)
   }
@@ -219,6 +221,18 @@ const DisplayInlineCode: FC<{ value: JSONPrimitive }> = ({ value }) => {
   }
 }
 
+const DisplayCurrency: FC<{ value: JSONPrimitive }> = ({ value }) => {
+  if (typeof value === 'boolean') {
+    return value.toString()
+  } else if (value === null) {
+    return <DisplayNull />
+  } else {
+    return Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
+      typeof value === 'string' ? parseFloat(value) : value,
+    )
+  }
+}
+
 export type DataModel = Record<string, JsonData>
 
 export interface DisplayLookupProps extends Omit<Display, 'type' | 'value'> {

src/npm-fastui/src/models.d.ts

@@ -71,6 +71,7 @@ export type DisplayMode =
   | 'markdown'
   | 'json'
   | 'inline_code'
+  | 'currency'
 export type SelectOptions = SelectOption[] | SelectGroup[]
 
 /**

src/python-fastui/fastui/components/display.py

@@ -27,6 +27,7 @@ class DisplayMode(str, enum.Enum):
     markdown = 'markdown'
     json = 'json'
     inline_code = 'inline_code'
+    currency = 'currency'
 
 
 class DisplayBase(BaseModel, ABC, defer_build=True):