@aboutbits/react-ui - npm Package Compare versions

Comparing version 0.0.12 to 0.0.13

components/button/Button.js

@@ -8,4 +8,3 @@ "use strict";
 var react_1 = tslib_1.__importDefault(require("react"));
-var LinkComponentContext_1 = require("../../framework/router/LinkComponentContext");
-var ThemeContext_1 = require("../../framework/theme/ThemeContext");
+var framework_1 = require("../../framework");
 var Variant;
@@ -30,3 +29,3 @@ (function (Variant) {
     var _b = _a.variant, variant = _b === void 0 ? Variant.solid : _b, _c = _a.size, size = _c === void 0 ? Size.md : _c, _d = _a.tone, tone = _d === void 0 ? Tone.primary : _d, _e = _a.type, type = _e === void 0 ? 'button' : _e, _f = _a.className, className = _f === void 0 ? '' : _f, children = _a.children, props = tslib_1.__rest(_a, ["variant", "size", "tone", "type", "className", "children"]);
-    var button = ThemeContext_1.useTheme().button;
+    var button = framework_1.useTheme().button;
     return (jsx_runtime_1.jsx("button", tslib_1.__assign({ className: classnames_1.default(button.button.base, button.button.variantTone[variant].base, !props.disabled
@@ -45,4 +44,4 @@ /* eslint-disable */
     var _b = _a.variant, variant = _b === void 0 ? Variant.solid : _b, _c = _a.size, size = _c === void 0 ? Size.md : _c, _d = _a.tone, tone = _d === void 0 ? Tone.primary : _d, _e = _a.className, className = _e === void 0 ? '' : _e, children = _a.children, props = tslib_1.__rest(_a, ["variant", "size", "tone", "className", "children"]);
-    var LinkComponent = LinkComponentContext_1.useLinkComponent();
-    var button = ThemeContext_1.useTheme().button;
+    var LinkComponent = framework_1.useLinkComponent();
+    var button = framework_1.useTheme().button;
     return (jsx_runtime_1.jsx(LinkComponent, tslib_1.__assign({}, props, { ref: ref, className: classnames_1.default(button.button.base, button.button.variantTone[variant].base, !props.disabled
@@ -49,0 +48,0 @@ /* eslint-disable */

components/section/index.d.ts

@@ -7,1 +7,2 @@ export * from './Section/Section';
 export * from './SectionItem/SectionItem';
+export * from './SectionItem/SectionDescriptionItem';

components/section/index.js

@@ -10,1 +10,2 @@ "use strict";
 tslib_1.__exportStar(require("./SectionItem/SectionItem"), exports);
+tslib_1.__exportStar(require("./SectionItem/SectionDescriptionItem"), exports);

components/section/SectionItem/SectionItem.d.ts

@@ -1,15 +0,3 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { ClassNameProps } from '../../types';
-declare type SectionDescriptionItemProps = ClassNameProps & {
-    /**
-     * Defines the content of the section description item.
-     * Will be placed inside <dl>.
-     */
-    content: ReactNode;
-    /**
-     * Defines the title of section description item.
-     * Will be placed inside <dt>.
-     */
-    title: ReactNode;
-};
 declare type SectionListItemWithActionProps = ClassNameProps & {
@@ -21,3 +9,4 @@ /**
 };
-declare type SectionListItemWithButton = ClassNameProps & {
+export declare const SectionListItem: React.FC<ClassNameProps>;
+export declare const SectionListItemButton: React.ForwardRefExoticComponent<ClassNameProps & {
     /**
@@ -27,7 +16,7 @@ * On Click handler for the button
     onClick: () => void;
-};
-export declare const SectionListItem: React.FC<ClassNameProps>;
-export declare const SectionListItemWithButton: React.FC<SectionListItemWithButton>;
+} & React.RefAttributes<HTMLButtonElement>>;
+export declare const SectionListItemLink: React.ForwardRefExoticComponent<React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    href: string;
+} & React.RefAttributes<HTMLAnchorElement>>;
 export declare const SectionListItemWithAction: React.FC<SectionListItemWithActionProps>;
-export declare const SectionDescriptionItem: React.FC<SectionDescriptionItemProps>;
 export {};

components/section/SectionItem/SectionItem.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SectionDescriptionItem = exports.SectionListItemWithAction = exports.SectionListItemWithButton = exports.SectionListItem = void 0;
+exports.SectionListItemWithAction = exports.SectionListItemLink = exports.SectionListItemButton = exports.SectionListItem = void 0;
 var tslib_1 = require("tslib");
@@ -8,26 +8,28 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var IconKeyboardArrowRight_1 = tslib_1.__importDefault(require("@aboutbits/react-material-icons/dist/IconKeyboardArrowRight"));
-var ThemeContext_1 = require("../../../framework/theme/ThemeContext");
+var react_1 = tslib_1.__importDefault(require("react"));
+var framework_1 = require("../../../framework");
 var SectionListItem = function (_a) {
     var className = _a.className, children = _a.children;
-    var section = ThemeContext_1.useTheme().section;
+    var section = framework_1.useTheme().section;
     return (jsx_runtime_1.jsx("div", tslib_1.__assign({ className: classnames_1.default(className, section.listItem.base, section.listItem.normal) }, { children: children }), void 0));
 };
 exports.SectionListItem = SectionListItem;
-var SectionListItemWithButton = function (_a) {
-    var children = _a.children, onClick = _a.onClick, className = _a.className;
-    var section = ThemeContext_1.useTheme().section;
-    return (jsx_runtime_1.jsx("button", tslib_1.__assign({ onClick: onClick, className: "block w-full" }, { children: jsx_runtime_1.jsxs(exports.SectionListItem, tslib_1.__assign({ className: classnames_1.default(section.listItemWithButton.base, section.listItemWithButton.normal, className) }, { children: [children, jsx_runtime_1.jsx(IconKeyboardArrowRight_1.default, { width: "24", height: "24", className: "fill-current" }, void 0)] }), void 0) }), void 0));
-};
-exports.SectionListItemWithButton = SectionListItemWithButton;
+exports.SectionListItemButton = react_1.default.forwardRef(function (_a, ref) {
+    var children = _a.children, onClick = _a.onClick, className = _a.className, props = tslib_1.__rest(_a, ["children", "onClick", "className"]);
+    var section = framework_1.useTheme().section;
+    return (jsx_runtime_1.jsx("button", tslib_1.__assign({ onClick: onClick, className: "block w-full", ref: ref }, props, { children: jsx_runtime_1.jsxs(exports.SectionListItem, tslib_1.__assign({ className: classnames_1.default(section.listItemButton.base, section.listItemButton.normal, className) }, { children: [children, jsx_runtime_1.jsx(IconKeyboardArrowRight_1.default, { width: "24", height: "24", className: "fill-current" }, void 0)] }), void 0) }), void 0));
+});
+exports.SectionListItemButton.displayName = 'SectionListItemButton';
+exports.SectionListItemLink = react_1.default.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, props = tslib_1.__rest(_a, ["children", "className"]);
+    var LinkComponent = framework_1.useLinkComponent();
+    var section = framework_1.useTheme().section;
+    return (jsx_runtime_1.jsx(LinkComponent, tslib_1.__assign({ className: "block", ref: ref }, props, { children: jsx_runtime_1.jsxs(exports.SectionListItem, tslib_1.__assign({ className: classnames_1.default(section.listItemLink.base, section.listItemLink.normal, className) }, { children: [children, jsx_runtime_1.jsx(IconKeyboardArrowRight_1.default, { width: "24", height: "24", className: "fill-current" }, void 0)] }), void 0) }), void 0));
+});
+exports.SectionListItemLink.displayName = 'SectionListItemLink';
 var SectionListItemWithAction = function (_a) {
     var children = _a.children, action = _a.action, className = _a.className;
-    var section = ThemeContext_1.useTheme().section;
+    var section = framework_1.useTheme().section;
     return (jsx_runtime_1.jsxs(exports.SectionListItem, tslib_1.__assign({ className: classnames_1.default(section.listItemWithAction.base, className) }, { children: [children, jsx_runtime_1.jsx("div", tslib_1.__assign({ className: section.listItemWithAction.action.base }, { children: action }), void 0)] }), void 0));
 };
 exports.SectionListItemWithAction = SectionListItemWithAction;
-var SectionDescriptionItem = function (_a) {
-    var title = _a.title, content = _a.content, className = _a.className;
-    var section = ThemeContext_1.useTheme().section;
-    return (jsx_runtime_1.jsxs("dl", tslib_1.__assign({ className: classnames_1.default(section.descriptionItem.base, className) }, { children: [jsx_runtime_1.jsx("dt", tslib_1.__assign({ className: section.descriptionItem.title.base }, { children: title }), void 0), jsx_runtime_1.jsx("dd", { children: content }, void 0)] }), void 0));
-};
-exports.SectionDescriptionItem = SectionDescriptionItem;

framework/router/LinkComponentContext.js

@@ -11,2 +11,3 @@ "use strict";
 exports.LinkComponentContext = react_1.createContext(exports.DefaultLinkComponent);
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 function useLinkComponent() {
@@ -13,0 +14,0 @@ var linkComponent = react_1.useContext(exports.LinkComponentContext);

framework/theme/theme.d.ts

@@ -177,6 +177,10 @@ export declare type Theme = typeof defaultTheme;
         };
-        listItemWithButton: {
+        listItemButton: {
             base: string;
             normal: string;
         };
+        listItemLink: {
+            base: string;
+            normal: string;
+        };
         header: {
@@ -183,0 +187,0 @@ base: string;

framework/theme/theme.js

@@ -162,6 +162,10 @@ "use strict";
         },
-        listItemWithButton: {
+        listItemButton: {
             base: 'justify-between space-x-4',
             normal: 'hover:bg-gray-600',
         },
+        listItemLink: {
+            base: 'justify-between space-x-4',
+            normal: 'hover:bg-gray-600 active:bg-gray-600',
+        },
         header: { base: 'px-4 lg:px-5 pt-5 pb-3 bg-white', normal: 'bg-white' },
@@ -168,0 +172,0 @@ title: { base: 'text-xs font-bold uppercase', normal: 'text-black' },

framework/theme/ThemeContext.d.ts

@@ -164,6 +164,10 @@ /// <reference types="react" />
         };
-        listItemWithButton: {
+        listItemButton: {
             base: string;
             normal: string;
         };
+        listItemLink: {
+            base: string;
+            normal: string;
+        };
         header: {
@@ -170,0 +174,0 @@ base: string;

package.json

 {
   "name": "@aboutbits/react-ui",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "main": "index.js",
@@ -33,3 +33,4 @@ "types": "index.d.ts",
     "classnames": "^2.3.1",
-    "lodash.merge": "^4.6.2"
+    "lodash.merge": "^4.6.2",
+    "lodash.set": "^4.3.2"
   },
@@ -50,4 +51,6 @@ "devDependencies": {
     "@testing-library/react": "^11.2.3",
+    "@testing-library/react-hooks": "^7.0.1",
     "@types/jest": "^26.0.20",
     "@types/lodash.merge": "^4.6.6",
+    "@types/lodash.set": "^4.3.6",
     "@types/node": "^14.14.22",
@@ -58,2 +61,3 @@ "@types/react": "^17.0.0",
     "autoprefixer": "^10.2.4",
+    "axios": "^0.21.1",
     "babel-eslint": "^10.1.0",
@@ -101,2 +105,4 @@ "babel-jest": "^26.6.3",
     "form.d.ts",
+    "apiHooks.js",
+    "apiHooks.d.ts",
     "header.js",
@@ -103,0 +109,0 @@ "header.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

163278

increased by6.48%

Number of package files

205

increased by7.33%

Lines of code

3549

increased by6.1%

Worsened metrics

Dependency count

3

increased by50%

Dev dependency count

48

increased by6.67%

Dependency changes

• + Addedlodash.set@^4.3.2

• + Addedlodash.set@4.3.2(transitive)