Comprehensive Tab Usage Examples

This page showcases comprehensive examples of content tabs usage across different documentation scenarios.

Documentation Patterns

Getting Started Guide

Quick StartDetailed SetupTroubleshooting

Quick Start Guide

Get up and running in under 5 minutes:

1. Install the package

   npm install @example/toolkit
   

2. Import in your project

   import { Toolkit } from '@example/toolkit';
   

3. Initialize and use

   const toolkit = new Toolkit();
   toolkit.run();
   

🎉 You're ready to go!

Comprehensive Installation Guide

Prerequisites

Before installing, ensure you have: - Node.js 16 or higher - npm 7 or higher - Git installed

Step-by-Step Installation

1. Create a new project

   mkdir my-project
   cd my-project
   npm init -y
   

2. Install the toolkit

   npm install @example/toolkit
   

3. Install peer dependencies

   npm install react react-dom
   

4. Create configuration file

   {
     "toolkit": {
       "theme": "default",
       "modules": ["core", "ui", "utils"]
     }
   }
   

5. Set up your first component

   import React from 'react';
   import { Toolkit, Button } from '@example/toolkit';
   
   function App() {
     return (
       <Toolkit>
         <Button variant="primary">
           Hello World
         </Button>
       </Toolkit>
     );
   }
   
   export default App;
   

Common Issues and Solutions

Installation Problems

Issue: Package not found

npm ERR! 404 Not Found - GET https://registry.npmjs.org/@example/toolkit

Solution: - Verify the package name spelling - Check if you have access to the private registry - Ensure you're logged in: npm login

Issue: Peer dependency warnings

npm WARN @example/toolkit@1.0.0 requires a peer of react@^18.0.0

Solution:

npm install react@^18.0.0 react-dom@^18.0.0

Runtime Errors

Issue: Module not found

Module not found: Can't resolve '@example/toolkit'

Solution: 1. Restart your development server 2. Clear node_modules and reinstall:

rm -rf node_modules package-lock.json
npm install

3. Check your import syntax

Issue: TypeScript errors

Could not find a declaration file for module '@example/toolkit'

Solution:

npm install @types/example__toolkit

Or create a declaration file:

// types/toolkit.d.ts
declare module '@example/toolkit' {
  export interface ToolkitProps {
    children: React.ReactNode;
  }
  export const Toolkit: React.FC<ToolkitProps>;
}

Code Implementation Examples

Authentication Systems

JWT Implementation

JSON Web Token Authentication

Backend (Node.js/Express)

```javascript const jwt = require('jsonwebtoken'); const bcrypt = require('bcrypt'); const express = require('express'); const app = express();

// Secret key (use environment variable in production)
const JWT_SECRET = process.env.JWT_SECRET || 'your-secret-key';

// User registration
app.post('/api/register', async (req, res) => {
  try {
    const { email, password } = req.body;

    // Hash password
    const saltRounds = 10;
    const hashedPassword = await bcrypt.hash(password, saltRounds);

    // Save user to database
    const user = await User.create({
      email,
      password: hashedPassword
    });

    // Generate JWT
    const token = jwt.sign(
      { userId: user.id, email: user.email },
      JWT_SECRET,
      { expiresIn: '24h' }
    );

    res.json({
      message: 'User created successfully',
      token,
      user: { id: user.id, email: user.email }
    });
  } catch (error) {
    res.status(400).json({ error: error.message });
  }
});

// User login
app.post('/api/login', async (req, res) => {
  try {
    const { email, password } = req.body;

    // Find user
    const user = await User.findOne({ where: { email } });
    if (!user) {
      return res.status(401).json({ error: 'Invalid credentials' });
    }

    // Verify password
    const isValidPassword = await bcrypt.compare(password, user.password);
    if (!isValidPassword) {
      return res.status(401).json({ error: 'Invalid credentials' });
    }

    // Generate JWT
    const token = jwt.sign(
      { userId: user.id, email: user.email },
      JWT_SECRET,
      { expiresIn: '24h' }
    );

    res.json({
      message: 'Login successful',
      token,
      user: { id: user.id, email: user.email }
    });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

// Middleware to verify JWT
const authenticateToken = (req, res, next) => {
  const authHeader = req.headers['authorization'];
  const token = authHeader && authHeader.split(' ')[1];

  if (!token) {
    return res.status(401).json({ error: 'Access token required' });
  }

  jwt.verify(token, JWT_SECRET, (err, user) => {
    if (err) {
      return res.status(403).json({ error: 'Invalid token' });
    }
    req.user = user;
    next();
  });
};

// Protected route
app.get('/api/profile', authenticateToken, (req, res) => {
  res.json({
    message: 'Profile data',
    user: req.user
  });
});
```

### Frontend (React)

<div class="lazy-content" data-lazy-content="true">

```jsx import React, { useState, useContext, createContext } from 'react'; import axios from 'axios';

// Auth Context
const AuthContext = createContext();

export const useAuth = () => {
  return useContext(AuthContext);
};

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const [token, setToken] = useState(localStorage.getItem('token'));

  // Configure axios defaults
  if (token) {
    axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
  }

  const login = async (email, password) => {
    try {
      const response = await axios.post('/api/login', {
        email,
        password
      });

      const { token, user } = response.data;

      // Store token
      localStorage.setItem('token', token);
      setToken(token);
      setUser(user);

      // Set axios default header
      axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

      return { success: true };
    } catch (error) {
      return {
        success: false,
        error: error.response?.data?.error || 'Login failed'
      };
    }
  };

  const register = async (email, password) => {
    try {
      const response = await axios.post('/api/register', {
        email,
        password
      });

      const { token, user } = response.data;

      localStorage.setItem('token', token);
      setToken(token);
      setUser(user);
      axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

      return { success: true };
    } catch (error) {
      return {
        success: false,
        error: error.response?.data?.error || 'Registration failed'
      };
    }
  };

  const logout = () => {
    localStorage.removeItem('token');
    setToken(null);
    setUser(null);
    delete axios.defaults.headers.common['Authorization'];
  };

  const value = {
    user,
    token,
    login,
    register,
    logout,
    isAuthenticated: !!token
  };

  return (
    <AuthContext.Provider value={value}>
      {children}
    </AuthContext.Provider>
  );
};

// Login Component
export const LoginForm = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const { login } = useAuth();

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');

    const result = await login(email, password);

    if (!result.success) {
      setError(result.error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {error && <div className="error">{error}</div>}

      <div>
        <label htmlFor="email">Email:</label>
        <input
          type="email"
          id="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
        />
      </div>

      <div>
        <label htmlFor="password">Password:</label>
        <input
          type="password"
          id="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          required
        />
      </div>

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