Merge pull request #34518 from ChaosinaCan/use-dark-mode

Add types for use-dark-mode

types/use-dark-mode/index.d.ts

@@ -0,0 +1,77 @@
+// Type definitions for use-dark-mode 2.3
+// Project: https://github.com/donavon/use-dark-mode#readme
+// Definitions by: Joel Spadin <https://github.com/ChaosinaCan>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.1
+
+interface DarkMode {
+    /**
+     * The current state of dark mode.
+     */
+    value: boolean;
+    /**
+     * A function that allows you to set dark mode to `true`.
+     */
+    enable(): void;
+    /**
+     * A function that allows you to set dark mode to `false`.
+     */
+    disable(): void;
+    /**
+     * A function that allows you to toggle dark mode.
+     */
+    toggle(): void;
+}
+
+interface DarkModeConfig {
+    /**
+     * The class to apply. Default = `dark-mode`.
+     */
+    classNameDark: string;
+    /**
+     * The class to apply. Default = `light-mode`.
+     */
+    classNameLight: string;
+    /**
+     * The element to apply the class name. Default = `document.body`.
+     */
+    element: Element;
+    /**
+     * A function that will be called when the dark mode value changes and
+     * it is safe to access the DOM (i.e. it is called from within a
+     * `useEffect`). If you specify `onChange` then `classNameDark`,
+     * `classNameLight`, and `element` are ignored (i.e. no classes are
+     * automatically placed on the DOM). You have full control!
+     */
+    onChange: (value: boolean) => void;
+    /**
+     * A string that will be used by the `storageProvider` to persist the
+     * dark mode value. If you specify a value of `null`, nothing will not
+     * be persisted. Default = `darkMode`.
+     */
+    storageKey: string | null;
+    /**
+     * A storage provider. Default = `localStorage`. You will generally
+     * never need to change this value.
+     */
+    storageProvider: Storage;
+}
+
+/**
+ * A custom React Hook to help you implement a "dark mode" component for
+ * your application. The user setting persists to `localStorage` by default.
+ *
+ * `useDarkMode` works in one of two ways:
+ * 1. By toggling a CSS class on whatever element you specify (defaults to
+ *    `document.body`). You then setup your CSS to display different views
+ *    based on the presence of the selector.
+ * 2. If you don't use global classes, you can specify an `onChange` handler
+ *    and take care of the implementation of switching to dark mode
+ *    yourself.
+ *
+ * @param initialState Specifies whether it should be in dark mode by defualt.
+ * @param darkModeConfig Optional configuration.
+ */
+declare function useDarkMode(initialState: boolean, darkModeConfig?: Partial<DarkModeConfig>): DarkMode;
+
+export default useDarkMode;

types/use-dark-mode/tsconfig.json

@@ -0,0 +1,24 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "dom",
+            "es6"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictFunctionTypes": true,
+        "strictNullChecks": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "use-dark-mode-tests.ts"
+    ]
+}

types/use-dark-mode/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }

types/use-dark-mode/use-dark-mode-tests.ts

@@ -0,0 +1,26 @@
+import useDarkMode from "use-dark-mode";
+
+// $ExpectType DarkMode
+const darkMode = useDarkMode(false);
+
+darkMode.value; // $ExpectType boolean
+darkMode.disable(); // $ExpectType void
+darkMode.enable(); // $ExpectType void
+darkMode.toggle(); // $ExpectType void
+
+// $ExpectType DarkMode
+useDarkMode(true, {
+    classNameDark: 'dark-mode',
+    classNameLight: 'light-mode',
+    element: document.body,
+    storageKey: 'darkMode',
+    storageProvider: localStorage,
+});
+
+// $ExpectType DarkMode
+useDarkMode(true, {
+    onChange: (value) => {
+        value; // $ExpectType: boolean
+    },
+    storageKey: null,
+});