flysoft-react-ui 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AI_CONTEXT.md +84 -0
- package/package.json +3 -2
package/AI_CONTEXT.md
ADDED
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
# Flysoft React UI - AI Context & Documentation
|
|
2
|
+
|
|
3
|
+
This document serves as the source of truth for AI models (Gemini, Claude, GPT, etc.) when generating code that consumes the `flysoft-react-ui` library.
|
|
4
|
+
|
|
5
|
+
## Library Philosophy
|
|
6
|
+
`flysoft-react-ui` is a React component library built with TypeScript. It emphasizes a consistent look and feel, ease of use, and "premium" aesthetics out of the box.
|
|
7
|
+
|
|
8
|
+
## 🚨 Critical Rules for AI
|
|
9
|
+
1. **Top-Level Imports Only**: Always import components from the root package `flysoft-react-ui`.
|
|
10
|
+
- **CORRECT**: `import { Button, Card } from 'flysoft-react-ui';`
|
|
11
|
+
- **INCORRECT**: `import { Button } from 'flysoft-react-ui/components/Button';`
|
|
12
|
+
2. **TypeScript First**: Use the exported types (e.g., `ButtonProps`, `DataTableColumn`) to ensure type safety.
|
|
13
|
+
3. **No Direct Style Imports**: Do not import CSS files from the library (like `flysoft-react-ui/dist/index.css`) in components. This is handled at the app root.
|
|
14
|
+
|
|
15
|
+
## Component Categorization
|
|
16
|
+
|
|
17
|
+
### 1. Layouts (Priority for Page Structure)
|
|
18
|
+
- **AppLayout**: The main wrapper for applications.
|
|
19
|
+
- **Props**: `navbar` (NavbarInterface), `leftDrawer` (LeftDrawerInterface), `children`.
|
|
20
|
+
- **Usage**: Use this as the root component for your page routes.
|
|
21
|
+
- **DashboardLayout**: Specialized layout for dashboard views with statistics.
|
|
22
|
+
- **SidebarLayout**: Layout with a persistent sidebar.
|
|
23
|
+
|
|
24
|
+
### 2. Form Controls
|
|
25
|
+
- **Button / LinkButton**: Standard buttons. Supports `variant` ('primary' | 'secondary' | 'danger' | 'ghost') and `icon`.
|
|
26
|
+
- **Input**: Text inputs.
|
|
27
|
+
- **AutocompleteInput**: Searchable dropdown. Critical for foreign key selection.
|
|
28
|
+
- **DateInput / DatePicker**: Date handling.
|
|
29
|
+
- **Checkbox / RadioButtonGroup**: Boolean and option selection.
|
|
30
|
+
- **ThemeSwitcher**: Toggle between light/dark modes.
|
|
31
|
+
|
|
32
|
+
### 3. Data Display & Containers
|
|
33
|
+
- **DataTable<T>**: High-performance table.
|
|
34
|
+
- **Props**: `columns` (array of definitions), `rows` (data), `isLoading`.
|
|
35
|
+
- **Card**: Generic container with shadow and rounded corners.
|
|
36
|
+
- **DataField**: Displays a Label + Value pair, useful for detail views.
|
|
37
|
+
- **Accordion**: Collapsible content sections.
|
|
38
|
+
- **Collection**: Renders a list of items using a render prop or component.
|
|
39
|
+
- **TabsGroup / TabPanel**: Tabbed interfaces.
|
|
40
|
+
|
|
41
|
+
### 4. Utilities & Feedback
|
|
42
|
+
- **Dialog**: Modal windows for confirmation or complex forms.
|
|
43
|
+
- **Snackbar**: Toast notifications. Requires `SnackbarContainer` at the app root.
|
|
44
|
+
- **Loader**: Visual loading indicator.
|
|
45
|
+
- **Badge / Avatar**: status indicators and user images.
|
|
46
|
+
|
|
47
|
+
## Common Patterns
|
|
48
|
+
|
|
49
|
+
### Basic Page Structure
|
|
50
|
+
```tsx
|
|
51
|
+
import { AppLayout, Card, Button } from 'flysoft-react-ui';
|
|
52
|
+
|
|
53
|
+
export default function Page() {
|
|
54
|
+
return (
|
|
55
|
+
<AppLayout
|
|
56
|
+
navbar={{ title: "My Page" }}
|
|
57
|
+
>
|
|
58
|
+
<div className="p-4 space-y-4">
|
|
59
|
+
<Card>
|
|
60
|
+
<h2>Content</h2>
|
|
61
|
+
<Button variant="primary" onClick={() => {}}>Action</Button>
|
|
62
|
+
</Card>
|
|
63
|
+
</div>
|
|
64
|
+
</AppLayout>
|
|
65
|
+
);
|
|
66
|
+
}
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
### Data Table Usage
|
|
70
|
+
```tsx
|
|
71
|
+
import { DataTable, DataTableColumn } from 'flysoft-react-ui';
|
|
72
|
+
|
|
73
|
+
interface User { id: number; name: string; }
|
|
74
|
+
|
|
75
|
+
const columns: DataTableColumn<User>[] = [
|
|
76
|
+
{ header: 'ID', accessorKey: 'id' },
|
|
77
|
+
{ header: 'Name', accessorKey: 'name' },
|
|
78
|
+
];
|
|
79
|
+
|
|
80
|
+
<DataTable columns={columns} rows={users} />
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
## Icons
|
|
84
|
+
The library is agnostic but pairs well with `lucide-react`. Pass icons as ReactNodes to props like `icon`, `startIcon`, or `endIcon`.
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "flysoft-react-ui",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.1",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"description": "A modern React UI component library with Tailwind CSS, TypeScript, and FontAwesome 5. Includes forms, layouts, themes, and templates for rapid development.",
|
|
7
7
|
"keywords": [
|
|
@@ -45,7 +45,8 @@
|
|
|
45
45
|
"files": [
|
|
46
46
|
"dist",
|
|
47
47
|
"styles.d.ts",
|
|
48
|
-
"README.md"
|
|
48
|
+
"README.md",
|
|
49
|
+
"AI_CONTEXT.md"
|
|
49
50
|
],
|
|
50
51
|
"scripts": {
|
|
51
52
|
"dev": "vite --port 5189 --strictPort",
|