Added FileListTheme

src/theme/DefaultThemeFileList.mjs

@@ -0,0 +1,69 @@
+import Color from "@farjs/ui/theme/Color.mjs";
+
+/**
+ * @type {import("./FileListTheme.mjs").ThemeFileList}
+ */
+const DefaultThemeFileList = Object.freeze({
+  archiveItem: Object.freeze({
+    bold: false,
+    bg: Color.blue,
+    fg: Color.magenta,
+    focus: Object.freeze({
+      bold: false,
+      bg: Color.cyan,
+      fg: Color.magenta,
+    }),
+  }),
+
+  regularItem: Object.freeze({
+    bold: false,
+    bg: Color.blue,
+    fg: Color.white,
+    focus: Object.freeze({
+      bold: false,
+      bg: Color.cyan,
+      fg: Color.black,
+    }),
+  }),
+
+  dirItem: Object.freeze({
+    bold: true,
+    bg: Color.blue,
+    fg: Color.white,
+    focus: Object.freeze({
+      bold: true,
+      bg: Color.cyan,
+      fg: Color.white,
+    }),
+  }),
+
+  hiddenItem: Object.freeze({
+    bold: true,
+    bg: Color.blue,
+    fg: Color.black,
+    focus: Object.freeze({
+      bold: true,
+      bg: Color.cyan,
+      fg: Color.black,
+    }),
+  }),
+
+  selectedItem: Object.freeze({
+    bold: true,
+    bg: Color.blue,
+    fg: Color.yellow,
+    focus: Object.freeze({
+      bold: true,
+      bg: Color.cyan,
+      fg: Color.yellow,
+    }),
+  }),
+
+  header: Object.freeze({
+    bold: true,
+    bg: Color.blue,
+    fg: Color.yellow,
+  }),
+});
+
+export default DefaultThemeFileList;

src/theme/FileListTheme.mjs

@@ -0,0 +1,44 @@
+/**
+ * @typedef {import("@farjs/ui/theme/Theme.mjs").Theme} Theme
+ * @typedef {import("@farjs/ui/theme/Theme.mjs").ThemeStyle} ThemeStyle
+ * @typedef {import("@farjs/ui/theme/Theme.mjs").ThemeEffects} ThemeEffects
+ */
+import Theme from "@farjs/ui/theme/Theme.mjs";
+import DefaultTheme from "@farjs/ui/theme/DefaultTheme.mjs";
+import XTerm256Theme from "@farjs/ui/theme/XTerm256Theme.mjs";
+import DefaultThemeFileList from "./DefaultThemeFileList.mjs";
+import XTerm256ThemeFileList from "./XTerm256ThemeFileList.mjs";
+
+const FileListTheme = {
+  /**
+   * @returns {FileListTheme}
+   */
+  useTheme: () => {
+    return /** @type {FileListTheme} */ (Theme.useTheme());
+  },
+
+  /** @type {FileListTheme} */
+  defaultTheme: { ...DefaultTheme, fileList: DefaultThemeFileList },
+
+  /** @type {FileListTheme} */
+  xterm256Theme: { ...XTerm256Theme, fileList: XTerm256ThemeFileList },
+};
+
+export default FileListTheme;
+
+/**
+ * @typedef {Theme & {
+ *  readonly fileList: ThemeFileList;
+ * }} FileListTheme
+ */
+
+/**
+ * @typedef {{
+ *  readonly archiveItem: ThemeEffects;
+ *  readonly regularItem: ThemeEffects;
+ *  readonly dirItem: ThemeEffects;
+ *  readonly hiddenItem: ThemeEffects;
+ *  readonly selectedItem: ThemeEffects;
+ *  readonly header: ThemeStyle;
+ * }} ThemeFileList
+ */

src/theme/XTerm256ThemeFileList.mjs

@@ -0,0 +1,69 @@
+import Color from "@farjs/ui/theme/Color.mjs";
+
+/**
+ * @type {import("./FileListTheme.mjs").ThemeFileList}
+ */
+const XTerm256ThemeFileList = Object.freeze({
+  archiveItem: Object.freeze({
+    bold: true,
+    bg: "#008",
+    fg: "#a05",
+    focus: Object.freeze({
+      bold: true,
+      bg: "#088",
+      fg: "#a05",
+    }),
+  }),
+
+  regularItem: Object.freeze({
+    bold: true,
+    bg: "#008",
+    fg: "#5ce",
+    focus: Object.freeze({
+      bold: true,
+      bg: "#088",
+      fg: "#111",
+    }),
+  }),
+
+  dirItem: Object.freeze({
+    bold: true,
+    bg: "#008",
+    fg: "#fff",
+    focus: Object.freeze({
+      bold: true,
+      bg: "#088",
+      fg: "#fff",
+    }),
+  }),
+
+  hiddenItem: Object.freeze({
+    bold: true,
+    bg: "#008",
+    fg: "#055",
+    focus: Object.freeze({
+      bold: true,
+      bg: "#088",
+      fg: "#055",
+    }),
+  }),
+
+  selectedItem: Object.freeze({
+    bold: true,
+    bg: "#008",
+    fg: Color.yellow,
+    focus: Object.freeze({
+      bold: true,
+      bg: "#088",
+      fg: Color.yellow,
+    }),
+  }),
+
+  header: Object.freeze({
+    bold: true,
+    bg: "#008",
+    fg: Color.yellow,
+  }),
+});
+
+export default XTerm256ThemeFileList;

test/all.mjs

@@ -11,3 +11,5 @@ await import("./api/MockFileTarget.test.mjs");
 await import("./history/HistoryProvider.test.mjs");
 
 await import("./sort/FileListSort.test.mjs");
+
+await import("./theme/FileListTheme.test.mjs");

test/theme/FileListTheme.test.mjs

@@ -0,0 +1,38 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+import assert from "node:assert/strict";
+import mockFunction from "mock-fn";
+import FileListTheme from "../../src/theme/FileListTheme.mjs";
+import withThemeContext from "./withThemeContext.mjs";
+
+const h = React.createElement;
+
+const { describe, it } = await (async () => {
+  // @ts-ignore
+  const module = process.isBun ? "bun:test" : "node:test";
+  // @ts-ignore
+  return process.isBun // @ts-ignore
+    ? Promise.resolve({ describe: (_, fn) => fn(), it: test })
+    : import(module);
+})();
+
+describe("FileListTheme.test.mjs", () => {
+  it("should return FileListTheme when useTheme", () => {
+    //given
+    let capturedTheme = undefined;
+    const onTheme = mockFunction((theme) => {
+      capturedTheme = theme;
+    });
+    const Wrapper = () => {
+      onTheme(FileListTheme.useTheme());
+      return null;
+    };
+
+    //when
+    TestRenderer.create(withThemeContext(h(Wrapper)));
+
+    //then
+    assert.deepEqual(onTheme.times, 1);
+    assert.deepEqual(capturedTheme == FileListTheme.defaultTheme, true);
+  });
+});

test/theme/withThemeContext.mjs

@@ -0,0 +1,20 @@
+/**
+ * @typedef {import("react").ReactElement} ReactElement
+ * @typedef {import("../../src/theme/FileListTheme.mjs").FileListTheme} FileListTheme
+ */
+import React from "react";
+import Theme from "@farjs/ui/theme/Theme.mjs";
+import FileListTheme from "../../src/theme/FileListTheme.mjs";
+
+const h = React.createElement;
+
+/**
+ * @param {ReactElement} element
+ * @param {FileListTheme} theme
+ * @returns {ReactElement}
+ */
+const withThemeContext = (element, theme = FileListTheme.defaultTheme) => {
+  return h(Theme.Context.Provider, { value: theme }, element);
+};
+
+export default withThemeContext;

types/theme/DefaultThemeFileList.d.mts

@@ -0,0 +1,5 @@
+export default DefaultThemeFileList;
+/**
+ * @type {import("./FileListTheme.mjs").ThemeFileList}
+ */
+declare const DefaultThemeFileList: import("./FileListTheme.mjs").ThemeFileList;

types/theme/FileListTheme.d.mts

@@ -0,0 +1,21 @@
+export default FileListTheme;
+export type Theme = import("@farjs/ui/theme/Theme.mjs").Theme;
+export type ThemeStyle = import("@farjs/ui/theme/Theme.mjs").ThemeStyle;
+export type ThemeEffects = import("@farjs/ui/theme/Theme.mjs").ThemeEffects;
+export type FileListTheme = Theme & {
+    readonly fileList: ThemeFileList;
+};
+export type ThemeFileList = {
+    readonly archiveItem: ThemeEffects;
+    readonly regularItem: ThemeEffects;
+    readonly dirItem: ThemeEffects;
+    readonly hiddenItem: ThemeEffects;
+    readonly selectedItem: ThemeEffects;
+    readonly header: ThemeStyle;
+};
+declare namespace FileListTheme {
+    function useTheme(): FileListTheme;
+    const defaultTheme: FileListTheme;
+    const xterm256Theme: FileListTheme;
+}
+import Theme from "@farjs/ui/theme/Theme.mjs";

types/theme/XTerm256ThemeFileList.d.mts

@@ -0,0 +1,5 @@
+export default XTerm256ThemeFileList;
+/**
+ * @type {import("./FileListTheme.mjs").ThemeFileList}
+ */
+declare const XTerm256ThemeFileList: import("./FileListTheme.mjs").ThemeFileList;