feat(components/Button): migrate to react-aria onPress event

Author: KamilEmeleev

packages/components/src/components/Button/Button.mdx

@@ -25,6 +25,14 @@ import { Button } from '@koobiq/react-components';
 
 <Props />
 
+## Events
+
+Button supports user interactions via mouse, keyboard, and touch.
+You can handle all of these via the `onPress` prop. This is similar to the standard `onClick` event,
+but normalized to support all interaction methods equally.
+
+In addition, the `onPressStart`, `onPressEnd`, and `onPressChange` events are fired as the user interacts with the button.
+
 ## Variant
 
 To change the visual state of the button, use the `variant` prop.

packages/components/src/components/Button/Button.stories.tsx

@@ -1,13 +1,5 @@
+import { useBoolean } from '@koobiq/react-core';
 import {
-  type ComponentProps,
-  type CSSProperties,
-  type FC,
-  type MouseEvent,
-  useState,
-} from 'react';
-
-import {
-  IconArrowUpFromBracket16,
   IconArrowUpRightFromSquare16,
   IconChevronDown16,
   IconPlus16,
@@ -56,7 +48,7 @@ type Story = StoryObj<typeof meta>;
 export const Base: Story = {
   render: (args: ButtonBaseProps) => (
     // eslint-disable-next-line no-alert
-    <Button onClick={() => alert('Click')} {...args}>
+    <Button onPress={() => alert('Press')} {...args}>
       Button
     </Button>
   ),
@@ -118,14 +110,14 @@ export const Variant: Story = {
 
 export const Disabled: Story = {
   render: function Render(args: ButtonBaseProps) {
-    const [checked, setChecked] = useState(false);
+    const [checked, { set }] = useBoolean(false);
 
     return (
       <FlexBox gap="l" direction="column">
         <Button progress={checked} disabled {...args}>
           Button
         </Button>
-        <Checkbox checked={checked} onChange={setChecked}>
+        <Checkbox checked={checked} onChange={set}>
           Progress
         </Checkbox>
       </FlexBox>
@@ -154,40 +146,9 @@ export const FullWidth: Story = {
 };
 
 export const RootTag: Story = {
-  render: () => {
-    const VisuallyHiddenInput: FC<ComponentProps<'input'>> = (props) => {
-      const inputStyle = {
-        inset: 0,
-        blockSize: 1,
-        inlineSize: 1,
-        overflow: 'hidden',
-        position: 'absolute',
-        whiteSpace: 'nowrap',
-        clipPath: 'inset(50%)',
-      } as CSSProperties;
-
-      return <input style={inputStyle} {...props} />;
-    };
-
-    return (
-      <FlexBox gap="l">
-        <Button as="a" href="#" endIcon={<IconArrowUpRightFromSquare16 />}>
-          Link
-        </Button>
-        <Button
-          as="label"
-          tabIndex={-1}
-          startIcon={<IconArrowUpFromBracket16 />}
-          onMouseDown={(e: MouseEvent<HTMLLabelElement>) => e.preventDefault()}
-        >
-          Upload files
-          <VisuallyHiddenInput
-            type="file"
-            onChange={(event) => console.log(event.target.files)}
-            multiple
-          />
-        </Button>
-      </FlexBox>
-    );
-  },
+  render: () => (
+    <Button as="a" href="#" endIcon={<IconArrowUpRightFromSquare16 />}>
+      Link
+    </Button>
+  ),
 };

packages/components/src/components/Button/types.ts

@@ -13,8 +13,6 @@ export const buttonPropVariant = [
 
 export type ButtonPropVariant = (typeof buttonPropVariant)[number];
 
-export type ButtonPropOnClick = ButtonOptions['onPress'];
-
 export type ButtonBaseProps = {
   /** The content of the component. */
   children?: ReactNode;
@@ -55,5 +53,4 @@ export type ButtonBaseProps = {
   onHoverStart?: (e: HoverEvent) => void;
   /** Handler that is called when a hover interaction ends. */
   onHoverEnd?: (e: HoverEvent) => void;
-  onClick?: ButtonPropOnClick;
-};
+} & ButtonOptions;

packages/components/src/components/IconButton/IconButton.mdx

@@ -25,6 +25,14 @@ import { IconButton } from '@koobiq/react-components';
 
 <Props />
 
+## Events
+
+IconButton supports user interactions via mouse, keyboard, and touch.
+You can handle all of these via the `onPress` prop. This is similar to the standard `onClick` event,
+but normalized to support all interaction methods equally.
+
+In addition, the `onPressStart`, `onPressEnd`, and `onPressChange` events are fired as the user interacts with the button.
+
 ## Size
 
 For `l` or `xl` buttons, use the `size` prop.

packages/components/src/components/IconButton/IconButton.stories.tsx

@@ -44,7 +44,7 @@ type Story = StoryObj<typeof meta>;
 export const Base: Story = {
   render: (args: IconButtonBaseProps) => (
     // eslint-disable-next-line no-alert
-    <IconButton onClick={() => alert('Click')} {...args}>
+    <IconButton onPress={() => alert('Click')} {...args}>
       {args.children || <IconMagnifyingGlass24 />}
     </IconButton>
   ),

packages/components/src/components/IconButton/types.ts

@@ -45,5 +45,5 @@ export type IconButtonBaseProps = {
   /** Handler that is called when a hover interaction starts. */
   onHoverStart?: (e: HoverEvent) => void;
   /** Handler that is called when a hover interaction ends. */
-  onClick?: ButtonOptions['onPress'];
-};
+  onHoverEnd?: (e: HoverEvent) => void;
+} & ButtonOptions;

packages/components/src/components/Modal/Modal.stories.tsx

@@ -1,11 +1,10 @@
-import { useState } from 'react';
-
 import { useBoolean } from '@koobiq/react-core';
 import type { StoryObj } from '@storybook/react';
 
 import { Button } from '../Button';
+import { FlexBox } from '../FlexBox';
 import { Input } from '../Input';
-import { flex, spacing } from '../layout';
+import { spacing } from '../layout';
 import { Textarea } from '../Textarea';
 import { Toggle } from '../Toggle';
 
@@ -14,9 +13,7 @@ import {
   ModalContent,
   ModalFooter,
   ModalHeader,
-  type ModalPropControl,
   type ModalProps,
-  type ModalPropSize,
 } from './index';
 import { modalPropSize } from './index.js';
 
@@ -72,37 +69,27 @@ export const Base: Story = {
 
 export const Size: Story = {
   render: function Render(args: ModalProps) {
-    const [size, setSize] = useState<ModalPropSize>();
-
-    const control: ModalPropControl = ({ onClick, ...other }) => (
-      <div className={flex({ gap: 'l' })}>
+    return (
+      <FlexBox gap="l">
         {modalPropSize.map((size) => (
-          <Button
-            onClick={(e) => {
-              onClick?.(e);
-              setSize(size);
-            }}
+          <Modal
             key={size}
-            {...other}
+            size={size}
+            control={(props) => <Button {...props}>size = {size}</Button>}
+            {...args}
           >
-            size = {size}
-          </Button>
+            {({ close }) => (
+              <>
+                <ModalHeader>I have a {size} size</ModalHeader>
+                <ModalContent>But there&#39;s nothing to say…</ModalContent>
+                <ModalFooter>
+                  <Button onPress={close}>Ok</Button>
+                </ModalFooter>
+              </>
+            )}
+          </Modal>
         ))}
-      </div>
-    );
-
-    return (
-      <Modal size={size} control={control} {...args}>
-        {({ close }) => (
-          <>
-            <ModalHeader>I have a {size} size</ModalHeader>
-            <ModalContent>But there&#39;s nothing to say…</ModalContent>
-            <ModalFooter>
-              <Button onClick={close}>Ok</Button>
-            </ModalFooter>
-          </>
-        )}
-      </Modal>
+      </FlexBox>
     );
   },
 };
@@ -167,7 +154,7 @@ export const Settings: Story = {
           <>
             <ModalHeader>Adjust me</ModalHeader>
             <ModalContent>
-              <div className={flex({ direction: 'column', gap: 'l' })}>
+              <FlexBox gap="l" direction="column">
                 <Toggle
                   checked={hideBackdrop}
                   onChange={setHideBackdrop.toggle}
@@ -192,7 +179,7 @@ export const Settings: Story = {
                 >
                   Disable the exit by pressing ESC key
                 </Toggle>
-              </div>
+              </FlexBox>
             </ModalContent>
             <ModalFooter>
               <Button onClick={close}>Ok</Button>

packages/components/src/components/Modal/Modal.test.tsx

@@ -4,7 +4,7 @@ import { render, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
 
-import { Link } from '../Link';
+import { Button } from '../Button';
 
 import { Modal } from './Modal';
 import { type ModalProps, modalPropSize } from './types';
@@ -251,9 +251,7 @@ describe('Modal', () => {
         <Modal
           {...baseProps}
           onOpenChange={onOpenChange}
-          control={(props) => (
-            <Link as="button" data-testid="control" {...props} />
-          )}
+          control={(props) => <Button data-testid="control" {...props} />}
         />
       );
 

packages/components/src/components/Modal/Modal.tsx

@@ -109,12 +109,11 @@ export const Modal = forwardRef<ModalRef, ModalProps>((props, ref) => {
     slotProps?.modal
   );
 
-  const { isDisabled, onPress, ...otherTriggerProps } = triggerProps;
+  const { isDisabled, ...otherTriggerProps } = triggerProps;
 
   return (
     <>
       {control?.({
-        onClick: onPress,
         disabled: isDisabled,
         ...otherTriggerProps,
       })}