@lightningjs/solid-ui - npm Package Compare versions

Comparing version 0.17.3 to 0.18.6

components/Artwork/Artwork.types.ts

@@ -0,1 +1,17 @@
+/*
+ * Copyright 2023 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 type { Effects, NodeProps, NodeStyles } from '@lightningjs/solid';
@@ -2,0 +18,0 @@ import type { ComponentStyleConfig, NodeStyleSet, Tone } from 'types/types.js';

components/Button/index.ts

@@ -20,2 +20,2 @@ /*
 export { default as buttonStyles } from './Button.styles.js';
-export type { ButtonProps, ButtonStyles } from './Button.types.js';
+export type { ButtonProps, ButtonContainerProps, ButtonStyles } from './Button.types.js';

components/Checkbox/Checkbox.types.ts

@@ -0,1 +1,17 @@
+/*
+ * Copyright 2023 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 type { NodeProps, NodeStyles } from '@lightningjs/solid';
@@ -16,3 +32,3 @@ import type { ComponentStyleConfig, NodeStyleSet, Tone } from 'types/types.js';
   /**
-   * color of background then checkbox is checked
+   * color of background when checkbox is checked
    *
@@ -19,0 +35,0 @@ * core reference: {@link https://github.com/lightning-js/renderer/blob/aefee0064a48055b3cf8dd459396ad4996b68ef5/src/main-api/INode.ts#L121 INodeWritableProps.color}

components/Column/Column.styles.ts

@@ -17,21 +17,6 @@ /*
  */
-import type { NodeStyles } from '@lightningjs/solid';
 import theme from 'theme';
-import type { Tone } from '../../types/types.js';
-import type { ComponentStyleConfig, NodeStyleSet } from '../../types/types.js';
 import { makeComponentStyles } from '../../utils/index.js';
+import type { ColumnStyles, ColumnConfig } from './Column.types.js';
 
-export interface ColumnStyles {
-  tone: Tone;
-  Container: NodeStyleSet;
-}
-
-type ColumnStyleProperties = {
-  itemSpacing?: NodeStyles['itemSpacing'];
-  itemTransition?: NodeStyles['itemTransition'];
-  scrollIndex?: NodeStyles['scrollIndex'];
-};
-
-type ColumnConfig = ComponentStyleConfig<ColumnStyleProperties>;
-
 /* @ts-expect-error next-line themes are supplied by client applications so this setup is necessary */
@@ -44,3 +29,3 @@ const { Column: { defaultTone, ...themeStyles } = { themeStyles: {} } } = theme?.componentConfig;
     scrollIndex: 'scrollIndex',
-    itemTransition: 'itemTransition'
+    transition: 'itemTransition'
   },
@@ -52,3 +37,3 @@ base: {
     gap: theme.layout.gutterY,
-    itemTransition: {
+    transition: {
       ...theme.animation.standardEntrance,
@@ -55,0 +40,0 @@ duration: theme.animation.duration.fast

components/Column/index.ts

@@ -18,3 +18,4 @@ /*
 
-export { default as default, type ColumnProps } from './Column.jsx';
-export { default as columnStyles, type ColumnStyles } from './Column.styles.js';
+export { default as default } from './Column.jsx';
+export { default as columnStyles } from './Column.styles.js';
+export type { ColumnProps, ColumnStyles } from './Column.types.js';

components/Input/index.ts

@@ -18,3 +18,4 @@ /*
 
-export { default as default, type InputProps } from './Input.jsx';
-export { default as inputStyles, type InputStyles } from './Input.styles.js';
+export { default as default } from './Input.jsx';
+export { default as inputStyles } from './Input.styles.js';
+export type { InputProps, InputStyles } from './Input.types.js';

components/Input/Input.styles.ts

@@ -18,25 +18,7 @@ /*
 
-import type { NodeStyles } from '@lightningjs/solid';
 import theme from 'theme';
-import type { Tone } from '../../types/types.js';
-import type { ComponentStyleConfig, NodeStyleSet, TextStyleSet } from '../../types/types.js';
 import { makeComponentStyles } from '../../utils/index.js';
 import { getWidthByUpCount } from '../../utils/getWidthByUpCount.js';
+import type { InputStyles, InputConfig } from './Input.types.js';
 
-export interface InputStyles {
-  tone: Tone;
-  Container: NodeStyleSet;
-  InputContainer: NodeStyleSet;
-  Text: TextStyleSet;
-}
-
-export type InputStyleProperties = {
-  backgroundColor?: NodeStyles['color'];
-  borderRadius?: NodeStyles['borderRadius'];
-  justifyContent?: NodeStyles['justifyContent'];
-  textColor?: NodeStyles['color'];
-};
-
-export type InputConfig = ComponentStyleConfig<InputStyleProperties>;
-
 /* @ts-expect-error next-line themes are supplied by client applications so this setup is necessary */
@@ -47,3 +29,3 @@ const { Input: { defaultTone, ...themeStyles } = { themeStyles: {} } } = theme?.componentConfig;
   themeKeys: {
-    justifyContent: 'justifyContent'
+    justifyContent: 'justify'
   },
@@ -63,6 +45,8 @@ base: {
   themeKeys: {
-    borderRadius: 'borderRadius',
+    borderRadius: 'radius',
     color: 'backgroundColor'
   },
   base: {
+    // TODO clew uses strokeColor, but we currently don't account for nested properties (border.color)
+    // TODO clew uses strokeWidth, but we currently don't account for nested properties (border.width)
     width: getWidthByUpCount(4),
@@ -78,21 +62,2 @@ height: 100,
   },
-  modes: {
-    focus: {
-      color: theme.color.interactiveNeutralFocus
-    },
-    disabled: {
-      color: theme.color.fillNeutralDisabled
-    }
-  },
-  tones: {
-    inverse: {
-      color: theme.color.interactiveInverse
-    },
-    brand: {
-      color: theme.color.interactiveBrand,
-      focus: {
-        color: theme.color.fillNeutral
-      }
-    }
-  },
   themeStyles
@@ -99,0 +64,0 @@ };

components/Label/index.ts

@@ -1,2 +0,20 @@
-export { default as default, type LabelProps } from './Label.jsx';
-export { default as labelStyles, type LabelStyles } from './Label.styles.js';
+/*
+ * Copyright 2023 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
+ */
+
+export { default as default } from './Label.jsx';
+export { default as labelStyles } from './Label.styles.js';
+export type { LabelProps, LabelStyles } from './Label.types.js';

components/Label/Label.styles.ts

@@ -18,24 +18,6 @@ /*
 
-import type { NodeStyles } from '@lightningjs/solid';
 import theme from 'theme';
-import type { Tone } from '../../types/types.js';
-import type { ComponentStyleConfig, NodeStyleSet, TextStyleSet } from '../../types/types.js';
 import { makeComponentStyles } from '../../utils/index.js';
+import type { LabelStyles, LabelConfig } from './Label.types.js';
 
-export interface LabelStyles {
-  tone: Tone;
-  Container: NodeStyleSet<{ padding: number[] }>;
-  Text: TextStyleSet;
-}
-
-export type LabelStyleProperties = Partial<{
-  backgroundColor: NodeStyles['color'];
-  textColor: NodeStyles['color'];
-  padding: [number, number];
-  radius: NodeStyles['borderRadius'];
-  height: NodeStyles['height'];
-}>;
-
-type LabelConfig = ComponentStyleConfig<LabelStyleProperties>;
-
 /* @ts-expect-error next-line themes are supplied by client applications so this setup is necessary */
@@ -42,0 +24,0 @@ const { Label: { defaultTone, ...themeStyles } = { themeStyles: {} } } = theme?.componentConfig;

components/Metadata/Rating.styles.ts

@@ -37,2 +37,3 @@ /*
   itemSpacing?: NodeStyles['itemSpacing'];
+  alignItems?: NodeStyles['alignItems'];
 };
@@ -52,5 +53,6 @@
     display: 'flex',
-    flexDirection: 'column',
+    flexDirection: 'row',
     justifyContent: 'flexStart',
-    itemSpacing: theme.spacer.sm
+    itemSpacing: theme.spacer.sm,
+    alignItems: 'center'
   },
@@ -68,2 +70,21 @@ themeStyles
   },
+  tones: {
+    neutral: {
+      disabled: {
+        color: theme.color.textNeutralDisabled
+      }
+    },
+    inverse: {
+      color: theme.color.textInverse,
+      disabled: {
+        color: theme.color.textNeutralDisabled
+      }
+    },
+    brand: {
+      color: theme.color.textNeutral,
+      disabled: {
+        color: theme.color.textNeutralDisabled
+      }
+    }
+  },
   themeStyles
@@ -70,0 +91,0 @@ };

components/ProgressBar/index.ts

@@ -17,4 +17,4 @@ /*
  */
-
-export { default as default, type ProgressBarProps } from './ProgressBar.jsx';
-export { default as progressBarStyles, type ProgressBarStyles } from './ProgressBar.styles.js';
+export { default as default } from './ProgressBar.jsx';
+export { default as progressBarStyles } from './ProgressBar.styles.js';
+export type { ProgressBarProps, ProgressBarStyles } from './ProgressBar.types.js';

components/ProgressBar/ProgressBar.styles.ts

@@ -18,23 +18,6 @@ /*
 
-import { type NodeStyles } from '@lightningjs/solid';
 import theme from 'theme';
-import type { Tone } from '../../types/types.js';
 import { makeComponentStyles } from '../../utils/index.js';
-import type { ComponentStyleConfig, NodeStyleSet } from '../../types/types.js';
+import type { ProgressBarConfig, ProgressBarStyles } from './ProgressBar.types.js';
 
-export interface ProgressBarStyles {
-  tone: Tone;
-  Container: NodeStyleSet;
-  ProgressBar: NodeStyleSet;
-}
-
-type ProgressBarStyleProperties = {
-  height?: NodeStyles['height'];
-  progressColor?: NodeStyles['color'];
-  barColor?: NodeStyles['color'];
-  borderRadius?: NodeStyles['borderRadius'];
-};
-
-type ProgressBarConfig = ComponentStyleConfig<ProgressBarStyleProperties>;
-
 /* @ts-expect-error next-line themes are supplied by client applications so this setup is necessary */
@@ -41,0 +24,0 @@ const { ProgressBar: { defaultTone, ...themeStyles } = { themeStyles: {} } } = theme?.componentConfig;

components/Radio/index.ts

@@ -1,2 +0,19 @@
-export { default as default, type RadioProps } from './Radio.jsx';
-export { default as radioStyles, type RadioStyles } from './Radio.styles.js';
+/*
+ * Copyright 2023 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
+ */
+export { default as default } from './Radio.jsx';
+export { default as radioStyles } from './Radio.styles.js';
+export type { RadioProps, RadioStyles } from './Radio.types.js';

components/Radio/Radio.styles.ts

@@ -18,38 +18,12 @@ /*
 
-import type { BorderStyleObject, NodeStyles } from '@lightningjs/solid';
 import theme from 'theme';
-import type { Tone } from '../../types/types.js';
-import type { ComponentStyleConfig, NodeStyleSet } from '../../types/types.js';
 import { makeComponentStyles } from '../../utils/index.js';
+import type { RadioStyles, RadioConfig } from './Radio.types.js';
 
-export interface RadioStyles {
-  tone: Tone;
-  Container: NodeStyleSet<{ border: BorderStyleObject; colorChecked: NodeStyles['color'] }>;
-  Knob: NodeStyleSet<{ padding: number; colorChecked: NodeStyles['color'] }>;
-}
-
-export type RadioStyleProperties = {
-  backgroundColor?: NodeStyles['color'];
-  backgroundColorChecked?: NodeStyles['color'];
-  knobWidth?: NodeStyles['width'];
-  knobHeight?: NodeStyles['height'];
-  knobPadding?: number;
-  knobRadius?: NodeStyles['borderRadius'];
-  knobColor?: NodeStyles['color'];
-  knobColorChecked?: NodeStyles['color'];
-  knobSize?: NodeStyles['width'];
-  strokeRadius?: NodeStyles['borderRadius'];
-};
-
-type RadioConfig = ComponentStyleConfig<RadioStyleProperties>;
-
 /* @ts-expect-error next-line themes are supplied by client applications so this setup is necessary */
 const { Radio: { defaultTone, ...themeStyles } = { themeStyles: {} } } = theme?.componentConfig;
 
-const knobSize = theme.spacer.xxl;
-const strokeWidth = theme.stroke.sm;
-
 const container: RadioConfig = {
   themeKeys: {
-    borderRadius: 'strokeRadius',
+    borderRadius: 'radius',
     color: 'backgroundColor',
@@ -60,9 +34,8 @@ colorChecked: 'backgroundColorChecked'
     color: theme.color.fillNeutralSecondary,
-    colorChecked: theme.color.fillInverse,
-    height: knobSize + strokeWidth * 2,
-    width: knobSize + strokeWidth * 2,
-    borderRadius: knobSize / 2 + strokeWidth,
+    height: theme.spacer.xxl + theme.stroke.sm * 2,
+    width: theme.spacer.xxl + theme.stroke.sm * 2,
+    borderRadius: theme.spacer.xxl / 2 + theme.stroke.sm,
     border: {
       color: theme.color.strokeNeutralSecondary,
-      width: strokeWidth
+      width: theme.stroke.sm
     }
@@ -74,3 +47,3 @@ },
         color: theme.color.strokeInverseSecondary,
-        width: strokeWidth
+        width: theme.stroke.sm
       }
@@ -81,6 +54,7 @@ },
         color: theme.color.fillBrand,
-        width: strokeWidth
+        width: theme.stroke.sm
       }
     }
   },
+  modeKeys: ['focus', 'disabled', 'checked'],
   themeStyles
@@ -94,9 +68,11 @@ };
     borderRadius: 'knobRadius',
-    color: 'knobColor'
+    color: 'knobColor',
+    colorChecked: 'knobColorChecked'
   },
   base: {
     color: theme.color.fillInverse,
-    width: knobSize,
-    height: knobSize,
-    borderRadius: knobSize / 2
+    colorChecked: theme.color.fillInverse,
+    width: theme.spacer.xxl,
+    height: theme.spacer.xxl,
+    borderRadius: theme.spacer.xxl / 2
   },
@@ -103,0 +79,0 @@ tones: {

components/Row/index.ts

@@ -1,2 +0,19 @@
-export { default as default, type RowProps } from './Row.jsx';
-export { default as rowStyles, type RowStyles } from './Row.styles.js';
+/*
+ * Copyright 2023 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
+ */
+export { default as default } from './Row.jsx';
+export { default as rowStyles } from './Row.styles.js';
+export type { RowProps, RowStyles } from './Row.types.js';

components/Row/Row.styles.ts

@@ -17,21 +17,6 @@ /*
  */
-import type { NodeStyles } from '@lightningjs/solid';
 import theme from 'theme';
-import type { Tone } from '../../types/types.js';
-import type { ComponentStyleConfig, NodeStyleSet } from '../../types/types.js';
 import { makeComponentStyles } from '../../utils/index.js';
+import type { RowConfig, RowStyles } from './Row.types.js';
 
-export interface RowStyles {
-  tone: Tone;
-  Container: NodeStyleSet;
-}
-
-type RowStyleProperties = {
-  itemSpacing?: NodeStyles['itemSpacing'];
-  itemTransition?: NodeStyles['itemTransition'];
-  scrollIndex?: NodeStyles['scrollIndex'];
-};
-
-type RowConfig = ComponentStyleConfig<RowStyleProperties>;
-
 /* @ts-expect-error next-line themes are supplied by client applications so this setup is necessary */
@@ -44,3 +29,3 @@ const { Row: { defaultTone, ...themeStyles } = { themeStyles: {} } } = theme?.componentConfig;
     scrollIndex: 'scrollIndex',
-    itemTransition: 'itemTransition'
+    transition: 'itemTransition'
   },
@@ -52,3 +37,3 @@ base: {
     gap: theme.layout.gutterX,
-    itemTransition: {
+    transition: {
       ...theme.animation.standardEntrance,
@@ -55,0 +40,0 @@ duration: theme.animation.duration.fast

index.ts

@@ -47,2 +47,15 @@ /*
 export {
+  default as Input,
+  inputStyles,
+  type InputProps,
+  type InputStyles
+} from './components/Input/index.js';
+export { default as Key, keyStyles, type KeyProps, type KeyStyles } from './components/Key/index.js';
+export {
+  default as Keyboard,
+  keyboardStyles,
+  type KeyboardProps,
+  type KeyboardStyles
+} from './components/Keyboard/index.js';
+export {
   default as Label,
@@ -53,2 +66,8 @@ labelStyles,
 } from './components/Label/index.js';
+export {
+  default as ListItem,
+  listItemStyles,
+  type ListItemProps,
+  type ListItemStyles
+} from './components/ListItem/index.js';
 export { default as Metadata, metadataStyles, type MetadataProps } from './components/Metadata/index.js';
@@ -68,10 +87,13 @@ export {
 export { default as Row, rowStyles, type RowProps, type RowStyles } from './components/Row/index.js';
+export { default as Tile, tileStyles, type TileProps, type TileStyles } from './components/Tile/index.js';
 export {
-  default as Keyboard,
-  keyboardStyles,
-  type KeyboardProps,
-  type KeyboardStyles
-} from './components/Keyboard/index.js';
-export { default as Tile, tileStyles, type TileProps, type TileStyles } from './components/Tile/index.js';
+  default as Toggle,
+  toggleStyles,
+  type ToggleProps,
+  type ToggleStyles
+} from './components/Toggle/index.js';
+export { default as Wave, waveStyles, type WaveProps, type WaveStyles } from './components/Wave/index.js';
 export * from './utils/index.js';
 export * from './components/FPSCounter/index.js';
+export * from './types/types.js';
+export * from './types/interfaces.js';

package.json

 {
   "name": "@lightningjs/solid-ui",
-  "version": "0.17.3",
+  "version": "0.18.6",
   "description": "A shared library of components for the LightningJS Solid Framework.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

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

2295193

increased by4.28%

Number of package files

141

increased by8.46%

Lines of code

27865

increased by5.77%

No dependency changes