Implemented strict linting standards and prettier formatting config. (#248)

* Implemented strict linting standards and prettier formatting config.

* More linter fixes and type updates.

* More linter updates and type fixes

* Remove noisy comments

* Linter and type updates

* Linter, formatting and type updates.

* Linter updates

* Type updates

* Type updates

* fixed all linter errors

* Fixed all linting, formatting and type issues.

* Resolve merge conflicts.

widget/settings/shared/components/boolean.ts

@@ -0,0 +1,29 @@
+import { Opt } from 'lib/option';
+import { Attribute, BoxWidget } from 'lib/types/widget';
+import { Variable } from 'types/variable';
+
+import { dependencies as checkDependencies } from 'lib/utils';
+
+export const booleanInputter = <T>(
+    self: BoxWidget,
+    opt: Opt<T>,
+    disabledBinding: Variable<boolean> | undefined,
+    dependencies: string[] | undefined,
+): Attribute => {
+    return (self.child = Widget.Switch({
+        sensitive: disabledBinding !== undefined ? disabledBinding.bind('value').as((disabled) => !disabled) : true,
+    })
+        .on('notify::active', (self) => {
+            if (disabledBinding !== undefined && disabledBinding.value) {
+                return;
+            }
+            if (self.active && dependencies !== undefined && !dependencies.every((d) => checkDependencies(d))) {
+                self.active = false;
+                return;
+            }
+            opt.value = self.active as T;
+        })
+        .hook(opt, (self) => {
+            self.active = opt.value as boolean;
+        }));
+};

widget/settings/shared/components/color.ts

@@ -0,0 +1,19 @@
+import Gdk from 'gi://Gdk';
+import { Opt } from 'lib/option';
+import { Attribute, BoxWidget } from 'lib/types/widget';
+
+export const colorInputter = <T>(self: BoxWidget, opt: Opt<T>): Attribute => {
+    return (self.child = Widget.ColorButton()
+        .hook(opt, (self) => {
+            const rgba = new Gdk.RGBA();
+            rgba.parse(opt.value as string);
+            self.rgba = rgba;
+        })
+        .on('color-set', ({ rgba: { red, green, blue } }) => {
+            const hex = (n: number): string => {
+                const c = Math.floor(255 * n).toString(16);
+                return c.length === 1 ? `0${c}` : c;
+            };
+            opt.value = `#${hex(red)}${hex(green)}${hex(blue)}` as T;
+        }));
+};

widget/settings/shared/components/enum.ts

@@ -0,0 +1,36 @@
+import { Opt } from 'lib/option';
+import { BoxWidget } from 'lib/types/widget';
+import icons from 'lib/icons';
+import { Box } from 'types/@girs/gtk-3.0/gtk-3.0.cjs';
+
+export const enumInputter = <T extends string | number | boolean | object>(
+    self: BoxWidget,
+    opt: Opt<T>,
+    values: T[],
+): Box => {
+    const lbl = Widget.Label({ label: opt.bind().as((v) => `${v}`) });
+    const step = (dir: 1 | -1): void => {
+        const i = values.findIndex((i) => i === lbl.label);
+        opt.setValue(
+            dir > 0
+                ? i + dir > values.length - 1
+                    ? values[0]
+                    : values[i + dir]
+                : i + dir < 0
+                  ? values[values.length - 1]
+                  : values[i + dir],
+        );
+    };
+    const next = Widget.Button({
+        child: Widget.Icon(icons.ui.arrow.right),
+        on_clicked: () => step(+1),
+    });
+    const prev = Widget.Button({
+        child: Widget.Icon(icons.ui.arrow.left),
+        on_clicked: () => step(-1),
+    });
+    return (self.child = Widget.Box({
+        class_name: 'enum-setter',
+        children: [lbl, prev, next],
+    }));
+};

widget/settings/shared/components/font.ts

@@ -0,0 +1,14 @@
+import { Opt } from 'lib/option';
+import { Attribute, BoxWidget, Child } from 'lib/types/widget';
+import FontButton from 'types/widgets/fontbutton';
+
+export const fontInputter = <T>(self: BoxWidget, opt: Opt<T>): FontButton<Child, Attribute> => {
+    return (self.child = Widget.FontButton({
+        show_size: false,
+        use_size: false,
+        setup: (self) =>
+            self
+                .hook(opt, () => (self.font = opt.value as string))
+                .on('font-set', ({ font }) => (opt.value = font!.split(' ').slice(0, -1).join(' ') as T)),
+    }));
+};

widget/settings/shared/components/image.ts

@@ -0,0 +1,11 @@
+import { Opt } from 'lib/option';
+import { Attribute, BoxWidget } from 'lib/types/widget';
+
+export const imageInputter = <T>(self: BoxWidget, opt: Opt<T>): Attribute => {
+    return (self.child = Widget.FileChooserButton({
+        class_name: 'image-chooser',
+        on_file_set: ({ uri }) => {
+            opt.value = uri!.replace('file://', '') as T;
+        },
+    }));
+};

widget/settings/shared/components/import.ts

@@ -0,0 +1,24 @@
+import { ThemeExportData } from 'lib/types/options';
+import { Attribute, BoxWidget } from 'lib/types/widget';
+import { importFiles, saveFileDialog } from '../FileChooser';
+
+export const importInputter = (self: BoxWidget, exportData?: ThemeExportData): Attribute => {
+    return (self.child = Widget.Box({
+        children: [
+            Widget.Button({
+                class_name: 'options-import',
+                label: 'import',
+                on_clicked: () => {
+                    importFiles(exportData?.themeOnly as boolean);
+                },
+            }),
+            Widget.Button({
+                class_name: 'options-export',
+                label: 'export',
+                on_clicked: () => {
+                    saveFileDialog(exportData?.filePath as string, exportData?.themeOnly as boolean);
+                },
+            }),
+        ],
+    }));
+};

widget/settings/shared/components/number.ts

@@ -0,0 +1,45 @@
+import icons from 'lib/icons';
+import { Opt } from 'lib/option';
+import { Attribute, BoxWidget } from 'lib/types/widget';
+import { Variable } from 'types/variable';
+
+export const numberInputter = <T>(
+    self: BoxWidget,
+    opt: Opt<T>,
+    min: number,
+    max: number,
+    increment = 1,
+    isUnsaved: Variable<boolean>,
+): Attribute => {
+    return (self.children = [
+        Widget.Box({
+            class_name: 'unsaved-icon-container',
+            child: isUnsaved.bind('value').as((unsvd) => {
+                if (unsvd) {
+                    return Widget.Icon({
+                        class_name: 'unsaved-icon',
+                        icon: icons.ui.warning,
+                        tooltipText: "Press 'Enter' to apply your changes.",
+                    });
+                }
+                return Widget.Box();
+            }),
+        }),
+        Widget.SpinButton({
+            setup(self) {
+                self.set_range(min, max);
+                self.set_increments(1 * increment, 5 * increment);
+                self.on('value-changed', () => {
+                    opt.value = self.value as T;
+                });
+                self.hook(opt, () => {
+                    self.value = opt.value as number;
+                    isUnsaved.value = Number(self.text) !== (opt.value as number);
+                });
+                self.connect('key-release-event', () => {
+                    isUnsaved.value = Number(self.text) !== (opt.value as number);
+                });
+            },
+        }),
+    ]);
+};

widget/settings/shared/components/object.ts

@@ -0,0 +1,37 @@
+import icons from 'lib/icons';
+import { Opt } from 'lib/option';
+import { Attribute, BoxWidget } from 'lib/types/widget';
+import { Variable } from 'types/variable';
+
+export const objectInputter = <T>(
+    self: BoxWidget,
+    opt: Opt<T>,
+    isUnsaved: Variable<boolean>,
+    className: string,
+): Attribute => {
+    return (self.children = [
+        Widget.Box({
+            class_name: 'unsaved-icon-container',
+            child: isUnsaved.bind('value').as((unsvd) => {
+                if (unsvd) {
+                    return Widget.Icon({
+                        class_name: 'unsaved-icon',
+                        icon: icons.ui.warning,
+                        tooltipText: "Press 'Enter' to apply your changes.",
+                    });
+                }
+                return Widget.Box();
+            }),
+        }),
+        Widget.Entry({
+            class_name: className,
+            on_change: (self) => (isUnsaved.value = self.text !== JSON.stringify(opt.value)),
+            on_accept: (self) => (opt.value = JSON.parse(self.text || '')),
+            setup: (self) =>
+                self.hook(opt, () => {
+                    self.text = JSON.stringify(opt.value);
+                    isUnsaved.value = self.text !== JSON.stringify(opt.value);
+                }),
+        }),
+    ]);
+};

widget/settings/shared/components/string.ts

@@ -0,0 +1,34 @@
+import icons from 'lib/icons';
+import { Opt } from 'lib/option';
+import { Attribute, BoxWidget } from 'lib/types/widget';
+import { Variable } from 'types/variable';
+
+export const stringInputter = <T>(self: BoxWidget, opt: Opt<T>, isUnsaved: Variable<boolean>): Attribute => {
+    return (self.children = [
+        Widget.Box({
+            class_name: 'unsaved-icon-container',
+            child: isUnsaved.bind('value').as((unsvd) => {
+                if (unsvd) {
+                    return Widget.Icon({
+                        class_name: 'unsaved-icon',
+                        icon: icons.ui.warning,
+                        tooltipText: "Press 'Enter' to apply your changes.",
+                    });
+                }
+                return Widget.Box();
+            }),
+        }),
+        Widget.Entry({
+            class_name: isUnsaved.bind('value').as((unsaved) => (unsaved ? 'unsaved' : '')),
+            on_change: (self) => (isUnsaved.value = self.text !== opt.value),
+            on_accept: (self) => {
+                opt.value = self.text as T;
+            },
+            setup: (self) =>
+                self.hook(opt, () => {
+                    isUnsaved.value = self.text !== opt.value;
+                    self.text = opt.value as string;
+                }),
+        }),
+    ]);
+};

widget/settings/shared/components/wallpaper.ts

@@ -0,0 +1,20 @@
+import { Opt } from 'lib/option';
+import { Attribute, BoxWidget } from 'lib/types/widget';
+import Wallpaper from 'services/Wallpaper';
+
+export const wallpaperInputter = <T extends string | number | boolean | object>(
+    self: BoxWidget,
+    opt: Opt<T>,
+): Attribute | void => {
+    if (typeof opt.value === 'string') {
+        return (self.child = Widget.FileChooserButton({
+            on_file_set: ({ uri }) => {
+                const newValue: string = uri!.replace('file://', '');
+                opt.value = newValue as T;
+                if (options.wallpaper.enable.value) {
+                    Wallpaper.set(newValue);
+                }
+            },
+        }));
+    }
+};