add borderbox v1

Author: chiefcll

.prettierrc.json

@@ -1,5 +1,6 @@
 {
   "trailingComma": "all",
   "singleQuote": true,
-  "semi": true
+  "semi": true,
+  "printWidth": 120
 }

docs/_sidebar.md

@@ -31,6 +31,7 @@
   - [WebOs/LG](/deploy/lg.md)
 - Primitives
   - [Accessibility / Announcer](/primitives/a11y.md)
+  - [borderBox](/primitives/borderBox.md)
   - [createBlurredImage](/primitives/createBlurredImage.md)
   - [createTag](/primitives/createTag.md)
   - [Dynamic](/primitives/dynamic.md)

docs/primitives/borderBox.md

@@ -0,0 +1,41 @@
+# `borderBox`
+
+A SolidJS directive that adds a visual border component to an element when it receives focus.
+
+### Usage
+
+```tsx
+import { borderBox } from '@lightningtv/solid/primitives';
+
+// Simple usage
+<view use:borderBox={true} />
+
+// Usage with custom border space
+<view use:borderBox={{ borderSpace: 10 }} />
+
+// Usage with custom border color (passed via NodeProps)
+<view use:borderBox={{ border: { color: 0xff0000, width: 4 } }} />
+```
+
+### Parameters
+
+The directive accepts `BorderProps | true | undefined` as the value.
+
+### BorderProps
+
+Extends standard [`NodeProps`](/solid/#/primitives/view).
+
+| Prop          | Type     | Description                                      | Default |
+| ------------- | -------- | ------------------------------------------------ | ------- |
+| `borderSpace` | `number` | The space between the element and the border box | `6`     |
+
+### Default Styles
+
+The border box uses `BorderBoxStyle` defaults:
+
+- `borderSpace`: 6
+- `borderRadius`: 20
+- `border`: `{ color: 0xffffff, width: 2 }`
+- `alpha`: 0 (initially, fades in to 1)
+
+When the element gains focus, the border (a `view`) is created, inserted into the element, and `fadeIn` is called. When focus is lost, `fadeOut` is called and then the border is removed.

src/primitives/FadeInOut.tsx

@@ -1,4 +1,4 @@
-import { ElementNode, NodeProps, View  } from '@lightningtv/solid';
+import { ElementNode, NodeProps, View } from '@lightningtv/solid';
 import { Show } from 'solid-js';
 
 interface Props {
@@ -14,6 +14,19 @@ const DEFAULT_PROPS = {
   easing: 'ease-in-out',
 };
 
+export const ALPHA_NONE = { alpha: 0 };
+export const ALPHA_FULL = { alpha: 1 };
+
+export function fadeIn(el: ElementNode): void {
+  if (!el?.lng?.animate) return;
+  el.alpha = 0;
+  el.animate(ALPHA_FULL).start();
+}
+export function fadeOut(el: ElementNode): Promise<void> {
+  if (!el?.lng?.animate) return Promise.resolve();
+  return el.animate(ALPHA_NONE).start().waitUntilStopped();
+}
+
 export default function FadeInOut(props: Props & NodeProps) {
   const config = Object.assign({}, DEFAULT_PROPS, props.transition);
   function onCreate(elm: ElementNode) {
@@ -23,12 +36,12 @@ export default function FadeInOut(props: Props & NodeProps) {
 
   function onDestroy(elm: ElementNode) {
     elm.rtt = true;
-    return elm.animate({ alpha: 0 }, { duration: config.duration, easing: config.easing })
-      .start().waitUntilStopped();
+    return elm.animate({ alpha: 0 }, { duration: config.duration, easing: config.easing }).start().waitUntilStopped();
   }
 
   return (
     <Show when={props.when} keyed>
       <View {...props} onDestroy={onDestroy} onCreate={onCreate} />
-    </Show>);
+    </Show>
+  );
 }

src/primitives/borderBox.tsx

@@ -0,0 +1,60 @@
+import { ElementNode, insertNode, type NodeProps, type NodeStyles } from '@lightningtv/solid';
+import { createMemo, getOwner, onMount, runWithOwner, type Accessor } from 'solid-js';
+import { fadeIn, fadeOut } from './FadeInOut.jsx';
+import { chainFunctions } from '@lightningtv/solid/primitives';
+
+export const BorderBoxStyle: NodeStyles = {
+  alpha: 0,
+  borderSpace: 6,
+  borderRadius: 20,
+  border: { color: 0xffffff, width: 2 },
+};
+
+type BorderProps = NodeProps & { borderSpace?: number };
+const borderComponent = (props: BorderProps) => {
+  const space = createMemo(() => props.borderSpace ?? (BorderBoxStyle.borderSpace as number));
+  return (
+    <>
+      <view
+        skipFocus
+        onCreate={(el) => {
+          const parent = el.parent!;
+          el.width = parent.width + space() * 2;
+          el.height = parent.height + space() * 2;
+          fadeIn(el);
+        }}
+        onDestroy={fadeOut}
+        style={BorderBoxStyle}
+        x={-space()}
+        y={-space()}
+        {...props}
+      />
+    </>
+  );
+};
+
+// Solid directives can only be used on native root elements `view` and `text`
+export default function borderbox(el: ElementNode, accessor: Accessor<BorderProps | true | undefined>) {
+  let border: ElementNode | null;
+  const owner = getOwner();
+
+  onMount(() => {
+    el.onFocusChanged = chainFunctions((f) => {
+      if (f) {
+        if (border) return;
+        runWithOwner(owner, () => {
+          const props = accessor();
+          border = borderComponent(
+            props === true || props === undefined ? ({} as NodeProps) : props,
+          ) as any as ElementNode;
+          insertNode(el, border);
+          border.render();
+        });
+      } else if (border) {
+        border.destroy();
+        el.removeChild(border!);
+        border = null;
+      }
+    }, el.onFocusChanged);
+  });
+}

src/primitives/index.ts

@@ -1,6 +1,7 @@
 export * from './useFocusManager.js';
 export * from './announcer/index.js';
 export * from './createInfiniteItems.js';
+export * from './borderBox.jsx';
 export * from './useMouse.js';
 export * from './portal.jsx';
 export * from './Lazy.jsx';
@@ -23,11 +24,7 @@ export * from './VirtualGrid.jsx';
 export * from './Virtual.jsx';
 export * from './utils/withScrolling.js';
 export * from './createTag.jsx';
-export {
-  type AnyFunction,
-  chainFunctions,
-  chainRefs,
-} from './utils/chainFunctions.js';
+export { type AnyFunction, chainFunctions, chainRefs } from './utils/chainFunctions.js';
 export * from './utils/handleNavigation.js';
 export { createSpriteMap, type SpriteDef } from './utils/createSpriteMap.js';
 export { createBlurredImage } from './utils/createBlurredImage.js';