kwikid-components-react
Version:
KwikID's Component Library in React
330 lines (323 loc) • 12 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.Sizes = exports.MessageTypes = exports.LongMessages = exports.Default = exports.CustomStyles = void 0;
var _react = _interopRequireDefault(require("react"));
var _Messages = _interopRequireDefault(require("./Messages"));
var _Messages2 = require("./Messages.constants");
var _Messages3 = require("./Messages.defaults");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
/**
* The Messages component displays status messages, notifications, or feedback to users.
* It supports different message types (info, error, warning, success) and can display
* multiple messages at once.
*
* ## Usage
*
* ```jsx
* import { KwikUIMessages } from 'react-kwikui';
*
* const messages = [
* { type: 'success', message: 'Your data was saved successfully.' },
* { type: 'error', message: 'There was an error processing the payment.' }
* ];
*
* <KwikUIMessages
* messages={messages}
* size="m"
* />
* ```
*/
var _default = exports.default = {
title: "KwikUI/Feedback/Messages",
component: _Messages.default,
parameters: {
componentSubtitle: "Display feedback and status messages to users",
docs: {
description: {
component: "The Messages component provides consistent styling for different types of messages including information, warnings, errors, and success notifications."
}
},
a11y: {
config: {
rules: [{
id: "color-contrast",
enabled: true
}]
}
}
},
argTypes: {
size: {
control: "radio",
options: _Messages2.KWIKUI_MESSAGES__SIZE__OPTIONS,
description: "The size of the messages",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _Messages3.KWIKUI_MESSAGES__DEFAULTS.size
}
}
},
messages: {
control: "object",
description: "Array of message objects to display",
table: {
type: {
summary: "Array<IKwikUIMessage>"
},
defaultValue: {
summary: "[]"
}
}
},
customStyles: {
control: "object",
description: "Custom styles to apply to different parts of the component",
table: {
type: {
summary: "object"
},
defaultValue: {
summary: "{ wrapper: {}, container: {}, icon: {}, message: {} }"
}
}
}
}
}; // Default set of messages for demonstration
const DEFAULT_MESSAGES = [{
type: "info",
message: "This is an informational message. It provides the user with neutral information."
}, {
type: "error",
message: "This is an error message. It indicates something went wrong."
}, {
type: "warning",
message: "This is a warning message. It alerts the user to potential issues."
}, {
type: "success",
message: "This is a success message. It confirms a successful operation."
}];
/**
* Template for rendering the Messages component
*/
const Template = args => {
return /*#__PURE__*/_react.default.createElement(_Messages.default, _extends({}, args, {
messages: args.messages || DEFAULT_MESSAGES
}));
};
/**
* Default messages implementation showing all message types
*/
const Default = exports.Default = Template.bind({});
Default.args = _objectSpread(_objectSpread({}, _Messages3.KWIKUI_MESSAGES__DEFAULTS), {}, {
messages: DEFAULT_MESSAGES
});
Default.parameters = {
docs: {
description: {
story: "Default messages display with examples of all four message types: info, error, warning, and success."
}
}
};
/**
* Messages in different sizes
*/
const Sizes = args => {
const {
customStyles
} = args;
const message = {
type: "info",
message: "This is an example message to demonstrate different sizes."
};
return /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
flexDirection: "column",
gap: "1.5rem"
}
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", null, "Extra Extra Small (XXS)"), /*#__PURE__*/_react.default.createElement(_Messages.default, {
size: "xxs",
messages: [message],
customStyles: customStyles
})), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", null, "Extra Small (XS)"), /*#__PURE__*/_react.default.createElement(_Messages.default, {
size: "xs",
messages: [message],
customStyles: customStyles
})), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", null, "Small (S)"), /*#__PURE__*/_react.default.createElement(_Messages.default, {
size: "s",
messages: [message],
customStyles: customStyles
})), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", null, "Medium (M) - Default"), /*#__PURE__*/_react.default.createElement(_Messages.default, {
size: "m",
messages: [message],
customStyles: customStyles
})), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", null, "Large (L)"), /*#__PURE__*/_react.default.createElement(_Messages.default, {
size: "l",
messages: [message],
customStyles: customStyles
})), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", null, "Extra Large (XL)"), /*#__PURE__*/_react.default.createElement(_Messages.default, {
size: "xl",
messages: [message],
customStyles: customStyles
})), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", null, "Extra Extra Large (XXL)"), /*#__PURE__*/_react.default.createElement(_Messages.default, {
size: "xxl",
messages: [message],
customStyles: customStyles
})));
};
exports.Sizes = Sizes;
Sizes.args = {
customStyles: _Messages3.KWIKUI_MESSAGES__DEFAULTS.customStyles
};
Sizes.parameters = {
docs: {
description: {
story: "Messages are available in multiple sizes to fit different UI contexts."
}
}
};
/**
* Individual message types
*/
const MessageTypes = args => {
const {
size,
customStyles
} = args;
return /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
flexDirection: "column",
gap: "1.5rem"
}
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", null, "Information Message"), /*#__PURE__*/_react.default.createElement(_Messages.default, {
size: size,
customStyles: customStyles,
messages: [{
type: "info",
message: "Information messages are used to provide neutral information to the user."
}]
})), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", null, "Error Message"), /*#__PURE__*/_react.default.createElement(_Messages.default, {
size: size,
customStyles: customStyles,
messages: [{
type: "error",
message: "Error messages indicate that something has gone wrong."
}]
})), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", null, "Warning Message"), /*#__PURE__*/_react.default.createElement(_Messages.default, {
size: size,
customStyles: customStyles,
messages: [{
type: "warning",
message: "Warning messages alert the user to something that requires attention."
}]
})), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", null, "Success Message"), /*#__PURE__*/_react.default.createElement(_Messages.default, {
size: size,
customStyles: customStyles,
messages: [{
type: "success",
message: "Success messages confirm that an operation has been completed successfully."
}]
})));
};
exports.MessageTypes = MessageTypes;
MessageTypes.args = {
size: _Messages3.KWIKUI_MESSAGES__DEFAULTS.size,
customStyles: _Messages3.KWIKUI_MESSAGES__DEFAULTS.customStyles
};
MessageTypes.parameters = {
docs: {
description: {
story: "The four different message types with their distinct visual styling."
}
}
};
/**
* Long messages with wrapping
*/
const LongMessages = args => {
const {
size,
customStyles
} = args;
const longMessage = {
type: "info",
message: "This is a very long message that demonstrates text wrapping behavior. " + "When messages exceed a certain length, they will automatically wrap to the next line. " + "This ensures that the message remains readable regardless of its length. " + "Long messages are useful for providing detailed explanations or instructions to users."
};
return /*#__PURE__*/_react.default.createElement(_Messages.default, {
size: size,
customStyles: customStyles,
messages: [longMessage]
});
};
exports.LongMessages = LongMessages;
LongMessages.args = {
size: _Messages3.KWIKUI_MESSAGES__DEFAULTS.size,
customStyles: _Messages3.KWIKUI_MESSAGES__DEFAULTS.customStyles
};
LongMessages.parameters = {
docs: {
description: {
story: "Messages with long text content demonstrate automatic text wrapping behavior."
}
}
};
/**
* Custom styled messages
*/
const CustomStyles = args => {
const {
size
} = args;
const defaultCustomStyles = {
wrapper: {
margin: "10px 0",
border: "2px solid #34D399",
borderRadius: "8px",
overflow: "hidden"
},
container: {
padding: "16px",
backgroundColor: "rgba(52, 211, 153, 0.1)"
},
icon: {
color: "#059669",
fontSize: "24px"
},
message: {
fontWeight: "bold",
color: "#059669"
}
};
const message = {
type: "success",
message: "This message has custom styling applied to it."
};
return /*#__PURE__*/_react.default.createElement(_Messages.default, {
size: size,
messages: [message],
customStyles: defaultCustomStyles
});
};
exports.CustomStyles = CustomStyles;
CustomStyles.args = {
size: _Messages3.KWIKUI_MESSAGES__DEFAULTS.size
};
CustomStyles.parameters = {
docs: {
description: {
story: "Messages can be customized with custom styles for wrapper, container, icon, and message text."
}
}
};