@windrun-huaiin/base-ui 30.1.0 β 31.0.0
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/README.md +30 -171
- package/package.json +8 -2
package/README.md
CHANGED
|
@@ -1,198 +1,57 @@
|
|
|
1
1
|
# Base UI Components
|
|
2
2
|
|
|
3
|
-
A
|
|
3
|
+
A shared React UI package built with TypeScript and Tailwind CSS. It provides reusable base components, theme-adaptive utilities, common icons, global icon handling, and analytics script components for Windrun Huaiin applications.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
The package focuses on consistent theme adaptation and responsive compatibility across desktop, tablet, and mobile experiences.
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
- **TypeScript Support**: Full type safety and IntelliSense
|
|
9
|
-
- **Tailwind CSS**: Utility-first CSS framework integration
|
|
10
|
-
- **Radix UI**: Accessible and unstyled UI primitives
|
|
11
|
-
- **Tree Shaking**: Only import what you need
|
|
7
|
+
## Core Features
|
|
12
8
|
|
|
13
|
-
|
|
9
|
+
### Theme Utilities
|
|
14
10
|
|
|
15
|
-
|
|
16
|
-
pnpm add @windrun-huaiin/base-ui
|
|
17
|
-
```
|
|
11
|
+
Theme utility classes and helpers for consistent visual styling across applications.
|
|
18
12
|
|
|
19
|
-
|
|
13
|
+
The theme system is designed to let components, icons, accents, and interaction states adapt to the selected palette without duplicating style logic in each application.
|
|
20
14
|
|
|
21
|
-
|
|
15
|
+
Supported theme palettes:
|
|
22
16
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
βββ node_modules/
|
|
29
|
-
β βββ @windrun-huaiin/
|
|
30
|
-
β β βββ third-ui/
|
|
31
|
-
β β β βββ src/ # This is third-ui src
|
|
32
|
-
β β βββ base-ui/
|
|
33
|
-
β β βββ src/ # This is base-ui src
|
|
34
|
-
βββ package.json
|
|
35
|
-
```
|
|
17
|
+
- `purple`: `#AC62FD`
|
|
18
|
+
- `orange`: `#F97316`
|
|
19
|
+
- `indigo`: `#6366F1`
|
|
20
|
+
- `emerald`: `#48C892`
|
|
21
|
+
- `rose`: `#F43F5E`
|
|
36
22
|
|
|
37
|
-
|
|
23
|
+
Core module:
|
|
38
24
|
|
|
39
|
-
|
|
40
|
-
@import 'tailwindcss';
|
|
25
|
+
- `theme-util`
|
|
41
26
|
|
|
42
|
-
|
|
43
|
-
@source "../node_modules/@windrun-huaiin/base-ui/src/**/*.{js,ts,jsx,tsx}";
|
|
44
|
-
@source "./src/**/*.{js,ts,jsx,tsx}";
|
|
27
|
+
### Common Icons
|
|
45
28
|
|
|
46
|
-
|
|
47
|
-
@import '@windrun-huaiin/third-ui/styles/base-ui.css';
|
|
48
|
-
```
|
|
29
|
+
A unified icon set based on `lucide-icons` and commonly used SVG assets.
|
|
49
30
|
|
|
50
|
-
|
|
31
|
+
The icons are designed to work with the supported theme palettes, making it easier to keep product UI, navigation, actions, and status indicators visually consistent across different themes and screen sizes.
|
|
51
32
|
|
|
52
|
-
|
|
33
|
+
### Responsive Multi-Device Compatibility
|
|
53
34
|
|
|
54
|
-
|
|
35
|
+
Base components are intended for responsive layouts across common application surfaces, including desktop, tablet, and mobile screens.
|
|
55
36
|
|
|
56
|
-
|
|
57
|
-
- GitHub, D8, Clerk, Iterm
|
|
37
|
+
The package helps keep spacing, sizing, icons, and interaction patterns predictable across multiple viewport sizes, so shared UI remains consistent when reused by different applications.
|
|
58
38
|
|
|
59
|
-
|
|
60
|
-
- Markdown, MDX, Html, Json, XML, Yaml, CSV, Txt, Java, SQL, Log
|
|
39
|
+
### Global Site Icon Handler
|
|
61
40
|
|
|
62
|
-
|
|
63
|
-
- MAC, BTC, CSS, Mermaid
|
|
41
|
+
A global handler for site icons, intended to centralize favicon and related icon metadata handling across applications.
|
|
64
42
|
|
|
65
|
-
|
|
66
|
-
- LastUpdated, Snippets, Test, Diff
|
|
43
|
+
This keeps browser tab icons, app icons, and shared site icon behavior consistent without repeating setup in every application.
|
|
67
44
|
|
|
68
|
-
|
|
69
|
-
- DPA, SubP, T3P
|
|
45
|
+
### Analytics Script Components
|
|
70
46
|
|
|
71
|
-
|
|
72
|
-
- Http, Scheme
|
|
47
|
+
Reusable script components for integrating common analytics providers.
|
|
73
48
|
|
|
74
|
-
|
|
49
|
+
Supported providers:
|
|
75
50
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
import { GitHubIcon, BTCIcon, MmdIcon} from '@windrun-huaiin/base-ui';
|
|
51
|
+
- Google
|
|
52
|
+
- Microsoft
|
|
79
53
|
|
|
80
|
-
|
|
81
|
-
<GitHubIcon className="h-6 w-6" />
|
|
82
|
-
<BTCIcon className="h-4 w-4" />
|
|
83
|
-
<MmdIcon className="h-4 w-4" /> // Auto 16x16 size for Mermaid
|
|
84
|
-
```
|
|
85
|
-
|
|
86
|
-
### 2. Dynamic Icon Loading
|
|
87
|
-
```tsx
|
|
88
|
-
import { getGlobalIcon } from '@windrun-huaiin/base-ui';
|
|
89
|
-
|
|
90
|
-
// Get icon component
|
|
91
|
-
const GitHubIcon = getGlobalIcon('GitHub');
|
|
92
|
-
<GitHubIcon className="h-6 w-6" />
|
|
93
|
-
|
|
94
|
-
// Get icon element (for fumadocs)
|
|
95
|
-
const iconElement = getGlobalIcon('GitHub', true);
|
|
96
|
-
```
|
|
97
|
-
|
|
98
|
-
### 3. Utility Components
|
|
99
|
-
```tsx
|
|
100
|
-
import { SiteIcon, NotFoundIcon } from '@windrun-huaiin/base-ui';
|
|
101
|
-
|
|
102
|
-
// Pre-configured site icon
|
|
103
|
-
<SiteIcon />
|
|
104
|
-
|
|
105
|
-
// Pre-configured 404 icon
|
|
106
|
-
<NotFoundIcon />
|
|
107
|
-
```
|
|
108
|
-
|
|
109
|
-
## Benefits
|
|
110
|
-
|
|
111
|
-
- β
**Zero Configuration**: No need to copy SVG files to your project
|
|
112
|
-
- β
**Self-contained**: All icons are bundled as React components
|
|
113
|
-
- β
**Consistent Styling**: Global icon color configuration
|
|
114
|
-
- β
**Type Safety**: Full TypeScript support with auto-completion
|
|
115
|
-
- β
**Performance**: No network requests for icon files
|
|
116
|
-
- β
**Special Sizing**: Mermaid icon has optimized 16x16 default size
|
|
117
|
-
|
|
118
|
-
## Environment Variables
|
|
119
|
-
|
|
120
|
-
```bash
|
|
121
|
-
# Optional: Set global icon color (defaults to text-purple-500)
|
|
122
|
-
NEXT_PUBLIC_STYLE_ICON_COLOR=text-blue-600
|
|
123
|
-
```
|
|
54
|
+
These components provide a consistent way to add analytics scripts to applications while keeping script setup centralized in the shared UI package.
|
|
124
55
|
|
|
125
56
|
## License
|
|
126
|
-
|
|
127
|
-
MIT
|
|
128
|
-
|
|
129
|
-
## Included Components
|
|
130
|
-
|
|
131
|
-
### UI Components (ui/)
|
|
132
|
-
- Radix UI base components
|
|
133
|
-
- Unified styles and themes
|
|
134
|
-
- Full TypeScript support
|
|
135
|
-
|
|
136
|
-
### Base Components (components/)
|
|
137
|
-
- cta: Call-to-Action component
|
|
138
|
-
- features: Feature showcase component
|
|
139
|
-
- footer: Footer component
|
|
140
|
-
- gallery: Image gallery component
|
|
141
|
-
- global-icon: Global icon management
|
|
142
|
-
- go-to-top: Go to top button
|
|
143
|
-
- LanguageDetector: Language detection component
|
|
144
|
-
- LanguageSwitcher: Language switcher component
|
|
145
|
-
- seo-content: SEO content component
|
|
146
|
-
- tips: Tip component
|
|
147
|
-
|
|
148
|
-
### Script Components (script/)
|
|
149
|
-
- GoogleAnalyticsScript: Google Analytics script
|
|
150
|
-
- MicrosoftClarityScript: Microsoft Clarity script
|
|
151
|
-
|
|
152
|
-
## Usage Example
|
|
153
|
-
|
|
154
|
-
```tsx
|
|
155
|
-
import { Button, LanguageSwitcher } from '@windrun-huaiin/base-ui';
|
|
156
|
-
|
|
157
|
-
// Use UI components
|
|
158
|
-
<Button variant="default" size="lg">
|
|
159
|
-
Click me
|
|
160
|
-
</Button>
|
|
161
|
-
|
|
162
|
-
// Use language switcher component (need to pass in configuration)
|
|
163
|
-
<LanguageSwitcher
|
|
164
|
-
locales={['en', 'zh']}
|
|
165
|
-
localeLabels={{ en: 'English', zh: 'δΈζ' }}
|
|
166
|
-
/>
|
|
167
|
-
```
|
|
168
|
-
|
|
169
|
-
## Dependencies
|
|
170
|
-
|
|
171
|
-
- React 18+
|
|
172
|
-
- Next.js 15+
|
|
173
|
-
- TypeScript
|
|
174
|
-
|
|
175
|
-
## Development
|
|
176
|
-
|
|
177
|
-
```bash
|
|
178
|
-
# Build
|
|
179
|
-
pnpm build
|
|
180
|
-
|
|
181
|
-
# Development mode
|
|
182
|
-
pnpm dev
|
|
183
|
-
|
|
184
|
-
# Type check
|
|
185
|
-
pnpm type-check
|
|
186
|
-
```
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
## Showcase
|
|
190
|
-
|
|
191
|
-
- [Free Trivia Game](https://freetrivia.info/)
|
|
192
|
-
- [Music Poster](https://musicposter.org/en)
|
|
193
|
-
- [Image Narration](https://imagenarration.com/en)
|
|
194
|
-
- [Describe Yourself](https://describeyourself.org/en)
|
|
195
|
-
- [Newspaper Template](https://newspaper-template.org/en)
|
|
196
|
-
- [breathing exercise](https://breathingexercise.net/en)
|
|
197
|
-
- [ai directory list](https://aidirectorylist.com/en)
|
|
198
|
-
- [reve image directory](https://reveimage.directory/en)
|
|
57
|
+
MIT License
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@windrun-huaiin/base-ui",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "31.0.0",
|
|
4
4
|
"description": "Base UI components for windrun-huaiin projects",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
"class-variance-authority": "^0.7.1",
|
|
60
60
|
"lucide-react": "^0.577.0",
|
|
61
61
|
"tslib": "^2.8.1",
|
|
62
|
-
"@windrun-huaiin/lib": "^
|
|
62
|
+
"@windrun-huaiin/lib": "^31.0.0"
|
|
63
63
|
},
|
|
64
64
|
"peerDependencies": {
|
|
65
65
|
"clsx": "^2.1.1",
|
|
@@ -90,6 +90,12 @@
|
|
|
90
90
|
"publishConfig": {
|
|
91
91
|
"access": "public"
|
|
92
92
|
},
|
|
93
|
+
"homepage": "https://d8ger.com",
|
|
94
|
+
"repository": {
|
|
95
|
+
"type": "git",
|
|
96
|
+
"url": "git+https://github.com/caofanCPU/next-ai-build.git",
|
|
97
|
+
"directory": "packages/base-ui"
|
|
98
|
+
},
|
|
93
99
|
"scripts": {
|
|
94
100
|
"build": "rollup -c rollup.config.mjs",
|
|
95
101
|
"build:prod": "rollup -c rollup.config.mjs",
|