@carbon/ibm-security
Version:
Carbon for Cloud & Cognitive IBM Security UI components
663 lines (662 loc) • 25.2 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
var _excluded = ["type"],
_excluded2 = ["state", "dispatch"],
_excluded3 = ["initState"];
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; }
import _regeneratorRuntime from "@babel/runtime/regenerator";
/**
* @file Wizard stories.
* @copyright IBM Security 2019 - 2021
*/
import { action } from '@storybook/addon-actions';
import { object, boolean, select } from '@storybook/addon-knobs';
import { storiesOf } from '@storybook/react';
import { settings } from 'carbon-components';
import React from 'react';
import 'prismjs';
import 'prismjs/components/prism-jsx';
import { withReducer } from 'recompose';
import { patterns } from '../../../.storybook';
import Button from '../Button';
import Checkbox from '../Checkbox';
import FormGroup from '../FormGroup';
import RadioButton from '../RadioButton';
import RadioButtonGroup from '../RadioButtonGroup';
import TextInput from '../TextInput';
import WizardComponent from './Wizard';
import WizardStep from './WizardStep';
import { InlineNotification, NotificationActionButton } from '../../';
import { Grid } from 'carbon-components-react';
var prefix = settings.prefix;
var focusTrap = boolean('focusTrap', false);
var sleep = /*#__PURE__*/function () {
var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(ms) {
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
return _context.abrupt("return", new Promise(function (resolve) {
return setTimeout(resolve, ms);
}));
case 1:
case "end":
return _context.stop();
}
}, _callee);
}));
return function sleep(_x) {
return _ref.apply(this, arguments);
};
}();
var labels = {
WIZARD_MODAL_HEADING: 'Unsaved Changes',
WIZARD_MODAL_BODY: 'Discard unsaved changes?',
WIZARD_MODAL_PRIMARY_BUTTON: 'Discard',
WIZARD_MODAL_SECONDARY_BUTTON: 'Cancel',
WIZARD_FINISH_BUTTON: 'Finish',
WIZARD_NEXT_BUTTON: 'Next',
WIZARD_SAVE_BUTTON: 'Save',
WIZARD_CANCEL_BUTTON: 'Cancel',
WIZARD_BACK_BUTTON: 'Back',
WIZARD_REVERT_BUTTON: 'Revert',
WIZARD_CLOSE_BUTTON: 'Close',
WIZARD_TEARSHEET_DELETE_BUTTON: 'Delete connection'
};
var steps = [{
title: 'First Step that is very long will be truncated at 3 lines if the viewport size is small enough.',
renderMain: function renderMain(state, setState) {
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
style: {
fontSize: 'normal'
}
}, "Please fill out the form."), /*#__PURE__*/React.createElement("section", null, /*#__PURE__*/React.createElement(TextInput, {
id: "input1",
labelText: "Name",
value: state.input1Value,
onChange: function onChange(_ref2) {
var target = _ref2.target;
return setState({
input1Value: target.value
});
}
})));
},
next: function () {
var _next = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(state) {
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
return _context2.abrupt("return", sleep(1000).then(function () {
return action('next')(state);
}));
case 1:
case "end":
return _context2.stop();
}
}, _callee2);
}));
function next(_x2) {
return _next.apply(this, arguments);
}
return next;
}(),
validate: function validate(_ref3) {
var _ref3$input1Value = _ref3.input1Value,
input1Value = _ref3$input1Value === void 0 ? '' : _ref3$input1Value;
return input1Value.trim().length >= 3;
}
}, {
title: 'Second Step',
renderMain: function renderMain(_ref4, setState) {
var input1Value = _ref4.input1Value,
_ref4$checkboxValue = _ref4.checkboxValue,
checkboxValue = _ref4$checkboxValue === void 0 ? false : _ref4$checkboxValue;
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
style: {
fontWeight: 200,
fontSize: 'normal'
}
}, "Hi ", input1Value, "."), /*#__PURE__*/React.createElement("section", null, /*#__PURE__*/React.createElement("p", {
style: {
fontWeight: 200,
fontSize: 'normal',
color: 'grey'
}
}, "Is your name correct?", ' '), /*#__PURE__*/React.createElement(Checkbox, {
id: "name-checkbox",
labelText: "My name is correct.",
checked: checkboxValue,
onChange: function onChange(checked) {
return setState({
checkboxValue: checked
});
}
})));
},
next: function () {
var _next2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(state) {
return _regeneratorRuntime.wrap(function _callee3$(_context3) {
while (1) switch (_context3.prev = _context3.next) {
case 0:
return _context3.abrupt("return", sleep(1000).then(function () {
return action('next_done')(state);
}));
case 1:
case "end":
return _context3.stop();
}
}, _callee3);
}));
function next(_x3) {
return _next2.apply(this, arguments);
}
return next;
}(),
validate: function validate(_ref5) {
var _ref5$checkboxValue = _ref5.checkboxValue,
checkboxValue = _ref5$checkboxValue === void 0 ? false : _ref5$checkboxValue;
return checkboxValue;
}
}];
var editableSteps = [{
title: 'Configure connection',
renderMain: function renderMain(state, setState) {
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
style: {
fontSize: 'normal'
}
}, "Please fill out the form."), /*#__PURE__*/React.createElement("section", null, /*#__PURE__*/React.createElement(TextInput, {
id: "input1",
labelText: "Name",
value: state.input1Value,
onChange: function onChange(_ref6) {
var target = _ref6.target;
return setState({
input1Value: target.value
});
}
})));
},
next: function () {
var _next3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(state) {
return _regeneratorRuntime.wrap(function _callee4$(_context4) {
while (1) switch (_context4.prev = _context4.next) {
case 0:
return _context4.abrupt("return", sleep(1000).then(function () {
return action('Save')(state);
}));
case 1:
case "end":
return _context4.stop();
}
}, _callee4);
}));
function next(_x4) {
return _next3.apply(this, arguments);
}
return next;
}(),
validate: function validate(_ref7) {
var _ref7$input1Value = _ref7.input1Value,
input1Value = _ref7$input1Value === void 0 ? '' : _ref7$input1Value;
return input1Value.trim().length >= 3;
}
}, {
title: 'Attribute mapping',
renderMain: function renderMain(_ref8, setState) {
var input1Value = _ref8.input1Value,
_ref8$checkboxValue = _ref8.checkboxValue,
checkboxValue = _ref8$checkboxValue === void 0 ? false : _ref8$checkboxValue;
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
style: {
fontWeight: 200,
fontSize: 'normal'
}
}, "Hi ", input1Value, "."), /*#__PURE__*/React.createElement("section", null, /*#__PURE__*/React.createElement("p", {
style: {
fontWeight: 200,
fontSize: 'normal',
color: 'grey'
}
}, "Is your name correct?", ' '), /*#__PURE__*/React.createElement(Checkbox, {
id: "name-checkbox",
labelText: "My name is correct.",
checked: checkboxValue,
onChange: function onChange(checked) {
return setState({
checkboxValue: checked
});
}
})));
},
validate: function validate(_ref9) {
var _ref9$checkboxValue = _ref9.checkboxValue,
checkboxValue = _ref9$checkboxValue === void 0 ? false : _ref9$checkboxValue;
return checkboxValue;
},
next: function () {
var _next4 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5(state) {
return _regeneratorRuntime.wrap(function _callee5$(_context5) {
while (1) switch (_context5.prev = _context5.next) {
case 0:
return _context5.abrupt("return", sleep(10000).then(function () {
return action('Save')(state);
}));
case 1:
case "end":
return _context5.stop();
}
}, _callee5);
}));
function next(_x5) {
return _next4.apply(this, arguments);
}
return next;
}()
}];
var reducers = {
TOGGLE_OPEN: function TOGGLE_OPEN(state) {
return _objectSpread(_objectSpread({}, state), {}, {
isOpen: !state.isOpen
});
},
UPDATE_INIT_STATE: function UPDATE_INIT_STATE(state) {
var _ref10 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
_ref10$initState = _ref10.initState,
initState = _ref10$initState === void 0 ? {} : _ref10$initState;
return _objectSpread(_objectSpread({}, state), {}, {
initState: initState
});
},
DEFAULT: function DEFAULT() {
var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
return state;
}
};
var reduceState = function reduceState() {
var reducers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
DEFAULT: function DEFAULT() {
var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
return state;
}
};
return function () {
var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _ref11 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
type = _ref11.type,
otherState = _objectWithoutProperties(_ref11, _excluded);
return (reducers[type] || reducers.DEFAULT)(state, _objectSpread({
type: type
}, otherState));
};
};
var enhanceWithState = function enhanceWithState() {
var initState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
return withReducer('state', 'dispatch', reduceState(reducers), {
isOpen: false,
initState: initState
});
};
function WizardWrapper(_ref12) {
var state = _ref12.state,
dispatch = _ref12.dispatch,
otherProps = _objectWithoutProperties(_ref12, _excluded2);
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
onClick: function onClick() {
return dispatch({
type: 'TOGGLE_OPEN'
}, function (_ref13) {
var isOpen = _ref13.isOpen;
return action('isOpen')(isOpen);
});
},
kind: state.isOpen ? 'secondary' : 'primary'
}, state.isOpen ? 'Close' : 'Open'), /*#__PURE__*/React.createElement(WizardComponent, _extends({}, otherProps, {
focusTrap: focusTrap,
initState: state.initState,
isOpen: state.isOpen,
onClose: function onClose(componentState) {
dispatch({
type: 'UPDATE_INIT_STATE',
initState: componentState
}, function (_ref14) {
var initState = _ref14.initState;
return action('onClose')(initState);
});
dispatch({
type: 'TOGGLE_OPEN'
});
},
loadingMessage: "Saving..."
})));
}
var markdown = function markdown() {
var useDefault = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
return "\n ~~~jsx\n /// ...\n /// Example use:\n render() {\n const {isOpen, wizardState = {}} = this.state;\n return (\n <div>\n <Button\n onClick={(_)=>this.setState(\n ({isOpen}) => ({isOpen: !isOpen})\n )}\n >\n {this.state.isOpen ? 'Close' : 'Open'}\n </Button>\n\n <Wizard\n title=\"Example\"\n subTitle=\"Example Wizard\"\n isOpen={(wizardState) => this.setState({isOpen: true})}\n onClose={(wizardState) => this.setState({wizardState, isOpen: false})}\n initState={wizardState} ".concat(useDefault ? "\n isOpen={isOpen}" : '', "\n onDelete={/*passing a onDelete handler will enable edit mode*/}\n >\n <WizardStep\n title=\"First Step\"\n renderMain={(state, setState) => (<div><p>....</p>...</div>)}\n next={async state => state}\n validate={({ input1Value = '' }) => input1Value.trim().length >= 3}\n />\n <WizardStep\n title=\"2nd Step\"\n renderMain={(state, setState) => (<div><p>....</p>...</div>)}\n validate={({ checkboxValue = false }) => checkboxValue}\n next={async state => state}\n />\n </Wizard>\n </div>\n );\n }\n ///...\n ~~~\n ");
};
storiesOf(patterns('Wizard#legacy'), module).addDecorator(function (Story) {
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InlineNotification, {
className: "page-layouts__banner",
actions: /*#__PURE__*/React.createElement(NotificationActionButton, {
href: "https://v1-ibm-products.carbondesignsystem.com/?path=/story/ibm-products-components-tearsheet-tearsheet--tearsheet",
rel: "noopener noreferrer",
target: "_blank"
}, "View replacement"),
kind: "info",
subtitle: "Pattern no longer supported. The pattern will remain available, but plan to migrate to the pattern replacement.",
title: "",
hideCloseButton: true
}), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Story, null)));
}).add('default', function () {
WizardComponent.displayName = 'Wizard';
WizardComponent.__docgenInfo = _objectSpread(_objectSpread({}, WizardComponent.__docgenInfo), {}, {
props: _objectSpread(_objectSpread({}, WizardComponent.__docgenInfo.props), {}, {
rootNode: _objectSpread(_objectSpread({}, WizardComponent.__docgenInfo.props.rootNode), {}, {
defaultValue: {
value: 'document.body',
computed: true
}
}),
steps: _objectSpread(_objectSpread({}, WizardComponent.__docgenInfo.props.steps), {}, {
type: {
name: 'array'
}
})
})
});
return /*#__PURE__*/React.createElement("div", {
style: {
zIndex: 'unset',
position: 'relative'
}
}, /*#__PURE__*/React.createElement("h1", {
style: {
fontWeight: 'lighter',
marginTop: '1rem',
marginLeft: '1.5rem'
}
}, "See Knobs"), /*#__PURE__*/React.createElement(WizardComponent, {
focusTrap: focusTrap,
title: "Example",
subTitle: "5 mins setup",
initState: object('initState', {}),
isOpen: boolean('isOpen', true),
onClose: action('onClose'),
onDelete: boolean('editMode', false) ? function (componentState) {
return new Promise(function (resolve) {
action('onDelete')(componentState);
setTimeout(function () {
resolve();
}, 3000);
});
} : undefined,
labels: labels
}, /*#__PURE__*/React.createElement(WizardStep, steps[0]), /*#__PURE__*/React.createElement(WizardStep, steps[1])));
}, {
info: {
text: "## Default use of the Wizard Component\n ".concat(markdown(true), "\n ")
}
}).add('dynamic', function () {
WizardComponent.displayName = 'Wizard';
WizardComponent.__docgenInfo = _objectSpread(_objectSpread({}, WizardComponent.__docgenInfo), {}, {
props: _objectSpread(_objectSpread({}, WizardComponent.__docgenInfo.props), {}, {
rootNode: _objectSpread(_objectSpread({}, WizardComponent.__docgenInfo.props.rootNode), {}, {
defaultValue: {
value: 'document.body',
computed: true
}
}),
steps: _objectSpread(_objectSpread({}, WizardComponent.__docgenInfo.props.steps), {}, {
type: {
name: 'array'
}
})
})
});
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", {
style: {
fontWeight: 'lighter',
marginTop: '1rem',
marginLeft: '1.5rem'
}
}, "See Knobs"), /*#__PURE__*/React.createElement(WizardComponent, {
focusTrap: focusTrap,
title: "Example",
subTitle: "5 mins setup",
initState: object('initState', {
eggs: false,
oats: false,
salad: false,
soup: false
}),
isOpen: boolean('isOpen', true),
onClose: action('onClose'),
labels: labels,
loadingMessage: "Loading..."
}, /*#__PURE__*/React.createElement(WizardStep, {
title: "First Step",
renderMain: function renderMain(state, setState) {
return /*#__PURE__*/React.createElement(FormGroup, {
legendText: "Select type of meal"
}, /*#__PURE__*/React.createElement(RadioButtonGroup, {
onChange: function onChange(value) {
setState({
mealType: value
});
},
defaultSelected: state.mealType,
name: "radio-button-group",
legend: "Group Legend"
}, /*#__PURE__*/React.createElement(RadioButton, {
value: "breakfast",
labelText: "Breakfast",
id: "option-breakfast"
}), /*#__PURE__*/React.createElement(RadioButton, {
value: "lunch",
labelText: "Lunch",
id: "option-lunch"
}), /*#__PURE__*/React.createElement(RadioButton, {
value: "disabled",
labelText: "Dinner",
id: "option-dinner",
disabled: true
})));
},
next: (/*#__PURE__*/function () {
var _ref15 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee6(state) {
return _regeneratorRuntime.wrap(function _callee6$(_context6) {
while (1) switch (_context6.prev = _context6.next) {
case 0:
return _context6.abrupt("return", sleep(1000).then(function () {
return action('next')(state);
}));
case 1:
case "end":
return _context6.stop();
}
}, _callee6);
}));
return function (_x6) {
return _ref15.apply(this, arguments);
};
}()),
validate: function validate(_ref16) {
var mealType = _ref16.mealType;
return mealType !== undefined;
}
}), /*#__PURE__*/React.createElement(WizardStep, {
title: "Second Step",
renderMain: function renderMain(state, setState) {
var MEAL_MENU = {
breakfast: /*#__PURE__*/React.createElement("fieldset", {
className: "".concat(prefix, "--fieldset")
}, /*#__PURE__*/React.createElement("legend", {
className: "".concat(prefix, "--label")
}, "Select breakfast options"), /*#__PURE__*/React.createElement(Checkbox, {
id: "checkbox-eggs",
labelText: "Eggs",
checked: state.eggs,
onChange: function onChange(eggs) {
return setState({
eggs: eggs
});
}
}), /*#__PURE__*/React.createElement(Checkbox, {
id: "checkbox-oats",
labelText: "Oats",
checked: state.oats,
onChange: function onChange(oats) {
return setState({
oats: oats
});
}
})),
lunch: /*#__PURE__*/React.createElement("fieldset", {
className: "".concat(prefix, "--fieldset")
}, /*#__PURE__*/React.createElement("legend", {
className: "".concat(prefix, "--label")
}, "Select lunch options"), /*#__PURE__*/React.createElement(Checkbox, {
id: "checkbox-soup",
labelText: "Soup",
checked: state.soup,
onChange: function onChange(soup) {
return setState({
soup: soup
});
}
}), /*#__PURE__*/React.createElement(Checkbox, {
id: "checkbox-salad",
labelText: "Salad",
checked: state.salad,
onChange: function onChange(salad) {
return setState({
salad: salad
});
}
}))
};
return MEAL_MENU[state.mealType];
},
next: (/*#__PURE__*/function () {
var _ref17 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee7(state) {
return _regeneratorRuntime.wrap(function _callee7$(_context7) {
while (1) switch (_context7.prev = _context7.next) {
case 0:
return _context7.abrupt("return", sleep(1000).then(function () {
return action('next_done')(state);
}));
case 1:
case "end":
return _context7.stop();
}
}, _callee7);
}));
return function (_x7) {
return _ref17.apply(this, arguments);
};
}())
})));
}, {
info: {
text: "\n Dynamic content.\n "
}
}).add('With open/close button', function () {
var Wizard = enhanceWithState(object('initState', {}))(WizardWrapper);
Wizard.displayName = 'Wizard';
Wizard.__docgenInfo = _objectSpread(_objectSpread({}, WizardComponent.__docgenInfo), {}, {
props: _objectSpread(_objectSpread({}, WizardComponent.__docgenInfo.props), {}, {
steps: _objectSpread(_objectSpread({}, WizardComponent.__docgenInfo.props.steps), {}, {
type: {
name: 'array'
}
})
})
});
Wizard.defaultProps = WizardComponent.defaultProps;
return /*#__PURE__*/React.createElement(Wizard, {
title: "Title of setup",
subTitle: "5 mins setup",
labels: labels
}, steps.map(function (step) {
return /*#__PURE__*/React.createElement(WizardStep, _extends({
key: step.title
}, step));
}));
}, {
info: {
text: "## Wizard with open/close button\n ".concat(markdown(false), "\n ")
}
}).add('With editable wizard', function () {
var Wizard = function Wizard(_ref18) {
var initState = _ref18.initState,
props = _objectWithoutProperties(_ref18, _excluded3);
var _React$useState = React.useState(initState),
_React$useState2 = _slicedToArray(_React$useState, 1),
state = _React$useState2[0];
return /*#__PURE__*/React.createElement(WizardComponent, _extends({}, props, {
initState: state
}));
};
Wizard.displayName = 'Wizard';
Wizard.__docgenInfo = _objectSpread(_objectSpread({}, WizardComponent.__docgenInfo), {}, {
props: _objectSpread(_objectSpread({}, WizardComponent.__docgenInfo.props), {}, {
steps: _objectSpread(_objectSpread({}, WizardComponent.__docgenInfo.props.steps), {}, {
type: {
name: 'array'
}
})
})
});
Wizard.defaultProps = WizardComponent.defaultProps;
var selectFn = function selectFn(value) {
switch (value) {
case 'true':
{
return true;
}
case 'false':
{
return false;
}
default:
{
return undefined;
}
}
};
return /*#__PURE__*/React.createElement("div", {
style: {
zIndex: 'unset',
position: 'relative'
}
}, /*#__PURE__*/React.createElement(Wizard, {
initState: object('initState', {
input1Value: 'Placeholder text',
checkboxValue: false
}),
title: "Title of setup",
subTitle: "5 mins setup",
isSequential: selectFn(select('isSequential', ['true', 'false', 'unset'], 'unset')),
onDelete: boolean('deleteMode', true) ? function (componentState) {
return new Promise(function (resolve) {
action('onDelete')(componentState);
setTimeout(function () {
resolve();
}, 3000);
});
} : undefined,
labels: labels
}, editableSteps.map(function (step) {
return /*#__PURE__*/React.createElement(WizardStep, _extends({
key: step.title
}, step));
})));
}, {
info: {
text: "## Editable Wizard\n ".concat(markdown(false), "\n ")
}
});