techsbcn-storybook 0.12.1 → 0.12.2

package/dist/components/fields/ButtonComponent/ButtonComponent.d.ts

@@ -11,5 +11,6 @@ export interface ButtonComponentProps {
     type?: 'button' | 'submit' | 'reset';
     disabled?: boolean;
     component?: any;
+    reverseColors?: boolean;
 }
 export declare const ButtonComponent: React.FC<ButtonComponentProps>;

package/dist/components/fields/TextSimpleComponent/TextSimpleComponent.d.ts

@@ -10,6 +10,7 @@ interface TextSimpleComponentProps {
     helperText?: string;
     noBorders?: boolean;
     fullWidth?: boolean;
+    noMargin?: boolean;
 }
 export declare const TextSimpleComponent: React.FC<TextSimpleComponentProps>;
 export {};

package/dist/components/tables/SimpleTableComponent/SimpleTableComponent.d.ts

@@ -30,9 +30,10 @@ interface ColumnProps {
     isUnique?: boolean;
     isDate?: boolean;
     enumColumn?: {
-        isEnum?: boolean;
+        isEnum: boolean;
         enumType?: any;
         hasColor?: boolean;
+        enumSuffix?: string;
     };
     isCheck?: boolean;
     isPrice?: boolean;
@@ -49,6 +50,11 @@ interface ColumnProps {
         onClickId: (id: number) => void;
     };
     isEditableTableCell?: EditableCellProps;
+    isBoolean?: {
+        enumType?: any;
+        hasColor?: boolean;
+        enumSuffix?: string;
+    };
 }
 interface ActionProps {
     children: React.ReactNode;

package/dist/components/tables/TableComponent/TableComponent.d.ts

@@ -32,9 +32,10 @@ interface ColumnProps {
     isUnique?: boolean;
     isDate?: boolean;
     enumColumn?: {
-        isEnum?: boolean;
+        isEnum: boolean;
         enumType?: any;
         hasColor?: boolean;
+        enumSuffix?: string;
     };
     isCheck?: boolean;
     noSort?: boolean;
@@ -52,6 +53,11 @@ interface ColumnProps {
         onClickId: (id: number) => void;
     };
     isEditableTableCell?: EditableCellProps;
+    isBoolean?: {
+        enumType?: any;
+        hasColor?: boolean;
+        enumSuffix?: string;
+    };
 }
 interface ActionProps {
     children: React.ReactNode;

package/dist/data/UserList.d.ts

@@ -11,6 +11,7 @@ interface UserList {
     charge: number;
     topic: string;
     extraInfo?: BasicEntity;
+    active: boolean;
 }
 export declare const UserList: UserList[];
 export {};

package/dist/data/_globalization/es.d.ts

@@ -110,5 +110,12 @@ declare var _default: {
     image: string;
     skills: string;
     information: string;
+    enable: string;
+    disable: string;
+    enable_suffix: string;
+    disable_suffix: string;
+    boolean: string;
+    true_suffix: string;
+    false_suffix: string;
 };
 export default _default;

package/dist/data/enums/ActiveStatus.d.ts

@@ -0,0 +1,4 @@
+export declare enum ActiveStatus {
+    true = "ENABLE",
+    false = "DISABLE"
+}

package/dist/data/index.d.ts

@@ -2,3 +2,4 @@ export * from './SelectMock';
 export * from './UserList';
 export * from './Values';
 export * from './enums/scopes';
+export * from './enums/ActiveStatus';

package/dist/stories/button/Button.stories.d.ts

@@ -2,6 +2,8 @@ import { Meta, Story } from '@storybook/react';
 declare const meta: Meta;
 export default meta;
 export declare const Default: Story<import("@storybook/react").Args>;
+export declare const ReverseColor: Story<import("@storybook/react").Args>;
+export declare const ReverseColorLoading: Story<import("@storybook/react").Args>;
 export declare const LoginButton: Story<import("@storybook/react").Args>;
 export declare const ModalCancel: Story<import("@storybook/react").Args>;
 export declare const Loading: Story<import("@storybook/react").Args>;

package/dist/techsbcn-storybook.cjs.development.js

@@ -418,22 +418,39 @@ var TableComponent = function TableComponent(props) {
     var _column$enumColumn;
 
     if ((_column$enumColumn = column.enumColumn) != null && _column$enumColumn.isEnum) {
-      var _column$enumColumn2;
+      var _column$enumColumn2, _column$enumColumn9;
 
       if ((_column$enumColumn2 = column.enumColumn) != null && _column$enumColumn2.enumType) {
-        var _column$enumColumn4;
+        var _column$enumColumn5, _column$enumColumn8;
+
+        var result = [];
 
         if (value === null) {
           return value;
         } else if (value.split(',').length > 1) {
-          var result = [];
           value.split(',').forEach(function (v) {
             var _column$enumColumn3;
 
             result.push(props.values[(_column$enumColumn3 = column.enumColumn) == null ? void 0 : _column$enumColumn3.enumType[v.replace(/ /g, '')].toUpperCase()]);
           });
           return result.join();
-        } else return props.values[(_column$enumColumn4 = column.enumColumn) == null ? void 0 : _column$enumColumn4.enumType[value].toUpperCase()];
+        } else if (Array.isArray(value)) {
+          var split = value.toString().split(',');
+          split.forEach(function (v) {
+            var _column$enumColumn4;
+
+            if (!isNaN(parseInt(v))) result.push(props.values[(_column$enumColumn4 = column.enumColumn) == null ? void 0 : _column$enumColumn4.enumType[v.replace(/ /g, '')].toUpperCase()]);else result.push(props.values[v.toUpperCase()]);
+          });
+          return result.join();
+        } else if ((_column$enumColumn5 = column.enumColumn) != null && _column$enumColumn5.enumSuffix) {
+          var _column$enumColumn6, _column$enumColumn7;
+
+          return props.values[((_column$enumColumn6 = column.enumColumn) == null ? void 0 : _column$enumColumn6.enumType[value].toUpperCase()) + "_" + ((_column$enumColumn7 = column.enumColumn) == null ? void 0 : _column$enumColumn7.enumSuffix.toUpperCase())];
+        } else return props.values[(_column$enumColumn8 = column.enumColumn) == null ? void 0 : _column$enumColumn8.enumType[value].toUpperCase()];
+      } else if ((_column$enumColumn9 = column.enumColumn) != null && _column$enumColumn9.enumSuffix) {
+        var _column$enumColumn10;
+
+        return props.values[value.toUpperCase() + "_" + ((_column$enumColumn10 = column.enumColumn) == null ? void 0 : _column$enumColumn10.enumSuffix.toUpperCase())];
       } else return props.values[value.toUpperCase()];
     }
 
@@ -458,6 +475,28 @@ var TableComponent = function TableComponent(props) {
       return value.join(', ');
     }
 
+    if (column.isBoolean) {
+      var booleanStr = value ? 'true' : 'false';
+
+      if (column.isBoolean.enumType) {
+        var _column$isBoolean3;
+
+        if (column.isBoolean.enumSuffix) {
+          var _column$isBoolean, _column$isBoolean2;
+
+          return props.values[((_column$isBoolean = column.isBoolean) == null ? void 0 : _column$isBoolean.enumType[booleanStr].toUpperCase()) + "_" + ((_column$isBoolean2 = column.isBoolean) == null ? void 0 : _column$isBoolean2.enumSuffix.toUpperCase())];
+        } else return props.values[(_column$isBoolean3 = column.isBoolean) == null ? void 0 : _column$isBoolean3.enumType[booleanStr].toUpperCase()];
+      } else if (column.isBoolean.enumSuffix) {
+        var _column$isBoolean4;
+
+        return props.values[booleanStr.toUpperCase() + "_" + ((_column$isBoolean4 = column.isBoolean) == null ? void 0 : _column$isBoolean4.enumSuffix.toUpperCase())];
+      }
+    }
+
+    if (typeof value === 'boolean') {
+      return String(value);
+    }
+
     return value;
   };
 
@@ -583,8 +622,6 @@ var TableComponent = function TableComponent(props) {
       tabIndex: -1,
       key: row.id || index
     }, props.columns.map(function (column) {
-      var _column$enumColumn5;
-
       var value = ObjectbyString(row, column.id);
       var isItemSelected = column.isCheck && isSelected(row.id);
       return React__default.createElement(_.TableCell, {
@@ -638,8 +675,12 @@ var TableComponent = function TableComponent(props) {
         onChange: function onChange(event) {
           return onCheckAction(event, row.id);
         }
-      })) : column.isEditableTableCell ? EditableTableCell(row, value, column.id, column.isEditableTableCell) : React__default.createElement(_.Box, {
-        className: ((_column$enumColumn5 = column.enumColumn) != null && _column$enumColumn5.hasColor ? value.toLowerCase() + "-type-color" : '') + " format-value"
+      })) : column.isEditableTableCell ? EditableTableCell(row, value, column.id, column.isEditableTableCell) : column.enumColumn ? React__default.createElement(_.Box, {
+        className: (column.enumColumn.hasColor ? (column.enumColumn.enumSuffix ? value.toLowerCase() + "-" + column.enumColumn.enumSuffix.toLowerCase() : value.toString().toLowerCase()) + "-type-color" : '') + " format-value"
+      }, formatValue(value, column)) : column.isBoolean ? React__default.createElement(_.Box, {
+        className: (column.isBoolean.hasColor ? (column.isBoolean.enumSuffix ? value.toString().toLowerCase() + "-" + column.isBoolean.enumSuffix.toLowerCase() : value.toString().toLowerCase()) + "-boolean-color" : '') + " format-value"
+      }, formatValue(value, column)) : React__default.createElement(_.Box, {
+        className: "format-value"
       }, formatValue(value, column)));
     }));
   }) : !props.loading ? React__default.createElement(_.TableRow, null, React__default.createElement(_.TableCell, {
@@ -1043,7 +1084,7 @@ var AppHeader = function AppHeader(props) {
   }, React__default.createElement(MenuIcon, null)), props.children));
 };
 
-var css_248z$b = ".MuiButton-root {\n  width: auto;\n  padding: 0.8rem 1rem !important;\n  text-transform: inherit !important;\n  line-height: inherit !important;\n  box-shadow: none !important;\n  font-size: 1rem !important;\n  background-color: #3299C7;\n}\n.MuiButton-root.btn-login {\n  width: 100%;\n}\n.MuiButton-root.btn-modal-cancel {\n  background-color: #666666 !important;\n}\n.MuiButton-root.btn-modal-cancel.Mui-disabled {\n  background-color: #666666c4 !important;\n  color: #030303b4 !important;\n}\n.MuiButton-root:hover {\n  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important;\n}\n.MuiButton-root .MuiCircularProgress-root {\n  color: white !important;\n}\n.MuiButton-root .MuiButton-label .MuiCircularProgress-root {\n  color: white !important;\n}\n.MuiButton-root .MuiButton-startIcon svg {\n  font-size: 20px !important;\n}\n.MuiButton-root .MuiButton-endIcon svg {\n  font-size: 20px !important;\n}";
+var css_248z$b = ".MuiButton-root {\n  width: auto;\n  padding: 0.8rem 1rem !important;\n  text-transform: inherit !important;\n  line-height: inherit !important;\n  box-shadow: none !important;\n  font-size: 1rem !important;\n  background-color: #3299C7;\n}\n.MuiButton-root.btn-login {\n  width: 100%;\n}\n.MuiButton-root.btn-reverse-color {\n  border: 1px solid #3299C7;\n  color: #3299C7;\n  background-color: white !important;\n}\n.MuiButton-root.btn-modal-cancel {\n  background-color: #666666 !important;\n}\n.MuiButton-root.btn-modal-cancel.Mui-disabled {\n  background-color: #666666c4 !important;\n  color: #030303b4 !important;\n}\n.MuiButton-root:hover {\n  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important;\n}\n.MuiButton-root .MuiCircularProgress-root {\n  color: white;\n}\n.MuiButton-root .MuiButton-label .MuiCircularProgress-root {\n  color: white;\n}\n.MuiButton-root .MuiButton-startIcon svg {\n  font-size: 20px !important;\n}\n.MuiButton-root .MuiButton-endIcon svg {\n  font-size: 20px !important;\n}";
 styleInject(css_248z$b);
 
 var ButtonComponent = function ButtonComponent(props) {
@@ -1051,21 +1092,22 @@ var ButtonComponent = function ButtonComponent(props) {
     type: props.type && props.type,
     variant: "contained",
     form: props.form && props.form,
-    className: "main-background-color " + (props.className ? props.className : ''),
+    className: (props.reverseColors ? 'btn-reverse-color main-color main-border-color' : 'main-background-color') + "  " + (props.className ? props.className : ''),
     startIcon: !props.loading && props.startIcon,
     endIcon: !props.loading && props.endIcon,
     onClick: props.onClick,
     disabled: !props.loading && props.disabled,
     component: props.component
   }, props.loading ? React__default.createElement(_.CircularProgress, {
-    size: 25
+    className: "" + (props.reverseColors ? 'circular-progress-main-color' : ''),
+    size: 20
   }) : props.label);
 };
 ButtonComponent.defaultProps = {
   component: 'button'
 };
 
-var css_248z$c = ".text-simple-component .MuiFormLabel-root {\n  color: #666666 !important;\n  font-size: calc(12pt + (14 - 12) * calc(100vw - 300px)/1300) !important;\n  transform: translate(0, 0.5px) scale(0.85);\n  transform-origin: top left;\n  text-overflow: initial !important;\n}\n.text-simple-component .MuiFormLabel-root + .text-simple-box.no-border {\n  margin-top: 7px !important;\n}\n.text-simple-component .text-simple-box.no-border {\n  border: none !important;\n  padding: 0 !important;\n}\n.text-simple-component .text-simple-box {\n  color: #666666 !important;\n  font-size: 1rem;\n  border: 1px solid grey;\n  padding: 0.868rem;\n  border-radius: 3px !important;\n}\n.text-simple-component .helper-text {\n  font-size: 0.85rem !important;\n  padding: 0 !important;\n  margin-top: 3px;\n  line-height: 1.66;\n  color: #666666 !important;\n  letter-spacing: 0.03333em;\n}\n.text-simple-component .has-error-border {\n  border-color: #F24726 !important;\n}\n.text-simple-component .has-error {\n  color: #F24726 !important;\n}";
+var css_248z$c = ".text-simple-component .MuiFormLabel-root {\n  color: #666666 !important;\n  font-size: calc(12pt + (14 - 12) * calc(100vw - 300px)/1300) !important;\n  transform: translate(0, 0.5px) scale(0.85);\n  transform-origin: top left;\n  text-overflow: initial !important;\n}\n.text-simple-component .MuiFormLabel-root + .text-simple-box.no-border {\n  margin-top: 16px !important;\n}\n.text-simple-component .MuiFormLabel-root + .text-simple-box.no-margin.no-border {\n  margin-top: 7px !important;\n}\n.text-simple-component .text-simple-box.no-border {\n  border: none !important;\n  padding: 0 !important;\n}\n.text-simple-component .text-simple-box {\n  color: #666666 !important;\n  font-size: 1rem;\n  border: 1px solid grey;\n  padding: 0.868rem;\n  border-radius: 3px !important;\n}\n.text-simple-component .helper-text {\n  font-size: 0.85rem !important;\n  padding: 0 !important;\n  margin-top: 3px;\n  line-height: 1.66;\n  color: #666666 !important;\n  letter-spacing: 0.03333em;\n}\n.text-simple-component .has-error-border {\n  border-color: #F24726 !important;\n}\n.text-simple-component .has-error {\n  color: #F24726 !important;\n}";
 styleInject(css_248z$c);
 
 var TextSimpleComponent = function TextSimpleComponent(props) {
@@ -1076,7 +1118,7 @@ var TextSimpleComponent = function TextSimpleComponent(props) {
   }, props.label && React__default.createElement(_.FormLabel, null, props.label), React__default.createElement(_.Box, {
     display: "flex",
     alignItems: "center",
-    className: "text-simple-box " + (props.className ? props.className : '') + " " + (props.noBorders ? 'no-border' : '') + " " + (props.error ? 'has-error-border' : ''),
+    className: "text-simple-box " + (props.className ? props.className : '') + " " + (props.noMargin ? 'no-margin' : '') + " " + (props.noBorders ? 'no-border' : '') + " " + (props.error ? 'has-error-border' : ''),
     width: "" + (props.fullWidth ? 'auto' : 'fit-content')
   }, props.startIcon && React__default.createElement(_.Box, {
     mr: 1