Loading button (#19)

.storybook/preview.tsx

@@ -3,9 +3,10 @@ import React from 'react';
 import type { Preview } from '@storybook/react';
 import { themes } from '@storybook/theming';
 
-import '../lib/theme/main.css';
 import { CreativeCodeUIProvider } from '../lib';
 
+import '../lib/theme/main.css';
+
 const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },

Changelog.md

@@ -1,13 +1,19 @@
 <!-- markdownlint-configure-file { "MD024": { "allow_different_nesting": true } } -->
 # Changelog
 
-## v0.4.0 - Radio (Jan 22 - 2024)
+## v0.4.1 - Button (Jan 22 - 2024)
+
+### 📶 Changes
+
+- Button loading
+
+## v0.4.0 - Button (Jan 22 - 2024)
 
 ### 👾 Feature
 
 - Button
 
-### 🐛 Changes
+### 📶 Changes
 
 - Storybook table info
 - Fix chromatic show controls

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",

src/docs/versions.docs.mdx

@@ -1,7 +1,7 @@
 import { Markdown, Meta } from '@storybook/blocks';
 
-import Readme from '../../Changelog.md?raw';
+import Changelog from '../../Changelog.md?raw';
 
 <Meta title='@creativecodeco-ui' name='Versions' />
 
-<Markdown>{Readme}</Markdown>
+<Markdown>{Changelog}</Markdown>

src/hooks/use-safe-button-props.hook.ts

@@ -5,11 +5,14 @@ import type { ButtonEvent, ButtonEventHandler } from '@/types';
 export default function useSafeButtonProps({
   onClick,
   onSubmit,
+  loading,
   ...props
-}: React.ComponentPropsWithoutRef<'button'>) {
+}: React.ComponentPropsWithoutRef<'button'> & {
+  loading?: boolean;
+}) {
   const wrapper = useCallback(
     (callback: ButtonEventHandler, event: ButtonEvent) => {
-      !props.disabled && callback(event);
+      !props.disabled && !loading && callback(event);
     },
     [props.disabled]
   );

src/theme/button.css

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

src/theme/main.css

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

src/theme/span.css

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

src/types/ui/components/button.types.ts

@@ -11,6 +11,8 @@ export interface ButtonType
   size?: SizeType;
   icon?: IconType;
   iconPosition?: PositionType;
+  loading?: boolean;
+  loadingLabel?: string;
 }
 
 export type ButtonRef = HTMLButtonElement;