@behivetech/templates.page 0.0.0-stage → 0.3.3
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 +17 -2
- package/dist/index.cjs +174 -0
- package/dist/index.css +5 -0
- package/dist/index.d.ts +16 -0
- package/dist/index.js +160 -0
- package/docs.json +43 -0
- package/index.ts +2 -0
- package/package.json +56 -3
- package/page.example.tsx +11 -0
- package/page.module.scss +4 -0
- package/page.tsx +38 -0
package/README.md
CHANGED
|
@@ -1,3 +1,18 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Page
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
TODO: Add component description.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```jsx
|
|
8
|
+
import { Page } from "@behivetech/templates.page";
|
|
9
|
+
|
|
10
|
+
<Page>Content</Page>;
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Props
|
|
14
|
+
|
|
15
|
+
| Prop | Type | Default | Description |
|
|
16
|
+
| ----------- | ----------- | ------- | ---------------------- |
|
|
17
|
+
| `children` | `ReactNode` | — | Component content |
|
|
18
|
+
| `className` | `string` | — | Additional class names |
|
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __commonJS = (cb, mod) => function __require() {
|
|
9
|
+
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
|
|
10
|
+
};
|
|
11
|
+
var __export = (target, all) => {
|
|
12
|
+
for (var name in all)
|
|
13
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
14
|
+
};
|
|
15
|
+
var __copyProps = (to, from, except, desc) => {
|
|
16
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
17
|
+
for (let key of __getOwnPropNames(from))
|
|
18
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
19
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
20
|
+
}
|
|
21
|
+
return to;
|
|
22
|
+
};
|
|
23
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
24
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
25
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
26
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
27
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
28
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
29
|
+
mod
|
|
30
|
+
));
|
|
31
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
32
|
+
|
|
33
|
+
// ../../../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js
|
|
34
|
+
var require_classnames = __commonJS({
|
|
35
|
+
"../../../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js"(exports2, module2) {
|
|
36
|
+
"use strict";
|
|
37
|
+
(function() {
|
|
38
|
+
"use strict";
|
|
39
|
+
var hasOwn = {}.hasOwnProperty;
|
|
40
|
+
function classNames() {
|
|
41
|
+
var classes = "";
|
|
42
|
+
for (var i = 0; i < arguments.length; i++) {
|
|
43
|
+
var arg = arguments[i];
|
|
44
|
+
if (arg) {
|
|
45
|
+
classes = appendClass(classes, parseValue(arg));
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
return classes;
|
|
49
|
+
}
|
|
50
|
+
function parseValue(arg) {
|
|
51
|
+
if (typeof arg === "string" || typeof arg === "number") {
|
|
52
|
+
return arg;
|
|
53
|
+
}
|
|
54
|
+
if (typeof arg !== "object") {
|
|
55
|
+
return "";
|
|
56
|
+
}
|
|
57
|
+
if (Array.isArray(arg)) {
|
|
58
|
+
return classNames.apply(null, arg);
|
|
59
|
+
}
|
|
60
|
+
if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
|
|
61
|
+
return arg.toString();
|
|
62
|
+
}
|
|
63
|
+
var classes = "";
|
|
64
|
+
for (var key in arg) {
|
|
65
|
+
if (hasOwn.call(arg, key) && arg[key]) {
|
|
66
|
+
classes = appendClass(classes, key);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
return classes;
|
|
70
|
+
}
|
|
71
|
+
function appendClass(value, newClass) {
|
|
72
|
+
if (!newClass) {
|
|
73
|
+
return value;
|
|
74
|
+
}
|
|
75
|
+
if (value) {
|
|
76
|
+
return value + " " + newClass;
|
|
77
|
+
}
|
|
78
|
+
return value + newClass;
|
|
79
|
+
}
|
|
80
|
+
if (typeof module2 !== "undefined" && module2.exports) {
|
|
81
|
+
classNames.default = classNames;
|
|
82
|
+
module2.exports = classNames;
|
|
83
|
+
} else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
|
|
84
|
+
define("classnames", [], function() {
|
|
85
|
+
return classNames;
|
|
86
|
+
});
|
|
87
|
+
} else {
|
|
88
|
+
window.classNames = classNames;
|
|
89
|
+
}
|
|
90
|
+
})();
|
|
91
|
+
}
|
|
92
|
+
});
|
|
93
|
+
|
|
94
|
+
// index.ts
|
|
95
|
+
var index_exports = {};
|
|
96
|
+
__export(index_exports, {
|
|
97
|
+
Page: () => Page
|
|
98
|
+
});
|
|
99
|
+
module.exports = __toCommonJS(index_exports);
|
|
100
|
+
|
|
101
|
+
// ../../../../packages/registry/class-names/dist/index.js
|
|
102
|
+
var import_classnames = __toESM(require_classnames(), 1);
|
|
103
|
+
var getClassName = ({
|
|
104
|
+
className,
|
|
105
|
+
modifiers = {},
|
|
106
|
+
rootClass,
|
|
107
|
+
styles = {}
|
|
108
|
+
}) => {
|
|
109
|
+
function getModifiers() {
|
|
110
|
+
const updatedModifiers = {};
|
|
111
|
+
const modifierKeys = Object.keys(modifiers);
|
|
112
|
+
if (modifierKeys.length) {
|
|
113
|
+
modifierKeys.forEach((modKey) => {
|
|
114
|
+
const classKey = `${rootClass}--${modKey}`;
|
|
115
|
+
const newClassName = styles[classKey] || classKey;
|
|
116
|
+
updatedModifiers[newClassName] = modifiers[modKey] ?? false;
|
|
117
|
+
});
|
|
118
|
+
}
|
|
119
|
+
return updatedModifiers;
|
|
120
|
+
}
|
|
121
|
+
function getChildClass(childClassName) {
|
|
122
|
+
const classKey = `${rootClass}__${childClassName}`;
|
|
123
|
+
return styles[classKey] || classKey;
|
|
124
|
+
}
|
|
125
|
+
function getRootStyles() {
|
|
126
|
+
return (0, import_classnames.default)(
|
|
127
|
+
className,
|
|
128
|
+
{
|
|
129
|
+
...getModifiers()
|
|
130
|
+
},
|
|
131
|
+
styles[rootClass] || rootClass
|
|
132
|
+
);
|
|
133
|
+
}
|
|
134
|
+
return [getRootStyles(), getChildClass];
|
|
135
|
+
};
|
|
136
|
+
|
|
137
|
+
// page.module.scss
|
|
138
|
+
var page_module_default = {
|
|
139
|
+
"BHT__Page": "BHT__Page"
|
|
140
|
+
};
|
|
141
|
+
|
|
142
|
+
// page.tsx
|
|
143
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
144
|
+
var Page = ({
|
|
145
|
+
title,
|
|
146
|
+
description,
|
|
147
|
+
className,
|
|
148
|
+
children,
|
|
149
|
+
...rest
|
|
150
|
+
}) => {
|
|
151
|
+
const [rootClass] = getClassName({
|
|
152
|
+
className,
|
|
153
|
+
rootClass: "BHT__Page",
|
|
154
|
+
styles: page_module_default
|
|
155
|
+
});
|
|
156
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
157
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("title", { children: title }),
|
|
158
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("meta", { name: "description", content: description }),
|
|
159
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...rest, className: rootClass, children })
|
|
160
|
+
] });
|
|
161
|
+
};
|
|
162
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
163
|
+
0 && (module.exports = {
|
|
164
|
+
Page
|
|
165
|
+
});
|
|
166
|
+
/*! Bundled license information:
|
|
167
|
+
|
|
168
|
+
classnames/index.js:
|
|
169
|
+
(*!
|
|
170
|
+
Copyright (c) 2018 Jed Watson.
|
|
171
|
+
Licensed under the MIT License (MIT), see
|
|
172
|
+
http://jedwatson.github.io/classnames
|
|
173
|
+
*)
|
|
174
|
+
*/
|
package/dist/index.css
ADDED
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { HTMLAttributes } from 'react';
|
|
3
|
+
|
|
4
|
+
interface PageProps extends HTMLAttributes<HTMLDivElement> {
|
|
5
|
+
/** Document title rendered into a `<title>` tag */
|
|
6
|
+
title?: string;
|
|
7
|
+
/** Meta description rendered into a `<meta name="description">` tag */
|
|
8
|
+
description?: string;
|
|
9
|
+
/** Additional class names to merge with the component root element */
|
|
10
|
+
className?: string;
|
|
11
|
+
/** Page content */
|
|
12
|
+
children?: React.ReactNode;
|
|
13
|
+
}
|
|
14
|
+
declare const Page: ({ title, description, className, children, ...rest }: PageProps) => react.JSX.Element;
|
|
15
|
+
|
|
16
|
+
export { Page, type PageProps };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __commonJS = (cb, mod) => function __require() {
|
|
8
|
+
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
19
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
20
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
21
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
22
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
23
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
24
|
+
mod
|
|
25
|
+
));
|
|
26
|
+
|
|
27
|
+
// ../../../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js
|
|
28
|
+
var require_classnames = __commonJS({
|
|
29
|
+
"../../../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js"(exports, module) {
|
|
30
|
+
"use strict";
|
|
31
|
+
(function() {
|
|
32
|
+
"use strict";
|
|
33
|
+
var hasOwn = {}.hasOwnProperty;
|
|
34
|
+
function classNames() {
|
|
35
|
+
var classes = "";
|
|
36
|
+
for (var i = 0; i < arguments.length; i++) {
|
|
37
|
+
var arg = arguments[i];
|
|
38
|
+
if (arg) {
|
|
39
|
+
classes = appendClass(classes, parseValue(arg));
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
return classes;
|
|
43
|
+
}
|
|
44
|
+
function parseValue(arg) {
|
|
45
|
+
if (typeof arg === "string" || typeof arg === "number") {
|
|
46
|
+
return arg;
|
|
47
|
+
}
|
|
48
|
+
if (typeof arg !== "object") {
|
|
49
|
+
return "";
|
|
50
|
+
}
|
|
51
|
+
if (Array.isArray(arg)) {
|
|
52
|
+
return classNames.apply(null, arg);
|
|
53
|
+
}
|
|
54
|
+
if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
|
|
55
|
+
return arg.toString();
|
|
56
|
+
}
|
|
57
|
+
var classes = "";
|
|
58
|
+
for (var key in arg) {
|
|
59
|
+
if (hasOwn.call(arg, key) && arg[key]) {
|
|
60
|
+
classes = appendClass(classes, key);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
return classes;
|
|
64
|
+
}
|
|
65
|
+
function appendClass(value, newClass) {
|
|
66
|
+
if (!newClass) {
|
|
67
|
+
return value;
|
|
68
|
+
}
|
|
69
|
+
if (value) {
|
|
70
|
+
return value + " " + newClass;
|
|
71
|
+
}
|
|
72
|
+
return value + newClass;
|
|
73
|
+
}
|
|
74
|
+
if (typeof module !== "undefined" && module.exports) {
|
|
75
|
+
classNames.default = classNames;
|
|
76
|
+
module.exports = classNames;
|
|
77
|
+
} else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
|
|
78
|
+
define("classnames", [], function() {
|
|
79
|
+
return classNames;
|
|
80
|
+
});
|
|
81
|
+
} else {
|
|
82
|
+
window.classNames = classNames;
|
|
83
|
+
}
|
|
84
|
+
})();
|
|
85
|
+
}
|
|
86
|
+
});
|
|
87
|
+
|
|
88
|
+
// ../../../../packages/registry/class-names/dist/index.js
|
|
89
|
+
var import_classnames = __toESM(require_classnames(), 1);
|
|
90
|
+
var getClassName = ({
|
|
91
|
+
className,
|
|
92
|
+
modifiers = {},
|
|
93
|
+
rootClass,
|
|
94
|
+
styles = {}
|
|
95
|
+
}) => {
|
|
96
|
+
function getModifiers() {
|
|
97
|
+
const updatedModifiers = {};
|
|
98
|
+
const modifierKeys = Object.keys(modifiers);
|
|
99
|
+
if (modifierKeys.length) {
|
|
100
|
+
modifierKeys.forEach((modKey) => {
|
|
101
|
+
const classKey = `${rootClass}--${modKey}`;
|
|
102
|
+
const newClassName = styles[classKey] || classKey;
|
|
103
|
+
updatedModifiers[newClassName] = modifiers[modKey] ?? false;
|
|
104
|
+
});
|
|
105
|
+
}
|
|
106
|
+
return updatedModifiers;
|
|
107
|
+
}
|
|
108
|
+
function getChildClass(childClassName) {
|
|
109
|
+
const classKey = `${rootClass}__${childClassName}`;
|
|
110
|
+
return styles[classKey] || classKey;
|
|
111
|
+
}
|
|
112
|
+
function getRootStyles() {
|
|
113
|
+
return (0, import_classnames.default)(
|
|
114
|
+
className,
|
|
115
|
+
{
|
|
116
|
+
...getModifiers()
|
|
117
|
+
},
|
|
118
|
+
styles[rootClass] || rootClass
|
|
119
|
+
);
|
|
120
|
+
}
|
|
121
|
+
return [getRootStyles(), getChildClass];
|
|
122
|
+
};
|
|
123
|
+
|
|
124
|
+
// page.module.scss
|
|
125
|
+
var page_module_default = {
|
|
126
|
+
"BHT__Page": "BHT__Page"
|
|
127
|
+
};
|
|
128
|
+
|
|
129
|
+
// page.tsx
|
|
130
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
131
|
+
var Page = ({
|
|
132
|
+
title,
|
|
133
|
+
description,
|
|
134
|
+
className,
|
|
135
|
+
children,
|
|
136
|
+
...rest
|
|
137
|
+
}) => {
|
|
138
|
+
const [rootClass] = getClassName({
|
|
139
|
+
className,
|
|
140
|
+
rootClass: "BHT__Page",
|
|
141
|
+
styles: page_module_default
|
|
142
|
+
});
|
|
143
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
144
|
+
title && /* @__PURE__ */ jsx("title", { children: title }),
|
|
145
|
+
description && /* @__PURE__ */ jsx("meta", { name: "description", content: description }),
|
|
146
|
+
/* @__PURE__ */ jsx("div", { ...rest, className: rootClass, children })
|
|
147
|
+
] });
|
|
148
|
+
};
|
|
149
|
+
export {
|
|
150
|
+
Page
|
|
151
|
+
};
|
|
152
|
+
/*! Bundled license information:
|
|
153
|
+
|
|
154
|
+
classnames/index.js:
|
|
155
|
+
(*!
|
|
156
|
+
Copyright (c) 2018 Jed Watson.
|
|
157
|
+
Licensed under the MIT License (MIT), see
|
|
158
|
+
http://jedwatson.github.io/classnames
|
|
159
|
+
*)
|
|
160
|
+
*/
|
package/docs.json
ADDED
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://github.com/behivetech/bht-component-registry/docs.schema.json",
|
|
3
|
+
"version": 2,
|
|
4
|
+
"generatedAt": "2026-10-20T05:49:26.359Z",
|
|
5
|
+
"docs": [
|
|
6
|
+
{
|
|
7
|
+
"displayName": "Page",
|
|
8
|
+
"description": "",
|
|
9
|
+
"extendsNative": true,
|
|
10
|
+
"props": [
|
|
11
|
+
{
|
|
12
|
+
"name": "children",
|
|
13
|
+
"type": "ReactNode",
|
|
14
|
+
"required": false,
|
|
15
|
+
"defaultValue": null,
|
|
16
|
+
"description": "Page content"
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"name": "className",
|
|
20
|
+
"type": "string",
|
|
21
|
+
"required": false,
|
|
22
|
+
"defaultValue": null,
|
|
23
|
+
"description": "Additional class names to merge with the component root element"
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"name": "description",
|
|
27
|
+
"type": "string",
|
|
28
|
+
"required": false,
|
|
29
|
+
"defaultValue": null,
|
|
30
|
+
"description": "Meta description rendered into a `<meta name=\"description\">` tag"
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"name": "title",
|
|
34
|
+
"type": "string",
|
|
35
|
+
"required": false,
|
|
36
|
+
"defaultValue": null,
|
|
37
|
+
"description": "Document title rendered into a `<title>` tag"
|
|
38
|
+
}
|
|
39
|
+
]
|
|
40
|
+
}
|
|
41
|
+
],
|
|
42
|
+
"functions": []
|
|
43
|
+
}
|
package/index.ts
ADDED
package/package.json
CHANGED
|
@@ -1,6 +1,59 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@behivetech/templates.page",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"
|
|
5
|
-
"
|
|
3
|
+
"version": "0.3.3",
|
|
4
|
+
"license": "MIT",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"private": false,
|
|
7
|
+
"exports": {
|
|
8
|
+
".": {
|
|
9
|
+
"types": "./dist/index.d.ts",
|
|
10
|
+
"import": "./dist/index.js",
|
|
11
|
+
"require": "./dist/index.cjs"
|
|
12
|
+
},
|
|
13
|
+
"./styles.css": "./dist/index.css"
|
|
14
|
+
},
|
|
15
|
+
"files": [
|
|
16
|
+
"dist",
|
|
17
|
+
"README.md",
|
|
18
|
+
"index.ts",
|
|
19
|
+
"page.tsx",
|
|
20
|
+
"page.module.scss",
|
|
21
|
+
"*.example.tsx",
|
|
22
|
+
"docs.json"
|
|
23
|
+
],
|
|
24
|
+
"registry": {
|
|
25
|
+
"status": "stable",
|
|
26
|
+
"tags": []
|
|
27
|
+
},
|
|
28
|
+
"peerDependencies": {
|
|
29
|
+
"react": "^19.2.7",
|
|
30
|
+
"react-dom": "^19.2.7"
|
|
31
|
+
},
|
|
32
|
+
"devDependencies": {
|
|
33
|
+
"@types/react": "19.2.17",
|
|
34
|
+
"@types/react-dom": "19.2.3",
|
|
35
|
+
"eslint": "^9.39.5",
|
|
36
|
+
"tsup": "^8.5.1",
|
|
37
|
+
"typescript": "^6.0.3",
|
|
38
|
+
"vitest": "^4.1.10",
|
|
39
|
+
"@bht-component-registry/class-names": "0.0.6",
|
|
40
|
+
"@bht-component-registry/env": "0.1.0"
|
|
41
|
+
},
|
|
42
|
+
"repository": {
|
|
43
|
+
"type": "git",
|
|
44
|
+
"url": "https://github.com/behivetech/bht-galaxy.git",
|
|
45
|
+
"directory": "registry/behivetech/templates/page"
|
|
46
|
+
},
|
|
47
|
+
"publishConfig": {
|
|
48
|
+
"registry": "https://registry.npmjs.org",
|
|
49
|
+
"access": "public",
|
|
50
|
+
"provenance": true
|
|
51
|
+
},
|
|
52
|
+
"scripts": {
|
|
53
|
+
"build": "tsup && bht-registry-docgen",
|
|
54
|
+
"dev": "tsup --watch",
|
|
55
|
+
"lint": "eslint . --max-warnings 0",
|
|
56
|
+
"check-types": "tsc --noEmit",
|
|
57
|
+
"test": "vitest run"
|
|
58
|
+
}
|
|
6
59
|
}
|
package/page.example.tsx
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { Page } from "./page.js";
|
|
2
|
+
|
|
3
|
+
export const BasicPage = () => (
|
|
4
|
+
<Page
|
|
5
|
+
title="Example Page"
|
|
6
|
+
description="An example page using the Page template"
|
|
7
|
+
>
|
|
8
|
+
<h1>Welcome</h1>
|
|
9
|
+
<p>This page has no extra margin, padding, or border around it.</p>
|
|
10
|
+
</Page>
|
|
11
|
+
);
|
package/page.module.scss
ADDED
package/page.tsx
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { type HTMLAttributes } from "react";
|
|
2
|
+
import { getClassName } from "@bht-component-registry/class-names";
|
|
3
|
+
import styles from "./page.module.scss";
|
|
4
|
+
|
|
5
|
+
export interface PageProps extends HTMLAttributes<HTMLDivElement> {
|
|
6
|
+
/** Document title rendered into a `<title>` tag */
|
|
7
|
+
title?: string;
|
|
8
|
+
/** Meta description rendered into a `<meta name="description">` tag */
|
|
9
|
+
description?: string;
|
|
10
|
+
/** Additional class names to merge with the component root element */
|
|
11
|
+
className?: string;
|
|
12
|
+
/** Page content */
|
|
13
|
+
children?: React.ReactNode;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export const Page = ({
|
|
17
|
+
title,
|
|
18
|
+
description,
|
|
19
|
+
className,
|
|
20
|
+
children,
|
|
21
|
+
...rest
|
|
22
|
+
}: PageProps) => {
|
|
23
|
+
const [rootClass] = getClassName({
|
|
24
|
+
className,
|
|
25
|
+
rootClass: "BHT__Page",
|
|
26
|
+
styles,
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
return (
|
|
30
|
+
<>
|
|
31
|
+
{title && <title>{title}</title>}
|
|
32
|
+
{description && <meta name="description" content={description} />}
|
|
33
|
+
<div {...rest} className={rootClass}>
|
|
34
|
+
{children}
|
|
35
|
+
</div>
|
|
36
|
+
</>
|
|
37
|
+
);
|
|
38
|
+
};
|