@xylabs/react-button 7.1.17 → 7.2.0

package/README.md

@@ -1,67 +1,27 @@
-[![logo][]](https://xylabs.com)
-
 # @xylabs/react-button
 
-[![npm-badge][]][npm-link]
-[![npm-downloads-badge][]][npm-link]
-[![jsdelivr-badge][]][jsdelivr-link]
-[![npm-license-badge][]](LICENSE)
-
-> XY Labs generalized React library 
-
-## Table of Contents
+[![npm][npm-badge]][npm-link]
 
--   [Description](#description)
--   [Install](#install)
--   [Maintainers](#maintainers)
--   [License](#license)
--   [Credits](#credits)
-
-## Description
-
-Common React code that is used throughout XYO projects that use React.
+> Common React library for all XY Labs projects that use React
 
 ## Install
 
-Using npm:
-
 ```sh
-npm i --save @xylabs/react-button
+npm install {{name}}
 ```
 
-Using yarn:
+or
 
 ```sh
-yarn add @xylabs/react-button
+yarn add {{name}}
 ```
 
-## Documentation
-[Developer Reference](https://xylabs.github.io/sdk-react)
-
-[Storybook](https://xylabs.github.io/sdk-react/storybook)
-
-## Maintainers
-
--   [Arie Trouw](https://github.com/arietrouw) ([arietrouw.com](https://arietrouw.com))
--   [Matt Jones](https://github.com/jonesmac)
--   [Joel Carter](https://github.com/JoelBCarter)
--   [Jordan Trouw](https://github.com/jordantrouw)
 
 ## License
 
-See the [LICENSE](LICENSE) file for license details
+See the [LICENSE](LICENSE) file for license rights and limitations (LGPL-3.0-only).
 
-## Credits
 
-[Made with 🔥and ❄️ by XY Labs](https://xylabs.com)
-
-[logo]: https://cdn.xy.company/img/brand/XYPersistentCompany_Logo_Icon_Colored.svg
 
 [npm-badge]: https://img.shields.io/npm/v/@xylabs/react-button.svg
 [npm-link]: https://www.npmjs.com/package/@xylabs/react-button
-
-[npm-downloads-badge]: https://img.shields.io/npm/dw/@xylabs/react-button
-[npm-license-badge]: https://img.shields.io/npm/l/@xylabs/react-button
-
-[jsdelivr-badge]: https://data.jsdelivr.com/v1/package/npm/@xylabs/react-button/badge
-[jsdelivr-link]: https://www.jsdelivr.com/package/npm/@xylabs/react-button

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xylabs/react-button",
-  "version": "7.1.17",
+  "version": "7.2.0",
   "description": "Common React library for all XY Labs projects that use React",
   "keywords": [
     "utility",
@@ -31,46 +31,74 @@
     },
     "./package.json": "./package.json"
   },
-  "module": "./dist/browser/index.mjs",
-  "types": "dist/browser/index.d.ts",
   "files": [
     "dist",
-    "src"
-  ],
-  "workspaces": [
-    "packages/*"
+    "README.md"
   ],
   "dependencies": {
-    "@xylabs/react-pixel": "~7.1.17",
-    "@xylabs/react-shared": "~7.1.17",
-    "@xylabs/sdk-js": "~5.0.80"
+    "@xylabs/react-pixel": "~7.2.0",
+    "@xylabs/react-shared": "~7.2.0"
   },
   "devDependencies": {
-    "@mui/material": "~7.3.9",
-    "@storybook/react-vite": "~10.2.16",
+    "@mui/material": "~7.3.10",
+    "@opentelemetry/api": "^1.9.1",
+    "@opentelemetry/sdk-trace-base": ">=2.7.1 <3",
+    "@storybook/react-vite": "~10.3.6",
+    "@types/node": "~25.6.0",
     "@types/react": "^19.2.14",
-    "@xylabs/react-flexbox": "~7.1.17",
-    "@xylabs/react-pixel": "~7.1.17",
-    "@xylabs/ts-scripts-yarn3": "~7.4.9",
-    "@xylabs/tsconfig": "~7.4.9",
-    "@xylabs/tsconfig-dom": "~7.4.9",
-    "@xylabs/tsconfig-react": "~7.4.9",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "react-router-dom": "^7.13.1",
-    "storybook": "~10.2.16",
+    "@xylabs/pixel": "^5.1.0",
+    "@xylabs/sdk-js": "~5.1.0",
+    "@xylabs/toolchain": "~7.12.3",
+    "@xylabs/tsconfig": "~7.12.3",
+    "@xylabs/tsconfig-dom": "~7.12.3",
+    "@xylabs/tsconfig-react": "~7.12.3",
+    "async-mutex": ">=0.5.0 <0.6",
+    "bn.js": ">=5.2.3 <5.3",
+    "bowser": ">=2.14.1 <2.15",
+    "buffer": ">=6.0.3 <6.1",
+    "chalk": ">=5.6.2 <5.7",
+    "esbuild": "^0.28.0",
+    "eslint": ">=10.2.1 <11",
+    "ethers": ">=6.16.0 <7",
+    "fast-deep-equal": ">=3.1.3 <3.2",
+    "js-cookie": ">=3.0.5 <3.1",
+    "mixpanel-browser": "^2.78.0",
+    "pako": "~2.1.0",
+    "query-string": "~9.3.1",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "react-router-dom": "~7.14.2",
+    "spark-md5": ">=3.0.2 <3.1",
+    "storybook": "~10.3.6",
     "typescript": "^5.9.3",
-    "vite": "~7.3.1",
-    "zod": "^4.3.6"
+    "vite": "~8.0.10",
+    "zod": "^4.4.3",
+    "@xylabs/react-flexbox": "~7.2.0"
   },
   "peerDependencies": {
-    "@mui/material": ">=6 <8",
-    "react": "^19",
-    "react-dom": "^19",
-    "react-router-dom": "^7",
-    "zod": "^4"
+    "@mui/material": ">=7.3.10 <7.4",
+    "@opentelemetry/api": ">=1.9.1 <2",
+    "@opentelemetry/sdk-trace-base": ">=2.7.1 <3",
+    "@xylabs/pixel": ">=5.1.0 <6",
+    "@xylabs/sdk-js": ">=5.1.0 <5.2",
+    "async-mutex": ">=0.5.0 <1",
+    "bn.js": ">=5.2.3 <6",
+    "bowser": ">=2.14.1 <3",
+    "buffer": ">=6.0.3 <7",
+    "chalk": ">=5.6.2 <6",
+    "ethers": ">=6.16.0 <7",
+    "fast-deep-equal": ">=3.1.3 <4",
+    "js-cookie": ">=3.0.5 <4",
+    "mixpanel-browser": ">=2.78.0 <3",
+    "pako": ">=2.1.0 <2.2",
+    "query-string": ">=9.3.1 <9.4",
+    "react": ">=19.2.5 <20",
+    "react-dom": ">=19.2.5 <20",
+    "react-router-dom": ">=7.14.2 <7.15",
+    "spark-md5": ">=3.0.2 <4",
+    "zod": ">=4.4.3 <5"
   },
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/ButtonEx.stories.tsx

@@ -1,86 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
-import { UserEventsProvider, XyoUserEventHandler } from '@xylabs/react-pixel'
-import React from 'react'
-
-import { ButtonEx } from './ButtonEx.tsx'
-
-const StorybookEntry = {
-  argTypes: {},
-  component: ButtonEx,
-  parameters: { docs: { page: null } },
-  title: 'button/ButtonEx',
-} as Meta<typeof ButtonEx>
-
-const DefaultTemplate: StoryFn<typeof ButtonEx> = args => (
-  <FlexRow justifyContent="flex-start">
-    <FlexCol marginX={1}>
-      <ButtonEx {...args}>Default</ButtonEx>
-    </FlexCol>
-    <FlexCol marginX={1}>
-      <ButtonEx variant="outlined" {...args}>
-        Outlined
-      </ButtonEx>
-    </FlexCol>
-    <FlexCol marginX={1}>
-      <ButtonEx variant="contained" {...args}>
-        Contained
-      </ButtonEx>
-    </FlexCol>
-  </FlexRow>
-)
-
-const UserEventTemplate: StoryFn<typeof ButtonEx> = args => (
-  <UserEventsProvider userEvents={XyoUserEventHandler.get()}>
-    <FlexRow justifyContent="flex-start">
-      <FlexCol marginX={1}>
-        <ButtonEx {...args}>Default</ButtonEx>
-      </FlexCol>
-      <FlexCol marginX={1}>
-        <ButtonEx variant="outlined" {...args}>
-          Outlined
-        </ButtonEx>
-      </FlexCol>
-      <FlexCol marginX={1}>
-        <ButtonEx variant="contained" {...args}>
-          Contained
-        </ButtonEx>
-      </FlexCol>
-    </FlexRow>
-  </UserEventsProvider>
-)
-
-const Default = DefaultTemplate.bind({})
-Default.args = {}
-
-const BusyCircular = DefaultTemplate.bind({})
-BusyCircular.args = { busy: true, busyVariant: 'circular' }
-
-const BusyLinear = DefaultTemplate.bind({})
-BusyLinear.args = { busy: true, busyVariant: 'linear' }
-
-const Href = DefaultTemplate.bind({})
-Href.args = { href: 'https://xylabs.com' }
-
-const HrefTarget = DefaultTemplate.bind({})
-HrefTarget.args = { href: 'https://xylabs.com', target: '_blank' }
-
-const HrefTargetOnClick = DefaultTemplate.bind({})
-HrefTargetOnClick.args = {
-  href: 'https://xylabs.com', target: '_blank', onClick: () => console.log('Clicked'),
-}
-
-const HrefTargetWithEvents = UserEventTemplate.bind({})
-HrefTargetWithEvents.args = { href: 'https://xylabs.com', target: '_blank' }
-
-const HrefTargetOnClickWithEvents = UserEventTemplate.bind({})
-HrefTargetOnClickWithEvents.args = {
-  href: 'https://xylabs.com', target: '_blank', onClick: () => console.log('Clicked'),
-}
-
-export {
-  BusyCircular, BusyLinear, Default, Href, HrefTarget, HrefTargetOnClick, HrefTargetOnClickWithEvents,
-  HrefTargetWithEvents,
-}
-
-export default StorybookEntry

package/src/components/ButtonEx.tsx

@@ -1,18 +0,0 @@
-import React from 'react'
-
-import { ButtonExBase } from './ButtonExBase.tsx'
-import type { ButtonExProps } from './ButtonExProps.tsx'
-import { ButtonToEx } from './ButtonExTo.tsx'
-
-const ButtonEx = ({ ref, ...props }: ButtonExProps) => {
-  if (props.to === undefined) {
-    return <ButtonExBase {...props} />
-  } else {
-    const { to, ...additionalProps } = props
-    return <ButtonToEx to={to} ref={ref} {...additionalProps} />
-  }
-}
-
-ButtonEx.displayName = 'ButtonExXYLabs'
-
-export { ButtonEx }

package/src/components/ButtonExBase.tsx

@@ -1,70 +0,0 @@
-import { Button, useTheme } from '@mui/material'
-import { useUserEvents } from '@xylabs/react-pixel'
-import {
-  BusyCircularProgress, BusyLinearProgress, mergeBoxlikeStyles,
-} from '@xylabs/react-shared'
-import { isString, toPromise } from '@xylabs/sdk-js'
-import type { MouseEvent } from 'react'
-import React from 'react'
-
-import type { ButtonExProps } from './ButtonExProps.tsx'
-
-const ButtonExBase = ({
-  ref, funnel, intent, target, placement, disableUserEvents, href, ...props
-}: ButtonExProps) => {
-  const theme = useTheme()
-  const userEvents = useUserEvents()
-  const {
-    busy, busyVariant = 'linear', busyOpacity, onClick, children, ...rootProps
-  } = mergeBoxlikeStyles<ButtonExProps>(theme, props)
-
-  const localOnClick = (event: MouseEvent<HTMLButtonElement>) => {
-    if (busy) {
-      // If it is busy, do not allow href clicks
-      event.preventDefault()
-    } else {
-      const elementName = props['aria-label'] ?? event.currentTarget.textContent
-      // we do this crazy navigate thing so that we can set it up outside the promise so that safari does not block it
-      const windowToNavigate = () => (isString(target) && isString(href)) ? window.open('', target) ?? globalThis : globalThis
-      const callOnClickAndFollowHref = (windowToNav = windowToNavigate()) => {
-        onClick?.(event)
-        if (isString(href)) {
-          windowToNav.location.href = href
-        }
-      }
-      if (!disableUserEvents && userEvents) {
-        event.preventDefault()
-        const windowToNav = windowToNavigate()
-        if (isString(href)) {
-          toPromise(userEvents.userClick({
-            elementName, intent, funnel, placement,
-          })).then(() => {
-            callOnClickAndFollowHref(windowToNav)
-          }).catch((ex) => {
-            console.error('User event failed', elementName, funnel, placement, ex)
-            callOnClickAndFollowHref(windowToNav)
-          })
-        }
-        onClick?.(event)
-      } else {
-        callOnClickAndFollowHref()
-      }
-    }
-  }
-
-  return (
-    <Button ref={ref} href={href} onClick={localOnClick} target={target} {...rootProps}>
-      {busy && busyVariant === 'linear'
-        ? <BusyLinearProgress rounded opacity={busyOpacity ?? 0} />
-        : null}
-      {busy && busyVariant === 'circular'
-        ? <BusyCircularProgress rounded size={24} opacity={busyOpacity ?? 0.5} />
-        : null}
-      {children}
-    </Button>
-  )
-}
-
-ButtonExBase.displayName = 'ButtonExBaseXYLabs'
-
-export { ButtonExBase }

package/src/components/ButtonExProps.tsx

@@ -1,49 +0,0 @@
-import type { ButtonProps } from '@mui/material'
-import type { BoxlikeComponentProps, BusyProps } from '@xylabs/react-shared'
-import { isDefined, isString } from '@xylabs/sdk-js'
-import type { NavigateOptions, To } from 'react-router-dom'
-
-export interface ButtonOnlyHrefProps {
-  href?: string
-  to?: never
-  toOptions?: never
-}
-
-export interface ButtonOnlyToProps {
-  href?: never
-  to?: To
-  toOptions?: NavigateOptions
-}
-
-export interface ButtonNoToOrHrefProps {
-  href?: never
-  to?: never
-  toOptions?: never
-}
-
-export type ButtonHrefOrToOrNoProps = ButtonOnlyHrefProps | ButtonOnlyToProps | ButtonNoToOrHrefProps
-
-export interface ButtonHrefAndToProps {
-  href?: string
-  to?: To
-  toOptions?: NavigateOptions
-}
-
-export const asButtonHrefOrToProps = ({
-  href, to, toOptions,
-}: ButtonHrefAndToProps): ButtonHrefOrToOrNoProps => {
-  if (isString(href) && (isDefined(to) || isDefined(toOptions))) {
-    throw new Error('ButtonExProps: cannot have both href and to')
-  }
-  return isString(href) ? { href } : isDefined(to) ? { to, toOptions } : {}
-}
-
-export interface ButtonBaseExProps extends Omit<ButtonProps, 'href'>, BoxlikeComponentProps, BusyProps {
-  disableUserEvents?: boolean
-  funnel?: string
-  intent?: string
-  placement?: string
-  target?: string
-}
-
-export type ButtonExProps = ButtonBaseExProps & ButtonHrefOrToOrNoProps

package/src/components/ButtonExTo.tsx

@@ -1,25 +0,0 @@
-import { isDefined } from '@xylabs/sdk-js'
-import type { MouseEvent } from 'react'
-import React from 'react'
-import { useNavigate } from 'react-router-dom'
-
-import { ButtonExBase } from './ButtonExBase.tsx'
-import type { ButtonExProps } from './ButtonExProps.tsx'
-
-const ButtonToEx = ({
-  ref, to, toOptions, onClick, ...props
-}: ButtonExProps) => {
-  const navigate = useNavigate()
-  const localOnClick = (event: MouseEvent<HTMLButtonElement>) => {
-    onClick?.(event)
-    if (isDefined(to)) {
-      void navigate(to, toOptions)
-    }
-  }
-
-  return <ButtonExBase ref={ref} onClick={localOnClick} {...props} />
-}
-
-ButtonToEx.displayName = 'ButtonToExXYLabs'
-
-export { ButtonToEx }

package/src/components/index.ts

@@ -1,2 +0,0 @@
-export * from './ButtonEx.tsx'
-export * from './ButtonExProps.tsx'

package/src/index.ts

@@ -1 +0,0 @@
-export * from './components/index.ts'