add FormattedText component

demo/components_list.py

@@ -28,6 +28,14 @@ def components_view() -> list[AnyComponent]:
                 c.Text(text='This is a text component.'),
             ]
         ),
+        c.Div(
+            components=[
+                c.Heading(text='FormattedText', level=2),
+                c.Markdown(text='`FormattedText` can be used to change the style of the text.'),
+                c.FormattedText(text='This is a FormattedText component.', text_color='red', background_color='blue', text_format='italic'),
+            ],
+            class_name='border-top mt-3 pt-1',
+        ),
         c.Div(
             components=[
                 c.Heading(text='Paragraph', level=2),

demo/main.py

@@ -20,6 +20,7 @@ def api_index() -> list[AnyComponent]:
 
 * `Markdown` — that's me :-)
 * `Text`— example [here](/components#text)
+* `FormattedText`— example [here](/components#FormattedText)
 * `Paragraph` — example [here](/components#paragraph)
 * `PageTitle` — you'll see the title in the browser tab change when you navigate through the site
 * `Heading` — example [here](/components#heading)

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

@@ -0,0 +1,27 @@
+import { FC } from 'react'
+
+import { ClassName } from '../hooks/className'
+
+export interface FormattedTextProps {
+  type: 'FormattedText'
+  text: string
+  textFormat?: 'bold' | 'italic' | 'underline' | 'strikethrough'
+  color?: string
+  backgroundColor?: string
+  className?: ClassName
+}
+
+export const FormattedTextComp: FC<FormattedTextProps> = (props) => {
+  const { text, textFormat, color, backgroundColor } = props
+
+  const style = {
+    backgroundColor,
+    color,
+    fontWeight: textFormat === 'bold' ? 'bold' : 'normal',
+    fontStyle: textFormat === 'italic' ? 'italic' : 'normal',
+    textDecoration:
+      textFormat === 'underline' ? 'underline' : textFormat === 'strikethrough' ? 'line-through' : 'none',
+  }
+
+  return <span style={style}>{text}</span>
+}

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

@@ -40,6 +40,7 @@ import { JsonComp, JsonProps } from './Json'
 import { ServerLoadComp, ServerLoadProps } from './ServerLoad'
 import { ImageComp, ImageProps } from './image'
 import { IframeComp, IframeProps } from './Iframe'
+import { FormattedTextComp, FormattedTextProps } from './FormattedText'
 
 export type {
   TextProps,
@@ -67,6 +68,7 @@ export type {
   ServerLoadProps,
   ImageProps,
   IframeProps,
+  FormattedTextProps,
 }
 
 // TODO some better way to export components
@@ -97,6 +99,7 @@ export type FastProps =
   | ServerLoadProps
   | ImageProps
   | IframeProps
+  | FormattedTextProps
 
 export type FastClassNameProps = Exclude<FastProps, TextProps | AllDisplayProps | ServerLoadProps | PageTitleProps>
 
@@ -179,6 +182,8 @@ export const AnyComp: FC<FastProps> = (props) => {
         return <ImageComp {...props} />
       case 'Iframe':
         return <IframeComp {...props} />
+      case 'FormattedText':
+        return <FormattedTextComp {...props} />
       default:
         unreachable('Unexpected component type', type, props)
         return <DisplayError title="Invalid Server Response" description={`Unknown component type: "${type}"`} />

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

@@ -56,7 +56,7 @@ class Text(pydantic.BaseModel, extra='forbid'):
 
 
 class Paragraph(pydantic.BaseModel, extra='forbid'):
-    text: str
+    text: '_t.List[_t.Union[str, FormattedText, Link]]'
     type: _t.Literal['Paragraph'] = 'Paragraph'
 
 
@@ -114,7 +114,7 @@ class Code(pydantic.BaseModel, extra='forbid'):
 
 
 class Button(pydantic.BaseModel, extra='forbid'):
-    text: str
+    text: '_t.List[_t.Union[str, FormattedText, Link]]'
     on_click: _t.Union[events.AnyEvent, None] = pydantic.Field(default=None, serialization_alias='onClick')
     html_type: _t.Union[_t.Literal['button', 'submit', 'reset'], None] = pydantic.Field(
         default=None, serialization_alias='htmlType'
@@ -202,6 +202,17 @@ class Iframe(pydantic.BaseModel, extra='forbid'):
     type: _t.Literal['Iframe'] = 'Iframe'
 
 
+class FormattedText(pydantic.BaseModel, extra='forbid'):
+    text: str
+    text_format: _t.Union[_t.Literal['bold', 'italic', 'underline', 'strikethrough'], None] = pydantic.Field(
+        None, serialization_alias='textFormat'
+    )
+    # TODO, use pydantic-extra-types Color?
+    text_color: _t.Union[str, None] = pydantic.Field(None, serialization_alias='color')
+    background_color: _t.Union[str, None] = pydantic.Field(None, serialization_alias='backgroundColor')
+    type: _t.Literal['FormattedText'] = 'FormattedText'
+
+
 AnyComponent = _te.Annotated[
     _t.Union[
         Text,