techsbcn-storybook 0.23.4 → 0.24.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/fields/TextSimpleComponent/TextSimpleComponent.d.ts +3 -1
- package/dist/components/tables/SimpleTableComponent/SimpleTableComponent.d.ts +2 -1
- package/dist/stories/Fields/TextSimpleComponent.stories.d.ts +4 -0
- package/dist/techsbcn-storybook.cjs.development.js +10 -8
- package/dist/techsbcn-storybook.cjs.development.js.map +1 -1
- package/dist/techsbcn-storybook.cjs.production.min.js +1 -1
- package/dist/techsbcn-storybook.cjs.production.min.js.map +1 -1
- package/dist/techsbcn-storybook.esm.js +10 -8
- package/dist/techsbcn-storybook.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/fields/SelectFieldComponent/SelectAsyncField.tsx +1 -1
- package/src/components/fields/SelectFieldComponent/SelectField.tsx +1 -1
- package/src/components/fields/TextSimpleComponent/TextSimpleComponent.scss +19 -1
- package/src/components/fields/TextSimpleComponent/TextSimpleComponent.tsx +15 -7
- package/src/components/tables/SimpleTableComponent/SimpleTableComponent.scss +1 -1
- package/src/components/tables/SimpleTableComponent/SimpleTableComponent.tsx +11 -4
- package/src/components/tables/TableComponent/TableComponent.tsx +5 -1
- package/src/stories/Fields/Fields.stories.tsx +43 -0
- package/src/stories/Fields/TextFieldComponent.stories.tsx +14 -1
- package/src/stories/Fields/TextSimpleComponent.stories.tsx +58 -0
- package/src/stories/Layouts/MainLayoutSimple.stories.tsx +1 -0
- package/src/stories/MainWrapper/MainWrapper.stories.tsx +1 -1
- package/src/stories/Wrappers/Card.stories.tsx +1 -1
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { BoxProps } from '@mui/material/';
|
|
3
3
|
import './TextSimpleComponent.scss';
|
|
4
4
|
interface TextSimpleComponentProps {
|
|
5
|
-
label?: any;
|
|
5
|
+
label?: any | string;
|
|
6
6
|
skeletonLabel?: boolean;
|
|
7
7
|
isFormLabel?: boolean;
|
|
8
8
|
value?: any;
|
|
@@ -21,6 +21,8 @@ interface TextSimpleComponentProps {
|
|
|
21
21
|
valueBoxProps?: BoxProps;
|
|
22
22
|
labelBoxProps?: BoxProps;
|
|
23
23
|
helperBoxProps?: BoxProps;
|
|
24
|
+
labelMargin?: boolean;
|
|
25
|
+
valueInCenter?: boolean;
|
|
24
26
|
}
|
|
25
27
|
interface SkeletonProps {
|
|
26
28
|
useSkeleton: boolean;
|
|
@@ -627,6 +627,7 @@ var TableComponent = function TableComponent(props) {
|
|
|
627
627
|
}
|
|
628
628
|
|
|
629
629
|
return React__default.createElement(_.Typography, {
|
|
630
|
+
component: 'span',
|
|
630
631
|
whiteSpace: "break-spaces"
|
|
631
632
|
}, value);
|
|
632
633
|
};
|
|
@@ -885,7 +886,7 @@ TableComponent.defaultProps = {
|
|
|
885
886
|
showTotalCount: true
|
|
886
887
|
};
|
|
887
888
|
|
|
888
|
-
var css_248z$6 = ".table-simple-component .paper-container {\n box-shadow: none;\n background-color: transparent !important;\n}\n.table-simple-component .paper-container .checkbox-cell .MuiCheckbox-root {\n padding: 0 !important;\n}\n.table-simple-component .paper-container .checkbox-cell .MuiCheckbox-root:hover {\n background-color: transparent !important;\n}\n.table-simple-component .paper-container .checkbox-cell .Mui-checked {\n color: rgba(0, 0, 0, 0.54) !important;\n}\n.table-simple-component .paper-container .checkbox-cell .MuiCheckbox-indeterminate {\n color: #212529 !important;\n}\n.table-simple-component .paper-container .table-container.with-scroll {\n max-height: 68vh;\n}\n.table-simple-component .paper-container .table-container .table-column {\n font-weight: bold;\n font-size: calc(9pt + (11 - 9) * calc(100vw - 300px)/1300) !important;\n padding: 10px !important;\n border-top: 1px solid #e0e0e0;\n border-right: 1px solid #e0e0e0;\n border-bottom: 2px solid #e0e0e0;\n}\n.table-simple-component .paper-container .table-container .table-column .table-header-cell {\n color: black;\n font-weight: bold;\n padding: 0px 10px 0px 10px !important;\n}\n.table-simple-component .paper-container .table-container.table-simple {\n border-bottom: 1px solid black;\n}\n.table-simple-component .paper-container .table-container.table-simple .table-column:first-child {\n border-radius: 5px 0 0 5px;\n}\n.table-simple-component .paper-container .table-container.table-simple .table-column:last-child {\n border-right: none !important;\n border-radius: 0 5px 5px 0;\n}\n.table-simple-component .paper-container .table-container.table-bordered .table-column {\n border-bottom: 1px solid #eaeaea !important;\n border-top: 1px solid #eaeaea !important;\n border-right: 1px solid #eaeaea !important;\n color: #7a7a7a !important;\n}\n.table-simple-component .paper-container .table-container.table-bordered .table-column .table-header-cell {\n color: #7a7a7a !important;\n}\n.table-simple-component .paper-container .table-container.table-bordered .table-column:first-child {\n border-left: 1px solid #eaeaea;\n}\n.table-simple-component .paper-container .table-container.table-bordered .table-rows .table-cell {\n color: #505050 !important;\n border-right: 1px solid #eaeaea;\n}\n.table-simple-component .paper-container .table-container.table-bordered .table-rows .table-cell:first-child {\n border-left: 1px solid #eaeaea;\n}\n.table-simple-component .paper-container .table-container .table-rows.table-striped td {\n background-color: rgba(255, 255, 255, 0.95);\n}\n.table-simple-component .paper-container .table-container .table-rows.row-click {\n cursor: pointer;\n}\n.table-simple-component .paper-container .table-container .table-rows.row-click:hover {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.table-simple-component .paper-container .table-container .table-rows.row-click:hover.table-striped {\n background-color: transparent !important;\n}\n.table-simple-component .paper-container .table-container .table-rows.row-click:hover.table-striped td {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.table-simple-component .paper-container .table-container .table-rows.Mui-selected {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.table-simple-component .paper-container .table-container .table-rows.Mui-selected.table-striped {\n background-color: transparent !important;\n}\n.table-simple-component .paper-container .table-container .table-rows.Mui-selected.table-striped td {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.table-simple-component .paper-container .table-container .table-rows .Mui-selected {\n background-color: transparent !important;\n}\n.table-simple-component .paper-container .table-container .table-rows .MuiTableCell-root {\n padding: 6px
|
|
889
|
+
var css_248z$6 = ".table-simple-component .paper-container {\n box-shadow: none;\n background-color: transparent !important;\n}\n.table-simple-component .paper-container .checkbox-cell .MuiCheckbox-root {\n padding: 0 !important;\n}\n.table-simple-component .paper-container .checkbox-cell .MuiCheckbox-root:hover {\n background-color: transparent !important;\n}\n.table-simple-component .paper-container .checkbox-cell .Mui-checked {\n color: rgba(0, 0, 0, 0.54) !important;\n}\n.table-simple-component .paper-container .checkbox-cell .MuiCheckbox-indeterminate {\n color: #212529 !important;\n}\n.table-simple-component .paper-container .table-container.with-scroll {\n max-height: 68vh;\n}\n.table-simple-component .paper-container .table-container .table-column {\n font-weight: bold;\n font-size: calc(9pt + (11 - 9) * calc(100vw - 300px)/1300) !important;\n padding: 10px !important;\n border-top: 1px solid #e0e0e0;\n border-right: 1px solid #e0e0e0;\n border-bottom: 2px solid #e0e0e0;\n}\n.table-simple-component .paper-container .table-container .table-column .table-header-cell {\n color: black;\n font-weight: bold;\n padding: 0px 10px 0px 10px !important;\n}\n.table-simple-component .paper-container .table-container.table-simple {\n border-bottom: 1px solid black;\n}\n.table-simple-component .paper-container .table-container.table-simple .table-column:first-child {\n border-radius: 5px 0 0 5px;\n}\n.table-simple-component .paper-container .table-container.table-simple .table-column:last-child {\n border-right: none !important;\n border-radius: 0 5px 5px 0;\n}\n.table-simple-component .paper-container .table-container.table-bordered .table-column {\n border-bottom: 1px solid #eaeaea !important;\n border-top: 1px solid #eaeaea !important;\n border-right: 1px solid #eaeaea !important;\n color: #7a7a7a !important;\n}\n.table-simple-component .paper-container .table-container.table-bordered .table-column .table-header-cell {\n color: #7a7a7a !important;\n}\n.table-simple-component .paper-container .table-container.table-bordered .table-column:first-child {\n border-left: 1px solid #eaeaea;\n}\n.table-simple-component .paper-container .table-container.table-bordered .table-rows .table-cell {\n color: #505050 !important;\n border-right: 1px solid #eaeaea;\n}\n.table-simple-component .paper-container .table-container.table-bordered .table-rows .table-cell:first-child {\n border-left: 1px solid #eaeaea;\n}\n.table-simple-component .paper-container .table-container .table-rows.table-striped td {\n background-color: rgba(255, 255, 255, 0.95);\n}\n.table-simple-component .paper-container .table-container .table-rows.row-click {\n cursor: pointer;\n}\n.table-simple-component .paper-container .table-container .table-rows.row-click:hover {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.table-simple-component .paper-container .table-container .table-rows.row-click:hover.table-striped {\n background-color: transparent !important;\n}\n.table-simple-component .paper-container .table-container .table-rows.row-click:hover.table-striped td {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.table-simple-component .paper-container .table-container .table-rows.Mui-selected {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.table-simple-component .paper-container .table-container .table-rows.Mui-selected.table-striped {\n background-color: transparent !important;\n}\n.table-simple-component .paper-container .table-container .table-rows.Mui-selected.table-striped td {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.table-simple-component .paper-container .table-container .table-rows .Mui-selected {\n background-color: transparent !important;\n}\n.table-simple-component .paper-container .table-container .table-rows .MuiTableCell-root {\n padding: 6px;\n overflow: hidden;\n}\n.table-simple-component .paper-container .table-container .table-rows .img-table {\n width: 100%;\n height: 110px;\n}\n.table-simple-component .paper-container .table-container .table-rows .img-table img {\n object-fit: contain;\n}\n.table-simple-component .paper-container .table-container .table-rows .actions {\n float: right;\n}\n.table-simple-component .paper-container .table-container .table-rows .btn-action {\n color: rgba(0, 0, 0, 0.54);\n display: inline-block;\n text-decoration: none;\n font-size: 1.6em !important;\n padding: 0px 7px;\n cursor: pointer;\n}\n.table-simple-component .paper-container .table-container .table-rows .format-value {\n font-size: calc(9pt + (11 - 9) * calc(100vw - 300px)/1300);\n}\n.table-simple-component .paper-container .table-container .table-rows .format-value .MuiTypography-root {\n font-size: calc(9pt + (11 - 9) * calc(100vw - 300px)/1300);\n}\n.table-simple-component .paper-container .MuiTable-root.loading {\n opacity: 0.5;\n}\n.table-simple-component .paper-container .MuiTable-root.loading .MuiCircularProgress-root {\n width: 80px !important;\n height: 80px !important;\n position: absolute;\n left: 0;\n right: 0;\n top: 5px;\n margin: auto;\n color: grey;\n}\n@media (max-width: 992px) {\n .table-simple-component .paper-container .table-container {\n max-height: 60vh;\n border-top: 1px solid #cccccc;\n }\n .table-simple-component .paper-container .table-container .MuiTable-root {\n border-collapse: collapse !important;\n }\n .table-simple-component .paper-container .table-container .MuiTableHead-root {\n display: none !important;\n }\n .table-simple-component .paper-container .table-container .table-rows {\n border-bottom: 2px solid #cccccc;\n }\n .table-simple-component .paper-container .table-container .table-rows .MuiTableCell-root {\n width: auto;\n border-bottom: none !important;\n }\n .table-simple-component .paper-container .table-container .table-rows .MuiTableCell-root .label-cell {\n font-size: 1rem;\n vertical-align: top;\n width: 50%;\n height: auto;\n }\n .table-simple-component .paper-container .table-container .table-rows .MuiTableCell-root .label-cell + div {\n display: inline-block;\n }\n .table-simple-component .paper-container .table-container .table-rows .table-cell {\n display: block !important;\n }\n .table-simple-component .paper-container .table-container .table-rows .format-value {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n width: 50%;\n max-width: 299px;\n }\n}";
|
|
889
890
|
styleInject(css_248z$6);
|
|
890
891
|
|
|
891
892
|
var SimpleTableComponent = function SimpleTableComponent(props) {
|
|
@@ -947,7 +948,7 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
|
|
|
947
948
|
};
|
|
948
949
|
|
|
949
950
|
var formatValue = function formatValue(value, column) {
|
|
950
|
-
var _column$enumColumn;
|
|
951
|
+
var _column$enumColumn, _column$priceFormat$c, _column$priceFormat, _column$priceFormat2, _column$priceFormat$c2, _column$priceFormat3;
|
|
951
952
|
|
|
952
953
|
if ((_column$enumColumn = column.enumColumn) != null && _column$enumColumn.isEnum) {
|
|
953
954
|
var _column$enumColumn2, _column$enumColumn9;
|
|
@@ -987,7 +988,7 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
|
|
|
987
988
|
}
|
|
988
989
|
|
|
989
990
|
if (column.isDate && value) return dayjs.utc(value).tz(dayjs.tz.guess()).format('L');
|
|
990
|
-
if (column.isPrice && value) return Number(value).toFixed(2).replace('.', ',').toLocaleString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.') + " " + props.values.SYMBOL_EURO;
|
|
991
|
+
if (column.isPrice && value) return "" + ((_column$priceFormat$c = (_column$priceFormat = column.priceFormat) == null ? void 0 : _column$priceFormat.currencyStart) != null ? _column$priceFormat$c : '') + Number(value).toFixed(2).replace('.', ',').toLocaleString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.') + " " + (!((_column$priceFormat2 = column.priceFormat) != null && _column$priceFormat2.currencyStart) ? (_column$priceFormat$c2 = (_column$priceFormat3 = column.priceFormat) == null ? void 0 : _column$priceFormat3.currencyEnd) != null ? _column$priceFormat$c2 : props.values.SYMBOL_EURO : '');
|
|
991
992
|
|
|
992
993
|
if (column.isImage && value) {
|
|
993
994
|
if (column.isImage.isUrl) {
|
|
@@ -1033,6 +1034,7 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
|
|
|
1033
1034
|
}
|
|
1034
1035
|
|
|
1035
1036
|
return React__default.createElement(_.Typography, {
|
|
1037
|
+
component: 'span',
|
|
1036
1038
|
whiteSpace: "break-spaces"
|
|
1037
1039
|
}, value);
|
|
1038
1040
|
};
|
|
@@ -1625,7 +1627,7 @@ ButtonComponent.defaultProps = {
|
|
|
1625
1627
|
component: 'button'
|
|
1626
1628
|
};
|
|
1627
1629
|
|
|
1628
|
-
var css_248z$e = ".text-simple-component .MuiFormLabel-root {\n color: #666666;\n font-size: 1rem !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 {\n margin-top: 2px;\n}\n.text-simple-component .MuiFormLabel-root + .text-simple-box.no-border {\n margin-top:
|
|
1630
|
+
var css_248z$e = ".text-simple-component .MuiFormLabel-root {\n color: #666666;\n font-size: 1rem !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 {\n margin-top: 2px;\n}\n.text-simple-component .MuiFormLabel-root + .text-simple-box.no-border {\n margin-top: 15px !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.in-center.label-margin {\n margin-top: 38px !important;\n}\n.text-simple-component .MuiFormLabel-root + .text-simple-box.in-center {\n margin-top: 15px !important;\n}\n.text-simple-component .text-simple-box.label-margin {\n margin-top: 25px !important;\n}\n.text-simple-component .text-simple-box.in-center {\n margin-top: 10px !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;\n font-size: 14px;\n border: 1px solid grey;\n border-radius: 3px !important;\n padding: 0.611rem 0.87rem;\n line-height: 1.4375em;\n letter-spacing: 0.00938em;\n}\n.text-simple-component .text-simple-box.icon-padding {\n padding: 0.49rem 0.87rem;\n}\n.text-simple-component .text-simple-box.end-icon-padding {\n padding: 0.177rem 0.87rem;\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 .helper-text.no-border {\n margin-top: 12px;\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}";
|
|
1629
1631
|
styleInject(css_248z$e);
|
|
1630
1632
|
|
|
1631
1633
|
var TextSimpleComponent = function TextSimpleComponent(props) {
|
|
@@ -1658,7 +1660,7 @@ var TextSimpleComponent = function TextSimpleComponent(props) {
|
|
|
1658
1660
|
}, props.labelBoxProps), props.label) : React__default.createElement(React__default.Fragment, null), React__default.createElement(_.Box, Object.assign({
|
|
1659
1661
|
display: "" + (props.skeletonValue && props.skeletonValue.useSkeleton ? 'block' : props.startIcon || props.endIcon ? 'flex' : 'block'),
|
|
1660
1662
|
alignItems: "center",
|
|
1661
|
-
className: "text-simple-box " + ((_props$className = props.className) != null ? _props$className : '') + " " + (props.noMargin ? 'no-margin' : '') + " " + (props.noBorders || props.skeletonValue && props.skeletonValue.useSkeleton ? 'no-border' : '') + " " + (props.error ? 'has-error-border' : '') + " " + (props.startIcon ? 'icon-padding' : props.endIcon ? 'end-icon-padding' : ''),
|
|
1663
|
+
className: "text-simple-box " + ((_props$className = props.className) != null ? _props$className : '') + " " + (props.noMargin ? 'no-margin' : '') + " \n " + (props.labelMargin ? 'label-margin' : '') + " \n " + (props.valueInCenter ? 'in-center' : '') + " \n " + (props.noBorders || props.skeletonValue && props.skeletonValue.useSkeleton ? 'no-border' : '') + " " + (props.error ? 'has-error-border' : '') + " " + (props.startIcon ? 'icon-padding' : props.endIcon ? 'end-icon-padding' : ''),
|
|
1662
1664
|
width: "" + (props.fullWidth ? 'auto' : 'fit-content')
|
|
1663
1665
|
}, props.valueBoxProps), props.skeletonValue && props.skeletonValue.useSkeleton ? React__default.createElement(SkeletonCompleteDefault, Object.assign({}, props.skeletonValue)) : React__default.createElement(React__default.Fragment, null, props.startIcon && React__default.createElement(_.Box, {
|
|
1664
1666
|
mr: 1,
|
|
@@ -1672,7 +1674,7 @@ var TextSimpleComponent = function TextSimpleComponent(props) {
|
|
|
1672
1674
|
ml: "" + (props.fullWidth ? 'auto' : 1),
|
|
1673
1675
|
display: 'flex'
|
|
1674
1676
|
}, props.endIcon))), props.helperText && React__default.createElement(_.Box, Object.assign({
|
|
1675
|
-
className: "helper-text " + (props.error ? 'has-error' : '')
|
|
1677
|
+
className: "helper-text " + (props.error ? 'has-error' : '') + " " + (props.noBorders || props.skeletonValue && props.skeletonValue.useSkeleton ? 'no-border' : '')
|
|
1676
1678
|
}, props.helperBoxProps), props.skeletonValue && props.skeletonValue.useSkeleton ? React__default.createElement(_.Skeleton, {
|
|
1677
1679
|
width: "15%",
|
|
1678
1680
|
animation: "wave"
|
|
@@ -1695,7 +1697,7 @@ var SelectField = function SelectField(props) {
|
|
|
1695
1697
|
className: "select-field",
|
|
1696
1698
|
display: "flex",
|
|
1697
1699
|
flexDirection: "column"
|
|
1698
|
-
}, React__default.createElement(_.FormLabel, null, props.label), React__default.createElement(Select, {
|
|
1700
|
+
}, props.label && React__default.createElement(_.FormLabel, null, props.label), React__default.createElement(Select, {
|
|
1699
1701
|
defaultValue: props.defaultOptions,
|
|
1700
1702
|
isMulti: props.isMulti,
|
|
1701
1703
|
name: props.name,
|
|
@@ -2590,7 +2592,7 @@ var SelectAsyncField = function SelectAsyncField(props) {
|
|
|
2590
2592
|
className: "select-field",
|
|
2591
2593
|
display: "flex",
|
|
2592
2594
|
flexDirection: "column"
|
|
2593
|
-
}, React__default.createElement(_.FormLabel, null, props.label), React__default.createElement(reactSelectAsyncPaginate.AsyncPaginate, {
|
|
2595
|
+
}, props.label && React__default.createElement(_.FormLabel, null, props.label), React__default.createElement(reactSelectAsyncPaginate.AsyncPaginate, {
|
|
2594
2596
|
defaultValue: props.defaultOptions,
|
|
2595
2597
|
isMulti: props.isMulti,
|
|
2596
2598
|
name: props.name,
|