@studio-piot/native-ui 0.2.5 → 0.17.0

package/src/theme/resolveThemeSpacing.test.ts

@@ -0,0 +1,29 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import {
+  DEFAULT_THEME_SPACING,
+  resolveThemeSpacing,
+} from "./resolveThemeSpacing.ts";
+
+describe("resolveThemeSpacing", () => {
+  it("keeps the package defaults when nothing is set", () => {
+    assert.deepEqual(resolveThemeSpacing(undefined), {
+      screen: 16,
+      pageTop: 16,
+      pageBottom: 24,
+    });
+    assert.deepEqual(resolveThemeSpacing({}), DEFAULT_THEME_SPACING);
+  });
+
+  it("overrides only the keys the app sets", () => {
+    assert.deepEqual(resolveThemeSpacing({ screen: 20 }), {
+      screen: 20,
+      pageTop: 16,
+      pageBottom: 24,
+    });
+  });
+
+  it("allows zero", () => {
+    assert.equal(resolveThemeSpacing({ pageTop: 0 }).pageTop, 0);
+  });
+});

package/src/theme/resolveThemeSpacing.ts

@@ -0,0 +1,21 @@
+export type ThemeSpacing = {
+  /** Inset from the left and right screen edges. */
+  screen: number;
+  /** Gap between the header and the first item of a `Page`. */
+  pageTop: number;
+  /** Gap after the last item of a `Page`. */
+  pageBottom: number;
+};
+
+export const DEFAULT_THEME_SPACING: ThemeSpacing = {
+  screen: 16,
+  pageTop: 16,
+  pageBottom: 24,
+};
+
+/** App spacing over the package defaults. Pure so it can be unit-tested. */
+export function resolveThemeSpacing(
+  spacing: Partial<ThemeSpacing> | undefined,
+): ThemeSpacing {
+  return { ...DEFAULT_THEME_SPACING, ...spacing };
+}

package/src/theme/types.ts

@@ -1,5 +1,8 @@
+import type { ThemeSpacing } from "./resolveThemeSpacing";
+
 export type ThemeColors = Record<string, string>;
 
 export type ThemeContextValue = {
   colors: { light: ThemeColors; dark: ThemeColors };
+  spacing: ThemeSpacing;
 };

package/src/theme/useThemeSpacing.ts

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { DEFAULT_THEME_SPACING, type ThemeSpacing } from "./resolveThemeSpacing";
+import { ThemeContext } from "./ThemeProvider";
+
+/** Spacing from `ThemeProvider`, or the package defaults outside one. */
+export function useThemeSpacing(): ThemeSpacing {
+  return useContext(ThemeContext)?.spacing ?? DEFAULT_THEME_SPACING;
+}

package/src/components/Form/withAlpha.test.ts

@@ -1,13 +0,0 @@
-import assert from "node:assert/strict";
-import { describe, it } from "node:test";
-import { withAlpha } from "./withAlpha.ts";
-
-describe("withAlpha", () => {
-  it("converts a hex colour to rgba", () => {
-    assert.equal(withAlpha("#EDE7DE", 0.98), "rgba(237, 231, 222, 0.98)");
-  });
-
-  it("expands three-digit hex", () => {
-    assert.equal(withAlpha("#abc", 0.5), "rgba(170, 187, 204, 0.5)");
-  });
-});