kwikid-components-react
Version:
KwikID's Component Library in React
381 lines (369 loc) • 11 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.SmallSize = exports.SecondaryAppearance = exports.RoundedShape = exports.RectangleShape = exports.PrimaryAppearance = exports.OutlinedAppearance = exports.MediumSize = exports.LargeSize = exports.Interactive = exports.Default = exports.CurvedShape = void 0;
var _react = _interopRequireDefault(require("react"));
var _ProgressLine = _interopRequireDefault(require("./ProgressLine"));
var _ProgressLine2 = require("./ProgressLine.constants");
var _ProgressLine3 = require("./ProgressLine.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); }
/**
* The ProgressLine component provides a visual indicator of completion progress.
* It's useful for showing loading states, form completion, stepped processes, and more.
*
* ## Usage
*
* ```jsx
* import { KwikUIProgressLine } from 'react-kwikui';
*
* <KwikUIProgressLine
* value={75}
* max={100}
* appearance="primary"
* shape="rounded"
* size="m"
* />
* ```
*/
var _default = exports.default = {
title: "KwikUI/Feedback/ProgressLine",
component: _ProgressLine.default,
parameters: {
componentSubtitle: "Visual indicator for progress or completion",
docs: {
description: {
component: "The ProgressLine component displays a horizontal bar that represents progress toward completion."
}
},
a11y: {
config: {
rules: [{
id: "color-contrast",
enabled: true
}]
}
}
},
argTypes: {
appearance: {
control: "radio",
options: _ProgressLine2.KWIKUI_PROGRESS_LINE__APPEARANCE__OPTIONS,
description: "The visual style of the progress line",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _ProgressLine3.KWIKUI_PROGRESS_LINE__DEFAULTS.appearance
}
}
},
shape: {
control: "radio",
options: _ProgressLine2.KWIKUI_PROGRESS_LINE__SHAPE__OPTIONS,
description: "The shape of the progress line",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _ProgressLine3.KWIKUI_PROGRESS_LINE__DEFAULTS.shape
}
}
},
size: {
control: "radio",
options: _ProgressLine2.KWIKUI_PROGRESS_LINE__SIZE__OPTIONS,
description: "The size of the progress line",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _ProgressLine3.KWIKUI_PROGRESS_LINE__DEFAULTS.size
}
}
},
value: {
control: {
type: "number",
min: 0,
max: 100
},
description: "The current progress value",
table: {
type: {
summary: "number"
},
defaultValue: {
summary: _ProgressLine3.KWIKUI_PROGRESS_LINE__DEFAULTS.value
}
}
},
max: {
control: {
type: "number",
min: 1
},
description: "The maximum progress value",
table: {
type: {
summary: "number"
},
defaultValue: {
summary: _ProgressLine3.KWIKUI_PROGRESS_LINE__DEFAULTS.max
}
}
},
id: {
control: "text",
description: "Unique identifier for the progress line",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _ProgressLine3.KWIKUI_PROGRESS_LINE__DEFAULTS.id
}
}
}
}
};
/**
* Template for rendering the ProgressLine component
*/
const Template = args => {
return /*#__PURE__*/_react.default.createElement(_ProgressLine.default, args);
};
/**
* Default implementation of progress line
*/
const Default = exports.Default = Template.bind({});
Default.args = _objectSpread(_objectSpread({}, _ProgressLine3.KWIKUI_PROGRESS_LINE__DEFAULTS), {}, {
value: 50
});
Default.parameters = {
docs: {
description: {
story: "Default progress line showing 50% completion."
}
}
};
/**
* Progress line with primary appearance
*/
const PrimaryAppearance = exports.PrimaryAppearance = Template.bind({});
PrimaryAppearance.args = _objectSpread(_objectSpread({}, _ProgressLine3.KWIKUI_PROGRESS_LINE__DEFAULTS), {}, {
appearance: "primary",
value: 65
});
PrimaryAppearance.parameters = {
docs: {
description: {
story: "Progress line with primary visual style."
}
}
};
/**
* Progress line with secondary appearance
*/
const SecondaryAppearance = exports.SecondaryAppearance = Template.bind({});
SecondaryAppearance.args = _objectSpread(_objectSpread({}, _ProgressLine3.KWIKUI_PROGRESS_LINE__DEFAULTS), {}, {
appearance: "secondary",
value: 65
});
SecondaryAppearance.parameters = {
docs: {
description: {
story: "Progress line with secondary visual style."
}
}
};
/**
* Progress line with outlined appearance
*/
const OutlinedAppearance = exports.OutlinedAppearance = Template.bind({});
OutlinedAppearance.args = _objectSpread(_objectSpread({}, _ProgressLine3.KWIKUI_PROGRESS_LINE__DEFAULTS), {}, {
appearance: "outlined",
value: 65
});
OutlinedAppearance.parameters = {
docs: {
description: {
story: "Progress line with outlined visual style."
}
}
};
/**
* Progress line with curved shape
*/
const CurvedShape = exports.CurvedShape = Template.bind({});
CurvedShape.args = _objectSpread(_objectSpread({}, _ProgressLine3.KWIKUI_PROGRESS_LINE__DEFAULTS), {}, {
shape: "curved",
value: 75
});
CurvedShape.parameters = {
docs: {
description: {
story: "Progress line with curved edges."
}
}
};
/**
* Progress line with rectangle shape
*/
const RectangleShape = exports.RectangleShape = Template.bind({});
RectangleShape.args = _objectSpread(_objectSpread({}, _ProgressLine3.KWIKUI_PROGRESS_LINE__DEFAULTS), {}, {
shape: "rectangle",
value: 75
});
RectangleShape.parameters = {
docs: {
description: {
story: "Progress line with rectangular shape."
}
}
};
/**
* Progress line with rounded shape
*/
const RoundedShape = exports.RoundedShape = Template.bind({});
RoundedShape.args = _objectSpread(_objectSpread({}, _ProgressLine3.KWIKUI_PROGRESS_LINE__DEFAULTS), {}, {
shape: "rounded",
value: 75
});
RoundedShape.parameters = {
docs: {
description: {
story: "Progress line with rounded corners."
}
}
};
/**
* Progress line with small size
*/
const SmallSize = exports.SmallSize = Template.bind({});
SmallSize.args = _objectSpread(_objectSpread({}, _ProgressLine3.KWIKUI_PROGRESS_LINE__DEFAULTS), {}, {
size: "s",
value: 80
});
SmallSize.parameters = {
docs: {
description: {
story: "Small-sized progress line suitable for compact UI areas."
}
}
};
/**
* Progress line with medium size
*/
const MediumSize = exports.MediumSize = Template.bind({});
MediumSize.args = _objectSpread(_objectSpread({}, _ProgressLine3.KWIKUI_PROGRESS_LINE__DEFAULTS), {}, {
size: "m",
value: 80
});
MediumSize.parameters = {
docs: {
description: {
story: "Medium-sized progress line (default)."
}
}
};
/**
* Progress line with large size
*/
const LargeSize = exports.LargeSize = Template.bind({});
LargeSize.args = _objectSpread(_objectSpread({}, _ProgressLine3.KWIKUI_PROGRESS_LINE__DEFAULTS), {}, {
size: "l",
value: 80
});
LargeSize.parameters = {
docs: {
description: {
story: "Large-sized progress line for prominence."
}
}
};
/**
* Interactive progress line demonstration
*/
const Interactive = () => {
const [progress, setProgress] = _react.default.useState(25);
const handleIncrement = () => {
setProgress(prev => Math.min(prev + 10, 100));
};
const handleDecrement = () => {
setProgress(prev => Math.max(prev - 10, 0));
};
const handleReset = () => {
setProgress(0);
};
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
style: {
marginBottom: "1rem"
}
}, /*#__PURE__*/_react.default.createElement(_ProgressLine.default, {
value: progress,
max: 100,
appearance: "primary",
shape: "rounded",
size: "m"
}), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginTop: "0.5rem",
textAlign: "center"
}
}, progress, "%")), /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
gap: "1rem"
}
}, /*#__PURE__*/_react.default.createElement("button", {
onClick: handleDecrement,
style: {
padding: "0.5rem 1rem",
backgroundColor: "#f0f0f0",
border: "1px solid #ccc",
borderRadius: "4px",
cursor: "pointer"
},
type: "button"
}, "Decrease"), /*#__PURE__*/_react.default.createElement("button", {
onClick: handleIncrement,
style: {
padding: "0.5rem 1rem",
backgroundColor: "#f0f0f0",
border: "1px solid #ccc",
borderRadius: "4px",
cursor: "pointer"
},
type: "button"
}, "Increase"), /*#__PURE__*/_react.default.createElement("button", {
onClick: handleReset,
style: {
padding: "0.5rem 1rem",
backgroundColor: "#f0f0f0",
border: "1px solid #ccc",
borderRadius: "4px",
cursor: "pointer"
},
type: "button"
}, "Reset")));
};
exports.Interactive = Interactive;
Interactive.parameters = {
controls: {
disable: true
},
docs: {
description: {
story: "Interactive progress line demonstration with controls to adjust the progress value. This story uses local state and custom UI controls, so Storybook controls are intentionally disabled."
}
}
};