@spelyco/react 0.0.1-alpha
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 +102 -0
- package/dist/index.d.mts +40 -0
- package/dist/index.d.ts +40 -0
- package/dist/index.js +44 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +41 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +60 -0
package/README.md
ADDED
|
@@ -0,0 +1,102 @@
|
|
|
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
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { AppShellProps, ButtonProps as ButtonProps$1 } from '@mantine/core';
|
|
3
|
+
import { ReactNode } from 'react';
|
|
4
|
+
|
|
5
|
+
interface NavItem {
|
|
6
|
+
label: string;
|
|
7
|
+
href: string;
|
|
8
|
+
icon?: ReactNode;
|
|
9
|
+
}
|
|
10
|
+
interface AppLayoutProps extends Omit<AppShellProps, "children"> {
|
|
11
|
+
/** Üst bar'da gösterilecek uygulama adı / logo */
|
|
12
|
+
brandName?: ReactNode;
|
|
13
|
+
/** Sol menü linkleri */
|
|
14
|
+
navItems?: NavItem[];
|
|
15
|
+
/** Üst sağ köşe aksiyonları (kullanıcı menüsü, tema toggle, vb.) */
|
|
16
|
+
headerActions?: ReactNode;
|
|
17
|
+
children: ReactNode;
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* Spelyco AppLayout — Mantine AppShell üzerine inşa edilmiş, CMS/admin panel
|
|
21
|
+
* projelerinde tekrar kullanılabilir tam ekran layout şablonu.
|
|
22
|
+
*
|
|
23
|
+
* Özellikler:
|
|
24
|
+
* - Mobilde açılıp kapanan sidebar
|
|
25
|
+
* - Üst navigasyon barı
|
|
26
|
+
* - Sol menü (navItems)
|
|
27
|
+
* - Scroll destekli içerik alanı
|
|
28
|
+
*/
|
|
29
|
+
declare function AppLayout({ brandName, navItems, headerActions, children, ...shellProps }: AppLayoutProps): react_jsx_runtime.JSX.Element;
|
|
30
|
+
|
|
31
|
+
interface ButtonProps extends ButtonProps$1 {
|
|
32
|
+
children?: ReactNode;
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* Spelyco Button — Mantine Button üzerine inşa edilmiş, Spelyco tema değerleriyle özelleştirilmiş.
|
|
36
|
+
* Mantine Button'ın tüm prop'larını destekler.
|
|
37
|
+
*/
|
|
38
|
+
declare function Button({ variant, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
|
|
39
|
+
|
|
40
|
+
export { AppLayout, type AppLayoutProps, Button, type NavItem };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { AppShellProps, ButtonProps as ButtonProps$1 } from '@mantine/core';
|
|
3
|
+
import { ReactNode } from 'react';
|
|
4
|
+
|
|
5
|
+
interface NavItem {
|
|
6
|
+
label: string;
|
|
7
|
+
href: string;
|
|
8
|
+
icon?: ReactNode;
|
|
9
|
+
}
|
|
10
|
+
interface AppLayoutProps extends Omit<AppShellProps, "children"> {
|
|
11
|
+
/** Üst bar'da gösterilecek uygulama adı / logo */
|
|
12
|
+
brandName?: ReactNode;
|
|
13
|
+
/** Sol menü linkleri */
|
|
14
|
+
navItems?: NavItem[];
|
|
15
|
+
/** Üst sağ köşe aksiyonları (kullanıcı menüsü, tema toggle, vb.) */
|
|
16
|
+
headerActions?: ReactNode;
|
|
17
|
+
children: ReactNode;
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* Spelyco AppLayout — Mantine AppShell üzerine inşa edilmiş, CMS/admin panel
|
|
21
|
+
* projelerinde tekrar kullanılabilir tam ekran layout şablonu.
|
|
22
|
+
*
|
|
23
|
+
* Özellikler:
|
|
24
|
+
* - Mobilde açılıp kapanan sidebar
|
|
25
|
+
* - Üst navigasyon barı
|
|
26
|
+
* - Sol menü (navItems)
|
|
27
|
+
* - Scroll destekli içerik alanı
|
|
28
|
+
*/
|
|
29
|
+
declare function AppLayout({ brandName, navItems, headerActions, children, ...shellProps }: AppLayoutProps): react_jsx_runtime.JSX.Element;
|
|
30
|
+
|
|
31
|
+
interface ButtonProps extends ButtonProps$1 {
|
|
32
|
+
children?: ReactNode;
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* Spelyco Button — Mantine Button üzerine inşa edilmiş, Spelyco tema değerleriyle özelleştirilmiş.
|
|
36
|
+
* Mantine Button'ın tüm prop'larını destekler.
|
|
37
|
+
*/
|
|
38
|
+
declare function Button({ variant, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
|
|
39
|
+
|
|
40
|
+
export { AppLayout, type AppLayoutProps, Button, type NavItem };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var core = require('@mantine/core');
|
|
4
|
+
var hooks = require('@mantine/hooks');
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
|
|
7
|
+
// src/components/AppLayout/AppLayout.tsx
|
|
8
|
+
function AppLayout({
|
|
9
|
+
brandName = "Spelyco",
|
|
10
|
+
navItems = [],
|
|
11
|
+
headerActions,
|
|
12
|
+
children,
|
|
13
|
+
...shellProps
|
|
14
|
+
}) {
|
|
15
|
+
const [opened, { toggle }] = hooks.useDisclosure();
|
|
16
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
17
|
+
core.AppShell,
|
|
18
|
+
{
|
|
19
|
+
header: { height: 60 },
|
|
20
|
+
navbar: { width: 240, breakpoint: "sm", collapsed: { mobile: !opened } },
|
|
21
|
+
padding: "md",
|
|
22
|
+
...shellProps,
|
|
23
|
+
children: [
|
|
24
|
+
/* @__PURE__ */ jsxRuntime.jsx(core.AppShell.Header, { children: /* @__PURE__ */ jsxRuntime.jsxs(core.Group, { h: "100%", px: "md", justify: "space-between", children: [
|
|
25
|
+
/* @__PURE__ */ jsxRuntime.jsxs(core.Group, { children: [
|
|
26
|
+
/* @__PURE__ */ jsxRuntime.jsx(core.Burger, { opened, onClick: toggle, hiddenFrom: "sm", size: "sm" }),
|
|
27
|
+
typeof brandName === "string" ? /* @__PURE__ */ jsxRuntime.jsx(core.Text, { fw: 700, size: "lg", children: brandName }) : brandName
|
|
28
|
+
] }),
|
|
29
|
+
headerActions && /* @__PURE__ */ jsxRuntime.jsx(core.Group, { children: headerActions })
|
|
30
|
+
] }) }),
|
|
31
|
+
/* @__PURE__ */ jsxRuntime.jsx(core.AppShell.Navbar, { p: "xs", children: /* @__PURE__ */ jsxRuntime.jsx(core.ScrollArea, { children: navItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(core.NavLink, { label: item.label, href: item.href, leftSection: item.icon }, item.href)) }) }),
|
|
32
|
+
/* @__PURE__ */ jsxRuntime.jsx(core.AppShell.Main, { children })
|
|
33
|
+
]
|
|
34
|
+
}
|
|
35
|
+
);
|
|
36
|
+
}
|
|
37
|
+
function Button({ variant = "filled", ...props }) {
|
|
38
|
+
return /* @__PURE__ */ jsxRuntime.jsx(core.Button, { variant, ...props });
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
exports.AppLayout = AppLayout;
|
|
42
|
+
exports.Button = Button;
|
|
43
|
+
//# sourceMappingURL=index.js.map
|
|
44
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/AppLayout/AppLayout.tsx","../src/components/Button/Button.tsx"],"names":["useDisclosure","jsxs","AppShell","jsx","Group","Burger","Text","ScrollArea","NavLink","MantineButton"],"mappings":";;;;;;;AAsCO,SAAS,SAAA,CAAU;AAAA,EACxB,SAAA,GAAY,SAAA;AAAA,EACZ,WAAW,EAAC;AAAA,EACZ,aAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAmB;AACjB,EAAA,MAAM,CAAC,MAAA,EAAQ,EAAE,MAAA,EAAQ,IAAIA,mBAAA,EAAc;AAE3C,EAAA,uBACEC,eAAA;AAAA,IAACC,aAAA;AAAA,IAAA;AAAA,MACC,MAAA,EAAQ,EAAE,MAAA,EAAQ,EAAA,EAAG;AAAA,MACrB,MAAA,EAAQ,EAAE,KAAA,EAAO,GAAA,EAAK,UAAA,EAAY,IAAA,EAAM,SAAA,EAAW,EAAE,MAAA,EAAQ,CAAC,MAAA,EAAO,EAAE;AAAA,MACvE,OAAA,EAAQ,IAAA;AAAA,MACP,GAAG,UAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAACD,aAAA,CAAS,MAAA,EAAT,EACC,QAAA,kBAAAD,eAAA,CAACG,UAAA,EAAA,EAAM,GAAE,MAAA,EAAO,EAAA,EAAG,IAAA,EAAK,OAAA,EAAQ,eAAA,EAC9B,QAAA,EAAA;AAAA,0BAAAH,eAAA,CAACG,UAAA,EAAA,EACC,QAAA,EAAA;AAAA,4BAAAD,cAAA,CAACE,eAAO,MAAA,EAAgB,OAAA,EAAS,QAAQ,UAAA,EAAW,IAAA,EAAK,MAAK,IAAA,EAAK,CAAA;AAAA,YAClE,OAAO,SAAA,KAAc,QAAA,mBACpBF,cAAA,CAACG,SAAA,EAAA,EAAK,IAAI,GAAA,EAAK,IAAA,EAAK,IAAA,EACjB,QAAA,EAAA,SAAA,EACH,CAAA,GAEA;AAAA,WAAA,EAEJ,CAAA;AAAA,UACC,aAAA,oBAAiBH,cAAA,CAACC,UAAA,EAAA,EAAO,QAAA,EAAA,aAAA,EAAc;AAAA,SAAA,EAC1C,CAAA,EACF,CAAA;AAAA,wBAEAD,cAAA,CAACD,aAAA,CAAS,MAAA,EAAT,EAAgB,CAAA,EAAE,IAAA,EACjB,QAAA,kBAAAC,cAAA,CAACI,eAAA,EAAA,EACE,QAAA,EAAA,QAAA,CAAS,GAAA,CAAI,CAAC,IAAA,qBACbJ,cAAA,CAACK,YAAA,EAAA,EAAwB,KAAA,EAAO,IAAA,CAAK,KAAA,EAAO,IAAA,EAAM,IAAA,CAAK,IAAA,EAAM,WAAA,EAAa,IAAA,CAAK,IAAA,EAAA,EAAjE,IAAA,CAAK,IAAkE,CACtF,CAAA,EACH,CAAA,EACF,CAAA;AAAA,wBAEAL,cAAA,CAACD,aAAA,CAAS,IAAA,EAAT,EAAe,QAAA,EAAS;AAAA;AAAA;AAAA,GAC3B;AAEJ;ACtEO,SAAS,OAAO,EAAE,OAAA,GAAU,QAAA,EAAU,GAAG,OAAM,EAAgB;AACpE,EAAA,uBAAOC,cAAAA,CAACM,WAAA,EAAA,EAAc,OAAA,EAAmB,GAAG,KAAA,EAAO,CAAA;AACrD","file":"index.js","sourcesContent":["import {\n AppShell,\n type AppShellProps,\n Burger,\n Group,\n NavLink,\n ScrollArea,\n Text,\n} from \"@mantine/core\";\nimport { useDisclosure } from \"@mantine/hooks\";\nimport type { ReactNode } from \"react\";\n\nexport interface NavItem {\n label: string;\n href: string;\n icon?: ReactNode;\n}\n\nexport interface AppLayoutProps extends Omit<AppShellProps, \"children\"> {\n /** Üst bar'da gösterilecek uygulama adı / logo */\n brandName?: ReactNode;\n /** Sol menü linkleri */\n navItems?: NavItem[];\n /** Üst sağ köşe aksiyonları (kullanıcı menüsü, tema toggle, vb.) */\n headerActions?: ReactNode;\n children: ReactNode;\n}\n\n/**\n * Spelyco AppLayout — Mantine AppShell üzerine inşa edilmiş, CMS/admin panel\n * projelerinde tekrar kullanılabilir tam ekran layout şablonu.\n *\n * Özellikler:\n * - Mobilde açılıp kapanan sidebar\n * - Üst navigasyon barı\n * - Sol menü (navItems)\n * - Scroll destekli içerik alanı\n */\nexport function AppLayout({\n brandName = \"Spelyco\",\n navItems = [],\n headerActions,\n children,\n ...shellProps\n}: AppLayoutProps) {\n const [opened, { toggle }] = useDisclosure();\n\n return (\n <AppShell\n header={{ height: 60 }}\n navbar={{ width: 240, breakpoint: \"sm\", collapsed: { mobile: !opened } }}\n padding=\"md\"\n {...shellProps}\n >\n <AppShell.Header>\n <Group h=\"100%\" px=\"md\" justify=\"space-between\">\n <Group>\n <Burger opened={opened} onClick={toggle} hiddenFrom=\"sm\" size=\"sm\" />\n {typeof brandName === \"string\" ? (\n <Text fw={700} size=\"lg\">\n {brandName}\n </Text>\n ) : (\n brandName\n )}\n </Group>\n {headerActions && <Group>{headerActions}</Group>}\n </Group>\n </AppShell.Header>\n\n <AppShell.Navbar p=\"xs\">\n <ScrollArea>\n {navItems.map((item) => (\n <NavLink key={item.href} label={item.label} href={item.href} leftSection={item.icon} />\n ))}\n </ScrollArea>\n </AppShell.Navbar>\n\n <AppShell.Main>{children}</AppShell.Main>\n </AppShell>\n );\n}\n","import { Button as MantineButton, type ButtonProps as MantineButtonProps } from \"@mantine/core\";\nimport type { ReactNode } from \"react\";\n\nexport interface ButtonProps extends MantineButtonProps {\n children?: ReactNode;\n}\n\n/**\n * Spelyco Button — Mantine Button üzerine inşa edilmiş, Spelyco tema değerleriyle özelleştirilmiş.\n * Mantine Button'ın tüm prop'larını destekler.\n */\nexport function Button({ variant = \"filled\", ...props }: ButtonProps) {\n return <MantineButton variant={variant} {...props} />;\n}\n"]}
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { AppShell, Group, Burger, Text, ScrollArea, NavLink, Button as Button$1 } from '@mantine/core';
|
|
2
|
+
import { useDisclosure } from '@mantine/hooks';
|
|
3
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
4
|
+
|
|
5
|
+
// src/components/AppLayout/AppLayout.tsx
|
|
6
|
+
function AppLayout({
|
|
7
|
+
brandName = "Spelyco",
|
|
8
|
+
navItems = [],
|
|
9
|
+
headerActions,
|
|
10
|
+
children,
|
|
11
|
+
...shellProps
|
|
12
|
+
}) {
|
|
13
|
+
const [opened, { toggle }] = useDisclosure();
|
|
14
|
+
return /* @__PURE__ */ jsxs(
|
|
15
|
+
AppShell,
|
|
16
|
+
{
|
|
17
|
+
header: { height: 60 },
|
|
18
|
+
navbar: { width: 240, breakpoint: "sm", collapsed: { mobile: !opened } },
|
|
19
|
+
padding: "md",
|
|
20
|
+
...shellProps,
|
|
21
|
+
children: [
|
|
22
|
+
/* @__PURE__ */ jsx(AppShell.Header, { children: /* @__PURE__ */ jsxs(Group, { h: "100%", px: "md", justify: "space-between", children: [
|
|
23
|
+
/* @__PURE__ */ jsxs(Group, { children: [
|
|
24
|
+
/* @__PURE__ */ jsx(Burger, { opened, onClick: toggle, hiddenFrom: "sm", size: "sm" }),
|
|
25
|
+
typeof brandName === "string" ? /* @__PURE__ */ jsx(Text, { fw: 700, size: "lg", children: brandName }) : brandName
|
|
26
|
+
] }),
|
|
27
|
+
headerActions && /* @__PURE__ */ jsx(Group, { children: headerActions })
|
|
28
|
+
] }) }),
|
|
29
|
+
/* @__PURE__ */ jsx(AppShell.Navbar, { p: "xs", children: /* @__PURE__ */ jsx(ScrollArea, { children: navItems.map((item) => /* @__PURE__ */ jsx(NavLink, { label: item.label, href: item.href, leftSection: item.icon }, item.href)) }) }),
|
|
30
|
+
/* @__PURE__ */ jsx(AppShell.Main, { children })
|
|
31
|
+
]
|
|
32
|
+
}
|
|
33
|
+
);
|
|
34
|
+
}
|
|
35
|
+
function Button({ variant = "filled", ...props }) {
|
|
36
|
+
return /* @__PURE__ */ jsx(Button$1, { variant, ...props });
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
export { AppLayout, Button };
|
|
40
|
+
//# sourceMappingURL=index.mjs.map
|
|
41
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/AppLayout/AppLayout.tsx","../src/components/Button/Button.tsx"],"names":["jsx","MantineButton"],"mappings":";;;;;AAsCO,SAAS,SAAA,CAAU;AAAA,EACxB,SAAA,GAAY,SAAA;AAAA,EACZ,WAAW,EAAC;AAAA,EACZ,aAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAmB;AACjB,EAAA,MAAM,CAAC,MAAA,EAAQ,EAAE,MAAA,EAAQ,IAAI,aAAA,EAAc;AAE3C,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,MAAA,EAAQ,EAAE,MAAA,EAAQ,EAAA,EAAG;AAAA,MACrB,MAAA,EAAQ,EAAE,KAAA,EAAO,GAAA,EAAK,UAAA,EAAY,IAAA,EAAM,SAAA,EAAW,EAAE,MAAA,EAAQ,CAAC,MAAA,EAAO,EAAE;AAAA,MACvE,OAAA,EAAQ,IAAA;AAAA,MACP,GAAG,UAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,QAAA,CAAS,MAAA,EAAT,EACC,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAM,GAAE,MAAA,EAAO,EAAA,EAAG,IAAA,EAAK,OAAA,EAAQ,eAAA,EAC9B,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KAAA,EAAA,EACC,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,UAAO,MAAA,EAAgB,OAAA,EAAS,QAAQ,UAAA,EAAW,IAAA,EAAK,MAAK,IAAA,EAAK,CAAA;AAAA,YAClE,OAAO,SAAA,KAAc,QAAA,mBACpB,GAAA,CAAC,IAAA,EAAA,EAAK,IAAI,GAAA,EAAK,IAAA,EAAK,IAAA,EACjB,QAAA,EAAA,SAAA,EACH,CAAA,GAEA;AAAA,WAAA,EAEJ,CAAA;AAAA,UACC,aAAA,oBAAiB,GAAA,CAAC,KAAA,EAAA,EAAO,QAAA,EAAA,aAAA,EAAc;AAAA,SAAA,EAC1C,CAAA,EACF,CAAA;AAAA,wBAEA,GAAA,CAAC,QAAA,CAAS,MAAA,EAAT,EAAgB,CAAA,EAAE,IAAA,EACjB,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EACE,QAAA,EAAA,QAAA,CAAS,GAAA,CAAI,CAAC,IAAA,qBACb,GAAA,CAAC,OAAA,EAAA,EAAwB,KAAA,EAAO,IAAA,CAAK,KAAA,EAAO,IAAA,EAAM,IAAA,CAAK,IAAA,EAAM,WAAA,EAAa,IAAA,CAAK,IAAA,EAAA,EAAjE,IAAA,CAAK,IAAkE,CACtF,CAAA,EACH,CAAA,EACF,CAAA;AAAA,wBAEA,GAAA,CAAC,QAAA,CAAS,IAAA,EAAT,EAAe,QAAA,EAAS;AAAA;AAAA;AAAA,GAC3B;AAEJ;ACtEO,SAAS,OAAO,EAAE,OAAA,GAAU,QAAA,EAAU,GAAG,OAAM,EAAgB;AACpE,EAAA,uBAAOA,GAAAA,CAACC,QAAA,EAAA,EAAc,OAAA,EAAmB,GAAG,KAAA,EAAO,CAAA;AACrD","file":"index.mjs","sourcesContent":["import {\n AppShell,\n type AppShellProps,\n Burger,\n Group,\n NavLink,\n ScrollArea,\n Text,\n} from \"@mantine/core\";\nimport { useDisclosure } from \"@mantine/hooks\";\nimport type { ReactNode } from \"react\";\n\nexport interface NavItem {\n label: string;\n href: string;\n icon?: ReactNode;\n}\n\nexport interface AppLayoutProps extends Omit<AppShellProps, \"children\"> {\n /** Üst bar'da gösterilecek uygulama adı / logo */\n brandName?: ReactNode;\n /** Sol menü linkleri */\n navItems?: NavItem[];\n /** Üst sağ köşe aksiyonları (kullanıcı menüsü, tema toggle, vb.) */\n headerActions?: ReactNode;\n children: ReactNode;\n}\n\n/**\n * Spelyco AppLayout — Mantine AppShell üzerine inşa edilmiş, CMS/admin panel\n * projelerinde tekrar kullanılabilir tam ekran layout şablonu.\n *\n * Özellikler:\n * - Mobilde açılıp kapanan sidebar\n * - Üst navigasyon barı\n * - Sol menü (navItems)\n * - Scroll destekli içerik alanı\n */\nexport function AppLayout({\n brandName = \"Spelyco\",\n navItems = [],\n headerActions,\n children,\n ...shellProps\n}: AppLayoutProps) {\n const [opened, { toggle }] = useDisclosure();\n\n return (\n <AppShell\n header={{ height: 60 }}\n navbar={{ width: 240, breakpoint: \"sm\", collapsed: { mobile: !opened } }}\n padding=\"md\"\n {...shellProps}\n >\n <AppShell.Header>\n <Group h=\"100%\" px=\"md\" justify=\"space-between\">\n <Group>\n <Burger opened={opened} onClick={toggle} hiddenFrom=\"sm\" size=\"sm\" />\n {typeof brandName === \"string\" ? (\n <Text fw={700} size=\"lg\">\n {brandName}\n </Text>\n ) : (\n brandName\n )}\n </Group>\n {headerActions && <Group>{headerActions}</Group>}\n </Group>\n </AppShell.Header>\n\n <AppShell.Navbar p=\"xs\">\n <ScrollArea>\n {navItems.map((item) => (\n <NavLink key={item.href} label={item.label} href={item.href} leftSection={item.icon} />\n ))}\n </ScrollArea>\n </AppShell.Navbar>\n\n <AppShell.Main>{children}</AppShell.Main>\n </AppShell>\n );\n}\n","import { Button as MantineButton, type ButtonProps as MantineButtonProps } from \"@mantine/core\";\nimport type { ReactNode } from \"react\";\n\nexport interface ButtonProps extends MantineButtonProps {\n children?: ReactNode;\n}\n\n/**\n * Spelyco Button — Mantine Button üzerine inşa edilmiş, Spelyco tema değerleriyle özelleştirilmiş.\n * Mantine Button'ın tüm prop'larını destekler.\n */\nexport function Button({ variant = \"filled\", ...props }: ButtonProps) {\n return <MantineButton variant={variant} {...props} />;\n}\n"]}
|
package/package.json
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@spelyco/react",
|
|
3
|
+
"version": "0.0.1-alpha",
|
|
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
|
+
],
|
|
12
|
+
"license": "MIT",
|
|
13
|
+
"main": "./dist/index.js",
|
|
14
|
+
"module": "./dist/index.mjs",
|
|
15
|
+
"types": "./dist/index.d.ts",
|
|
16
|
+
"exports": {
|
|
17
|
+
".": {
|
|
18
|
+
"types": "./dist/index.d.ts",
|
|
19
|
+
"import": "./dist/index.mjs",
|
|
20
|
+
"require": "./dist/index.js"
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
"files": [
|
|
24
|
+
"dist"
|
|
25
|
+
],
|
|
26
|
+
"scripts": {
|
|
27
|
+
"build": "tsup",
|
|
28
|
+
"dev": "tsup --watch",
|
|
29
|
+
"lint": "biome check src/",
|
|
30
|
+
"lint:fix": "biome check --write src/",
|
|
31
|
+
"test": "vitest run",
|
|
32
|
+
"test:watch": "vitest",
|
|
33
|
+
"clean": "rm -rf dist"
|
|
34
|
+
},
|
|
35
|
+
"peerDependencies": {
|
|
36
|
+
"@mantine/core": ">=8",
|
|
37
|
+
"@mantine/hooks": ">=8",
|
|
38
|
+
"react": ">=18",
|
|
39
|
+
"react-dom": ">=18"
|
|
40
|
+
},
|
|
41
|
+
"dependencies": {
|
|
42
|
+
"@spelyco/react-lib": "0.0.1-alpha"
|
|
43
|
+
},
|
|
44
|
+
"devDependencies": {
|
|
45
|
+
"@mantine/core": "^8.3.18",
|
|
46
|
+
"@mantine/hooks": "^8.3.18",
|
|
47
|
+
"@spelyco/tsconfig": "*",
|
|
48
|
+
"@testing-library/react": "^16.1.0",
|
|
49
|
+
"@types/react": "^19.2.14",
|
|
50
|
+
"@types/react-dom": "^19.2.3",
|
|
51
|
+
"@vitejs/plugin-react": "^6.0.1",
|
|
52
|
+
"jsdom": "^29.0.1",
|
|
53
|
+
"postcss": "^8.5.4",
|
|
54
|
+
"postcss-preset-mantine": "^1.17.0",
|
|
55
|
+
"react": "^19.2.4",
|
|
56
|
+
"react-dom": "^19.2.4",
|
|
57
|
+
"tsup": "^8.3.5",
|
|
58
|
+
"vitest": "^4.1.1"
|
|
59
|
+
}
|
|
60
|
+
}
|