diff --git a/src/binding/BindingBase/index.ts b/src/binding/BindingBase/index.ts index c10aa642..3660b746 100644 --- a/src/binding/BindingBase/index.ts +++ b/src/binding/BindingBase/index.ts @@ -288,4 +288,4 @@ class BindingBase extends Events { } } -export default BindingBase; +export { BindingBase }; diff --git a/src/binding/BindingElementToObservers/index.ts b/src/binding/BindingElementToObservers/index.ts index b95ef079..ee8e6b18 100644 --- a/src/binding/BindingElementToObservers/index.ts +++ b/src/binding/BindingElementToObservers/index.ts @@ -1,5 +1,5 @@ import { Observer } from '@playcanvas/observer'; -import BindingBase from '../BindingBase'; +import { BindingBase } from '../BindingBase'; /** * Provides one way binding between an {@link IBindable} element and Observers. Any changes from @@ -340,4 +340,4 @@ class BindingElementToObservers extends BindingBase { } } -export default BindingElementToObservers; +export { BindingElementToObservers }; diff --git a/src/binding/BindingObserversToElement/index.ts b/src/binding/BindingObserversToElement/index.ts index 9e3e14d6..c95b0838 100644 --- a/src/binding/BindingObserversToElement/index.ts +++ b/src/binding/BindingObserversToElement/index.ts @@ -1,6 +1,6 @@ import { EventHandle, Observer } from '@playcanvas/observer'; import { IBindable } from '../../components'; -import BindingBase, { BindingBaseArgs } from '../BindingBase'; +import { BindingBase, BindingBaseArgs } from '../BindingBase'; export interface BindingObserversToElementArgs extends BindingBaseArgs { /** @@ -131,4 +131,4 @@ class BindingObserversToElement extends BindingBase { } } -export default BindingObserversToElement; +export { BindingObserversToElement }; diff --git a/src/binding/BindingTwoWay/index.ts b/src/binding/BindingTwoWay/index.ts index 5108ae14..36b0e865 100644 --- a/src/binding/BindingTwoWay/index.ts +++ b/src/binding/BindingTwoWay/index.ts @@ -1,6 +1,6 @@ -import BindingBase, { BindingBaseArgs } from '../BindingBase'; -import BindingElementToObservers from '../BindingElementToObservers'; -import BindingObserversToElement from '../BindingObserversToElement'; +import { BindingBase, BindingBaseArgs } from '../BindingBase'; +import { BindingElementToObservers } from '../BindingElementToObservers'; +import { BindingObserversToElement } from '../BindingObserversToElement'; import { Observer } from '@playcanvas/observer'; import { IBindable } from '../../components/Element'; @@ -153,4 +153,4 @@ class BindingTwoWay extends BindingBase { } } -export default BindingTwoWay; +export { BindingTwoWay }; diff --git a/src/binding/index.ts b/src/binding/index.ts index f7b620ea..dc51a116 100644 --- a/src/binding/index.ts +++ b/src/binding/index.ts @@ -1,7 +1,7 @@ -import BindingBase, { BindingBaseArgs } from './BindingBase'; -import BindingElementToObservers from './BindingElementToObservers'; -import BindingObserversToElement, { BindingObserversToElementArgs } from './BindingObserversToElement'; -import BindingTwoWay, { BindingTwoWayArgs } from './BindingTwoWay'; +import { BindingBase, BindingBaseArgs } from './BindingBase'; +import { BindingElementToObservers } from './BindingElementToObservers'; +import { BindingObserversToElement, BindingObserversToElementArgs } from './BindingObserversToElement'; +import { BindingTwoWay, BindingTwoWayArgs } from './BindingTwoWay'; export { BindingBase, diff --git a/src/components/ArrayInput/component.stories.tsx b/src/components/ArrayInput/component.stories.tsx index acf32bd1..106fe314 100644 --- a/src/components/ArrayInput/component.stories.tsx +++ b/src/components/ArrayInput/component.stories.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { action } from '@storybook/addon-actions'; -import ArrayInput from './component'; +import { ArrayInput } from './component'; import '../../scss/index.js'; diff --git a/src/components/ArrayInput/component.tsx b/src/components/ArrayInput/component.tsx index 9a46a34d..ddf1bc0c 100644 --- a/src/components/ArrayInput/component.tsx +++ b/src/components/ArrayInput/component.tsx @@ -1,13 +1,13 @@ -import Element, { ArrayInputArgs } from './index'; -import BaseComponent from '../Element/component'; +import { ArrayInput as ArrayInputClass, ArrayInputArgs } from './index'; +import { Element } from '../Element/component'; /** * Element that allows editing an array of values. */ -class Component extends BaseComponent { +class ArrayInput extends Element { constructor(props: ArrayInputArgs) { super(props); - this.elementClass = Element; + this.elementClass = ArrayInputClass; } render() { @@ -15,6 +15,6 @@ class Component extends BaseComponent { } } -Component.ctor = Element; +ArrayInput.ctor = ArrayInputClass; -export default Component; +export { ArrayInput }; diff --git a/src/components/ArrayInput/index.ts b/src/components/ArrayInput/index.ts index a42031d4..a97eb1ac 100644 --- a/src/components/ArrayInput/index.ts +++ b/src/components/ArrayInput/index.ts @@ -1,10 +1,10 @@ import { Observer } from '@playcanvas/observer'; import * as utils from '../../helpers/utils'; -import Element, { ElementArgs, IBindable, IBindableArgs, IFocusable } from '../Element'; -import Container from '../Container'; -import Panel from '../Panel'; -import NumericInput from '../NumericInput'; -import Button from '../Button'; +import { Button } from '../Button'; +import { Container } from '../Container'; +import { Element, ElementArgs, IBindable, IBindableArgs, IFocusable } from '../Element'; +import { NumericInput } from '../NumericInput'; +import { Panel } from '../Panel'; const CLASS_ARRAY_INPUT = 'pcui-array-input'; const CLASS_ARRAY_EMPTY = 'pcui-array-empty'; @@ -16,7 +16,7 @@ const CLASS_ARRAY_DELETE = CLASS_ARRAY_ELEMENT + '-delete'; /** * The arguments for the {@link ArrayInput} constructor. */ -export interface ArrayInputArgs extends ElementArgs, IBindableArgs { +interface ArrayInputArgs extends ElementArgs, IBindableArgs { /** * The type of values that the array can hold. Can be one of the following: * @@ -602,4 +602,4 @@ for (const type in ArrayInput.DEFAULTS) { } Element.register('array:select', ArrayInput, { type: 'select', renderChanges: true }); -export default ArrayInput; +export { ArrayInput, ArrayInputArgs }; diff --git a/src/components/BooleanInput/component.stories.tsx b/src/components/BooleanInput/component.stories.tsx index 54d717f2..58b587bf 100644 --- a/src/components/BooleanInput/component.stories.tsx +++ b/src/components/BooleanInput/component.stories.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { action } from '@storybook/addon-actions'; -import BooleanInput from './component'; +import { BooleanInput } from './component'; import '../../scss/index.js'; diff --git a/src/components/BooleanInput/component.tsx b/src/components/BooleanInput/component.tsx index c575ad14..a32df6e2 100644 --- a/src/components/BooleanInput/component.tsx +++ b/src/components/BooleanInput/component.tsx @@ -1,13 +1,13 @@ -import Element, { BooleanInputArgs } from './index'; -import BaseComponent from '../Element/component'; +import { BooleanInput as BooleanInputClass, BooleanInputArgs } from './index'; +import { Element } from '../Element/component'; /** * A checkbox element. */ -class Component extends BaseComponent { +class BooleanInput extends Element { constructor(props: BooleanInputArgs = {}) { super(props); - this.elementClass = Element; + this.elementClass = BooleanInputClass; } render() { @@ -15,6 +15,6 @@ class Component extends BaseComponent { } } -Component.ctor = Element; +BooleanInput.ctor = BooleanInputClass; -export default Component; +export { BooleanInput }; diff --git a/src/components/BooleanInput/index.ts b/src/components/BooleanInput/index.ts index e10c9483..1dafa422 100644 --- a/src/components/BooleanInput/index.ts +++ b/src/components/BooleanInput/index.ts @@ -1,5 +1,5 @@ import { CLASS_NOT_FLEXIBLE, CLASS_MULTIPLE_VALUES } from '../../class'; -import Element, { ElementArgs, IBindable, IBindableArgs, IFocusable } from '../Element'; +import { Element, ElementArgs, IBindable, IBindableArgs, IFocusable } from '../Element'; const CLASS_BOOLEAN_INPUT = 'pcui-boolean-input'; const CLASS_BOOLEAN_INPUT_TICKED = CLASS_BOOLEAN_INPUT + '-ticked'; @@ -8,7 +8,7 @@ const CLASS_BOOLEAN_INPUT_TOGGLE = CLASS_BOOLEAN_INPUT + '-toggle'; /** * The arguments for the {@link BooleanInput} constructor. */ -export interface BooleanInputArgs extends ElementArgs, IBindableArgs { +interface BooleanInputArgs extends ElementArgs, IBindableArgs { /** * Sets the tabIndex of the {@link BooleanInput}. Defaults to 0. */ @@ -163,4 +163,4 @@ class BooleanInput extends Element implements IBindable, IFocusable { Element.register('boolean', BooleanInput, { renderChanges: true }); -export default BooleanInput; +export { BooleanInput, BooleanInputArgs }; diff --git a/src/components/Button/component.stories.tsx b/src/components/Button/component.stories.tsx index fd987ee9..a8204854 100644 --- a/src/components/Button/component.stories.tsx +++ b/src/components/Button/component.stories.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { action } from '@storybook/addon-actions'; -import Button from './component'; +import { Button } from './component'; import '../../scss/index.js'; diff --git a/src/components/Button/component.tsx b/src/components/Button/component.tsx index 292068af..169859f8 100644 --- a/src/components/Button/component.tsx +++ b/src/components/Button/component.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; -import Element, { ButtonArgs } from './index'; -import BaseComponent from '../Element/component'; +import { Button as ButtonClass, ButtonArgs } from './index'; +import { Element } from '../Element/component'; /** * User input with click interaction */ -class Component extends BaseComponent { +class Button extends Element { constructor(props: ButtonArgs = {}) { super(props); - this.elementClass = Element; + this.elementClass = ButtonClass; } render() { @@ -17,6 +17,6 @@ class Component extends BaseComponent { } } -Component.ctor = Element; +Button.ctor = ButtonClass; -export default Component; +export { Button }; diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts index 9731aa05..d4d5edee 100644 --- a/src/components/Button/index.ts +++ b/src/components/Button/index.ts @@ -1,11 +1,11 @@ -import Element, { ElementArgs } from '../Element'; +import { Element, ElementArgs } from '../Element'; const CLASS_BUTTON = 'pcui-button'; /** * The arguments for the {@link Button} constructor. */ -export interface ButtonArgs extends ElementArgs { +interface ButtonArgs extends ElementArgs { /** * If `true`, the {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML innerHTML} property will be * used to set the text. Otherwise, {@link https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent textContent} @@ -156,4 +156,4 @@ class Button extends Element { Element.register('button', Button); -export default Button; +export { Button, ButtonArgs }; diff --git a/src/components/Canvas/component.stories.tsx b/src/components/Canvas/component.stories.tsx index b438196c..b4f84202 100644 --- a/src/components/Canvas/component.stories.tsx +++ b/src/components/Canvas/component.stories.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import Canvas from './component'; +import { Canvas } from './component'; import '../../scss/index.js'; diff --git a/src/components/Canvas/component.tsx b/src/components/Canvas/component.tsx index deeba902..95033c24 100644 --- a/src/components/Canvas/component.tsx +++ b/src/components/Canvas/component.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; -import Element, { CanvasArgs } from './index'; -import BaseComponent from '../Element/component'; +import { Canvas as CanvasClass, CanvasArgs } from './index'; +import { Element } from '../Element/component'; /** * Represents a Canvas */ -class Component extends BaseComponent { +class Canvas extends Element { constructor(props: CanvasArgs = {}) { super(props); - this.elementClass = Element; + this.elementClass = CanvasClass; } render() { @@ -17,6 +17,6 @@ class Component extends BaseComponent { } } -Component.ctor = Element; +Canvas.ctor = CanvasClass; -export default Component; +export { Canvas }; diff --git a/src/components/Canvas/index.ts b/src/components/Canvas/index.ts index 2f745a07..e2686bbb 100644 --- a/src/components/Canvas/index.ts +++ b/src/components/Canvas/index.ts @@ -1,11 +1,11 @@ -import Element, { ElementArgs } from '../Element'; +import { Element, ElementArgs } from '../Element'; const CLASS_ROOT = 'pcui-canvas'; /** * The arguments for the {@link Canvas} constructor. */ -export interface CanvasArgs extends ElementArgs { +interface CanvasArgs extends ElementArgs { /** * Whether the canvas should use the {@link https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio devicePixelRatio}. * Defaults to `false`. @@ -135,4 +135,4 @@ class Canvas extends Element { Element.register('canvas', Canvas); -export default Canvas; +export { Canvas, CanvasArgs }; diff --git a/src/components/Code/component.stories.tsx b/src/components/Code/component.stories.tsx index b5eec7c4..274e089d 100644 --- a/src/components/Code/component.stories.tsx +++ b/src/components/Code/component.stories.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import Code from './component'; +import { Code } from './component'; import '../../scss/index.js'; diff --git a/src/components/Code/component.tsx b/src/components/Code/component.tsx index 4a42fd01..24ccb9dc 100644 --- a/src/components/Code/component.tsx +++ b/src/components/Code/component.tsx @@ -1,15 +1,15 @@ -import Element, { CodeArgs } from './index'; -import BaseComponent from '../Element/component'; +import { Code as CodeClass, CodeArgs } from './index'; +import { Element } from '../Element/component'; /** * Represents a code block. */ -class Component extends BaseComponent { +class Code extends Element { static defaultProps: CodeArgs; constructor(props: CodeArgs) { super(props); - this.elementClass = Element; + this.elementClass = CodeClass; } render() { @@ -17,6 +17,6 @@ class Component extends BaseComponent { } } -Component.ctor = Element; +Code.ctor = CodeClass; -export default Component; +export { Code }; diff --git a/src/components/Code/index.ts b/src/components/Code/index.ts index 1b91038d..9f3897cb 100644 --- a/src/components/Code/index.ts +++ b/src/components/Code/index.ts @@ -1,6 +1,6 @@ -import Element from '../Element'; -import Container, { ContainerArgs } from '../Container'; -import Label from '../Label'; +import { Container, ContainerArgs } from '../Container'; +import { Element } from '../Element'; +import { Label } from '../Label'; const CLASS_ROOT = 'pcui-code'; const CLASS_INNER = CLASS_ROOT + '-inner'; @@ -8,7 +8,7 @@ const CLASS_INNER = CLASS_ROOT + '-inner'; /** * The arguments for the {@link Code} constructor. */ -export interface CodeArgs extends ContainerArgs { +interface CodeArgs extends ContainerArgs { /** * Sets the text to display in the code block. */ @@ -61,4 +61,4 @@ class Code extends Container { Element.register('code', Code); -export default Code; +export { Code, CodeArgs }; diff --git a/src/components/ColorPicker/component.stories.tsx b/src/components/ColorPicker/component.stories.tsx index bda761bf..0e661ed7 100644 --- a/src/components/ColorPicker/component.stories.tsx +++ b/src/components/ColorPicker/component.stories.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import ColorPicker from './component'; +import { ColorPicker } from './component'; import '../../scss/index.js'; diff --git a/src/components/ColorPicker/component.tsx b/src/components/ColorPicker/component.tsx index 89707868..fc65d448 100644 --- a/src/components/ColorPicker/component.tsx +++ b/src/components/ColorPicker/component.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; -import Element, { ColorPickerArgs } from './index'; -import BaseComponent from '../Element/component'; +import { ColorPicker as ColorPickerClass, ColorPickerArgs } from './index'; +import { Element } from '../Element/component'; /** * Represents a color picker */ -class ColorPicker extends BaseComponent { +class ColorPicker extends Element { constructor(props: ColorPickerArgs) { super(props); - this.elementClass = Element; + this.elementClass = ColorPickerClass; } render() { @@ -17,7 +17,6 @@ class ColorPicker extends BaseComponent { } } +ColorPicker.ctor = ColorPickerClass; -ColorPicker.ctor = Element; - -export default ColorPicker; +export { ColorPicker }; diff --git a/src/components/ColorPicker/index.ts b/src/components/ColorPicker/index.ts index 112bd290..bc66bd56 100644 --- a/src/components/ColorPicker/index.ts +++ b/src/components/ColorPicker/index.ts @@ -1,18 +1,18 @@ import { EventHandle } from '@playcanvas/observer'; import { CLASS_MULTIPLE_VALUES, CLASS_NOT_FLEXIBLE } from '../../class'; -import Element, { ElementArgs, IBindable, IBindableArgs } from '../Element'; -import Overlay from '../Overlay'; -import NumericInput from '../NumericInput'; -import TextInput from '../TextInput'; import { _hsv2rgb, _rgb2hsv } from '../../Math/color-value'; +import { Element, ElementArgs, IBindable, IBindableArgs } from '../Element'; +import { NumericInput } from '../NumericInput'; +import { Overlay } from '../Overlay'; +import { TextInput } from '../TextInput'; const CLASS_ROOT = 'pcui-color-input'; /** * The arguments for the {@link ColorPicker} constructor. */ -export interface ColorPickerArgs extends ElementArgs, IBindableArgs { +interface ColorPickerArgs extends ElementArgs, IBindableArgs { /** * An array of 4 integers containing the RGBA values the picker should be initialized to. Defaults to `[0, 0, 255, 1]`. */ @@ -773,4 +773,4 @@ class ColorPicker extends Element implements IBindable { Element.register('rgb', ColorPicker); Element.register('rgba', ColorPicker, { channels: 4 }); -export default ColorPicker; +export { ColorPicker, ColorPickerArgs }; diff --git a/src/components/Container/component.stories.tsx b/src/components/Container/component.stories.tsx index 084485fc..61994008 100644 --- a/src/components/Container/component.stories.tsx +++ b/src/components/Container/component.stories.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import Container from './component'; -import Label from '../Label/component'; +import { Container } from './component'; +import { Label } from '../Label/component'; import '../../scss/index.js'; diff --git a/src/components/Container/component.tsx b/src/components/Container/component.tsx index c29048b9..9630da97 100644 --- a/src/components/Container/component.tsx +++ b/src/components/Container/component.tsx @@ -1,15 +1,15 @@ import * as React from 'react'; -import Element, { ContainerArgs } from './index'; -import BaseComponent from '../Element/component'; +import { Container as ContainerClass, ContainerArgs } from './index'; +import { Element } from '../Element/component'; /** * A container is the basic building block for Elements that are grouped together. * A container can contain any other element including other containers. */ -class Component extends BaseComponent { +class Container extends Element { constructor(props: ContainerArgs = {}) { super(props); - this.elementClass = Element; + this.elementClass = ContainerClass; } componentDidMount() { @@ -37,6 +37,6 @@ class Component extends BaseComponent { } } -Component.ctor = Element; +Container.ctor = ContainerClass; -export default Component; +export { Container }; diff --git a/src/components/Container/index.ts b/src/components/Container/index.ts index 20907232..bb98a925 100644 --- a/src/components/Container/index.ts +++ b/src/components/Container/index.ts @@ -1,5 +1,5 @@ import { CLASS_FLEX, CLASS_GRID, CLASS_RESIZABLE, CLASS_SCROLLABLE } from '../../class'; -import Element, { ElementArgs, IFlexArgs, IParentArgs } from '../Element'; +import { Element, ElementArgs, IFlexArgs, IParentArgs } from '../Element'; const RESIZE_HANDLE_SIZE = 4; @@ -21,7 +21,7 @@ const CLASS_DRAGGED_CHILD = CLASS_DRAGGED + '-child'; /** * The arguments for the {@link Container} constructor. */ -export interface ContainerArgs extends ElementArgs, IParentArgs, IFlexArgs { +interface ContainerArgs extends ElementArgs, IParentArgs, IFlexArgs { /** * Sets whether the {@link Container} is resizable and where the resize handle is located. Can * be one of 'top', 'bottom', 'right', 'left'. Defaults to `null` which disables resizing. @@ -795,4 +795,4 @@ class Container extends Element { Element.register('container', Container); -export default Container; +export { Container, ContainerArgs }; diff --git a/src/components/Divider/component.stories.tsx b/src/components/Divider/component.stories.tsx index 0f7e6de2..7c89fd63 100644 --- a/src/components/Divider/component.stories.tsx +++ b/src/components/Divider/component.stories.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import Divider from './component'; +import { Divider } from './component'; import '../../scss/index.js'; diff --git a/src/components/Divider/component.tsx b/src/components/Divider/component.tsx index b944faed..bce769c0 100644 --- a/src/components/Divider/component.tsx +++ b/src/components/Divider/component.tsx @@ -1,14 +1,14 @@ -import Element from './index'; +import { Divider as DividerClass } from './index'; +import { Element } from '../Element/component'; import { ElementArgs } from '../Element/index'; -import BaseComponent from '../Element/component'; /** * Represents a vertical division between two elements */ -class Component extends BaseComponent { +class Divider extends Element { constructor(props: ElementArgs) { super(props); - this.elementClass = Element; + this.elementClass = DividerClass; } render() { @@ -16,6 +16,6 @@ class Component extends BaseComponent { } } -Component.ctor = Element; +Divider.ctor = DividerClass; -export default Component; +export { Divider }; diff --git a/src/components/Divider/index.ts b/src/components/Divider/index.ts index b030137a..9d89ba0d 100644 --- a/src/components/Divider/index.ts +++ b/src/components/Divider/index.ts @@ -1,4 +1,4 @@ -import Element, { ElementArgs } from '../Element'; +import { Element, ElementArgs } from '../Element'; const CLASS_ROOT = 'pcui-divider'; @@ -20,4 +20,4 @@ class Divider extends Element { Element.register('divider', Divider); -export default Divider; +export { Divider }; diff --git a/src/components/Element/component.tsx b/src/components/Element/component.tsx index 0bd7761d..567f8824 100644 --- a/src/components/Element/component.tsx +++ b/src/components/Element/component.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import Element, { ElementArgs } from './index'; +import { Element as ElementClass, ElementArgs } from './index'; /** * The base class for all UI elements. Wraps a DOM element with the PCUI interface. */ -class Component

extends React.Component { +class Element

extends React.Component { static ctor: any; element: any; @@ -25,7 +25,7 @@ class Component

extends React.Component { constructor(props: P) { super(props); - this.elementClass = Element; + this.elementClass = ElementClass; if (props.onClick) { this.onClick = props.onClick; } @@ -125,4 +125,4 @@ class Component

extends React.Component { } } -export default Component; +export { Element }; diff --git a/src/components/Element/index.ts b/src/components/Element/index.ts index b4b6e1b3..16b537dd 100644 --- a/src/components/Element/index.ts +++ b/src/components/Element/index.ts @@ -1,5 +1,5 @@ -import { EventHandle, Events, HandleEvent, Observer } from '@playcanvas/observer'; import * as React from 'react'; +import { EventHandle, Events, HandleEvent, Observer } from '@playcanvas/observer'; import { CLASS_DISABLED, CLASS_ERROR, CLASS_FLASH, CLASS_FONT_REGULAR, CLASS_HIDDEN, CLASS_READONLY } from '../../class'; import { BindingBase } from '../../binding'; @@ -24,7 +24,7 @@ const SIMPLE_CSS_PROPERTIES = [ // Stores Element types by name and default arguments const elementRegistry: Map = new Map(); -export interface IBindable { +interface IBindable { /** * Sets the value of the Element. */ @@ -51,7 +51,7 @@ export interface IBindable { get renderChanges(): boolean, } -export interface IBindableArgs { +interface IBindableArgs { /** * Sets the value of the Element. */ @@ -66,7 +66,7 @@ export interface IBindableArgs { renderChanges?: boolean } -export interface IPlaceholder { +interface IPlaceholder { /** * Sets the placeholder text of the input. */ @@ -77,14 +77,14 @@ export interface IPlaceholder { get placeholder(): string } -export interface IPlaceholderArgs { +interface IPlaceholderArgs { /** * Sets the placeholder label that appears on the right of the input. */ placeholder?: string, } -export interface IFocusable { +interface IFocusable { /** * Focus on the element. If the input contains text and select is provided, the text will be selected on focus. */ @@ -96,14 +96,14 @@ export interface IFocusable { blur(): void } -export interface IParentArgs { +interface IParentArgs { /** * The children of the current component. */ children?: React.ReactNode } -export interface IFlexArgs { +interface IFlexArgs { /** * Sets whether the element uses flex layout. */ @@ -133,7 +133,7 @@ export interface IFlexArgs { /** * The arguments for the {@link Element} constructor. */ -export interface ElementArgs { +interface ElementArgs { /** * The HTMLElement to create this {@link Element} with. If not provided this Element will create one. */ @@ -1170,4 +1170,4 @@ declare global { } } -export default Element; +export { Element, ElementArgs, IBindable, IBindableArgs, IPlaceholder, IPlaceholderArgs, IFocusable, IParentArgs, IFlexArgs }; diff --git a/src/components/GradientPicker/component.stories.tsx b/src/components/GradientPicker/component.stories.tsx index 67e7255f..4e811dda 100644 --- a/src/components/GradientPicker/component.stories.tsx +++ b/src/components/GradientPicker/component.stories.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import GradientPicker from './component'; +import { GradientPicker } from './component'; import '../../scss/index.js'; diff --git a/src/components/GradientPicker/component.tsx b/src/components/GradientPicker/component.tsx index 63a54134..1df98c1d 100644 --- a/src/components/GradientPicker/component.tsx +++ b/src/components/GradientPicker/component.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; -import Element, { GradientPickerArgs } from './index'; -import BaseComponent from '../Element/component'; +import { Element } from '../Element/component'; +import { GradientPicker as GradientPickerClass, GradientPickerArgs } from './index'; /** * Represents a gradient picker. */ -class GradientPicker extends BaseComponent { +class GradientPicker extends Element { constructor(props: GradientPickerArgs) { super(props); - this.elementClass = Element; + this.elementClass = GradientPickerClass; } render() { @@ -17,6 +17,6 @@ class GradientPicker extends BaseComponent { } } -GradientPicker.ctor = Element; +GradientPicker.ctor = GradientPickerClass; -export default GradientPicker; +export { GradientPicker }; diff --git a/src/components/GradientPicker/index.ts b/src/components/GradientPicker/index.ts index 107e9722..9e0334e3 100644 --- a/src/components/GradientPicker/index.ts +++ b/src/components/GradientPicker/index.ts @@ -1,14 +1,14 @@ -import Element, { ElementArgs } from '../Element'; -import Overlay from '../Overlay'; -import Button from '../Button'; -import SelectInput from '../SelectInput'; -import NumericInput from '../NumericInput'; -import TextInput from '../TextInput'; -import Panel from '../Panel'; -import Canvas from '../Canvas'; -import Label from '../Label'; import { CurveSet, Curve, math } from 'playcanvas'; import { _hsv2rgb, _rgb2hsv } from '../../Math/color-value'; +import { Button } from '../Button'; +import { Canvas } from '../Canvas'; +import { Element, ElementArgs } from '../Element'; +import { Label } from '../Label'; +import { NumericInput } from '../NumericInput'; +import { Overlay } from '../Overlay'; +import { Panel } from '../Panel'; +import { SelectInput } from '../SelectInput'; +import { TextInput } from '../TextInput'; const CLASS_MULTIPLE_VALUES = 'pcui-multiple-values'; @@ -23,7 +23,7 @@ const CLASS_GRADIENT = 'pcui-gradient'; /** * The arguments for the {@link GradientPicker} constructor. */ -export interface GradientPickerArgs extends ElementArgs { +interface GradientPickerArgs extends ElementArgs { /** * If `true`, the picker will render changes to the gradient as they happen. Defaults to `true`. */ @@ -1444,4 +1444,4 @@ class GradientPicker extends Element { Element.register('div', GradientPicker); -export default GradientPicker; +export { GradientPicker, GradientPickerArgs }; diff --git a/src/components/GridView/component.stories.tsx b/src/components/GridView/component.stories.tsx index 17a63d29..590cc7b5 100644 --- a/src/components/GridView/component.stories.tsx +++ b/src/components/GridView/component.stories.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import GridView from './component'; -import GridViewItem from '../GridViewItem/component'; +import { GridView } from './component'; +import { GridViewItem } from '../GridViewItem/component'; import '../../scss/index.js'; diff --git a/src/components/GridView/component.tsx b/src/components/GridView/component.tsx index fcb25c80..6325140b 100644 --- a/src/components/GridView/component.tsx +++ b/src/components/GridView/component.tsx @@ -1,16 +1,16 @@ import * as React from 'react'; -import GridViewElement, { GridViewArgs } from './index'; -import GridViewItemElement from '../GridViewItem/index'; -import BaseComponent from '../Element/component'; +import { Element } from '../Element/component'; +import { GridView as GridViewClass, GridViewArgs } from './index'; +import { GridViewItem } from '../GridViewItem/index'; /** - * Represents a container that shows a flexible wrappable - * list of items that looks like a grid. Contains GridViewItem's. + * Represents a container that shows a flexible wrappable list of items that looks like a grid. + * Contains GridViewItems. */ -class GridView extends BaseComponent { +class GridView extends Element { constructor(props: GridViewArgs) { super(props); - this.element = new GridViewElement({ ...props }); + this.element = new GridViewClass({ ...props }); this.loadChildren(this.props.children, this.element); } @@ -20,7 +20,7 @@ class GridView extends BaseComponent { children = [children]; } children.forEach((child: any) => { - const childElement = new GridViewItemElement({ text: child.props.text }); + const childElement = new GridViewItem({ text: child.props.text }); element.append(childElement); this.loadChildren(child.props.children, childElement); }); @@ -35,6 +35,6 @@ class GridView extends BaseComponent { } } -GridView.ctor = GridViewElement; +GridView.ctor = GridViewClass; -export default GridView; +export { GridView }; diff --git a/src/components/GridView/index.ts b/src/components/GridView/index.ts index 4c1a8e13..a43d5e81 100644 --- a/src/components/GridView/index.ts +++ b/src/components/GridView/index.ts @@ -1,8 +1,8 @@ import { EventHandle } from '@playcanvas/observer'; -import Element from '../Element'; -import Container, { ContainerArgs } from '../Container'; -import GridViewItem from '../GridViewItem'; +import { Container, ContainerArgs } from '../Container'; +import { Element } from '../Element'; +import { GridViewItem } from '../GridViewItem'; const CLASS_ROOT = 'pcui-gridview'; const CLASS_VERTICAL = CLASS_ROOT + '-vertical'; @@ -10,7 +10,7 @@ const CLASS_VERTICAL = CLASS_ROOT + '-vertical'; /** * The arguments for the {@link GridView} constructor. */ -export interface GridViewArgs extends ContainerArgs { +interface GridViewArgs extends ContainerArgs { /** * If `true` the {@link GridView} layout will be vertical. */ @@ -287,4 +287,4 @@ class GridView extends Container { } } -export default GridView; +export { GridView, GridViewArgs }; diff --git a/src/components/GridViewItem/component.tsx b/src/components/GridViewItem/component.tsx index 345ce9c4..65e2aa1b 100644 --- a/src/components/GridViewItem/component.tsx +++ b/src/components/GridViewItem/component.tsx @@ -1,13 +1,13 @@ -import Element, { GridViewItemArgs } from './index'; -import BaseComponent from '../Element/component'; +import { GridViewItem as GridViewItemClass, GridViewItemArgs } from './index'; +import { Element } from '../Element/component'; /** * Represents a grid view item used in GridView. */ -class GridViewItem extends BaseComponent { +class GridViewItem extends Element { constructor(props: GridViewItemArgs) { super(props); - this.elementClass = Element; + this.elementClass = GridViewItemClass; } render() { @@ -15,6 +15,6 @@ class GridViewItem extends BaseComponent { } } -GridViewItem.ctor = Element; +GridViewItem.ctor = GridViewItemClass; -export default GridViewItem; +export { GridViewItem }; diff --git a/src/components/GridViewItem/index.ts b/src/components/GridViewItem/index.ts index 118a85cf..9038c2c0 100644 --- a/src/components/GridViewItem/index.ts +++ b/src/components/GridViewItem/index.ts @@ -1,9 +1,9 @@ import { Observer } from '@playcanvas/observer'; +import { BindingObserversToElement } from '../../binding/BindingObserversToElement'; +import { Container, ContainerArgs } from '../Container'; import { IFocusable } from '../Element'; -import Container, { ContainerArgs } from '../Container'; -import Label from '../Label'; -import BindingObserversToElement from '../../binding/BindingObserversToElement'; -import RadioButton from '../RadioButton'; +import { Label } from '../Label'; +import { RadioButton } from '../RadioButton'; const CLASS_ROOT = 'pcui-gridview-item'; const CLASS_ROOT_RADIO = 'pcui-gridview-radio-container'; @@ -14,7 +14,7 @@ const CLASS_RADIO_BUTTON = 'pcui-gridview-radiobtn'; /** * The arguments for the {@link GridViewItem} constructor. */ -export interface GridViewItemArgs extends ContainerArgs { +interface GridViewItemArgs extends ContainerArgs { /** * The type of the {@link GridViewItem}. Can be `null` or 'radio'. */ @@ -228,4 +228,4 @@ class GridViewItem extends Container implements IFocusable { } } -export default GridViewItem; +export { GridViewItem, GridViewItemArgs }; diff --git a/src/components/InfoBox/component.stories.tsx b/src/components/InfoBox/component.stories.tsx index 9b084f5e..3dcd2539 100644 --- a/src/components/InfoBox/component.stories.tsx +++ b/src/components/InfoBox/component.stories.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import InfoBox from './component'; +import { InfoBox } from './component'; import '../../scss/index.js'; diff --git a/src/components/InfoBox/component.tsx b/src/components/InfoBox/component.tsx index 2ccf5987..6cf49860 100644 --- a/src/components/InfoBox/component.tsx +++ b/src/components/InfoBox/component.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; -import Element, { InfoBoxArgs } from './index'; -import BaseComponent from '../Element/component'; +import { Element } from '../Element/component'; +import { InfoBox as InfoBoxClass, InfoBoxArgs } from './index'; /** * Represents an information box. */ -class InfoBox extends BaseComponent { +class InfoBox extends Element { constructor(props: InfoBoxArgs) { super(props); - this.elementClass = Element; + this.elementClass = InfoBoxClass; } render() { @@ -17,6 +17,6 @@ class InfoBox extends BaseComponent { } } -InfoBox.ctor = Element; +InfoBox.ctor = InfoBoxClass; -export default InfoBox; +export { InfoBox }; diff --git a/src/components/InfoBox/index.ts b/src/components/InfoBox/index.ts index c54f7a4d..9b77161d 100644 --- a/src/components/InfoBox/index.ts +++ b/src/components/InfoBox/index.ts @@ -1,12 +1,12 @@ -import Element from '../Element'; -import Container, { ContainerArgs } from '../Container'; +import { Container, ContainerArgs } from '../Container'; +import { Element } from '../Element'; const CLASS_INFOBOX = 'pcui-infobox'; /** * The arguments for the {@link InfoBox} constructor. */ -export interface InfoBoxArgs extends ContainerArgs { +interface InfoBoxArgs extends ContainerArgs { /** * The CSS code for an icon for the {@link InfoBox}. e.g. 'E401' (notice we omit the '\\' character). Defaults to ''. * Useful icon values for InfoBox are: @@ -130,4 +130,4 @@ class InfoBox extends Container { Element.register('infobox', InfoBox); -export default InfoBox; +export { InfoBox, InfoBoxArgs }; diff --git a/src/components/InputElement/index.ts b/src/components/InputElement/index.ts index bfe3325b..6f0c58e0 100644 --- a/src/components/InputElement/index.ts +++ b/src/components/InputElement/index.ts @@ -1,12 +1,12 @@ import { CLASS_FOCUS } from '../../class'; -import Element, { ElementArgs, IBindable, IBindableArgs, IFocusable, IPlaceholder, IPlaceholderArgs } from '../Element'; +import { Element, ElementArgs, IBindable, IBindableArgs, IFocusable, IPlaceholder, IPlaceholderArgs } from '../Element'; const CLASS_INPUT_ELEMENT = 'pcui-input-element'; /** * The arguments for the {@link InputElement} constructor. */ -export interface InputElementArgs extends ElementArgs, IBindableArgs, IPlaceholderArgs { +interface InputElementArgs extends ElementArgs, IBindableArgs, IPlaceholderArgs { /** * Sets whether pressing Enter will blur (unfocus) the field. Defaults to `true`. */ @@ -274,4 +274,4 @@ abstract class InputElement extends Element implements IBindable, IFocusable, IP } } -export default InputElement; +export { InputElement, InputElementArgs }; diff --git a/src/components/Label/component.stories.tsx b/src/components/Label/component.stories.tsx index 21a4ad39..feb361ca 100644 --- a/src/components/Label/component.stories.tsx +++ b/src/components/Label/component.stories.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import Label from './component'; +import { Label } from './component'; import '../../scss/index.js'; diff --git a/src/components/Label/component.tsx b/src/components/Label/component.tsx index 22983e0b..e7556796 100644 --- a/src/components/Label/component.tsx +++ b/src/components/Label/component.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; -import Element, { LabelArgs } from './index'; -import BaseComponent from '../Element/component'; +import { Element } from '../Element/component'; +import { Label as LabelClass, LabelArgs } from './index'; /** * The Label is a simple span element that displays some text. */ -class Component extends BaseComponent { +class Label extends Element { constructor(props: LabelArgs = {}) { super(props); - this.elementClass = Element; + this.elementClass = LabelClass; } render() { @@ -17,6 +17,6 @@ class Component extends BaseComponent { } } -Component.ctor = Element; +Label.ctor = LabelClass; -export default Component; +export { Label }; diff --git a/src/components/Label/index.ts b/src/components/Label/index.ts index 94274ee8..afb9ac63 100644 --- a/src/components/Label/index.ts +++ b/src/components/Label/index.ts @@ -1,12 +1,12 @@ import { CLASS_DEFAULT_MOUSEDOWN, CLASS_MULTIPLE_VALUES } from '../../class'; -import Element, { ElementArgs, IBindable, IBindableArgs, IFlexArgs, IPlaceholder, IPlaceholderArgs } from '../Element'; +import { Element, ElementArgs, IBindable, IBindableArgs, IFlexArgs, IPlaceholder, IPlaceholderArgs } from '../Element'; const CLASS_LABEL = 'pcui-label'; /** * The arguments for the {@link Label} constructor. */ -export interface LabelArgs extends ElementArgs, IBindableArgs, IPlaceholderArgs, IFlexArgs { +interface LabelArgs extends ElementArgs, IBindableArgs, IPlaceholderArgs, IFlexArgs { /** * Sets the text of the Label. Defaults to ''. */ @@ -159,4 +159,4 @@ class Label extends Element implements IPlaceholder, IBindable { Element.register('label', Label); -export default Label; +export { Label, LabelArgs }; diff --git a/src/components/LabelGroup/component.stories.tsx b/src/components/LabelGroup/component.stories.tsx index 8340f0a0..e48f968a 100644 --- a/src/components/LabelGroup/component.stories.tsx +++ b/src/components/LabelGroup/component.stories.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import LabelGroup from './component'; -import TextInput from '../TextInput/component'; +import { LabelGroup } from './component'; +import { TextInput } from '../TextInput/component'; import '../../scss/index.js'; diff --git a/src/components/LabelGroup/component.tsx b/src/components/LabelGroup/component.tsx index b5364501..dae8f82c 100644 --- a/src/components/LabelGroup/component.tsx +++ b/src/components/LabelGroup/component.tsx @@ -1,14 +1,14 @@ -import Element, { LabelGroupArgs } from './index'; -import BaseComponent from '../Element/component'; import { JSXElementConstructor, ReactElement } from 'react'; +import { Element } from '../Element/component'; +import { LabelGroup as LabelGroupClass, LabelGroupArgs } from './index'; /** * Represents a group of a Label and a Element. Useful for rows of labeled fields. */ -class LabelGroup extends BaseComponent { +class LabelGroup extends Element { constructor(props: LabelGroupArgs) { super(props); - this.elementClass = Element; + this.elementClass = LabelGroupClass; } attachElement = (nodeElement: HTMLElement, containerElement: any) => { @@ -21,12 +21,12 @@ class LabelGroup extends BaseComponent { // casting child as a single ReactElement as we have confirmed it is above const child = this.props.children as ReactElement; const fieldProps = child.props as Record; - // check if the ReactElement contains an instance of a BaseComponent as its type, confirming it is a PCUI react component - if (!((child.type as JSXElementConstructor).prototype instanceof BaseComponent)) { + // check if the ReactElement contains an instance of an Element as its type, confirming it is a PCUI react component + if (!((child.type as JSXElementConstructor).prototype instanceof Element)) { throw new Error(childrenErrorMessage); } - // it's safe to cast the ReactElement type as a BaseComponent as we have confirmed it is a BaseComponent above - const fieldClass = (child.type as typeof BaseComponent).ctor; + // it's safe to cast the ReactElement type as a BaseComponent as we have confirmed it is an Element above + const fieldClass = (child.type as typeof Element).ctor; const labelField = new fieldClass({ ...fieldProps }); if (child.props.link) { labelField.link(fieldProps.link.observer, fieldProps.link.path); @@ -45,6 +45,6 @@ class LabelGroup extends BaseComponent { } } -LabelGroup.ctor = Element; +LabelGroup.ctor = LabelGroupClass; -export default LabelGroup; +export { LabelGroup }; diff --git a/src/components/LabelGroup/index.ts b/src/components/LabelGroup/index.ts index c7e1c143..eabede90 100644 --- a/src/components/LabelGroup/index.ts +++ b/src/components/LabelGroup/index.ts @@ -1,6 +1,6 @@ -import Element from '../Element'; -import Container, { ContainerArgs } from '../Container'; -import Label from '../Label'; +import { Container, ContainerArgs } from '../Container'; +import { Element } from '../Element'; +import { Label } from '../Label'; const CLASS_LABEL_GROUP = 'pcui-label-group'; const CLASS_LABEL_TOP = CLASS_LABEL_GROUP + '-align-top'; @@ -8,7 +8,7 @@ const CLASS_LABEL_TOP = CLASS_LABEL_GROUP + '-align-top'; /** * The arguments for the {@link LabelGroup} constructor. */ -export interface LabelGroupArgs extends ContainerArgs { +interface LabelGroupArgs extends ContainerArgs { /** * The label text. Defaults to 'Label'. */ @@ -108,4 +108,4 @@ class LabelGroup extends Container { Element.register('labelgroup', LabelGroup); -export default LabelGroup; +export { LabelGroup, LabelGroupArgs }; diff --git a/src/components/Menu/component.stories.tsx b/src/components/Menu/component.stories.tsx index 7d5ea22d..6686e3e5 100644 --- a/src/components/Menu/component.stories.tsx +++ b/src/components/Menu/component.stories.tsx @@ -2,11 +2,11 @@ import * as React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { action } from '@storybook/addon-actions'; -import Menu from './component'; -import MenuElement from '../Menu'; -import Container from '../Container/component'; -import Label from '../Label/component'; -import LabelElement from '../Label'; +import { Menu } from './component'; +import { Menu as MenuClass } from '../Menu'; +import { Container } from '../Container/component'; +import { Label } from '../Label/component'; +import { Label as LabelClass } from '../Label'; import '../../scss/index.js'; @@ -20,10 +20,10 @@ type Story = StoryObj; window.addEventListener('contextmenu', (evt: MouseEvent) => { const target = evt.target as HTMLElement; - if (target.ui instanceof LabelElement) { + if (target.ui instanceof LabelClass) { const element = document.querySelector('.pcui-menu'); if (element) { - const menu = element.ui as MenuElement; + const menu = element.ui as MenuClass; evt.stopPropagation(); evt.preventDefault(); @@ -43,6 +43,6 @@ export const Main: Story = { { text: 'Bar', onSelect: action('World -> Bar'), onIsEnabled: () => false } ] } ]}/> -