introduce prettier

Author: msaktype

.gitignore

@@ -29,4 +29,4 @@ coverage/
 
 # cache
 .cache/
-.eslintcache
+.eslintcache

.npmignore

@@ -36,4 +36,3 @@ coverage/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-

.prettierignore

@@ -0,0 +1,22 @@
+# Dependencies
+node_modules/
+
+# Build output
+dist/
+build/
+lib/
+
+# Package files
+package-lock.json
+*.tgz
+
+# Logs
+*.log
+
+# Coverage
+coverage/
+.nyc_output/
+
+# Misc
+.DS_Store
+*.tsbuildinfo

README.md

@@ -37,9 +37,7 @@ const button = windCtrl({
   },
   dynamic: {
     w: (val) =>
-      typeof val === "number"
-        ? { style: { width: `${val}px` } }
-        : `w-${val}`,
+      typeof val === "number" ? { style: { width: `${val}px` } } : `w-${val}`,
   },
   defaultVariants: {
     intent: "primary",
@@ -66,13 +64,9 @@ Dynamic props allow you to pass arbitrary values that can resolve to either Tail
 const button = windCtrl({
   dynamic: {
     w: (val) =>
-      typeof val === "number"
-        ? { style: { width: `${val}px` } }
-        : `w-${val}`,
+      typeof val === "number" ? { style: { width: `${val}px` } } : `w-${val}`,
     h: (val) =>
-      typeof val === "number"
-        ? { style: { height: `${val}px` } }
-        : `h-${val}`,
+      typeof val === "number" ? { style: { height: `${val}px` } } : `h-${val}`,
   },
 });
 
@@ -122,7 +116,6 @@ const button = windCtrl({
 
 The scope classes are automatically prefixed with `group-data-[scope=...]/wind-scope:` to work with Tailwind's group modifier.
 
-
 ### Variants
 
 Variants are mutually exclusive options. Each variant dimension can have multiple options, but only one option per dimension can be active at a time.

examples/Button.tsx

@@ -25,13 +25,9 @@ const button = windCtrl({
   },
   dynamic: {
     w: (val) =>
-      typeof val === "number"
-        ? { style: { width: `${val}px` } }
-        : `w-${val}`,
+      typeof val === "number" ? { style: { width: `${val}px` } } : `w-${val}`,
     h: (val) =>
-      typeof val === "number"
-        ? { style: { height: `${val}px` } }
-        : `h-${val}`,
+      typeof val === "number" ? { style: { height: `${val}px` } } : `h-${val}`,
   },
   defaultVariants: {
     intent: "primary",
@@ -47,7 +43,9 @@ type ButtonProps<T extends ElementType = "button"> = {
   as?: T;
   intent?: "primary" | "secondary" | "destructive" | "outline" | "ghost";
   size?: "sm" | "md" | "lg";
-  traits?: Array<"loading" | "glass" | "disabled"> | { loading?: boolean; glass?: boolean; disabled?: boolean };
+  traits?:
+    | Array<"loading" | "glass" | "disabled">
+    | { loading?: boolean; glass?: boolean; disabled?: boolean };
   w?: string | number;
   h?: string | number;
 } & ComponentPropsWithoutRef<T>;
@@ -83,4 +81,3 @@ export function Button<T extends ElementType = "button">({
     </Component>
   );
 }
-

examples/ButtonExample.tsx

@@ -34,9 +34,7 @@ export function ButtonExample() {
             Loading (Object)
           </Button>
           <Button traits={["glass"]}>Glass Effect</Button>
-          <Button traits={["loading", "glass"]}>
-            Loading + Glass
-          </Button>
+          <Button traits={["loading", "glass"]}>Loading + Glass</Button>
           <Button traits={["disabled"]}>Disabled</Button>
         </div>
       </section>
@@ -59,19 +57,10 @@ export function ButtonExample() {
           <Button intent="secondary" size="lg" traits={["glass"]}>
             Secondary + Large + Glass
           </Button>
-          <Button
-            intent="primary"
-            size="sm"
-            traits={["loading"]}
-            w={120}
-          >
+          <Button intent="primary" size="sm" traits={["loading"]} w={120}>
             Primary + Small + Loading
           </Button>
-          <Button
-            intent="outline"
-            traits={["glass"]}
-            w="full"
-          >
+          <Button intent="outline" traits={["glass"]} w="full">
             Outline + Glass + Full Width
           </Button>
         </div>
@@ -87,16 +76,24 @@ export function ButtonExample() {
       </section>
 
       <section>
-        <h2 className="text-2xl font-semibold mb-4">Scopes (Context-aware styling)</h2>
+        <h2 className="text-2xl font-semibold mb-4">
+          Scopes (Context-aware styling)
+        </h2>
         <div className="space-y-4">
-          <div data-scope="header" className="group/wind-scope p-4 bg-gray-100 rounded">
+          <div
+            data-scope="header"
+            className="group/wind-scope p-4 bg-gray-100 rounded"
+          >
             <p className="mb-2 text-sm text-gray-600">Header scope:</p>
             <Button intent="primary">Header Button</Button>
             <p className="mt-2 text-xs text-gray-500">
               This button will have smaller text due to header scope
             </p>
           </div>
-          <div data-scope="footer" className="group/wind-scope p-4 bg-gray-100 rounded">
+          <div
+            data-scope="footer"
+            className="group/wind-scope p-4 bg-gray-100 rounded"
+          >
             <p className="mb-2 text-sm text-gray-600">Footer scope:</p>
             <Button intent="secondary">Footer Button</Button>
             <p className="mt-2 text-xs text-gray-500">
@@ -108,4 +105,3 @@ export function ButtonExample() {
     </div>
   );
 }
-

package-lock.json

@@ -43,10 +43,14 @@
     "test:coverage": "vitest --coverage",
     "build": "tsc",
     "dev": "tsc --watch",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
     "prepublishOnly": "npm run build && npm test"
   },
   "devDependencies": {
     "@types/node": "^25.0.3",
+    "@types/react": "^19.2.7",
+    "prettier": "^3.7.4",
     "typescript": "^5.9.3",
     "vitest": "^4.0.16"
   },

package.json

@@ -313,8 +313,12 @@ describe("windCtrl", () => {
       });
 
       const result = button({});
-      expect(result.className).toContain("group-data-[scope=header]/wind-scope:text-sm");
-      expect(result.className).toContain("group-data-[scope=footer]/wind-scope:text-xs");
+      expect(result.className).toContain(
+        "group-data-[scope=header]/wind-scope:text-sm",
+      );
+      expect(result.className).toContain(
+        "group-data-[scope=footer]/wind-scope:text-xs",
+      );
     });
 
     it("should combine scopes with base classes", () => {
@@ -328,7 +332,9 @@ describe("windCtrl", () => {
       const result = button({});
       expect(result.className).toContain("px-4");
       expect(result.className).toContain("py-2");
-      expect(result.className).toContain("group-data-[scope=header]/wind-scope:text-sm");
+      expect(result.className).toContain(
+        "group-data-[scope=header]/wind-scope:text-sm",
+      );
     });
   });
 
@@ -415,7 +421,9 @@ describe("windCtrl", () => {
 
       expect(result.style).toEqual({ width: "200px" });
 
-      expect(result.className).toContain("group-data-[scope=header]/wind-scope:text-sm");
+      expect(result.className).toContain(
+        "group-data-[scope=header]/wind-scope:text-sm",
+      );
     });
 
     it("should merge conflicting Tailwind classes (last one wins)", () => {
@@ -535,4 +543,3 @@ describe("windCtrl", () => {
     });
   });
 });
-

src/__tests__/windctrl.test.ts

@@ -38,7 +38,9 @@ type Props<
 } & {
   traits?:
     | Array<keyof TTraits extends string ? keyof TTraits : never>
-    | Partial<Record<keyof TTraits extends string ? keyof TTraits : never, boolean>>;
+    | Partial<
+        Record<keyof TTraits extends string ? keyof TTraits : never, boolean>
+      >;
 } & {
   [K in keyof TDynamic]?: Parameters<TDynamic[K]>[0];
 };
@@ -48,15 +50,13 @@ type Result = {
   style?: CSSProperties;
 };
 
-function mergeStyles(
-  ...styles: (CSSProperties | undefined)[]
-): CSSProperties {
+function mergeStyles(...styles: (CSSProperties | undefined)[]): CSSProperties {
   return Object.assign({}, ...styles.filter(Boolean));
 }
 
 function processTraits<TTraits extends Record<string, ClassValue>>(
   traits: TTraits,
-  propsTraits?: Props<{}, TTraits>["traits"]
+  propsTraits?: Props<{}, TTraits>["traits"],
 ): ClassValue[] {
   if (!propsTraits) return [];
 
@@ -77,7 +77,7 @@ function processTraits<TTraits extends Record<string, ClassValue>>(
 
 function processDynamic<TDynamic extends Record<string, DynamicResolver>>(
   dynamic: TDynamic,
-  props: Props<{}, {}, TDynamic>
+  props: Props<{}, {}, TDynamic>,
 ): { className: ClassValue[]; style: CSSProperties } {
   const classNameParts: ClassValue[] = [];
   const styles: CSSProperties[] = [];
@@ -106,13 +106,12 @@ function processDynamic<TDynamic extends Record<string, DynamicResolver>>(
 }
 
 function processScopes<TScopes extends Record<string, ClassValue>>(
-  scopes: TScopes
+  scopes: TScopes,
 ): ClassValue[] {
   return Object.entries(scopes).map(([scopeName, scopeClasses]) => {
-    const classesStr = typeof scopeClasses === "string" 
-      ? scopeClasses 
-      : clsx(scopeClasses);
-    
+    const classesStr =
+      typeof scopeClasses === "string" ? scopeClasses : clsx(scopeClasses);
+
     return classesStr
       .split(/\s+/)
       .filter(Boolean)
@@ -127,7 +126,7 @@ export function windCtrl<
   TDynamic extends Record<string, DynamicResolver> = {},
   TScopes extends Record<string, ClassValue> = {},
 >(
-  config: Config<TVariants, TTraits, TDynamic, TScopes>
+  config: Config<TVariants, TTraits, TDynamic, TScopes>,
 ): (props?: Props<TVariants, TTraits, TDynamic>) => Result {
   const {
     base,
@@ -184,11 +183,10 @@ export function windCtrl<
     const finalClassName = twMerge(clsx(classNameParts));
 
     const hasStyle = Object.keys(mergedStyle).length > 0;
-    
+
     return {
       className: finalClassName,
       ...(hasStyle && { style: mergedStyle }),
     };
   };
 }
-