@mytechtoday/augment-extensions 0.1.0 → 0.1.2

package/augment-extensions/coding-standards/react/rules/component-patterns.md

@@ -0,0 +1,214 @@
+# React Component Patterns
+
+Modern component design patterns for React applications.
+
+## Functional Components
+
+Always use functional components with hooks (not class components).
+
+```tsx
+// Good - Functional component
+interface UserCardProps {
+  name: string;
+  email: string;
+  onEdit: () => void;
+}
+
+export const UserCard: React.FC<UserCardProps> = ({ name, email, onEdit }) => {
+  return (
+    <div className="user-card">
+      <h3>{name}</h3>
+      <p>{email}</p>
+      <button onClick={onEdit}>Edit</button>
+    </div>
+  );
+};
+
+// Bad - Class component
+class UserCard extends React.Component<UserCardProps> {
+  render() {
+    return (
+      <div className="user-card">
+        <h3>{this.props.name}</h3>
+        <p>{this.props.email}</p>
+        <button onClick={this.props.onEdit}>Edit</button>
+      </div>
+    );
+  }
+}
+```
+
+## Component Composition
+
+Break down complex components into smaller, reusable pieces.
+
+```tsx
+// Good - Composition
+const UserProfile = ({ user }: { user: User }) => (
+  <div className="profile">
+    <UserAvatar src={user.avatar} />
+    <UserInfo name={user.name} email={user.email} />
+    <UserActions userId={user.id} />
+  </div>
+);
+
+// Bad - Monolithic component
+const UserProfile = ({ user }: { user: User }) => (
+  <div className="profile">
+    <div className="avatar">
+      <img src={user.avatar} alt={user.name} />
+    </div>
+    <div className="info">
+      <h2>{user.name}</h2>
+      <p>{user.email}</p>
+    </div>
+    <div className="actions">
+      <button onClick={() => editUser(user.id)}>Edit</button>
+      <button onClick={() => deleteUser(user.id)}>Delete</button>
+    </div>
+  </div>
+);
+```
+
+## Container/Presenter Pattern
+
+Separate logic from presentation.
+
+```tsx
+// Presenter - Pure UI component
+interface UserListProps {
+  users: User[];
+  onUserClick: (id: string) => void;
+  loading: boolean;
+}
+
+const UserList: React.FC<UserListProps> = ({ users, onUserClick, loading }) => {
+  if (loading) return <Spinner />;
+  
+  return (
+    <ul>
+      {users.map(user => (
+        <li key={user.id} onClick={() => onUserClick(user.id)}>
+          {user.name}
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+// Container - Logic and data fetching
+const UserListContainer: React.FC = () => {
+  const { data: users, isLoading } = useUsers();
+  const navigate = useNavigate();
+  
+  const handleUserClick = (id: string) => {
+    navigate(`/users/${id}`);
+  };
+  
+  return <UserList users={users} onUserClick={handleUserClick} loading={isLoading} />;
+};
+```
+
+## Compound Components
+
+Create components that work together.
+
+```tsx
+// Compound component pattern
+interface TabsContextValue {
+  activeTab: string;
+  setActiveTab: (tab: string) => void;
+}
+
+const TabsContext = createContext<TabsContextValue | undefined>(undefined);
+
+export const Tabs: React.FC<{ children: React.ReactNode; defaultTab: string }> = ({ 
+  children, 
+  defaultTab 
+}) => {
+  const [activeTab, setActiveTab] = useState(defaultTab);
+  
+  return (
+    <TabsContext.Provider value={{ activeTab, setActiveTab }}>
+      <div className="tabs">{children}</div>
+    </TabsContext.Provider>
+  );
+};
+
+export const TabList: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <div className="tab-list">{children}</div>
+);
+
+export const Tab: React.FC<{ id: string; children: React.ReactNode }> = ({ id, children }) => {
+  const context = useContext(TabsContext);
+  if (!context) throw new Error('Tab must be used within Tabs');
+  
+  return (
+    <button
+      className={context.activeTab === id ? 'active' : ''}
+      onClick={() => context.setActiveTab(id)}
+    >
+      {children}
+    </button>
+  );
+};
+
+export const TabPanel: React.FC<{ id: string; children: React.ReactNode }> = ({ id, children }) => {
+  const context = useContext(TabsContext);
+  if (!context) throw new Error('TabPanel must be used within Tabs');
+  
+  return context.activeTab === id ? <div>{children}</div> : null;
+};
+
+// Usage
+<Tabs defaultTab="profile">
+  <TabList>
+    <Tab id="profile">Profile</Tab>
+    <Tab id="settings">Settings</Tab>
+  </TabList>
+  <TabPanel id="profile"><ProfileContent /></TabPanel>
+  <TabPanel id="settings"><SettingsContent /></TabPanel>
+</Tabs>
+```
+
+## Render Props Pattern
+
+Share code between components using a prop whose value is a function.
+
+```tsx
+interface MouseTrackerProps {
+  render: (position: { x: number; y: number }) => React.ReactNode;
+}
+
+const MouseTracker: React.FC<MouseTrackerProps> = ({ render }) => {
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      setPosition({ x: e.clientX, y: e.clientY });
+    };
+    
+    window.addEventListener('mousemove', handleMouseMove);
+    return () => window.removeEventListener('mousemove', handleMouseMove);
+  }, []);
+  
+  return <>{render(position)}</>;
+};
+
+// Usage
+<MouseTracker render={({ x, y }) => (
+  <div>Mouse position: {x}, {y}</div>
+)} />
+```
+
+## Best Practices
+
+1. **Use functional components** - Always prefer functions over classes
+2. **Keep components small** - Single responsibility principle
+3. **Use composition** - Build complex UIs from simple components
+4. **Separate concerns** - Container/Presenter pattern
+5. **Type everything** - Use TypeScript for all props
+6. **Avoid prop drilling** - Use Context or state management
+7. **Memoize expensive renders** - Use React.memo when needed
+8. **Extract custom hooks** - Reuse stateful logic
+

package/augment-extensions/coding-standards/react/rules/hooks-best-practices.md

@@ -0,0 +1,235 @@
+# React Hooks Best Practices
+
+Guidelines for using React Hooks effectively.
+
+## useState
+
+Manage component state with useState.
+
+```tsx
+// Good - Descriptive names, proper typing
+const [isLoading, setIsLoading] = useState<boolean>(false);
+const [users, setUsers] = useState<User[]>([]);
+const [error, setError] = useState<Error | null>(null);
+
+// Good - Functional updates for state based on previous state
+const [count, setCount] = useState(0);
+const increment = () => setCount(prev => prev + 1);
+
+// Bad - Non-descriptive names
+const [data, setData] = useState([]);
+const [flag, setFlag] = useState(false);
+
+// Bad - Direct state mutation
+const [items, setItems] = useState([1, 2, 3]);
+items.push(4); // Don't mutate state directly
+setItems(items); // This won't trigger re-render
+```
+
+## useEffect
+
+Handle side effects properly.
+
+```tsx
+// Good - Cleanup function
+useEffect(() => {
+  const subscription = api.subscribe(userId);
+  
+  return () => {
+    subscription.unsubscribe();
+  };
+}, [userId]);
+
+// Good - Separate effects for different concerns
+useEffect(() => {
+  fetchUserData(userId);
+}, [userId]);
+
+useEffect(() => {
+  trackPageView(pageName);
+}, [pageName]);
+
+// Bad - Missing dependencies
+useEffect(() => {
+  fetchData(userId); // userId should be in deps
+}, []); // Missing dependency
+
+// Bad - Multiple unrelated effects
+useEffect(() => {
+  fetchUserData(userId);
+  trackPageView(pageName);
+  updateTitle(title);
+}, [userId, pageName, title]);
+```
+
+## useCallback
+
+Memoize callback functions.
+
+```tsx
+// Good - Memoize callbacks passed to child components
+const handleSubmit = useCallback((data: FormData) => {
+  submitForm(data);
+}, [submitForm]);
+
+// Good - Memoize event handlers with dependencies
+const handleUserClick = useCallback((userId: string) => {
+  navigate(`/users/${userId}`);
+}, [navigate]);
+
+// Bad - Creating new function on every render
+const handleClick = () => {
+  doSomething();
+};
+
+// Bad - Unnecessary useCallback
+const handleClick = useCallback(() => {
+  console.log('clicked');
+}, []); // Not needed if not passed to memoized child
+```
+
+## useMemo
+
+Memoize expensive computations.
+
+```tsx
+// Good - Memoize expensive calculations
+const sortedUsers = useMemo(() => {
+  return users.sort((a, b) => a.name.localeCompare(b.name));
+}, [users]);
+
+// Good - Memoize complex objects
+const config = useMemo(() => ({
+  apiUrl: process.env.API_URL,
+  timeout: 5000,
+  headers: { 'Content-Type': 'application/json' }
+}), []);
+
+// Bad - Unnecessary memoization
+const fullName = useMemo(() => `${firstName} ${lastName}`, [firstName, lastName]);
+// Simple string concatenation doesn't need memoization
+
+// Bad - Memoizing everything
+const value = useMemo(() => x + y, [x, y]); // Too simple
+```
+
+## useRef
+
+Access DOM elements and persist values.
+
+```tsx
+// Good - DOM reference
+const inputRef = useRef<HTMLInputElement>(null);
+
+useEffect(() => {
+  inputRef.current?.focus();
+}, []);
+
+return <input ref={inputRef} />;
+
+// Good - Persist value across renders
+const previousValue = useRef<string>();
+
+useEffect(() => {
+  previousValue.current = value;
+}, [value]);
+
+// Bad - Using ref for state
+const countRef = useRef(0);
+countRef.current++; // Use useState instead
+```
+
+## useContext
+
+Consume context values.
+
+```tsx
+// Good - Type-safe context
+interface ThemeContextValue {
+  theme: 'light' | 'dark';
+  toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within ThemeProvider');
+  }
+  return context;
+};
+
+// Usage
+const { theme, toggleTheme } = useTheme();
+
+// Bad - No error handling
+const theme = useContext(ThemeContext); // Could be undefined
+```
+
+## Custom Hooks
+
+Extract reusable logic into custom hooks.
+
+```tsx
+// Good - Custom hook for data fetching
+function useUser(userId: string) {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+  
+  useEffect(() => {
+    let cancelled = false;
+    
+    const fetchUser = async () => {
+      try {
+        setLoading(true);
+        const data = await api.getUser(userId);
+        if (!cancelled) {
+          setUser(data);
+          setError(null);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setError(err as Error);
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    };
+    
+    fetchUser();
+    
+    return () => {
+      cancelled = true;
+    };
+  }, [userId]);
+  
+  return { user, loading, error };
+}
+
+// Usage
+const { user, loading, error } = useUser(userId);
+```
+
+## Rules of Hooks
+
+1. **Only call hooks at the top level** - Don't call inside loops, conditions, or nested functions
+2. **Only call hooks from React functions** - Components or custom hooks
+3. **Name custom hooks with "use" prefix** - useCustomHook
+4. **Include all dependencies** - In useEffect, useCallback, useMemo
+5. **Clean up effects** - Return cleanup function when needed
+
+## Best Practices
+
+1. **Use ESLint plugin** - eslint-plugin-react-hooks
+2. **Keep effects focused** - One effect per concern
+3. **Memoize callbacks** - When passing to memoized children
+4. **Extract custom hooks** - For reusable logic
+5. **Type everything** - Use TypeScript for all hooks
+6. **Handle cleanup** - Always clean up subscriptions/timers
+7. **Avoid unnecessary memoization** - Profile before optimizing
+8. **Use functional updates** - When new state depends on old state
+