@fugood/bricks-project 2.22.0-beta.27 → 2.22.0-beta.28

package/types/bricks/Lottie.ts

@@ -0,0 +1,156 @@
+import type { SwitchCondInnerStateCurrentCanvas, SwitchCondData, SwitchDef } from '../switch'
+import type { Data, DataLink } from '../data'
+import type { Animation, AnimationBasicEvents } from '../animation'
+import type {
+  Brick,
+  EventAction,
+  EventActionForItem,
+  ActionWithDataParams,
+  ActionWithParams,
+  Action,
+  EventProperty,
+} from '../common'
+import type { BrickBasicProperty, BrickBasicEvents, BrickBasicEventsForItem } from '../brick-base'
+
+/* Play animation */
+export type BrickLottieActionPlay = ActionWithParams & {
+  __actionName: 'BRICK_LOTTIE_PLAY'
+  params?: Array<
+    | {
+        input: 'startFrame'
+        value?: number | DataLink | EventProperty
+        mapping?: string
+      }
+    | {
+        input: 'endFrame'
+        value?: number | DataLink | EventProperty
+        mapping?: string
+      }
+  >
+}
+
+/* Pause animation */
+export type BrickLottieActionPause = Action & {
+  __actionName: 'BRICK_LOTTIE_PAUSE'
+}
+
+/* Resume animation */
+export type BrickLottieActionResume = Action & {
+  __actionName: 'BRICK_LOTTIE_RESUME'
+}
+
+/* Stop animation */
+export type BrickLottieActionStop = Action & {
+  __actionName: 'BRICK_LOTTIE_STOP'
+}
+
+/* Reset animation */
+export type BrickLottieActionReset = Action & {
+  __actionName: 'BRICK_LOTTIE_RESET'
+}
+
+interface BrickLottieDef {
+  /*
+Default property:
+{
+  "loop": true,
+  "autoPlay": true,
+  "resizeMode": "contain",
+  "renderMode": "auto"
+}
+  */
+  property?: BrickBasicProperty & {
+    /* The animation json config content from uri */
+    uri?: string | DataLink
+    /* The checksum of `uri` */
+    md5?: string | DataLink
+    /* The animation json config content（The `uri` will be ignored if `source` is defined) */
+    source?: {} | DataLink
+    /* The speed the animation will progress.  This only affects the imperative API.  Sending a negative value will reverse the animation. */
+    speed?: number | DataLink
+    /* A boolean flag indicating whether  or not the animation should loop. */
+    loop?: boolean | DataLink
+    /* A boolean flag indicating whether or not the animation  should start automatically when mounted.  This only affects the imperative API. */
+    autoPlay?: boolean | DataLink
+    /* The animation resize mode */
+    resizeMode?: 'cover' | 'contain' | 'center' | DataLink
+    /* A flag to set whether or not to render with hardware or software acceleration (Not supported for iOS) */
+    renderMode?: 'auto' | 'hardware' | 'software' | DataLink
+    /* Replace color (as hex string) by keypath */
+    colorFilters?:
+      | Array<
+          | DataLink
+          | {
+              keypath?: string | DataLink
+              color?: string | DataLink
+            }
+        >
+      | DataLink
+    /* Replace color (as hex string) by find text.  Use text filters will disable glyphs text render / force software render mode,  This means that a specific font needs to be loaded. */
+    textFilters?:
+      | Array<
+          | DataLink
+          | {
+              find?: string | DataLink
+              replace?: string | DataLink
+            }
+        >
+      | DataLink
+  }
+  events?: BrickBasicEvents & {
+    /* Event of the brick press */
+    onPress?: Array<EventAction>
+    /* Event of the brick press in */
+    onPressIn?: Array<EventAction>
+    /* Event of the brick press out */
+    onPressOut?: Array<EventAction>
+    /* Event of the brick focus (Use TV Device with controller) */
+    onFocus?: Array<EventAction>
+    /* Event of the brick blur (Use TV Device with controller) */
+    onBlur?: Array<EventAction>
+    /* Event of the animation finished */
+    onAnimationFinish?: Array<EventAction>
+    /* Event of the uri on load failed */
+    onAnimationFailure?: Array<EventAction>
+    /* Event of the animation on loop */
+    onAnimationLoop?: Array<EventAction>
+  }
+  outlets?: {
+    /* Brick is pressing */
+    brickPressing?: () => Data
+    /* Brick is focusing (Use TV Device with controller) */
+    brickFocusing?: () => Data
+  }
+  animation?: AnimationBasicEvents & {
+    onPress?: Animation
+    onPressIn?: Animation
+    onPressOut?: Animation
+    onFocus?: Animation
+    onBlur?: Animation
+    onAnimationFinish?: Animation
+    onAnimationFailure?: Animation
+    onAnimationLoop?: Animation
+  }
+}
+
+/* Lottie Adobe After Effects animations brick ([Tutorial](https://intercom.help/bricks-dag-inc/articles/5378583-lottie)) */
+export type BrickLottie = Brick &
+  BrickLottieDef & {
+    templateKey: 'BRICK_LOTTIE'
+    switches: Array<
+      SwitchDef &
+        BrickLottieDef & {
+          conds?: Array<{
+            method: '==' | '!=' | '>' | '<' | '>=' | '<='
+            cond:
+              | SwitchCondInnerStateCurrentCanvas
+              | SwitchCondData
+              | {
+                  __typename: 'SwitchCondInnerStateOutlet'
+                  outlet: 'brickPressing' | 'brickFocusing'
+                  value: any
+                }
+          }>
+        }
+    >
+  }

package/types/bricks/Qrcode.ts

@@ -0,0 +1,109 @@
+import type { SwitchCondInnerStateCurrentCanvas, SwitchCondData, SwitchDef } from '../switch'
+import type { Data, DataLink } from '../data'
+import type { Animation, AnimationBasicEvents } from '../animation'
+import type {
+  Brick,
+  EventAction,
+  EventActionForItem,
+  ActionWithDataParams,
+  ActionWithParams,
+  Action,
+  EventProperty,
+} from '../common'
+import type { BrickBasicProperty, BrickBasicEvents, BrickBasicEventsForItem } from '../brick-base'
+
+interface BrickQrcodeDef {
+  /*
+Default property:
+{
+  "value": "",
+  "positiveColor": "#1e252a",
+  "negativeColor": "transparent",
+  "padding": 0,
+  "linearGradientEnabled": false,
+  "linearGradientStart": "black",
+  "linearGradientEnd": "black",
+  "linearGradientDirection": [
+    "0%",
+    "0%",
+    "100%",
+    "100%"
+  ],
+  "logoSize": 20,
+  "logoBackgroundColor": "transparent"
+}
+  */
+  property?: BrickBasicProperty & {
+    /* The QRCode content */
+    value?: string | DataLink
+    /* The foreground color of QRCode */
+    positiveColor?: string | DataLink
+    /* The background color of QRCode */
+    negativeColor?: string | DataLink
+    /* Quiet zone around the qr */
+    padding?: number | DataLink
+    /* Enables or disables linear gradient */
+    linearGradientEnabled?: boolean | DataLink
+    /* Linear gradient start color */
+    linearGradientStart?: string | DataLink
+    /* Linear gradient end color */
+    linearGradientEnd?: string | DataLink
+    /* Linear gradient direction ('0%', '0%', '100%', '100%') */
+    linearGradientDirection?: Array<string | DataLink> | DataLink
+    /* Logo image source */
+    logoPath?: string | DataLink
+    /* The checksum of logo file */
+    md5?: string | DataLink
+    /* Logo image size (% of QRCode) */
+    logoSize?: number | DataLink
+    /* The logo gets a filled quadratic background with this color. */
+    logoBackgroundColor?: string | DataLink
+  }
+  events?: BrickBasicEvents & {
+    /* Event of the brick press */
+    onPress?: Array<EventAction>
+    /* Event of the brick press in */
+    onPressIn?: Array<EventAction>
+    /* Event of the brick press out */
+    onPressOut?: Array<EventAction>
+    /* Event of the brick focus (Use TV Device with controller) */
+    onFocus?: Array<EventAction>
+    /* Event of the brick blur (Use TV Device with controller) */
+    onBlur?: Array<EventAction>
+  }
+  outlets?: {
+    /* Brick is pressing */
+    brickPressing?: () => Data
+    /* Brick is focusing (Use TV Device with controller) */
+    brickFocusing?: () => Data
+  }
+  animation?: AnimationBasicEvents & {
+    onPress?: Animation
+    onPressIn?: Animation
+    onPressOut?: Animation
+    onFocus?: Animation
+    onBlur?: Animation
+  }
+}
+
+/* QRCode brick ([Tutorial](https://intercom.help/bricks-dag-inc/articles/5378579-qr-code)) */
+export type BrickQrcode = Brick &
+  BrickQrcodeDef & {
+    templateKey: 'BRICK_QRCODE'
+    switches: Array<
+      SwitchDef &
+        BrickQrcodeDef & {
+          conds?: Array<{
+            method: '==' | '!=' | '>' | '<' | '>=' | '<='
+            cond:
+              | SwitchCondInnerStateCurrentCanvas
+              | SwitchCondData
+              | {
+                  __typename: 'SwitchCondInnerStateOutlet'
+                  outlet: 'brickPressing' | 'brickFocusing'
+                  value: any
+                }
+          }>
+        }
+    >
+  }

package/types/bricks/Rect.ts

@@ -0,0 +1,107 @@
+import type { SwitchCondInnerStateCurrentCanvas, SwitchCondData, SwitchDef } from '../switch'
+import type { Data, DataLink } from '../data'
+import type { Animation, AnimationBasicEvents } from '../animation'
+import type {
+  Brick,
+  EventAction,
+  EventActionForItem,
+  ActionWithDataParams,
+  ActionWithParams,
+  Action,
+  EventProperty,
+} from '../common'
+import type { BrickBasicProperty, BrickBasicEvents, BrickBasicEventsForItem } from '../brick-base'
+
+interface BrickRectDef {
+  /*
+Default property:
+{
+  "linearGradientEnabled": false,
+  "linearGradientColors": [
+    "#000000",
+    "#FFFFFF"
+  ],
+  "linearGradientStart": {
+    "x": 0,
+    "y": 0
+  },
+  "linearGradientEnd": {
+    "x": 1,
+    "y": 1
+  },
+  "linearGradientLocations": [
+    0,
+    1
+  ]
+}
+  */
+  property?: BrickBasicProperty & {
+    /* Enables or disables linear gradient */
+    linearGradientEnabled?: boolean | DataLink
+    /* An array of at least two color values that represent gradient colors */
+    linearGradientColors?: Array<string | DataLink> | DataLink
+    /* An optional object of the following type: { x: number, y: number } */
+    linearGradientStart?:
+      | DataLink
+      | {
+          x?: number | DataLink
+          y?: number | DataLink
+        }
+    /* Same as start, but for the end of the gradient */
+    linearGradientEnd?:
+      | DataLink
+      | {
+          x?: number | DataLink
+          y?: number | DataLink
+        }
+    /* An optional array of numbers defining the location of each gradient color stop */
+    linearGradientLocations?: Array<number | DataLink> | DataLink
+  }
+  events?: BrickBasicEvents & {
+    /* Event of the brick press */
+    onPress?: Array<EventAction>
+    /* Event of the brick press in */
+    onPressIn?: Array<EventAction>
+    /* Event of the brick press out */
+    onPressOut?: Array<EventAction>
+    /* Event of the brick focus (Use TV Device with controller) */
+    onFocus?: Array<EventAction>
+    /* Event of the brick blur (Use TV Device with controller) */
+    onBlur?: Array<EventAction>
+  }
+  outlets?: {
+    /* Brick is pressing */
+    brickPressing?: () => Data
+    /* Brick is focusing (Use TV Device with controller) */
+    brickFocusing?: () => Data
+  }
+  animation?: AnimationBasicEvents & {
+    onPress?: Animation
+    onPressIn?: Animation
+    onPressOut?: Animation
+    onFocus?: Animation
+    onBlur?: Animation
+  }
+}
+
+/* Rect brick ([Tutorial](https://intercom.help/bricks-dag-inc/articles/5378573-rect)) */
+export type BrickRect = Brick &
+  BrickRectDef & {
+    templateKey: 'BRICK_RECT'
+    switches: Array<
+      SwitchDef &
+        BrickRectDef & {
+          conds?: Array<{
+            method: '==' | '!=' | '>' | '<' | '>=' | '<='
+            cond:
+              | SwitchCondInnerStateCurrentCanvas
+              | SwitchCondData
+              | {
+                  __typename: 'SwitchCondInnerStateOutlet'
+                  outlet: 'brickPressing' | 'brickFocusing'
+                  value: any
+                }
+          }>
+        }
+    >
+  }

package/types/bricks/RichText.ts

@@ -0,0 +1,120 @@
+import type { SwitchCondInnerStateCurrentCanvas, SwitchCondData, SwitchDef } from '../switch'
+import type { Data, DataLink } from '../data'
+import type { Animation, AnimationBasicEvents } from '../animation'
+import type {
+  Brick,
+  EventAction,
+  EventActionForItem,
+  ActionWithDataParams,
+  ActionWithParams,
+  Action,
+  EventProperty,
+} from '../common'
+import type { BrickBasicProperty, BrickBasicEvents, BrickBasicEventsForItem } from '../brick-base'
+
+interface BrickRichTextDef {
+  /*
+Default property:
+{
+  "content": "",
+  "renderImage": false,
+  "color": "#000",
+  "fontWeight": "normal",
+  "fontStyle": "normal",
+  "fontSizes": {
+    "base": 3,
+    "h1": 6.857142857142857,
+    "h2": 5.714285714285714,
+    "h3": 4.011428571428572,
+    "h4": 3.428571428571429,
+    "h5": 2.845714285714286,
+    "h6": 2.285714285714286
+  }
+}
+  */
+  property?: BrickBasicProperty & {
+    /* The text content */
+    content?: string | DataLink
+    /* Render Image */
+    renderImage?: boolean | DataLink
+    /* The text color */
+    color?: string | DataLink
+    /* Specifies font weight.  The values 'normal' and are supported for most fonts.  Not all fonts have a variant for each of the numeric values,  in that case the closest one is chosen. */
+    fontWeight?:
+      | 'normal'
+      | 'bold'
+      | '100'
+      | '200'
+      | '300'
+      | '400'
+      | '500'
+      | '600'
+      | '700'
+      | '800'
+      | '900'
+      | DataLink
+    /* The text font style */
+    fontStyle?: 'normal' | 'italic' | DataLink
+    /* The text font family */
+    fontFamily?: string | DataLink
+    /* The text font size definition (base and headers) */
+    fontSizes?:
+      | DataLink
+      | {
+          base?: number | DataLink // BRICKS Grid unit
+          h1?: number | DataLink // BRICKS Grid unit
+          h2?: number | DataLink // BRICKS Grid unit
+          h3?: number | DataLink // BRICKS Grid unit
+          h4?: number | DataLink // BRICKS Grid unit
+          h5?: number | DataLink // BRICKS Grid unit
+          h6?: number | DataLink // BRICKS Grid unit
+        }
+  }
+  events?: BrickBasicEvents & {
+    /* Event of the brick press */
+    onPress?: Array<EventAction>
+    /* Event of the brick press in */
+    onPressIn?: Array<EventAction>
+    /* Event of the brick press out */
+    onPressOut?: Array<EventAction>
+    /* Event of the brick focus (Use TV Device with controller) */
+    onFocus?: Array<EventAction>
+    /* Event of the brick blur (Use TV Device with controller) */
+    onBlur?: Array<EventAction>
+  }
+  outlets?: {
+    /* Brick is pressing */
+    brickPressing?: () => Data
+    /* Brick is focusing (Use TV Device with controller) */
+    brickFocusing?: () => Data
+  }
+  animation?: AnimationBasicEvents & {
+    onPress?: Animation
+    onPressIn?: Animation
+    onPressOut?: Animation
+    onFocus?: Animation
+    onBlur?: Animation
+  }
+}
+
+/* RichText brick */
+export type BrickRichText = Brick &
+  BrickRichTextDef & {
+    templateKey: 'BRICK_RICH_TEXT'
+    switches: Array<
+      SwitchDef &
+        BrickRichTextDef & {
+          conds?: Array<{
+            method: '==' | '!=' | '>' | '<' | '>=' | '<='
+            cond:
+              | SwitchCondInnerStateCurrentCanvas
+              | SwitchCondData
+              | {
+                  __typename: 'SwitchCondInnerStateOutlet'
+                  outlet: 'brickPressing' | 'brickFocusing'
+                  value: any
+                }
+          }>
+        }
+    >
+  }

package/types/bricks/Rive.ts

@@ -0,0 +1,209 @@
+import type { SwitchCondInnerStateCurrentCanvas, SwitchCondData, SwitchDef } from '../switch'
+import type { Data, DataLink } from '../data'
+import type { Animation, AnimationBasicEvents } from '../animation'
+import type {
+  Brick,
+  EventAction,
+  EventActionForItem,
+  ActionWithDataParams,
+  ActionWithParams,
+  Action,
+  EventProperty,
+} from '../common'
+import type { BrickBasicProperty, BrickBasicEvents, BrickBasicEventsForItem } from '../brick-base'
+
+/* Play animation */
+export type BrickRiveActionPlay = ActionWithParams & {
+  __actionName: 'BRICK_RIVE_PLAY'
+  params?: Array<
+    | {
+        input: 'animationName'
+        value?: string | DataLink | EventProperty
+        mapping?: string
+      }
+    | {
+        input: 'loop'
+        value?: 'auto' | 'oneShot' | 'loop' | 'pingPong' | DataLink | EventProperty
+        mapping?: string
+      }
+    | {
+        input: 'direction'
+        value?: 'auto' | 'backwards' | 'forwards' | DataLink | EventProperty
+        mapping?: string
+      }
+    | {
+        input: 'isStateMachine'
+        value?: boolean | DataLink | EventProperty
+        mapping?: string
+      }
+  >
+}
+
+/* Pause animation */
+export type BrickRiveActionPause = Action & {
+  __actionName: 'BRICK_RIVE_PAUSE'
+}
+
+/* Stop animation */
+export type BrickRiveActionStop = Action & {
+  __actionName: 'BRICK_RIVE_STOP'
+}
+
+/* Reset animation */
+export type BrickRiveActionReset = Action & {
+  __actionName: 'BRICK_RIVE_RESET'
+}
+
+/* Fire state */
+export type BrickRiveActionFireState = ActionWithParams & {
+  __actionName: 'BRICK_RIVE_FIRE_STATE'
+  params?: Array<
+    | {
+        input: 'stateMachineName'
+        value?: string | DataLink | EventProperty
+        mapping?: string
+      }
+    | {
+        input: 'inputName'
+        value?: string | DataLink | EventProperty
+        mapping?: string
+      }
+  >
+}
+
+/* Set input state */
+export type BrickRiveActionSetInputState = ActionWithParams & {
+  __actionName: 'BRICK_RIVE_SET_INPUT_STATE'
+  params?: Array<
+    | {
+        input: 'stateMachineName'
+        value?: string | DataLink | EventProperty
+        mapping?: string
+      }
+    | {
+        input: 'inputName'
+        value?: string | DataLink | EventProperty
+        mapping?: string
+      }
+    | {
+        input: 'value'
+        value?: any | EventProperty
+        mapping?: string
+      }
+  >
+}
+
+/* Set text run value. Text Run name need to defined as unique name in Rive file. (Ref: https://rive.app/community/doc/text/docn2E6y1lXo) */
+export type BrickRiveActionSetTextRunValue = ActionWithParams & {
+  __actionName: 'BRICK_RIVE_SET_TEXT_RUN_VALUE'
+  params?: Array<
+    | {
+        input: 'textRunName'
+        value?: string | DataLink | EventProperty
+        mapping?: string
+      }
+    | {
+        input: 'value'
+        value?: any | EventProperty
+        mapping?: string
+      }
+  >
+}
+
+interface BrickRiveDef {
+  /*
+Default property:
+{
+  "autoplay": true,
+  "alignment": "center",
+  "fit": "contain"
+}
+  */
+  property?: BrickBasicProperty & {
+    /* Rive file url */
+    url?: string | DataLink
+    /* The checksum of `url` */
+    md5?: string | DataLink
+    /* Autoplay the animation */
+    autoplay?: boolean | DataLink
+    /* Alignment of the animation */
+    alignment?:
+      | 'topLeft'
+      | 'topCenter'
+      | 'topRight'
+      | 'centerLeft'
+      | 'center'
+      | 'centerRight'
+      | 'bottomLeft'
+      | 'bottomCenter'
+      | 'bottomRight'
+      | DataLink
+    /* Fit mode of the animation */
+    fit?:
+      | 'cover'
+      | 'contain'
+      | 'fill'
+      | 'fitWidth'
+      | 'fitHeight'
+      | 'none'
+      | 'scaleDown'
+      | 'layout'
+      | DataLink
+    /* Artboard name */
+    artboardName?: string | DataLink
+    /* Animation name */
+    animationName?: string | DataLink
+    /* State machine name */
+    stateMachineName?: string | DataLink
+  }
+  events?: BrickBasicEvents & {
+    /* Event of animation play */
+    onPlay?: Array<EventAction>
+    /* Event of animation pause */
+    onPause?: Array<EventAction>
+    /* Event of animation stop */
+    onStop?: Array<EventAction>
+    /* Event of animation loop end */
+    onLoopEnd?: Array<EventAction>
+    /* Event of state changed */
+    onStateChanged?: Array<EventAction>
+    /* Event of error */
+    onError?: Array<EventAction>
+    /* Event of Rive general event received */
+    onRiveGeneralEvent?: Array<EventAction>
+    /* Event of Rive open-url event received */
+    onRiveOpenUrlEvent?: Array<EventAction>
+  }
+  animation?: AnimationBasicEvents & {
+    onPlay?: Animation
+    onPause?: Animation
+    onStop?: Animation
+    onLoopEnd?: Animation
+    onStateChanged?: Animation
+    onError?: Animation
+    onRiveGeneralEvent?: Animation
+    onRiveOpenUrlEvent?: Animation
+  }
+}
+
+/* Rive file component */
+export type BrickRive = Brick &
+  BrickRiveDef & {
+    templateKey: 'BRICK_RIVE'
+    switches: Array<
+      SwitchDef &
+        BrickRiveDef & {
+          conds?: Array<{
+            method: '==' | '!=' | '>' | '<' | '>=' | '<='
+            cond:
+              | SwitchCondInnerStateCurrentCanvas
+              | SwitchCondData
+              | {
+                  __typename: 'SwitchCondInnerStateOutlet'
+                  outlet: ''
+                  value: any
+                }
+          }>
+        }
+    >
+  }