This package contains the TypeScript types that specify the platform-agnostic API surface for Fluent Blocks.
Concepts
When it comes to props, all components* must have an eponymous prop which parent components can use to validate what they’re asked to render. For example, in the React package, the Chart component has a required chart prop, and since it's a kind of media it also has a required label prop.
*: There are exceptions, but we’ll revisit them.
Defining platform-specific schemas
This package is intended to formalize the ontology that should remain true for all Fluent Blocks packages. Individual packages can extend these schemas to support situations unique to a particular platform, however the original types as specified here must always be compatible.
import { ReactElement } from 'react'
import { TextProps as NaturalTextProps } from '@fluentui/blocks-schemas'
type ReactTextVariant = 'liquid' | 'animated'
// Here we extend the 'variant' prop to add aditional variants supported in this particular package:
export interface TextProps extends Omit<NaturalTextProps, 'variant'> {
variant: NaturalTextProps['variant'] | ReactTextVariant
}
export const Text = (props: TextProps) => <span>{textMagicHere}</span>
// This particular package needs to work with additional derived types, which is also fine:
export type TextElement = ReactElement<TextProps, typeof Text>
export type TextPropsOrElement = TextProps | TextElement