pwr-fe-utils

A lightweight frontend utilities package for React/Next.js applications.
It provides authentication helpers, reusable hooks, and higher-order components (HOCs) to simplify development.

📦 Installation

npm install pwr-fe-utils
# or
yarn add pwr-fe-utils
✨ Features
🔐 Authentication
withAuth → Protects pages/components with an AuthGuard.

AuthGuard → Redirects unauthenticated users to login, supports custom loaders.

📝 Validation
withLoginValidationSchema → Wrap forms with a prebuilt Yup validation schema.

useLoginValidation → Provides a Yup schema for login (email, password).

💰 Formatting
useFormattedPrice → Format prices according to the current next-intl locale (USD/UAH).

useNumberToWords → Convert numbers into words according to the current locale.

🔑 JWT Utilities
useDecodedToken → Decode JWT tokens stored in localStorage.

⚡ Developer Friendly
Built with TypeScript.

Fully compatible with Next.js 13+ and React 18/19.

Organized modular structure for clean imports.

📖 Usage Examples
1. Protecting a Page with withAuth
tsx
Copy
Edit
"use client";
import { withAuth } from "pwr-fe-utils";

function ProfilePage() {
  return <div>Welcome to Profile</div>;
}

export default withAuth(ProfilePage);
2. Using withLoginValidationSchema
tsx
Copy
Edit
"use client";
import { withLoginValidationSchema } from "pwr-fe-utils";

function LoginForm({ form }) {
  const { register, handleSubmit, formState: { errors } } = form;

  const onSubmit = (data: any) => {
    console.log("Login submitted", data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("email")} placeholder="Email" />
      <p>{errors.email?.message}</p>

      <input {...register("password")} type="password" placeholder="Password" />
      <p>{errors.password?.message}</p>

      <button type="submit">Login</button>
    </form>
  );
}

export default withLoginValidationSchema(LoginForm);
3. Using useFormattedPrice
tsx
Copy
Edit
import { useFormattedPrice } from "pwr-fe-utils";

function PriceTag() {
  const { formatPrice } = useFormattedPrice();

  return <span>{formatPrice(1200)}</span>;
  // $1,200.00 or 1 200,00 ₴ based on locale
}
4. Using useDecodedToken
tsx
Copy
Edit
import { useDecodedToken } from "pwr-fe-utils";

function Profile() {
  const token = useDecodedToken<{ name: string }>();

  return <div>Hello, {token?.name}</div>;
}
5. Using useNumberToWords
tsx
Copy
Edit
"use client";
import { useNumberToWords } from "pwr-fe-utils";

function PriceInWords() {
  const { numberToWords } = useNumberToWords();

  return <div>{numberToWords(123456)}</div>;
  // "one hundred twenty-three thousand four hundred fifty-six"
  // Output is based on current next-intl locale, fallback is English
}
📂 Project Structure
css
Copy
Edit
src/
 ┣ hooks/
 ┃ ┣ useFormattedPrice.ts
 ┃ ┣ useDecodedToken.ts
 ┃ ┣ useLoginValidation.ts
 ┃ ┗ useNumberToWords.ts
 ┣ hoc/
 ┃ ┣ withAuth.tsx
 ┃ ┗ withLoginValidationSchema.tsx
 ┣ guards/
 ┃ ┗ authGuard.tsx
 ┗ index.ts
⚙️ Peer Dependencies
Make sure your project has:

next >= 13.0.0

react ^18.0.0 || ^19.0.0

react-dom ^18.0.0 || ^19.0.0

🙌 Contributing

Contributions, issues, and feature requests are welcome!
Feel free to open a PR or issue on https://github.com/Abdul-rehman-pwr/pwr-fe-utils
.