kwikid-components-react
Version:
KwikID's Component Library in React
326 lines (319 loc) • 10.7 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 _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 = {
..._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."
}
}
};