@spelyco/react 0.0.1-alpha → 0.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/package.json +6 -14
- package/README.md +0 -102
package/package.json
CHANGED
|
@@ -1,14 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spelyco/react",
|
|
3
|
-
"version": "0.0.1
|
|
3
|
+
"version": "0.0.1",
|
|
4
4
|
"description": "React UI components for Spelyco — built on top of Mantine",
|
|
5
|
-
"keywords": [
|
|
6
|
-
"react",
|
|
7
|
-
"ui",
|
|
8
|
-
"components",
|
|
9
|
-
"mantine",
|
|
10
|
-
"spelyco"
|
|
11
|
-
],
|
|
5
|
+
"keywords": ["react", "ui", "components", "mantine", "spelyco"],
|
|
12
6
|
"license": "MIT",
|
|
13
7
|
"main": "./dist/index.js",
|
|
14
8
|
"module": "./dist/index.mjs",
|
|
@@ -20,9 +14,7 @@
|
|
|
20
14
|
"require": "./dist/index.js"
|
|
21
15
|
}
|
|
22
16
|
},
|
|
23
|
-
"files": [
|
|
24
|
-
"dist"
|
|
25
|
-
],
|
|
17
|
+
"files": ["dist"],
|
|
26
18
|
"scripts": {
|
|
27
19
|
"build": "tsup",
|
|
28
20
|
"dev": "tsup --watch",
|
|
@@ -39,12 +31,12 @@
|
|
|
39
31
|
"react-dom": ">=18"
|
|
40
32
|
},
|
|
41
33
|
"dependencies": {
|
|
42
|
-
"@spelyco/react-lib": "
|
|
34
|
+
"@spelyco/react-lib": "workspace:*"
|
|
43
35
|
},
|
|
44
36
|
"devDependencies": {
|
|
45
37
|
"@mantine/core": "^8.3.18",
|
|
46
38
|
"@mantine/hooks": "^8.3.18",
|
|
47
|
-
"@spelyco/tsconfig": "
|
|
39
|
+
"@spelyco/tsconfig": "workspace:*",
|
|
48
40
|
"@testing-library/react": "^16.1.0",
|
|
49
41
|
"@types/react": "^19.2.14",
|
|
50
42
|
"@types/react-dom": "^19.2.3",
|
|
@@ -57,4 +49,4 @@
|
|
|
57
49
|
"tsup": "^8.3.5",
|
|
58
50
|
"vitest": "^4.1.1"
|
|
59
51
|
}
|
|
60
|
-
}
|
|
52
|
+
}
|
package/README.md
DELETED
|
@@ -1,102 +0,0 @@
|
|
|
1
|
-
# @spelyco/react
|
|
2
|
-
|
|
3
|
-
React UI components for Spelyco — built on top of [Mantine](https://mantine.dev). Designed for CMS and admin panel use cases.
|
|
4
|
-
|
|
5
|
-
## Installation
|
|
6
|
-
|
|
7
|
-
```bash
|
|
8
|
-
bun add @spelyco/react @mantine/core @mantine/hooks react react-dom
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
## Setup
|
|
12
|
-
|
|
13
|
-
Import Mantine styles and wrap your app with `MantineProvider`:
|
|
14
|
-
|
|
15
|
-
```tsx
|
|
16
|
-
import "@mantine/core/styles.css";
|
|
17
|
-
import { MantineProvider } from "@mantine/core";
|
|
18
|
-
|
|
19
|
-
export default function App() {
|
|
20
|
-
return (
|
|
21
|
-
<MantineProvider>
|
|
22
|
-
{/* your app */}
|
|
23
|
-
</MantineProvider>
|
|
24
|
-
);
|
|
25
|
-
}
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
## Components
|
|
29
|
-
|
|
30
|
-
### Button
|
|
31
|
-
|
|
32
|
-
Mantine `Button` wrapper with Spelyco defaults. Supports all Mantine Button props.
|
|
33
|
-
|
|
34
|
-
```tsx
|
|
35
|
-
import { Button } from "@spelyco/react";
|
|
36
|
-
|
|
37
|
-
<Button>Click me</Button>
|
|
38
|
-
<Button variant="outline">Outline</Button>
|
|
39
|
-
<Button variant="subtle" disabled>Disabled</Button>
|
|
40
|
-
```
|
|
41
|
-
|
|
42
|
-
| Prop | Type | Default | Description |
|
|
43
|
-
|---|---|---|---|
|
|
44
|
-
| `variant` | `MantineButtonVariant` | `"filled"` | Button style variant |
|
|
45
|
-
| `...props` | `MantineButtonProps` | — | All Mantine Button props |
|
|
46
|
-
|
|
47
|
-
---
|
|
48
|
-
|
|
49
|
-
### AppLayout
|
|
50
|
-
|
|
51
|
-
Full-page admin/CMS layout built on Mantine `AppShell`. Provides a top header bar, collapsible sidebar, and scrollable content area.
|
|
52
|
-
|
|
53
|
-
```tsx
|
|
54
|
-
import { AppLayout } from "@spelyco/react";
|
|
55
|
-
import { IconHome, IconSettings } from "@tabler/icons-react";
|
|
56
|
-
|
|
57
|
-
const navItems = [
|
|
58
|
-
{ label: "Home", href: "/", icon: <IconHome size={16} /> },
|
|
59
|
-
{ label: "Settings", href: "/settings", icon: <IconSettings size={16} /> },
|
|
60
|
-
];
|
|
61
|
-
|
|
62
|
-
export default function Dashboard() {
|
|
63
|
-
return (
|
|
64
|
-
<AppLayout
|
|
65
|
-
brandName="My App"
|
|
66
|
-
navItems={navItems}
|
|
67
|
-
headerActions={<UserMenu />}
|
|
68
|
-
>
|
|
69
|
-
<h1>Page content</h1>
|
|
70
|
-
</AppLayout>
|
|
71
|
-
);
|
|
72
|
-
}
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
| Prop | Type | Default | Description |
|
|
76
|
-
|---|---|---|---|
|
|
77
|
-
| `brandName` | `ReactNode` | `"Spelyco"` | App name or logo in the header |
|
|
78
|
-
| `navItems` | `NavItem[]` | `[]` | Sidebar navigation links |
|
|
79
|
-
| `headerActions` | `ReactNode` | — | Right side of the header (user menu, etc.) |
|
|
80
|
-
| `children` | `ReactNode` | — | Main content area |
|
|
81
|
-
| `...props` | `AppShellProps` | — | All Mantine AppShell props |
|
|
82
|
-
|
|
83
|
-
```ts
|
|
84
|
-
interface NavItem {
|
|
85
|
-
label: string;
|
|
86
|
-
href: string;
|
|
87
|
-
icon?: ReactNode;
|
|
88
|
-
}
|
|
89
|
-
```
|
|
90
|
-
|
|
91
|
-
## Peer Dependencies
|
|
92
|
-
|
|
93
|
-
| Package | Version |
|
|
94
|
-
|---|---|
|
|
95
|
-
| `react` | `>=18` |
|
|
96
|
-
| `react-dom` | `>=18` |
|
|
97
|
-
| `@mantine/core` | `>=8` |
|
|
98
|
-
| `@mantine/hooks` | `>=8` |
|
|
99
|
-
|
|
100
|
-
## License
|
|
101
|
-
|
|
102
|
-
MIT
|