Layout components

layout.ts

type int = number
type double = number

interface Margin {
    margin?: double,
    marginStart?: double,
    marginEnd?: double,
    marginTop?: double,
    marginBottom?: double,
    marginHorizontal?: double,
    marginVertical?: double,
}

interface Padding {
    padding?: double,
    paddingStart?: double,
    paddingEnd?: double,
    paddingTop?: double,
    paddingBottom?: double,
    paddingHorizontal?: double,
    paddingVertical?: double,
}

type AdaptiveSize = 'expand' | 'fitContent' | double

interface Size {
    width?: AdaptiveSize, // default: 'fitContent'
    height?: AdaptiveSize, // default: 'fitContent'
    minWidth?: double,
    minHeight?: double,
    maxWidth?: double,
    maxHeight?: double,
    clipped?: boolean, // default: false
}

interface Action {

}

interface Component {

}

interface Border {
    borderWidth?: double, // default: 0
    borderDashLength?: double, // default: 1
    borderDashSpacing?: double, // default: 0
    cornerRadius?: double, // default: 0
    borderColor?: string, // default: #000
}

interface Shadow {
    x?: double, // default: 0
    y?: double, // default: 0
    blur?: double, // default: 0
    color?: string, // default: black
}

interface Box extends Margin, Padding, Size, Border {
    backgroundColor?: string,
    shadow?: Shadow[],
    children?: Component[],
}

interface Container extends Box {
    crossAxisAlignment?: 'start' | 'end' | 'center', // default: start
    mainAxisAlignment?: 'start' | 'end' | 'center' | 'spaceBetween' | 'spaceAround' | 'spaceEvenly', // default: start
}

interface WithAccessibility {
    accessibility?: {
        label?: string,
        isHeader?: boolean,
        // crescer essa lista se julgar necessário, alinhar entre as plataformas
    }
}

/**
 * Display its content in the horizontal axis (x).
 */
export interface Row extends Container {

}

/**
 * Display its content in the vertical axis (y).
 */
export interface Column extends Container {

}

/**
 * A version of the row component that renders only the content that is visible in the viewport.
 * This is important to guarantee performance on long lists and will be generaly used to wrap a 
 * ForEach component.
 * Currently not available in iOS 13, renders a simple row instead.
 */
export interface LazyRow extends Container {

}

/**
 * Same as LazyRow, but for columns.
 * Currently not available in iOS 13, renders a simple column instead.
 */
export interface LazyColumn extends Container {

}

/**
 * Simmilar to Row, but the content wraps to the next row, forming a Grid layout.
 * Currently not available in iOS 13. There's no fallback, a warning is shown.
 */
export interface FlowRow extends Box {

}

/**
 * Simmilar Column, but the content wraps to the next column, forming a Grid layout.
 * Currently not available in iOS 13. There's no fallback, a warning is shown.
 */
export interface FlowColumn extends Box {

}

/**
 * Display its content in the depth axis (z).
 * Used to create floating elements in the screen.
 * Use the component "Positioned" inside a Stack to set a specific position (x, y).
 */
export interface Stack extends Box {
    
}

/**
 * Not an actual UI component. This is used to control the event of initialization of the
 * children. Once the children of a Lifecycle is rendered, the event `onInit` is triggered.
 */
export interface Lifecycle {
    onInit?: Action[],
    children: Component[],
}

/**
 * Makes its content respond to touch events.
 */
export interface Touchable extends WithAccessibility {
    onPress: Action[],
    children: Component[],
}

interface BaseImage extends Size, WithAccessibility {
    scale?: 'fillBounds' | 'fillHeight' | 'fillWidth' | 'center' // default: center
}

/**
 * An image that is loaded locally.
 */
export interface LocalImage extends BaseImage {
    id?: string, // id specified in the ImageProvider provided to Nimbus
}

/**
 * An image that is loaded from a URL.
 */
export interface RemoteImage extends BaseImage {
    url: string,
    placeholder?: string, // id of the local image
}

/**
 * Must be a child of Stack. Used to set the position (x, y) of the element.
 */
export interface Positioned extends Box {
    alignment?: 'topStart' | 'topEnd' | 'bottomStart' | 'bottomEnd' | 'topCenter' | 'bottomCenter' | 'centerStart' | 'centerEnd' | 'center', // default: topStart
    x?: double, // sempre da esquerda para a direita; default: 0.
    y?: double, // sempre de cima para baixo; default: 0.
    children: Component[],
}

/**
 * Enables scrolling for its content.
 * Attention: on Android, it's impossible to have nested scroll views. This is a limitation of Compose.
 */
export interface ScrollView {
    direction?: 'vertical' | 'horizontal' | 'both', // default: 'vertical'
    scrollIndicator?: boolean, //default: true
    children: Component[],
}

/**
 * Sets the navigation bar. Must be the root element if used.
 */
export interface Screen {
    ignoreSafeArea?: ('top' | 'bottom' | 'trailing' | 'leading')[], // default is null/undefined/[], which means, the safe area won't be ignored.
    title?: String,
    showBackButton?: boolean, // default: true
    safeAreaTopBackground?: string, // experimental: color of the top safe area
    statusBarColorScheme?: 'light' | 'dark' | 'unspecified', // experimental: color scheme of the status bar. "Light" for dark text, "dark" for light text, "unspecified" to let the system decide
    children: Component[],
}

/**
 * Writes some text.
 */
export interface Text extends WithAccessibility {
    text: string,
    size?: double, // default is 12.0
    weight?: 'thin' | 'extraLight' | 'light' | 'normal' | 'medium' | 'semiBold' | 'bold' | 'extraBold' | 'black', // default is normal
    color?: string, // default is "#000",
    /**
     * On iOS, the text can be compressed to a single line when inside a Column or Row that tries to be as small as
     * possible given min or max size constraints. Setting this property to true prevents this from happening. This has
     * no effect on other platforms.
     *
     * @default false
     */
    iosAdaptiveSize?: boolean,
    /**
     * Sets the alignment for multi lined texts. Default is "start".
     */
    alignment?: 'start' | 'center' | 'end',
}