@sylix/coworker 2.0.11 → 2.0.12

package/dist/skills/defaults/frontend/react.md

@@ -0,0 +1,345 @@
+---
+name: react-patterns
+description: Build scalable React applications with modern patterns, hooks, and best practices.
+---
+
+# React Patterns — CoWorker Edition
+
+Build maintainable React applications.
+
+## When to Use This Skill
+
+- Building new React components
+- Managing state
+- Performance optimization
+- Code organization
+
+## Core Concepts
+
+### 1. Component Patterns
+
+```typescript
+// Function component with types
+interface ButtonProps {
+  children: React.ReactNode;
+  onClick?: () => void;
+  variant?: 'primary' | 'secondary';
+  disabled?: boolean;
+  className?: string;
+}
+
+function Button({ 
+  children, 
+  onClick, 
+  variant = 'primary', 
+  disabled = false,
+  className = ''
+}: ButtonProps) {
+  return (
+    <button
+      className={`btn btn-${variant} ${className}`}
+      onClick={onClick}
+      disabled={disabled}
+    >
+      {children}
+    </button>
+  );
+}
+
+// Compound components
+interface TabsProps {
+  children: React.ReactNode;
+  defaultIndex?: number;
+}
+
+function Tabs({ children, defaultIndex = 0 }: TabsProps) {
+  const [activeIndex, setActiveIndex] = useState(defaultIndex);
+  
+  return (
+    <TabsContext.Provider value={{ activeIndex, setActiveIndex }}>
+      {children}
+    </TabsContext.Provider>
+  );
+}
+
+Tabs.List = function TabsList({ children }: { children: React.ReactNode }) {
+  return <div className="tabs-list">{children}</div>;
+};
+
+Tabs.Tab = function Tab({ index, label }: { index: number; label: string }) {
+  const { activeIndex, setActiveIndex } = useContext(TabsContext);
+  return (
+    <button
+      className={activeIndex === index ? 'active' : ''}
+      onClick={() => setActiveIndex(index)}
+    >
+      {label}
+    </button>
+  );
+};
+
+Tabs.Panel = function TabPanel({ index, children }: { index: number; children: React.ReactNode }) {
+  const { activeIndex } = useContext(TabsContext);
+  return activeIndex === index ? <div>{children}</div> : null;
+};
+
+// Usage
+<Tabs defaultIndex={0}>
+  <Tabs.List>
+    <Tabs.Tab index={0} label="Profile" />
+    <Tabs.Tab index={1} label="Settings" />
+  </Tabs.List>
+  <Tabs.Panel index={0}>Profile content</Tabs.Panel>
+  <Tabs.Panel index={1}>Settings content</Tabs.Panel>
+</Tabs>
+```
+
+### 2. Custom Hooks
+
+```typescript
+// Data fetching hook
+function useFetch<T>(url: string) {
+  const [data, setData] = useState<T | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+  
+  useEffect(() => {
+    let cancelled = false;
+    
+    async function fetchData() {
+      try {
+        setLoading(true);
+        const response = await fetch(url);
+        const json = await response.json();
+        
+        if (!cancelled) {
+          setData(json);
+          setError(null);
+        }
+      } catch (e) {
+        if (!cancelled) {
+          setError(e as Error);
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    }
+    
+    fetchData();
+    
+    return () => {
+      cancelled = true;
+    };
+  }, [url]);
+  
+  return { data, loading, error };
+}
+
+// Local storage hook
+function useLocalStorage<T>(key: string, initialValue: T) {
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      return initialValue;
+    }
+  });
+  
+  const setValue = (value: T | ((val: T) => T)) => {
+    try {
+      const valueToStore = value instanceof Function 
+        ? value(storedValue) 
+        : value;
+      setStoredValue(valueToStore);
+      window.localStorage.setItem(key, JSON.stringify(valueToStore));
+    } catch (error) {
+      console.error(error);
+    }
+  };
+  
+  return [storedValue, setValue] as const;
+}
+
+// Debounced search
+function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+  
+  return debouncedValue;
+}
+```
+
+### 3. State Management
+
+```typescript
+// Context for global state
+interface AuthState {
+  user: User | null;
+  isAuthenticated: boolean;
+}
+
+function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [state, setState] = useState<AuthState>({
+    user: null,
+    isAuthenticated: false
+  });
+  
+  const login = async (email: string, password: string) => {
+    const user = await api.login(email, password);
+    setState({ user, isAuthenticated: true });
+  };
+  
+  const logout = () => {
+    setState({ user: null, isAuthenticated: false });
+  };
+  
+  return (
+    <AuthContext.Provider value={{ ...state, login, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+// Reducer for complex state
+type Action =
+  | { type: 'SET_DATA'; payload: Data[] }
+  | { type: 'ADD_ITEM'; payload: Data }
+  | { type: 'REMOVE_ITEM'; payload: string }
+  | { type: 'UPDATE_ITEM'; payload: Data };
+
+function reducer(state: State, action: Action): State {
+  switch (action.type) {
+    case 'SET_DATA':
+      return { ...state, data: action.payload, loading: false };
+    case 'ADD_ITEM':
+      return { ...state, data: [...state.data, action.payload] };
+    case 'REMOVE_ITEM':
+      return { ...state, data: state.data.filter(d => d.id !== action.payload) };
+    case 'UPDATE_ITEM':
+      return {
+        ...state,
+        data: state.data.map(d => d.id === action.payload.id ? action.payload : d)
+      };
+    default:
+      return state;
+  }
+}
+```
+
+### 4. Performance Optimization
+
+```typescript
+// Memoization
+const MemoizedComponent = React.memo(function Component({ data }) {
+  return <div>{data.name}</div>;
+});
+
+// with custom comparison
+const MemoizedWithCompare = React.memo(
+  function Component({ data }) {
+    return <div>{data.name}</div>;
+  },
+  (prevProps, nextProps) => {
+    return prevProps.data.id === nextProps.data.id;
+  }
+);
+
+// useMemo for expensive calculations
+function ExpensiveComponent({ items, filter }) {
+  const filteredItems = useMemo(() => {
+    return items.filter(item => 
+      item.name.toLowerCase().includes(filter.toLowerCase())
+    );
+  }, [items, filter]);
+  
+  return (
+    <ul>
+      {filteredItems.map(item => (
+        <li key={item.id}>{item.name}</li>
+      ))}
+    </ul>
+  );
+}
+
+// useCallback for callbacks
+function Parent() {
+  const [count, setCount] = useState(0);
+  
+  const handleClick = useCallback(() => {
+    console.log('clicked');
+  }, []);  // Empty deps = stable function
+  
+  return <Child onClick={handleClick} />;
+}
+```
+
+### 5. Error Boundaries
+
+```typescript
+interface ErrorBoundaryProps {
+  children: React.ReactNode;
+  fallback?: React.ReactNode;
+  onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error?: Error;
+}
+
+class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  state: ErrorBoundaryState = { hasError: false };
+  
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+  
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    this.props.onError?.(error, errorInfo);
+    console.error('Error:', error, errorInfo);
+  }
+  
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback || <DefaultError />;
+    }
+    
+    return this.props.children;
+  }
+}
+
+// Usage
+<ErrorBoundary fallback={<ErrorFallback />}>
+  <MyComponent />
+</ErrorBoundary>
+```
+
+## Best Practices
+
+1. **Small components** - Single responsibility
+2. **Custom hooks** - Reusable logic
+3. **Prop types** - TypeScript or PropTypes
+4. **Memoization** - Optimize when needed
+5. **Error boundaries** - Graceful failures
+6. **Composition** - Over inheritance
+
+## Common Mistakes
+
+- Over-memoization
+- Not cleaning up effects
+- Prop drilling
+- Not handling loading/error
+- Large components
+- Not using TypeScript types