Filters (#3)

* WIP enums

* WIP types

* working filter

* init tests

* tests

* readme and cleanup

* bundle

* desc

.eslintrc

@@ -1,7 +1,7 @@
 {
  "root": true,
  "parser": "@typescript-eslint/parser",
- "plugins": ["@typescript-eslint", "react-hooks"],
+ "plugins": ["@typescript-eslint"],
  "extends": [
  "eslint:recommended",
  "plugin:@typescript-eslint/eslint-recommended",
@@ -35,8 +35,6 @@
  "varsIgnorePattern": "^_",
  "ignoreRestSiblings": true
  }
- ],
- "react-hooks/rules-of-hooks": "error",
- "react-hooks/exhaustive-deps": "warn"
+ ]
  }
 }

README.md

@@ -1,2 +1,108 @@
-# configwise
-config provider ⚙️
+# Configwise
+
+Crafting Dynamic Project Configs based on your Browser’s Whims 🌟
+
+`configwise` is a lightweight, strongly-typed package to build and serve project configurations based on the browser environment, platform, os, engine, etc.
+
+## 🏁 Getting started
+
+```
+$ npm install configwise
+// OR
+$ yarn add configwise
+```
+
+## 💻 Installation
+
+```
+$ git clone https://github.com/hasnainroopawalla/configwise.git
+$ cd configwise
+$ yarn install
+```
+
+## 💡 Usage
+
+`configwise.createConfig` should be executed once on app init. The current browser/OS environment is detected and parsed by [bowser](https://www.npmjs.com/package/bowser) using the `window.navigator.userAgent`.
+
+`configwise` builds and serves the appropriate config property values based on the user-created project configuration with filters such as `Browser`, `Platform`, `OS` and `Engine`.
+
+> These enums are inferred from the bowser package.
+
+Example: Create a configuration for your project with 2 properties - `showButton` and `themeColors` with the appropriate values based on the environment:
+
+```javascript
+// config.ts
+
+import { createConfig, Browser, OS, Platform, Engine } from "configwise";
+
+export const config = createConfig({
+ showButton: {
+ // default fallback base value if no filters are satisfied
+ value: true,
+ filters: [
+ {
+ // a filter to set this property as false for Edge and Firefox on MacOS
+ browser: [Browser.Edge, Browser.Firefox],
+ os: [OS.MacOS],
+ value: false,
+ },
+ {
+ // a filter to set this property as true for Chrome on Mobile
+ browser: [Browser.Chrome],
+ platform: [Platform.Mobile],
+ value: true,
+ },
+ ],
+ },
+
+ themeColors: {
+ value: {
+ light: "#ffffff",
+ dark: "#000000",
+ },
+ filters: [
+ {
+ browser: [Browser.InternetExplorer],
+ engine: [Engine.EdgeHTML]
+ value: {
+ light: "#dbdbdb",
+ dark: "#141414",
+ },
+ },
+ ],
+ },
+});
+```
+
+Import the created `config` in any other file with full type-safety:
+
+```javascript
+import * as React from "react";
+import config from "./config";
+
+const MyComponent: React.FC = () => {
+ // typeof config is inferred and strictly-typed as:
+ //
+ // typeof config = {
+ // showButton: boolean;
+ // themeColors: {
+ // light: string;
+ // dark: string;
+ // }
+ // }
+
+ const shouldShowButton = config.showButton;
+
+ return (
+ <>
+ <span>Some text</span>
+ {shouldShowButton && <button onClick={() => {}}>Submit</button>}
+ </>
+ );
+};
+```
+
+## ✏️ Contributing
+
+- Post any issues and suggestions on the GitHub [issues](https://github.com/hasnainroopawalla/configwise/issues) page.
+- To contribute, fork the project and then create a pull request back to `master`.

package.json

@@ -1,12 +1,11 @@
 {
  "name": "configwise",
  "version": "0.1.1",
- "description": "",
+ "description": "Crafting Dynamic Project Configs based on your Browser's Whims ⚙️",
  "repository": "https://github.com/hasnainroopawalla/configwise",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
- "start": "parcel src/index.html",
  "build": "tsc",
  "prepare": "yarn build",
  "publish:dry-run": "npm publish --dry-run",
@@ -24,30 +23,22 @@
  "typescript",
  "react",
  "config",
- "settings"
+ "settings",
+ "bowser"
  ],
  "author": "Hasnain Roopawalla",
  "license": "MIT",
  "devDependencies": {
  "@types/jest": "^29.5.12",
- "@types/react": "^18.2.74",
  "@typescript-eslint/eslint-plugin": "^7.2.0",
  "@typescript-eslint/parser": "^7.2.0",
+ "bowser": "^2.11.0",
  "eslint": "^8.57.0",
- "eslint-plugin-react": "^7.34.1",
- "eslint-plugin-react-hooks": "^4.6.0",
  "jest": "^29.7.0",
  "jest-environment-jsdom": "^29.7.0",
  "process": "^0.11.10",
- "react": "^18.2.0",
  "ts-jest": "^29.1.2",
  "tslib": "^2.6.2",
  "typescript": "^5.4.2"
- },
- "dependencies": {
- "@types/react-dom": "^18.2.23",
- "bowser": "^2.11.0",
- "parcel": "^2.12.0",
- "react-dom": "^18.2.0"
  }
-}
+}

src/config.interface.ts

@@ -0,0 +1,31 @@
+import { Browser, Engine, OS, Platform } from "./enums";
+
+type OneOf<T> = {
+ [K in keyof T]-?: Pick<T, K> & Partial<T>;
+}[keyof T];
+
+export type IFilterValue<TProp> = OneOf<{
+ browser: Browser[];
+ os: OS[];
+ platform: Platform[];
+ engine: Engine[];
+}> & { value: TProp };
+
+export type IProperty<TProp> = {
+ value: TProp;
+ filters?: IFilterValue<TProp>[];
+};
+
+/**
+ * A strongly typed `userConfig` object required to create the `IConfig` object.
+ */
+export type IUserConfig<TConfig> = {
+ [K in keyof TConfig]: IProperty<TConfig[K]>;
+};
+
+/**
+ * A type-safe object of the config parameters and corresponding values.
+ */
+export type IConfig<TConfig> = {
+ [K in keyof TConfig]: TConfig[K];
+};

src/create-config.ts

@@ -0,0 +1,24 @@
+import { PropertyParser } from "./property-parser";
+import type { IConfig, IUserConfig } from "./config.interface";
+import { getEnvironment } from "./environment";
+
+/**
+ * Creates a configwise project configuration.
+ *
+ * @param userConfig - The project configuration with filters, properties and values.
+ * @returns The filtered property values based on the browser environment.
+ */
+export function createConfig<TUserConfig>(
+ userConfig: IUserConfig<TUserConfig>
+) {
+ const environment = getEnvironment();
+ const propParser = new PropertyParser(environment);
+
+ const configValues: IConfig<TUserConfig> = {} as IConfig<TUserConfig>;
+
+ for (const propertyName in userConfig) {
+ configValues[propertyName] = propParser.getValue(userConfig[propertyName]);
+ }
+
+ return configValues;
+}