Update to Add Switch Method to ClassNames

README.md

@@ -2,7 +2,9 @@
 
 A Library Used for managing ClassNames in Javascript.
 
-Checkout the [TypeDoc](https://codevachon.github.io/classnames/).
+-   [TypeDoc](https://codevachon.github.io/classnames/)
+-   [GitHub](https://github.com/CodeVachon/classnames)
+-   [npm](https://www.npmjs.com/package/@codevachon/classnames)
 
 ## Install
 
@@ -183,6 +185,28 @@ const list = new ClassNames(values).list();
 // list => "a c"
 ```
 
+## Switch
+
+as of `1.1.0` you use a Switch like statement to change between values and set a default if the value is not found
+
+```js
+const size = "xs";
+
+const list = new ClassNames()
+    .switch(
+        size,
+        {
+            xs: "p-1",
+            sm: "p-2",
+            lg: "p-8",
+            xl: "p-12"
+        },
+        "p-4"
+    )
+    .list();
+// list => "p-1"
+```
+
 ## Static Methods
 
 -   .add() - Alias of `new ClassNames().add()`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codevachon/classnames",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "license": "MIT",
   "author": {
     "email": "[email protected]",

src/ClassNames.test.ts

@@ -1,4 +1,4 @@
-import { ClassNames } from "./ClassNames";
+import { ClassNames, cln } from "./ClassNames";
 
 describe("ClassNames", () => {
     describe("has", () => {
@@ -342,6 +342,33 @@ describe("ClassNames", () => {
         });
     });
 
+    describe("switch", () => {
+        const baseClasses = ["Beer", "Banana"];
+        const TestValues = { Cheese: "CheeseValue", green: "bg-emerald-700" };
+        const defaultValue = "Pie";
+
+        test("Adds the expected values", () => {
+            const condition = Object.keys(TestValues)[0] as keyof typeof TestValues;
+            expect(
+                new ClassNames(baseClasses).switch(condition, TestValues, defaultValue).list()
+            ).toContain(TestValues[condition]);
+        });
+
+        test("Adds the default value when its passed and condition is not met", () => {
+            const condition = "asdf";
+            expect(
+                new ClassNames(baseClasses).switch(condition, TestValues, defaultValue).list()
+            ).toContain(defaultValue);
+        });
+
+        test("Does not add anything is not default is passed and condition is not met", () => {
+            const condition = "asdf";
+            expect(
+                new ClassNames(baseClasses).switch(condition, TestValues).list().split(" ")
+            ).not.toContain(Object.values(TestValues));
+        });
+    });
+
     describe("static isClassNames method", () => {
         test("returns true if value is an instance of ClassNames", () => {
             const value = ClassNames.add("me");
@@ -357,3 +384,10 @@ describe("ClassNames", () => {
         });
     });
 });
+
+describe("cln", () => {
+    test("returns a string", () => {
+        const values = ["p1", "p2", "p3"];
+        expect(cln(values)).toMatch(values.join(" "));
+    });
+});

src/ClassNames.ts

@@ -1,8 +1,10 @@
 export interface IConditionalClasses {
     [className: string]: boolean;
 }
-export type AddInputValue = string | string[] | ClassNames | IConditionalClasses;
+export type ClassNameAddValue = string | string[] | ClassNames;
+export type AddInputValue = ClassNameAddValue | IConditionalClasses;
 export type RemoveInputValue = string | string[] | RegExp | RegExp[];
+
 /**
  * A Class to help Manage Classes for Components
  */
@@ -265,6 +267,38 @@ class ClassNames {
         return this;
     }
 
+    /**
+     * Act like a Switch Case for Added Classes
+     *
+     * *Usage*
+     *
+     * ```ts
+     * new ClassNames(["rounded text-white px-4 py-2"])
+     *   .switch(btnType, {
+     *     "success": "bg-emerald-700",
+     *     "danger": "bg-red-700"
+     *   }, "bg-sky-700")
+     * ```
+     *
+     * @param onValue The the Value to Switch On
+     * @param options Object Containing Possible Values and there Keys
+     * @param defaultValue Optional Default Value
+     * @returns this instance
+     */
+    public switch(
+        onValue: string,
+        options: Record<string, ClassNameAddValue>,
+        defaultValue?: string
+    ): this {
+        if (options[onValue]) {
+            this.add(options[onValue]);
+        } else if (defaultValue !== undefined) {
+            this.add(defaultValue);
+        }
+
+        return this;
+    }
+
     /**
      * Static accessor to add ClassNames
      *
@@ -288,5 +322,12 @@ class ClassNames {
     }
 }
 
+/**
+ * A Short Wrapper Function to ClassNames
+ * @param values the Values passed to ClassNames
+ * @returns a String of Formatted Classes
+ */
+const cln = (values: ClassNameAddValue): string => new ClassNames(values).list();
+
 export default ClassNames;
-export { ClassNames };
+export { ClassNames, cln };