@descope/web-components-ui

web-components-ui

Architecture

page-editor-components

screen-renderer-service

web-components-ui

Components

• DescopeUI
• Components Library (Vaadain Components)

Build

Webpack

• UMD - Hosted, consumed by client in runtime

Rollup

• ESM - Consumed by console-app in build
• CJS - Consumed by screen-renderer-service in build

CreateProxy

Wraps the web component with a ProxyElement.

Discovery & Lazy Loading

Hosted Service

Style API

• Cover gaps between style API of our components and Vaadain’s style API

Mixins

DraggableMixin

Versioning

TBD

font

color bgColor

size

-- Theme colors Theme fonts

Button

- Variant
- Text Color
- Text Size
- Font Family
- BgColor
- Radius

Autocomplete

• Variant: V1: Default

  • Button
  • Input
    • Variant
    • Text Color
    • Border
    • Radius
  • List
    • Variant
    • Border
    • BgColor
    • Radius
  • Chip
    • Variant
    • Text Color
    • Bg Color
    • Radius

• Variant: V2: Outline

• Variant: V3: Contained

spacing1 spacing2 font1 font2 color1 color2 color3 color4 color5 . . .

Primary Color Secondary Color Info Success Error Warning

prop

THEME: Global Theme Prop: PrimaryColor Component Variant Prop: PrimaryColor / GlobalThemeProp / Custom

{
    colors: {
        PrimaryColor: red;
        SecondaryColor: blue;
        Success: green;
    },
    components: {
        Button: {
            success: {
                color
                radius
                fontFamily
            }
            colors: {
                BgColor: yellow;
                TextColor
                Radius
            },
            sizes: {
                small: '',
            }
            fonts: {
                FontSize
            },
        }
        Phone: {
            colors: {
                TextColor: red;
            }

        }
    }
}

COMP: <descope-web-component variant="contained" overrides=[PrimaryColor: red, Success: blue]>

PrimaryColor => BgColor

WCProp BgColor WCProp -

outline: { borderColor: theme[color] || color // red color: theme[variant] * 0.2 }

contained: { bgColor: theme[variant] color: theme[variant] \* 0.8 } .contained.success { bgColor: theme[PrimayColor] color: theme[variant] \* 0.8 }

<descope-web-component variant="contained" color, radius, fontFamily>