feat: add get helper to Button and ButtonGroup (#289)

.changeset/moody-pets-nail.md

@@ -0,0 +1,7 @@
+---
+'leva': patch
+'@leva-ui/plugin-bezier': patch
+'@leva-ui/plugin-spring': patch
+---
+
+Feat: pass `get` function to Button and ButtonGroup

demo/package.json

@@ -9,22 +9,22 @@
   },
   "dependencies": {
     "@radix-ui/react-icons": "^1.0.3",
-    "@react-three/drei": "^7.22.4",
-    "@react-three/fiber": "^7.0.19",
-    "@stitches/react": "1.2.5",
+    "@react-three/drei": "^8.3.1",
+    "@react-three/fiber": "^7.0.24",
+    "@stitches/react": "1.2.6",
     "leva": "*",
     "noisejs": "^2.1.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-use": "^17.3.1",
-    "three": "^0.134.0",
+    "three": "^0.135.0",
     "wouter": "^2.7.5"
   },
   "devDependencies": {
-    "@types/react": "^17.0.35",
+    "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",
     "@vitejs/plugin-react-refresh": "^1.3.6",
-    "typescript": "^4.5.2",
-    "vite": "2.6.14"
+    "typescript": "^4.5.4",
+    "vite": "2.7.3"
   }
 }

demo/src/sandboxes/leva-busy/src/App.tsx

@@ -16,7 +16,7 @@ function frame() {
 const ExtraControls = () => {
   const data = useControls('folder.subfolder', {
     // eslint-disable-next-line no-console
-    'Hello Button': button(() => console.log('hello')),
+    'Hello Button': button((get) => console.log('hello', get('folder.subfolder.deep nested.pos2d'))),
     'deep nested': folder(
       {
         pos2d: { value: { x: 3, y: 4 }, lock: true },

package.json

@@ -57,28 +57,28 @@
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.0",
-    "@babel/preset-env": "^7.16.4",
-    "@babel/preset-react": "^7.16.0",
-    "@babel/preset-typescript": "^7.16.0",
-    "@changesets/cli": "^2.18.0",
-    "@emotion/react": "^11.6.0",
+    "@babel/core": "^7.16.5",
+    "@babel/preset-env": "^7.16.5",
+    "@babel/preset-react": "^7.16.5",
+    "@babel/preset-typescript": "^7.16.5",
+    "@changesets/cli": "^2.18.1",
+    "@emotion/react": "^11.7.1",
     "@preconstruct/cli": "^2.1.5",
     "@radix-ui/react-icons": "^1.0.3",
-    "@storybook/addon-actions": "^6.3.12",
-    "@storybook/addon-essentials": "^6.3.12",
-    "@storybook/addon-links": "^6.3.12",
-    "@storybook/addon-storysource": "^6.3.12",
-    "@storybook/react": "^6.3.12",
+    "@storybook/addon-actions": "^6.4.9",
+    "@storybook/addon-essentials": "^6.4.9",
+    "@storybook/addon-links": "^6.4.9",
+    "@storybook/addon-storysource": "^6.4.9",
+    "@storybook/react": "^6.4.9",
     "@testing-library/cypress": "^8.0.2",
-    "@types/react": "^17.0.35",
+    "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",
-    "@typescript-eslint/eslint-plugin": "^5.4.0",
-    "@typescript-eslint/parser": "^5.4.0",
+    "@typescript-eslint/eslint-plugin": "^5.7.0",
+    "@typescript-eslint/parser": "^5.7.0",
     "all-contributors-cli": "^6.20.0",
     "babel-eslint": "^10.1.0",
     "cypress": "6.9.1",
-    "eslint": "^8.3.0",
+    "eslint": "^8.4.1",
     "eslint-config-react-app": "^6.0.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-flowtype": "^8.0.3",
@@ -89,13 +89,13 @@
     "husky": "^7.0.4",
     "patch-package": "^6.4.7",
     "postinstall-postinstall": "^2.1.0",
-    "prettier": "^2.4.1",
+    "prettier": "^2.5.1",
     "pretty-quick": "^3.1.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "start-server-and-test": "^1.14.0",
     "tsd": "^0.19.0",
-    "typescript": "4.5.2"
+    "typescript": "4.5.4"
   },
   "prettier": {
     "bracketSameLine": true,

packages/leva/package.json

@@ -22,17 +22,17 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@radix-ui/react-portal": "^0.1.1",
-    "@radix-ui/react-tooltip": "0.1.1",
-    "@stitches/react": "1.2.5",
-    "@use-gesture/react": "^10.1.5",
+    "@radix-ui/react-portal": "^0.1.3",
+    "@radix-ui/react-tooltip": "0.1.6",
+    "@stitches/react": "1.2.6",
+    "@use-gesture/react": "^10.2.4",
     "@welldone-software/why-did-you-render": "^6.2.3",
-    "colord": "^2.9.1",
+    "colord": "^2.9.2",
     "dequal": "^2.0.2",
     "merge-value": "^1.0.0",
     "react-colorful": "^5.5.1",
     "react-dropzone": "^11.4.2",
     "v8n": "^1.3.3",
-    "zustand": "^3.6.5"
+    "zustand": "^3.6.7"
   }
 }

packages/leva/src/components/Button/Button.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { useStoreContext } from '../..'
 import { ButtonInput } from '../../types'
 import { Row } from '../UI'
 import { StyledButton } from './StyledButton'
@@ -8,9 +9,10 @@ type ButtonProps = {
 } & Omit<ButtonInput, 'type'>
 
 export function Button({ onClick, settings, label }: ButtonProps) {
+  const store = useStoreContext()
   return (
     <Row>
-      <StyledButton disabled={settings.disabled} onClick={() => onClick()}>
+      <StyledButton disabled={settings.disabled} onClick={() => onClick(store.get)}>
         {label}
       </StyledButton>
     </Row>

packages/leva/src/components/ButtonGroup/ButtonGroup.tsx

@@ -3,6 +3,7 @@ import { Row, Label } from '../UI'
 import { StyledButtonGroup } from './StyledButtonGroup'
 import { StyledButtonGroupButton } from './StyledButtonGroupButton'
 import { ButtonGroupInputOpts, ButtonGroupOpts } from '../../types'
+import { useStoreContext } from '../..'
 
 export type ButtonGroupInternalOpts = {
   label: null | JSX.Element | string
@@ -24,12 +25,13 @@ const getOpts = ({ label: _label, opts: _opts }: ButtonGroupInternalOpts) => {
 
 export function ButtonGroup(props: ButtonGroupInternalOpts) {
   const { label, opts } = getOpts(props)
+  const store = useStoreContext()
   return (
     <Row input={!!label}>
       {label && <Label>{label}</Label>}
       <StyledButtonGroup>
         {Object.entries(opts).map(([label, onClick]) => (
-          <StyledButtonGroupButton key={label} onClick={() => onClick()}>
+          <StyledButtonGroupButton key={label} onClick={() => onClick(store.get)}>
             {label}
           </StyledButtonGroupButton>
         ))}

packages/leva/src/helpers/button.ts

@@ -8,6 +8,6 @@ const defaultSettings = { disabled: false }
  * @param name button name
  * @param onClick function that executes when the button is clicked
  */
-export function button(onClick: () => any, settings?: ButtonSettings): ButtonInput {
+export function button(onClick: ButtonInput['onClick'], settings?: ButtonSettings): ButtonInput {
   return { type: SpecialInputs.BUTTON, onClick, settings: { ...defaultSettings, ...settings } }
 }

packages/leva/src/types/public.ts

@@ -48,12 +48,12 @@ export type ButtonSettings = { disabled?: boolean }
 
 export type ButtonInput = {
   type: SpecialInputs.BUTTON
-  onClick: () => any
+  onClick: (get: (path: string) => any) => void
   settings: ButtonSettings
 }
 
 export type ButtonGroupOpts = {
-  [title: string]: () => void
+  [title: string]: (get: (path: string) => any) => void
 }
 
 export type ButtonGroupInputOpts =

packages/leva/stories/inputs/Button.stories.tsx

@@ -12,7 +12,8 @@ export default {
 
 export const Button = () => {
   const values = useControls({
-    foo: button(() => alert('click')),
+    number: 3,
+    foo: button((get) => alert(`Number value is ${get('number').toFixed(2)}`)),
   })
 
   return (
@@ -24,7 +25,8 @@ export const Button = () => {
 
 export const DisabledButton = () => {
   const values = useControls({
-    foo: button(() => alert('click'), { disabled: true }),
+    number: 3,
+    foo: button((get) => alert(`Number value is ${get('number')}`), { disabled: true }),
   })
 
   return (

packages/plugin-bezier/package.json

@@ -17,6 +17,6 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "react-use-measure": "^2.0.4"
+    "react-use-measure": "^2.1.1"
   }
 }

packages/plugin-spring/package.json

@@ -17,6 +17,6 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@react-spring/web": "9.3.0"
+    "@react-spring/web": "9.3.1"
   }
 }