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,