@aboutbits/react-ui - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

components/form/async/SelectItemDialogWithSearch.js

@@ -10,4 +10,2 @@ "use strict";
 var section_1 = require("../../section");
-var types_1 = require("../../types");
-var alert_1 = require("../../alert");
 var framework_1 = require("../../../framework");
@@ -17,2 +15,3 @@ var pagination_1 = require("../../pagination");
 var dialog_1 = require("../../dialog");
+var SectionContentMessage_1 = require("../../section/Section/SectionContentMessage");
 function SelectItemDialogWithSearch(_a) {
@@ -34,6 +33,8 @@ var onDismiss = _a.onDismiss, onConfirm = _a.onConfirm, isOpen = _a.isOpen, useGetData = _a.useGetData, renderListItem = _a.renderListItem, renderErrorMessage = _a.renderErrorMessage, dialogTitle = _a.dialogTitle, dialogLabel = _a.dialogLabel, noSearchResults = _a.noSearchResults, paginationConfig = _a.paginationConfig;
             clear: actions.clear,
-        }, onDismiss: onDismiss, dialogLabel: dialogLabel }, { children: (0, jsx_runtime_1.jsx)(dialog_1.DialogSectionContainer, { children: (0, jsx_runtime_1.jsx)(react_toolbox_1.AsyncView, { data: data, error: error, renderLoading: (0, jsx_runtime_1.jsxs)(section_1.SectionContentList, { children: [(0, jsx_runtime_1.jsx)(loading_1.LoadingListItem, {}), (0, jsx_runtime_1.jsx)(loading_1.LoadingListItem, {}), (0, jsx_runtime_1.jsx)(loading_1.LoadingListItem, {})] }), renderSuccess: function (data) { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(section_1.SectionContentList, { children: [data.items.map(function (item, index) { return ((0, jsx_runtime_1.jsx)(section_1.SectionListItemButton, tslib_1.__assign({ onClick: function () {
+        }, onDismiss: onDismiss, dialogLabel: dialogLabel }, { children: (0, jsx_runtime_1.jsx)(dialog_1.DialogSectionContainer, { children: (0, jsx_runtime_1.jsx)(react_toolbox_1.AsyncView, { data: data, error: error, renderLoading: (0, jsx_runtime_1.jsxs)(section_1.SectionContentList, { children: [(0, jsx_runtime_1.jsx)(loading_1.LoadingListItem, {}), (0, jsx_runtime_1.jsx)(loading_1.LoadingListItem, {}), (0, jsx_runtime_1.jsx)(loading_1.LoadingListItem, {})] }), renderSuccess: function (data) {
+                    return data.items.length === 0 ? ((0, jsx_runtime_1.jsx)(SectionContentMessage_1.SectionContentMessage, { children: empty })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(section_1.SectionContentList, { children: data.items.map(function (item, index) { return ((0, jsx_runtime_1.jsx)(section_1.SectionListItemButton, tslib_1.__assign({ onClick: function () {
                                         onConfirm(item);
-                                    } }, { children: (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: "flex flex-1 justify-between" }, { children: renderListItem(item) })) }), index)); }), data.items.length === 0 && ((0, jsx_runtime_1.jsx)(section_1.SectionContentListEmpty, { children: empty }))] }), (0, jsx_runtime_1.jsx)(pagination_1.SectionFooterWithPaginationInMemory, { page: data.currentPage, size: data.perPage, total: data.total, onChangePage: actions.setPage, config: paginationConfig })] })); }, renderError: function (error) { return ((0, jsx_runtime_1.jsx)(section_1.SectionContentListEmpty, { children: (0, jsx_runtime_1.jsx)(alert_1.Alert, tslib_1.__assign({ tone: types_1.Tone.critical }, { children: renderErrorMessage(error) })) })); } }) }) })));
+                                    } }, { children: (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: "flex flex-1 justify-between" }, { children: renderListItem(item) })) }), index)); }) }), (0, jsx_runtime_1.jsx)(pagination_1.SectionFooterWithPaginationInMemory, { page: data.currentPage, size: data.perPage, total: data.total, onChangePage: actions.setPage, config: paginationConfig })] }));
+                }, renderError: function (error) { return ((0, jsx_runtime_1.jsx)(section_1.SectionContentError, { children: renderErrorMessage(error) })); } }) }) })));
 }
 exports.SelectItemDialogWithSearch = SelectItemDialogWithSearch;

components/form/FormError.d.ts

 /// <reference types="react" />
-export declare const FormError: React.FC;
+import { ClassNameProps } from '../types';
+export declare const FormError: React.FC<ClassNameProps>;

components/form/FormError.js

@@ -6,2 +6,3 @@ "use strict";
 var jsx_runtime_1 = require("react/jsx-runtime");
+var classnames_1 = tslib_1.__importDefault(require("classnames"));
 var framework_1 = require("../../framework");
@@ -11,6 +12,9 @@ var types_1 = require("../types");
 var FormError = function (_a) {
-    var children = _a.children;
+    var children = _a.children, className = _a.className;
     var form = (0, framework_1.useTheme)().form;
-    return ((0, jsx_runtime_1.jsx)(alert_1.Alert, tslib_1.__assign({ tone: types_1.Tone.critical, className: form.formError.base }, { children: children })));
+    if (typeof children === 'undefined' || children === null) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(alert_1.Alert, tslib_1.__assign({ tone: types_1.Tone.critical, className: (0, classnames_1.default)(className, form.formError.base) }, { children: children })));
 };
 exports.FormError = FormError;

components/form/theme.js

@@ -8,3 +8,3 @@ "use strict";
     formError: {
-        base: 'col-span-2',
+        base: 'xl:col-span-full',
     },
@@ -11,0 +11,0 @@ input: {

components/loading/index.d.ts

 export * from './LoadingBar';
-export * from './LoadingItems';
-export * from './LoadingList';
-export * from './LoadingDetails';
-export * from './LoadingEdit';
+export * from './LoadingInput';
+export * from './LoadingDescriptionItem';
+export * from './SectionContentListLoading';
+export * from './SectionContentLoadingDetails';
+export * from './SectionContentLoadingForm';
 export * from './LoadingListItem';

components/loading/index.js

@@ -5,6 +5,7 @@ "use strict";
 tslib_1.__exportStar(require("./LoadingBar"), exports);
-tslib_1.__exportStar(require("./LoadingItems"), exports);
-tslib_1.__exportStar(require("./LoadingList"), exports);
-tslib_1.__exportStar(require("./LoadingDetails"), exports);
-tslib_1.__exportStar(require("./LoadingEdit"), exports);
+tslib_1.__exportStar(require("./LoadingInput"), exports);
+tslib_1.__exportStar(require("./LoadingDescriptionItem"), exports);
+tslib_1.__exportStar(require("./SectionContentListLoading"), exports);
+tslib_1.__exportStar(require("./SectionContentLoadingDetails"), exports);
+tslib_1.__exportStar(require("./SectionContentLoadingForm"), exports);
 tslib_1.__exportStar(require("./LoadingListItem"), exports);

components/loading/theme.js

@@ -20,3 +20,3 @@ "use strict";
         lower: {
-            base: 'p-6 mt-1 mb-1 w-full',
+            base: 'p-5 mt-1 w-full',
         },
@@ -26,8 +26,8 @@ },
         upper: {
-            base: 'p-2.5 w-40',
+            base: 'p-1.5 w-40',
         },
         lower: {
-            base: 'p-3 w-full',
+            base: 'p-2.5 pb-2.5-1px w-full mt-1 mb-1',
         },
     },
 };

components/section/index.d.ts

@@ -5,4 +5,5 @@ export * from './Section/Section';
 export * from './Section/SectionContentList';
-export * from './Section/SectionContentTwoColumn';
 export * from './Section/SubsectionTitle';
+export * from './Section/SectionContentTitle';
+export * from './Section/SectionContentError';
 export * from './SectionHeader/SectionHeader';
@@ -9,0 +10,0 @@ export * from './SectionHeader/SectionHeaderSpacer';

components/section/index.js

@@ -8,4 +8,5 @@ "use strict";
 tslib_1.__exportStar(require("./Section/SectionContentList"), exports);
-tslib_1.__exportStar(require("./Section/SectionContentTwoColumn"), exports);
 tslib_1.__exportStar(require("./Section/SubsectionTitle"), exports);
+tslib_1.__exportStar(require("./Section/SectionContentTitle"), exports);
+tslib_1.__exportStar(require("./Section/SectionContentError"), exports);
 tslib_1.__exportStar(require("./SectionHeader/SectionHeader"), exports);
@@ -12,0 +13,0 @@ tslib_1.__exportStar(require("./SectionHeader/SectionHeaderSpacer"), exports);

components/section/Section/SectionContent.d.ts

 /// <reference types="react" />
 import { ClassNameProps } from '../../types';
-declare type Props = ClassNameProps;
-export declare const SectionContent: React.FC<Props>;
-export {};
+export declare type SectionContentProps = ClassNameProps & {
+    layout?: Layout;
+};
+export declare enum Layout {
+    oneColumnGrid = "oneColumnGrid",
+    twoColumnGrid = "twoColumnGrid"
+}
+export declare const SectionContent: React.FC<SectionContentProps>;

components/section/Section/SectionContent.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SectionContent = void 0;
+exports.SectionContent = exports.Layout = void 0;
 var tslib_1 = require("tslib");
@@ -8,7 +8,16 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var framework_1 = require("../../../framework");
+var Layout;
+(function (Layout) {
+    Layout["oneColumnGrid"] = "oneColumnGrid";
+    Layout["twoColumnGrid"] = "twoColumnGrid";
+})(Layout = exports.Layout || (exports.Layout = {}));
 var SectionContent = function (_a) {
-    var children = _a.children, className = _a.className;
+    var layout = _a.layout, children = _a.children, className = _a.className;
     var section = (0, framework_1.useTheme)().section;
-    return ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: (0, classnames_1.default)(section.content.base, className) }, { children: children })));
+    var layoutStyle = 
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    typeof layout !== 'undefined' ? section.content.layout[layout] : '';
+    return ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: (0, classnames_1.default)(section.content.base, layoutStyle, className) }, { children: children })));
 };
 exports.SectionContent = SectionContent;

components/section/Section/SectionContentList.d.ts

 /// <reference types="react" />
 import { ClassNameProps } from '../../types';
-declare type Props = ClassNameProps;
-declare type SectionListEmptyProps = ClassNameProps;
-declare type SectionListErrorProps = ClassNameProps;
-export declare const SectionContentList: React.FC<Props>;
-export declare const SectionContentListEmpty: React.FC<SectionListEmptyProps>;
-export declare const SectionContentListError: React.FC<SectionListErrorProps>;
-export {};
+export declare type SectionContentListProps = ClassNameProps;
+export declare const SectionContentList: React.FC<SectionContentListProps>;

components/section/Section/SectionContentList.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SectionContentListError = exports.SectionContentListEmpty = exports.SectionContentList = void 0;
+exports.SectionContentList = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var classnames_1 = tslib_1.__importDefault(require("classnames"));
-var IconWarning_1 = tslib_1.__importDefault(require("@aboutbits/react-material-icons/dist/IconWarning"));
-var SectionItem_1 = require("../SectionItem/SectionItem");
 var framework_1 = require("../../../framework");
@@ -16,13 +14,1 @@ var SectionContentList = function (_a) {
 exports.SectionContentList = SectionContentList;
-var SectionContentListEmpty = function (_a) {
-    var children = _a.children, className = _a.className;
-    var section = (0, framework_1.useTheme)().section;
-    return ((0, jsx_runtime_1.jsx)(SectionItem_1.SectionListItem, tslib_1.__assign({ className: (0, classnames_1.default)(section.contentListEmpty.base, className) }, { children: children })));
-};
-exports.SectionContentListEmpty = SectionContentListEmpty;
-var SectionContentListError = function (_a) {
-    var children = _a.children, className = _a.className;
-    var section = (0, framework_1.useTheme)().section;
-    return ((0, jsx_runtime_1.jsxs)(SectionItem_1.SectionListItem, tslib_1.__assign({ className: (0, classnames_1.default)(section.contentListError.base, className) }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: section.contentListError.iconContainer.base }, { children: (0, jsx_runtime_1.jsx)(IconWarning_1.default, { height: 22, width: 22, className: section.contentListError.icon.base }) })), (0, jsx_runtime_1.jsx)("span", tslib_1.__assign({ className: section.contentListError.children.base }, { children: children }))] })));
-};
-exports.SectionContentListError = SectionContentListError;

components/section/theme.d.ts

@@ -10,11 +10,19 @@ declare const _default: {
         base: string;
+        layout: {
+            oneColumnGrid: string;
+            twoColumnGrid: string;
+        };
     };
-    contentList: {
+    contentTitle: {
         base: string;
     };
-    contentListEmpty: {
-        base: string;
+    contentMessage: {
+        container: {
+            base: string;
+        };
     };
-    contentListError: {
-        base: string;
+    contentError: {
+        container: {
+            base: string;
+        };
         icon: {
@@ -30,2 +38,5 @@ base: string;
     };
+    contentList: {
+        base: string;
+    };
     contentTwoColumn: {
@@ -32,0 +43,0 @@ base: string;

components/section/theme.js

@@ -11,12 +11,18 @@ "use strict";
     content: {
-        base: 'flex flex-col gap-y-6 px-4 md:px-6 pt-4 md:pt-6 pb-8 md:pb-9',
+        base: 'px-4 md:px-6 pt-4 md:pt-6 pb-8 md:pb-9',
+        layout: {
+            oneColumnGrid: 'grid xl:gap-x-11 gap-y-6',
+            twoColumnGrid: 'grid xl:grid-cols-2 xl:gap-x-11 gap-y-6',
+        },
     },
-    contentList: {
-        base: '',
+    contentTitle: { base: 'text-2xl' },
+    contentMessage: {
+        container: {
+            base: 'flex justify-center items-center',
+        },
     },
-    contentListEmpty: {
-        base: 'justify-center py-4',
-    },
-    contentListError: {
-        base: 'justify-center py-4',
+    contentError: {
+        container: {
+            base: 'flex justify-center items-center',
+        },
         icon: {
@@ -32,2 +38,5 @@ base: 'fill-current text-white',
     },
+    contentList: {
+        base: '',
+    },
     contentTwoColumn: {
@@ -56,3 +65,3 @@ base: 'grid xl:grid-cols-2 xl:gap-x-11 gap-y-6 px-4 md:px-6 pt-4 md:pt-6 pb-8 md:pb-9',
     listItemLink: {
-        link: 'block focus:outline-neutral-800',
+        link: 'block border-b border-neutral-200 last:border-0 focus:outline-neutral-800',
         base: 'justify-between space-x-4 hover:bg-neutral-100 active:bg-neutral-100',
@@ -59,0 +68,0 @@ },

framework/theme/theme.d.ts

@@ -375,11 +375,19 @@ export declare type Theme = typeof defaultTheme;
             base: string;
+            layout: {
+                oneColumnGrid: string;
+                twoColumnGrid: string;
+            };
         };
-        contentList: {
+        contentTitle: {
             base: string;
         };
-        contentListEmpty: {
-            base: string;
+        contentMessage: {
+            container: {
+                base: string;
+            };
         };
-        contentListError: {
-            base: string;
+        contentError: {
+            container: {
+                base: string;
+            };
             icon: {
@@ -395,2 +403,5 @@ base: string;
         };
+        contentList: {
+            base: string;
+        };
         contentTwoColumn: {
@@ -397,0 +408,0 @@ base: string;

framework/theme/ThemeContext.d.ts

@@ -376,11 +376,19 @@ /// <reference types="react" />
             base: string;
+            layout: {
+                oneColumnGrid: string;
+                twoColumnGrid: string;
+            };
         };
-        contentList: {
+        contentTitle: {
             base: string;
         };
-        contentListEmpty: {
-            base: string;
+        contentMessage: {
+            container: {
+                base: string;
+            };
         };
-        contentListError: {
-            base: string;
+        contentError: {
+            container: {
+                base: string;
+            };
             icon: {
@@ -396,2 +404,5 @@ base: string;
         };
+        contentList: {
+            base: string;
+        };
         contentTwoColumn: {
@@ -398,0 +409,0 @@ base: string;

package.json

 {
   "name": "@aboutbits/react-ui",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "main": "index.js",
@@ -5,0 +5,0 @@ "types": "index.d.ts",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

256001

increased by1.12%

Number of package files

302

increased by2.03%

Lines of code

5946

increased by1.42%

No dependency changes