@dcl/react-ecs 7.0.6-4057700455.commit-453395e → 7.0.6-4076330908.commit-cd40e5f

package/dist/components/Button/index.d.ts

@@ -1,7 +1,15 @@
 import { ReactEcs } from '../../react-ecs';
-import { EntityPropTypes } from '../types';
 import { UiButtonProps } from './types';
 /**
+ *
  * @public
+ * Button component
+ *
+ * A Button indicates a possible user action.
+ *
+ * @example
+ * <Button variant="primary" value="Click me!" />
+ *
+ * @category Component
  */
-export declare function Button(props: EntityPropTypes & UiButtonProps): ReactEcs.JSX.Element;
+export declare function Button(props: UiButtonProps): ReactEcs.JSX.Element;

package/dist/components/Button/index.js

@@ -3,13 +3,13 @@ import { getFont, getTextAlign } from '../Label/utils';
 import { parseUiBackground } from '../uiBackground';
 import { parseUiTransform } from '../uiTransform';
 function getButtonProps(props) {
-    if (props.type === 'primary') {
+    if (props.variant === 'primary') {
         return {
             uiBackground: { color: { r: 0.98, g: 0.17, b: 0.33, a: 1 } },
             uiText: { color: { r: 1, g: 1, b: 1, a: 1 } }
         };
     }
-    if (props.type === 'secondary') {
+    if (props.variant === 'secondary') {
         return {
             uiBackground: { color: { r: 1, g: 1, b: 1, a: 1 } },
             uiText: { color: { r: 0.98, g: 0.17, b: 0.33, a: 1 } }
@@ -18,7 +18,16 @@ function getButtonProps(props) {
     return {};
 }
 /**
+ *
  * @public
+ * Button component
+ *
+ * A Button indicates a possible user action.
+ *
+ * @example
+ * <Button variant="primary" value="Click me!" />
+ *
+ * @category Component
  */
 /*#__PURE__*/
 export function Button(props) {

package/dist/components/Button/types.d.ts

@@ -1,7 +1,12 @@
 import { UiLabelProps } from '../Label/types';
+import { EntityPropTypes } from '../types';
 /**
+ * Button Component Props
  * @public
  */
-export type UiButtonProps = UiLabelProps & {
-    type?: 'primary' | 'secondary';
-};
+export interface UiButtonProps extends UiLabelProps, EntityPropTypes {
+    /**
+     * Use any of the available button style types to create a styled button.
+     */
+    variant?: 'primary' | 'secondary';
+}

package/dist/components/Dropdown/index.d.ts

@@ -1,7 +1,21 @@
 import { ReactEcs } from '../../react-ecs';
-import { EntityPropTypes } from '../types';
 import { UiDropdownProps } from './types';
 /**
  * @public
+ * Dropdown component
+ *
+ * A dropdown allows a user to select a value from a series of options.
+ *
+ * @example
+ * <Dropdown
+    options={['Red', 'Blue']}
+    color={Color4.Red()}
+    font="sans-serif"
+    fontSize={14}
+    selectedIndex={value}
+    onChange={(index) => value = index}
+  />
+ *
+ * @category Component
  */
-export declare function Dropdown(props: EntityPropTypes & UiDropdownProps): ReactEcs.JSX.Element;
+export declare function Dropdown(props: UiDropdownProps): ReactEcs.JSX.Element;

package/dist/components/Dropdown/index.js

@@ -15,6 +15,21 @@ function parseUiDropdown(props) {
 }
 /**
  * @public
+ * Dropdown component
+ *
+ * A dropdown allows a user to select a value from a series of options.
+ *
+ * @example
+ * <Dropdown
+    options={['Red', 'Blue']}
+    color={Color4.Red()}
+    font="sans-serif"
+    fontSize={14}
+    selectedIndex={value}
+    onChange={(index) => value = index}
+  />
+ *
+ * @category Component
  */
 /*#__PURE__*/
 export function Dropdown(props) {

package/dist/components/Dropdown/types.d.ts

@@ -1,10 +1,12 @@
 import { PBUiDropdown } from '@dcl/ecs';
 import { TextAlignType, UiFontType } from '../Label/types';
+import { EntityPropTypes } from '../types';
 /**
  * @public
+ * Dropdown Props
  */
-export type UiDropdownProps = Partial<Omit<PBUiDropdown, 'textAlign' | 'font'>> & {
+export interface UiDropdownProps extends EntityPropTypes, Omit<Partial<PBUiDropdown>, 'textAlign' | 'font'> {
     onChange?(value: number): void;
     font?: UiFontType;
     textAlign?: TextAlignType;
-};
+}

package/dist/components/Input/index.d.ts

@@ -3,5 +3,19 @@ import { EntityPropTypes } from '../types';
 import { UiInputProps } from './types';
 /**
  * @public
- */
-export declare function Input(props: EntityPropTypes & Partial<UiInputProps>): ReactEcs.JSX.Element;
+ * Input component
+ *
+ * An Input is a field used to obtain a response from a user.
+ *
+ * @example
+    <Input
+      placeholder="Please enter your email"
+      onChange={(value) => {
+        email = value
+      }}
+      uiBackground={{ color: Color4.Red() }}
+      uiTransform={{ width: 200, height: 36 }}
+    />
+ *
+ * @category Component
+ */ export declare function Input(props: EntityPropTypes & Partial<UiInputProps>): ReactEcs.JSX.Element;

package/dist/components/Input/index.js

@@ -13,8 +13,22 @@ function parseUiInput(props) {
 }
 /**
  * @public
- */
-/*#__PURE__*/
+ * Input component
+ *
+ * An Input is a field used to obtain a response from a user.
+ *
+ * @example
+    <Input
+      placeholder="Please enter your email"
+      onChange={(value) => {
+        email = value
+      }}
+      uiBackground={{ color: Color4.Red() }}
+      uiTransform={{ width: 200, height: 36 }}
+    />
+ *
+ * @category Component
+ */ /*#__PURE__*/
 export function Input(props) {
     const { uiTransform, uiBackground, onMouseDown, onMouseUp, ...otherProps } = props;
     const inputProps = parseUiInput(otherProps);

package/dist/components/Input/types.d.ts

@@ -3,8 +3,9 @@ import { TextAlignType, UiFontType } from '../Label/types';
 /**
  * @public
  */
-export type UiInputProps = Omit<PBUiInput, 'font' | 'textAlign'> & {
+export interface UiInputProps extends Omit<PBUiInput, 'font' | 'textAlign'> {
+    /** function to be called on value change  */
     onChange?(value: string): void;
     font?: UiFontType;
     textAlign?: TextAlignType;
-};
+}

package/dist/components/Label/index.d.ts

@@ -2,6 +2,15 @@ import { ReactEcs } from '../../react-ecs';
 import { EntityPropTypes } from '../types';
 import { UiLabelProps } from './types';
 /**
+ *
  * @public
+ * Label component
+ *
+ * A label displays text content
+ *
+ * @example
+ * <Label value="SDK 7" uiTransform={{ margin: { left: 10 } }} />
+ *
+ * @category Component
  */
 export declare function Label(props: EntityPropTypes & UiLabelProps): ReactEcs.JSX.Element;

package/dist/components/Label/index.js

@@ -2,7 +2,16 @@ import { parseProps } from '../utils';
 import { ReactEcs } from '../../react-ecs';
 import { getFont, getTextAlign } from './utils';
 /**
+ *
  * @public
+ * Label component
+ *
+ * A label displays text content
+ *
+ * @example
+ * <Label value="SDK 7" uiTransform={{ margin: { left: 10 } }} />
+ *
+ * @category Component
  */
 /*#__PURE__*/
 export function Label(props) {

package/dist/components/Label/types.d.ts

@@ -1,13 +1,20 @@
-import { PBUiText } from '@dcl/ecs';
+import { Color4 } from '@dcl/ecs/dist/components/generated/pb/decentraland/common/colors.gen';
 /**
+ * Label component props
  * @public
  */
-export type UiLabelProps = Omit<PBUiText, 'textAlign' | 'font'> & {
-    /** default='middle-center' */
+export interface UiLabelProps {
+    /** Primary content. */
+    value: string;
+    /** Color of the label. @defaultValue `{ r: 1, g: 1, b: 1, a: 1 }` */
+    color?: Color4 | undefined;
+    /** Label font size. @defaultValue 10 */
+    fontSize?: number | undefined;
+    /** Label align position. @defaultValue 'middle-center' */
     textAlign?: TextAlignType | undefined;
-    /** default='sans-serif' */
+    /** Label font type. @defaultValue 'sans-serif' */
     font?: UiFontType | undefined;
-};
+}
 /**
  * @public
  */

package/dist/components/index.d.ts

@@ -1,8 +1,6 @@
 import { ReactEcs } from '../react-ecs';
-import { CommonProps, EntityPropTypes } from './types';
-import { CANVAS_ROOT_ENTITY } from './uiTransform';
+import { EntityPropTypes } from './types';
 export * from './types';
-export { CANVAS_ROOT_ENTITY };
 export * from './uiTransform/types';
 export * from './listeners/types';
 export * from './Input/types';
@@ -16,5 +14,6 @@ export { Label } from './Label';
 export { Button } from './Button';
 /**
  * @public
+ * @category Component
  */
-export declare function UiEntity(props: EntityPropTypes & Partial<CommonProps>): ReactEcs.JSX.Element;
+export declare function UiEntity(props: EntityPropTypes): ReactEcs.JSX.Element;

package/dist/components/index.js

@@ -1,8 +1,6 @@
 import { ReactEcs } from '../react-ecs';
-import { CANVAS_ROOT_ENTITY } from './uiTransform';
 import { parseProps } from './utils';
 export * from './types';
-export { CANVAS_ROOT_ENTITY };
 export * from './uiTransform/types';
 export * from './listeners/types';
 export * from './Input/types';
@@ -16,6 +14,7 @@ export { Label } from './Label';
 export { Button } from './Button';
 /**
  * @public
+ * @category Component
  */
 /*#__PURE__*/
 export function UiEntity(props) {

package/dist/components/listeners/types.d.ts

@@ -1,6 +1,15 @@
+/**
+ * Callback function to be triggered on a specified event
+ * @public
+ */
 export type Callback = () => void;
+/**
+ * User key event Listeners
+ * @public
+ */
 export type Listeners = {
+    /** triggered on mouse down event */
     onMouseDown?: Callback;
+    /** triggered on mouse up event */
     onMouseUp?: Callback;
 };
-export declare const isListener: (key: string) => key is keyof Listeners;

package/dist/components/listeners/types.js

@@ -3,4 +3,7 @@ const listeners = {
     onMouseUp: undefined
 };
 const listenersKey = Object.keys(listeners);
+/**
+ * @internal
+ */
 export const isListener = (key) => listenersKey.includes(key);

package/dist/components/types.d.ts

@@ -3,14 +3,20 @@ import { UiBackgroundProps } from './uiBackground/types';
 import { UiTransformProps } from './uiTransform/types';
 /**
  * @public
+ * Common props to all components
  */
-export type EntityPropTypes = {
+export interface EntityPropTypes extends Listeners {
+    /** Layout component, to position things in the canvas */
     uiTransform?: UiTransformProps;
+    /** To define a background color or image */
     uiBackground?: UiBackgroundProps;
-} & Listeners & Pick<CommonProps, 'key'>;
+    /** Uinique key to identiy elments when iterating arrays */
+    key?: Key;
+}
+/**
+ * Keys help React identify which items have changed, are added, or are removed.
+ * Keys should be given to the elements inside the array to give the elements a stable identity:
+ * @public
+ */
 export type Key = number | string;
 export type Children = unknown;
-export type CommonProps = {
-    key?: Key;
-    children?: Children;
-};

package/dist/components/uiBackground/types.d.ts

@@ -2,36 +2,39 @@ import { BorderRect } from '@dcl/ecs';
 import { Color4 } from '@dcl/ecs/dist/components/generated/pb/decentraland/common/colors.gen';
 /**
  * @public
+ * Background Component props
+ * .i.e to define a background color or image
  */
-export type UiBackgroundProps = {
+export interface UiBackgroundProps {
+    /** Background color. @defaultValue `{ r: 1, g: 1, b: 1, a: 1 }` */
     color?: Color4 | undefined;
     textureMode?: TextureMode;
+    /** Texture slices represents the top | right | bottom | left sizes of the slices for the borders. Values are percentages of the texture. */
     textureSlices?: BorderRect | undefined;
+    /** when STRETCH is selected, the uvs are configurable */
     uvs?: number[];
-} & UiTextureUnion;
+    /** AvatarTexture for the background */
+    avatarTexture?: UiAvatarTexture;
+    /** Texture for the background */
+    texture?: UiTexture;
+}
 /**
+ * Avatar Texture
  * @public
  */
-export type UiTextureUnion = UiAvatarTexture | UiTexture;
-/**
- * @public
- */
-export type UiAvatarTexture = {
-    avatarTexture?: {
-        userId: string;
-        wrapMode?: TextureWrapType;
-        filterMode?: TextureFilterType;
-    };
-};
+export interface UiAvatarTexture {
+    userId: string;
+    wrapMode?: TextureWrapType;
+    filterMode?: TextureFilterType;
+}
 /**
+ * Texture
  * @public
  */
 export type UiTexture = {
-    texture?: {
-        src: string;
-        wrapMode?: TextureWrapType;
-        filterMode?: TextureFilterType;
-    };
+    src: string;
+    wrapMode?: TextureWrapType;
+    filterMode?: TextureFilterType;
 };
 /**
  * @public

package/dist/components/uiBackground/utils.js

@@ -10,17 +10,11 @@ export function getTextureMode(mode) {
     const value = mode ? parseTextureMode[mode] : 1 /* BackgroundTextureMode.CENTER */;
     return { textureMode: value };
 }
-function isAvatarTexture(props) {
-    return !!props.avatarTexture;
-}
-function isTexture(props) {
-    return !!props.texture;
-}
 /**
  * @internal
  */
 export function getTexture(props) {
-    if (isTexture(props) && props.texture) {
+    if (props.texture) {
         return {
             tex: {
                 $case: 'texture',
@@ -28,7 +22,7 @@ export function getTexture(props) {
             }
         };
     }
-    if (isAvatarTexture(props) && props.avatarTexture) {
+    if (props.avatarTexture) {
         return {
             tex: {
                 $case: 'avatarTexture',

package/dist/components/uiTransform/index.d.ts

@@ -1,6 +1,5 @@
 import { UiTransformProps } from './types';
 import { PBUiTransform } from '@dcl/ecs/dist/components';
-export declare const CANVAS_ROOT_ENTITY = 0;
 /**
  * @public
  */

package/dist/components/uiTransform/index.js

@@ -1,4 +1,7 @@
 import { getAlign, getFlexDirection, getDisplay, getFlexWrap, getJustify, getOverflow, getPoistionType, parsePosition, parseSize } from './utils';
+/**
+ * @internal
+ */
 export const CANVAS_ROOT_ENTITY = 0;
 const defaultUiTransform = {
     parent: CANVAS_ROOT_ENTITY,

package/dist/components/uiTransform/types.d.ts

@@ -1,13 +1,19 @@
+/**
+ * Position unit for the user.
+ * i.e. width="100", width="100%", width="100px"
+ * @public
+ */
 export type PositionUnit = `${number}px` | `${number}%` | number;
 /**
+ * Type used for defining the position of the element. i.e. margin, padding
  * @public
  */
-export type Position = {
+export interface Position {
     top: PositionUnit;
     right: PositionUnit;
     bottom: PositionUnit;
     left: PositionUnit;
-};
+}
 /**
  * @public
  */
@@ -30,36 +36,61 @@ export type FlexDirectionType = 'row' | 'column' | 'column-reverse' | 'row-rever
 export type FlexWrapType = 'wrap' | 'nowrap' | 'wrap-reverse';
 /**
  * @public
+ * The overflow property controls what happens to content that is too big to fit into an area.
  */
 export type OverflowType = 'hidden' | 'scroll' | 'visible';
 /**
  * @public
+ * The position property specifies the type of positioning method used for an element
  */
 export type PositionType = 'absolute' | 'relative';
 /**
+ * Layout props to position things in the canvas
  * @public
  */
 export interface UiTransformProps {
+    /** The display property controls if a item is going to be displayed or not. */
     display?: DisplayType;
+    /** The flex shorthand property sets how a flex item will grow or shrink to fit the space available in its flex container. */
     flex?: number;
+    /** Justify content describes how to align children within the main axis of their container. */
     justifyContent?: JustifyType;
+    /** The position type of an element defines how it is positioned within its parent. */
     positionType?: PositionType;
+    /** The align-items property controls the alignment of items on the Cross Axis. */
     alignItems?: AlignType;
+    /** The align-self property has the same options and effect as align items but instead of affecting the children within a container, you can apply this property to a single child to change its alignment within its parent */
     alignSelf?: AlignType;
+    /** The align-content property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. */
     alignContent?: AlignType;
+    /** The flex-direction property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed). */
     flexDirection?: FlexDirectionType;
+    /** The position property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements. */
     position?: Partial<Position>;
+    /** The padding shorthand property sets the padding area on all four sides of an element at once. */
     padding?: Partial<Position>;
+    /** The margin shorthand property sets the margin area on all four sides of an element. */
     margin?: Partial<Position>;
+    /** The width property specifies the width of an element. */
     width?: PositionUnit;
+    /** The height property specifies the height of an element. */
     height?: PositionUnit;
+    /** The min-width property sets the minimum width of an element. */
     minWidth?: PositionUnit;
+    /** The max-width property sets the maximum width of an element. */
     maxWidth?: PositionUnit;
+    /** The min-height CSS property sets the minimum height of an element. */
     minHeight?: PositionUnit;
+    /** The max-height property sets the maximum height of an element */
     maxHeight?: PositionUnit;
+    /** The flex-wrap property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked*/
     flexWrap?: FlexWrapType;
+    /** The flex-basis property sets the initial main size of a flex item. It sets the size of the content box.*/
     flexBasis?: number;
+    /** The flex-grow property sets the flex grow factor of a flex item's main size. */
     flexGrow?: number;
+    /** The flex-shrink property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink. */
     flexShrink?: number;
+    /** The overflow property controls what happens to content that is too big to fit into an area */
     overflow?: OverflowType;
 }

package/dist/index.d.ts

@@ -1,6 +1,14 @@
 import { ReactEcs } from './react-ecs';
+import { ReactBasedUiSystem } from './system';
 export * from './components';
 export * from './system';
 export * from './react-ecs';
-export declare const ReactEcsRenderer: import("./system").ReactBasedUiSystem;
+/**
+ * ReactEcs variable provides the function to render & destroy the specified UI
+ * @public
+ * @example
+ * import { ReactEcsRenderer } from '@dcl/sdk/react-ecs'
+ * ReactEcsRenderer.setUiRenderer(uiComponent)
+ */
+export declare const ReactEcsRenderer: ReactBasedUiSystem;
 export default ReactEcs;

package/dist/index.js

@@ -4,6 +4,13 @@ import { createReactBasedUiSystem } from './system';
 export * from './components';
 export * from './system';
 export * from './react-ecs';
+/**
+ * ReactEcs variable provides the function to render & destroy the specified UI
+ * @public
+ * @example
+ * import { ReactEcsRenderer } from '@dcl/sdk/react-ecs'
+ * ReactEcsRenderer.setUiRenderer(uiComponent)
+ */
 /*#__PURE__*/
 export const ReactEcsRenderer = createReactBasedUiSystem(engine, pointerEventsSystem);
 export default ReactEcs;

package/dist/react-ecs.d.ts

@@ -1,9 +1,17 @@
 import { PBUiBackground, PBUiText, PBUiTransform, PBUiInput, PBUiDropdown } from '@dcl/ecs';
-import { Callback } from './components';
-import { CommonProps } from './components/types';
-export type EcsElements = {
-    entity: Partial<EntityComponents & CommonProps>;
-};
+import { Callback, Children, Key } from './components';
+/**
+ * @public
+ */
+export interface EcsElements {
+    entity: Partial<EntityComponents> & {
+        children?: Children;
+        key?: Key;
+    };
+}
+/**
+ * @public
+ */
 export type EntityComponents = {
     uiTransform: PBUiTransform;
     uiText: PBUiText;
@@ -13,16 +21,33 @@ export type EntityComponents = {
     onMouseDown: Callback;
     onMouseUp: Callback;
 };
+/**
+ * @hidden
+ */
 export declare namespace JSX {
     type Element = {} | null;
     type IntrinsicElements = EcsElements;
     interface Component {
     }
 }
+/**
+ * @public
+ */
 export declare namespace ReactEcs {
     namespace JSX {
+        /**
+         * @public
+         */
         type Element = {} | null;
+        /**
+         * @public
+         * HTML tag elements
+         */
         type IntrinsicElements = EcsElements;
+        /**
+         * @public
+         * Component empty interface
+         */
         interface Component {
         }
     }

package/dist/react-ecs.js

@@ -1,6 +1,8 @@
 import React from 'react';
+/**
+ * @public
+ */
 export var ReactEcs;
 (function (ReactEcs) {
-    // TODO: check if this as any is still needed
     ReactEcs.createElement = React.createElement;
 })(ReactEcs || (ReactEcs = {}));

package/dist/reconciler/index.d.ts

@@ -1,6 +1,6 @@
 import { Entity, IEngine, PointerEventsSystem } from '@dcl/ecs';
-import { JSX } from '../react-ecs';
+import { ReactEcs } from '../react-ecs';
 export declare function createReconciler(engine: Pick<IEngine, 'getComponent' | 'addEntity' | 'removeEntity' | 'defineComponentFromSchema' | 'getEntitiesWith'>, pointerEvents: PointerEventsSystem): {
-    update: (component: JSX.Element) => number;
+    update: (component: ReactEcs.JSX.Element) => number;
     getEntities: () => Entity[];
 };

package/dist/reconciler/types.d.ts

@@ -1,10 +1,13 @@
 import type { Entity } from '@dcl/ecs';
-import { CommonProps, Listeners } from '../components';
+import { Children, Key, Listeners } from '../components';
 import type { EntityComponents } from '../react-ecs';
 export type EngineComponents = Omit<EntityComponents, keyof Listeners>;
 export type OpaqueHandle = any;
 export type Type = 'entity';
-export type Props = EntityComponents & CommonProps;
+export type Props = EntityComponents & {
+    children?: Children;
+    key?: Key;
+};
 export type Container = Document | Instance | any;
 export type Instance = {
     entity: Entity;

package/dist/system.d.ts

@@ -1,8 +1,12 @@
-import type { IEngine, PointerEventsSystem } from '@dcl/ecs';
-import type { JSX } from './react-ecs';
-export type UiComponent = () => JSX.Element;
-export type ReactBasedUiSystem = {
+import type { ReactEcs } from './react-ecs';
+/**
+ * @public
+ */
+export type UiComponent = () => ReactEcs.JSX.Element;
+/**
+ * @public
+ */
+export interface ReactBasedUiSystem {
     destroy(): void;
     setUiRenderer(ui: UiComponent): void;
-};
-export declare function createReactBasedUiSystem(engine: IEngine, pointerSystem: PointerEventsSystem): ReactBasedUiSystem;
+}

package/dist/system.js

@@ -1,4 +1,7 @@
 import { createReconciler } from './reconciler';
+/**
+ * @internal
+ */
 export function createReactBasedUiSystem(engine, pointerSystem) {
     const renderer = createReconciler(engine, pointerSystem);
     let uiComponent = undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dcl/react-ecs",
-  "version": "7.0.6-4057700455.commit-453395e",
+  "version": "7.0.6-4076330908.commit-cd40e5f",
   "description": "Decentraland ECS",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -42,5 +42,5 @@
     "displayName": "React ECS",
     "tsconfig": "./tsconfig.json"
   },
-  "commit": "453395e8e59ee7b01541bc8232b4864b1405024a"
+  "commit": "cd40e5fe70cbeabc3231fc374729bfd52b1127e2"
 }