@alexrah/react-toolkit 0.1.0 → 0.2.0

package/README.md

@@ -0,0 +1,61 @@
+# @alexrah/react-toolkit
+
+A collection of react tools
+
+## Installation
+
+```bash
+pnpm install @alexrah/react-toolkit
+```
+
+## Exported Functions
+
+### `cn(...inputs: ClassValue[])`
+
+This function merges Tailwind CSS classes without style conflicts. It's a combination of `clsx` and `tailwind-merge`.
+
+**Usage:**
+
+```tsx
+import { cn } from '@alexrah/react-toolkit/utils';
+
+function MyComponent({ className }: { className?: string }) {
+  return <div className={cn('bg-red-500', className)}>Hello</div>;
+}
+```
+
+### `` tw`p-1` ``
+
+A utility for triggering LSP completions for Tailwind CSS class names dynamically.
+
+**Usage:**
+
+```tsx
+import { tw } from '@alexrah/react-toolkit/utils';
+
+const myClassName = tw`bg-red-500`;
+```
+
+## Scripts
+
+- `pnpm build`: Compiles the TypeScript code.
+- `pnpm typecheck`: Runs the TypeScript compiler to check for type errors without emitting files.
+- `pnpm clean`: Removes the `dist` directory and TypeScript build info files.
+- `pnpm prepublishOnly`: Cleans and builds the project before publishing.
+- `pnpm lint`: Lints the codebase using ESLint.
+- `pnpm lint:fix`: Lints the codebase and automatically fixes issues.
+
+## Dependencies
+
+- [clsx](https://github.com/lukeed/clsx): A tiny (228B) utility for constructing `className` strings conditionally.
+- [tailwind-merge](https://github.com/dcastil/tailwind-merge): A utility function to merge Tailwind CSS classes in JS without style conflicts.
+
+## Dev Dependencies
+
+- [eslint](https://eslint.org/): A tool for identifying and reporting on patterns found in ECMAScript/JavaScript code.
+- [rimraf](https://github.com/isaacs/rimraf): A deep deletion module for node (like `rm -rf`).
+- [typescript](https://www.typescriptlang.org/): A typed superset of JavaScript that compiles to plain JavaScript.
+
+## Repository
+
+[https://github.com/alexrah/react-toolkit](https://github.com/alexrah/react-toolkit)

package/dist/utils/ui.d.ts

@@ -1,3 +1,9 @@
 import { type ClassValue } from 'clsx';
 export declare function cn(...inputs: ClassValue[]): string;
+/**
+ * Helper to pass to LSP tailwind-language-server classFunctions settings to make it recognize & autocomplete tailwind classes
+ * @see https://github.com/tailwindlabs/tailwindcss-intellisense#tailwindcssclassattributes
+ * @usage const className = tw\`bg-red-500`
+ */
+export declare function tw(strings: TemplateStringsArray, ...values: unknown[]): string;
 //# sourceMappingURL=ui.d.ts.map

package/dist/utils/ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../src/utils/ui.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,MAAM,CAAA;AAG5C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}
+{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../src/utils/ui.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,MAAM,CAAA;AAG5C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC;AAED;;;;GAIG;AACH,wBAAgB,EAAE,CAAC,OAAO,EAAE,oBAAoB,EAAE,GAAG,MAAM,EAAE,OAAO,EAAE,GAAG,MAAM,CAE9E"}

package/dist/utils/ui.js

@@ -3,4 +3,12 @@ import { twMerge } from 'tailwind-merge';
 export function cn(...inputs) {
     return twMerge(clsx(inputs));
 }
+/**
+ * Helper to pass to LSP tailwind-language-server classFunctions settings to make it recognize & autocomplete tailwind classes
+ * @see https://github.com/tailwindlabs/tailwindcss-intellisense#tailwindcssclassattributes
+ * @usage const className = tw\`bg-red-500`
+ */
+export function tw(strings, ...values) {
+    return strings.reduce((result, str, i) => result + str + (values[i] || ''), '');
+}
 //# sourceMappingURL=ui.js.map

package/dist/utils/ui.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui.js","sourceRoot":"","sources":["../../src/utils/ui.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,IAAI,EAAE,MAAM,MAAM,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAExC,MAAM,UAAU,EAAE,CAAC,GAAG,MAAoB;IACxC,OAAO,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAA;AAC9B,CAAC"}
+{"version":3,"file":"ui.js","sourceRoot":"","sources":["../../src/utils/ui.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,IAAI,EAAE,MAAM,MAAM,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAExC,MAAM,UAAU,EAAE,CAAC,GAAG,MAAoB;IACxC,OAAO,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAA;AAC9B,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,EAAE,CAAC,OAA6B,EAAE,GAAG,MAAiB;IACpE,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,MAAM,GAAG,GAAG,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;AAClF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alexrah/react-toolkit",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A collection of react tools",
   "type": "module",
   "keywords": [