// Good practice: Use PascalCase for React components
export const UserProfile: React.FC<UserProfileProps> = ({ user }) => {
  return <div>Profile for {user.name}</div>;
};
 
// Bad: Don't use kebab-case for components
export const user-profile = ({ user }) => {
  return <div>Profile for {user.name}</div>;
};

//  Good: Types and interfaces in PascalCase
interface UserData {
  id: string;
  firstName: string;
  lastName: string;
}
 
type ApiResponse<T> = {
  data: T;
  status: number;
};
 
// Bad: Don't use other cases for types
interface user_data {
  id: string;
}

// Good: Classes in PascalCase
class UserRepository {
  private users: User[] = [];
 
  async findById(id: string): Promise<User | null> {
    return this.users.find(user => user.id === id) ?? null;
  }
}
 
// Bad: Don't use kebab-case for classes
class user-repository {
  // This won't even work in JavaScript/TypeScript
}

# Good: File names in kebab-case
src/
  components/
    user-profile.tsx
    login-form.tsx
    nav-bar.tsx
 
# Bad: Don't mix cases in file names
src/
  components/
    UserProfile.tsx
    loginForm.tsx
    Nav_Bar.tsx

// Good: URL paths in kebab-case
const routes = {
  userProfile: '/user-profile',
  settingsPage: '/settings/account-preferences',
  blogPost: '/blog/how-to-code-well'
};
 
// Bad: Don't use PascalCase or camelCase in URLs
const routes = {
  userProfile: '/UserProfile',  // Avoid
  settingsPage: '/settings/accountPreferences'  // Avoid
};

// Good: CSS classes in kebab-case
const UserCard = () => (
  <div className="user-card dark-theme">
    <div className="user-avatar-wrapper">
      <img className="user-avatar" src="..." alt="User avatar" />
    </div>
  </div>
);
 
// Bad: Don't use camelCase or PascalCase in CSS classes
const UserCard = () => (
  <div className="UserCard darkTheme">  // Avoid
    <div className="userAvatarWrapper">  // Avoid
      <img className="userAvatar" src="..." alt="User avatar" />
    </div>
  </div>
);

#  Good: Next.js file naming
app/
  layout.tsx                # Reserved names in lowercase
  page.tsx                 # Reserved names in lowercase
  blog/
    [slug]/
      page.tsx
    categories/
      [category]/
        page.tsx
  components/
    user-profile.tsx       # Component files in kebab-case
    UserProfile.tsx        # Alternative: Component files in PascalCase

// Good: Component and file organization
// UserProfile.tsx or user-profile.tsx
import { type FC } from 'react';
 
interface UserProfileProps {
  userId: string;
  displayName: string;
}
 
export const UserProfile: FC<UserProfileProps> = ({
  userId,
  displayName
}) => {
  return (
    <div className="user-profile">
      {displayName}
    </div>
  );
};

// Good: CSS Modules naming
// user-profile.module.css
.userProfile {
  display: flex;
  gap: 1rem;
}
 
.avatarWrapper {
  border-radius: 50%;
}
 
// user-profile.tsx
import styles from './user-profile.module.css';
 
export const UserProfile = () => (
  <div className={styles.userProfile}>
    <div className={styles.avatarWrapper}>
      {/* Content */}
    </div>
  </div>
);

//  Good: Constants in SCREAMING_SNAKE_CASE
const API_BASE_URL = "https://api.example.com";
const MAX_RETRY_ATTEMPTS = 3;
 
// Environment variables
const env = {
  NEXT_PUBLIC_API_KEY: process.env.NEXT_PUBLIC_API_KEY,
  DATABASE_URL: process.env.DATABASE_URL,
};

// Good: Event handlers in camelCase with 'handle' prefix
const UserForm = () => {
  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();
  };
 
  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    // Handle input change
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <input onChange={handleInputChange} />
    </form>
  );
};

// .eslintrc.js
module.exports = {
  extends: ["next/core-web-vitals", "plugin:@typescript-eslint/recommended"],
  rules: {
    // Enforce PascalCase for React components
    "@typescript-eslint/naming-convention": [
      "error",
      {
        selector: "variable",
        format: ["PascalCase"],
        filter: {
          regex: "^.*Component$",
          match: true,
        },
      },
    ],
    // Enforce camelCase for functions
    camelcase: ["error", { properties: "never" }],
  },
};

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "files.associations": {
    "*.css": "css",
    "*.module.css": "css"
  },
  "typescript.preferences.importModuleSpecifier": "non-relative"
}

// Bad: Mixed casing styles
const UserProfile = () => {
  return <div className="UserCard user_avatar"></div>;
};
 
// Good: Consistent casing
const UserProfile = () => {
  return <div className="user-card user-avatar"></div>;
};

// Bad: Unclear abbreviations
const UsrPrfl = () => {
  return <div>Profile</div>;
};
 
//  Good: Clear, descriptive names
const UserProfile = () => {
  return <div>Profile</div>;
};

//  Bad: Name doesn't match functionality
const Button = () => {
  return <div onClick={handleClick}>Click me</div>;
};
 
//  Good: Name matches functionality and semantics
const Button = () => {
  return <button onClick={handleClick}>Click me</button>;
};

//  Good: Server component naming
 
export const UserProfileServer = async ({ id }: { id: string }) => {
  const user = await fetchUser(id);
  return <UserProfileClient user={user} />;
};