@creativecodeco/ui 0.4.0 → 0.4.1

package/lib/hooks/use-safe-button-props.hook.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
 /// <reference types="react" />
 import type { ButtonEvent } from '../types';
-export default function useSafeButtonProps({ onClick, onSubmit, ...props }: React.ComponentPropsWithoutRef<'button'>): {
+export default function useSafeButtonProps({ onClick, onSubmit, loading, ...props }: React.ComponentPropsWithoutRef<'button'> & {
+    loading?: boolean;
+}): {
     onClick: (event: ButtonEvent) => void;
     onSubmit: (event: ButtonEvent) => void;
     name?: string | undefined;

package/lib/hooks/use-safe-button-props.hook.js

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
-export default function useSafeButtonProps({ onClick, onSubmit, ...props }) {
+export default function useSafeButtonProps({ onClick, onSubmit, loading, ...props }) {
     const wrapper = useCallback((callback, event) => {
-        !props.disabled && callback(event);
+        !props.disabled && !loading && callback(event);
     }, [props.disabled]);
     const handleClick = useCallback((event) => {
         onClick && wrapper(onClick, event);

package/lib/theme/css/button.css

@@ -57,6 +57,10 @@
     }
   }
 
+  &-loading {
+    @apply pointer-events-none cursor-default;
+  }
+
   &:focus,
   &:hover,
   &:active {

package/lib/theme/css/main.css

@@ -6,4 +6,5 @@
 @import './button.css';
 @import './checkbox.css';
 @import './radio.css';
+@import './span.css';
 @import './text-box.css';

package/lib/theme/css/span.css

@@ -0,0 +1,5 @@
+.span {
+  &-loading {
+    @apply loading loading-spinner;
+  }
+}

package/lib/theme/main.css

@@ -1182,6 +1182,36 @@ html {
   margin-bottom: 0px;
   margin-inline-start: -1px;
 }
+.\!loading {
+  pointer-events: none !important;
+  display: inline-block !important;
+  aspect-ratio: 1 / 1 !important;
+  width: 1.5rem !important;
+  background-color: currentColor !important;
+  -webkit-mask-size: 100% !important;
+          mask-size: 100% !important;
+  -webkit-mask-repeat: no-repeat !important;
+          mask-repeat: no-repeat !important;
+  -webkit-mask-position: center !important;
+          mask-position: center !important;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E") !important;
+          mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E") !important;
+}
+.loading {
+  pointer-events: none;
+  display: inline-block;
+  aspect-ratio: 1 / 1;
+  width: 1.5rem;
+  background-color: currentColor;
+  -webkit-mask-size: 100%;
+          mask-size: 100%;
+  -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+          mask-position: center;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+          mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
 :where(.menu li:empty) {
   --tw-bg-opacity: 1;
   background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
@@ -2684,6 +2714,10 @@ html {
   border-radius: 9999px;
   padding: 0px;
 }
+.button-loading {
+  pointer-events: none;
+  cursor: default;
+}
 @supports (color: color-mix(in oklab, black, black)) {
 
   .button:focus,
@@ -3230,6 +3264,21 @@ html {
   height: 2rem;
   width: 2rem;
 }
+.span-loading {
+  pointer-events: none;
+  display: inline-block;
+  aspect-ratio: 1 / 1;
+  width: 1.5rem;
+  background-color: currentColor;
+  -webkit-mask-size: 100%;
+          mask-size: 100%;
+  -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+          mask-position: center;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+          mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
 .text-box-size-xs {
   height: 1.5rem;
   padding-left: 0.5rem;

package/lib/types/ui/components/button.types.d.ts

@@ -9,5 +9,7 @@ export interface ButtonType extends React.ButtonHTMLAttributes<HTMLButtonElement
     size?: SizeType;
     icon?: IconType;
     iconPosition?: PositionType;
+    loading?: boolean;
+    loadingLabel?: string;
 }
 export type ButtonRef = HTMLButtonElement;

package/lib/ui/components/button/button.component.js

@@ -1,20 +1,27 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo } from 'react';
 import cls from 'classnames';
 import { useSafeButtonProps } from '../../../hooks';
-const Button = forwardRef(({ children, isLink, color, outline, size = 'md', icon: Icon, iconPosition = 'left', disabled, ...otherProps }, ref) => {
-    const safeProps = useSafeButtonProps({ disabled, ...otherProps });
-    const getIcon = () => {
+const Button = forwardRef(({ children, isLink, color, outline, size = 'md', icon: Icon, iconPosition = 'left', loading, loadingLabel, ...otherProps }, ref) => {
+    const safeProps = useSafeButtonProps({ loading, ...otherProps });
+    const newIcon = useMemo(() => {
         if (!Icon) {
             return;
         }
         return _jsx(Icon, {});
-    };
-    return (_jsxs("button", { ref: ref, className: cls('button', {
+    }, [Icon]);
+    const content = useMemo(() => {
+        if (loading) {
+            return (_jsxs(_Fragment, { children: [_jsx("span", { className: 'span-loading' }), loadingLabel] }));
+        }
+        return (_jsxs(_Fragment, { children: [iconPosition === 'left' && newIcon, children, iconPosition === 'right' && newIcon] }));
+    }, [loading, loadingLabel, iconPosition, children, newIcon]);
+    return (_jsx("button", { ref: ref, className: cls('button', {
             'button-link': isLink,
             'button-outline': !isLink && outline,
             [`button-color-${color}`]: !isLink && color,
-            [`button-size-${size}`]: size !== 'md'
-        }), ...safeProps, children: [iconPosition === 'left' && getIcon(), children, iconPosition === 'right' && getIcon()] }));
+            [`button-size-${size}`]: size !== 'md',
+            'button-loading': loading
+        }), ...safeProps, children: content }));
 });
 export default Button;

package/package.json

@@ -10,7 +10,7 @@
     "framework design",
     "design system"
   ],
-  "version": "0.4.0",
+  "version": "0.4.1",
   "homepage": "https://github.com/creativecodeco/ui",
   "author": {
     "name": "John Toro",
@@ -70,14 +70,14 @@
     "@storybook/react-webpack5": "7.6.10",
     "@storybook/test": "7.6.10",
     "@testing-library/dom": "9.3.4",
-    "@testing-library/jest-dom": "6.2.0",
+    "@testing-library/jest-dom": "6.2.1",
     "@testing-library/react": "14.1.2",
     "@testing-library/user-event": "14.5.2",
     "@types/jest": "29.5.11",
     "@types/node": "20.11.5",
     "@types/react": "18.2.48",
     "@types/react-dom": "18.2.18",
-    "@typescript-eslint/eslint-plugin": "6.19.0",
+    "@typescript-eslint/eslint-plugin": "6.19.1",
     "autoprefixer": "10.4.17",
     "chromatic": "10.3.1",
     "classnames": "2.5.1",