lukebennett.dev / luke-ui
[READ-ONLY] Mirror of https://github.com/lukebennett88/luke-ui. luke-ui.netlify.app/
0
Fork 0

Configure Feed

Select the types of activity you want to include in your feed.

Update types and export useButton hook (#5)

authored by

Luke Bennett and committed by
GitHub (Sep 3, 2022, 3:41 PM +1000) 1dfdac59 d0d843d1

+237 -42
+116
pnpm-lock.yaml
··· 131 131 specifiers: 132 132 '@luke-ui-internal/dev': workspace:* 133 133 '@luke-ui-internal/tsconfig': workspace:* 134 + '@react-aria/button': ^3.6.1 134 135 '@types/node': ^16.11.52 135 136 '@types/react': ^18.0.18 136 137 '@types/react-dom': ^18.0.6 137 138 react: ^18.2.0 138 139 typescript: ^4.8.2 140 + dependencies: 141 + '@react-aria/button': 3.6.1_react@18.2.0 139 142 devDependencies: 140 143 '@luke-ui-internal/dev': link:../../internal/dev 141 144 '@luke-ui-internal/tsconfig': link:../../internal/tsconfig ··· 3003 3006 '@nodelib/fs.scandir': 2.1.5 3004 3007 fastq: 1.13.0 3005 3008 3009 + /@react-aria/button/3.6.1_react@18.2.0: 3010 + resolution: {integrity: sha512-g10dk0eIQ71F1QefUymbff0yceQFHEKzOwK7J5QAFB5w/FUSmCTsMkBrrra4AogRxYHIAr5adPic5F2g7VzQFw==} 3011 + peerDependencies: 3012 + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 3013 + dependencies: 3014 + '@babel/runtime': 7.18.9 3015 + '@react-aria/focus': 3.8.0_react@18.2.0 3016 + '@react-aria/interactions': 3.11.0_react@18.2.0 3017 + '@react-aria/utils': 3.13.3_react@18.2.0 3018 + '@react-stately/toggle': 3.4.1_react@18.2.0 3019 + '@react-types/button': 3.6.1_react@18.2.0 3020 + '@react-types/shared': 3.14.1_react@18.2.0 3021 + react: 18.2.0 3022 + dev: false 3023 + 3024 + /@react-aria/focus/3.8.0_react@18.2.0: 3025 + resolution: {integrity: sha512-XuaLFdqf/6OyILifkVJo++5k2O+wlpNvXgsJkRWn/wSmB77pZKURm2MMGiSg2u911NqY+829UrSlpmhCZrc8RA==} 3026 + peerDependencies: 3027 + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 3028 + dependencies: 3029 + '@babel/runtime': 7.18.9 3030 + '@react-aria/interactions': 3.11.0_react@18.2.0 3031 + '@react-aria/utils': 3.13.3_react@18.2.0 3032 + '@react-types/shared': 3.14.1_react@18.2.0 3033 + clsx: 1.2.1 3034 + react: 18.2.0 3035 + dev: false 3036 + 3037 + /@react-aria/interactions/3.11.0_react@18.2.0: 3038 + resolution: {integrity: sha512-ZjK4m8u6FlV7Q9/1h9P2Ii6j/NwKR3BmTeGeBQssS2i4dV2pJeOPePnGzVQQGG8FzGQ+TcNRvZPXKaU4AlnBjw==} 3039 + peerDependencies: 3040 + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 3041 + dependencies: 3042 + '@babel/runtime': 7.18.9 3043 + '@react-aria/utils': 3.13.3_react@18.2.0 3044 + '@react-types/shared': 3.14.1_react@18.2.0 3045 + react: 18.2.0 3046 + dev: false 3047 + 3048 + /@react-aria/ssr/3.3.0_react@18.2.0: 3049 + resolution: {integrity: sha512-yNqUDuOVZIUGP81R87BJVi/ZUZp/nYOBXbPsRe7oltJOfErQZD+UezMpw4vM2KRz18cURffvmC8tJ6JTeyDtaQ==} 3050 + peerDependencies: 3051 + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 3052 + dependencies: 3053 + '@babel/runtime': 7.18.9 3054 + react: 18.2.0 3055 + dev: false 3056 + 3057 + /@react-aria/utils/3.13.3_react@18.2.0: 3058 + resolution: {integrity: sha512-wqjGNFX4TrXriUU1gvCaoqRhuckdoYogUWN0iyQRkTmzvb7H/NNzQzHou5ggWAdts/NzJUInwKarBWM9hCZZbg==} 3059 + peerDependencies: 3060 + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 3061 + dependencies: 3062 + '@babel/runtime': 7.18.9 3063 + '@react-aria/ssr': 3.3.0_react@18.2.0 3064 + '@react-stately/utils': 3.5.1_react@18.2.0 3065 + '@react-types/shared': 3.14.1_react@18.2.0 3066 + clsx: 1.2.1 3067 + react: 18.2.0 3068 + dev: false 3069 + 3070 + /@react-stately/toggle/3.4.1_react@18.2.0: 3071 + resolution: {integrity: sha512-Dlg7M9W52n0K+Op/H5ywdSCORW70ry6syPSahh+RXQKKdky9bckqmrpO24A92dL7Rci2H4fTsBgZGVla9b/wNQ==} 3072 + peerDependencies: 3073 + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 3074 + dependencies: 3075 + '@babel/runtime': 7.18.9 3076 + '@react-stately/utils': 3.5.1_react@18.2.0 3077 + '@react-types/checkbox': 3.3.3_react@18.2.0 3078 + '@react-types/shared': 3.14.1_react@18.2.0 3079 + react: 18.2.0 3080 + dev: false 3081 + 3082 + /@react-stately/utils/3.5.1_react@18.2.0: 3083 + resolution: {integrity: sha512-INeQ5Er2Jm+db8Py4upKBtgfzp3UYgwXYmbU/XJn49Xw27ktuimH9e37qP3bgHaReb5L3g8IrGs38tJUpnGPHA==} 3084 + peerDependencies: 3085 + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 3086 + dependencies: 3087 + '@babel/runtime': 7.18.9 3088 + react: 18.2.0 3089 + dev: false 3090 + 3091 + /@react-types/button/3.6.1_react@18.2.0: 3092 + resolution: {integrity: sha512-F7m3/MVmzChkBqD5gO7rIglPRHY6KZg/RaU8f8VqZuEOAHuQ1CtTEfpc6r9artBSs2Gdw7yNWxfCI2dP95lYow==} 3093 + peerDependencies: 3094 + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 3095 + dependencies: 3096 + '@react-types/shared': 3.14.1_react@18.2.0 3097 + react: 18.2.0 3098 + dev: false 3099 + 3100 + /@react-types/checkbox/3.3.3_react@18.2.0: 3101 + resolution: {integrity: sha512-GkhC+y4g7Dga9Ck5MNvvX11hnn9S4b9Rx1+cdFMzBczJPJZhDxO69+CPQnoFAkVQSIYEC5bh/2u34sWyF6uq6g==} 3102 + peerDependencies: 3103 + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 3104 + dependencies: 3105 + '@react-types/shared': 3.14.1_react@18.2.0 3106 + react: 18.2.0 3107 + dev: false 3108 + 3109 + /@react-types/shared/3.14.1_react@18.2.0: 3110 + resolution: {integrity: sha512-yPPgVRWWanXqbdxFTgJmVwx0JlcnEK3dqkKDIbVk6mxAHvEESI9+oDnHvO8IMHqF+GbrTCzVtAs0zwhYI/uHJA==} 3111 + peerDependencies: 3112 + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 3113 + dependencies: 3114 + react: 18.2.0 3115 + dev: false 3116 + 3006 3117 /@rushstack/eslint-patch/1.1.4: 3007 3118 resolution: {integrity: sha512-LwzQKA4vzIct1zNZzBmRKI9QuNpLgTQMEjsQLf3BXuGYb3QPTP4Yjf6mkdX+X1mYttZ808QpOwAzZjv28kq7DA==} 3008 3119 dev: true ··· 4445 4556 /clone/1.0.4: 4446 4557 resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==} 4447 4558 engines: {node: '>=0.8'} 4559 + dev: false 4560 + 4561 + /clsx/1.2.1: 4562 + resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==} 4563 + engines: {node: '>=6'} 4448 4564 dev: false 4449 4565 4450 4566 /codemirror/5.65.7:
+7
.changeset/happy-donuts-warn.md
··· 1 + --- 2 + '@luke-ui/button': minor 3 + --- 4 + 5 + Update types 6 + 7 + Export `useButton` hook
+3
packages/button/package.json
··· 26 26 "eslint": "eslint src", 27 27 "lint": "TIMING=1 pnpm eslint --fix" 28 28 }, 29 + "dependencies": { 30 + "@react-aria/button": "^3.6.1" 31 + }, 29 32 "devDependencies": { 30 33 "@luke-ui-internal/dev": "workspace:*", 31 34 "@luke-ui-internal/tsconfig": "workspace:*",
+109 -40
packages/button/src/button.tsx
··· 1 + import type { AriaButtonProps } from '@react-aria/button'; 2 + import { useButton as useAriaButton } from '@react-aria/button'; 1 3 import type { ButtonHTMLAttributes, ForwardedRef } from 'react'; 2 - import { forwardRef } from 'react'; 4 + import { forwardRef, useRef } from 'react'; 3 5 4 6 //////////////////////////////////////////////////////////////////////////////// 5 7 6 8 /** 7 9 * Button 8 10 * 9 - * Buttons are an interactive element activated by a user with a 11 + * @description Buttons are an interactive element activated by a user with a 10 12 * mouse, keyboard, finger, voice command, or other assistive technology. Once 11 13 * activated, it then performs a programmable action, such as submitting a form 12 14 * or opening a dialog. 13 15 * 14 - * @see https://example.com/package/button 16 + * @see https://luke-ui.vercel.app/package/button 15 17 */ 16 18 17 19 const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button( 18 20 props: ButtonProps, 19 21 forwardedRef: ForwardedRef<HTMLButtonElement> 20 22 ) { 21 - return <button {...props} ref={forwardedRef} />; 23 + const { children, tabIndex, ...useButtonProps } = props; 24 + const { buttonProps } = useButton(useButtonProps); 25 + 26 + return ( 27 + <button ref={forwardedRef} tabIndex={tabIndex} {...buttonProps}> 28 + {children} 29 + </button> 30 + ); 22 31 }); 23 32 24 33 type NativeButtonProps = ButtonHTMLAttributes<HTMLButtonElement>; 25 34 type ButtonProps = { 26 35 /** 27 36 * Identifies the element (or elements) whose contents or presence are 28 - * controlled by the element on which this attribute is set. 29 - * 30 - * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls 37 + * controlled by the current element. 38 + * @see [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) 31 39 */ 32 40 'aria-controls'?: NativeButtonProps['aria-controls']; 33 41 /** 34 - * Identifies the element (or elements) that describes the element on which 35 - * the attribute is set. 36 - * 37 - * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby 42 + * Identifies the element (or elements) that labels the current element. 43 + * @see [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) 38 44 */ 39 45 'aria-describedby'?: NativeButtonProps['aria-describedby']; 40 46 /** 41 - * Indicates if a control is expanded or collapsed, and whether or not its 42 - * child elements are displayed or hidden. 43 - * 44 - * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded 47 + * Identifies the element (or elements) that provide a detailed, extended 48 + * description for the object. 49 + * @see [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-details) 50 + */ 51 + 'aria-details'?: NativeButtonProps['aria-details']; 52 + /** 53 + * Indicates whether the element, or another grouping element it controls, is 54 + * currently expanded or collapsed. 55 + * @see [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) 45 56 */ 46 57 'aria-expanded'?: NativeButtonProps['aria-expanded']; 47 58 /** 48 - * Indicates the availability and type of interactive popup element that can 49 - * be triggered by the element on which the attribute is set. 50 - * 51 - * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup 59 + * Indicates the availability and type of interactive popup element, such as 60 + * menu or dialog, that can be triggered by an element. 61 + * @see [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup) 52 62 */ 53 63 'aria-haspopup'?: NativeButtonProps['aria-haspopup']; 54 64 /** 55 - * Defines a string value that labels an interactive element. 56 - * 57 - * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label 58 - */ 65 + * Defines a string value that labels the current element. 66 + * @see [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) 67 + * */ 59 68 'aria-label'?: NativeButtonProps['aria-label']; 69 + /** 70 + * Identifies the element (or elements) that labels the current element. 71 + * @see [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) 72 + * */ 73 + 'aria-labelledby'?: NativeButtonProps['aria-labelledby']; 74 + /** 75 + * Indicates the current "pressed" state of toggle buttons. 76 + * @see [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed) 77 + */ 78 + 'aria-pressed'?: NativeButtonProps['aria-pressed']; 79 + /** Whether the element should receive focus on render. */ 80 + 'autoFocus'?: NativeButtonProps['autoFocus']; 81 + /** 82 + * The content to display in the button. 83 + */ 60 84 'children': NativeButtonProps['children']; 61 85 // "data": NativeButtonProps['data'] 62 - /** 63 - * When disabled, prevents the user from interacting with the button 64 - * (it cannot be pressed or focused). 65 - */ 86 + /** Whether the button is disabled. */ 66 87 'disabled'?: NativeButtonProps['disabled']; 67 88 /** 68 - * Defines an identifier (ID) which must be unique in the whole document. 69 - * Its purpose is to identify the element when linking (using a 70 - * [fragment identifier](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#fragment)), 71 - * scripting, or styling (with CSS). 89 + * The element's unique identifier. 90 + * @see [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). 72 91 */ 73 92 'id'?: NativeButtonProps['id']; 74 - // "loading": NativeButtonProps['loading'] 75 93 /** 76 94 * The name of the button, submitted as a pair with the button's value as part 77 95 * of the form data, when that button is used to submit the form. 78 96 */ 79 97 'name'?: NativeButtonProps['name']; 80 - 'onClick'?: NativeButtonProps['onClick']; 81 - 'onKeyDown'?: NativeButtonProps['onKeyDown']; 82 - 'onKeyUp'?: NativeButtonProps['onKeyUp']; 83 - // "prominence": NativeButtonProps['prominence'] 84 - // "size": NativeButtonProps['size'] 85 - /** Represents the tab order of the current element. */ 98 + /** Handler that is called when the element loses focus. */ 99 + 'onBlur'?: AriaButtonProps['onBlur']; 100 + /** Handler that is called when the element receives focus. */ 101 + 'onFocus'?: AriaButtonProps['onFocus']; 102 + /** Handler that is called when the press is released over the target. */ 103 + 'onPress'?: AriaButtonProps['onPress']; 104 + /** Handler that is called when a press interaction starts. */ 105 + 'onPressStart'?: AriaButtonProps['onPressStart']; 106 + /** 107 + * Handler that is called when a press interaction ends, either 108 + * over the target or when the pointer leaves the target. 109 + */ 110 + 'onPressEnd'?: AriaButtonProps['onPressEnd']; 111 + /** Handler that is called when the press state changes. */ 112 + 'onPressChange'?: AriaButtonProps['onPressChange']; 113 + /** 114 + * Handler that is called when a press is released over the target, regardless of 115 + * whether it started on the target or not. 116 + */ 117 + 'onPressUp'?: AriaButtonProps['onPressUp']; 118 + /** 119 + * Indicates that its element can be focused, and where it participates in 120 + * sequential keyboard navigation (usually with the "Tab" key). 121 + * @see [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) 122 + */ 86 123 'tabIndex'?: NativeButtonProps['tabIndex']; 87 - // "tone": NativeButtonProps['tone'] 88 - /** The default behavior of the button. */ 124 + /** 125 + * The behavior of the button when used in an HTML form. 126 + * @default 'button' 127 + */ 89 128 'type'?: NativeButtonProps['type']; 90 129 /** 91 130 * Defines the value associated with the button's name when it's submitted 92 131 * with the form data. 93 132 */ 94 133 'value'?: NativeButtonProps['value']; 134 + 135 + /** @todo add these props */ 136 + // "loading": NativeButtonProps['loading'] 137 + // "prominence": NativeButtonProps['prominence'] 138 + // "size": NativeButtonProps['size'] 139 + // "tone": NativeButtonProps['tone'] 95 140 }; 141 + 142 + //////////////////////////////////////////////////////////////////////////////// 143 + 144 + /** 145 + * useButton 146 + * 147 + * @description Provides the behavior and accessibility implementation for a 148 + * button component. 149 + * Handles mouse, keyboard, and touch interactions, focus behavior, and ARIA 150 + * props for both native button elements and custom element types. 151 + */ 152 + 153 + export function useButton(props: UseButtonProps) { 154 + const ref = useRef(null); 155 + return useAriaButton( 156 + { 157 + ...props, 158 + isDisabled: props.disabled, 159 + }, 160 + ref 161 + ); 162 + } 163 + 164 + export type UseButtonProps = Omit<ButtonProps, 'children' | 'tabIndex'>; 96 165 97 166 //////////////////////////////////////////////////////////////////////////////// 98 167
+2 -2
packages/button/src/index.ts
··· 1 - export { Button } from './button'; 1 + export { Button, useButton } from './button'; 2 2 3 3 // types 4 4 5 - export type { ButtonProps } from './button'; 5 + export type { ButtonProps, UseButtonProps } from './button';