Merge pull request #9 from receter/no-react-aria

Remove react-aria dependency

packages/example-consumer/src/App.tsx

@@ -16,7 +16,7 @@ function App() {
       <Button
         aria-busy="true"
         className="example-button"
-        onPress={() => setCount((count) => count + 1)}
+        onClick={() => setCount((count) => count + 1)}
       >
         <img src={viteLogo} className={classInlineIcon} /> count is {count}
       </Button>

packages/ui/RAW.md

@@ -1,5 +1 @@
 # A document with raw thoughts and ideas just so they don't get lost.
-
-For now I decide to use `react-aria` under the hood and follow their prop interfaces. This means that I will have to use `isDisabled` instead of disabled and `onPress` instead of `onClick`.
-
-Inline icon should probably be just a helper class instead of a component.

packages/ui/fixtures/Button.fixture.tsx

@@ -8,12 +8,16 @@ import SvgIconFocusLog from "./resources/icon-focus-log.svg?react";
 export default function ButtonFixture() {
   const [label] = useValue("Label", { defaultValue: "Blick me!" });
   const [withIcon] = useValue("With icon", { defaultValue: false });
-  const [variantString] = useFixtureSelect("Variant", {
+  const [variant] = useFixtureSelect("Variant", {
     options: ["default", "primary"],
-    defaultValue: undefined,
+    defaultValue: "default",
+  });
+  const [size] = useFixtureSelect("Size", {
+    options: ["default", "lg"],
+    defaultValue: "default",
   });
   const [isDisabled] = useValue("Disabled", { defaultValue: false });
-  const variant = variantString === "default" ? undefined : variantString;
+  const [isFullWidth] = useValue("isFullWidth", { defaultValue: false });
   const refButton = useRef(null);
   return (
     <>
@@ -22,11 +26,13 @@ export default function ButtonFixture() {
         <div>{"<Button>"}</div>
         <Button
           ref={refButton}
-          onPress={() => {
-            console.log("Hi!");
+          onClick={() => {
+            alert("Button clicked");
           }}
-          variant={variant}
-          isDisabled={isDisabled}
+          size={size === "default" ? undefined : size}
+          variant={variant === "default" ? undefined : variant}
+          isFullWidth={isFullWidth}
+          disabled={isDisabled}
         >
           {withIcon && <SvgIconFocusLog className={classInlineIcon} />}
           {withIcon && <>&nbsp;</>}
@@ -35,14 +41,18 @@ export default function ButtonFixture() {
         <div>{"<ButtonA>"}</div>
         <ButtonA
           href="https://github.com/receter/sys42"
-          variant={variant}
-          isDisabled={isDisabled}
+          size={size === "default" ? undefined : size}
+          variant={variant === "default" ? undefined : variant}
+          isFullWidth={isFullWidth}
           title="Go to GitHub"
         >
           {withIcon && <SvgIconFocusLog className={classInlineIcon} />}
           {withIcon && <>&nbsp;</>}
           {label}
         </ButtonA>
+        <div>
+          <a href="https://google.com">This is a link</a>
+        </div>
       </Stack>
     </>
   );

packages/ui/fixtures/simpleForm.fixture.tsx

@@ -22,10 +22,10 @@ export default function Fixture() {
           {({ htmlFor }) => <TextInput id={htmlFor} type="tel" />}
         </FormField>
         <div className={classButtonGroup}>
-          <Button variant="primary" onPress={() => window.alert("Hi!")}>
+          <Button variant="primary" onClick={() => window.alert("Hi!")}>
             {label}
           </Button>
-          <Button onPress={() => window.alert("Hi!")}>Cancel</Button>
+          <Button onClick={() => window.alert("Hi!")}>Cancel</Button>
         </div>
         <div className={classCard}>
           <Stack spacing="md">
@@ -36,10 +36,10 @@ export default function Fixture() {
               {({ htmlFor }) => <TextInput id={htmlFor} type="tel" />}
             </FormField>
             <div className={classButtonGroupReverse}>
-              <Button variant="primary" onPress={() => window.alert("Hi!")}>
+              <Button variant="primary" onClick={() => window.alert("Hi!")}>
                 {label}
               </Button>
-              <Button onPress={() => window.alert("Hi!")}>Cancel</Button>
+              <Button onClick={() => window.alert("Hi!")}>Cancel</Button>
             </div>
           </Stack>
         </div>

packages/ui/lib/Button/styles.module.css

@@ -16,16 +16,23 @@
   cursor: pointer;
 }
 
+.button:focus {
+  outline: 0;
+}
+
+.button:focus-visible {
+  outline: var(--sys42-button-outline--focus-visible);
+  outline-offset: var(--sys42-button-outline-offset--focus-visible);
+}
+
 .button:hover {
   background: var(--sys42-button-background--hover);
   box-shadow: var(--sys42-button-shadow--hover);
   transition: var(--sys42-button-transition--hover);
   border-color: var(--sys42-button-border-color--hover);
 }
 
-.button:active,
-.button_pressed,
-.button:hover.button_pressed {
+.button:active {
   background: var(--sys42-button-background--active);
   transition: var(--sys42-button-transition--active);
   border-color: var(--sys42-button-border-color--active);
@@ -56,9 +63,7 @@
   border-color: var(--sys42-button_primary-border-color--hover);
 }
 
-.button_primary:active,
-.button_primary.button_pressed,
-.button_primary:hover.button_pressed {
+.button_primary:active {
   background: var(--sys42-button_primary-background--active);
   transition: var(--sys42-button_primary-transition--active);
   border-color: var(--sys42-button_primary-border-color--active);
@@ -70,3 +75,14 @@
   color: var(--sys42-button_primary-color--disabled);
   border-color: var(--sys42-button_primary-border-color--disabled);
 }
+
+.button_lg {
+  font-size: var(--sys42-button_lg-font-size);
+  border-radius: var(--sys42-button_lg-border-radius);
+  padding: var(--sys42-button_lg-padding-horiz)
+    var(--sys42-button_lg-padding-vert);
+}
+
+.button_fullWidth {
+  width: 100%;
+}

packages/ui/lib/Button/useBaseButton.ts

@@ -1,16 +1,12 @@
-import React, { HTMLAttributes, ReactNode, useRef } from "react";
-import { useButton as useReactAriaButton } from "@react-aria/button";
-import { FocusableProps, PressEvents } from "@react-types/shared";
+import React, { HTMLAttributes, useRef } from "react";
 import { mergeRefs } from "react-merge-refs";
 
 import { Sys42Props } from "../types";
 
 // This are our props that we want to expose as an interface to the Button component
-interface ButtonProps extends PressEvents, FocusableProps {
+interface ButtonProps {
   /** Whether the button is disabled. */
   isDisabled?: boolean;
-  /** The content to display in the button. */
-  children?: ReactNode;
 }
 
 export type BaseButtonProps<ElemProps> = Sys42Props<ButtonProps, ElemProps>;
@@ -27,21 +23,12 @@ export function useBaseButton<
 >({ props, elementType, forwardedRef }: UseBaseButtonOptions<Props, Elem>) {
   const ref = useRef<Elem>(null);
 
-  const { buttonProps, isPressed: buttonIsPressed } = useReactAriaButton(
-    {
-      ...props,
-      elementType,
-    },
-    ref,
-  );
-
   return {
     buttonProps: {
-      ...buttonProps,
-      children: props.children,
-      className: props.className, // Class name is not handled by useReactAriaButton
+      type: elementType === "button" ? "button" : undefined,
+      role: elementType !== "button" ? "button" : undefined,
+      ...props,
     },
-    buttonIsPressed,
     buttonRef: mergeRefs([forwardedRef, ref]),
   };
 }

packages/ui/lib/Button/useButton.ts

@@ -12,13 +12,15 @@ import styles from "./styles.module.css";
 // DOC: Props that are specific to the styled version of the button can be added at this point.
 export type ButtonProps<ElemProps> = BaseButtonProps<ElemProps> & {
   variant?: "primary";
+  size?: "lg";
+  isFullWidth?: boolean;
 };
 
 export function useButton<
   Props extends ButtonProps<HTMLAttributes<HTMLElement>>,
   Elem extends HTMLElement,
 >(options: UseBaseButtonOptions<Props, Elem>) {
-  const { variant, ...restProps } = options.props;
+  const { variant, size, isFullWidth, ...restProps } = options.props;
 
   const button = useBaseButton({
     ...options,
@@ -28,7 +30,8 @@ export function useButton<
   button.buttonProps.className = cn(
     button.buttonProps.className,
     variant === "primary" && styles.button_primary,
-    button.buttonIsPressed && styles.button_pressed,
+    size === "lg" && styles.button_lg,
+    isFullWidth && styles.button_fullWidth,
     styles.button,
   );
 

packages/ui/lib/default-custom-properties.css

@@ -45,6 +45,9 @@
   --sys42-button-background--disabled: #eee;
   --sys42-button-border-color--disabled: #ddd;
   --sys42-button-color--disabled: #999;
+  /* :focus-visible */
+  --sys42-button-outline--focus-visible: 0.125rem solid #333;
+  --sys42-button-outline-offset--focus-visible: 0.125rem;
 
   /* Button (primary) */
   --sys42-button_primary-background: #333;
@@ -64,6 +67,14 @@
   --sys42-button_primary-border-color--disabled: #aaa;
   --sys42-button_primary-color--disabled: #eee;
 
+  /* Button (size: lg) */
+  --sys42-button_lg-font-size: var(--sys42-button-font-size);
+  --sys42-button_lg-border-radius: var(--sys42-button-border-radius);
+  --sys42-button_lg-padding-horiz: calc(
+    var(--sys42-button-padding-horiz) * 1.5
+  );
+  --sys42-button_lg-padding-vert: calc(var(--sys42-button-padding-vert) * 1.5);
+
   /* Input Text */
   --sys42-input-text-background: #fff;
   --sys42-input-text-border-radius: var(--sys42-border-radius-sm);

packages/ui/package.json

@@ -31,8 +31,6 @@
     "prepublishOnly": "pnpm -r --filter ui... build"
   },
   "dependencies": {
-    "@react-aria/button": "^3.9.3",
-    "@react-types/shared": "^3.23.1",
     "@sys42/utils": "workspace:^",
     "normalize.css": "^8.0.1",
     "react-merge-refs": "^2.1.1"

packages/ui/src/App.tsx

@@ -26,12 +26,12 @@ function App() {
       <div className="card">
         <Button
           className="hello"
-          onPress={() => setCount((count) => count + 1)}
+          onClick={() => setCount((count) => count + 1)}
         >
           I have hello
           <SvgReact className={classInlineIcon} /> Count is count is {count}
         </Button>
-        <Button onPress={() => setCount((count) => count + 1)}>
+        <Button onClick={() => setCount((count) => count + 1)}>
           <img className={classInlineIcon} src={"./vite.svg"} alt="Vite logo" />{" "}
           Count is {count}
         </Button>
@@ -40,9 +40,7 @@ function App() {
         </p>
       </div>
       <div>
-        <Button data-hello="asdf" onPressEnd={() => {}}>
-          Button asddf
-        </Button>
+        <Button data-hello="asdf">Button asddf</Button>
 
         <ButtonA draggable={false} href="https://google.com">
           ButtonA