Button (#18)

* Button

* Update changelog

.storybook/main.ts

@@ -44,7 +44,8 @@ const config: StorybookConfig = {
     docsMode: true
   },
   typescript: {
-    check: true
+    check: true,
+    reactDocgen: 'react-docgen'
   }
 };
 export default config;

.vscode/settings.json

@@ -4,6 +4,8 @@
     "creativecode",
     "cssnano",
     "daisyui",
+    "docgen",
+    "Docgen",
     "firefox",
     "tailwindcss",
     "testid",

Changelog.md

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

package.json

@@ -10,7 +10,7 @@
     "framework design",
     "design system"
   ],
-  "version": "0.3.0",
+  "version": "0.4.0",
   "homepage": "https://github.com/creativecodeco/ui",
   "author": {
     "name": "John Toro",
@@ -53,41 +53,41 @@
     "react": "18.2.0",
     "react-hook-form": "7.49.3",
     "tailwindcss": "3.4.1",
-    "usehooks-ts": "2.9.2"
+    "usehooks-ts": "2.9.5"
   },
   "devDependencies": {
     "@babel/core": "7.23.7",
     "@babel/preset-env": "7.23.8",
     "@babel/preset-react": "7.23.3",
     "@babel/preset-typescript": "7.23.3",
     "@jest/globals": "29.7.0",
-    "@storybook/addon-essentials": "7.6.7",
-    "@storybook/addon-interactions": "7.6.7",
-    "@storybook/addon-links": "7.6.7",
-    "@storybook/addon-mdx-gfm": "7.6.7",
-    "@storybook/blocks": "7.6.7",
-    "@storybook/react": "7.6.7",
-    "@storybook/react-webpack5": "7.6.7",
-    "@storybook/test": "7.6.7",
+    "@storybook/addon-essentials": "7.6.10",
+    "@storybook/addon-interactions": "7.6.10",
+    "@storybook/addon-links": "7.6.10",
+    "@storybook/addon-mdx-gfm": "7.6.10",
+    "@storybook/blocks": "7.6.10",
+    "@storybook/react": "7.6.10",
+    "@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/react": "14.1.2",
     "@testing-library/user-event": "14.5.2",
     "@types/jest": "29.5.11",
-    "@types/node": "20.10.8",
-    "@types/react": "18.2.47",
+    "@types/node": "20.11.5",
+    "@types/react": "18.2.48",
     "@types/react-dom": "18.2.18",
-    "@typescript-eslint/eslint-plugin": "6.18.1",
-    "autoprefixer": "10.4.16",
-    "chromatic": "10.2.1",
+    "@typescript-eslint/eslint-plugin": "6.19.0",
+    "autoprefixer": "10.4.17",
+    "chromatic": "10.3.1",
     "classnames": "2.5.1",
     "cpx2": "7.0.1",
-    "daisyui": "4.5.0",
+    "daisyui": "4.6.0",
     "eslint": "8.56.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-config-standard": "17.1.0",
     "eslint-config-standard-react": "13.0.0",
-    "eslint-config-standard-with-typescript": "43.0.0",
+    "eslint-config-standard-with-typescript": "43.0.1",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-import-order": "2.1.4",
     "eslint-plugin-n": "16.6.2",
@@ -103,15 +103,15 @@
     "jest-environment-jsdom": "29.7.0",
     "jest-junit": "16.0.0",
     "jest-transform-css": "6.0.1",
-    "postcss-cli": "^11.0.0",
-    "prettier": "3.1.1",
+    "postcss-cli": "11.0.0",
+    "prettier": "3.2.4",
     "prop-types": "15.8.1",
     "react-dom": "18.2.0",
-    "react-icons": "5.0.0",
-    "storybook": "7.6.7",
+    "react-icons": "5.0.1",
+    "storybook": "7.6.10",
     "storybook-addon-themes": "6.1.0",
-    "string-width": "7.0.0",
-    "ts-jest": "29.1.1",
+    "string-width": "7.1.0",
+    "ts-jest": "29.1.2",
     "ts-node": "10.9.2",
     "tsc-alias": "1.8.8",
     "tsconfig-paths-webpack-plugin": "4.1.0",

src/hooks/__snapshots__/use-safe-button-props.hook.test.ts.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`useSafeButtonProps should return props 1`] = `
+{
+  "disabled": false,
+  "onClick": [Function],
+  "onSubmit": [Function],
+}
+`;

src/hooks/index.ts

@@ -0,0 +1,3 @@
+import useSafeButtonProps from './use-safe-button-props.hook';
+
+export { useSafeButtonProps };

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

@@ -0,0 +1,52 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { renderHook } from '@testing-library/react';
+
+import useSafeButtonProps from './use-safe-button-props.hook';
+
+describe('useSafeButtonProps', () => {
+  it('disabled false should execute events', () => {
+    const props = {
+      onClick: jest.fn(),
+      onSubmit: jest.fn(),
+      disabled: false
+    };
+    const result = renderHook(() => useSafeButtonProps(props)).result.current;
+
+    expect(result.disabled).toBe(false);
+
+    result.onClick({} as any);
+    result.onSubmit({} as any);
+
+    expect(props.onClick).toHaveBeenCalledTimes(1);
+    expect(props.onSubmit).toHaveBeenCalledTimes(1);
+  });
+
+  it('disabled trusty should not execute events', () => {
+    const props = {
+      onClick: jest.fn(),
+      onSubmit: jest.fn(),
+      disabled: true
+    };
+    const result = renderHook(() => useSafeButtonProps(props)).result.current;
+
+    expect(result.disabled).toBe(true);
+
+    result.onClick({} as any);
+    result.onSubmit({} as any);
+
+    expect(props.onClick).toHaveBeenCalledTimes(0);
+    expect(props.onSubmit).toHaveBeenCalledTimes(0);
+  });
+
+  it('should return props', () => {
+    const props = {
+      onClick: jest.fn(),
+      onSubmit: jest.fn(),
+      disabled: false
+    };
+
+    const result = renderHook(() => useSafeButtonProps(props)).result.current;
+
+    expect(result).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,36 @@
+import { useCallback } from 'react';
+
+import type { ButtonEvent, ButtonEventHandler } from '@/types';
+
+export default function useSafeButtonProps({
+  onClick,
+  onSubmit,
+  ...props
+}: React.ComponentPropsWithoutRef<'button'>) {
+  const wrapper = useCallback(
+    (callback: ButtonEventHandler, event: ButtonEvent) => {
+      !props.disabled && callback(event);
+    },
+    [props.disabled]
+  );
+
+  const handleClick = useCallback(
+    (event: ButtonEvent) => {
+      onClick && wrapper(onClick, event);
+    },
+    [onClick, wrapper]
+  );
+
+  const handleSubmit = useCallback(
+    (event: ButtonEvent) => {
+      onSubmit && wrapper(onSubmit, event);
+    },
+    [onSubmit, wrapper]
+  );
+
+  return {
+    ...props,
+    onClick: handleClick,
+    onSubmit: handleSubmit
+  };
+}

src/index.ts

@@ -1,11 +1,13 @@
 export * from '@/helpers';
 
+export * from '@/hooks';
+
 export * from '@/theme';
 
 export * from '@/ui/components';
 export * from '@/ui/forms';
 export * from '@/ui/provider';
 
-export type * from '@/types';
-
 export * from '@/utils';
+
+export type * from '@/types';

src/theme/button.css

@@ -0,0 +1,65 @@
+.button {
+  @apply btn;
+
+  &-link {
+    @apply btn-link;
+  }
+
+  &-outline {
+    @apply btn-outline;
+  }
+
+  &-color {
+    &-neutral {
+      @apply btn-neutral;
+    }
+
+    &-primary {
+      @apply btn-primary;
+    }
+
+    &-secondary {
+      @apply btn-secondary;
+    }
+
+    &-accent {
+      @apply btn-accent;
+    }
+
+    &-success {
+      @apply btn-success;
+    }
+
+    &-warning {
+      @apply btn-warning;
+    }
+
+    &-info {
+      @apply btn-info;
+    }
+
+    &-error {
+      @apply btn-error;
+    }
+  }
+
+  &-size {
+    &-lg {
+      @apply btn-lg;
+    }
+
+    &-sm {
+      @apply btn-sm;
+    }
+
+    &-xs {
+      @apply btn-xs;
+    }
+  }
+
+  &:focus,
+  &:hover,
+  &:active {
+    @apply btn-active;
+  }
+}

src/theme/main.css

@@ -3,6 +3,7 @@
 @import 'tailwindcss/utilities';
 
 @import './avatar.css';
+@import './button.css';
 @import './checkbox.css';
 @import './radio.css';
 @import './text-box.css';

src/types/index.ts

@@ -1,3 +1,3 @@
-export * from './ui/base';
-export * from './ui/components';
-export * from './ui/forms';
+export type * from './ui/base';
+export type * from './ui/components';
+export type * from './ui/forms';

src/types/ui/base/constants.types.ts

@@ -7,4 +7,14 @@ export type ColorType =
   | 'warning'
   | 'info'
   | 'error';
+export type ColorButtonType =
+  | 'primary'
+  | 'secondary'
+  | 'accent'
+  | 'success'
+  | 'warning'
+  | 'info'
+  | 'error'
+  | 'ghost'
+  | 'neutral';
 export type PositionType = 'left' | 'right';

src/types/ui/base/dom.types.ts

@@ -0,0 +1,2 @@
+export type ButtonEvent = React.MouseEvent<HTMLButtonElement, MouseEvent>;
+export type ButtonEventHandler = React.MouseEventHandler<HTMLButtonElement>;

src/types/ui/base/index.ts

@@ -1,2 +1,3 @@
 export type * from './constants.types';
+export type * from './dom.types';
 export type * from './error.types';

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

@@ -0,0 +1,16 @@
+import type { ColorButtonType, SizeType } from '@/types';
+import type { IconType } from 'react-icons';
+import type { PositionType } from '@/types';
+
+export interface ButtonType
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  isLink?: boolean;
+  color?: ColorButtonType;
+  outline?: boolean;
+
+  size?: SizeType;
+  icon?: IconType;
+  iconPosition?: PositionType;
+}
+
+export type ButtonRef = HTMLButtonElement;

src/types/ui/components/index.ts

@@ -1,3 +1,2 @@
-import { AvatarType } from './avatar.types';
-
-export type { AvatarType };
+export type * from './avatar.types';
+export type * from './button.types';

src/types/ui/forms/radio.types.ts

@@ -2,7 +2,6 @@ import type { ColorType, ErrorType, PositionType, SizeType } from '@/types';
 
 export interface RadioItemType {
   label?: string;
-  checked?: boolean;
   value?: string | number;
 }