oa-componentbook 0.0.0-sit1.1

package/build/components/oa-component-popover/CustomPopover.js

@@ -0,0 +1,58 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _antd = require("antd");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+const _excluded = ["children", "content", "onContentClick"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+/**
+ * A Popover component that wraps its content in a span with a click event.
+ * This is useful for handling clicks on the content of the popover.
+ *
+ * @param {React.ReactNode} children - The element that triggers the popover.
+ * @param {React.ReactNode} content - The content of the popover.
+ * @param {Function} onContentClick - The function that is called when the content is clicked.
+ * @param {Object} props - Any other props that can be passed to the Popover component.
+ */
+function CustomPopover(_ref) {
+  let {
+      children,
+      content,
+      onContentClick
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  // Wrap content to handle clicks
+  const enhancedContent = _react.default.Children.map(content, child => {
+    /*#__PURE__*/_react.default.cloneElement(child, {
+      onClick: onContentClick
+    });
+  });
+  return /*#__PURE__*/_react.default.createElement(_antd.Popover, _extends({
+    content: enhancedContent
+  }, props), children);
+}
+
+// Define prop types for CustomPopover
+CustomPopover.propTypes = {
+  children: _propTypes.default.node,
+  content: _propTypes.default.node,
+  onContentClick: _propTypes.default.func
+};
+
+// Define default props for CustomPopover
+CustomPopover.defaultProps = {
+  children: /*#__PURE__*/_react.default.createElement("span", null, "No content"),
+  // Default children if none are provided
+  content: 'Default content',
+  // Default content for the popover
+  onContentClick: () => {}
+};
+var _default = exports.default = CustomPopover;

package/build/components/oa-component-progress-bar/CustomProgressBar.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _antd = require("antd");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
+var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
+var _styles = require("./styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * Displays a progress bar indicating the current step out of the total steps.
+ *
+ * @param {number} currentStep - The current step number being displayed.
+ * @param {number} totalStep - The total number of steps in the progress.
+ * @param {string} headingColor - The color used for the step text heading.
+ * @param {string} barColor - The color used for the progress bar.
+ *
+ * @returns {React.ReactElement} A component displaying the current progress.
+ */
+function ProgressBar(_ref) {
+  let {
+    currentStep,
+    totalStep,
+    headingColor,
+    barColor
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "margin-bottom-8"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: headingColor,
+    typography: "type-b2-400"
+  }, "Step", ' ', currentStep, ' ', "out of", ' ', totalStep)), /*#__PURE__*/_react.default.createElement(_styles.StyleContainer, null, /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    theme: {
+      token: {
+        colorSuccess: _ColorVariablesMap.default["--color-".concat(barColor)]
+      },
+      components: {
+        Progress: {
+          defaultColor: _ColorVariablesMap.default["--color-".concat(barColor)],
+          remainingColor: _ColorVariablesMap.default['--color-divider']
+        }
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Flex, {
+    gap: "small",
+    vertical: true
+  }, /*#__PURE__*/_react.default.createElement(_antd.Progress, {
+    percent: currentStep / totalStep * 100,
+    showInfo: false
+  })))));
+}
+ProgressBar.propTypes = {
+  currentStep: _propTypes.default.number,
+  totalStep: _propTypes.default.number,
+  headingColor: _propTypes.default.string,
+  barColor: _propTypes.default.string
+};
+ProgressBar.defaultProps = {
+  currentStep: 1,
+  totalStep: 1,
+  headingColor: 'positive',
+  barColor: 'positive'
+};
+var _default = exports.default = ProgressBar;

package/build/components/oa-component-progress-bar/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StyleContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var _default = exports.default = {};
+const StyleContainer = exports.StyleContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-progress-line { margin-inline-end: 0; margin-bottom: 0;}\n.ant-progress .ant-progress-bg {height:4px !important;}\n.ant-progress {line-height:0; height:4px}\n.ant-progress .ant-progress-outer { height:4px !important;}\n"])));

package/build/components/oa-component-radio/CustomRadio.js

@@ -0,0 +1,112 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getRadioTheme = exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _styles = require("./styles");
+var _utils = require("../../utils");
+var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
+const _excluded = ["label", "smallText", "data-test", "onChange", "size", "value"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+/**
+ * Returns the theme configuration for a custom radio component.
+ *
+ * The theme includes the following properties:
+ * - token: An object containing theme-specific tokens.
+ *   - colorPrimary: The primary color of the radio component.
+ *   - colorBorder: The color of the radio component's border.
+ *   - colorTextDisabled: The color of the text when the radio component is disabled.
+ *   - colorText: The color of the text for the radio component.
+ * - components: An object containing component-specific properties.
+ *   - Radio: The configuration for the radio component.
+ *     - wrapperMarginInlineEnd: The margin applied to the end of the radio wrapper.
+ */
+const getRadioTheme = () => ({
+  token: {
+    colorPrimary: _ColorVariablesMap.default['--color-primary'],
+    // color-primary
+    // colorPrimaryHover: 'orange',
+    // colorPrimaryActive: 'red',
+    // colorPrimaryBorder: 'green',
+
+    colorBorder: _ColorVariablesMap.default['--color-secondary-content'],
+    // color-primary
+    colorTextDisabled: _ColorVariablesMap.default['--color-disabled-button'],
+    // color-disabled-button
+    colorText: _ColorVariablesMap.default['--color-primary-content'] // color-primary-content
+  },
+  components: {
+    Radio: {
+      wrapperMarginInlineEnd: 12
+    }
+  }
+});
+exports.getRadioTheme = getRadioTheme;
+function CustomRadio(_ref) {
+  let {
+      label,
+      smallText,
+      'data-test': dataTest,
+      onChange,
+      size,
+      value
+      /*
+      Instead of keeping a `checked` prop explicitly,
+      we keep it optional by directly passing extra props to the antd component.
+       So, if required, the `checked` prop can be supplied to the component.
+      */
+    } = _ref,
+    antDesignProps = _objectWithoutProperties(_ref, _excluded);
+  const handleChange = event => {
+    // Call to `onChange` callback received from props.
+    onChange(event);
+  };
+  return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    theme: getRadioTheme()
+  }, /*#__PURE__*/_react.default.createElement(_styles.RadioContainer, null, /*#__PURE__*/_react.default.createElement(_antd.Radio, _extends({
+    onChange: handleChange,
+    value: value,
+    "data-test": dataTest
+  }, antDesignProps), ((0, _utils.isString)(label) || (0, _utils.isNumber)(label)) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", {
+    className: size === 'large' ? 'type-b1-400' : 'type-b2-400',
+    style: {
+      // paddingLeft: '12px'
+    }
+  }, label), smallText && /*#__PURE__*/_react.default.createElement("small", {
+    className: size === 'large' ? 'type-b2-400' : 'type-b2-400'
+  }, smallText)) || /*#__PURE__*/_react.default.isValidElement(label) && label || undefined)));
+}
+function CustomRadioGroup(props) {
+  return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    theme: getRadioTheme()
+  }, /*#__PURE__*/_react.default.createElement(_antd.Radio.Group, props));
+}
+
+// This allows us referencing the Group container and Button component in our Checkbox component
+CustomRadio.Group = CustomRadioGroup;
+CustomRadio.Button = CustomRadio;
+CustomRadio.propTypes = {
+  'data-test': _propTypes.default.string,
+  label: _propTypes.default.node,
+  smallText: _propTypes.default.node,
+  onChange: _propTypes.default.func,
+  size: _propTypes.default.oneOf(['large', 'small']),
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool])
+};
+CustomRadio.defaultProps = {
+  'data-test': null,
+  label: null,
+  onChange: value => {},
+  size: 'small',
+  value: '',
+  smallText: ''
+};
+var _default = exports.default = CustomRadio;

package/build/components/oa-component-radio/styles.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RadioContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _antd = require("antd");
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var _default = exports.default = {};
+const RadioContainer = exports.RadioContainer = _styledComponents.default.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n/* .ant-radio-wrapper span.ant-radio+*{\n  padding-inline-start: 12px;\n} */\n\n\n.ant-radio-wrapper .ant-radio {\n  align-self: start;\n  margin: 2px 0 0 0;\n}\n\n\n\n\n.ant-radio-wrapper{\n  line-height: 0;\n}\nsmall{\n  position: relative;\n  top: 10px;\n  line-height: 0;\n  color: var(--color-secondary-content);\n  font-size: 14px;\n  font-weight: 400;\n}\n.ant-radio-wrapper-disabled small{\n  color: #BFBFBF;\n}\n"])));

package/build/components/oa-component-rating/CustomRating.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _antd = require("antd");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function CustomRating(props) {
+  return /*#__PURE__*/_react.default.createElement(_antd.Rate, props);
+}
+var _default = exports.default = CustomRating;