linear-react-components-ui 1.1.20-beta.2 → 1.1.20-beta.3

package/lib/assets/styles/wizard.scss

@@ -0,0 +1,122 @@
+@import "colors.scss";
+
+.wizard-dialog {
+  .wizard-wrapper {
+    .wizard-content {
+      display: flex !important;
+      flex-direction: column;
+      .wizard-progresbar {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        padding: 20px;
+        margin-bottom: 20px;
+        border-bottom: 2px solid $component-border-color;
+        gap: 10px;
+        overflow: hidden;
+        > .title {
+          font-size: 16px;
+          font-weight: 600;
+          display: flex;
+          align-items: center;
+          flex-direction: column;
+          position: relative;
+          flex: 1;
+          &:first-child {
+            .step {
+              align-self: flex-start;
+            }
+            .step-title {
+              align-self: flex-start;
+            }
+            &:before {
+              right: auto;
+              left: 45px;
+            }
+          }
+          &:last-child {
+            .step {
+              align-self: flex-end;
+            }
+            .step-title {
+              align-self: flex-end;
+            }
+            &:after {
+              left: auto;
+              right: 45px;
+            }
+          }
+          &::after, &::before {
+            content: "";
+            position: absolute;
+            height: 2px;
+            background-color: $component-border-color;
+            top: 18px;
+            width: calc(100% - 27px);
+            transition: all 0.2s ease-in-out;
+          }
+          &::after {
+            left: calc(50% + 18px);
+          }
+          &::before {
+            right: calc(50% + 18px);
+          }
+          &[data-completed="true"] {
+            &::after {
+              background-color: $success-color !important;
+            }
+            + .title::before {
+              background-color: $success-color !important;
+            }
+            &:first-child::before {
+              background-color: $success-color !important;
+            }
+            & + .title:after {
+              background-color: $success-color !important;
+            }
+            > .step {
+              > .number {
+                background-color: $success-color;
+                border-color: $success-color;
+              }
+            }
+          }
+          &[data-disabled="true"] .step {
+            opacity: 0.3;
+          }
+          > .step {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            width: 54px;
+            > .number {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-size: 20px;
+              font-weight: 600;
+              width: 36px;
+              height: 36px;
+              border-radius: 100%;
+              color: #fff;
+              background-color: $color-light-dark;
+              z-index: 1;
+              transition: all 0.2s ease-in-out;
+              border: 2px solid $color-light-dark;
+            }
+          }
+          > .step-title {
+            max-width: 150px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            text-wrap: nowrap;
+            margin-top: 6px;
+            font-weight: 500;
+            color: $font-color-soft;
+          }
+        }
+      }
+    }
+  }
+}

package/lib/dialog/base/Content.d.ts

@@ -4,6 +4,6 @@ import '../../@types/Align.js';
 import '../../@types/Icon.js';
 import '../../icons/helper.js';
 
-declare const Content: ({ children, styleForContent }: IContentProps) => JSX.Element;
+declare const Content: ({ children, styleForContent, className }: IContentProps) => JSX.Element;
 
 export { Content as default };

package/lib/dialog/base/Content.js

@@ -10,11 +10,12 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const Content = _ref => {
   let {
     children,
-    styleForContent
+    styleForContent,
+    className = ''
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
     id: "modal-dialog-content",
-    className: "dialog-content",
+    className: "dialog-content ".concat(className),
     style: styleForContent
   }, children);
 };

package/lib/dialog/base/index.js

@@ -21,7 +21,8 @@ const BaseDialog = props => {
     overlay = true,
     closeOnEsc,
     closeOnOutsideClick,
-    wrapperClassName,
+    wrapperClassName = '',
+    className = '',
     children,
     open: openProp,
     onOpenChange,
@@ -112,7 +113,7 @@ const BaseDialog = props => {
     className: "modal-overlay",
     "data-testid": "modal-overlay"
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "dialog",
+    className: "dialog ".concat(className),
     "data-testid": "dialog-component"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: wrapperClassName,

package/lib/dialog/form/index.js

@@ -29,7 +29,10 @@ const ModalForm = props => {
     width = '50%',
     height = '50%',
     content,
-    children
+    children,
+    className = '',
+    wrapperClassName = '',
+    contentClassName = ''
   } = props;
   const headerRef = (0, _react.useRef)(null);
   const context = (0, _react.useContext)(_withFormSecurity.FormSecurityContext);
@@ -56,7 +59,8 @@ const ModalForm = props => {
     width: width,
     height: height
   }, props, {
-    wrapperClassName: "dialog-form-wrapper"
+    wrapperClassName: "dialog-form-wrapper ".concat(wrapperClassName),
+    className: className
   }), props.title && /*#__PURE__*/_react.default.createElement("div", {
     className: "header-form"
   }, /*#__PURE__*/_react.default.createElement(_Header.default, {
@@ -64,7 +68,8 @@ const ModalForm = props => {
     handlerClose: props.handlerClose,
     icon: props.icon
   })), /*#__PURE__*/_react.default.createElement(_Content.default, {
-    styleForContent: _objectSpread(_objectSpread({}, props.styleForContent), overlayStyle)
+    styleForContent: _objectSpread(_objectSpread({}, props.styleForContent), overlayStyle),
+    className: contentClassName
   }, content || children), getSpinner(), showFooter && props.buttons && /*#__PURE__*/_react.default.createElement(_Footer.default, null, /*#__PURE__*/_react.default.createElement(_index.ButtonContainer, _extends({}, props, {
     style: _objectSpread({}, overlayStyle)
   }), _react.default.Children.toArray(props.buttons.map(button => {

package/lib/dialog/types.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, CSSProperties, ReactElement } from 'react';
+import { ReactNode, CSSProperties, ReactElement, Dispatch } from 'react';
 import { TextAlign } from '../@types/Align.js';
 import { IconNames } from '../@types/Icon.js';
 import '../icons/helper.js';
@@ -6,6 +6,7 @@ import '../icons/helper.js';
 interface IContentProps {
     children: ReactNode | ReactNode[];
     styleForContent?: CSSProperties;
+    className?: string;
 }
 interface IFooterProps {
     children: ReactElement | ReactElement[];
@@ -18,10 +19,11 @@ interface IHeaderProps {
     titleIcon?: IconNames;
 }
 interface IBaseProps {
-    wrapperClassName: string;
+    wrapperClassName?: string;
     width?: string;
     height?: string;
     children: ReactNode | ReactNode[];
+    className?: string;
     closeOnEsc?: boolean;
     closeOnOutsideClick?: boolean;
     overlay?: boolean;
@@ -31,7 +33,7 @@ interface IBaseProps {
     onOpenChange?: (open: boolean) => void;
     handlerClose?: () => void;
 }
-interface IFormProps extends Omit<IBaseProps, 'textAlign' | 'zIndex' | 'wrapperClassName'> {
+interface IFormProps extends Omit<IBaseProps, 'textAlign' | 'zIndex'> {
     buttons?: JSX.Element[];
     styleForContent?: CSSProperties;
     title?: string;
@@ -39,6 +41,7 @@ interface IFormProps extends Omit<IBaseProps, 'textAlign' | 'zIndex' | 'wrapperC
     isWaiting?: boolean;
     icon?: JSX.Element;
     content?: ReactNode;
+    contentClassName?: string;
 }
 interface ICommonDialogProps {
     onConfirmClick?: () => void;
@@ -66,5 +69,34 @@ interface ICustomProps {
 interface IFormDialogContext {
     headerRef?: React.RefObject<HTMLDivElement>;
 }
+interface WizardComponentProps extends Omit<IFormProps, 'content'> {
+    children: React.ReactNode;
+    buttons?: JSX.Element[];
+    showProgressbar?: boolean;
+    title?: string;
+    handlerClose?: () => void;
+    controls: Omit<UseWizardReturn, 'controls'>;
+}
+interface WizardStepComponentProps {
+    children: React.ReactNode;
+    title: string;
+    customClass?: string;
+    customStyle?: CSSProperties;
+}
+interface WizardControls extends Omit<UseWizardReturn, 'controls'> {
+}
+interface UseWizardReturn {
+    changeStep: (nextStep: number) => void;
+    nextStep: () => void;
+    hasNextStep: boolean;
+    previousStep: () => void;
+    hasPreviousStep: boolean;
+    steps: ReactNode[];
+    currentStep: ReactElement;
+    currentStepIndex: number;
+    totalSteps: number;
+    setSteps: Dispatch<React.SetStateAction<ReactNode[]>>;
+    controls: WizardControls;
+}
 
-export { IBaseProps, ICommonDialogProps, IContentProps, ICustomProps, IFooterProps, IFormDialogContext, IFormProps, IHeaderProps, IQuestionProps };
+export { IBaseProps, ICommonDialogProps, IContentProps, ICustomProps, IFooterProps, IFormDialogContext, IFormProps, IHeaderProps, IQuestionProps, UseWizardReturn, WizardComponentProps, WizardControls, WizardStepComponentProps };

package/lib/dialog/wizard/index.d.ts

@@ -0,0 +1,13 @@
+import React__default from 'react';
+import { WizardControls, WizardComponentProps } from '../types.js';
+export { WizardStep as Step } from './step.js';
+export { useWizard } from './useWizard.js';
+import '../../@types/Align.js';
+import '../../@types/Icon.js';
+import '../../icons/helper.js';
+
+declare const WizardContext: React__default.Context<WizardControls | null>;
+declare const useWizardContext: () => WizardControls | null;
+declare function Wizard({ children, controls, showProgressbar, ...dialogProps }: Readonly<WizardComponentProps>): JSX.Element;
+
+export { Wizard as Container, WizardContext, Wizard as default, useWizardContext };

package/lib/dialog/wizard/index.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = Wizard;
+Object.defineProperty(exports, "Step", {
+  enumerable: true,
+  get: function () {
+    return _step.WizardStep;
+  }
+});
+exports.default = exports.WizardContext = void 0;
+Object.defineProperty(exports, "useWizard", {
+  enumerable: true,
+  get: function () {
+    return _useWizard.useWizard;
+  }
+});
+exports.useWizardContext = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _form = _interopRequireDefault(require("../form/"));
+var _progressbar = require("./progressbar");
+require("../../assets/styles/wizard.scss");
+var _step = require("./step");
+var _useWizard = require("./useWizard");
+const _excluded = ["children", "controls", "showProgressbar"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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 s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(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 (e.includes(n)) continue; t[n] = r[n]; } return t; }
+const WizardContext = exports.WizardContext = /*#__PURE__*/_react.default.createContext(null);
+const useWizardContext = () => _react.default.useContext(WizardContext);
+exports.useWizardContext = useWizardContext;
+function Wizard(_ref) {
+  let {
+      children,
+      controls,
+      showProgressbar = true
+    } = _ref,
+    dialogProps = _objectWithoutProperties(_ref, _excluded);
+  const {
+    setSteps,
+    currentStep
+  } = controls;
+  if (!controls || _lodash.default.isEmpty(controls)) throw new Error('Wizard must be have controls by using useWizard hook or creating manually.');
+  const propSteps = _react.default.Children.toArray(children);
+  (0, _react.useEffect)(() => {
+    setSteps(propSteps);
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(WizardContext.Provider, {
+    value: controls
+  }, /*#__PURE__*/_react.default.createElement(_form.default, _extends({
+    className: "wizard-dialog",
+    wrapperClassName: "wizard-wrapper",
+    contentClassName: "wizard-content"
+  }, dialogProps), showProgressbar && /*#__PURE__*/_react.default.createElement(_progressbar.Progressbar, null), /*#__PURE__*/_react.default.createElement("div", {
+    className: "wizard-body"
+  }, currentStep)));
+}
+var _default = exports.default = Wizard;

package/lib/dialog/wizard/progressbar.d.ts

@@ -0,0 +1,8 @@
+import { CSSProperties } from 'react';
+
+declare function Progressbar({ customClass, customStyle }: Readonly<{
+    customClass?: string;
+    customStyle?: CSSProperties;
+}>): JSX.Element;
+
+export { Progressbar };

package/lib/dialog/wizard/progressbar.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Progressbar = Progressbar;
+var _react = _interopRequireDefault(require("react"));
+var _ = require(".");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function Progressbar(_ref) {
+  let {
+    customClass,
+    customStyle
+  } = _ref;
+  const context = (0, _.useWizardContext)();
+  if (!context) throw new Error('WizardProgressbar must be used within a Wizard component');
+  const {
+    steps,
+    currentStepIndex
+  } = context;
+  const stepsElements = _react.default.Children.toArray(steps);
+  const stepsTitle = stepsElements.map((step, index) => ({
+    title: step.props.title,
+    number: index + 1,
+    completed: index < currentStepIndex - 1 && index !== currentStepIndex
+  }));
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "wizard-progresbar ".concat(customClass),
+    style: customStyle
+  }, stepsTitle.map(step => /*#__PURE__*/_react.default.createElement("div", {
+    key: step.number,
+    className: "title",
+    "data-completed": step.completed,
+    "data-disabled": step.number > currentStepIndex
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "step"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "number"
+  }, step.number)), /*#__PURE__*/_react.default.createElement("span", {
+    className: "step-title"
+  }, step.title))));
+}

package/lib/dialog/wizard/step.d.ts

@@ -0,0 +1,9 @@
+import { WizardStepComponentProps } from '../types.js';
+import 'react';
+import '../../@types/Align.js';
+import '../../@types/Icon.js';
+import '../../icons/helper.js';
+
+declare function WizardStep({ children, customClass, customStyle }: Readonly<WizardStepComponentProps>): JSX.Element;
+
+export { WizardStep };

package/lib/dialog/wizard/step.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WizardStep = WizardStep;
+var _react = _interopRequireDefault(require("react"));
+var _ = require(".");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function WizardStep(_ref) {
+  let {
+    children,
+    customClass = '',
+    customStyle
+  } = _ref;
+  const context = (0, _.useWizardContext)();
+  if (!context) throw new Error('WizardStep must be used within a Wizard component');
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "wizard-step-component ".concat(customClass),
+    style: customStyle
+  }, children);
+}

package/lib/dialog/wizard/useWizard.d.ts

@@ -0,0 +1,9 @@
+import { UseWizardReturn } from '../types.js';
+import 'react';
+import '../../@types/Align.js';
+import '../../@types/Icon.js';
+import '../../icons/helper.js';
+
+declare const useWizard: () => UseWizardReturn;
+
+export { useWizard };

package/lib/dialog/wizard/useWizard.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useWizard = void 0;
+var _react = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useWizard = () => {
+  var _ref;
+  const [steps, setSteps] = (0, _react.useState)([]);
+  const totalSteps = steps.length;
+  const [step, setStep] = _react.default.useState(1);
+  const currentStep = (_ref = steps[step - 1]) !== null && _ref !== void 0 ? _ref : null;
+  const hasNextStep = step < totalSteps;
+  const hasPreviousStep = step > 1;
+  const changeStep = nextStep => {
+    setStep(state => state + nextStep);
+  };
+  const nextStep = () => {
+    if (hasNextStep) {
+      changeStep(1);
+    }
+  };
+  const previousStep = () => {
+    if (hasPreviousStep) {
+      changeStep(-1);
+    }
+  };
+  return {
+    changeStep,
+    nextStep,
+    hasNextStep,
+    previousStep,
+    hasPreviousStep,
+    steps,
+    currentStep,
+    currentStepIndex: step,
+    setSteps,
+    totalSteps,
+    controls: {
+      changeStep,
+      nextStep,
+      hasNextStep,
+      previousStep,
+      hasPreviousStep,
+      steps,
+      currentStep,
+      currentStepIndex: step,
+      setSteps,
+      totalSteps
+    }
+  };
+};
+exports.useWizard = useWizard;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linear-react-components-ui",
-  "version": "1.1.20-beta.2",
+  "version": "1.1.20-beta.3",
   "description": "Linear Sistemas ReactJs Components",
   "main": "lib/index.js",
   "module": "lib/index.cjs",