feat: update solid to 1.6 version (#39)

* feat: update solid to 1.6 version

* use var for background and style for width

package.json

@@ -22,9 +22,6 @@
     "test:update-snapshots": "pnpm --filter @lightningtv/solid-ui test:update-snapshots",
     "version-publish": "pnpm run lerna:version && pnpm run publish-packages"
   },
-  "dependencies": {
-    "@lightningjs/renderer": "^1.0.1"
-  },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^7.16.1",
     "@typescript-eslint/parser": "^7.16.1",

packages/sandbox/index.jsx

@@ -15,18 +15,16 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { createRenderer, Config } from '@lightningtv/solid';
+import { createRenderer, Config, loadFonts } from '@lightningtv/solid';
 import App from './pages/App';
-import loadFonts from '../shared/loadFonts';
+import fonts from '../shared/fonts';
 
 Config.fontSettings.fontFamily = 'Roboto';
 Config.fontSettings.color = 0xffffffff;
-
-const driver = 'main';
 Config.renderOptions = {
   // deviceLogicalPixelRatio: 1
 };
 
-const { renderer, render } = createRenderer();
-loadFonts(renderer.stage);
+const { render } = createRenderer();
+loadFonts(fonts);
 render(() => <App />);

packages/sandbox/package.json

@@ -16,7 +16,7 @@
   "license": "ISC",
   "dependencies": {
     "@lightningjs/renderer": "^1.0.1",
-    "@lightningtv/solid": "^1.1.2",
+    "@lightningtv/solid": "^1.6.6",
     "@solidjs/router": "^0.14.1",
     "solid-js": "^1.8.18"
   },

packages/shared/fonts.ts

@@ -0,0 +1,50 @@
+/*
+ * 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
+ */
+
+const basePath = './';
+
+const fonts = [
+  {
+    type: 'msdf',
+    fontFamily: 'Arial',
+    descriptors: {
+      weight: 700
+    },
+    atlasDataUrl: basePath + 'fonts/roboto/Roboto-Bold.msdf.json',
+    atlasUrl: basePath + 'fonts/roboto/Roboto-Bold.msdf.png',
+  } as const,
+  {
+    type: 'msdf',
+    fontFamily: 'Arial',
+    descriptors: {
+      weight: 400
+    },
+    atlasDataUrl: basePath + 'fonts/roboto/Roboto-Regular.msdf.json',
+    atlasUrl: basePath + 'fonts/roboto/Roboto-Regular.msdf.png',
+  } as const,
+  {
+    type: 'msdf',
+    fontFamily: 'Arial',
+    descriptors: {
+      weight: 500
+    },
+    atlasDataUrl: basePath + 'fonts/roboto/Roboto-Regular.msdf.json',
+    atlasUrl: basePath + 'fonts/roboto/Roboto-Regular.msdf.png',
+  } as const
+];
+
+export default fonts;

packages/solid/.storybook/preview-head.html

@@ -17,15 +17,18 @@
 
 <!-- use to style elements in Storybook Docs -->
 <style>
+  body {
+    --preview-background-color: #333333;
+  }
   /* transition background Docs to Story */
   /* transition background from Story to Doc */
   .sb-preparing-docs,
   .sb-preparing-story {
-    background-color: #1b1c1d;
+    background-color: var(--preview-background-color);
   }
   /* NOTE: this class is set to background and not background-color */
   .sb-previewBlock {
-    background: #1b1c1d;
+    background: var(--preview-background-color);
   }
 
   /* hides the args table that shows briefly during transition from Story to Docs */
@@ -35,7 +38,7 @@
 
   /* loading icons only seen during load/transition from Story to Docs */
   .sb-previewBlock_icon {
-    background-color: #1b1c1d;
+    background-color: var(--preview-background-color);
   }
 
   /* prevent container from scrolling when addon panel is shown */
@@ -44,6 +47,6 @@
   }
 
   .sb-show-main{
-    background-color: #1b1c1d;
+    background-color: var(--preview-background-color);
   }
 </style>

packages/solid/.storybook/preview.tsx

@@ -15,8 +15,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 /* @refresh reload */
-import { createRenderer, Config } from '@lightningtv/solid';
-import loadFonts from './loadFonts.js';
+import { createRenderer, Config, loadFonts } from '@lightningtv/solid';
+import fonts from '../../shared/fonts';
 import { themes } from '@storybook/theming';
 import { useFocusManager } from '@lightningtv/solid/primitives';
 
@@ -54,8 +54,8 @@ const preview = {
       const solidRoot = document.createElement('div');
       // teardown previous render (cleans up keyhandling)
       dispose && dispose();
-      const { renderer, render } = createRenderer(undefined, solidRoot);
-      loadFonts(renderer.stage);
+      const { render } = createRenderer(undefined, solidRoot);
+      loadFonts(fonts);
 
       dispose = render(() => {
         useFocusManager();

packages/solid/components/Artwork/Artwork.tsx

@@ -17,11 +17,9 @@
 
 import { type Component, createMemo } from 'solid-js';
 import { View } from '@lightningtv/solid';
-import { withPadding } from '../../utils/index.js';
 import type { Tone } from 'types/types.js';
 import styles from './Artwork.styles.js';
 import type { ArtworkProps } from './Artwork.types.js';
-withPadding;
 
 const getTone = (props: ArtworkProps) => props.tone ?? styles.tone;
 

packages/solid/components/Badge/Badge.stories.tsx

@@ -67,13 +67,15 @@ export const BadgeIcon = {
           src={lightning}
           width={25}
           height={25}
+          marginLeft={10}
         />
-        <Text style={[styles.Text.tones[args.tone ?? styles.tone], styles.Text.base]}>{args.title}</Text>
+        <Text marginLeft={6} style={[styles.Text.tones[args.tone ?? styles.tone], styles.Text.base]}>{args.title}</Text>
       </BadgeContainer>
     );
   },
 
   args: {
-    title: 'Badge Text'
+    title: 'Badge Text',
+    height: 38
   }
 };

packages/solid/components/Badge/Badge.styles.ts

@@ -39,13 +39,8 @@ const container: BadgeConfig = {
     },
     gap: theme.spacer.xs,
     display: 'flex',
-    justifyContent: 'spaceEvenly',
-    padding: [
-      theme.spacer.md - theme.stroke.sm,
-      theme.spacer.xs + theme.stroke.sm,
-      theme.spacer.md + theme.stroke.sm,
-      theme.spacer.md + theme.stroke.sm
-    ]
+    justifyContent: 'flexStart',
+    alignItems: 'center'
   },
   tones: {
     inverse: {
@@ -74,7 +69,10 @@ const text: BadgeConfig = {
   },
   base: {
     ...theme.typography.tag1,
-    color: theme.color.textNeutral
+    color: theme.color.textNeutral,
+    lineHeight: theme.typography.tag1.lineHeight + 12,
+    marginRight: theme.spacer.md + theme.stroke.sm,
+    marginLeft: theme.spacer.md + theme.stroke.sm
   },
   tones: {
     inverse: {

packages/solid/components/Badge/Badge.tsx

@@ -15,34 +15,22 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { createMemo, type Component } from 'solid-js';
-import { Text } from '@lightningtv/solid';
-import { withPadding } from '../../utils/index.js';
+import { View, Text, type BorderStyleObject } from '@lightningtv/solid';
 import styles from './Badge.styles.js';
 import type { BadgeProps } from './Badge.types.js';
-withPadding; // Preserve the import.
-
-const getTone = (props: BadgeProps) => props.tone ?? styles.tone;
-const getTitle = (title: BadgeProps['title']) => title ?? '';
-const getPadding = (props: BadgeProps, tone: string) =>
-  props.padding ?? styles.Container?.tones[tone]?.padding ?? styles.Container.base.padding;
 
 const BadgeContainer: Component<BadgeProps> = props => {
-  const tone = createMemo(() => getTone(props));
-  const padding = createMemo(() => getPadding(props, tone()));
-
   return (
-    <node
-      use:withPadding={padding()}
+    <View
       {...props}
       // borderColor={props.strokeColor} // TODO clew uses strokeColor, but we currently don't account for nested properties (border.color)
       // borderWidth={props.strokeWidth} // TODO clew uses strokeWidth, but we currently don't account for nested properties (border.width)
       color={props.backgroundColor}
-      itemSpacing={props.contentSpacing}
       borderRadius={props.radius}
       // @ts-expect-error TODO type needs to be fixed in framework
       style={[
         props.style, //
-        styles.Container.tones[tone()],
+        styles.Container.tones[props.tone ?? styles.tone],
         styles.Container.base
       ]}
       forwardStates
@@ -51,20 +39,25 @@ const BadgeContainer: Component<BadgeProps> = props => {
 };
 
 const Badge: Component<BadgeProps> = (props: BadgeProps) => {
-  const tone = createMemo(() => getTone(props));
-  const title = createMemo(() => getTitle(props.title));
+  const tone = createMemo(() => props.tone ?? styles.tone);
+  const baseBorderStyle = styles.Container.base.border as BorderStyleObject;
 
   return (
-    <BadgeContainer {...props} padding={props.padding} tone={tone()} style={props.style}>
+    <BadgeContainer
+      {...props}
+      height={props.height || styles.Text.base.lineHeight}
+      tone={tone()}
+      style={props.style}
+    >
       <Text
         color={props.textColor}
+        lineHeight={(props.height || styles.Text.base.lineHeight) + baseBorderStyle.width}
         style={[
           styles.Text.tones[tone()], //
           styles.Text.base
         ]}
-        tone={tone()}
       >
-        {title()}
+        {props.title}
       </Text>
     </BadgeContainer>
   );

packages/solid/components/Column/Column.tsx

@@ -35,10 +35,10 @@ const Column: Component<ColumnProps> = (props: ColumnProps) => {
       onDown={chainFunctions<KeyHandler | undefined>(props.onDown, onDown)}
       selected={props.selected || 0}
       forwardFocus={onGridFocus}
-      onBeforeLayout={
+      onLayout={
         props.selected
-          ? chainFunctions(props.onBeforeLayout, (elm, selected) => scroll(elm, selected))
-          : props.onBeforeLayout
+          ? chainFunctions(props.onLayout, scroll)
+          : props.onLayout
       }
       onSelectedChanged={chainFunctions(
         props.onSelectedChanged,

packages/solid/components/Column/Column.types.ts

@@ -17,7 +17,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import type { IntrinsicNodeCommonProps, ElementNode, NodeStyles, KeyHandler } from '@lightningtv/core';
+import type { IntrinsicNodeCommonProps, ElementNode, NodeStyles, KeyHandler } from '@lightningtv/solid';
 import type { ComponentStyleConfig, NodeStyleSet, Tone } from 'types/types.js';
 import type { UIComponentProps } from 'types/interfaces.js';
 

packages/solid/components/FPSCounter/FPSCounter.tsx

@@ -15,8 +15,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { View, Text } from '@lightningtv/solid';
-import type { Stage } from '@lightningjs/renderer';
+import { View, Text, type Stage } from '@lightningtv/solid';
 import { createSignal } from 'solid-js';
 
 const fpsStyle = {