@lightningtv/solid-ui - npm Package Compare versions

Comparing version 0.29.11 to 0.30.0

components/Icon/Icon.types.ts

@@ -18,3 +18,3 @@ /*
 
-import type { NodeStyles, IntrinsicNodeProps } from '@lightningtv/solid';
+import type { NodeStyles, NodeProps } from '@lightningtv/solid';
 import type { ComponentStyleConfig, NodeStyleSet, Tone } from '../../types/types.js';
@@ -32,3 +32,3 @@ import type { UIComponentProps } from '../../types/interfaces.js';
    */
-  height?: IntrinsicNodeProps['height'];
+  height?: NodeProps['height'];
 
@@ -38,3 +38,3 @@ /**
    */
-  src?: IntrinsicNodeProps['src'];
+  src?: NodeProps['src'];
 
@@ -44,3 +44,3 @@ /**
    */
-  width?: IntrinsicNodeProps['width'];
+  width?: NodeProps['width'];
 }
@@ -47,0 +47,0 @@

dist/components/Artwork/Artwork.jsx

@@ -56,5 +56,3 @@ /*
     const gradientColor = createMemo(() => getGradientColor(props, tone()));
-    return (<View {...props} color={color()} colorBottom={gradientColor()} pivotX={props.imageScalePivotX} pivotY={props.imageScalePivotX} scale={props.imageScale} src={src()} 
-    // @ts-expect-error TODO type needs to be fixed in framework
-    style={[
+    return (<View {...props} color={color()} colorBottom={gradientColor()} pivotX={props.imageScalePivotX} pivotY={props.imageScalePivotX} scale={props.imageScale} src={src()} style={[
             props.style, //
@@ -61,0 +59,0 @@ styles.Container.tones[props.tone ?? styles.tone],

dist/components/Badge/Badge.jsx

@@ -24,5 +24,3 @@ /*
     // borderWidth={props.strokeWidth} // TODO clew uses strokeWidth, but we currently don't account for nested properties (border.width)
-    color={props.backgroundColor} borderRadius={props.radius} 
-    // @ts-expect-error TODO type needs to be fixed in framework
-    style={[
+    color={props.backgroundColor} borderRadius={props.radius} style={[
             props.style, //
@@ -29,0 +27,0 @@ styles.Container.tones[props.tone ?? styles.tone],

dist/components/Button/Button.jsx

@@ -31,5 +31,3 @@ /*
 const ButtonContainer = props => {
-    return (<View {...props} color={props.backgroundColor} justifyContent={props.justify} itemSpacing={props.contentSpacing} 
-    // @ts-expect-error TODO type needs to be fixed in framework
-    style={[
+    return (<View {...props} color={props.backgroundColor} justifyContent={props.justify} itemSpacing={props.contentSpacing} style={[
             props.style, //
@@ -36,0 +34,0 @@ styles.Container.tones?.[props.tone ?? styles.tone],

dist/components/Checkbox/Checkbox.jsx

@@ -29,5 +29,3 @@ /*
                 ]}/>)
-            : ''} 
-    // @ts-expect-error TODO type needs to be fixed in framework
-    style={[
+            : ''} style={[
             props.style, //
@@ -34,0 +32,0 @@ styles.Container.tones[props.tone ?? styles.tone],

dist/components/Column/Column.jsx

@@ -27,5 +27,3 @@ /*
 const Column = props => {
-    return (<View {...props} onUp={chainFunctions(props.onUp, onUp)} onDown={chainFunctions(props.onDown, onDown)} selected={props.selected || 0} forwardFocus={onGridFocus} onFocus={chainFunctions(props.onFocus, props.onSelectedChanged && handleOnSelect(props.onSelectedChanged))} onLayout={props.selected ? chainFunctions(props.onLayout, scroll) : props.onLayout} onSelectedChanged={chainFunctions(props.onSelectedChanged, props.scroll !== 'none' ? scroll : undefined)} 
-    // @ts-expect-error TODO type needs to be fixed in framework
-    style={[
+    return (<View {...props} onUp={chainFunctions(props.onUp, onUp)} onDown={chainFunctions(props.onDown, onDown)} selected={props.selected || 0} forwardFocus={onGridFocus} onFocus={chainFunctions(props.onFocus, props.onSelectedChanged && handleOnSelect(props.onSelectedChanged))} onLayout={props.selected ? chainFunctions(props.onLayout, scroll) : props.onLayout} onSelectedChanged={chainFunctions(props.onSelectedChanged, props.scroll !== 'none' ? scroll : undefined)} style={[
             props.style, //
@@ -32,0 +30,0 @@ styles.Container.tones[props.tone ?? styles.tone],

dist/components/FocusRing/FocusRing.jsx

@@ -21,5 +21,3 @@ /*
 const FocusRing = (props) => {
-    return (<View {...props} 
-    // @ts-expect-error TODO type needs to be fixed in framework
-    style={[
+    return (<View {...props} style={[
             props.style, //
@@ -26,0 +24,0 @@ styles.Container.tones[props.tone ?? styles.tone],

dist/components/FPSCounter/FPSCounter.jsx

@@ -167,3 +167,3 @@ /*
           <Text fontSize={infoFontSize} style={fpsLabel} x={230}>
-            {renderableTexturesLoadedSignal()}
+            {renderableTexturesLoadedSignal().toString()}
           </Text>
@@ -177,3 +177,3 @@ </View>
           <Text fontSize={infoFontSize} style={fpsLabel} x={230}>
-            {loadedTexturesSignal()}
+            {loadedTexturesSignal().toString()}
           </Text>
@@ -180,0 +180,0 @@ </View>

dist/components/Icon/Icon.jsx

@@ -21,5 +21,3 @@ /*
 const Icon = props => {
-    return (<View {...props} 
-    // @ts-expect-error TODO type needs to be fixed in framework
-    style={[
+    return (<View {...props} style={[
             props.style, //
@@ -26,0 +24,0 @@ styles.Container.tones?.[props.tone ?? styles.tone],

dist/components/Icon/Icon.types.d.ts

@@ -1,2 +0,2 @@
-import type { NodeStyles, IntrinsicNodeProps } from '@lightningtv/solid';
+import type { NodeStyles, NodeProps } from '@lightningtv/solid';
 import type { ComponentStyleConfig, NodeStyleSet, Tone } from '../../types/types.js';
@@ -12,11 +12,11 @@ import type { UIComponentProps } from '../../types/interfaces.js';
      */
-    height?: IntrinsicNodeProps['height'];
+    height?: NodeProps['height'];
     /**
      * path to image or inline SVG XML
      */
-    src?: IntrinsicNodeProps['src'];
+    src?: NodeProps['src'];
     /**
      * icon width
      */
-    width?: IntrinsicNodeProps['width'];
+    width?: NodeProps['width'];
 }
@@ -23,0 +23,0 @@ export interface IconStyleProperties {

dist/components/Input/Input.jsx

@@ -83,5 +83,3 @@ /*
     // borderWidth={props.strokeWidth} // TODO clew uses strokeWidth, but we currently don't account for nested properties (border.width)
-    color={props.backgroundColor} justifyContent={props.justify} borderRadius={props.radius} position={position()} onLeft={onLeft} onRight={onRight} 
-    // @ts-expect-error TODO type needs to be fixed in framework
-    style={[
+    color={props.backgroundColor} justifyContent={props.justify} borderRadius={props.radius} position={position()} onLeft={onLeft} onRight={onRight} style={[
             props.style, //
@@ -88,0 +86,0 @@ styles.Container.tones[props.tone ?? styles.tone],

dist/components/Key/Key.jsx

@@ -36,5 +36,3 @@ /*
     const keySpacing = createMemo(() => getKeySpacing(props));
-    return (<ButtonContainer {...props} 
-    // @ts-expect-error TODO type needs to be fixed in framework
-    style={[
+    return (<ButtonContainer {...props} style={[
             props.style, //
@@ -41,0 +39,0 @@ styles.Container.tones?.[tone()],

dist/components/Keyboard/KeyboardBase.jsx

@@ -95,5 +95,3 @@ /*
     };
-    return (<View {...props} forwardFocus={0} 
-    // @ts-expect-error TODO type needs to be fixed in framework
-    style={[
+    return (<View {...props} forwardFocus={0} style={[
             props.style, //
@@ -100,0 +98,0 @@ styles.Container.tones[tone()],

dist/components/Label/Label.jsx

@@ -22,5 +22,3 @@ /**
 const Label = props => {
-    return (<View {...props} color={props.backgroundColor} borderRadius={props.radius} 
-    // @ts-expect-error TODO type needs to be fixed in framework
-    style={[
+    return (<View {...props} color={props.backgroundColor} borderRadius={props.radius} style={[
             props.style, //
@@ -27,0 +25,0 @@ styles.Container.tones[props.tone || styles.tone],

dist/components/ProgressBar/ProgressBar.jsx

@@ -21,5 +21,3 @@ /*
 const ProgressBar = (props) => {
-    return (<View {...props} borderRadius={props.radius} color={props.barColor} 
-    // @ts-expect-error TODO type needs to be fixed in framework
-    style={[
+    return (<View {...props} borderRadius={props.radius} color={props.barColor} style={[
             props.style, //
@@ -26,0 +24,0 @@ styles.Container.tones[props.tone ?? styles.tone],

dist/components/Radio/Radio.jsx

@@ -22,15 +22,15 @@ /*
     return checked != undefined && props.checked
-        ? props.knobColorChecked ??
+        ? (props.knobColorChecked ??
             styles.Knob.tones?.[props.tone ?? styles.tone]?.colorChecked ??
-            styles.Knob.base.colorChecked
-        : props.knobColor ?? styles.Knob.tones?.[props.tone ?? styles.tone]?.color ?? styles.Knob.base.color;
+            styles.Knob.base.colorChecked)
+        : (props.knobColor ?? styles.Knob.tones?.[props.tone ?? styles.tone]?.color ?? styles.Knob.base.color);
 };
 const getColor = (checked, props) => {
     return checked != undefined && props.checked
-        ? props.backgroundColorChecked ??
+        ? (props.backgroundColorChecked ??
             styles.Container.tones?.[props.tone ?? styles.tone]?.colorChecked ??
-            styles.Container.base.colorChecked
-        : props.backgroundColor ??
+            styles.Container.base.colorChecked)
+        : (props.backgroundColor ??
             styles.Container.tones?.[props.tone ?? styles.tone]?.color ??
-            styles.Container.base.color;
+            styles.Container.base.color);
 };
@@ -40,5 +40,3 @@ const Radio = props => {
     const backgroundColor = createMemo(() => getColor(props.checked, props));
-    return (<View {...props} color={backgroundColor()} 
-    // @ts-expect-error TODO type needs to be fixed in framework
-    style={[
+    return (<View {...props} color={backgroundColor()} style={[
             props.style, //
@@ -48,5 +46,5 @@ styles.Container.tones?.[props.tone ?? styles.tone],
         ]} states={{ checked: props.checked }} children={props.checked
-            ? props.children ?? (<View color={knobColor()} mount={0.5} x={(styles.Container.base.width ?? 0) / 2} y={(styles.Container.base.height ?? 0) / 2} zIndex={2} width={props.knobWidth} height={props.knobHeight} borderRadius={props.knobRadius} style={[styles.Knob.tones?.[props.tone ?? styles.tone], styles.Knob.base]}/>)
+            ? (props.children ?? (<View color={knobColor()} mount={0.5} x={(styles.Container.base.width ?? 0) / 2} y={(styles.Container.base.height ?? 0) / 2} zIndex={2} width={props.knobWidth} height={props.knobHeight} borderRadius={props.knobRadius} style={[styles.Knob.tones?.[props.tone ?? styles.tone], styles.Knob.base]}/>))
             : ''}/>);
 };
 export default Radio;

dist/components/Row/Row.jsx

@@ -27,5 +27,3 @@ /*
 const Row = props => {
-    return (<View {...props} selected={props.selected || 0} onLeft={chainFunctions(props.onLeft, onLeft)} onRight={chainFunctions(props.onRight, onRight)} onFocus={chainFunctions(props.onFocus, props.onSelectedChanged && handleOnSelect(props.onSelectedChanged))} forwardFocus={onGridFocus} onLayout={props.selected ? chainFunctions(props.onLayout, scroll) : props.onLayout} onSelectedChanged={chainFunctions(props.onSelectedChanged, props.scroll !== 'none' ? scroll : undefined)} 
-    // @ts-expect-error TODO type needs to be fixed in framework
-    style={[
+    return (<View {...props} selected={props.selected || 0} onLeft={chainFunctions(props.onLeft, onLeft)} onRight={chainFunctions(props.onRight, onRight)} onFocus={chainFunctions(props.onFocus, props.onSelectedChanged && handleOnSelect(props.onSelectedChanged))} forwardFocus={onGridFocus} onLayout={props.selected ? chainFunctions(props.onLayout, scroll) : props.onLayout} onSelectedChanged={chainFunctions(props.onSelectedChanged, props.scroll !== 'none' ? scroll : undefined)} style={[
             props.style, //
@@ -32,0 +30,0 @@ styles.Container.tones[props.tone ?? styles.tone],

dist/components/Toggle/Toggle.jsx

@@ -57,5 +57,3 @@ /*
     const backgroundColor = createMemo(() => getBackgroundColor(props.checked, props));
-    return (<View {...props} color={backgroundColor()} borderRadius={props.strokeRadius} 
-    // @ts-expect-error TODO type needs to be fixed in framework
-    style={[
+    return (<View {...props} color={backgroundColor()} borderRadius={props.strokeRadius} style={[
             props.style, //
@@ -62,0 +60,0 @@ styles.Container.tones?.[props.tone ?? styles.tone],

dist/recipes/Metadata/Metadata.stories.jsx

@@ -47,5 +47,3 @@ /*
       <View style={{ ...containerStyles, flexDirection: 'row', gap: 8 }}>
-        <Text style={{ ...theme.typography.body3, marginRight: 16 }}>
-          Support text
-        </Text>
+        <Text style={{ ...theme.typography.body3, marginRight: 16 }}>Support text</Text>
         <Badge title="TV-14"/>
@@ -52,0 +50,0 @@ <Badge title="HD"/>

dist/types/interfaces.d.ts

@@ -1,10 +0,4 @@
-import { type IntrinsicNodeProps } from '@lightningtv/solid';
+import { type NodeProps } from '@lightningtv/solid';
 import type { Tone } from './types.js';
-/**
- * ensures all our components provide the same API for tone
- * omits children, not all ui-components support children
- * overrides color - strings are accepted by the renderer even though the type
- * is number, and all our colors are strings due to JSON limitations
- */
-export interface UIComponentProps extends IntrinsicNodeProps {
+export interface UIComponentProps extends NodeProps {
     /**
@@ -11,0 +5,0 @@ * sets the component's color palette

dist/types/types.d.ts

@@ -5,3 +5,3 @@ import type { TextStyles, NodeStyles } from '@lightningtv/solid';
 };
-export interface ComponentStyleConfig<ComponentStyleList = object, ModeSet extends string = Mode, ToneSet extends string = Tone, BaseStyleType extends NodeStyles | TextStyles | NodeColor = NodeStyles | TextStyles> {
+export interface ComponentStyleConfig<ComponentStyleList = object, ModeSet extends string = Mode, ToneSet extends string = Tone, BaseStyleType extends NodeStyles | TextStyles = NodeStyles | TextStyles> {
     themeKeys: ThemeKeys<BaseStyleType, ComponentStyleList>;
@@ -55,23 +55,8 @@ base: BaseStyleType;
 export type NodeStyleSet<AdditionalTypes = unknown> = {
-    base: Required<FlexibleNodeStyles<AdditionalTypes>> & WithModes<FlexibleNodeStyles<AdditionalTypes>>;
-    tones: WithTonesModes<FlexibleNodeStyles<AdditionalTypes>>;
+    base: Required<FlexibleNodeStyles & AdditionalTypes> & WithModes<FlexibleNodeStyles & AdditionalTypes>;
+    tones: WithTonesModes<FlexibleNodeStyles & AdditionalTypes>;
 };
 export type TextStyleSet<AdditionalTypes = unknown> = {
-    base: Required<TextStyles & AdditionalTypes> & WithModes<TextStyles & AdditionalTypes>;
-    tones: WithTonesModes<TextStyles & AdditionalTypes>;
+    base: Required<FlexibleTextStyles & AdditionalTypes> & WithModes<FlexibleTextStyles & AdditionalTypes>;
+    tones: WithTonesModes<FlexibleTextStyles & AdditionalTypes>;
 };
-/**
- * renderer accepts 0xRGBA as either a number or string
- */
-export type NodeColor = number | string;
-export type TypographySet = {
-    [key: string]: Typography;
-};
-export type Typography = {
-    fontFamily: string;
-    fontSize: number;
-    lineHeight: number;
-    fontWeight: number;
-    verticalAlign: string;
-    textBaseline: string;
-};

package.json

 {
   "name": "@lightningtv/solid-ui",
-  "version": "0.29.11",
+  "version": "0.30.0",
   "description": "A shared library of components for the LightningJS Solid Framework.",
@@ -46,8 +46,8 @@ "main": "dist/index.js",
   "dependencies": {
-    "@lightningjs/renderer": "^2.1.2",
+    "@lightningjs/renderer": "^2.3.2",
     "@solid-primitives/refs": "^1.0.8"
   },
   "peerDependencies": {
-    "@lightningtv/core": "^2.1.8",
-    "@lightningtv/solid": "^2.1.2",
+    "@lightningtv/core": "^2.2.2",
+    "@lightningtv/solid": "^2.2.1",
     "solid-js": "*"
@@ -54,0 +54,0 @@ },

types/interfaces.ts

@@ -18,13 +18,6 @@ /*
 
-import { type IntrinsicNodeProps } from '@lightningtv/solid';
+import { type NodeProps } from '@lightningtv/solid';
 import type { Tone } from './types.js';
 
-// TODO extends NodeProps, we may want to narrow this
-/**
- * ensures all our components provide the same API for tone
- * omits children, not all ui-components support children
- * overrides color - strings are accepted by the renderer even though the type
- * is number, and all our colors are strings due to JSON limitations
- */
-export interface UIComponentProps extends IntrinsicNodeProps {
+export interface UIComponentProps extends NodeProps {
   /**
@@ -31,0 +24,0 @@ * sets the component's color palette

types/types.ts

@@ -18,3 +18,2 @@ /*
 
-// import * as Solid from '@lightningtv/solid';
 import type { TextStyles, NodeStyles } from '@lightningtv/solid';
@@ -31,3 +30,3 @@
   ToneSet extends string = Tone,
-  BaseStyleType extends NodeStyles | TextStyles | NodeColor = NodeStyles | TextStyles
+  BaseStyleType extends NodeStyles | TextStyles = NodeStyles | TextStyles
 > {
@@ -97,31 +96,11 @@ themeKeys: ThemeKeys<BaseStyleType, ComponentStyleList>;
 // could be a nested object
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type NodeStyleSet<AdditionalTypes = unknown> = {
-  base: Required<FlexibleNodeStyles<AdditionalTypes>> & WithModes<FlexibleNodeStyles<AdditionalTypes>>;
-  tones: WithTonesModes<FlexibleNodeStyles<AdditionalTypes>>; // includes modes of tones
+  base: Required<FlexibleNodeStyles & AdditionalTypes> & WithModes<FlexibleNodeStyles & AdditionalTypes>;
+  tones: WithTonesModes<FlexibleNodeStyles & AdditionalTypes>; // includes modes of tones
 };
 
 // could be a nested object
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type TextStyleSet<AdditionalTypes = unknown> = {
-  base: Required<TextStyles & AdditionalTypes> & WithModes<TextStyles & AdditionalTypes>;
-  tones: WithTonesModes<TextStyles & AdditionalTypes>;
+  base: Required<FlexibleTextStyles & AdditionalTypes> & WithModes<FlexibleTextStyles & AdditionalTypes>;
+  tones: WithTonesModes<FlexibleTextStyles & AdditionalTypes>;
 };
-
-/**
- * renderer accepts 0xRGBA as either a number or string
- */
-export type NodeColor = number | string;
-
-export type TypographySet = {
-  [key: string]: Typography;
-};
-
-export type Typography = {
-  fontFamily: string;
-  fontSize: number;
-  lineHeight: number;
-  fontWeight: number;
-  verticalAlign: string;
-  textBaseline: string;
-};

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

696864

decreased by-0.51%

Lines of code

16861

decreased by-0.55%

Dependency changes

• Updated@lightningjs/renderer@^2.3.2