@wener/console
Version:
Base console UI toolkit
241 lines (240 loc) • 8.71 kB
JavaScript
function _define_property(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
}
else {
obj[key] = value;
}
return obj;
}
function _object_spread(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
var ownKeys = Object.keys(source);
if (typeof Object.getOwnPropertySymbols === "function") {
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
}));
}
ownKeys.forEach(function (key) {
_define_property(target, key, source[key]);
});
}
return target;
}
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) {
symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
}
keys.push.apply(keys, symbols);
}
return keys;
}
function _object_spread_props(target, source) {
source = source != null ? source : {};
if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
}
else {
ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
return target;
}
import React from "react";
import { GrSystem } from "react-icons/gr";
import { getBuildInfo } from "../../buildinfo/index.js";
import { SystemAboutPage } from "./SystemAboutPage.js";
var meta = {
title: "pages/SystemAboutPage",
component: SystemAboutPage.Composite,
parameters: {
layout: "centered"
},
tags: [
"autodocs"
]
};
export default meta;
export var Default = {
args: {}
};
export var WithCustomBuild = {
args: {
build: {
title: "Custom Build",
logo: /*#__PURE__*/ React.createElement(GrSystem, {
className: "h-8 w-8"
}),
info: _object_spread_props(_object_spread({}, getBuildInfo()), {
version: "2.0.0",
isDev: false
})
}
}
};
export var WithCustomAuthor = {
args: {
author: {
title: "\u4F01\u4E1A\u7BA1\u7406\u7CFB\u7EDF",
author: {
name: "Custom Author",
link: "https://example.com"
}
}
}
};
export var WithCustomAgent = {
args: {
agent: /*#__PURE__*/ React.createElement("div", {
className: "rounded-lg border p-4 text-sm shadow"
}, "Custom Agent Info")
}
};
export var WithDisabledBuild = {
args: {
build: false
}
};
export var WithDisabledAuthor = {
args: {
author: false
}
};
export var WithDisabledAgent = {
args: {
agent: false
}
};
export var WithChildren = {
args: {
children: /*#__PURE__*/ React.createElement("div", {
className: "rounded-lg border p-4 text-sm shadow"
}, /*#__PURE__*/ React.createElement("p", null, "Additional content goes here"))
}
};
export var FullFeatured = {
args: {
build: {
title: "Production Build",
logo: /*#__PURE__*/ React.createElement(GrSystem, {
className: "h-8 w-8"
}),
info: _object_spread_props(_object_spread({}, getBuildInfo()), {
version: "1.0.0",
isDev: false
})
},
author: {
title: "\u4F01\u4E1A\u7BA1\u7406\u7CFB\u7EDF",
author: {
name: "Custom Team",
link: "https://example.com"
}
},
children: /*#__PURE__*/ React.createElement("div", {
className: "rounded-lg border p-4 text-sm shadow"
}, /*#__PURE__*/ React.createElement("p", null, "Additional system information"))
}
};
// Stories for individual components
export var AuthorInfoStory = {
render: function () {
return /*#__PURE__*/ React.createElement("div", {
className: "max-w-md"
}, /*#__PURE__*/ React.createElement(SystemAboutPage.AuthorInfo, {
title: "\u7CFB\u7EDF\u540D\u79F0",
author: {
name: "Wener",
link: "https://wener.me"
}
}));
}
};
export var BuildInfoStory = {
render: function () {
return /*#__PURE__*/ React.createElement("div", {
className: "max-w-md"
}, /*#__PURE__*/ React.createElement(SystemAboutPage.BuildInfo, {
logo: /*#__PURE__*/ React.createElement(GrSystem, {
className: "h-6 w-6"
}),
title: "\u7CFB\u7EDF\u540D\u79F0",
info: getBuildInfo()
}));
}
};
export var BrowserInfoStory = {
render: function () {
return /*#__PURE__*/ React.createElement("div", {
className: "max-w-md"
}, /*#__PURE__*/ React.createElement(SystemAboutPage.BrowserInfo, null));
}
};
export var SectionStory = {
render: function () {
return /*#__PURE__*/ React.createElement("div", {
className: "max-w-md space-y-4"
}, /*#__PURE__*/ React.createElement(SystemAboutPage.Section, {
title: "Section with Title",
icon: /*#__PURE__*/ React.createElement(GrSystem, {
className: "h-6 w-6"
})
}, /*#__PURE__*/ React.createElement("p", null, "This is a section with title and icon in the header.")), /*#__PURE__*/ React.createElement(SystemAboutPage.Section, {
title: "Section with Title Only"
}, /*#__PURE__*/ React.createElement("p", null, "This is a section with title only (no icon).")), /*#__PURE__*/ React.createElement(SystemAboutPage.Section, {
header: /*#__PURE__*/ React.createElement("div", {
className: "flex items-center justify-between"
}, /*#__PURE__*/ React.createElement("div", {
className: "flex items-center gap-2"
}, /*#__PURE__*/ React.createElement(GrSystem, {
className: "h-6 w-6"
}), /*#__PURE__*/ React.createElement("span", {
className: "text-xl font-medium"
}, "Custom Header")), /*#__PURE__*/ React.createElement("span", {
className: "badge badge-sm"
}, "Badge"))
}, /*#__PURE__*/ React.createElement("p", null, "This is a section with a custom header.")), /*#__PURE__*/ React.createElement(SystemAboutPage.Section, {
title: "Section with Footer",
icon: /*#__PURE__*/ React.createElement(GrSystem, {
className: "h-6 w-6"
}),
footer: /*#__PURE__*/ React.createElement("small", {
className: "text-gray-500"
}, "Footer content goes here")
}, /*#__PURE__*/ React.createElement("p", null, "This is a section with a footer.")), /*#__PURE__*/ React.createElement(SystemAboutPage.Section, {
title: "Section with Custom Padding",
className: "p-0"
}, /*#__PURE__*/ React.createElement("div", {
className: "p-3"
}, /*#__PURE__*/ React.createElement("p", null, "This section has custom padding. Content handles its own padding."))));
}
};
export var LayoutStory = {
render: function () {
return /*#__PURE__*/ React.createElement(SystemAboutPage.Layout, null, /*#__PURE__*/ React.createElement(SystemAboutPage.Section, {
title: "First Section",
icon: /*#__PURE__*/ React.createElement(GrSystem, {
className: "h-6 w-6"
})
}, /*#__PURE__*/ React.createElement("p", null, "This is the first section in the layout.")), /*#__PURE__*/ React.createElement(SystemAboutPage.Section, {
title: "Second Section"
}, /*#__PURE__*/ React.createElement("p", null, "This is the second section in the layout.")), /*#__PURE__*/ React.createElement(SystemAboutPage.Section, {
title: "Third Section",
icon: /*#__PURE__*/ React.createElement(GrSystem, {
className: "h-6 w-6"
})
}, /*#__PURE__*/ React.createElement("p", null, "This is the third section in the layout.")));
}
};