@lightningjs/solid-ui - npm Package Compare versions

Comparing version 0.14.0 to 0.14.1

components/Artwork/Artwork.styles.ts

@@ -40,3 +40,3 @@ /*
 /* @ts-expect-error next-line themes are supplied by client applications so this setup is necessary */
-const { Artwork: { defaultTone, ...themeStyles } = { styles: {} } } = theme?.componentConfig;
+const { Artwork: { defaultTone, ...themeStyles } = { themeStyles: {} } } = theme?.componentConfig;
 
@@ -57,3 +57,3 @@ const container: ArtworkConfig = {
     scale: undefined,
-    borderRadius: theme.radius.md,
+    borderRadius: theme.radius.md
   },
@@ -60,0 +60,0 @@ themeStyles

components/Badge/Badge.styles.ts

@@ -42,3 +42,3 @@ /*
 /* @ts-expect-error next-line themes are supplied by client applications so this setup is necessary */
-const { Badge: { defaultTone, ...themeStyles } = { styles: {} } } = theme?.componentConfig;
+const { Badge: { defaultTone, ...themeStyles } = { themeStyles: {} } } = theme?.componentConfig;
 
@@ -45,0 +45,0 @@ const container: BadgeConfig = {

components/Button/Button.styles.ts

@@ -38,2 +38,3 @@ /*
   textColor?: TextStyles['color'];
+  padding?: number[];
 };
@@ -44,6 +45,12 @@
 /* @ts-expect-error next-line themes are supplied by client applications so this setup is necessary */
-const { Button: { defaultTone, ...themeStyles } = { styles: {} } } = theme?.componentConfig;
+const { Button: { defaultTone, ...buttonThemeStyles } = { buttonThemeStyles: {} } } = theme?.componentConfig;
 /* @ts-expect-error next-line see above */
-const { Surface: { surfaceDefaultTone, ...surfaceThemeStyles } = { styles: {} } } = theme?.componentConfig;
+const { Surface: { surfaceDefaultTone, ...surfaceThemeStyles } = { surfaceThemeStyles: {} } } =
+  theme?.componentConfig;
 
+const themeStyles = {
+  ...buttonThemeStyles,
+  ...surfaceThemeStyles
+};
+
 const container: ButtonConfig = {
@@ -86,6 +93,3 @@ themeKeys: {
   },
-  themeStyles: {
-    ...surfaceThemeStyles,
-    ...themeStyles
-  }
+  themeStyles
 };
@@ -119,6 +123,3 @@
   },
-  themeStyles: {
-    ...surfaceThemeStyles,
-    ...themeStyles
-  }
+  themeStyles
 };
@@ -154,6 +155,3 @@
   },
-  themeStyles: {
-    ...surfaceThemeStyles,
-    ...themeStyles
-  }
+  themeStyles
 };
@@ -160,0 +158,0 @@

components/Checkbox/Checkbox.styles.ts

@@ -42,3 +42,3 @@ /*
 /* @ts-expect-error next-line themes are supplied by client applications so this setup is necessary */
-const { Checkbox: { defaultTone, ...themeStyles } = { styles: {} } } = theme?.componentConfig;
+const { Checkbox: { defaultTone, ...themeStyles } = { themeStyles: {} } } = theme?.componentConfig;
 
@@ -45,0 +45,0 @@ const strokeWidth = theme.stroke.sm;

components/Column/Column.styles.ts

@@ -37,3 +37,3 @@ /*
 /* @ts-expect-error next-line themes are supplied by client applications so this setup is necessary */
-const { Column: { defaultTone, ...themeStyles } = { styles: {} } } = theme?.componentConfig;
+const { Column: { defaultTone, ...themeStyles } = { themeStyles: {} } } = theme?.componentConfig;
 
@@ -40,0 +40,0 @@ const container: ColumnConfig = {

components/Icon/Icon.styles.ts

@@ -36,3 +36,3 @@ /*
 /* @ts-expect-error next-line themes are supplied by client applications so this setup is necessary */
-const { Icon: { defaultTone, ...themeStyles } = { styles: {} } } = theme?.componentConfig;
+const { Icon: { defaultTone, ...themeStyles } = { themeStyles: {} } } = theme?.componentConfig;
 
@@ -39,0 +39,0 @@ const container: IconConfig = {

components/Input/Input.styles.ts

@@ -42,3 +42,3 @@ /*
 /* @ts-expect-error next-line themes are supplied by client applications so this setup is necessary */
-const { Input: { defaultTone, ...themeStyles } = { styles: {} } } = theme?.componentConfig;
+const { Input: { defaultTone, ...themeStyles } = { themeStyles: {} } } = theme?.componentConfig;
 
@@ -45,0 +45,0 @@ const container: InputConfig = {

components/Key/Key.styles.ts

@@ -60,3 +60,3 @@ /*
 /* @ts-expect-error next-line themes are supplied by client applications so this setup is necessary */
-const { Key: { defaultTone, ...themeStyles } = { styles: {} } } = theme?.componentConfig;
+const { Key: { defaultTone, ...themeStyles } = { themeStyles: {} } } = theme?.componentConfig;
 
@@ -63,0 +63,0 @@ const container: KeyConfig = {

components/Keyboard/Keyboard.styles.ts

@@ -23,3 +23,3 @@ /*
 import type { NodeStyles } from '@lightningjs/solid';
-import type { KeyConfig, KeySizes, KeyStyles } from '../Key/Key.styles.js';
+import type { KeySizes, KeyStyles, KeyConfig } from '../Key/Key.styles.js';
 
@@ -37,2 +37,3 @@ export interface KeyboardStyles {
   marginX?: number;
+  textColor?: NodeStyles['color'];
 };
@@ -42,5 +43,8 @@
 
+// export type KeyConfig = ComponentStyleConfig<KeyStyleProperties>;
+
 /* @ts-expect-error next-line themes are supplied by client applications so this setup is necessary */
-const { Keyboard: { defaultTone, ...themeStyles } = { styles: {} } } = theme?.componentConfig;
-// TODO handle keyProps coming in from theme
+const { Keyboard: { defaultTone, ...themeStyles } = {} } = theme?.componentConfig;
+/* @ts-expect-error next-line themes are supplied by client applications so this setup is necessary */
+const { Key: { defaultKeyTone, ...keyThemeStyles } = {} } = theme?.componentConfig;
 
@@ -59,3 +63,3 @@ const container: KeyboardConfig = {
   },
-  // @ts-expect-error see TODO
+  // @ts-expect-error TODO fix style types for component configs
   themeStyles
@@ -78,3 +82,2 @@ };
     height: theme.spacer.md * 9,
-    paddingX: theme.spacer.md,
     sizes: {
@@ -120,4 +123,3 @@ sm: 1,
   },
-  // @ts-expect-error see TODO
-  themeStyles
+  themeStyles: keyThemeStyles
 };
@@ -149,3 +151,3 @@
   },
-  // @ts-expect-error see TODO
+  // @ts-expect-error TODO fix style types for component configs
   themeStyles
@@ -152,0 +154,0 @@ };

components/Label/Label.styles.ts

@@ -41,3 +41,3 @@ /*
 /* @ts-expect-error next-line themes are supplied by client applications so this setup is necessary */
-const { Label: { defaultTone, ...themeStyles } = { styles: {} } } = theme?.componentConfig;
+const { Label: { defaultTone, ...themeStyles } = { themeStyles: {} } } = theme?.componentConfig;
 
@@ -44,0 +44,0 @@ const container: LabelConfig = {

components/Metadata/Details.styles.ts

@@ -39,2 +39,3 @@ /*
   ratingContentSpacing?: number;
+  textColor?: NodeStyles['color'];
 };
@@ -45,3 +46,3 @@
 /* @ts-expect-error next-line themes are supplied by client applications so this setup is necessary */
-const { Details: { defaultTone, ...themeStyles } = { styles: {} } } = theme?.componentConfig; // TODO this probably shouldn't be themed this way
+const { Details: { defaultTone, ...themeStyles } = { themeStyles: {} } } = theme?.componentConfig; // TODO this probably shouldn't be themed this way
 
@@ -48,0 +49,0 @@ const container: DetailsConfig = {

components/Metadata/Metadata.styles.ts

@@ -40,3 +40,3 @@ /*
 /* @ts-expect-error next-line themes are supplied by client applications so this setup is necessary */
-const { Metadata: { defaultTone, ...themeStyles } = { styles: {} } } = theme?.componentConfig;
+const { Metadata: { defaultTone, ...themeStyles } = { themeStyles: {} } } = theme?.componentConfig;
 
@@ -43,0 +43,0 @@ const container: MetadataConfig = {

components/Metadata/Rating.styles.ts

@@ -43,4 +43,3 @@ /*
 /* @ts-expect-error next-line themes are supplied by client applications so this setup is necessary */
-const { Rating: { styles: themeStyles, defaultTone } = { styles: {}, defaultTone: 'neutral' } } =
-  theme?.componentConfig;
+const { Rating: { defaultTone, ...themeStyles } = { themeStyles: {} } } = theme?.componentConfig;
 
@@ -58,3 +57,2 @@ const container: RatingConfig = {
   },
-  toneModes: {},
   themeStyles
@@ -71,3 +69,2 @@ };
   },
-  toneModes: {},
   themeStyles
@@ -86,3 +83,2 @@ };
   },
-  toneModes: {},
   themeStyles
@@ -89,0 +85,0 @@ };

components/ProgressBar/ProgressBar.styles.ts

@@ -40,3 +40,3 @@ /*
 /* @ts-expect-error next-line themes are supplied by client applications so this setup is necessary */
-const { ProgressBar: { defaultTone, ...themeStyles } = { styles: {} } } = theme?.componentConfig;
+const { ProgressBar: { defaultTone, ...themeStyles } = { themeStyles: {} } } = theme?.componentConfig;
 
@@ -43,0 +43,0 @@ const container: ProgressBarConfig = {

components/Radio/Radio.styles.ts

@@ -23,8 +23,7 @@ /*
 import { makeComponentStyles } from '../../utils/index.js';
-import type { Color } from 'types';
 
 export interface RadioStyles {
   tone: Tone;
-  Container: NodeStyleSet<{ border: BorderStyleObject; colorChecked: Color }>;
-  Knob: NodeStyleSet<{ padding: number; colorChecked: Color }>;
+  Container: NodeStyleSet<{ border: BorderStyleObject; colorChecked: NodeStyles['color'] }>;
+  Knob: NodeStyleSet<{ padding: number; colorChecked: NodeStyles['color'] }>;
 }
@@ -31,0 +30,0 @@

components/Row/Row.styles.ts

@@ -37,3 +37,3 @@ /*
 /* @ts-expect-error next-line themes are supplied by client applications so this setup is necessary */
-const { Row: { defaultTone, ...themeStyles } = { styles: {} } } = theme?.componentConfig;
+const { Row: { defaultTone, ...themeStyles } = { themeStyles: {} } } = theme?.componentConfig;
 
@@ -40,0 +40,0 @@ const container: RowConfig = {

components/Tile/Tile.styles.ts

@@ -40,5 +40,6 @@ /*
 /* @ts-expect-error next-line themes are supplied by client applications so this setup is necessary */
-const { Tile: { defaultTone, ...tileThemeStyles } = { styles: {} } } = theme?.componentConfig;
+const { Tile: { defaultTone, ...tileThemeStyles } = { tileThemeStyles: {} } } = theme?.componentConfig;
 /* @ts-expect-error next-line themes are supplied by client applications so this setup is necessary */
-const { Surface: { defaultSurfaceTone, ...surfaceThemeStyles } = { styles: {} } } = theme?.componentConfig;
+const { Surface: { defaultSurfaceTone, ...surfaceThemeStyles } = { surfaceThemeStyles: {} } } =
+  theme?.componentConfig;
 
@@ -45,0 +46,0 @@ const container: TileConfig = {

components/Toggle/Toggle.styles.ts

@@ -23,8 +23,7 @@ /*
 import { makeComponentStyles } from '../../utils/index.js';
-import type { Color } from 'types';
 
 export interface ToggleStyles {
   tone: Tone;
-  Container: NodeStyleSet<{ border: BorderStyleObject; colorChecked: Color }>;
-  Knob: NodeStyleSet<{ padding: number; colorChecked: Color }>;
+  Container: NodeStyleSet<{ border: BorderStyleObject; colorChecked: NodeStyles['color'] }>;
+  Knob: NodeStyleSet<{ padding: number; colorChecked: NodeStyles['color'] }>;
 }
@@ -50,3 +49,3 @@
 /* @ts-expect-error next-line themes are supplied by client applications so this setup is necessary */
-const { Toggle: { defaultTone, ...themeStyles } = { styles: {} } } = theme?.componentConfig;
+const { Toggle: { defaultTone, ...themeStyles } = { themeStyles: {} } } = theme?.componentConfig;
 
@@ -53,0 +52,0 @@ const knobSize = theme.spacer.xl;

package.json

 {
   "name": "@lightningjs/solid-ui",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "A shared library of components for the LightningJS Solid Framework.",
@@ -59,4 +59,6 @@ "main": "dist/index.js",
     "vite-plugin-cross-origin-isolation": "^0.1.6",
+    "vite-plugin-dts": "^3.8.1",
     "vite-plugin-solid": "^2.10.2",
-    "vitest": "^1.5.0"
+    "vitest": "^1.5.0",
+    "@lightningjs/l3-ui-theme-base": "0.3.3"
   },
@@ -63,0 +65,0 @@ "scripts": {

types/interfaces.d.ts

@@ -29,4 +29,2 @@ /*
 export interface UIComponentProps extends IntrinsicNodeProps {
-  color?: IntrinsicNodeStyleProps['color'] & string;
-
   /**
@@ -33,0 +31,0 @@ * sets the component's color palette

types/types.d.ts

@@ -56,3 +56,3 @@ /*
 
-export type VariantList = 'base' | Tone | Mode;
+export type VariantList = 'base' | 'neutral' | 'inverse' | 'brand' | 'focus' | 'disabled';
 
@@ -59,0 +59,0 @@ export type VariantPropertySet<T> = {

utils/chainFunctions.ts

@@ -18,3 +18,3 @@ /*
 
-type ChainableFunction = (...args: unknown[]) => unknown;
+type ChainableFunction = (...args: any[]) => unknown;
 
@@ -21,0 +21,0 @@ export function chainFunctions(...args: ChainableFunction[]): ChainableFunction;

utils/getDimensions.ts

@@ -20,3 +20,5 @@ /*
 
-export function getDimensions(obj = {}, fallback = {}) {
+type DimensionsConfig = { w?: number; h?: number; ratioX?: number; ratioY?: number; upCount?: number };
+
+export function getDimensions(obj: DimensionsConfig = {}, fallback: DimensionsConfig = {}): DimensionsConfig {
   const { w, h, ratioX, ratioY, upCount } = obj;
@@ -23,0 +25,0 @@ const fallbackW = fallback.w || 0;

utils/getThemeStyles.d.ts

@@ -0,1 +1,18 @@
+/*
+ * Copyright 2024 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
 import { ComponentStyleConfig } from '../types/types.js';
@@ -2,0 +19,0 @@

utils/getThemeStyles.js

@@ -46,3 +46,11 @@ /*
 export function makeComponentStyles(
-  { themeKeys, base, modes, tones, themeStyles, modeKeys = defaultModeKeys, toneKeys = defaultToneKeys },
+  {
+    themeKeys,
+    base,
+    modes = {},
+    tones = {},
+    themeStyles,
+    modeKeys = defaultModeKeys,
+    toneKeys = defaultToneKeys
+  },
   debug = false
@@ -49,0 +57,0 @@ ) {

utils/getWidthByUpCount.ts

@@ -18,3 +18,4 @@ /*
 import theme from 'theme';
-export function getWidthByUpCount(upCount = 1) {
+
+export function getWidthByUpCount(upCount: number | undefined = 1): number {
   const screenW = theme.layout.screenW;
@@ -27,3 +28,3 @@ const columnCount = theme.layout.columnCount;
     console.error(
-      `Column expects a number between 1 & ${columnCount}. Received ${upCount}. Defaulting to 1.`
+      `getWidthByUpCount expects an upCount between 1 & ${columnCount}, received ${upCount}. Defaulting to upCount 1.`
     );
@@ -30,0 +31,0 @@ upCount = 1;

utils/scrollToIndex.ts

@@ -34,6 +34,6 @@ /*
   if (componentRef.flexDirection === 'row') {
-    componentRef.x = -componentRef.children[selectedIndex].x;
+    componentRef.x = -Number(componentRef.children[selectedIndex].x);
   } else if (componentRef.flexDirection === 'column') {
-    componentRef.y = -componentRef.children[selectedIndex].y;
+    componentRef.y = -Number(componentRef.children[selectedIndex].y);
   }
 }

utils/useItemLayout.ts

@@ -0,1 +1,18 @@
+/*
+ * Copyright 2024 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
 import theme from 'theme';
@@ -2,0 +19,0 @@

utils/withScrolling.ts

@@ -18,8 +18,8 @@ /*
 
-import type { ElementNode } from '@lightningjs/solid';
+import type { ElementNode, SolidNode } from '@lightningjs/solid';
 
 // adds properties expected by withScrolling
-export interface ScrollableElementNode extends ElementNode {
-  scrollIndex: number;
-  selected: number;
+export interface ScrollableElement extends ElementNode {
+  scrollIndex?: number;
+  selected?: number;
 }
@@ -29,4 +29,4 @@
   return (
-    componentRef: ScrollableElementNode,
-    selectedElement: ElementNode,
+    componentRef: ScrollableElement,
+    selectedElement: SolidNode,
     selected: number = 0,
@@ -33,0 +33,0 @@ lastSelected: number | undefined

vite.config.js

@@ -49,8 +49,3 @@ /*
     rollupOptions: {
-      external: [
-        'theme',
-        'solid-js',
-        '@lightningjs/solid',
-        '@lightningjs/solid-primitives'
-      ]
+      external: ['theme', 'solid-js', '@lightningjs/solid', '@lightningjs/solid-primitives']
     },
@@ -57,0 +52,0 @@ minify: false,

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

Improved metrics

Total package byte prevSize

2179088

increased by0.42%

Number of package files

122

increased by0.83%

Lines of code

25860

increased by0.44%

Worsened metrics

Dev dependency count

27

increased by8%

No dependency changes