kwikid-components-react
Version:
KwikID's Component Library in React
555 lines (545 loc) • 18.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.WithValidation = exports.WithPrefixAndPostfix = exports.Sizes = exports.Shapes = exports.Disabled = exports.Default = exports.DateConstraints = void 0;
var _react = _interopRequireDefault(require("react"));
var _InputDate = _interopRequireDefault(require("./InputDate"));
var _InputDate2 = require("./InputDate.constants");
var _InputDate3 = require("./InputDate.defaults");
const _excluded = ["value", "onInput", "onInputValidate"];
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 InputDate component provides a specialized input field for date selection.
*
* @deprecated This component is deprecated and will be removed in a future version.
* Please use the KwikUIInputDateTime component with variant="date" instead.
*
* ## Usage
*
* ```jsx
* import { KwikUIInputDate } from 'react-kwikui';
*
* const [date, setDate] = useState('');
*
* const handleDateChange = (id, value) => {
* setDate(value);
* };
*
* <KwikUIInputDate
* id="appointment-date"
* label="Select appointment date"
* value={date}
* onInput={handleDateChange}
* />
* ```
*/
var _default = exports.default = {
title: "KwikUI/Inputs/Date (Deprecated)",
component: _InputDate.default,
parameters: {
componentSubtitle: "Date input field for selecting calendar dates [DEPRECATED]",
docs: {
description: {
component: "⚠️ DEPRECATED: The Date Input component will be removed in a future version. Please use the DateTime component with variant='date' instead. This component provides a field for users to select dates using a calendar interface."
}
},
notes: "⚠️ This component is deprecated and will be removed in a future version. Please use the DateTime component with variant='date' option instead.",
badges: [{
label: "Deprecated",
options: {
backgroundColor: "red"
}
}],
a11y: {
config: {
rules: [{
id: "label-content",
enabled: true
}]
}
}
},
argTypes: {
shape: {
control: "radio",
options: _InputDate2.KWIKUI_INPUT_DATE__SHAPE__OPTIONS,
description: "The shape of the input field",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _InputDate3.KWIKUI_INPUT_DATE__DEFAULTS.shape
}
}
},
size: {
control: "radio",
options: _InputDate2.KWIKUI_INPUT_DATE__SIZE__OPTIONS,
description: "The size of the input field",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _InputDate3.KWIKUI_INPUT_DATE__DEFAULTS.size
}
}
},
updateOn: {
control: "radio",
options: _InputDate2.KWIKUI_INPUT_DATE__UPDATE_ON__OPTIONS,
description: "When to trigger the input event",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _InputDate3.KWIKUI_INPUT_DATE__DEFAULTS.updateOn
}
}
},
value: {
control: "text",
description: "The current value of the date input",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _InputDate3.KWIKUI_INPUT_DATE__DEFAULTS.value
}
}
},
label: {
control: "text",
description: "Label text for the input field",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _InputDate3.KWIKUI_INPUT_DATE__DEFAULTS.label
}
}
},
placeholder: {
control: "text",
description: "Placeholder text for the input field",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _InputDate3.KWIKUI_INPUT_DATE__DEFAULTS.placeholder
}
}
},
minDate: {
control: "date",
description: "Minimum allowed date",
table: {
type: {
summary: "Date | string"
}
}
},
maxDate: {
control: "date",
description: "Maximum allowed date",
table: {
type: {
summary: "Date | string"
}
}
},
disabled: {
control: "boolean",
description: "Whether the input field is disabled",
table: {
type: {
summary: "boolean"
},
defaultValue: {
summary: _InputDate3.KWIKUI_INPUT_DATE__DEFAULTS.disabled
}
}
},
required: {
control: "boolean",
description: "Whether the input field is required",
table: {
type: {
summary: "boolean"
},
defaultValue: {
summary: _InputDate3.KWIKUI_INPUT_DATE__DEFAULTS.required
}
}
},
prefix: {
description: "Content to display before the input field",
table: {
type: {
summary: "ReactNode"
}
}
},
postfix: {
description: "Content to display after the input field",
table: {
type: {
summary: "ReactNode"
}
}
},
id: {
control: "text",
description: "The ID of the input field",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _InputDate3.KWIKUI_INPUT_DATE__DEFAULTS.id
}
}
},
customStyles: {
control: "object",
description: "Custom styles to apply to different parts of the component",
table: {
type: {
summary: "object"
},
defaultValue: {
summary: "{ wrapper: {}, container: {}, label: {}, input: {} }"
}
}
},
messages: {
description: "Array of message objects to display (error, info, etc.)",
table: {
type: {
summary: "Array<IKwikUIMessage>"
},
defaultValue: {
summary: "[]"
}
}
},
onInput: {
description: "Function called when input value changes",
table: {
type: {
summary: "(id: string, value: any) => void"
}
}
},
onInputValidate: {
description: "Function to validate input value",
table: {
type: {
summary: "(id: string, value: any) => { isValid: boolean } | undefined | null"
}
}
}
}
};
/**
* Utility component to display deprecation warning
*/
const DeprecationBanner = () => /*#__PURE__*/_react.default.createElement("div", {
style: {
backgroundColor: "#fff3f3",
border: "2px solid #ff5252",
borderRadius: "4px",
padding: "16px",
marginBottom: "24px",
color: "#d32f2f"
}
}, /*#__PURE__*/_react.default.createElement("h3", {
style: {
margin: "0 0 8px 0"
}
}, "\u26A0\uFE0F DEPRECATED COMPONENT"), /*#__PURE__*/_react.default.createElement("p", {
style: {
margin: "0"
}
}, "The Date Input component is deprecated and will be removed in a future version. Please use the ", /*#__PURE__*/_react.default.createElement("strong", null, "DateTime"), " component with", " ", /*#__PURE__*/_react.default.createElement("code", null, "variant=\"date\""), " instead."));
/**
* Template for rendering the InputDate component
*/
const Template = _ref => {
let {
value,
onInput,
onInputValidate
} = _ref,
args = _objectWithoutProperties(_ref, _excluded);
const [localValue, setValue] = _react.default.useState(value || "");
const onChangeInput = (id, value) => {
setValue(value);
};
const onChangeInputValidate = (id, value) => {
if (value && new Date(value).toString() !== "Invalid Date") {
return {
isValid: true
};
}
return {
isValid: false
};
};
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(DeprecationBanner, null), /*#__PURE__*/_react.default.createElement(_InputDate.default, _extends({}, args, {
onInput: onChangeInput,
onInputValidate: onChangeInputValidate,
value: localValue
})));
};
/**
* Default date input implementation
*/
const Default = exports.Default = Template.bind({});
Default.args = _objectSpread(_objectSpread({}, _InputDate3.KWIKUI_INPUT_DATE__DEFAULTS), {}, {
label: "Select Date",
placeholder: "MM/DD/YYYY"
});
Default.parameters = {
docs: {
description: {
story: "Default date input with standard styling and behavior. This component is deprecated - please use DateTime component instead."
}
}
};
/**
* Date input with different shapes
*/
const Shapes = () => {
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(DeprecationBanner, null), /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
flexDirection: "column",
gap: "2rem"
}
}, /*#__PURE__*/_react.default.createElement(_InputDate.default, {
id: "date-curved",
label: "Curved Shape",
shape: "curved",
placeholder: "MM/DD/YYYY"
}), /*#__PURE__*/_react.default.createElement(_InputDate.default, {
id: "date-rectangle",
label: "Rectangle Shape",
shape: "rectangle",
placeholder: "MM/DD/YYYY"
}), /*#__PURE__*/_react.default.createElement(_InputDate.default, {
id: "date-rounded",
label: "Rounded Shape",
shape: "rounded",
placeholder: "MM/DD/YYYY"
})));
};
exports.Shapes = Shapes;
Shapes.parameters = {
docs: {
description: {
story: "Date input with different shape styles: curved, rectangle, and rounded. This component is deprecated - please use DateTime component instead."
}
}
};
/**
* Date input with different sizes
*/
const Sizes = () => {
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(DeprecationBanner, null), /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
flexDirection: "column",
gap: "2rem"
}
}, /*#__PURE__*/_react.default.createElement(_InputDate.default, {
id: "date-s",
label: "Small Size",
size: "s",
placeholder: "MM/DD/YYYY"
}), /*#__PURE__*/_react.default.createElement(_InputDate.default, {
id: "date-m",
label: "Medium Size (Default)",
size: "m",
placeholder: "MM/DD/YYYY"
}), /*#__PURE__*/_react.default.createElement(_InputDate.default, {
id: "date-l",
label: "Large Size",
size: "l",
placeholder: "MM/DD/YYYY"
})));
};
exports.Sizes = Sizes;
Sizes.parameters = {
docs: {
description: {
story: "Date input in different sizes to fit various UI contexts. This component is deprecated - please use DateTime component instead."
}
}
};
/**
* Date input with min/max date constraints
*/
const DateConstraints = () => {
const minDate = new Date();
const maxDate = new Date();
maxDate.setDate(maxDate.getDate() + 30); // 30 days from now
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(DeprecationBanner, null), /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
flexDirection: "column",
gap: "2rem"
}
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "This date input only allows selecting dates between today (", minDate.toLocaleDateString(), ") and 30 days from now (", maxDate.toLocaleDateString(), ")."), /*#__PURE__*/_react.default.createElement(_InputDate.default, {
id: "date-constraints",
label: "Select a date (limited range)",
placeholder: "MM/DD/YYYY",
minDate: minDate,
maxDate: maxDate
}))));
};
exports.DateConstraints = DateConstraints;
DateConstraints.parameters = {
docs: {
description: {
story: "Date input with minimum and maximum date constraints. This component is deprecated - please use DateTime component instead."
},
controls: {
disable: true
}
}
};
/**
* Date input with validation
*/
const WithValidation = () => {
var _validateDate;
const [value, setValue] = _react.default.useState("");
const validateDate = (id, inputValue) => {
if (!inputValue) return null;
const date = new Date(inputValue);
const today = new Date();
today.setHours(0, 0, 0, 0);
if (date.toString() === "Invalid Date") {
return {
isValid: false
};
}
if (date < today) {
return {
isValid: false
};
}
return {
isValid: true
};
};
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(DeprecationBanner, null), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_InputDate.default, {
id: "date-validation",
label: "Future dates only",
placeholder: "MM/DD/YYYY",
value: value,
onInput: (id, inputValue) => setValue(inputValue),
onInputValidate: validateDate,
messages: value ? [(_validateDate = validateDate(null, value)) !== null && _validateDate !== void 0 && _validateDate.isValid ? {
type: "success",
message: "Valid future date selected!"
} : {
type: "error",
message: "Please select a future date."
}] : []
})));
};
exports.WithValidation = WithValidation;
WithValidation.parameters = {
docs: {
description: {
story: "Date input with custom validation to only allow future dates. This component is deprecated - please use DateTime component instead."
}
}
};
/**
* Disabled date input
*/
const Disabled = args => {
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(DeprecationBanner, null), /*#__PURE__*/_react.default.createElement(_InputDate.default, args));
};
exports.Disabled = Disabled;
Disabled.args = _objectSpread(_objectSpread({}, _InputDate3.KWIKUI_INPUT_DATE__DEFAULTS), {}, {
label: "Disabled Date Input",
placeholder: "MM/DD/YYYY",
disabled: true
});
Disabled.parameters = {
docs: {
description: {
story: "Date input in disabled state. This component is deprecated - please use DateTime component instead."
}
}
};
/**
* Date input with prefix and postfix
*/
const WithPrefixAndPostfix = () => {
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(DeprecationBanner, null), /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
flexDirection: "column",
gap: "2rem"
}
}, /*#__PURE__*/_react.default.createElement(_InputDate.default, {
id: "date-with-prefix",
label: "Date with Prefix",
placeholder: "MM/DD/YYYY",
prefix: /*#__PURE__*/_react.default.createElement("span", {
style: {
marginRight: "8px"
}
}, "\uD83D\uDCC5")
}), /*#__PURE__*/_react.default.createElement(_InputDate.default, {
id: "date-with-postfix",
label: "Date with Postfix",
placeholder: "MM/DD/YYYY",
postfix: /*#__PURE__*/_react.default.createElement("span", {
style: {
marginLeft: "8px"
}
}, "Select")
}), /*#__PURE__*/_react.default.createElement(_InputDate.default, {
id: "date-with-both",
label: "Date with Prefix and Postfix",
placeholder: "MM/DD/YYYY",
prefix: /*#__PURE__*/_react.default.createElement("span", {
style: {
marginRight: "8px"
}
}, "\uD83D\uDCC5"),
postfix: /*#__PURE__*/_react.default.createElement("span", {
style: {
marginLeft: "8px"
}
}, "Select")
})));
};
exports.WithPrefixAndPostfix = WithPrefixAndPostfix;
WithPrefixAndPostfix.parameters = {
docs: {
description: {
story: "Date input with prefix and postfix elements for enhanced UI. This component is deprecated - please use DateTime component instead."
}
}
};