From a3b5f722d51f5d57af89ec6c016fb8d4aea97b19 Mon Sep 17 00:00:00 2001 From: Loka Date: Wed, 2 Aug 2023 23:06:39 -0400 Subject: [PATCH 1/5] feat: update input TS file --- .../src/components/Button/Button.d.ts | 10 +- .../src/components/Input/Input.d.ts | 123 ++++++++++++++++-- 2 files changed, 116 insertions(+), 17 deletions(-) diff --git a/packages/@lightningjs/ui-components/src/components/Button/Button.d.ts b/packages/@lightningjs/ui-components/src/components/Button/Button.d.ts index bdcbb0c54..4ad5e6852 100644 --- a/packages/@lightningjs/ui-components/src/components/Button/Button.d.ts +++ b/packages/@lightningjs/ui-components/src/components/Button/Button.d.ts @@ -21,7 +21,7 @@ import { Color, StylePartial } from '../../types/lui'; import Surface, { SurfaceStyle } from '../Surface'; import type { TextBoxStyle } from '../TextBox'; // text in Button is all using our own version of TextBox -export type ButtonStyle = SurfaceStyle & { +type ButtonStyle = SurfaceStyle & { justify: 'center' | 'left' | 'right'; minWidth: number; paddingX: number; @@ -95,14 +95,14 @@ declare class Button< | typeof lng.Component | Array>; - get style(): ButtonStyle; - set style(v: StylePartial); - /** * Button text */ title?: string; + get style(): ButtonStyle; + set style(v: StylePartial); + // tags get _Prefix(): lng.Component; get _Suffix(): lng.Component; @@ -110,4 +110,4 @@ declare class Button< get _Title(): lng.Component; } -export default Button; +export { Button as default, ButtonStyle }; diff --git a/packages/@lightningjs/ui-components/src/components/Input/Input.d.ts b/packages/@lightningjs/ui-components/src/components/Input/Input.d.ts index 0020a00bf..f4e1a85bd 100644 --- a/packages/@lightningjs/ui-components/src/components/Input/Input.d.ts +++ b/packages/@lightningjs/ui-components/src/components/Input/Input.d.ts @@ -21,7 +21,7 @@ import Button, { ButtonStyle } from '../Button'; import { TextBoxStyle } from '../TextBox'; import { StylePartial } from '../../types/lui'; -export type InputStyle = ButtonStyle & { +type InputStyle = ButtonStyle & { cursorStyle: object; eyebrowTextStyle: TextBoxStyle; helpTextStyle: TextBoxStyle; @@ -30,17 +30,121 @@ export type InputStyle = ButtonStyle & { paddingY: number; }; -export default class Input extends Button { +declare namespace Input { + export interface TemplateSpec extends Button.TemplateSpec { + /** + * actualTitle is a proxy element for title which is used to store actual value typed when password is enabled + */ + actualTitle?: string; + + /** + * cursor indicates the current insertion or deletion position within the title + */ + cursor: string; + + /** + * eyebrow of input container. + */ + eyebrow?: string; + + /** + * help text for the input container. + */ + helpText?: string; + + /** + * when true, the listening property enables the input to accept changes from methods like clear, insert, and backspace. When false, these methods have no effect on the input + */ + listening?: boolean; + + /** + * specifies the character used as a mask when the password is set to true. + */ + mask?: string; + + /** + * determines whether input should be masked + */ + password?: boolean; + + /** + * index of the current cursor positions + */ + position?: number; + } +} + +declare class Input< + TemplateSpec extends Input.TemplateSpec = Input.TemplateSpec, + TypeConfig extends lng.Component.TypeConfig = lng.Component.TypeConfig +> extends Button { + /** + * actualTitle is a proxy element for title which is used to store actual value typed when password is enabled + */ actualTitle?: string; + + /** + * cursor indicates the current insertion or deletion position within the title + */ cursor: string; + + /** + * eyebrow of input container. + */ eyebrow?: string; + + /** + * help text for the input container. + */ helpText?: string; - listening: boolean; + + /** + * when true, the listening property enables the input to accept changes from methods like clear, insert, and backspace. When false, these methods have no effect on the input + */ + listening?: boolean; + + /** + * specifies the character used as a mask when the password is set to true. + */ mask?: string; + + /** + * determines whether input should be masked + */ password?: boolean; + + /** + * index of the current cursor positions + */ position?: number; - value?: string; - get isCursorActive(): boolean; + + // methods + + /** + * clears the content of the input container + */ + clear: () => void; + + /** + * inserts the content at the current cursor position within the input container + */ + insert: (content: string) => void; + + /** + * Removes the character before the current cursor position + */ + backspace: () => void; + + /** + * moves the cursor one position to the left + */ + moveLeft: () => void; + + /** + * moves the cursor one position to the right + */ + moveRight: () => void; + get style(): InputStyle; set style(v: StylePartial); @@ -49,11 +153,6 @@ export default class Input extends Button { get _HelpText(): lng.Component; get _Cursor(): lng.Component; get _HiddenContent(): lng.Component; - - // public methods - clear: () => void; - insert: (content: string) => void; - backspace: () => void; - moveLeft: () => void; - moveRight: () => void; } + +export { Input as default, InputStyle }; From 32042644ce48c08541458a3347b0a1c8c30b18e4 Mon Sep 17 00:00:00 2001 From: Loka Date: Wed, 2 Aug 2023 23:14:50 -0400 Subject: [PATCH 2/5] fix: revert changes --- .../src/components/Button/Button.d.ts | 10 +- .../src/components/Input/Input.d.ts | 123 ++---------------- 2 files changed, 17 insertions(+), 116 deletions(-) diff --git a/packages/@lightningjs/ui-components/src/components/Button/Button.d.ts b/packages/@lightningjs/ui-components/src/components/Button/Button.d.ts index 4ad5e6852..bdcbb0c54 100644 --- a/packages/@lightningjs/ui-components/src/components/Button/Button.d.ts +++ b/packages/@lightningjs/ui-components/src/components/Button/Button.d.ts @@ -21,7 +21,7 @@ import { Color, StylePartial } from '../../types/lui'; import Surface, { SurfaceStyle } from '../Surface'; import type { TextBoxStyle } from '../TextBox'; // text in Button is all using our own version of TextBox -type ButtonStyle = SurfaceStyle & { +export type ButtonStyle = SurfaceStyle & { justify: 'center' | 'left' | 'right'; minWidth: number; paddingX: number; @@ -95,14 +95,14 @@ declare class Button< | typeof lng.Component | Array>; + get style(): ButtonStyle; + set style(v: StylePartial); + /** * Button text */ title?: string; - get style(): ButtonStyle; - set style(v: StylePartial); - // tags get _Prefix(): lng.Component; get _Suffix(): lng.Component; @@ -110,4 +110,4 @@ declare class Button< get _Title(): lng.Component; } -export { Button as default, ButtonStyle }; +export default Button; diff --git a/packages/@lightningjs/ui-components/src/components/Input/Input.d.ts b/packages/@lightningjs/ui-components/src/components/Input/Input.d.ts index f4e1a85bd..0020a00bf 100644 --- a/packages/@lightningjs/ui-components/src/components/Input/Input.d.ts +++ b/packages/@lightningjs/ui-components/src/components/Input/Input.d.ts @@ -21,7 +21,7 @@ import Button, { ButtonStyle } from '../Button'; import { TextBoxStyle } from '../TextBox'; import { StylePartial } from '../../types/lui'; -type InputStyle = ButtonStyle & { +export type InputStyle = ButtonStyle & { cursorStyle: object; eyebrowTextStyle: TextBoxStyle; helpTextStyle: TextBoxStyle; @@ -30,121 +30,17 @@ type InputStyle = ButtonStyle & { paddingY: number; }; -declare namespace Input { - export interface TemplateSpec extends Button.TemplateSpec { - /** - * actualTitle is a proxy element for title which is used to store actual value typed when password is enabled - */ - actualTitle?: string; - - /** - * cursor indicates the current insertion or deletion position within the title - */ - cursor: string; - - /** - * eyebrow of input container. - */ - eyebrow?: string; - - /** - * help text for the input container. - */ - helpText?: string; - - /** - * when true, the listening property enables the input to accept changes from methods like clear, insert, and backspace. When false, these methods have no effect on the input - */ - listening?: boolean; - - /** - * specifies the character used as a mask when the password is set to true. - */ - mask?: string; - - /** - * determines whether input should be masked - */ - password?: boolean; - - /** - * index of the current cursor positions - */ - position?: number; - } -} - -declare class Input< - TemplateSpec extends Input.TemplateSpec = Input.TemplateSpec, - TypeConfig extends lng.Component.TypeConfig = lng.Component.TypeConfig -> extends Button { - /** - * actualTitle is a proxy element for title which is used to store actual value typed when password is enabled - */ +export default class Input extends Button { actualTitle?: string; - - /** - * cursor indicates the current insertion or deletion position within the title - */ cursor: string; - - /** - * eyebrow of input container. - */ eyebrow?: string; - - /** - * help text for the input container. - */ helpText?: string; - - /** - * when true, the listening property enables the input to accept changes from methods like clear, insert, and backspace. When false, these methods have no effect on the input - */ - listening?: boolean; - - /** - * specifies the character used as a mask when the password is set to true. - */ + listening: boolean; mask?: string; - - /** - * determines whether input should be masked - */ password?: boolean; - - /** - * index of the current cursor positions - */ position?: number; - - // methods - - /** - * clears the content of the input container - */ - clear: () => void; - - /** - * inserts the content at the current cursor position within the input container - */ - insert: (content: string) => void; - - /** - * Removes the character before the current cursor position - */ - backspace: () => void; - - /** - * moves the cursor one position to the left - */ - moveLeft: () => void; - - /** - * moves the cursor one position to the right - */ - moveRight: () => void; - + value?: string; + get isCursorActive(): boolean; get style(): InputStyle; set style(v: StylePartial); @@ -153,6 +49,11 @@ declare class Input< get _HelpText(): lng.Component; get _Cursor(): lng.Component; get _HiddenContent(): lng.Component; -} -export { Input as default, InputStyle }; + // public methods + clear: () => void; + insert: (content: string) => void; + backspace: () => void; + moveLeft: () => void; + moveRight: () => void; +} From c45d5398a0b32afce358b5b6bf87fa8fb0a8dc4f Mon Sep 17 00:00:00 2001 From: Loka Date: Thu, 3 Aug 2023 15:15:05 -0400 Subject: [PATCH 3/5] feat: add tootip declarations --- .../src/components/Tooltip/Tooltip.d.ts | 40 ++++++++++++++++++- .../src/components/Tooltip/Tooltip.mdx | 23 ++++++----- 2 files changed, 50 insertions(+), 13 deletions(-) diff --git a/packages/@lightningjs/ui-components/src/components/Tooltip/Tooltip.d.ts b/packages/@lightningjs/ui-components/src/components/Tooltip/Tooltip.d.ts index b6e515757..9777f6f42 100644 --- a/packages/@lightningjs/ui-components/src/components/Tooltip/Tooltip.d.ts +++ b/packages/@lightningjs/ui-components/src/components/Tooltip/Tooltip.d.ts @@ -21,7 +21,7 @@ import Base from '../Base'; import type { Color, StylePartial } from '../../types/lui'; import type { TextBoxStyle } from '../TextBox'; -export type TooltipStyle = { +type TooltipStyle = { backgroundColor: Color; marginBottom: number; paddingX: number; @@ -33,10 +33,44 @@ export type TooltipStyle = { transition: lng.types.TransitionSettings; }; -export default class Tooltip extends Base { +declare namespace Tooltip { + export interface TemplateSpec extends Base.TemplateSpec { + /** + * Text of tooltip content + */ + title?: string; + + /** + * The amount of time, in milliseconds, before the tooltip is displayed after being focused + */ + delayVisible?: number; + + /** + * The amount of time, in milliseconds, the tooltip is displayed before transitioning out of the display + */ + timeVisible?: number; + } +} + +declare class Tooltip< + TemplateSpec extends Tooltip.TemplateSpec = Tooltip.TemplateSpec, + TypeConfig extends lng.Component.TypeConfig = lng.Component.TypeConfig +> extends Base { + /** + * text of tooltip + */ title?: string; + + /** + * the amount of time, in milliseconds, before the tooltip is displayed after being focused + */ delayVisible?: number; + + /** + * the amount of time, in milliseconds, the tooltip is displayed before transitioning out of the display + */ timeVisible?: number; + get style(): TooltipStyle; set style(v: StylePartial); @@ -44,3 +78,5 @@ export default class Tooltip extends Base { get _Background(): lng.Component; get _Text(): lng.Component; } + +export default Tooltip; diff --git a/packages/@lightningjs/ui-components/src/components/Tooltip/Tooltip.mdx b/packages/@lightningjs/ui-components/src/components/Tooltip/Tooltip.mdx index c3d9d307f..359717586 100644 --- a/packages/@lightningjs/ui-components/src/components/Tooltip/Tooltip.mdx +++ b/packages/@lightningjs/ui-components/src/components/Tooltip/Tooltip.mdx @@ -75,17 +75,18 @@ Tooltip is only visible on focus of the parent. | ------------ | ------ | --------- | ----------------------------------------------------------------------------------------------------- | | delayVisible | number | undefined | the amount of time, in milliseconds, before the tooltip is displayed after being focused | | timeVisible | number | undefined | the amount of time, in milliseconds, the tooltip is displayed before transitioning out of the display | -| title | string | undefined | tool tip text goes here | +| title | string | undefined | text of tooltip content | ### Style Properties -| name | type | description | -| --------------- | ---------------- | ---------------------------------------------------- | -| backgroundColor | number | background color of tooltip | -| marginBottom | number | space below tooltip | -| paddingX | number | space on left and right sides of tooltip text | -| paddingY | number | space above and below tooltip text | -| pointerW | number | width of point beneath rounded rectangle of tooltip | -| pointerH | number | height of point beneath rounded rectangle of tooltip | -| radius | number \| array | radius of tooltip corners | -| textStyle | string \| object | text styles used for Tooltip's text | +| name | type | description | +| --------------- | -------------------------------- | ---------------------------------------------------- | +| backgroundColor | number | background color of tooltip | +| marginBottom | number | space below tooltip | +| paddingX | number | space on left and right sides of tooltip text | +| paddingY | number | space above and below tooltip text | +| pointerW | number | width of point beneath rounded rectangle of tooltip | +| pointerH | number | height of point beneath rounded rectangle of tooltip | +| radius | number \| array | radius of tooltip corners | +| textStyle | string \| object | text styles used for Tooltip's text | +| transition | | transition to apply to text | From f4c2153b7cceee1bd0f29a234e6015250f360749 Mon Sep 17 00:00:00 2001 From: Loka Date: Thu, 3 Aug 2023 15:44:56 -0400 Subject: [PATCH 4/5] chore: remove type --- .../ui-components/src/components/Tooltip/Tooltip.d.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/@lightningjs/ui-components/src/components/Tooltip/Tooltip.d.ts b/packages/@lightningjs/ui-components/src/components/Tooltip/Tooltip.d.ts index 9777f6f42..ab29b501e 100644 --- a/packages/@lightningjs/ui-components/src/components/Tooltip/Tooltip.d.ts +++ b/packages/@lightningjs/ui-components/src/components/Tooltip/Tooltip.d.ts @@ -18,8 +18,8 @@ import lng from '@lightningjs/core'; import Base from '../Base'; -import type { Color, StylePartial } from '../../types/lui'; -import type { TextBoxStyle } from '../TextBox'; +import { Color, StylePartial } from '../../types/lui'; +import { TextBoxStyle } from '../TextBox'; type TooltipStyle = { backgroundColor: Color; @@ -79,4 +79,4 @@ declare class Tooltip< get _Text(): lng.Component; } -export default Tooltip; +export { Tooltip as default, TooltipStyle }; From 2b2775f85240d53454975e2e81b6aa0d9cd70fc0 Mon Sep 17 00:00:00 2001 From: Loka Date: Thu, 3 Aug 2023 16:13:31 -0400 Subject: [PATCH 5/5] fix: update return type --- .../ui-components/src/components/Tooltip/Tooltip.d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/@lightningjs/ui-components/src/components/Tooltip/Tooltip.d.ts b/packages/@lightningjs/ui-components/src/components/Tooltip/Tooltip.d.ts index ab29b501e..67be32ff7 100644 --- a/packages/@lightningjs/ui-components/src/components/Tooltip/Tooltip.d.ts +++ b/packages/@lightningjs/ui-components/src/components/Tooltip/Tooltip.d.ts @@ -19,7 +19,7 @@ import lng from '@lightningjs/core'; import Base from '../Base'; import { Color, StylePartial } from '../../types/lui'; -import { TextBoxStyle } from '../TextBox'; +import TextBox, { TextBoxStyle } from '../TextBox'; type TooltipStyle = { backgroundColor: Color; @@ -76,7 +76,7 @@ declare class Tooltip< // tags get _Background(): lng.Component; - get _Text(): lng.Component; + get _Text(): TextBox; } export { Tooltip as default, TooltipStyle };