kwikid-components-react
Version:
KwikID's Component Library in React
759 lines (750 loc) • 33 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.WithoutCloseButton = exports.Variants = exports.Sizes = exports.Shapes = exports.FormExample = exports.Default = exports.ComplexContent = exports.CloseOnClickOutside = void 0;
var _react = _interopRequireDefault(require("react"));
var _Button = _interopRequireDefault(require("../button/Button"));
var _Dialog = _interopRequireDefault(require("./Dialog"));
var _InputText = _interopRequireDefault(require("../inputs/input-text/InputText"));
var _InputCheckbox = _interopRequireDefault(require("../inputs/input-checkbox/InputCheckbox"));
var _Textarea = _interopRequireDefault(require("../inputs/textarea/Textarea"));
var _Dialog2 = require("./Dialog.constants");
var _Dialog3 = require("./Dialog.defaults");
const _excluded = ["open"];
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); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
/**
* The Dialog component displays content in a modal overlay. It's used to focus the user's
* attention on important information or actions without navigating away from the current page.
*
* ## Usage
*
* ```jsx
* import { KwikUIDialog, KwikUIButton } from 'react-kwikui';
*
* const [isOpen, setIsOpen] = React.useState(false);
*
* const handleOpen = () => setIsOpen(true);
* const handleClose = () => setIsOpen(false);
*
* <KwikUIButton onClick={handleOpen}>Open Dialog</KwikUIButton>
*
* <KwikUIDialog
* open={isOpen}
* onClose={handleClose}
* size="m"
* variant="contained"
* >
* <h2>Dialog Title</h2>
* <p>Dialog content goes here.</p>
* <div>
* <KwikUIButton onClick={handleClose}>Close</KwikUIButton>
* </div>
* </KwikUIDialog>
* ```
*/
var _default = exports.default = {
title: "KwikUI/Overlay/Dialog",
component: _Dialog.default,
parameters: {
componentSubtitle: "Modal overlay for focusing user attention",
docs: {
description: {
component: "The Dialog component creates a modal overlay that focuses the user's attention on specific content or actions without navigating away from the current page."
}
},
a11y: {
config: {
rules: [{
id: "aria-dialog-name",
enabled: true
}]
}
}
},
argTypes: {
variant: {
control: "radio",
options: _Dialog2.KWIKUI_DIALOG__VARIANT__OPTIONS,
description: "The visual style variant of the dialog",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _Dialog3.KWIKUI_DIALOG__DEFAULTS.variant
}
}
},
shape: {
control: "radio",
options: _Dialog2.KWIKUI_DIALOG__SHAPE__OPTIONS,
description: "The corner style of the dialog",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _Dialog3.KWIKUI_DIALOG__DEFAULTS.shape
}
}
},
size: {
control: "radio",
options: _Dialog2.KWIKUI_DIALOG__SIZE__OPTIONS,
description: "The size of the dialog",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _Dialog3.KWIKUI_DIALOG__DEFAULTS.size
}
}
},
open: {
control: "boolean",
description: "Whether the dialog is visible",
table: {
type: {
summary: "boolean"
},
defaultValue: {
summary: _Dialog3.KWIKUI_DIALOG__DEFAULTS.open
}
}
},
closeOnClickOutside: {
control: "boolean",
description: "Whether clicking outside the dialog closes it",
table: {
type: {
summary: "boolean"
},
defaultValue: {
summary: _Dialog3.KWIKUI_DIALOG__DEFAULTS.closeOnClickOutside
}
}
},
showCloseButton: {
control: "boolean",
description: "Whether to show a close button in the top-right corner",
table: {
type: {
summary: "boolean"
},
defaultValue: {
summary: _Dialog3.KWIKUI_DIALOG__DEFAULTS.showCloseButton
}
}
},
id: {
control: "text",
description: "The ID of the dialog",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _Dialog3.KWIKUI_DIALOG__DEFAULTS.id
}
}
},
onClose: {
description: "Function called when the dialog is closed",
table: {
type: {
summary: "() => void"
}
}
},
children: {
description: "Content to display inside the dialog",
table: {
type: {
summary: "ReactNode"
}
}
}
}
};
/**
* Template for rendering the Dialog component
*/
const Template = _ref => {
let {
open
} = _ref,
args = _objectWithoutProperties(_ref, _excluded);
const [isOpen, setIsOpen] = _react.default.useState(open);
const handleOnClickClose = () => {
setIsOpen(false);
};
const handleOpenDialog = () => {
setIsOpen(true);
};
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Button.default, {
onClick: handleOpenDialog
}, "Open Dialog"), /*#__PURE__*/_react.default.createElement(_Dialog.default, _extends({}, args, {
open: isOpen,
onClose: handleOnClickClose
}), /*#__PURE__*/_react.default.createElement("div", {
style: {
padding: "2rem"
}
}, /*#__PURE__*/_react.default.createElement("h3", null, "Dialog Title"), /*#__PURE__*/_react.default.createElement("p", null, "This is the content of the dialog."), /*#__PURE__*/_react.default.createElement("p", null, "You can include any content here, such as text, images, forms, or other components."), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginTop: "1rem",
textAlign: "right"
}
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
onClick: handleOnClickClose
}, "Close")))), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginTop: "1rem"
}
}, /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("strong", null, "Note:"), " Click the \"Open Dialog\" button to see the dialog in action. The dialog will appear as an overlay on the page.")));
};
/**
* Default dialog implementation
*/
const Default = exports.Default = Template.bind({});
Default.args = _objectSpread(_objectSpread({}, _Dialog3.KWIKUI_DIALOG__DEFAULTS), {}, {
children: undefined
});
Default.parameters = {
docs: {
description: {
story: "Default dialog with standard settings and behavior."
}
}
};
/**
* Dialog in different sizes
*/
const Sizes = args => {
const [openSmall, setOpenSmall] = _react.default.useState(false);
const [openMedium, setOpenMedium] = _react.default.useState(false);
const [openLarge, setOpenLarge] = _react.default.useState(false);
const {
showCloseButton,
closeOnClickOutside,
variant,
shape
} = args;
const commonProps = _objectSpread(_objectSpread({}, args), {}, {
showCloseButton: showCloseButton !== undefined ? showCloseButton : _Dialog3.KWIKUI_DIALOG__DEFAULTS.showCloseButton,
closeOnClickOutside: closeOnClickOutside !== undefined ? closeOnClickOutside : _Dialog3.KWIKUI_DIALOG__DEFAULTS.closeOnClickOutside,
variant: variant || _Dialog3.KWIKUI_DIALOG__DEFAULTS.variant,
shape: shape || _Dialog3.KWIKUI_DIALOG__DEFAULTS.shape
});
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
gap: "1rem",
marginBottom: "2rem"
}
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
onClick: () => setOpenSmall(true)
}, "Open Small Dialog"), /*#__PURE__*/_react.default.createElement(_Button.default, {
onClick: () => setOpenMedium(true)
}, "Open Medium Dialog"), /*#__PURE__*/_react.default.createElement(_Button.default, {
onClick: () => setOpenLarge(true)
}, "Open Large Dialog")), /*#__PURE__*/_react.default.createElement(_Dialog.default, _extends({}, commonProps, {
size: "s",
open: openSmall,
onClose: () => setOpenSmall(false)
}), /*#__PURE__*/_react.default.createElement("div", {
style: {
padding: "1.5rem"
}
}, /*#__PURE__*/_react.default.createElement("h3", null, "Small Dialog"), /*#__PURE__*/_react.default.createElement("p", null, "This is a dialog with size=\"s\"."), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginTop: "1rem",
textAlign: "right"
}
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
onClick: () => setOpenSmall(false)
}, "Close")))), /*#__PURE__*/_react.default.createElement(_Dialog.default, _extends({}, commonProps, {
size: "m",
open: openMedium,
onClose: () => setOpenMedium(false)
}), /*#__PURE__*/_react.default.createElement("div", {
style: {
padding: "2rem"
}
}, /*#__PURE__*/_react.default.createElement("h3", null, "Medium Dialog"), /*#__PURE__*/_react.default.createElement("p", null, "This is a dialog with size=\"m\" (default)."), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginTop: "1rem",
textAlign: "right"
}
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
onClick: () => setOpenMedium(false)
}, "Close")))), /*#__PURE__*/_react.default.createElement(_Dialog.default, _extends({}, commonProps, {
size: "l",
open: openLarge,
onClose: () => setOpenLarge(false)
}), /*#__PURE__*/_react.default.createElement("div", {
style: {
padding: "2.5rem"
}
}, /*#__PURE__*/_react.default.createElement("h3", null, "Large Dialog"), /*#__PURE__*/_react.default.createElement("p", null, "This is a dialog with size=\"l\"."), /*#__PURE__*/_react.default.createElement("p", null, "Large dialogs are useful for displaying more complex content or forms that require more space."), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginTop: "1rem",
textAlign: "right"
}
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
onClick: () => setOpenLarge(false)
}, "Close")))));
};
exports.Sizes = Sizes;
Sizes.args = {
showCloseButton: _Dialog3.KWIKUI_DIALOG__DEFAULTS.showCloseButton,
closeOnClickOutside: _Dialog3.KWIKUI_DIALOG__DEFAULTS.closeOnClickOutside,
variant: _Dialog3.KWIKUI_DIALOG__DEFAULTS.variant,
shape: _Dialog3.KWIKUI_DIALOG__DEFAULTS.shape
};
Sizes.parameters = {
docs: {
description: {
story: "Dialogs in different sizes to accommodate varying amounts of content."
}
}
};
/**
* Dialog with different shapes
*/
const Shapes = args => {
const [openCurved, setOpenCurved] = _react.default.useState(false);
const [openRectangle, setOpenRectangle] = _react.default.useState(false);
const [openRounded, setOpenRounded] = _react.default.useState(false);
const {
showCloseButton,
closeOnClickOutside,
variant,
size
} = args;
const commonProps = _objectSpread(_objectSpread({}, args), {}, {
showCloseButton: showCloseButton !== undefined ? showCloseButton : _Dialog3.KWIKUI_DIALOG__DEFAULTS.showCloseButton,
closeOnClickOutside: closeOnClickOutside !== undefined ? closeOnClickOutside : _Dialog3.KWIKUI_DIALOG__DEFAULTS.closeOnClickOutside,
variant: variant || _Dialog3.KWIKUI_DIALOG__DEFAULTS.variant,
size: size || _Dialog3.KWIKUI_DIALOG__DEFAULTS.size
});
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
gap: "1rem",
marginBottom: "2rem"
}
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
onClick: () => setOpenCurved(true)
}, "Open Curved Dialog"), /*#__PURE__*/_react.default.createElement(_Button.default, {
onClick: () => setOpenRectangle(true)
}, "Open Rectangle Dialog"), /*#__PURE__*/_react.default.createElement(_Button.default, {
onClick: () => setOpenRounded(true)
}, "Open Rounded Dialog")), /*#__PURE__*/_react.default.createElement(_Dialog.default, _extends({}, commonProps, {
shape: "curved",
open: openCurved,
onClose: () => setOpenCurved(false)
}), /*#__PURE__*/_react.default.createElement("div", {
style: {
padding: "2rem"
}
}, /*#__PURE__*/_react.default.createElement("h3", null, "Curved Dialog"), /*#__PURE__*/_react.default.createElement("p", null, "This dialog has shape=\"curved\" (default)."), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginTop: "1rem",
textAlign: "right"
}
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
onClick: () => setOpenCurved(false)
}, "Close")))), /*#__PURE__*/_react.default.createElement(_Dialog.default, _extends({}, commonProps, {
shape: "rectangle",
open: openRectangle,
onClose: () => setOpenRectangle(false)
}), /*#__PURE__*/_react.default.createElement("div", {
style: {
padding: "2rem"
}
}, /*#__PURE__*/_react.default.createElement("h3", null, "Rectangle Dialog"), /*#__PURE__*/_react.default.createElement("p", null, "This dialog has shape=\"rectangle\"."), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginTop: "1rem",
textAlign: "right"
}
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
onClick: () => setOpenRectangle(false)
}, "Close")))), /*#__PURE__*/_react.default.createElement(_Dialog.default, _extends({}, commonProps, {
shape: "rounded",
open: openRounded,
onClose: () => setOpenRounded(false)
}), /*#__PURE__*/_react.default.createElement("div", {
style: {
padding: "2rem"
}
}, /*#__PURE__*/_react.default.createElement("h3", null, "Rounded Dialog"), /*#__PURE__*/_react.default.createElement("p", null, "This dialog has shape=\"rounded\"."), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginTop: "1rem",
textAlign: "right"
}
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
onClick: () => setOpenRounded(false)
}, "Close")))));
};
exports.Shapes = Shapes;
Shapes.args = {
showCloseButton: _Dialog3.KWIKUI_DIALOG__DEFAULTS.showCloseButton,
closeOnClickOutside: _Dialog3.KWIKUI_DIALOG__DEFAULTS.closeOnClickOutside,
variant: _Dialog3.KWIKUI_DIALOG__DEFAULTS.variant,
size: _Dialog3.KWIKUI_DIALOG__DEFAULTS.size
};
Shapes.parameters = {
docs: {
description: {
story: "Dialogs with different corner styles."
}
}
};
/**
* Dialog with different variants
*/
const Variants = args => {
const [openFullscreen, setOpenFullscreen] = _react.default.useState(false);
const [openContained, setOpenContained] = _react.default.useState(false);
const {
showCloseButton,
closeOnClickOutside,
shape,
size
} = args;
const commonProps = _objectSpread(_objectSpread({}, args), {}, {
showCloseButton: showCloseButton !== undefined ? showCloseButton : _Dialog3.KWIKUI_DIALOG__DEFAULTS.showCloseButton,
closeOnClickOutside: closeOnClickOutside !== undefined ? closeOnClickOutside : _Dialog3.KWIKUI_DIALOG__DEFAULTS.closeOnClickOutside,
shape: shape || _Dialog3.KWIKUI_DIALOG__DEFAULTS.shape,
size: size || _Dialog3.KWIKUI_DIALOG__DEFAULTS.size
});
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
gap: "1rem",
marginBottom: "2rem"
}
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
onClick: () => setOpenFullscreen(true)
}, "Open Fullscreen Dialog"), /*#__PURE__*/_react.default.createElement(_Button.default, {
onClick: () => setOpenContained(true)
}, "Open Contained Dialog")), /*#__PURE__*/_react.default.createElement(_Dialog.default, _extends({}, commonProps, {
variant: "fullscreen",
open: openFullscreen,
onClose: () => setOpenFullscreen(false)
}), /*#__PURE__*/_react.default.createElement("div", {
style: {
padding: "2rem"
}
}, /*#__PURE__*/_react.default.createElement("h3", null, "Fullscreen Dialog"), /*#__PURE__*/_react.default.createElement("p", null, "This dialog has variant=\"fullscreen\" (default)."), /*#__PURE__*/_react.default.createElement("p", null, "It covers the entire viewport with a semi-transparent overlay."), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginTop: "1rem",
textAlign: "right"
}
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
onClick: () => setOpenFullscreen(false)
}, "Close")))), /*#__PURE__*/_react.default.createElement(_Dialog.default, _extends({}, commonProps, {
variant: "contained",
open: openContained,
onClose: () => setOpenContained(false)
}), /*#__PURE__*/_react.default.createElement("div", {
style: {
padding: "2rem"
}
}, /*#__PURE__*/_react.default.createElement("h3", null, "Contained Dialog"), /*#__PURE__*/_react.default.createElement("p", null, "This dialog has variant=\"contained\"."), /*#__PURE__*/_react.default.createElement("p", null, "It's contained within its parent container rather than covering the entire viewport."), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginTop: "1rem",
textAlign: "right"
}
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
onClick: () => setOpenContained(false)
}, "Close")))));
};
exports.Variants = Variants;
Variants.args = {
showCloseButton: _Dialog3.KWIKUI_DIALOG__DEFAULTS.showCloseButton,
closeOnClickOutside: _Dialog3.KWIKUI_DIALOG__DEFAULTS.closeOnClickOutside,
shape: _Dialog3.KWIKUI_DIALOG__DEFAULTS.shape,
size: _Dialog3.KWIKUI_DIALOG__DEFAULTS.size
};
Variants.parameters = {
docs: {
description: {
story: "Dialogs with different display variants."
}
}
};
/**
* Dialog that closes when clicking outside
*/
const CloseOnClickOutside = args => {
const [openDialog, setOpenDialog] = _react.default.useState(false);
const {
showCloseButton,
variant,
shape,
size
} = args;
const commonProps = _objectSpread(_objectSpread({}, args), {}, {
showCloseButton: showCloseButton !== undefined ? showCloseButton : _Dialog3.KWIKUI_DIALOG__DEFAULTS.showCloseButton,
variant: variant || _Dialog3.KWIKUI_DIALOG__DEFAULTS.variant,
shape: shape || _Dialog3.KWIKUI_DIALOG__DEFAULTS.shape,
size: size || _Dialog3.KWIKUI_DIALOG__DEFAULTS.size,
closeOnClickOutside: true // Override to ensure this feature is shown
});
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Button.default, {
onClick: () => setOpenDialog(true)
}, "Open Dialog (Click Outside to Close)"), /*#__PURE__*/_react.default.createElement(_Dialog.default, _extends({}, commonProps, {
open: openDialog,
onClose: () => setOpenDialog(false)
}), /*#__PURE__*/_react.default.createElement("div", {
style: {
padding: "2rem"
}
}, /*#__PURE__*/_react.default.createElement("h3", null, "Click Outside to Close"), /*#__PURE__*/_react.default.createElement("p", null, "This dialog will close when you click outside of it because closeOnClickOutside is set to true."), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginTop: "1rem",
textAlign: "right"
}
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
onClick: () => setOpenDialog(false)
}, "Close")))));
};
exports.CloseOnClickOutside = CloseOnClickOutside;
CloseOnClickOutside.args = {
showCloseButton: _Dialog3.KWIKUI_DIALOG__DEFAULTS.showCloseButton,
variant: _Dialog3.KWIKUI_DIALOG__DEFAULTS.variant,
shape: _Dialog3.KWIKUI_DIALOG__DEFAULTS.shape,
size: _Dialog3.KWIKUI_DIALOG__DEFAULTS.size
};
CloseOnClickOutside.parameters = {
docs: {
description: {
story: "Dialog that closes when clicking outside of it."
}
}
};
/**
* Dialog without a close button
*/
const WithoutCloseButton = args => {
const [openDialog, setOpenDialog] = _react.default.useState(false);
const {
closeOnClickOutside,
variant,
shape,
size
} = args;
const commonProps = _objectSpread(_objectSpread({}, args), {}, {
closeOnClickOutside: closeOnClickOutside !== undefined ? closeOnClickOutside : _Dialog3.KWIKUI_DIALOG__DEFAULTS.closeOnClickOutside,
variant: variant || _Dialog3.KWIKUI_DIALOG__DEFAULTS.variant,
shape: shape || _Dialog3.KWIKUI_DIALOG__DEFAULTS.shape,
size: size || _Dialog3.KWIKUI_DIALOG__DEFAULTS.size,
showCloseButton: false // Override to ensure this feature is shown
});
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Button.default, {
onClick: () => setOpenDialog(true)
}, "Open Dialog Without Close Button"), /*#__PURE__*/_react.default.createElement(_Dialog.default, _extends({}, commonProps, {
open: openDialog,
onClose: () => setOpenDialog(false)
}), /*#__PURE__*/_react.default.createElement("div", {
style: {
padding: "2rem"
}
}, /*#__PURE__*/_react.default.createElement("h3", null, "No Close Button"), /*#__PURE__*/_react.default.createElement("p", null, "This dialog has showCloseButton=", false, "."), /*#__PURE__*/_react.default.createElement("p", null, "Notice the absence of the \"X\" close button in the top-right corner."), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginTop: "1rem",
textAlign: "right"
}
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
onClick: () => setOpenDialog(false)
}, "Close")))));
};
exports.WithoutCloseButton = WithoutCloseButton;
WithoutCloseButton.args = {
closeOnClickOutside: _Dialog3.KWIKUI_DIALOG__DEFAULTS.closeOnClickOutside,
variant: _Dialog3.KWIKUI_DIALOG__DEFAULTS.variant,
shape: _Dialog3.KWIKUI_DIALOG__DEFAULTS.shape,
size: _Dialog3.KWIKUI_DIALOG__DEFAULTS.size
};
WithoutCloseButton.parameters = {
docs: {
description: {
story: "Dialog without the default close button in the top-right corner."
}
}
};
/**
* Dialog with long scrollable content
*/
const ComplexContent = args => {
const [openDialog, setOpenDialog] = _react.default.useState(false);
const {
showCloseButton,
closeOnClickOutside,
variant,
shape,
size
} = args;
const commonProps = _objectSpread(_objectSpread({}, args), {}, {
showCloseButton: showCloseButton !== undefined ? showCloseButton : _Dialog3.KWIKUI_DIALOG__DEFAULTS.showCloseButton,
closeOnClickOutside: closeOnClickOutside !== undefined ? closeOnClickOutside : _Dialog3.KWIKUI_DIALOG__DEFAULTS.closeOnClickOutside,
variant: variant || _Dialog3.KWIKUI_DIALOG__DEFAULTS.variant,
shape: shape || _Dialog3.KWIKUI_DIALOG__DEFAULTS.shape,
size: size || _Dialog3.KWIKUI_DIALOG__DEFAULTS.size
});
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Button.default, {
onClick: () => setOpenDialog(true)
}, "Open Dialog with Long Content"), /*#__PURE__*/_react.default.createElement(_Dialog.default, _extends({}, commonProps, {
open: openDialog,
onClose: () => setOpenDialog(false)
}), /*#__PURE__*/_react.default.createElement("div", {
style: {
padding: "1rem"
}
}, /*#__PURE__*/_react.default.createElement("h2", {
style: {
marginTop: 0
}
}, "Long Scrollable Content"), /*#__PURE__*/_react.default.createElement("p", null, "This dialog demonstrates how the component handles long content that requires scrolling. The dialog maintains its position within the viewport while allowing the content to scroll."), /*#__PURE__*/_react.default.createElement("h3", null, "Section 1: Introduction"), /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nisl nunc quis nisl. Nullam euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nisl nunc quis nisl."), /*#__PURE__*/_react.default.createElement("h3", null, "Section 2: Main Content"), /*#__PURE__*/_react.default.createElement("p", null, "Phasellus ac ipsum vel nisi vestibulum eleifend. Sed faucibus, tortor vitae lacinia viverra, purus lorem lacinia justo, nec lacinia justo purus ac ipsum. Sed faucibus, tortor vitae lacinia viverra, purus lorem lacinia justo, nec lacinia justo purus ac ipsum."), /*#__PURE__*/_react.default.createElement("p", null, "Phasellus ac ipsum vel nisi vestibulum eleifend. Sed faucibus, tortor vitae lacinia viverra, purus lorem lacinia justo, nec lacinia justo purus ac ipsum. Sed faucibus, tortor vitae lacinia viverra, purus lorem lacinia justo, nec lacinia justo purus ac ipsum."), /*#__PURE__*/_react.default.createElement("h3", null, "Section 3: Additional Details"), /*#__PURE__*/_react.default.createElement("p", null, "Etiam euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nisl nunc quis nisl. Nullam euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nisl nunc quis nisl."), /*#__PURE__*/_react.default.createElement("p", null, "Etiam euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nisl nunc quis nisl. Nullam euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nisl nunc quis nisl."), /*#__PURE__*/_react.default.createElement("h3", null, "Section 4: Conclusion"), /*#__PURE__*/_react.default.createElement("p", null, "Vivamus mattis, justo at fermentum vulputate, felis magna scelerisque enim, id tincidunt velit nisl vitae tortor. Sed faucibus, tortor vitae lacinia viverra, purus lorem lacinia justo, nec lacinia justo purus ac ipsum."), /*#__PURE__*/_react.default.createElement("p", null, "Vivamus mattis, justo at fermentum vulputate, felis magna scelerisque enim, id tincidunt velit nisl vitae tortor. Sed faucibus, tortor vitae lacinia viverra, purus lorem lacinia justo, nec lacinia justo purus ac ipsum."), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginTop: "1rem",
textAlign: "right"
}
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
onClick: () => setOpenDialog(false)
}, "Close")))));
};
exports.ComplexContent = ComplexContent;
ComplexContent.args = {
showCloseButton: _Dialog3.KWIKUI_DIALOG__DEFAULTS.showCloseButton,
closeOnClickOutside: _Dialog3.KWIKUI_DIALOG__DEFAULTS.closeOnClickOutside,
variant: _Dialog3.KWIKUI_DIALOG__DEFAULTS.variant,
shape: _Dialog3.KWIKUI_DIALOG__DEFAULTS.shape,
size: "l"
};
ComplexContent.parameters = {
docs: {
description: {
story: "Dialog with long scrollable content to demonstrate how the component handles overflow."
}
}
};
/**
* Dialog with form elements
*/
const FormExample = args => {
const [openDialog, setOpenDialog] = _react.default.useState(false);
const [formData, setFormData] = _react.default.useState({
name: "",
email: "",
message: "",
subscribe: false
});
const {
showCloseButton,
closeOnClickOutside,
variant,
shape,
size
} = args;
const commonProps = _objectSpread(_objectSpread({}, args), {}, {
showCloseButton: showCloseButton !== undefined ? showCloseButton : _Dialog3.KWIKUI_DIALOG__DEFAULTS.showCloseButton,
closeOnClickOutside: closeOnClickOutside !== undefined ? closeOnClickOutside : _Dialog3.KWIKUI_DIALOG__DEFAULTS.closeOnClickOutside,
variant: variant || _Dialog3.KWIKUI_DIALOG__DEFAULTS.variant,
shape: shape || _Dialog3.KWIKUI_DIALOG__DEFAULTS.shape,
size: size || _Dialog3.KWIKUI_DIALOG__DEFAULTS.size
});
const handleInputChange = (name, value) => {
setFormData(_objectSpread(_objectSpread({}, formData), {}, {
[name]: value
}));
};
const handleSubmit = e => {
if (e) e.preventDefault();
// In a real application, this would submit the form data
console.log("Form submitted:", formData);
setOpenDialog(false);
};
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Button.default, {
onClick: () => setOpenDialog(true)
}, "Open Dialog with Form"), /*#__PURE__*/_react.default.createElement(_Dialog.default, _extends({}, commonProps, {
open: openDialog,
onClose: () => setOpenDialog(false)
}), /*#__PURE__*/_react.default.createElement("div", {
style: {
padding: "1rem"
}
}, /*#__PURE__*/_react.default.createElement("h1", {
style: {
marginTop: 0
}
}, "Contact Form"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("h2", null, "This dialog demonstrates embedding a form within the dialog component."), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
flexDirection: "column",
gap: "1rem"
}
}, /*#__PURE__*/_react.default.createElement(_InputText.default, {
id: "name",
label: "Name",
value: formData.name,
onInput: (id, val) => handleInputChange("name", val)
}), /*#__PURE__*/_react.default.createElement(_InputText.default, {
id: "email",
label: "Email",
value: formData.email,
onInput: (id, val) => handleInputChange("email", val)
}), /*#__PURE__*/_react.default.createElement(_Textarea.default, {
id: "message",
label: "Message",
textCase: "default",
value: formData.message,
onInput: (id, val) => handleInputChange("message", val)
}), /*#__PURE__*/_react.default.createElement(_InputCheckbox.default, {
id: "subscribe",
label: "Subscribe to newsletter",
placeholder: "Subscribe to newsletter",
value: formData.subscribe,
onInput: (id, val) => handleInputChange("subscribe", Boolean(val))
})), /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
justifyContent: "flex-end",
gap: "0.5rem",
marginTop: "1rem"
}
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
appearance: "secondary",
onClick: () => setOpenDialog(false)
}, "Cancel"), /*#__PURE__*/_react.default.createElement(_Button.default, {
appearance: "primary",
onClick: () => handleSubmit()
}, "Submit")))));
};
exports.FormExample = FormExample;
FormExample.args = {
showCloseButton: _Dialog3.KWIKUI_DIALOG__DEFAULTS.showCloseButton,
closeOnClickOutside: false,
variant: _Dialog3.KWIKUI_DIALOG__DEFAULTS.variant,
shape: _Dialog3.KWIKUI_DIALOG__DEFAULTS.shape,
size: "m"
};
FormExample.parameters = {
docs: {
description: {
story: "Dialog with an embedded form to demonstrate handling interactive content and form submissions."
}
}
};