techsbcn-storybook 0.10.1 → 0.12.0

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

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

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

@@ -24,10 +24,11 @@ interface TextFieldComponentProps {
     multiline?: boolean;
     rows?: number;
     maxLength?: number;
-    defaultValue?: string;
+    defaultValue?: string | number;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     step?: number | string;
+    noBorders?: boolean;
 }
 export declare const TextFieldComponent: React.FC<TextFieldComponentProps>;
 export {};

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import './TextSimpleComponent.scss';
+interface TextSimpleComponentProps {
+    label?: string;
+    value?: any;
+    className?: string;
+    error?: boolean;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    helperText?: string;
+    noBorders?: boolean;
+    fullWidth?: boolean;
+}
+export declare const TextSimpleComponent: React.FC<TextSimpleComponentProps>;
+export {};

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import { ObjectKey } from '../../../interfaces';
+import './SimpleTableComponent.scss';
+interface SimpleTableComponentProps {
+    rows: any[];
+    values: ObjectKey;
+    className?: string;
+    columns: ColumnProps[];
+    rowsColorColumn?: {
+        columnName: string;
+        columnValue: string;
+    };
+    loading?: boolean;
+    onClickRow?: (id: number) => void;
+    isCheckTable?: {
+        rowsChecked?: number[];
+        onCheckedAction?: (ids: number[]) => void;
+        onCheckedSingleAction?: (id: number) => void;
+    };
+}
+interface ColumnProps {
+    id?: string;
+    label?: string;
+    minWidth?: number;
+    maxWidth?: number;
+    align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
+    alignCell?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
+    action?: ActionProps[];
+    isUnique?: boolean;
+    isDate?: boolean;
+    enumColumn?: {
+        isEnum?: boolean;
+        enumType?: any;
+        hasColor?: boolean;
+    };
+    isCheck?: boolean;
+    isPrice?: boolean;
+    isImage?: {
+        isUrl?: boolean;
+        isGuid?: {
+            guid: boolean;
+            action: (guid: string) => string;
+        };
+    };
+    isActiveFunction?: {
+        activeIcon: any;
+        disabledIcon: any;
+        onClickId: (id: number) => void;
+    };
+}
+interface ActionProps {
+    children: React.ReactNode;
+    onClick?: (row: any) => void;
+    onClickId?: (id: number) => void;
+}
+export declare const SimpleTableComponent: React.FunctionComponent<SimpleTableComponentProps>;
+export {};

package/dist/data/UserList.d.ts

@@ -10,7 +10,7 @@ interface UserList {
     website: string;
     charge: number;
     topic: string;
-    extraInfo: BasicEntity;
+    extraInfo?: BasicEntity;
 }
 export declare const UserList: UserList[];
 export {};

package/dist/index.d.ts

@@ -10,6 +10,7 @@ export * from './components/layouts/DrawerLayout/DrawerSidebar/DrawerSidebar';
 export * from './components/layouts/Standard/AppHeader/AppHeader';
 export * from './components/fields/ButtonComponent/ButtonComponent';
 export * from './components/fields/TextFieldComponent/TextFieldComponent';
+export * from './components/fields/TextSimpleComponent/TextSimpleComponent';
 export * from './components/fields/SelectFieldComponent/SelectField';
 export * from './components/fields/SelectFieldComponent/SelectAsyncField';
 export * from './components/forms/LoginForm';

package/dist/interfaces/search/BasicEntity.d.ts

@@ -1,5 +1,5 @@
 import { ObjectKey } from '../../interfaces';
 export interface BasicEntity extends ObjectKey {
-    id: number;
-    name: string;
+    id?: number;
+    name?: string;
 }

package/dist/stories/Fields/Fields.stories.d.ts

@@ -3,3 +3,4 @@ declare const meta: Meta;
 export default meta;
 export declare const TextField: Story<import("@storybook/react").Args>;
 export declare const SelectFieldTemplate: Story<import("@storybook/react").Args>;
+export declare const TextSimple: Story<import("@storybook/react").Args>;

package/dist/stories/Tables/Tables.stories.d.ts

@@ -1,4 +1,5 @@
 import { Meta, Story } from '@storybook/react';
 declare const meta: Meta;
 export default meta;
-export declare const TableSimple: Story;
+export declare const Table: Story;
+export declare const SimpleTable: Story;

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

@@ -7,3 +7,4 @@ export declare const ModalCancel: Story<import("@storybook/react").Args>;
 export declare const Loading: Story<import("@storybook/react").Args>;
 export declare const StartIcon: Story<import("@storybook/react").Args>;
 export declare const EndIcon: Story<import("@storybook/react").Args>;
+export declare const Span: Story<import("@storybook/react").Args>;

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

@@ -402,10 +402,14 @@ var TableComponent = function TableComponent(props) {
     for (var i = 0, n = a.length; i < n; ++i) {
       var k = a[i];
 
-      if (k in o) {
-        o = o[k];
-      } else {
-        return;
+      try {
+        if (k in o) {
+          o = o[k];
+        } else {
+          return undefined;
+        }
+      } catch (_error) {
+        return undefined;
       }
     }
 
@@ -959,13 +963,17 @@ var ButtonComponent = function ButtonComponent(props) {
     startIcon: !props.loading && props.startIcon,
     endIcon: !props.loading && props.endIcon,
     onClick: props.onClick,
-    disabled: !props.loading && props.disabled
+    disabled: !props.loading && props.disabled,
+    component: props.component
   }, props.loading ? React__default.createElement(_.CircularProgress, {
     size: 25
   }) : props.label);
 };
+ButtonComponent.defaultProps = {
+  component: 'button'
+};
 
-var css_248z$b = ".text-field-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-field-component .MuiFormLabel-root + .MuiInputBase-formControl {\n  margin-top: 25px !important;\n}\n.text-field-component .MuiInputBase-root {\n  color: #666666 !important;\n  border: 1px solid grey;\n  padding: 0.43rem 0.87rem;\n  background-color: white !important;\n  border-radius: 3px !important;\n}\n.text-field-component .MuiInputBase-root.Mui-error {\n  border: 1px solid #F24726 !important;\n}\n.text-field-component .MuiInputBase-root:not(.Mui-disabled):hover {\n  border: 1px solid grey;\n}\n.text-field-component .MuiInputBase-root.Mui-focused {\n  border: 1px solid #3299C7;\n}\n.text-field-component .MuiInputBase-root .MuiInputBase-input {\n  color: #666666 !important;\n  background-color: white !important;\n}\n.text-field-component .MuiInputBase-root .MuiInputBase-input::placeholder {\n  text-overflow: ellipsis !important;\n  color: #666666 !important;\n  opacity: 1;\n}\n.text-field-component .MuiInputBase-root .Mui-disabled {\n  -webkit-text-fill-color: #666666 !important;\n}\n.text-field-component .MuiFormHelperText-root {\n  padding: 0 !important;\n  font-size: 0.85rem !important;\n  color: #666666;\n}";
+var css_248z$b = ".text-field-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-field-component .MuiFormLabel-root + .MuiInputBase-formControl {\n  margin-top: 25px !important;\n}\n.text-field-component .MuiInputBase-root.no-border {\n  border: none !important;\n  padding: 0 !important;\n  width: fit-content !important;\n}\n.text-field-component .MuiInputBase-root {\n  color: #666666 !important;\n  border: 1px solid grey;\n  padding: 0.43rem 0.87rem;\n  background-color: white !important;\n  border-radius: 3px !important;\n}\n.text-field-component .MuiInputBase-root.Mui-error {\n  border: 1px solid #F24726 !important;\n}\n.text-field-component .MuiInputBase-root:not(.Mui-disabled):hover {\n  border: 1px solid grey;\n}\n.text-field-component .MuiInputBase-root.Mui-focused {\n  border: 1px solid #3299C7;\n}\n.text-field-component .MuiInputBase-root .MuiInputBase-input {\n  color: #666666 !important;\n  background-color: white !important;\n}\n.text-field-component .MuiInputBase-root .MuiInputBase-input::placeholder {\n  text-overflow: ellipsis !important;\n  color: #666666 !important;\n  opacity: 1;\n}\n.text-field-component .MuiInputBase-root .Mui-disabled {\n  -webkit-text-fill-color: #666666 !important;\n}\n.text-field-component .MuiFormHelperText-root {\n  padding: 0 !important;\n  font-size: 0.85rem !important;\n  color: #666666;\n}";
 styleInject(css_248z$b);
 
 var TextFieldComponent = function TextFieldComponent(props) {
@@ -987,8 +995,8 @@ var TextFieldComponent = function TextFieldComponent(props) {
     error: props.error,
     id: props.id,
     label: props.label,
-    value: props.defaultValue,
-    defaultValue: props.value,
+    value: props.value,
+    defaultValue: props.defaultValue,
     className: props.className,
     required: props.required,
     disabled: props.disabled,
@@ -998,7 +1006,7 @@ var TextFieldComponent = function TextFieldComponent(props) {
     variant: "standard",
     ref: props.inputRef,
     InputProps: {
-      className: "" + (!props.disabled && hover ? 'main-border-color' : ''),
+      className: (props.noBorders ? 'no-border' : '') + " " + (!props.disabled && hover ? 'main-border-color' : ''),
       disableUnderline: true,
       startAdornment: props.startIcon,
       endAdornment: props.endIcon,
@@ -1030,9 +1038,34 @@ TextFieldComponent.defaultProps = {
   type: 'text'
 };
 
-var css_248z$c = ".select-field .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.select-field .select {\n  font-size: 1rem;\n}\n.select-field .select__menu {\n  z-index: 3 !important;\n  background-color: white;\n}\n.select-field .select__control {\n  cursor: pointer;\n  border: 1px solid grey;\n  border-radius: 5px !important;\n  padding: 0.33rem 0.2rem;\n  font-size: 1rem;\n  color: grey !important;\n  background-color: transparent;\n}\n.select-field .select__option {\n  cursor: pointer;\n  color: #666666 !important;\n  background-color: white !important;\n}\n.select-field .select__option--is-focused {\n  background-color: rgba(0, 0, 0, 0.04) !important;\n  color: #666666 !important;\n}\n.select-field .select__option--is-selected {\n  color: white !important;\n}\n.select-field .select__indicator {\n  color: grey !important;\n}\n.select-field .select__indicator:hover {\n  color: black !important;\n}\n.select-field .select__placeholder {\n  text-overflow: ellipsis !important;\n  color: #666666 !important;\n  opacity: 1;\n}\n.select-field .select__single-value {\n  color: #666666 !important;\n}\n.select-field .select__multi-value__label {\n  color: #666666 !important;\n  font-size: 1rem;\n}\n.select-field .select__control--is-focused {\n  border-color: grey !important;\n  box-shadow: none !important;\n}\n.select-field .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.select-field .has-error {\n  color: #F24726 !important;\n}\n.select-field .has-error .select__control {\n  border: 1px #F24726 solid !important;\n}\n.select-field .has-error .select__control--is-focused {\n  border-color: #F24726 !important;\n  box-shadow: 0 0 0 1px #F24726;\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: 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) {
+  return React__default.createElement(_.Box, {
+    className: "text-simple-component",
+    display: "flex",
+    flexDirection: "column"
+  }, 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' : ''),
+    width: "" + (props.fullWidth ? 'auto' : 'fit-content')
+  }, props.startIcon && React__default.createElement(_.Box, {
+    mr: 1
+  }, props.startIcon), props.value, props.endIcon && React__default.createElement(_.Box, {
+    ml: "" + (props.fullWidth ? 'auto' : 1)
+  }, props.endIcon)), props.helperText && React__default.createElement(_.Box, {
+    className: "helper-text " + (props.error ? 'has-error' : '')
+  }, props.helperText));
+};
+TextSimpleComponent.defaultProps = {
+  noBorders: true
+};
+
+var css_248z$d = ".select-field .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.select-field .select {\n  font-size: 1rem;\n}\n.select-field .select__menu {\n  z-index: 3 !important;\n  background-color: white;\n}\n.select-field .select__control {\n  cursor: pointer;\n  border: 1px solid grey;\n  border-radius: 5px !important;\n  padding: 0.33rem 0.2rem;\n  font-size: 1rem;\n  color: grey !important;\n  background-color: transparent;\n}\n.select-field .select__option {\n  cursor: pointer;\n  color: #666666 !important;\n  background-color: white !important;\n}\n.select-field .select__option--is-focused {\n  background-color: rgba(0, 0, 0, 0.04) !important;\n  color: #666666 !important;\n}\n.select-field .select__option--is-selected {\n  color: white !important;\n}\n.select-field .select__indicator {\n  color: grey !important;\n}\n.select-field .select__indicator:hover {\n  color: black !important;\n}\n.select-field .select__placeholder {\n  text-overflow: ellipsis !important;\n  color: #666666 !important;\n  opacity: 1;\n}\n.select-field .select__single-value {\n  color: #666666 !important;\n}\n.select-field .select__multi-value__label {\n  color: #666666 !important;\n  font-size: 1rem;\n}\n.select-field .select__control--is-focused {\n  border-color: grey !important;\n  box-shadow: none !important;\n}\n.select-field .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.select-field .has-error {\n  color: #F24726 !important;\n}\n.select-field .has-error .select__control {\n  border: 1px #F24726 solid !important;\n}\n.select-field .has-error .select__control--is-focused {\n  border-color: #F24726 !important;\n  box-shadow: 0 0 0 1px #F24726;\n}";
+styleInject(css_248z$d);
+
 var SelectField = function SelectField(props) {
   return React__default.createElement(_.Box, {
     className: "select-field",
@@ -2270,8 +2303,8 @@ ModalComponent.defaultProps = {
   dividers: true
 };
 
-var css_248z$d = ".tabs-component .Mui-selected {\n  color: white !important;\n  border: none !important;\n  background-color: #3299C7;\n}\n.tabs-component .MuiTabs-indicator {\n  display: none;\n}\n.tabs-component .MuiTab-root {\n  margin: 2px 2px 0px;\n  border: 1px solid #00000038;\n  border-bottom: none;\n  border-radius: 5% 5% 0% 0%;\n  color: rgba(0, 0, 0, 0.54);\n}\n.tabs-component .MuiTabPanel-root {\n  border: 1px solid #00000038;\n  margin: 0px 2px 0px;\n  border-radius: 0% 5px 5px 5px;\n}";
-styleInject(css_248z$d);
+var css_248z$e = ".tabs-component .Mui-selected {\n  color: white !important;\n  border: none !important;\n  background-color: #3299C7;\n}\n.tabs-component .MuiTabs-indicator {\n  display: none;\n}\n.tabs-component .MuiTab-root {\n  margin: 2px 2px 0px;\n  border: 1px solid #00000038;\n  border-bottom: none;\n  border-radius: 5% 5% 0% 0%;\n  color: rgba(0, 0, 0, 0.54);\n}\n.tabs-component .MuiTabPanel-root {\n  border: 1px solid #00000038;\n  margin: 0px 2px 0px;\n  border-radius: 0% 5px 5px 5px;\n}";
+styleInject(css_248z$e);
 
 var TabsComponent = function TabsComponent(props) {
   var _React$useState = React__default.useState(props.tabActive.toString()),
@@ -2323,6 +2356,7 @@ exports.SelectField = SelectField;
 exports.TableComponent = TableComponent;
 exports.TabsComponent = TabsComponent;
 exports.TextFieldComponent = TextFieldComponent;
+exports.TextSimpleComponent = TextSimpleComponent;
 exports.UserInfo = UserInfo;
 exports.VerticalNav = VerticalNav;
 //# sourceMappingURL=techsbcn-storybook.cjs.development.js.map