@versini/ui-main 4.0.5 → 4.0.6
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 +237 -1
- package/dist/index.js +3 -3
- package/package.json +4 -3
package/README.md
CHANGED
|
@@ -1,3 +1,239 @@
|
|
|
1
1
|
# @versini/ui-main
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/@versini/ui-main)
|
|
4
|
+
|
|
5
|
+
> A semantic and accessible React main component built with TypeScript and TailwindCSS.
|
|
6
|
+
|
|
7
|
+
The Main component provides a semantic main element for page content with customizable margins, padding, and styling options. Perfect for creating accessible page layouts and content areas.
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
## Table of Contents
|
|
11
|
+
|
|
12
|
+
- [Features](#features)
|
|
13
|
+
- [Installation](#installation)
|
|
14
|
+
- [Usage](#usage)
|
|
15
|
+
|
|
16
|
+
## Features
|
|
17
|
+
|
|
18
|
+
- **♿ Semantic HTML**: Uses proper `<main>` element for accessibility
|
|
19
|
+
- **🎨 Customizable**: Control margins, padding, and styling
|
|
20
|
+
- **🌲 Tree-shakeable**: Lightweight and optimized for bundle size
|
|
21
|
+
- **🔧 TypeScript**: Fully typed with comprehensive prop definitions
|
|
22
|
+
- **📱 Responsive**: Works seamlessly across all device sizes
|
|
23
|
+
|
|
24
|
+
## Installation
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
npm install @versini/ui-main
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
> **Note**: This component requires TailwindCSS and the `@versini/ui-styles` plugin for proper styling. See the [root README](../../README.md#tailwindcss-setup) for complete setup instructions.
|
|
31
|
+
|
|
32
|
+
## Usage
|
|
33
|
+
|
|
34
|
+
### Basic Main
|
|
35
|
+
|
|
36
|
+
```tsx
|
|
37
|
+
import { Main } from "@versini/ui-main";
|
|
38
|
+
|
|
39
|
+
function App() {
|
|
40
|
+
return (
|
|
41
|
+
<Main>
|
|
42
|
+
<h1>Page Content</h1>
|
|
43
|
+
<p>This is the main content area of the page.</p>
|
|
44
|
+
</Main>
|
|
45
|
+
);
|
|
46
|
+
}
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### Main with Custom Styling
|
|
50
|
+
|
|
51
|
+
```tsx
|
|
52
|
+
import { Main } from "@versini/ui-main";
|
|
53
|
+
|
|
54
|
+
function App() {
|
|
55
|
+
return (
|
|
56
|
+
<Main className="max-w-4xl mx-auto bg-white shadow-lg rounded-lg">
|
|
57
|
+
<article className="prose lg:prose-xl">
|
|
58
|
+
<h1>Article Title</h1>
|
|
59
|
+
<p>Article content goes here...</p>
|
|
60
|
+
</article>
|
|
61
|
+
</Main>
|
|
62
|
+
);
|
|
63
|
+
}
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
### Main without Default Spacing
|
|
67
|
+
|
|
68
|
+
```tsx
|
|
69
|
+
import { Main } from "@versini/ui-main";
|
|
70
|
+
|
|
71
|
+
function App() {
|
|
72
|
+
return (
|
|
73
|
+
<Main noMargin noPadding className="min-h-screen bg-gray-100">
|
|
74
|
+
<div className="container mx-auto py-8">
|
|
75
|
+
Custom layout with full control over spacing
|
|
76
|
+
</div>
|
|
77
|
+
</Main>
|
|
78
|
+
);
|
|
79
|
+
}
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
## API
|
|
83
|
+
|
|
84
|
+
### Main Props
|
|
85
|
+
|
|
86
|
+
| Prop | Type | Default | Description |
|
|
87
|
+
|------|------|---------|-------------|
|
|
88
|
+
| children | `React.ReactNode` | - | The children to render |
|
|
89
|
+
| noMargin | `boolean` | `false` | Whether to render without margin |
|
|
90
|
+
| noPadding | `boolean` | `false` | Whether to render without padding |
|
|
91
|
+
| raw | `boolean` | `false` | Whether to render with no styles |
|
|
92
|
+
| className | `string` | - | CSS class(es) to add to the main component wrapper |
|
|
93
|
+
|
|
94
|
+
*Also supports all standard HTML main element attributes*
|
|
95
|
+
|
|
96
|
+
## Examples
|
|
97
|
+
|
|
98
|
+
### Page Layout with Header and Footer
|
|
99
|
+
|
|
100
|
+
```tsx
|
|
101
|
+
import { Header } from "@versini/ui-header";
|
|
102
|
+
import { Main } from "@versini/ui-main";
|
|
103
|
+
import { Footer } from "@versini/ui-footer";
|
|
104
|
+
|
|
105
|
+
function PageLayout() {
|
|
106
|
+
return (
|
|
107
|
+
<div className="min-h-screen flex flex-col">
|
|
108
|
+
<Header sticky>
|
|
109
|
+
<nav>Navigation content</nav>
|
|
110
|
+
</Header>
|
|
111
|
+
|
|
112
|
+
<Main className="flex-1">
|
|
113
|
+
<div className="max-w-7xl mx-auto px-4 py-8">
|
|
114
|
+
<h1>Page Title</h1>
|
|
115
|
+
<p>Main page content...</p>
|
|
116
|
+
</div>
|
|
117
|
+
</Main>
|
|
118
|
+
|
|
119
|
+
<Footer row1="© 2024 Company" />
|
|
120
|
+
</div>
|
|
121
|
+
);
|
|
122
|
+
}
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
### Article Layout
|
|
126
|
+
|
|
127
|
+
```tsx
|
|
128
|
+
import { Main } from "@versini/ui-main";
|
|
129
|
+
|
|
130
|
+
function ArticleLayout() {
|
|
131
|
+
return (
|
|
132
|
+
<Main className="max-w-4xl mx-auto">
|
|
133
|
+
<article className="prose lg:prose-xl">
|
|
134
|
+
<header>
|
|
135
|
+
<h1>Understanding React Components</h1>
|
|
136
|
+
<time dateTime="2024-01-15">January 15, 2024</time>
|
|
137
|
+
</header>
|
|
138
|
+
|
|
139
|
+
<section>
|
|
140
|
+
<p>Introduction to the article...</p>
|
|
141
|
+
</section>
|
|
142
|
+
|
|
143
|
+
<section>
|
|
144
|
+
<h2>Core Concepts</h2>
|
|
145
|
+
<p>Main content...</p>
|
|
146
|
+
</section>
|
|
147
|
+
</article>
|
|
148
|
+
</Main>
|
|
149
|
+
);
|
|
150
|
+
}
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
### Dashboard Layout
|
|
154
|
+
|
|
155
|
+
```tsx
|
|
156
|
+
import { Main } from "@versini/ui-main";
|
|
157
|
+
|
|
158
|
+
function DashboardLayout() {
|
|
159
|
+
return (
|
|
160
|
+
<Main
|
|
161
|
+
noMargin
|
|
162
|
+
noPadding
|
|
163
|
+
className="min-h-screen bg-gray-50"
|
|
164
|
+
>
|
|
165
|
+
<div className="grid grid-cols-1 lg:grid-cols-4 gap-6 p-6">
|
|
166
|
+
<aside className="lg:col-span-1">
|
|
167
|
+
<div className="bg-white rounded-lg shadow p-4">
|
|
168
|
+
Sidebar content
|
|
169
|
+
</div>
|
|
170
|
+
</aside>
|
|
171
|
+
|
|
172
|
+
<section className="lg:col-span-3">
|
|
173
|
+
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
174
|
+
<div className="bg-white rounded-lg shadow p-6">
|
|
175
|
+
Dashboard card 1
|
|
176
|
+
</div>
|
|
177
|
+
<div className="bg-white rounded-lg shadow p-6">
|
|
178
|
+
Dashboard card 2
|
|
179
|
+
</div>
|
|
180
|
+
</div>
|
|
181
|
+
</section>
|
|
182
|
+
</div>
|
|
183
|
+
</Main>
|
|
184
|
+
);
|
|
185
|
+
}
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
### Full-width Content
|
|
189
|
+
|
|
190
|
+
```tsx
|
|
191
|
+
import { Main } from "@versini/ui-main";
|
|
192
|
+
|
|
193
|
+
function FullWidthContent() {
|
|
194
|
+
return (
|
|
195
|
+
<Main
|
|
196
|
+
noMargin
|
|
197
|
+
noPadding
|
|
198
|
+
className="w-full"
|
|
199
|
+
>
|
|
200
|
+
<section className="bg-blue-600 text-white py-20">
|
|
201
|
+
<div className="container mx-auto text-center">
|
|
202
|
+
<h1 className="text-4xl font-bold">Hero Section</h1>
|
|
203
|
+
<p className="text-xl mt-4">Full-width hero content</p>
|
|
204
|
+
</div>
|
|
205
|
+
</section>
|
|
206
|
+
|
|
207
|
+
<section className="py-16">
|
|
208
|
+
<div className="container mx-auto">
|
|
209
|
+
<h2 className="text-3xl font-bold text-center mb-8">Features</h2>
|
|
210
|
+
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
211
|
+
<div className="text-center">Feature 1</div>
|
|
212
|
+
<div className="text-center">Feature 2</div>
|
|
213
|
+
<div className="text-center">Feature 3</div>
|
|
214
|
+
</div>
|
|
215
|
+
</div>
|
|
216
|
+
</section>
|
|
217
|
+
</Main>
|
|
218
|
+
);
|
|
219
|
+
}
|
|
220
|
+
```
|
|
221
|
+
|
|
222
|
+
### Raw Main (Unstyled)
|
|
223
|
+
|
|
224
|
+
```tsx
|
|
225
|
+
import { Main } from "@versini/ui-main";
|
|
226
|
+
|
|
227
|
+
function RawMain() {
|
|
228
|
+
return (
|
|
229
|
+
<Main
|
|
230
|
+
raw
|
|
231
|
+
className="my-custom-main-styles"
|
|
232
|
+
>
|
|
233
|
+
<div className="completely-custom-layout">
|
|
234
|
+
Custom main with no default styles
|
|
235
|
+
</div>
|
|
236
|
+
</Main>
|
|
237
|
+
);
|
|
238
|
+
}
|
|
239
|
+
```
|
package/dist/index.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { MAIN_CLASSNAME as o, Main as I } from "./components/Main/Main.js";
|
|
2
2
|
/*!
|
|
3
|
-
@versini/ui-main v4.0.
|
|
3
|
+
@versini/ui-main v4.0.6
|
|
4
4
|
© 2025 gizmette.com
|
|
5
5
|
*/
|
|
6
6
|
try {
|
|
7
7
|
window.__VERSINI_UI_MAIN__ || (window.__VERSINI_UI_MAIN__ = {
|
|
8
|
-
version: "4.0.
|
|
9
|
-
buildTime: "
|
|
8
|
+
version: "4.0.6",
|
|
9
|
+
buildTime: "08/07/2025 04:12 PM EDT",
|
|
10
10
|
homepage: "https://github.com/aversini/ui-components",
|
|
11
11
|
license: "MIT"
|
|
12
12
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@versini/ui-main",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.6",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Arno Versini",
|
|
6
6
|
"publishConfig": {
|
|
@@ -27,6 +27,7 @@
|
|
|
27
27
|
"dev:types": "tsup --watch src",
|
|
28
28
|
"dev": "npm-run-all clean --parallel dev:js dev:types",
|
|
29
29
|
"lint": "biome lint src",
|
|
30
|
+
"lint:fix": "biome check src --write --no-errors-on-unmatched",
|
|
30
31
|
"prettier": "biome check --write --no-errors-on-unmatched",
|
|
31
32
|
"start": "static-server dist --port 5173",
|
|
32
33
|
"test:coverage:ui": "vitest --coverage --ui",
|
|
@@ -39,7 +40,7 @@
|
|
|
39
40
|
"react-dom": "^18.3.1 || ^19.0.0"
|
|
40
41
|
},
|
|
41
42
|
"devDependencies": {
|
|
42
|
-
"@versini/ui-types": "5.0.
|
|
43
|
+
"@versini/ui-types": "5.0.6"
|
|
43
44
|
},
|
|
44
45
|
"dependencies": {
|
|
45
46
|
"@tailwindcss/typography": "0.5.16",
|
|
@@ -48,5 +49,5 @@
|
|
|
48
49
|
"sideEffects": [
|
|
49
50
|
"**/*.css"
|
|
50
51
|
],
|
|
51
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "42daab1fb88c366495abbc1db78a9987de05e59b"
|
|
52
53
|
}
|