@wener/console
Version:
Base console UI toolkit
297 lines (296 loc) • 13 kB
JavaScript
import React from "react";
import { AmountFormat } from "./AmountFormat.js";
import { DateFormat } from "./DateFormat.js";
import { DurationFormat } from "./DurationFormat.js";
import { EmptyPlaceholder } from "./EmptyPlaceholder.js";
import { ErrorPlaceholder } from "./ErrorPlaceholder.js";
import { NotReadyPlaceholder } from "./NotReadyPlaceholder.js";
import { PhoneNumberFormat } from "./PhoneNumberFormat.js";
import { TruncateFormat } from "./TruncateFormat.js";
var meta = {
title: "components/formats",
parameters: {
layout: "fullscreen"
}
};
export default meta;
export var Default = function () {
var formatGroups = [
{
title: "Placeholder Components",
description: "Components for handling empty states, errors, and loading states",
items: [
{
title: "EmptyPlaceholder",
children: [
{
description: "default",
content: /*#__PURE__*/ React.createElement(EmptyPlaceholder, null)
}
]
},
{
title: "ErrorPlaceholder",
children: [
{
description: "string error",
content: /*#__PURE__*/ React.createElement(ErrorPlaceholder, {
error: "Sample error message"
})
},
{
description: "error object",
content: /*#__PURE__*/ React.createElement(ErrorPlaceholder, {
error: new Error("Sample error object")
})
}
]
},
{
title: "NotReadyPlaceholder",
children: [
{
description: "default",
content: /*#__PURE__*/ React.createElement(NotReadyPlaceholder, null)
},
{
description: "loading",
content: /*#__PURE__*/ React.createElement(NotReadyPlaceholder, {
loading: true
})
},
{
description: "error",
content: /*#__PURE__*/ React.createElement(NotReadyPlaceholder, {
error: "error"
})
},
{
description: "empty",
content: /*#__PURE__*/ React.createElement(NotReadyPlaceholder, {
empty: 0
})
}
]
}
]
},
{
title: "Data Format Components",
description: "Components for formatting numbers, dates, durations, and other data types",
items: [
{
title: "AmountFormat",
children: [
{
description: "integer",
content: /*#__PURE__*/ React.createElement(AmountFormat, {
value: 1234
})
},
{
description: "decimal",
content: /*#__PURE__*/ React.createElement(AmountFormat, {
value: 1234.56
})
},
{
description: "large number",
content: /*#__PURE__*/ React.createElement(AmountFormat, {
value: 1234567.89
})
},
{
description: "string number",
content: /*#__PURE__*/ React.createElement(AmountFormat, {
value: "9876.54"
})
},
{
description: "undefined",
content: /*#__PURE__*/ React.createElement(AmountFormat, {
value: undefined
})
}
]
},
{
title: "DateFormat",
children: [
{
description: "default (YYYY-MM-DD)",
content: /*#__PURE__*/ React.createElement(DateFormat, {
value: new Date("2024-03-15T14:30:00")
})
},
{
description: "Chinese format",
content: /*#__PURE__*/ React.createElement(DateFormat, {
value: new Date("2024-03-15T14:30:00"),
format: "YYYY\u5E74MM\u6708DD\u65E5 HH:mm"
})
},
{
description: "time only",
content: /*#__PURE__*/ React.createElement(DateFormat, {
value: new Date("2024-03-15T14:30:00"),
format: "HH:mm:ss"
})
},
{
description: "ISO string input",
content: /*#__PURE__*/ React.createElement(DateFormat, {
value: "2024-03-15T14:30:00Z"
})
},
{
description: "current timestamp",
content: /*#__PURE__*/ React.createElement(DateFormat, {
value: Date.now(),
format: "YYYY-MM-DD HH:mm"
})
},
{
description: "invalid date",
content: /*#__PURE__*/ React.createElement(DateFormat, {
value: "invalid"
})
}
]
},
{
title: "DurationFormat",
children: [
{
description: "1.5 seconds",
content: /*#__PURE__*/ React.createElement(DurationFormat, {
value: 1500
})
},
{
description: "30 seconds",
content: /*#__PURE__*/ React.createElement(DurationFormat, {
value: 30000
})
},
{
description: "1.5 minutes",
content: /*#__PURE__*/ React.createElement(DurationFormat, {
value: 90000
})
},
{
description: "1h 1m 1s",
content: /*#__PURE__*/ React.createElement(DurationFormat, {
value: 3661000
})
},
{
description: "undefined",
content: /*#__PURE__*/ React.createElement(DurationFormat, {
value: undefined
})
}
]
}
]
},
{
title: "Text & Communication Format Components",
description: "Components for formatting text, phone numbers, and other communication data",
items: [
{
title: "TruncateFormat",
children: [
{
description: "short text",
content: /*#__PURE__*/ React.createElement(TruncateFormat, null, "abc")
},
{
description: "long text",
content: /*#__PURE__*/ React.createElement(TruncateFormat, null, "abc def ghi jkl mno pqr stu vwx yz")
},
{
description: "value prop",
content: /*#__PURE__*/ React.createElement(TruncateFormat, {
value: "abc def ghi jkl mno pqr stu vwx yz"
})
}
]
},
{
title: "PhoneNumberFormat",
children: [
{
description: "Chinese mobile",
content: /*#__PURE__*/ React.createElement(PhoneNumberFormat, {
value: "13812345678"
})
},
{
description: "Chinese landline",
content: /*#__PURE__*/ React.createElement(PhoneNumberFormat, {
value: "02112345678"
})
},
{
description: "US number",
content: /*#__PURE__*/ React.createElement(PhoneNumberFormat, {
value: "+1234567890"
})
},
{
description: "unmasked",
content: /*#__PURE__*/ React.createElement(PhoneNumberFormat, {
value: "13812345678",
unmask: true
})
},
{
description: "empty",
content: /*#__PURE__*/ React.createElement(PhoneNumberFormat, {
value: ""
})
}
]
}
]
}
];
return /*#__PURE__*/ React.createElement("div", {
className: "flex flex-col gap-8 p-6"
}, formatGroups.map(function (group, groupIndex) {
return /*#__PURE__*/ React.createElement("div", {
key: groupIndex,
className: "space-y-4"
}, /*#__PURE__*/ React.createElement("div", {
className: "border-base-300 border-b pb-2"
}, /*#__PURE__*/ React.createElement("h1", {
className: "text-base-content text-2xl font-bold"
}, group.title), /*#__PURE__*/ React.createElement("p", {
className: "text-base-content/70 text-sm"
}, group.description)), /*#__PURE__*/ React.createElement("div", {
className: "grid grid-cols-1 gap-6 lg:grid-cols-2 xl:grid-cols-3"
}, group.items.map(function (item, itemIndex) {
return /*#__PURE__*/ React.createElement("div", {
key: itemIndex,
className: "card bg-base-100 border-base-200 border shadow-sm"
}, /*#__PURE__*/ React.createElement("div", {
className: "card-body p-4"
}, /*#__PURE__*/ React.createElement("h2", {
className: "card-title text-primary text-lg font-semibold"
}, item.title), /*#__PURE__*/ React.createElement("div", {
className: "space-y-3"
}, item.children.map(function (child, childIndex) {
return /*#__PURE__*/ React.createElement("div", {
key: childIndex,
className: "space-y-1"
}, /*#__PURE__*/ React.createElement("h3", {
className: "text-base-content/80 text-sm font-medium"
}, child.description), /*#__PURE__*/ React.createElement("div", {
className: "border-base-200 bg-base-50 min-h-[2rem] w-fit resize overflow-auto rounded border p-2 text-sm"
}, child.content));
}))));
})));
}));
};