mirror of https://github.com/lobehub/lobehub synced 2026-04-21 09:37:28 +00:00

Innei fcdaf9d814 🔧 chore: update eslint v2 configuration and suppressions (#12133 )

* v2 init

* chore: update eslint suppressions and package dependencies

- Removed several eslint suppressions related to array sorting and reversing from eslint-suppressions.json to clean up the configuration.
- Updated @lobehub/lint package version from 2.0.0-beta.6 to 2.0.0-beta.7 in package.json for improvements and bug fixes.
- Made minor formatting adjustments in vitest.config.mts and various SKILL.md files for better readability and consistency.

Signed-off-by: Innei <tukon479@gmail.com>

* fix: clean up import statements and formatting

- Removed unnecessary whitespace in replaceComponentImports.ts for improved readability.
- Standardized import statements in contextEngineering.ts and createAgentExecutors.ts by adding missing spaces for consistency.

Signed-off-by: Innei <tukon479@gmail.com>

* chore: update eslint suppressions and clean up code formatting

* 🐛 fix: use vi.hoisted for mock variable initialization

Fix TDZ error in persona service test by using vi.hoisted() to ensure
mock variables are available when vi.mock factory runs.

---------

Signed-off-by: Innei <tukon479@gmail.com>

2026-02-11 13:04:48 +08:00

2.7 KiB

Raw Blame History

name	description
react	React component development guide. Use when working with React components (.tsx files), creating UI, using @lobehub/ui components, implementing routing, or building frontend features. Triggers on React component creation, modification, layout implementation, or navigation tasks.

React Component Writing Guide

Use antd-style for complex styles; for simple cases, use inline style attribute
Use Flexbox and Center from @lobehub/ui for layouts (see references/layout-kit.md)
Component priority: src/components > installed packages > @lobehub/ui > antd
Use selectors to access zustand store data

@lobehub/ui Components

If unsure about component usage, search existing code in this project. Most components extend antd with additional props.

Reference: node_modules/@lobehub/ui/es/index.mjs for all available components.

Common Components:

General: ActionIcon, ActionIconGroup, Block, Button, Icon
Data Display: Avatar, Collapse, Empty, Highlighter, Markdown, Tag, Tooltip
Data Entry: CodeEditor, CopyButton, EditableText, Form, FormModal, Input, SearchBar, Select
Feedback: Alert, Drawer, Modal
Layout: Center, DraggablePanel, Flexbox, Grid, Header, MaskShadow
Navigation: Burger, Dropdown, Menu, SideNav, Tabs

Routing Architecture

Hybrid routing: Next.js App Router (static pages) + React Router DOM (main SPA).

Route Type	Use Case	Implementation
Next.js App Router	Auth pages (login, signup, oauth)	`src/app/[variants]/(auth)/`
React Router DOM	Main SPA (chat, settings)	`desktopRouter.config.tsx`

Key Files

Entry: src/app/[variants]/page.tsx
Desktop router: src/app/[variants]/router/desktopRouter.config.tsx
Mobile router: src/app/[variants]/(mobile)/router/mobileRouter.config.tsx
Router utilities: src/utils/router.tsx

Router Utilities

import { dynamicElement, redirectElement, ErrorBoundary } from '@/utils/router';

element: dynamicElement(() => import('./chat'), 'Desktop > Chat');
element: redirectElement('/settings/profile');
errorElement: <ErrorBoundary resetPath="/chat" />;

Important: For SPA pages, use Link from react-router-dom, NOT next/link.

// ❌ Wrong
import Link from 'next/link';
<Link href="/">Home</Link>;

// ✅ Correct
import { Link } from 'react-router-dom';
<Link to="/">Home</Link>;

// In components
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate('/chat');

// From stores
const navigate = useGlobalStore.getState().navigate;
navigate?.('/settings');

2.7 KiB Raw Blame History